V2

.gitignore

@@ -25,4 +25,5 @@ src/generated/versions
 /functions
 
 # Local Netlify folder
-.netlify/
+.netlify/
+.env

.storybook/main.js

@@ -11,9 +11,14 @@ module.exports = {
   webpack: async (config) => {
     config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
 
-    config.module.rules[0].use[0].options.plugins.push(
-      require.resolve('babel-plugin-remove-graphql-queries')
-    );
+    // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
+    config.module.rules[0].use[0].options.plugins.push([
+      require.resolve('babel-plugin-remove-graphql-queries'),
+      {
+        stage: config.mode === `development` ? 'develop-html' : 'build-html',
+        staticQueryDir: 'page-data/sq/d',
+      },
+    ]);
 
     // TODO: Figure out why Gatsby is throwing this error:
     // 'The result of this StaticQuery could not be fetched' & remove this alias.

.storybook/preview.js

@@ -32,6 +32,55 @@ export const decorators = [
   ),
 ];
 
+export const parameters = {
+  backgrounds: {
+    default: 'light',
+    values: [
+      { name: 'light', value: '#fff' },
+      { name: 'dark', value: '#171C23' },
+    ],
+  },
+  viewport: {
+    viewports: {
+      smallMobile: {
+        name: 'Mobile (Small)',
+        styles: {
+          width: '320px',
+          height: '100%',
+        },
+      },
+      mobile: {
+        name: 'Mobile',
+        styles: {
+          width: '440px',
+          height: '100%',
+        },
+      },
+      tablet: {
+        name: 'Tablet',
+        styles: {
+          width: '600px',
+          height: '100%',
+        },
+      },
+      desktop: {
+        name: 'Desktop',
+        styles: {
+          width: '900px',
+          height: '100%',
+        },
+      },
+      desktopXL: {
+        name: 'DesktopXL',
+        styles: {
+          width: '1200px',
+          height: '100%',
+        },
+      },
+    },
+  },
+};
+
 // Gatsby's Link overrides:
 // Gatsby Link calls the `enqueue` & `hovering` methods on the global variable ___loader.
 // This global object isn't set in storybook context, requiring you to override it to empty functions (no-op),

gatsby-config.js

@@ -37,14 +37,17 @@ module.exports = {
         fieldName: `addons`,
         url: `https://boring-heisenberg-43a6ed.netlify.app/`,
         typeName: `ADDON`,
-        // refetchInterval: 60,
       },
     },
     {
-      resolve: 'gatsby-source-ghost',
+      resolve: 'gatsby-source-graphql',
       options: {
-        apiUrl: 'https://storybookblog.ghost.io',
-        contentApiKey: process.env.GHOST_STORYBOOK_API_KEY,
+        fieldName: `storybookProjects`,
+        url: `https://api-us-west-2.hygraph.com/v2/ckyko33ox031l01xo8a944g1b/master`,
+        typeName: `STORYBOOK_PROJECTS`,
+        headers: {
+          Authorization: `Bearer ${process.env.GRAPHCMS_PAT}`,
+        },
       },
     },
     'gatsby-transformer-sharp',

gatsby-node.js

@@ -10,14 +10,15 @@ const buildPathWithFramework = require('./src/util/build-path-with-framework');
 const createAddonsPages = require('./src/util/create-addons-pages');
 const getReleaseBranchUrl = require('./src/util/get-release-branch-url');
 const { versionString, latestVersionString, isLatest } = require('./src/util/version-data');
+const sourceDXData = require('./src/util/source-dx-data');
 const { versions } = require('./src/util/versions');
 
 const docsTocWithPaths = addStateToToc(docsToc);
 
 const nextVersionString = versions.preRelease[0].string;
 
 let frameworks;
-let firstDocsPageSlug;
+const FIRST_DOCS_PAGE_SLUG = '/docs/get-started/introduction';
 
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
@@ -29,6 +30,10 @@ exports.onCreateWebpackConfig = ({ actions }) => {
   });
 };
 
+exports.sourceNodes = async ({ actions, createNodeId, createContentDigest }) => {
+  await sourceDXData({ actions, createNodeId, createContentDigest });
+};
+
 exports.onCreateNode = ({ actions, getNode, node }) => {
   const { createNodeField } = actions;
 
@@ -187,7 +192,7 @@ exports.createPages = ({ actions, graphql }) => {
                           nextTocItem.type === 'bullet-link' && {
                             nextTocItem,
                           }),
-                        isFirstTocItem: docsPagesSlugs.length === 0,
+                        isIntroPage: slug === FIRST_DOCS_PAGE_SLUG,
                       },
                     });
                   });
@@ -206,7 +211,6 @@ exports.createPages = ({ actions, graphql }) => {
           };
 
           createDocsPages(docsTocWithPaths);
-          [firstDocsPageSlug] = docsPagesSlugs;
         }
       )
       .then(() => {
@@ -267,16 +271,14 @@ function updateRedirectsFile() {
       const versionBranch = isLatestLocal ? '' : getReleaseBranchUrl(versionStringLocal);
       const redirectCode = isLatestLocal ? 301 : 200;
 
-      if (firstDocsPageSlug) {
-        acc.push(
-          // prettier-ignore
-          `/docs${versionSlug} ${versionBranch}${buildPathWithFramework(firstDocsPageSlug, frameworks[0], versionStringLocal)} ${redirectCode}`
-        );
-        frameworks.forEach((f) =>
-          // prettier-ignore
-          acc.push(`/docs${versionSlug}/${f} ${versionBranch}${buildPathWithFramework(firstDocsPageSlug, f, versionStringLocal)} ${redirectCode}`)
-        );
-      }
+      acc.push(
+        // prettier-ignore
+        `/docs${versionSlug} ${versionBranch}${buildPathWithFramework(FIRST_DOCS_PAGE_SLUG, frameworks[0], versionStringLocal)} ${redirectCode}`
+      );
+      frameworks.forEach((f) =>
+        // prettier-ignore
+        acc.push(`/docs${versionSlug}/${f} ${versionBranch}${buildPathWithFramework(FIRST_DOCS_PAGE_SLUG, f, versionStringLocal)} ${redirectCode}`)
+      );
 
       if (!isLatestLocal) {
         acc.push(`/docs/${string}/* ${versionBranch}/docs/${versionStringLocal}/:splat 200`);

package.json

@@ -10,19 +10,21 @@
     "sharp": "^0.29.0"
   },
   "dependencies": {
-    "@docsearch/css": "^3.0.0",
+    "@docsearch/css": "^3.2.1",
     "@docsearch/react": "^3.0.0",
     "@emotion/server": "^11.4.0",
     "@google-cloud/bigquery": "^5.2.0",
     "@mdx-js/mdx": "^1.6.16",
     "@mdx-js/react": "^1.6.16",
-    "@storybook/api": "^6.5.8",
-    "@storybook/design-system": "7.3.8",
-    "@storybook/theming": "6.5.8",
+    "@storybook/api": "^6.5.9",
+    "@storybook/components-marketing": "^2.0.31",
+    "@storybook/design-system": "7.8.1",
+    "@storybook/theming": "^6.5.9",
     "core-js": "^3.22.8",
     "date-fns": "^2.16.1",
     "dotenv": "^8.2.0",
     "encoding": "^0.1.13",
+    "framer-motion": "7.0.0",
     "gatsby": "^4.16.0",
     "gatsby-cli": "4.16.0",
     "gatsby-image": "^3.11.0",
@@ -62,7 +64,6 @@
     "querystring": "^0.2.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-github-button": "^0.1.11",
     "react-helmet": "^5.2.1",
     "react-lazyload": "^2.6.5",
     "rehype": "^11.0.0",
@@ -72,6 +73,7 @@
     "request": "^2.88.2",
     "semver": "^7.3.2",
     "unist-util-visit": "^2.0.3",
+    "use-debounce": "^8.0.4",
     "validatorjs": "^3.15.1"
   },
   "keywords": [
@@ -109,12 +111,12 @@
     "@graphql-codegen/cli": "^1.9.1",
     "@graphql-codegen/introspection": "1.16.3",
     "@graphql-codegen/typescript": "^1.9.1",
-    "@storybook/addon-actions": "^6.5.8",
-    "@storybook/addon-essentials": "^6.5.8",
-    "@storybook/builder-webpack5": "^6.5.8",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
     "@storybook/eslint-config-storybook": "^3.1.2",
-    "@storybook/manager-webpack5": "^6.5.8",
-    "@storybook/react": "^6.5.8",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/react": "^6.5.9",
     "@storybook/testing-library": "^0.0.11",
     "babel-preset-gatsby": "^2.16.0",
     "chromatic": "^5.0.0",

src/components/basics/CodeExample.stories.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { CodeExample } from './CodeExample';
+
+export default {
+  title: 'Frontpage|basics/CodeExample',
+  component: CodeExample,
+};
+
+const StyledCodeExample = styled(CodeExample)`
+  width: 800px;
+  height: 600px;
+  margin: 20px;
+`;
+
+const codeSnippet = `import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { composeStories } from '@storybook/testing-react';
+import * as stories from './UserCard.stories';
+
+// Compile the "MissingProfileImage" story
+const { MissingProfileImage } = composeStories(stories);
+
+let container = null;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  unmountComponentAtNode(container);
+  container.remove();
+  container = null;
+});
+
+it('renders a fallback profile image', () => {
+  // Render the story
+  act(() => {
+    render(<MissingProfileImage />, container);
+  });
+
+  // Verify the DOM structure
+  expect(container.querySelector('img').getAttribute('src')).toEqual(
+    '/images/user-fallback.png'
+  );
+});`;
+
+export const Default = () => (
+  <StyledCodeExample language="jsx" fileName="UserCard.test.js">
+    {codeSnippet}
+  </StyledCodeExample>
+);
+Default.parameters = {
+  backgrounds: { default: 'dark' },
+};