Replace internal DocsPage with @hashicorp/react-docs-page

website/components/docs-page/img/github-icon.svg

@@ -1 +0,0 @@
-<svg width="23" height="22" xmlns="http://www.w3.org/2000/svg"><path d="M11.608.342C5.535.342.61 5.162.61 11.108c0 4.757 3.152 8.792 7.523 10.215.55.1.751-.233.751-.518 0-.256-.01-.933-.015-1.831-3.06.65-3.705-1.444-3.705-1.444-.5-1.243-1.222-1.574-1.222-1.574-.998-.668.076-.655.076-.655 1.104.076 1.685 1.11 1.685 1.11.981 1.645 2.575 1.17 3.201.894.1-.695.385-1.17.699-1.439-2.443-.271-5.011-1.195-5.011-5.32 0-1.176.429-2.137 1.132-2.89-.113-.272-.49-1.367.108-2.849 0 0 .924-.289 3.025 1.104.877-.24 1.819-.358 2.754-.363.934.005 1.875.124 2.754.363 2.1-1.393 3.022-1.104 3.022-1.104.6 1.482.222 2.577.11 2.85.705.752 1.13 1.713 1.13 2.888 0 4.136-2.572 5.046-5.022 5.313.394.332.746.99.746 1.994 0 1.438-.013 2.6-.013 2.953 0 .288.198.623.756.518 4.368-1.427 7.516-5.46 7.516-10.215 0-5.946-4.925-10.766-11-10.766" fill="#161514" fill-rule="evenodd"/></svg>

website/components/docs-page/index.jsx

@@ -1,124 +0,0 @@
-import { useEffect } from 'react'
-import DocsSidenav from '@hashicorp/react-docs-sidenav'
-import Content from '@hashicorp/react-content'
-import InlineSvg from '@hashicorp/react-inline-svg'
-import githubIcon from './img/github-icon.svg?include'
-import Link from 'next/link'
-import Head from 'next/head'
-import HashiHead from '@hashicorp/react-head'
-
-export default function DocsPage({
-  children,
-  path,
-  orderData,
-  frontMatter,
-  category,
-  pageMeta
-}) {
-  // TEMPORARY (https://app.asana.com/0/1100423001970639/1160656182754009)
-  useEffect(() => {
-    const node = document.querySelector('#inner')
-    if (!node) return
-    return temporary_injectJumpToSection(node)
-  }, [])
-
-  return (
-    <div id="p-docs">
-      <HashiHead
-        is={Head}
-        title={`${pageMeta.page_title} | Nomad by HashiCorp`}
-        description={pageMeta.description}
-      />
-      <div className="content-wrap g-container">
-        <div id="sidebar" role="complementary">
-          <div className="nav docs-nav">
-            <DocsSidenav
-              currentPage={path}
-              category={category}
-              order={orderData}
-              data={frontMatter}
-              Link={Link}
-              product="nomad"
-            />
-          </div>
-        </div>
-
-        <div id="inner" role="main">
-          <Content product="nomad" content={children} />
-        </div>
-      </div>
-      <div id="edit-this-page" className="g-container">
-        <a
-          href={`https://github.com/hashicorp/nomad/blob/master/website/pages/${pageMeta.__resourcePath}`}
-        >
-          <InlineSvg src={githubIcon} />
-          <span>Edit this page</span>
-        </a>
-      </div>
-    </div>
-  )
-}
-
-export async function getInitialProps({ asPath }) {
-  return { path: asPath }
-}
-
-// This is terrible, very non-idiomatic code. It is here temporarily to enable this feature
-// while the team works on a more permanent solution. Please do not ever write code like this.
-// Ticket to fix this: https://app.asana.com/0/1100423001970639/1160656182754009
-function temporary_injectJumpToSection(node) {
-  const root = node.children[0]
-  const firstH1 = root.querySelector('h1')
-  const otherH2s = [].slice.call(root.querySelectorAll('h2')) // NodeList -> array
-
-  // if there's no h1 or less than 3 h2s, don't render jump to section
-  if (!firstH1) return
-  if (otherH2s.length < 3) return
-
-  const headlines = otherH2s.map(h2 => {
-    // slice removes the anchor link character
-    return { id: h2.id, text: h2.innerText.slice(1) }
-  })
-
-  // build the html
-  const html = `
-    <span class="trigger g-type-label">
-      Jump to Section
-      <svg width="9" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M8.811 1.067a.612.612 0 0 0 0-.884.655.655 0 0 0-.908 0L4.5 3.491 1.097.183a.655.655 0 0 0-.909 0 .615.615 0 0 0 0 .884l3.857 3.75a.655.655 0 0 0 .91 0l3.856-3.75z" fill-rule="evenodd"/></svg>
-    </span>
-    <ul class="dropdown">
-      ${headlines
-        .map(h => `<li><a href="#${h.id}">${h.text}</a></li>`)
-        .join('')}
-    </ul>`
-  const el = document.createElement('div')
-  el.innerHTML = html
-  el.id = 'jump-to-section'
-
-  // attach event listeners to make the dropdown work
-  const trigger = el.querySelector('.trigger')
-  const dropdown = el.querySelector('.dropdown')
-  const body = document.body
-  const triggerEvent = e => {
-    e.stopPropagation()
-    dropdown.classList.toggle('active')
-  }
-  const clickOutsideEvent = () => dropdown.classList.remove('active')
-  const clickInsideDropdownEvent = e => e.stopPropagation()
-  trigger.addEventListener('click', triggerEvent)
-  body.addEventListener('click', clickOutsideEvent)
-  dropdown.addEventListener('click', clickInsideDropdownEvent)
-
-  // inject the html after the first h1
-  firstH1.parentNode.insertBefore(el, firstH1.nextSibling)
-
-  // adjust the h1 margin
-  firstH1.classList.add('has-jts')
-
-  // cleanup function removes listeners on unmount
-  return function cleanup() {
-    trigger.removeEventListener('click', triggerEvent)
-    body.removeEventListener('click', clickOutsideEvent)
-    dropdown.removeEventListener('click', clickInsideDropdownEvent)
-  }
-}

website/components/docs-page/style.css

@@ -1,120 +0,0 @@
-#p-docs {
-  & .content-wrap {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    flex: 1 0 auto;
-    position: relative;
-    width: 100%;
-
-    @media (min-width: 940px) {
-      flex-direction: row;
-      margin-top: 72px;
-      margin-bottom: 24px;
-    }
-  }
-
-  & #inner {
-    margin: 64px 0;
-    overflow: auto;
-    width: 100%;
-
-    @media (min-width: 940px) {
-      flex: 1;
-      margin: 0;
-    }
-
-    & .g-content {
-      @media (max-width: 939px) {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      & > h1:first-child {
-        margin-top: 0;
-
-        &.has-jts {
-          margin-bottom: 10px;
-        }
-      }
-    }
-
-    & .g-section-header {
-      margin-bottom: 100px;
-    }
-
-    /* TODO: this should be applied in global styles, temporary override here */
-    & pre,
-    & code {
-      font-size: 0.875em;
-    }
-
-    & pre code {
-      font-size: 1em;
-    }
-  }
-
-  & #edit-this-page {
-    margin-bottom: 48px;
-    display: flex;
-    justify-content: flex-end;
-
-    & a {
-      color: var(--gray-1);
-      display: flex;
-      align-items: center;
-      opacity: 0.5;
-      transition: opacity 0.4s ease;
-      padding-right: 32px;
-
-      &:hover {
-        opacity: 1;
-      }
-
-      & > div {
-        margin-right: 9px;
-        width: 23px;
-        height: 22px;
-      }
-    }
-  }
-
-  & table tr.warning td {
-    background: #fcf8e3;
-  }
-
-  & #jump-to-section {
-    margin-bottom: 20px;
-    margin-left: 5px;
-    cursor: pointer;
-    display: inline-block;
-    position: relative;
-    z-index: 3;
-    user-select: none;
-
-    & .trigger {
-      display: flex;
-      align-items: center;
-    }
-
-    & svg {
-      margin-left: 5px;
-    }
-
-    & .dropdown {
-      display: none;
-      position: absolute;
-      background: white;
-      width: 500px;
-      z-index: 2;
-      margin: 10px 0 0 0;
-      padding: 0 0 0 30px;
-      box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25);
-      border-radius: 3px;
-
-      &.active {
-        display: block;
-      }
-    }
-  }
-}

website/layouts/api.jsx

@@ -1,21 +1,34 @@
-import DocsPage, { getInitialProps } from '../components/docs-page'
-import orderData from '../data/api-navigation.js'
-import { frontMatter } from '../pages/api-docs/**/*.mdx'
+import DocsPage from '@hashicorp/react-docs-page'
+import order from '../data/api-navigation.js'
+import { frontMatter as data } from '../pages/api-docs/**/*.mdx'
+import Head from 'next/head'
+import Link from 'next/link'
 
 function ApiLayoutWrapper(pageMeta) {
   function ApiLayout(props) {
     return (
       <DocsPage
         {...props}
-        orderData={orderData}
-        frontMatter={frontMatter}
-        category="api-docs"
-        pageMeta={pageMeta}
+        product="nomad"
+        head={{
+          is: Head,
+          title: `${pageMeta.page_title} | Nomad by HashiCorp`,
+          description: pageMeta.description,
+          siteName: 'Nomad by HashiCorp'
+        }}
+        sidenav={{
+          Link,
+          category: 'api-docs',
+          currentPage: props.path,
+          data,
+          order
+        }}
+        resourceURL={`https://github.com/hashicorp/nomad/blob/master/website/pages/${pageMeta.__resourcePath}`}
       />
     )
   }
 
-  ApiLayout.getInitialProps = getInitialProps
+  ApiLayout.getInitialProps = ({ asPath }) => ({ path: asPath })
 
   return ApiLayout
 }

website/layouts/docs.jsx

@@ -1,8 +1,10 @@
-import DocsPage, { getInitialProps } from '../components/docs-page'
-import orderData from '../data/docs-navigation.js'
+import DocsPage from '@hashicorp/react-docs-page'
+import order from '../data/docs-navigation.js'
 import { frontMatter } from '../pages/docs/**/*.mdx'
 import { MDXProvider } from '@mdx-js/react'
 import Placement from '../components/placement-table'
+import Head from 'next/head'
+import Link from 'next/link'
 
 const DEFAULT_COMPONENTS = { Placement }
 
@@ -12,16 +14,27 @@ function DocsLayoutWrapper(pageMeta) {
       <MDXProvider components={DEFAULT_COMPONENTS}>
         <DocsPage
           {...props}
-          orderData={orderData}
-          frontMatter={frontMatter}
-          category="docs"
-          pageMeta={pageMeta}
+          product="nomad"
+          head={{
+            is: Head,
+            title: `${pageMeta.page_title} | Nomad by HashiCorp`,
+            description: pageMeta.description,
+            siteName: 'Nomad by HashiCorp'
+          }}
+          sidenav={{
+            Link,
+            category: 'docs',
+            currentPage: props.path,
+            data: frontMatter,
+            order
+          }}
+          resourceURL={`https://github.com/hashicorp/nomad/blob/master/website/pages/${pageMeta.__resourcePath}`}
         />
       </MDXProvider>
     )
   }
 
-  DocsLayout.getInitialProps = getInitialProps
+  DocsLayout.getInitialProps = ({ asPath }) => ({ path: asPath })
 
   return DocsLayout
 }

website/layouts/guides.jsx

@@ -1,21 +1,34 @@
-import DocsPage, { getInitialProps } from '../components/docs-page'
-import orderData from '../data/guides-navigation.js'
-import { frontMatter } from '../pages/guides/**/*.mdx'
+import DocsPage from '@hashicorp/react-docs-page'
+import order from '../data/guides-navigation.js'
+import { frontMatter as data } from '../pages/guides/**/*.mdx'
+import Head from 'next/head'
+import Link from 'next/link'
 
 function GuidesLayoutWrapper(pageMeta) {
   function GuidesLayout(props) {
     return (
       <DocsPage
         {...props}
-        orderData={orderData}
-        frontMatter={frontMatter}
-        category="guides"
-        pageMeta={pageMeta}
+        product="nomad"
+        head={{
+          is: Head,
+          title: `${pageMeta.page_title} | Nomad by HashiCorp`,
+          description: pageMeta.description,
+          siteName: 'Nomad by HashiCorp'
+        }}
+        sidenav={{
+          Link,
+          category: 'guides',
+          currentPage: props.path,
+          data,
+          order
+        }}
+        resourceURL={`https://github.com/hashicorp/nomad/blob/master/website/pages/${pageMeta.__resourcePath}`}
       />
     )
   }
 
-  GuidesLayout.getInitialProps = getInitialProps
+  GuidesLayout.getInitialProps = ({ asPath }) => ({ path: asPath })
 
   return GuidesLayout
 }

website/layouts/intro.jsx

@@ -1,21 +1,34 @@
-import DocsPage, { getInitialProps } from '../components/docs-page'
-import orderData from '../data/intro-navigation.js'
-import { frontMatter } from '../pages/intro/**/*.mdx'
+import DocsPage from '@hashicorp/react-docs-page'
+import order from '../data/intro-navigation.js'
+import { frontMatter as data } from '../pages/intro/**/*.mdx'
+import Head from 'next/head'
+import Link from 'next/link'
 
 function IntroLayoutWrapper(pageMeta) {
   function IntroLayout(props) {
     return (
       <DocsPage
         {...props}
-        orderData={orderData}
-        frontMatter={frontMatter}
-        category="intro"
-        pageMeta={pageMeta}
+        product="nomad"
+        head={{
+          is: Head,
+          title: `${pageMeta.page_title} | Nomad by HashiCorp`,
+          description: pageMeta.description,
+          siteName: 'Nomad by HashiCorp'
+        }}
+        sidenav={{
+          Link,
+          category: 'intro',
+          currentPage: props.path,
+          data,
+          order
+        }}
+        resourceURL={`https://github.com/hashicorp/nomad/blob/master/website/pages/${pageMeta.__resourcePath}`}
       />
     )
   }
 
-  IntroLayout.getInitialProps = getInitialProps
+  IntroLayout.getInitialProps = ({ asPath }) => ({ path: asPath })
 
   return IntroLayout
 }

website/package-lock.json

@@ -2909,11 +2909,6 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
-    "@hashicorp/js-utils": {
-      "version": "1.0.8-alpha.0",
-      "resolved": "https://registry.npmjs.org/@hashicorp/js-utils/-/js-utils-1.0.8-alpha.0.tgz",
-      "integrity": "sha512-Sa51DV8GPlvmrcRP9t7HlOysqEZeZ4xrCC2Jga7olONKaDfw+Jip1+ihJFeBszMaa9nvu2uB0Kxpxn0W9w9s2w=="
-    },
     "@hashicorp/localstorage-polyfill": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/@hashicorp/localstorage-polyfill/-/localstorage-polyfill-1.0.12.tgz",
@@ -3095,6 +3090,17 @@
       "resolved": "https://registry.npmjs.org/@hashicorp/react-content/-/react-content-2.2.0.tgz",
       "integrity": "sha512-c9eYZGu/1YC7tGWKE/mPsi4DLfHOTlpOwOjUCXgzauOOwqrjJHEfLiGzJsgd8CMDxWRswZ7Es/i/s8rZnCN5og=="
     },
+    "@hashicorp/react-docs-page": {
+      "version": "0.1.1-alpha.1939",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-docs-page/-/react-docs-page-0.1.1-alpha.1939.tgz",
+      "integrity": "sha512-AAtNQD9cbvg47a0KT42WZGbnPS2HjguthIJxQNucaHmc7GNsNNH/6mFygCO0GZZOwvoVh28e1w+bWmTs58BwyA==",
+      "requires": {
+        "@hashicorp/react-content": "^2.2.0",
+        "@hashicorp/react-docs-sidenav": "^3.0.3",
+        "@hashicorp/react-head": "^0.1.1",
+        "@hashicorp/react-inline-svg": "^1.0.0"
+      }
+    },
     "@hashicorp/react-docs-sidenav": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@hashicorp/react-docs-sidenav/-/react-docs-sidenav-3.0.3.tgz",
@@ -3142,6 +3148,13 @@
         "marked": "^0.7.0",
         "promise-polyfill": "^8.1.0",
         "query-string": "^5.1.1"
+      },
+      "dependencies": {
+        "@hashicorp/js-utils": {
+          "version": "1.0.8-alpha.0",
+          "resolved": "https://registry.npmjs.org/@hashicorp/js-utils/-/js-utils-1.0.8-alpha.0.tgz",
+          "integrity": "sha512-Sa51DV8GPlvmrcRP9t7HlOysqEZeZ4xrCC2Jga7olONKaDfw+Jip1+ihJFeBszMaa9nvu2uB0Kxpxn0W9w9s2w=="
+        }
       }
     },
     "@hashicorp/react-image": {
@@ -18515,21 +18528,26 @@
           "dependencies": {
             "abbrev": {
               "version": "1.1.1",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
               "optional": true
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true
+              "resolved": false,
+              "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
               "optional": true
             },
             "are-we-there-yet": {
               "version": "1.1.5",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
               "optional": true,
               "requires": {
                 "delegates": "^1.0.0",
@@ -18538,11 +18556,15 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true
+              "resolved": false,
+              "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -18550,29 +18572,38 @@
             },
             "chownr": {
               "version": "1.1.3",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==",
               "optional": true
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "resolved": false,
+              "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true
+              "resolved": false,
+              "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "resolved": false,
+              "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
               "optional": true
             },
             "debug": {
               "version": "3.2.6",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
               "optional": true,
               "requires": {
                 "ms": "^2.1.1"
@@ -18580,22 +18611,26 @@
             },
             "deep-extend": {
               "version": "0.6.0",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
               "optional": true
             },
             "delegates": {
               "version": "1.0.0",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
               "optional": true
             },
             "detect-libc": {
               "version": "1.0.3",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
               "optional": true
             },
             "fs-minipass": {
               "version": "1.2.7",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",
               "optional": true,
               "requires": {
                 "minipass": "^2.6.0"
@@ -18603,12 +18638,14 @@
             },
             "fs.realpath": {
               "version": "1.0.0",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
               "optional": true
             },
             "gauge": {
               "version": "2.7.4",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
               "optional": true,
               "requires": {
                 "aproba": "^1.0.3",
@@ -18623,7 +18660,8 @@
             },
             "glob": {
               "version": "7.1.6",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
               "optional": true,
               "requires": {
                 "fs.realpath": "^1.0.0",
@@ -18636,12 +18674,14 @@
             },
             "has-unicode": {
               "version": "2.0.1",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
               "optional": true
             },
             "iconv-lite": {
               "version": "0.4.24",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
               "optional": true,
               "requires": {
                 "safer-buffer": ">= 2.1.2 < 3"
@@ -18649,7 +18689,8 @@
             },
             "ignore-walk": {
               "version": "3.0.3",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==",
               "optional": true,
               "requires": {
                 "minimatch": "^3.0.4"
@@ -18657,7 +18698,8 @@
             },
             "inflight": {
               "version": "1.0.6",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
               "optional": true,
               "requires": {
                 "once": "^1.3.0",
@@ -18666,39 +18708,51 @@
             },
             "inherits": {
               "version": "2.0.4",
-              "bundled": true
+              "resolved": false,
+              "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
               "optional": true
             },
             "is-fullwidth-code-point": {
               "version": "1.0.0",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
             },
             "isarray": {
               "version": "1.0.0",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
               "optional": true
             },
             "minimatch": {
               "version": "3.0.4",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true
+              "resolved": false,
+              "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+              "optional": true
             },
             "minipass": {
               "version": "2.9.0",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -18706,7 +18760,8 @@
             },
             "minizlib": {
               "version": "1.3.3",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==",
               "optional": true,
               "requires": {
                 "minipass": "^2.9.0"
@@ -18714,19 +18769,23 @@
             },
             "mkdirp": {
               "version": "0.5.1",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
             },
             "ms": {
               "version": "2.1.2",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
               "optional": true
             },
             "needle": {
               "version": "2.4.0",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-4Hnwzr3mi5L97hMYeNl8wRW/Onhy4nUKR/lVemJ8gJedxxUyBLm9kkrDColJvoSfwi0jCNhD+xCdOtiGDQiRZg==",
               "optional": true,
               "requires": {
                 "debug": "^3.2.6",
@@ -18736,7 +18795,8 @@
             },
             "node-pre-gyp": {
               "version": "0.14.0",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==",
               "optional": true,
               "requires": {
                 "detect-libc": "^1.0.2",
@@ -18753,7 +18813,8 @@
             },
             "nopt": {
               "version": "4.0.1",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
               "optional": true,
               "requires": {
                 "abbrev": "1",
@@ -18762,7 +18823,8 @@
             },
             "npm-bundled": {
               "version": "1.1.1",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==",
               "optional": true,
               "requires": {
                 "npm-normalize-package-bin": "^1.0.1"
@@ -18770,12 +18832,14 @@
             },
             "npm-normalize-package-bin": {
               "version": "1.0.1",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
               "optional": true
             },
             "npm-packlist": {
               "version": "1.4.7",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-vAj7dIkp5NhieaGZxBJB8fF4R0078rqsmhJcAfXZ6O7JJhjhPK96n5Ry1oZcfLXgfun0GWTZPOxaEyqv8GBykQ==",
               "optional": true,
               "requires": {
                 "ignore-walk": "^3.0.1",
@@ -18784,7 +18848,8 @@
             },
             "npmlog": {
               "version": "4.1.2",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
               "optional": true,
               "requires": {
                 "are-we-there-yet": "~1.1.2",
@@ -18795,33 +18860,41 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "resolved": false,
+              "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
               "optional": true
             },
             "once": {
               "version": "1.4.0",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
             },
             "os-homedir": {
               "version": "1.0.2",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
               "optional": true
             },
             "os-tmpdir": {
               "version": "1.0.2",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
               "optional": true
             },
             "osenv": {
               "version": "0.1.5",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
               "optional": true,
               "requires": {
                 "os-homedir": "^1.0.0",
@@ -18830,17 +18903,20 @@
             },
             "path-is-absolute": {
               "version": "1.0.1",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
               "optional": true
             },
             "process-nextick-args": {
               "version": "2.0.1",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
               "optional": true
             },
             "rc": {
               "version": "1.2.8",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
               "optional": true,
               "requires": {
                 "deep-extend": "^0.6.0",
@@ -18851,14 +18927,16 @@
               "dependencies": {
                 "minimist": {
                   "version": "1.2.0",
-                  "bundled": true,
+                  "resolved": false,
+                  "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
                   "optional": true
                 }
               }
             },
             "readable-stream": {
               "version": "2.3.6",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
               "optional": true,
               "requires": {
                 "core-util-is": "~1.0.0",
@@ -18872,7 +18950,8 @@
             },
             "rimraf": {
               "version": "2.7.1",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
               "optional": true,
               "requires": {
                 "glob": "^7.1.3"
@@ -18880,36 +18959,45 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true
+              "resolved": false,
+              "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
               "optional": true
             },
             "sax": {
               "version": "1.2.4",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
               "optional": true
             },
             "semver": {
               "version": "5.7.1",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "optional": true
             },
             "set-blocking": {
               "version": "2.0.0",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
               "optional": true
             },
             "signal-exit": {
               "version": "3.0.2",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
               "optional": true
             },
             "string-width": {
               "version": "1.0.2",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -18918,7 +19006,8 @@
             },
             "string_decoder": {
               "version": "1.1.1",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
               "optional": true,
               "requires": {
                 "safe-buffer": "~5.1.0"
@@ -18926,19 +19015,23 @@
             },
             "strip-ansi": {
               "version": "3.0.1",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
             },
             "strip-json-comments": {
               "version": "2.0.1",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
               "optional": true
             },
             "tar": {
               "version": "4.4.13",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==",
               "optional": true,
               "requires": {
                 "chownr": "^1.1.1",
@@ -18952,12 +19045,14 @@
             },
             "util-deprecate": {
               "version": "1.0.2",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
               "optional": true
             },
             "wide-align": {
               "version": "1.1.3",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
               "optional": true,
               "requires": {
                 "string-width": "^1.0.2 || 2"
@@ -18965,11 +19060,15 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "resolved": false,
+              "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+              "optional": true
             },
             "yallist": {
               "version": "3.1.1",
-              "bundled": true
+              "resolved": false,
+              "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+              "optional": true
             }
           }
         },

website/package.json

@@ -14,6 +14,7 @@
     "@hashicorp/react-code-block": "^1.2.6",
     "@hashicorp/react-consent-manager": "^2.0.5",
     "@hashicorp/react-content": "^2.2.0",
+    "@hashicorp/react-docs-page": "^0.1.1-alpha.1939",
     "@hashicorp/react-docs-sidenav": "^3.0.3",
     "@hashicorp/react-docs-sitemap": "^1.0.0",
     "@hashicorp/react-footer": "^3.1.10",

website/pages/style.css

@@ -32,9 +32,9 @@
 @import '~@hashicorp/react-call-to-action/dist/style.css';
 @import '~@hashicorp/react-text-split/dist/style.css';
 @import '~@hashicorp/react-text-split-with-code/dist/style.css';
+@import '~@hashicorp/react-docs-page/dist/style.css';
 
 /* Local Components */
-@import '../components/docs-page/style.css';
 @import '../components/placement-table/style.css';
 @import '../components/case-study-carousel/style.css';
 @import '../components/features-list/style.css';