Skip to content

Migrate to Gatsby 🚀 #896

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

Merged
merged 36 commits into from
Sep 4, 2020
Merged

Migrate to Gatsby 🚀 #896

merged 36 commits into from
Sep 4, 2020

Conversation

saihaj
Copy link
Member

@saihaj saihaj commented Jul 21, 2020

Summary

Migrate content to Gatsby site.

Preview -> https://graphql-docs-gatsby.vercel.app

What is left:

  • Create layout and sidebar components in order to add graphql-js docs
  • Create layout and sidebar components in order to add blog
  • Users page
  • Add Algolia search plugin (Need maintainer to set this up)
  • Google Analytics setup (Need maintainer to set this up)

Since Algolia and GA keys will go .env and need to set those accordingly in CI pipeline too

Issues that should be resolved before merging (🙏 Need Help 🙏 )

  • Fix DOM nesting errors: CSS needs to be modified so that instead of forcing a body tag inside a div components/Layout.js a div with some className is used
  • Fix animations in pages/index.js: useEffect hook is used to run the animations but the problem is when page changes it still runs for some reason and I don't know how to fix it. Update: I tried a clean up function to remove the child nodes but no good.
  • Code highlighting: I was able to prefix classnames where needed for code highlighting but some colors are not working because there are different classnames when compared to css/Prism.less
  • For code in markdown, gatsby-transformer-remark seems to add className to <code> tag which is causing border boxes around line. Need to remove those classnames somehow.
  • Order of items in Sidebar is in ascending order (that is how graphql queries return it) need to find a way so that we can override the order where needed.
  • Show title of next page in "continue reading" button. I tried passing the permalink to context from gatsby-node.js so that I can run one more query that will return title and one that returns content . When running it in GraphiQL (single query) the results are as expected but when I combine it with page query then the title is not correct.
  • Add business_layer.png: I forgot to add this when moving learn docs
  • CNCF iFrame -> I was able to add landscape but don't couldn't get the resizer script working

Possibly can refactor but don't know how to:

  • Since I can't pass in variables to static query ([feat]: add ability to pass variables to StaticQuery gatsbyjs/gatsby#10482) there was not an elegant way other than separating the logic in a separate component (components/Sidebar/Sidebar.js) and pass down data as props from a separate component that runs static query.
  • I think it is possible to do same thing for templates

Closes #875

@saihaj saihaj marked this pull request as ready for review July 23, 2020 20:38
saihaj added 3 commits July 25, 2020 15:49
adding a new `sidebarOrder` field lets to specify a order instead of using an order given by query result
@carolstran
Copy link
Member

Hey @saihaj 👋🏼 Thanks so much for taking the initiative on this!

I was talking with @IvanGoncharov and we were thinking of merging these changes into a new branch and then fix the missing parts/issues in additional PRs (we can track everything in the original issue - #875). That way, this PR doesn't become overwhelming and others can help get it to a place where we could then merge into source.

What do you think?

@saihaj
Copy link
Member Author

saihaj commented Aug 20, 2020

Hey @carolstran sounds good to me

@IvanGoncharov
Copy link
Member

@saihaj Can you please rebase?
And I will create a separate branch.
The next step after that would be to start publishing it under next.graphql.org.

@saihaj
Copy link
Member Author

saihaj commented Aug 28, 2020

Hey 👋🏼 @IvanGoncharov you are all set to deploy 🚀 it !

@saihaj saihaj mentioned this pull request Sep 2, 2020
@carolstran
Copy link
Member

It needs another rebase but then pinging @IvanGoncharov again for this 💫

@saihaj
Copy link
Member Author

saihaj commented Sep 3, 2020

@IvanGoncharov 🚀

package.json Outdated
"name": "graphql-docs-site",
"description": "GraphQL Docs Site",
"version": "0.1.0",
"author": "Saihajpreet Singh <[email protected]>",
Copy link
Member

Choose a reason for hiding this comment

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

Looking through this again, I don't think we need an author field here 🤔

Copy link
Member Author

@saihaj saihaj Sep 4, 2020

Choose a reason for hiding this comment

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

My bad 🤦‍♂️ I was using one of my projects to make this and forgot to update. What about version number? Do we follow semantic versioning?

Copy link
Member

Choose a reason for hiding this comment

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

Good question, I'm not super familiar with versioning in open source. Wdyt @IvanGoncharov?

This was referenced Sep 4, 2020
@IvanGoncharov IvanGoncharov changed the base branch from source to gatsby September 4, 2020 18:38
@IvanGoncharov IvanGoncharov merged commit ab8c409 into graphql:gatsby Sep 4, 2020
@IvanGoncharov
Copy link
Member

@saihaj Thanks a lot for all your work 👍
Merged into a separate branch since there still some issues that need to be addressed.
But now that it's a branch other people can help by submitting PRs against this branch.

@IvanGoncharov
Copy link
Member

I will open a PR so we can all coordinate.

@saihaj saihaj deleted the source branch September 4, 2020 18:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Proposal - Migrating the website to Gatsby/Next.js
4 participants