chore: migrate site to Next.js

.eslintignore

@@ -1,6 +1,5 @@
 node_modules
 bower_components
-lib
 dist
 bin
 __testfixtures__
@@ -9,7 +8,6 @@ __fixtures__
 packages/paste-icons/cjs
 packages/paste-icons/esm
 packages/paste-icons/json
-packages/paste-website/public
 packages/paste-theme-designer/public
 packages/paste-theme-designer/out
 packages/paste-token-contrast-checker/public

.eslintrc.js

@@ -95,6 +95,9 @@ module.exports = {
           'Public_Description__from_System_',
           'Release_Description',
           'Release_feature_name',
+          'page_path',
+          'event_category',
+          'event_label',
         ],
       },
     ],

.gitignore

@@ -58,10 +58,6 @@ typings/
 .env
 .env.local
 
-# gatsby files
-packages/paste-website/.cache/
-packages/paste-website/public
-
 # next.js build output
 .next
 out/
@@ -71,7 +67,6 @@ out/
 
 .jest-coverage
 .jest-cache
-**/lib/*
 **/dist/*
 packages/**/docs
 **/paste-icons/cjs/*

.prettierignore

@@ -1,14 +1,12 @@
 node_modules
 bower_components
-lib
 dist
 bin
 __testfixtures__
 
 packages/paste-icons/cjs
 packages/paste-icons/esm
 packages/paste-icons/json
-packages/paste-website/public
 packages/paste-theme-designer/public/
 .cache
 .next

.storybook/main.ts

@@ -34,7 +34,7 @@ const config: StorybookConfig = {
     return mergeConfig(config, {
       resolve: {
         alias: {
-          gatsby: path.resolve(__dirname, './gatsby'),
+          'next/link': path.resolve(__dirname, './next'),
           'react-dom/client': path.resolve(__dirname, '../node_modules/react-dom/client'),
           'react-dom': path.resolve(__dirname, '../node_modules/react-dom/profiling'),
           'scheduler/tracing': path.resolve(__dirname, '../node_modules/scheduler/tracing-profiling'),

.storybook/gatsby.tsx → .storybook/next.tsx

@@ -2,4 +2,4 @@ import * as React from 'react';
 
 const Link: React.FC = ({children, ...props}) => <a {...props}>{children}</a>;
 
-export {Link};
+export default Link;

.storybook/preview.tsx

@@ -199,16 +199,3 @@ export const parameters = {
     viewports: INITIAL_VIEWPORTS,
   },
 };
-
-// https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/#manual-configuration
-
-global.___loader = {
-  enqueue: () => {},
-  hovering: () => {},
-};
-
-global.__BASE_PATH__ = '/';
-
-window.___navigate = (pathname) => {
-  action('NavigateTo:')(pathname);
-};

cypress.config.ts

@@ -3,7 +3,7 @@ import {defineConfig} from 'cypress';
 // eslint-disable-next-line import/no-default-export
 export default defineConfig({
   e2e: {
-    baseUrl: 'http://localhost:8000',
+    baseUrl: 'http://localhost:3000',
     env: {
       USE_CYPRESS_VRT: process.env.USE_CYPRESS_VRT,
     },

cypress/integration/link-checker/index.spec.ts

@@ -1,7 +1,7 @@
 /**
  * USAGE:
  * 1. yarn build:website
- * 2. yarn serve:website
+ * 2. yarn start:website
  * 3. yarn run cyprus open
  * 4. Click the link-checker test in the cyprus window that pops up
  *

internal-docs/engineering/developing-locally.md

@@ -21,24 +21,24 @@
 Before you begin there are some things that you will need to have installed, and some things that we recommend, but are not essential:
 
 1. **[Git](https://git-scm.com/)** - distributed version control. This should be preinstalled on a Mac.
-    1. `git config --global user.name “first last”`
-    2. `git config --global user.email johndoe@example.com`
+   1. `git config --global user.name “first last”`
+   2. `git config --global user.email johndoe@example.com`
 2. **[Xcode Command Line Tools](https://developer.apple.com/xcode/)** - Used to build some Apple software and node packages.
 3. **[Homebrew](https://brew.sh/)** (optional)- A package manager for Mac software
-    1. Follow the installation instructions on the [Homebrew website](https://brew.sh/)
+   1. Follow the installation instructions on the [Homebrew website](https://brew.sh/)
 4. **NodeJS v16.13.x**- A JavaScript runtime for running JavaScript applications
-    1. Node is preinstalled on Macs but you might need to manage the version that is installed.
+   1. Node is preinstalled on Macs but you might need to manage the version that is installed.
 5. **[NVM](https://github.com/nvm-sh/nvm)** (optional) - A Node version manager that can help installing and managing Node versions on your machine
-    1. Follow the [installation instructions on NVM](https://github.com/nvm-sh/nvm#installing-and-updating).
+   1. Follow the [installation instructions on NVM](https://github.com/nvm-sh/nvm#installing-and-updating).
 6. **[Yarn](https://classic.yarnpkg.com/en/)** - A package manager for node packages.
-    1. Install via NPM instructions on the Yarn website [https://classic.yarnpkg.com/en/](https://classic.yarnpkg.com/en/)
-    2. Paste currently uses v3.
+   1. Install via NPM instructions on the Yarn website [https://classic.yarnpkg.com/en/](https://classic.yarnpkg.com/en/)
+   2. Paste currently uses v3.
 7. **[Visual Studio Code](https://code.visualstudio.com/)** (optional) - Lightweight IDE that’s really good working with Typescript codebases.
-    1. Check out the recommended extensions in the extensions tab.
-    2. We supply some handy React code snippets in the Paste repo too
+   1. Check out the recommended extensions in the extensions tab.
+   2. We supply some handy React code snippets in the Paste repo too
 8. **Chrome, Edge, Firefox and Safari browsers** - Browsers we support.
 9. **[iTerm2](https://iterm2.com/)** - (optional) Handy terminal with many features.
-    1. We’re fans of zShell coupled with [Oh My Zsh!](https://ohmyz.sh/)
+   1. We’re fans of zShell coupled with [Oh My Zsh!](https://ohmyz.sh/)
 10. **[Connect to Github with SSH](https://docs.github.com/en/authentication/connecting-to-github-with-ssh)** - You'll need this to connect your local machine to Github and clone the Paste repo.
     1. Follow the [Github instructions to check if you have an existing SSH key](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/checking-for-existing-ssh-keys). If not, continue through the instructions to generate and add a new one.
 
@@ -151,19 +151,19 @@ DATADOG_CLIENT_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxx
 
 <table>
   <tr>
-   <td>GATSBY_ENVIRONMENT_CONTEXT
+   <td>NEXT_PUBLIC_ENVIRONMENT_CONTEXT
    </td>
    <td>Set to “local”. This replicates <a href="https://docs.netlify.com/configure-builds/environment-variables/#build-metadata">Netlify deployment context</a>
    </td>
   </tr>
   <tr>
-   <td>GATSBY_DATADOG_APPLICATION_ID
+   <td>NEXT_PUBLIC_DATADOG_APPLICATION_ID
    </td>
    <td>Datadog RUM app ID
    </td>
   </tr>
   <tr>
-   <td>GATSBY_DATADOG_CLIENT_TOKEN
+   <td>NEXT_PUBLIC_DATADOG_CLIENT_TOKEN
    </td>
    <td>Datadog RUM client token
    </td>
@@ -181,19 +181,19 @@ DATADOG_CLIENT_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxx
    </td>
   </tr>
   <tr>
-   <td>GATSBY_DOCSEARCHV3_APIKEY
+   <td>NEXT_PUBLIC_DOCSEARCHV3_APIKEY
    </td>
    <td>API key for powering our docs search
    </td>
   </tr>
   <tr>
-   <td>GATSBY_DOCSEARCHV3_APPID
+   <td>NEXT_PUBLIC_DOCSEARCHV3_APPID
    </td>
    <td>Docs search app ID
    </td>
   </tr>
   <tr>
-   <td>GATSBY_DOCSEARCHV3_INDEXNAME
+   <td>NEXT_PUBLIC_DOCSEARCHV3_INDEXNAME
    </td>
    <td>twilio_paste
    </td>

internal-docs/engineering/doc-site/airtable-integration.md

@@ -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:
 
 ```js
-allAirtable(
-     sort: {fields: [data___Feature]}
-     filter: {data: {status: {ne: null}, Component_Category: {eq: "component"}}}
-   ) {
-     edges {
-       node {
-         data {
-           Feature
-           Documentation
-           Figma
-           Design_committee_review
-           Engineer_committee_review
-           Code
-           status
-         }
-       }
-     }
-   }
+const airtable = new Airtable({apiKey: process.env.AIRTABLE_APIKEY});
+const base = airtable.base(process.env.AIRTABLE_BASEID);
+
+export const systemTable = base('System');
+
+const features = await systemTable
+  .select({
+    filterByFormula: 'status',
+    sort: [{field: 'Feature'}],
+    fields: [
+      'Component Category',
+      'Feature',
+      'Documentation',
+      'Figma',
+      'Design committee review',
+      'Engineer committee review',
+      'Code',
+      'status',
+      'Product suitability',
+    ],
+  })
+  .all();
+const items = features.map(({fields}) => fields);
 ```
 
-In the query, we’re filtering all of the Airtable data by status and Component_Category. Then getting the Feature, Documentation, Figma, etc table data.
+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';
+
+export const getStaticProps = async () => {
+  const components = await getAllComponents(['component', 'layout']);
+  return {
+    props: {
+      componentList: components,
+    },
+  };
+};
+```
+
+In the query, we’re filtering all of the Airtable data by status. Then getting the Feature, Documentation, Figma, etc table data.
 
 In the `component-overview-table` component, we either display the data, pass the data to a conditional, or pass the data to another component like `AssetStatus` or `PeerReviewStatus`.
 
@@ -42,29 +62,26 @@ _This can cause some issues with Cypress tests failing if you’re working on a
 
 ## Component and pattern headers
 
-The component and pattern headers also get their data from Airtable. In the components, the graphql data is passed to the `PackageStatusLegend` component, where a series of conditionals displays either a `SuccessIcon` or `pending`. The `status` and `Product_suitability` data are used directly in the component or pattern header components.
+The component and pattern headers also get their data from Airtable. In the components, the data is passed to the `PackageStatusLegend` component, where a series of conditionals displays either a `SuccessIcon` or `pending`. The `status` and `Product suitability` data are used directly in the component or pattern header components.
 
-Here is an example of the graphql query:
+Here is an example:
 
 ```js
-allAirtable(filter: {data: {Feature: {eq: "Delete"}}}) {
-     edges {
-       node {
-         data {
-           Documentation
-           Figma
-           Design_committee_review
-           Engineer_committee_review
-           Code
-           status
-           Product_suitability
-         }
-       }
-     }
-   }
+import {getFeature} from '../../../utils/api';
+
+export const getStaticProps = async () => {
+  const feature = await getFeature('Delete');
+  return {
+    props: {
+      data: {
+        ...feature,
+      },
+    },
+  };
+};
 ```
 
-This query filters all of the Airtable data by Feature name. The feature needs to match exactly what is in Airtable for the data to correctly be fetched. So in this case, if you filtered by “delete”, no data would be fetched, but “Delete” works because the feature in Aritable is “Delete”.
+This util filters all of the Airtable data by Feature name. The feature needs to match exactly what is in Airtable for the data to correctly be fetched. So in this case, if you filtered by “delete”, no data would be fetched, but “Delete” works because the feature in Aritable is “Delete”.
 
 ## Future state
 

internal-docs/engineering/doc-site/images.md

@@ -1,53 +1,21 @@
 # Images
 
-Images in Gatsby can be unnecessarily complicated, so we should try and keep it as simple as possible by following these guidelines.
-
-## In MDX pages
-
-In MDX favor Markdown syntax for including images. Let Gatsby do the rest.
-
-```mdx
-![alt text for image](../relative/path/to/image.png)
-```
-
-If you can't use Markdown because you are displaying your image inside a component, first **do not** compose your component in the MDX file. Create a component `tsx` file and import it. Inside you component file, use the [Gatsby Static Image](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/#static-images) component.
+Use Next's [next/image](https://nextjs.org/docs/api-reference/next/image) component to render statically imported images:
 
 ```tsx
-import {StaticImage} from 'gatsby-plugin-image';
+import Image from 'next/future/image';
+import AwaitingData from '../../assets/images/patterns/empty-awaiting-data.png';
 
 export const AwaitingDataImage: React.FC = () => {
-  return (
-    <StaticImage
-      src="../../assets/images/patterns/empty-awaiting-data.png"
-      alt=""
-      width={150}
-      placeholder="blurred"
-      layout="fixed"
-    />
-  );
+  return <Image src={AwaitingData} alt="" width={150} placeholder="blur" />;
 };
 ```
 
-## Non-MDX pages
-
-Favor using the [Gatsby Static Image](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/#static-images) component.
+Next does not apply styles/wrappers to images, so to ensure non-gif images are centered and styled correctly in MDX pages import and use the custom `ResponsiveImage` component which wraps `next/image`:
 
 ```tsx
-import {StaticImage} from 'gatsby-plugin-image';
+import {ResponsiveImage} from '../../components/ResponsiveImage';
+import AwaitingData from '../../assets/images/patterns/empty-awaiting-data.png';
 
-export const AwaitingDataImage: React.FC = () => {
-  return (
-    <StaticImage
-      src="../../assets/images/patterns/empty-awaiting-data.png"
-      alt=""
-      width={150}
-      placeholder="blurred"
-      layout="fixed"
-    />
-  );
-};
+<ResponsiveImage src={AwaitingData} />;
 ```
-
-## Dynamic Images (GraphQL)
-
-It is incredibly rare that you should need [Dynamic images](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/#dynamic-images). We aren't doing anything fancy right now, **avoid them at all costs**.

internal-docs/engineering/doc-site/mdx.md

@@ -0,0 +1,19 @@
+# MDX
+
+MDX is implemented by the [@next/mdx](https://nextjs.org/docs/advanced-features/using-mdx) package. To ensure your page renders correctly, supply the needed navigation data to `getStaticProps` and export the layout component as the default export:
+
+```tsx
+import DefaultLayout from '../../../layouts/DefaultLayout';
+import {getNavigationData} from '../../../utils/api'; // import this last to avoid issues with the MDXProvider
+
+export default DefaultLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  return {
+    props: {
+      navigationData,
+    },
+  };
+};
+```