chore: migrate site to Next.js #3011
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
Area: Doc Site
✅ Deploy Preview for paste-theme-designer ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
|
Size Change: 0 B Total Size: 897 kB ℹ️ View Unchanged
|
✅ Deploy Preview for paste-docs ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
Passing run #5319 ↗︎
Details:
This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. |
|||||||||||||||
shleewhite
previously approved these changes
Feb 6, 2023
| "vite": "^4.0.1" | ||
| }, | ||
| "resolutions": { | ||
| "csstype": "3.0.11", | ||
| "playwright": "1.28.1" | ||
| "playwright": "1.28.1", | ||
| "@types/react": "^17.0.31" |
There was a problem hiding this comment.
Question: why is this resolution necessary? Aren't we going to upgrade to 18 soon?
There was a problem hiding this comment.
The mdx library was allowing types v18 to get installed. Setting a resolution for now to avoid TS errors until we upgrade to 18.
Niznikr
added
the
🕵🏻♀️ Run website visual regression
SiTaggart
approved these changes
Feb 7, 2023
TheSisb
reviewed
Feb 7, 2023
| @@ -1,6 +1,5 @@ | |||
| node_modules | |||
| bower_components | |||
| lib | |||
There was a problem hiding this comment.
Have a lib directory in the docs package now for holding things like google analytics (to match practices from the next official examples).
| @@ -9,30 +9,50 @@ | |||
|
|
|||
| The overview tables and component/pattern headers all use an Airtable integration to gather the data displayed in each. | |||
|
|
|||
| The Airtable connection is done through the `gatsby-source-airtable` plugin. This uses an api key and pulls all of the Airtable information into a graphql schema. We then use this to populate the component or pattern statuses. Here is an example of the component overview page graphql query: | |||
| The Airtable connection is done through the `Airtable JS client`. It uses an api key and allows us to query the Airtable information. We then use this to populate the component or pattern statuses. Here is an example of the query used to fetch all features: | |||
| The data is then written to a JSON file and made available via the `utils/api` helper functions. The overview pages can then access this data using Next's `getStaticProps` and pass the information to other components: | ||
|
|
||
| ```js | ||
| import {getAllComponents} from '../../utils/api'; |
There was a problem hiding this comment.
praise: this approach is much more intuitive imo
| @@ -0,0 +1,19 @@ | |||
| # MDX | |||
| @@ -15,7 +15,7 @@ | |||
| "dependencies": { | |||
| "chalk": "4.1.2", | |||
| "execa": "3.2.0", | |||
| "globby": "10.0.1", | |||
| "globby": "npm:globby@10.0.1", | |||
There was a problem hiding this comment.
question: do we need the npm prefix here?
There was a problem hiding this comment.
Yeah to avoid issues from the manypkg check
| const transform = () => (tree) => { | ||
| const headings = []; | ||
|
|
||
| visit(tree, `heading`, (heading) => { |
There was a problem hiding this comment.
quibble: can we get some comments on the purpose of this plugin for future maintainers and how it's loaded.
| @@ -0,0 +1,115 @@ | |||
| import * as fs from 'fs/promises'; | |||
There was a problem hiding this comment.
praise: I love this idea to prebuild this file for the website launch from the Airtable source data.
|
|
||
| const shouldFlatten = (key: string): boolean => KEYS_TO_FLATTEN.has(key); | ||
|
|
||
| export const getNormalizedHeaderData = (data: ApiData): ApiData => { |
There was a problem hiding this comment.
quibble: can we add comments in this file for the exported functions for what their purpose is, and where they're used please?
Niznikr
added
🚀 merge it!
and removed
Status: Do Not Merge
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Migrate Paste website to Next.js for better DX and web vitals.
Migration
yarn start->yarn devyarn serve->yarn startto->href)GATSBY_->NEXT_PUBLIC_Stats
Gatsby - Local dev
success Building development bundle - 187.168s- cold cachesuccess Building development bundle - 20.532s- hot cacheNext.js - Local dev
event - compiled client and server successfully in 2.9s (1074 modules)- cold and hot cacheGatsby - preview deploy
Next.js - preview deploy