Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix formatting issues with the endpoint badge doc page #2837

Closed
paulmelnikow opened this issue Jan 22, 2019 · 0 comments · Fixed by #2906
Closed

Fix formatting issues with the endpoint badge doc page #2837

paulmelnikow opened this issue Jan 22, 2019 · 0 comments · Fixed by #2906
Labels
bug Bugs in badges and the frontend frontend The Docusaurus app serving the docs site

Comments

@paulmelnikow
Copy link
Member

The page for the new (beta) Endpoint badge has some serious issues. This seems to be caused by an interop issue between styled-components and Next.js SSR. I've spent a fair amount of time trying to fix it and don't think I should spend any more given #1943.

To reproduce the problem, go to the home page, then click the link for the Endpoint badge.

After refresh, the page looks a little better, but it still not applying all the styles that are being defined. It's just a different subset of them that happens to look better.

I think the way to fix this in Next.js is to collect the missing stylesheets in https://github.com/badges/shields/blob/master/pages/_document.js and I'm not opposed to doing that if someone knows how.

However, I'd lean toward resolving this in tandem with tackling #1943.

@paulmelnikow paulmelnikow added frontend The Docusaurus app serving the docs site bug Bugs in badges and the frontend labels Jan 22, 2019
This was referenced Jan 22, 2019
@paulmelnikow paulmelnikow changed the title Fix formatting issues with the endpoint badge Fix formatting issues with the endpoint badge doc page Jan 22, 2019
@paulmelnikow paulmelnikow mentioned this issue Feb 2, 2019
9 tasks
paulmelnikow added a commit that referenced this issue Feb 2, 2019
Cherry-picked from #2906 (conflicts with that)

Partly addresses #2837 but does not resolve it
paulmelnikow added a commit that referenced this issue Feb 2, 2019
Partly addresses #2837 but does not resolve it
paulmelnikow added a commit that referenced this issue Feb 6, 2019
While Next.js can handle static sites, we've had a few issues with it, notably a performance hit at runtime and some bugginess around routing and SSR. Gatsby being fully intended for high-performance static sites makes it a great technical fit for the Shields frontend. The `createPages()` API should be a really nice way to add a page for each service family, for example.

This migrates the frontend from Next.js to Gatsby. Gatsby is a powerful tool, which has a bit of downside as there's a lot to dig through. Overall I found configuration easier than Next.js. There are a lot of plugins and for the most part they worked out of the box. The documentation is good.

Links are cleaner now: there is no #. This will break old links though perhaps we could add some redirection to help with that. The only one I’m really concerned about `/#/endpoint`. I’m not sure if folks are deep-linking to the category pages.

There are a lot of enhancements we could add, in order to speed up the site even more. In particular we could think about inlining the SVGs rather than making separate requests for each one.

While Gatsby recommends GraphQL, it's not required. To keep things simple and reduce the learning curve, I did not use it here.

Close #1943 
Fix #2837 Fix #2616
calebcartwright pushed a commit that referenced this issue Feb 15, 2019
* Endpoint page: improve formatting

Cherry-picked from #2906 (conflicts with that)

Partly addresses #2837 but does not resolve it

* Add badge customizer to the endpoint page

* Clean lint
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Bugs in badges and the frontend frontend The Docusaurus app serving the docs site
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant