Links are incorrect when page first loads

[Herohtar]

If you open https://headlesscms.org/ and don't change any of the filter settings, some of the CMS item links are wrong. They seem to be fine all the way to the second item listed under "Closed Source" -- at that point, Appernetic links to the page for Watson Content Hub, BowTie links to Quintype, etc. It seems that once you change the filters or sort options the problem goes away, even if you go back to the default. Reloading the page brings the problem back.

[erquhart]

Hmm can't seem to reproduce this.

[Herohtar]

It could be your browser; it seems to work fine in Chrome and IE, but I can reproduce it in both Edge and Firefox. (on Windows 10)

[erquhart]

Works in IE but not FF or Edge? Weird. I'd say it was maybe an newer ES language feature that isn't available in older browsers, but that would count IE out.

[JelaMiraj]

This bug occurs for me on the latest Chrome, Firefox, & Edge.

I currently mainly use chrome 64-bit version 70.0.3538.102 on windows 10 & this problem even occurs for me in an incognito window.

[rmcfadzean]

Having a hard time tracking down how to fix it (not familiar with react-static's way of doing things) but from what I can tell this seems to be related to the initial static project order vs when the data is loaded in.

Here is the top row of closed-source projects (with the slugs included while I was debugging). These all link to the correct projects and is from the npm run stage build BEFORE the JS is loaded and overwrites/breaks everything.

As soon as the JS & data is loaded, the order is the same as on the live version However, the links are still going to the locations for the original order. (Appernetic linking to Watson Content Hub, Bowtie linking to Contentful). This happens for all the remaining projects down the list too.

Interestingly, doesn't happen with the FOSS projects. :thinking:

I'll keep digging.

[JelaMiraj]

@rmcfadzean Thanks for making some progress on figuring this out! :sweat_smile:

[rmcfadzean]

So... I have some bad news and some less bad news.

The bad news is that even after digging, I'm not familiar enough with react-static to work out what's going on there. I just can't get it to play nice.

The less bad news is that in my frustration I started rewriting the project using Gatsby instead of react-static. You can find a live WIP demo here https://headless-gatsby.netlify.com (I'll open up the repo in a little but happy to invite anyone in the meantime)

I'm slooooowly adding in all the old features while also taking a few liberties and adding new ones.

So far I have

• Changed up some project attributes to turn them into a tag-style system
• Implemented some filtering
• Started migrating everything to use styled components (a bit of a learning experience here as I'm more used to sass but it's been fun!)
• Ported over a few test projects & styles
• Kept basically all of the Netlify branding!
• Pages!
• Pulls repo & twitter data on build

So far I don't have

• Repo & twitter data charting/trends/caching
• Sorting of any variety

Are any of the Netlify people interested in this rewrite? Should I keep going? I'm happy to come on as as maintainer if that helps.

PS I :heart: Netlifly.

[erquhart]

Thanks for digging into this! I'd rather not switch systems to address a bug, we should figure out what the problem is and address it specifically.

[lucasff]

I also noticed this. All links when you hover the cards are messed up.