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

Adopt Gatsby #2906

Merged
merged 32 commits into from
Feb 6, 2019
Merged

Adopt Gatsby #2906

merged 32 commits into from
Feb 6, 2019

Conversation

paulmelnikow
Copy link
Member

@paulmelnikow paulmelnikow commented Feb 2, 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


To do before merging:

  • Get frontend tests working again
  • Fix coverage
  • Fix danger
  • See if there are other dependencies which can be removed
  • Test/fix Heroku deploy
  • Test/fix Now deploy (not working, but let's not block)
  • Test/fix self hosting – Not working because of Docker issue: production code imports test dependencies #2876
  • Fix or remove former use of NavLink
  • Redirect old # links on index page

@paulmelnikow paulmelnikow added the frontend The Docusaurus app serving the docs site label Feb 2, 2019
@shields-ci
Copy link

shields-ci commented Feb 2, 2019

Messages
📖 ✨ Thanks for your contribution to Shields, @paulmelnikow!
📖

Thanks for contributing to our documentation. We ❤️ our documentarians!

Generated by 🚫 dangerJS against bc645dd

@paulmelnikow paulmelnikow temporarily deployed to shields-staging-pr-2906 February 2, 2019 17:57 Inactive
@paulmelnikow paulmelnikow added the blocker PRs and epics which block other work label Feb 2, 2019
@paulmelnikow
Copy link
Member Author

@mbrandau Are you up for giving this a try?

paulmelnikow added a commit that referenced this pull request Feb 2, 2019
Cherry-picked from #2906 (conflicts with that)

Partly addresses #2837 but does not resolve it
@paulmelnikow paulmelnikow temporarily deployed to shields-staging-pr-2906 February 2, 2019 20:59 Inactive
@paulmelnikow paulmelnikow temporarily deployed to shields-staging-pr-2906 February 2, 2019 21:06 Inactive
@paulmelnikow
Copy link
Member Author

When changing categories, seems to respond faster than the current site:

http://shields-staging-pr-2906.herokuapp.com/

vs.

https://shields-staging.herokuapp.com/

@paulmelnikow paulmelnikow temporarily deployed to shields-staging-pr-2906 February 2, 2019 21:13 Inactive
@calebcartwright
Copy link
Member

When changing categories, seems to respond faster than the current site:

http://shields-staging-pr-2906.herokuapp.com/

vs.

https://shields-staging.herokuapp.com/

Yeah I think I'm observing the same behavior, although in all honesty both are pretty snappy 😄

Two observations:

  1. The Shields logo in the browser tab is black and white in this PR staging app
    image

  2. In the current site, after quickly hopping around between a few categories, several of the categories started to take a noticeably long time to render the badges, but I've been able to reproduce that in this PR staging app 👍

@paulmelnikow
Copy link
Member Author

Thanks for taking this for a spin!

Ah you're right, the favicon is broken.

2. In the current site, after quickly hopping around between a few categories, several of the categories started to take a noticeably long time to render the badges, but I've been able to reproduce that in this PR staging app 👍

Could you clarify this?

@calebcartwright
Copy link
Member

calebcartwright commented Feb 3, 2019

Could you clarify this?

Sure! I was switching between categories fairly quickly in both apps in an attempt to do an eyeball performance comparison. After some time of doing that in the current site (https://shields-staging.herokuapp.com/) the listings on some of the category pages appeared to not be rendering the badges (they eventually did render, but took 30+ seconds). So for a while, the listings only had the Badge example names and url's

@paulmelnikow
Copy link
Member Author

This PR has the same problem, or no?

@calebcartwright
Copy link
Member

This PR does not have the same problem. Could've just been a fluke, but was only happening on https://shields-staging.herokuapp.com/

Copy link
Member

@chris48s chris48s left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haven't done a full review on this as there is more to do, but this looks like we're heading in a good direction.

Can you give a bit more info on how will the routing work once we're deployed on GH pages? It seems like in order to do away with the client-side # style links, we need to add an extra build step to the deploy process to build static pages for each URL or something?

@paulmelnikow paulmelnikow temporarily deployed to shields-staging-pr-2906 February 5, 2019 23:56 Inactive
@calebcartwright
Copy link
Member

I've finished going through the files (my inline questions, etc. have already been addressed), and am just poking around in the PR staging app UI now.

I just noticed one minor thing, probably off topic since this occurs in prod too, but when configuring a static badge after I select a color, part of the text of that color gets cut off if I pick a longer color (like bright green):

image

@paulmelnikow
Copy link
Member Author

Yea, that doesn't look great. That whole component could be improved. Maybe it could build off some of the work in the new builders.

@paulmelnikow paulmelnikow temporarily deployed to shields-staging-pr-2906 February 6, 2019 03:21 Inactive
chris48s
chris48s previously approved these changes Feb 6, 2019
Copy link
Member

@chris48s chris48s left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is good to go, but there is a failing test to fix before we can merge

@paulmelnikow
Copy link
Member Author

Great. Yea, that happened when I fixed the favicon. Will look into it…

@paulmelnikow paulmelnikow temporarily deployed to shields-staging-pr-2906 February 6, 2019 20:50 Inactive
@paulmelnikow
Copy link
Member Author

Looks like that fix worked.

@paulmelnikow paulmelnikow temporarily deployed to shields-staging-pr-2906 February 6, 2019 21:13 Inactive
@shields-deployment
Copy link

This pull request was merged to master branch. This change is now waiting for deployment, which will usually happen within a few days. Stay tuned by joining our #ops channel on Discord!

After deployment, changes are copied to gh-pages branch:

@paulmelnikow paulmelnikow deleted the gatsby branch February 6, 2019 21:38
@paulmelnikow
Copy link
Member Author

It's live!

calebcartwright pushed a commit that referenced this pull request 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
blocker PRs and epics which block other work frontend The Docusaurus app serving the docs site
Projects
None yet
4 participants