Prepare /overview/ pages for Next.js launch (#900)

This fixes small bugs I found in the Next.js docs so that the Next.js version of these pages looks and behaves the same as the Gatsby version. It also removes `/overview/` from the Next.js config file, telling Next.js not to proxy that URL to the Gatsby version of the site.
thumbtack · Feb 21, 2023 · 253a19b · 253a19b
1 parent f672deb
commit 253a19b
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 26 deletions.
diff --git a/next/components/alert/alert.tsx b/next/components/alert/alert.tsx
@@ -42,7 +42,9 @@ export default function Alert({ type, title, children }: PropTypes): JSX.Element
                     {title}
                 </Text>
             </div>
-            <div className={`black-300 ${styles.children}`}>{children}</div>
+            <Text className={`black-300 ${styles.children}`} size={2} elementName="div">
+                {children}
+            </Text>
         </div>
     );
 }
diff --git a/next/components/layout/layout.tsx b/next/components/layout/layout.tsx
@@ -128,20 +128,35 @@ export default function Layout({
                                                             >
                                                                 <SideNavGroup level={3}>
                                                                     {groupItem.sections?.map(
-                                                                        sectionItem => (
-                                                                            <SideNavLink
-                                                                                title={
-                                                                                    sectionItem.title
-                                                                                }
-                                                                                href={
-                                                                                    sectionItem.href
-                                                                                }
-                                                                                key={
-                                                                                    sectionItem.href
-                                                                                }
-                                                                                level={3}
-                                                                            />
-                                                                        ),
+                                                                        sectionItem => {
+                                                                            const level3IsActive =
+                                                                                level1IsActive &&
+                                                                                level2IsActive &&
+                                                                                pathWithoutHash.split(
+                                                                                    '/',
+                                                                                )[3] ===
+                                                                                    sectionItem.href.split(
+                                                                                        '/',
+                                                                                    )[3];
+
+                                                                            return (
+                                                                                <SideNavLink
+                                                                                    title={
+                                                                                        sectionItem.title
+                                                                                    }
+                                                                                    href={
+                                                                                        sectionItem.href
+                                                                                    }
+                                                                                    key={
+                                                                                        sectionItem.href
+                                                                                    }
+                                                                                    level={3}
+                                                                                    isActive={
+                                                                                        level3IsActive
+                                                                                    }
+                                                                                />
+                                                                            );
+                                                                        },
                                                                     )}
                                                                 </SideNavGroup>
                                                             </SideNavLink>

diff --git a/next/next.config.js b/next/next.config.js
@@ -28,10 +28,6 @@ const nextConfig = {
             beforeFiles: [
                 // Proxy everything except the homepage to the Gatsby version of the site.
                 // We will remove routes from this once they're ready to launch in Next.js.
-                {
-                    source: '/overview/:path*',
-                    destination: 'https://thumbprint-gatsby.netlify.app/overview/:path*/',
-                },
                 {
                     source: '/guide/:path*',
                     destination: 'https://thumbprint-gatsby.netlify.app/guide/:path*/',

diff --git a/next/pages/overview/accessibility.tsx b/next/pages/overview/accessibility.tsx
@@ -79,8 +79,9 @@ export default function OverviewAbout({
 
             <P>
                 Interactive components should be navigable from the keyboard. This means paying
-                attention to `tabindex` values and listening for key commands to perform an action,
-                for example, closing a modal with the “escape” key.
+                attention to <CodeExperimental>tabindex</CodeExperimental> values and listening for
+                key commands to perform an action, for example, closing a modal with the “escape”
+                key.
             </P>
 
             <H3>Documentation</H3>

diff --git a/next/pages/overview/developers.tsx b/next/pages/overview/developers.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import type { InferGetStaticPropsType } from 'next';
 import { ContentPage } from '../../components/mdx/mdx';
 import getContentPageStaticProps from '../../utils/get-content-page-static-props';
-import { P, H2, H3, UL, OL, LI, A } from '../../components/mdx/components';
+import { P, H2, H3, UL, OL, LI, A, CodeExperimental } from '../../components/mdx/components';
 
 export const getStaticProps = getContentPageStaticProps;
 
@@ -16,7 +16,7 @@ export default function OverviewAbout({
             layoutProps={layoutProps}
         >
             <P>
-                Thumbprint provides code in a number of technologies. React and SCSS components,
+                Thumbprint provides code in a number of technologies. React and SCSS components,{' '}
                 <a href="https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421">
                     design tokens
                 </a>
@@ -96,8 +96,8 @@ export default function OverviewAbout({
 
             <P>
                 All released and unreleased changes to our React, SCSS, and Atomic packages are
-                tracked in their respective `CHANGELOG.md` files and is the best resource to
-                determine the current status of the package.
+                tracked in their respective <CodeExperimental>CHANGELOG.md</CodeExperimental> files
+                and is the best resource to determine the current status of the package.
             </P>
 
             <UL>

diff --git a/next/pages/overview/product-design.tsx b/next/pages/overview/product-design.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import type { InferGetStaticPropsType } from 'next';
+import { Title } from '@thumbtack/thumbprint-react';
 import { ContentPage } from '../../components/mdx/mdx';
 import getContentPageStaticProps from '../../utils/get-content-page-static-props';
 import pluginContrast from '../../images/pages/overview/product-design/plugin-contrast.png';
@@ -133,7 +134,9 @@ export default function OverviewAbout({
                     />
                 </A>
                 <div className="pl4">
-                    <H3>Contrast</H3>
+                    <Title size={4} className="mb2">
+                        Contrast
+                    </Title>
 
                     <P>
                         Evaluates foreground and background colors against Web Content Accessibility