Refactor to Nextra instead of Gatsby

[dimaMachina]

[vercel[bot]]

@dimaMachina is attempting to deploy a commit to the The GraphQL Foundation Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
graphql-github-io	✅ Ready (Inspect)	Visit Preview	✅ 74 resolved	Mar 28, 2024 10:35am

[vercel[bot]]

Deployment failed with the following error:

The provided GitHub repository does not contain the requested branch or commit reference. Please ensure the repository is not empty.

[Urigo]

Hi @graphql/tsc and dear community

We need your help in reviewing 2 things here:

1. Migration of the current website from Gatsby to Nextra
2. The new GraphQL Conf 2024 website

Please review using this link

Some important clarifications:

1. We want to get as much feedback as possible. Share as much as you can. Regressions from the current graphql.org while also ideas on how to make it better
2. We'll merge this before we'll solve all the issues you will raise. We will merge when the new website will be not worse then the current one. The main goal here is to simply change the infrastructure (even though @dimaMachina came up with some new wins as during his work)
3. We'll take all of your feedback and create issues for the points that we can improve after merging this change and build a roadmap out of it.
4. There is a separate discussion around getting a designer to create a new version of the website, that is a separate effort from what you see here.

Thank you @danstarns for the inspiration for the events and meetups page!

Looking forward for your feedback

[Keweiqu]

Thanks @Urigo! I checked the review link on my phone and noticed there is some minor resizing issue on the GraphQL.org home page. It doesn’t resize correctly for the mobile screen when there is a code block.

The graphql conf page looks great! Haven’t spotted any issue

[tazsingh]

Looks awesome! Great work @dimaMachina @Urigo & all 🙌

Per points 2 & 3 above, should I create an issue or comment here?

I note the Community section is missing:

• London GraphQL - https://guild.host/london-graphql
• GraphQL New York - https://guild.host/graphql-new-york
• GraphQL Bali - https://guild.host/graphql-bali
• GraphQL Taipei - https://guild.host/graphql-taipei

We can also power this list of communities as well as the events themselves via a direct feed, so it's always up to date, in addition to the JSON. But I take that as a larger refactoring. I believe Step 1 could be to add this to the current JSON format for the time being.

Thanks and let me know how I can help with this!

[erikwrede]

I'm liking the fresh look! These are my rather opinionated insights and suggestions. They're not always ordered based on urgency, so feel free to prioritize/reconsider points as deemed necessary.

Header Bar

The header bar appears rather busy now, this might be somewhat confusing for visitors. Here are my suggestions:

• Consider highlighting the GraphQL Conf with a button (for example, pink) as a Call-to-Action. Eliminate the dropdown and redirect to the 2024 page - provide a conspicuous button for locating the 2023 conference page on the 2024 page. This simplifies the process and directly guides visitors to the most recent and relevant conference.
• Future thought: Code + Learn + FAQ could be consolidated into a Resources & Getting Started Tab. For first-time visitors, the content of "Code" is not instantly clear.
• The "external" arrow on Spec is not necessary in my opinion.
• Consider increasing the font size of the header to text-md for enhanced readability, considering the font weight and contrast ratio - this adjustment is only plausible if we reduce the number of entries.

Landing Page

I'm really liking the design revamp on this page! There's just one minor point: the black carousel-like banner overlaps with the header on wide screens, creating a drop-shadow effect when scrolled to the top. Interestingly, this doesn't occur when the screen width is reduced. Refer to the header bar screenshot for details.

Code

Lacking the explanatory text from the older version, the purpose of this page may not be instantly discernible to visitors. I have a few usability suggestions:

• Reintroduce some text/header indicating that this is the go-to place for discovering the next GraphQL framework, library, or tooling.
• Consider categorizing the filters by programming language and type of tool.
• Make the framework names clickable again (redirecting to GitHub/Homepage), though retain the GitHub button, it has a nice appeal.
• Text search seems to have an issue:

In the future, it would also be worthwhile to consider embedding the framework logos. This could help break the monotony of the list style.

Community Resources

The cards are consuming a significant amount of vertical space. We could think about compacting them a bit like this for familiar logos (not a perfect example, but hopefully, the idea is clear 🙂):

Alternatively, introducing a breakpoint to transition into a four-column layout on desktop (depending on resizing) might be a good idea:

Currently, the remainder of the page somewhat resembles a SEO link and resource list. Some future curation efforts could help transform this into an excellent jump-off point and assist with discoverability.

Events and Meetups

It's great to finally have this on the main organization page. This is well-done for a first version. Going forward, introducing a location-based search for "Meetups & Events near me" can significantly improve user experience.

Overall, I didn't encounter any significant issues that are "worse than the current version". Thanks for putting all the effort into this!

[dimaMachina]

@tazsingh Thank you for your feedback 😍!

We can also power this list of communities as well as the events themselves via a direct feed, so it's always up to date, in addition to the JSON. But I take that as a larger refactoring. I believe Step 1 could be to add this to the current JSON format for the time being.

We'll improve this in the future thanks to Next.js SSG, for now I just hardcoded your suggested meetups

https://github.com/dimaMachina/graphql.github.io/blob/1057765e20da6afd9cdc313218dea77c1304c985/website/src/components/meetups.ts#L2-L41

you can take a look at the last preview:

https://graphql-github-rliggs852-the-graph-ql-foundation.vercel.app/community/events/

[benjie]

The copyright year is 2023 for some reason; other than that - nothing further to add! Thanks for the work on this!

[bignimbus]

@Keweiqu mentioned mobile resizing issues - here's a screencap here of what I saw on my phone (iPhone 12 mini, Firefox):

https://github.com/graphql/graphql.github.io/assets/3976692/a2aa6ae6-ae5e-4a61-81de-fc75ae2407ca

Thank you for your work on this! 🩷

[dimaMachina]

@Keweiqu mentioned mobile resizing issues - here's a screencap here of what I saw on my phone (iPhone 12 mini, Firefox):

trim.58215B96-EB5C-49D2-BC7D-46BC621E8411.MOV Thank you for your work on this! 🩷

thank you! mobile issues on landing page/code page were fixed

[dimaMachina]

The copyright year is 2023 for some reason; other than that - nothing further to add! Thanks for the work on this!

fixed copyright in footer and faq page!

[Urigo]

We are live! Thanks everyone for the valuable feedback!

It doesn't mean we finished solving and working on all your suggestions, this is just the start of many improvements to come Keep suggesting improvements, creating issues and also sending PRs to make our community's website the best it could be!

[Urigo]

and mostly thanks to @dimaMachina for this amazing migration project!

[Urigo]

and thanks @YassinEldeeb for taking care of Vercel deployments, redirects and making sure we've covered the important things ❤️