Website architecture adjustments (#420)

* add bugsnag and segment keys

* convert to next-mdx-remote

* app layout adjustment

* client transitions for subnav

* correct release notes structure

* remove unneeded files

* update deps to fix jump to section bug, remove cache clear from start command

website/README.md

@@ -44,9 +44,9 @@ The first time you are running the site, you will need to run the command `npm i
 
 ## Editing Markdown Content
 
-Documentation content is written in [Markdown](https://www.markdownguide.org/cheat-sheet/) and you'll find all files listed under the `/pages` directory.
+Documentation content is written in [Markdown](https://www.markdownguide.org/cheat-sheet/) and you'll find all files listed under the `/content` directory.
 
-To create a new page with Markdown, create a file ending in `.mdx` in the `pages/` directory. The path in the pages directory will be the URL route. For example, `pages/hello/world.mdx` will be served from the `/hello/world` URL.
+To create a new page with Markdown, create a file ending in `.mdx` in a `content/<subdirectory>`. The path in the content directory will be the URL route. For example, `content/docs/hello.mdx` will be served from the `/docs/hello` URL.
 
 This file can be standard Markdown and also supports [YAML frontmatter](https://middlemanapp.com/basics/frontmatter/). YAML frontmatter is optional, there are defaults for all keys.
 
@@ -63,7 +63,7 @@ The significant keys in the YAML frontmatter are:
 - `title` `(string)` - This is the title of the page that will be set in the HTML title.
 - `description` `(string)` - This is a description of the page that will be set in the HTML description.
 
-> ⚠️ Since `api` is a reserved directory within NextJS, all `/api/**` pages are listed under the `/pages/api-docs` path.
+> ⚠️ If there is a need for a `/api/*` url on this website, the url will be changed to `/api-docs/*`, as the `api` folder is reserved by next.js.
 
 ### Creating New Pages
 
@@ -74,7 +74,7 @@ There is currently a small bug with new page creation - if you create a new page
 There are several custom markdown plugins that are available by default that enhance [standard markdown](https://commonmark.org/) to fit our use cases. This set of plugins introduces a couple instances of custom syntax, and a couple specific pitfalls that are not present by default with markdown, detailed below:
 
 - If you see the symbols `~>`, `->`, `=>`, or `!>`, these represent [custom alerts](https://github.com/hashicorp/remark-plugins/tree/master/plugins/paragraph-custom-alerts#paragraph-custom-alerts). These render as colored boxes to draw the user's attention to some type of aside.
-- If you see `@include '/some/path.mdx'`, this is a [markdown include](https://github.com/hashicorp/remark-plugins/tree/master/plugins/include-markdown#include-markdown-plugin). It's worth noting as well that all includes resolve from `website/pages/partials` by default, and that changes to partials will not live-reload the website.
+- If you see `@include '/some/path.mdx'`, this is a [markdown include](https://github.com/hashicorp/remark-plugins/tree/master/plugins/include-markdown#include-markdown-plugin). It's worth noting as well that all includes resolve from `website/content/partials` by default, and that changes to partials will not live-reload the website.
 - If you see `# Headline ((#slug))`, this is an example of an [anchor link alias](https://github.com/hashicorp/remark-plugins/tree/je.anchor-link-adjustments/plugins/anchor-links#anchor-link-aliases). It adds an extra permalink to a headline for compatibility and is removed from the output.
 - Due to [automatically generated permalinks](https://github.com/hashicorp/remark-plugins/tree/je.anchor-link-adjustments/plugins/anchor-links#anchor-links), any text changes to _headlines_ or _list items that begin with inline code_ can and will break existing permalinks. Be very cautious when changing either of these two text items.
 
@@ -126,6 +126,7 @@ $ curl ...
 </Tab>
 </Tabs>
 
+
 Contined normal markdown content
 ````
 
@@ -252,7 +253,7 @@ export default {
 }
 ```
 
-- `category` values will be **directory names** within the `pages/<section>` directory
+- `category` values will be **directory names** within the `content/<section>` directory
 - `content` values will be **file names** within their appropriately nested directory
 
 A couple more important notes:
@@ -356,29 +357,29 @@ You may customize the parameters in any way you'd like. To remove a prerelease f
 
 ## Redirects
 
-This website structures URLs based on the filesystem layout. This means that if a file is moved, removed, or a folder is re-organized, links will break. If a path change is necessary, it can be mitigated using redirects.
+This website structures URLs based on the filesystem layout. This means that if a file is moved, removed, or a folder is re-organized, links will break. If a path change is necessary, it can be mitigated using redirects. It's important to note that redirects should only be used to cover for external links -- if you are moving a path which internal links point to, the internal links should also be adjusted to point to the correct page, rather than relying on a redirect.
 
-To add a redirect, head over to the `_redirects` file - the format is fairly simple. On the left is the current path, and on the right is the path that should be redirected to. It's important to note that if there are links to a `.html` version of a page, that must also be explicitly redirected. For example:
+To add a redirect, head over to the `redirects.js` file - the format is fairly simple - there's a `source` and a `destination` - fill them both in, indicate that it's a permanent redirect or not using the `permanent` key, and that's it. Let's look at an example:
 
 ```
-/foo       /bar   301!
-/foo.html  /bar   301!
+{
+  source: '/foo',
+  destination: '/bar',
+  permanent: true
+}
 ```
 
-This redirect rule will send all incoming links to `/foo` and `/foo.html` to `/bar`. For more details on the redirects file format, [check out the docs on netlify](https://docs.netlify.com/routing/redirects/rewrites-proxies). Note that it is critical that `301!` is added to every one-to-one redirect - if it is left off the redirect may not work.
+This redirect rule will send all incoming links to `/foo` to `/bar`. For more details on the redirects file format, [check out the docs on vercel](https://vercel.com/docs/configuration#project/redirects). All redirects will work both locally and in production exactly the same way, so feel free to test and verify your redirects locally. In the past testing redirects has required a preview deployment -- this is no longer the case. Please note however that if you add a redirect while the local server is running, you will need to restart it in order to see the effects of the redirect.
 
-There are a couple important caveats with redirects. First, redirects are applied at the hosting layer, and therefore will not work by default in local dev mode. To test in local dev mode, you can use [`netlify dev`](https://www.netlify.com/products/dev/), or just push a commit and check using the deploy preview.
+There is still one caveat though: redirects do not apply to client-side navigation. By default, all links in the navigation and docs sidebar will navigate purely on the client side, which makes navigation through the docs significantly faster, especially for those with low-end devices and/or weak internet connections. In the future, we plan to convert all internal links within docs pages to behave this way as well. This means that if there is a link on this website to a given piece of content that has changed locations in some way, we need to also _directly change existing links to the content_. This way, if a user clicks a link that navigates on the client side, or if they hit the url directly and the page renders from the server side, either one will work perfectly.
 
-Second, redirects do not apply to client-side navigation. By default, all links in the navigation and docs sidebar will navigate purely on the client side, which makes navigation through the docs significantly faster, especially for those with low-end devices and/or weak internet connections. In the future, we plan to convert all internal links within docs pages to behave this way as well. This means that if there is a link on this website to a given piece of content that has changed locations in some way, we need to also _directly change existing links to the content_. This way, if a user clicks a link that navigates on the client side, or if they hit the url directly and the page renders from the server side, either one will work perfectly.
+Let's look at an example. Say you have a page called `/docs/foo` which needs to be moved to `/docs/nested/foo`. Additionally, this is a page that has been around for a while and we know there are links into `/docs/foo.html` left over from our previous website structure. First, we move the page, then adjust the docs sidenav, in `data/docs-navigation.js`. Find the category the page is in, and move it into the appropriate subcategory. Next, we add to `_redirects` as such. The `.html` version is covered automatically.
 
-Let's look at an example. Say you have a page called `/docs/foo` which needs to be moved to `/docs/nested/foo`. Additionally, this is a page that has been around for a while and we know there are links into `/docs/foo.html` left over from our previous website structure. First, we move the page, then adjust the docs sidenav, in `data/docs-navigation.js`. Find the category the page is in, and move it into the appropriate subcategory. Next, we add to `_redirects` as such:
-
-```
-/foo       /nested/foo  301!
-/foo.html  /nested/foo  301!
+```js
+{ source: '/foo', destination: '/nested/foo', permanent: true }
 ```
 
-Finally, we run a global search for internal links to `/foo`, and make sure to adjust them to be `/nested/foo` - this is to ensure that client-side navigation still works correctly. _Adding a redirect alone is not enough_.
+Next, we run a global search for internal links to `/foo`, and make sure to adjust them to be `/nested/foo` - this is to ensure that client-side navigation still works correctly. _Adding a redirect alone is not enough_.
 
 One more example - let's say that content is being moved to an external website. A common example is guides moving to `learn.hashicorp.com`. In this case, we take all the same steps, except that we need to make a different type of change to the `docs-navigation` file. If previously the structure looked like:
 
@@ -404,7 +405,7 @@ If we no longer want the link to be in the side nav, we can simply remove it. If
 
 As the majority of items in the side nav are internal links, the structure makes it as easy as possible to represent these links. This alternate syntax is the most concise manner than an external link can be represented. External links can be used anywhere within the docs sidenav.
 
-It's also worth noting that it is possible to do glob-based redirects, for example matching `/docs/*`, and you may see this pattern in the `_redirects` file. This type of redirect is much higher risk and the behavior is a bit more nuanced, so if you need to add a glob redirect, please reach out to the website maintainers and ask about it first.
+It's also worth noting that it is possible to do glob-based redirects, for example matching `/docs/*`, and you may see this pattern in the redirects file. This type of redirect is much higher risk and the behavior is a bit more nuanced, so if you need to add a glob redirect, please reach out to the website maintainers and ask about it first.
 
 <!-- END: redirects -->
 
@@ -426,6 +427,6 @@ We support the following browsers targeting roughly the versions specified.
 
 ## Deployment
 
-This website is hosted on Netlify and configured to automatically deploy anytime you push code to the `stable-website` branch. Any time a pull request is submitted that changes files within the `website` folder, a deployment preview will appear in the github checks which can be used to validate the way docs changes will look live. Deployments from `stable-website` will look and behave the same way as deployment previews.
+This website is hosted on Vercel and configured to automatically deploy anytime you push code to the `stable-website` branch. Any time a pull request is submitted that changes files within the `website` folder, a deployment preview will appear in the github checks which can be used to validate the way docs changes will look live. Deployments from `stable-website` will look and behave the same way as deployment previews.
 
 <!-- END: deployment -->

website/components/subnav/index.jsx

@@ -2,6 +2,7 @@ import Subnav from '@hashicorp/react-subnav'
 import { useRouter } from 'next/router'
 import subnavItems from 'data/navigation'
 import { productSlug } from 'data/metadata'
+import Link from 'next/link'
 
 export default function ProductSubnav() {
   const router = useRouter()
@@ -22,6 +23,7 @@ export default function ProductSubnav() {
       menuItemsAlign="right"
       menuItems={subnavItems}
       constrainWidth
+      Link={Link}
     />
   )
 }

website/components/temporary_docs-page/components.js

@@ -0,0 +1,16 @@
+// -----------------------------------------------------
+//                This code is LOCKED
+//
+// If any changes are needed to this code, or if this code
+// is needed in any other projects, instead of changing or
+// using it, instead we must complete this task as a prerequisite
+//
+// https://app.asana.com/0/1100423001970639/1195001770724993
+//
+// ------------------------------------------------------
+
+import defaultMdxComponents from '@hashicorp/nextjs-scripts/lib/providers/docs'
+
+export default function generateComponents(productName) {
+  return defaultMdxComponents({ product: productName })
+}

website/components/temporary_docs-page/index.jsx

@@ -0,0 +1,52 @@
+// -----------------------------------------------------
+//                This code is LOCKED
+//
+// If any changes are needed to this code, or if this code
+// is needed in any other projects, instead of changing or
+// using it, instead we must complete this task as a prerequisite
+//
+// https://app.asana.com/0/1100423001970639/1195001770724993
+//
+// ------------------------------------------------------
+
+import DocsPageComponent from '@hashicorp/react-docs-page'
+import Head from 'next/head'
+import Link from 'next/link'
+import hydrate from 'next-mdx-remote/hydrate'
+import generateComponents from './components'
+
+export default function DocsPage({
+  productName,
+  productSlug,
+  subpath,
+  order,
+  staticProps: { mdxSource, data, frontMatter, pagePath },
+}) {
+  const content = hydrate(mdxSource, {
+    components: generateComponents(productName),
+  })
+
+  return (
+    <>
+      <DocsPageComponent
+        product={productSlug}
+        head={{
+          is: Head,
+          title: `${frontMatter.page_title} | ${productName} by HashiCorp`,
+          description: frontMatter.description,
+          siteName: `${productName} by HashiCorp`,
+        }}
+        sidenav={{
+          Link,
+          category: subpath,
+          currentPage: pagePath,
+          data: data,
+          order,
+        }}
+        resourceURL={`https://github.com/hashicorp/${productSlug}/blob/master/website/content/docs/${frontMatter.__resourcePath}`}
+      >
+        {content}
+      </DocsPageComponent>
+    </>
+  )
+}

website/components/temporary_docs-page/server.js

@@ -0,0 +1,139 @@
+// -----------------------------------------------------
+//                This code is LOCKED
+//
+// If any changes are needed to this code, or if this code
+// is needed in any other projects, instead of changing or
+// using it, instead we must complete this task as a prerequisite
+//
+// https://app.asana.com/0/1100423001970639/1195001770724993
+//
+// ------------------------------------------------------
+
+import fs from 'fs'
+import path from 'path'
+import existsSync from 'fs-exists-sync'
+import readdirp from 'readdirp'
+import lineReader from 'line-reader'
+import matter from 'gray-matter'
+import { safeLoad } from 'js-yaml'
+import renderToString from 'next-mdx-remote/render-to-string'
+import markdownDefaults from '@hashicorp/nextjs-scripts/markdown'
+import generateComponents from './components'
+
+export async function generateStaticPaths(subpath) {
+  const paths = await getStaticMdxPaths(
+    path.join(process.cwd(), 'content', subpath)
+  )
+
+  return { paths, fallback: false }
+}
+
+export async function generateStaticProps(subpath, productName, params) {
+  const docsPath = path.join(process.cwd(), 'content', subpath)
+  const pagePath = params.page ? params.page.join('/') : '/'
+
+  // get frontmatter from all other pages in the category, for the sidebar
+  const allFrontMatter = await fastReadFrontMatter(docsPath)
+
+  // render the current page path markdown
+  const { mdxSource, frontMatter } = await renderPageMdx(
+    docsPath,
+    pagePath,
+    generateComponents(productName)
+  )
+
+  return {
+    props: {
+      data: allFrontMatter.map((p) => {
+        p.__resourcePath = `docs/${p.__resourcePath}`
+        return p
+      }),
+      mdxSource,
+      frontMatter,
+      pagePath: `/docs/${pagePath}`,
+    },
+  }
+}
+
+export async function getStaticMdxPaths(root) {
+  const files = await readdirp.promise(root, { fileFilter: ['*.mdx'] })
+
+  return files.map(({ path: p }) => {
+    return {
+      params: {
+        page: p
+          .replace(/\.mdx$/, '')
+          .split('/')
+          .filter((p) => p !== 'index'),
+      },
+    }
+  })
+}
+
+export async function renderPageMdx(root, pagePath, components) {
+  // get the page being requested - figure out if its index page or leaf
+  // prefer leaf if both are present
+  const leafPath = path.join(root, `${pagePath}.mdx`)
+  const indexPath = path.join(root, `${pagePath}/index.mdx`)
+  let page
+
+  if (existsSync(leafPath)) {
+    page = fs.readFileSync(leafPath, 'utf8')
+  } else if (existsSync(indexPath)) {
+    page = fs.readFileSync(indexPath, 'utf8')
+  } else {
+    // NOTE: if we decide to let docs pages render dynamically, we should replace this
+    // error with a straight 404, at least in production.
+    throw new Error(
+      `We went looking for "${leafPath}" and "${indexPath}" but neither one was found.`
+    )
+  }
+
+  const { data: frontMatter, content } = matter(page)
+  const mdxSource = await renderToString(content, {
+    mdxOptions: markdownDefaults({
+      resolveIncludes: path.join(process.cwd(), 'content/partials'),
+    }),
+    components,
+  })
+
+  return { mdxSource, frontMatter }
+}
+
+export function fastReadFrontMatter(p) {
+  return new Promise((resolve) => {
+    const fm = []
+    readdirp(p, { fileFilter: '*.mdx' })
+      .on('data', (entry) => {
+        let lineNum = 0
+        const content = []
+        fm.push(
+          new Promise((resolve2, reject2) => {
+            lineReader.eachLine(
+              entry.fullPath,
+              (line) => {
+                // if it has any content other than `---`, the file doesn't have front matter, so we close
+                if (lineNum === 0 && !line.match(/^---$/)) return false
+                // if it's not the first line and we have a bottom delimiter, exit
+                if (lineNum !== 0 && line.match(/^---$/)) return false
+                // now we read lines until we match the bottom delimiters
+                content.push(line)
+                // increment line number
+                lineNum++
+              },
+              (err) => {
+                if (err) return reject2(err)
+                content.push(`__resourcePath: "${entry.path}"`)
+                resolve2(safeLoad(content.slice(1).join('\n')), {
+                  filename: entry.fullPath,
+                })
+              }
+            )
+          })
+        )
+      })
+      .on('end', () => {
+        Promise.all(fm).then((res) => resolve(res))
+      })
+  })
+}

website/content/docs/index.mdx

@@ -14,6 +14,7 @@ This is typically a generic introduction page to the documentation. Below is a s
 
 <Tabs>
 
+
 <Tab heading="Command Line">Command line reference overview</Tab>
 
 <Tab heading="Admin Console">
@@ -25,6 +26,7 @@ Reference documentation for the administrative console
 </Tab>
 </Tabs>
 
+
 ### SDK
 
 [Link to godoc site]

website/data/docs-navigation.js

@@ -60,12 +60,8 @@ export default [
           'transit',
         ],
       },
-      {
-        category: 'controller',
-      },
-      {
-        category: 'worker',
-      },
+      'controller',
+      'worker',
       'telemetry',
     ],
   },

website/layouts/docs.jsx

@@ -1,42 +0,0 @@
-import DocsPage from '@hashicorp/react-docs-page'
-import order from 'data/docs-navigation.js'
-import { productName, productSlug } from 'data/metadata'
-import { frontMatter as data } from '../pages/docs/**/*.mdx'
-import { createMdxProvider } from '@hashicorp/nextjs-scripts/lib/providers/docs'
-import Head from 'next/head'
-import Link from 'next/link'
-
-const MDXProvider = createMdxProvider({ product: 'boundary' })
-
-function DocsLayoutWrapper(pageMeta) {
-  function DocsLayout(props) {
-    return (
-      <MDXProvider>
-        <DocsPage
-          {...props}
-          product={productSlug}
-          head={{
-            is: Head,
-            title: `${pageMeta.page_title} | ${productName} by HashiCorp`,
-            description: pageMeta.description,
-            siteName: `${productName} by HashiCorp`,
-          }}
-          sidenav={{
-            Link,
-            category: 'docs',
-            currentPage: props.path,
-            data,
-            order,
-          }}
-          resourceURL={`https://github.com/hashicorp/${productSlug}/blob/master/website/pages/${pageMeta.__resourcePath}`}
-        />
-      </MDXProvider>
-    )
-  }
-
-  DocsLayout.getInitialProps = ({ asPath }) => ({ path: asPath })
-
-  return DocsLayout
-}
-
-export default DocsLayoutWrapper

website/layouts/index.jsx

@@ -1,36 +0,0 @@
-import DocsPage from '@hashicorp/react-docs-page'
-import Head from 'next/head'
-import Link from 'next/link'
-import { productName, productSlug } from 'data/metadata'
-
-function DefaultLayoutWrapper(pageMeta) {
-  function DefaultLayout(props) {
-    return (
-      <DocsPage
-        {...props}
-        product={productSlug}
-        head={{
-          is: Head,
-          title: `${pageMeta.page_title} | ${productName} by HashiCorp`,
-          description: pageMeta.description,
-          siteName: `${productName} by HashiCorp`,
-        }}
-        sidenav={{
-          Link,
-          category: 'docs',
-          currentPage: props.path,
-          data: [],
-          order: [],
-          disableFilter: true,
-        }}
-        resourceURL={`https://github.com/hashicorp/${productSlug}/blob/master/website/pages/${pageMeta.__resourcePath}`}
-      />
-    )
-  }
-
-  DefaultLayout.getInitialProps = ({ asPath }) => ({ path: asPath })
-
-  return DefaultLayout
-}
-
-export default DefaultLayoutWrapper

website/next.config.js

@@ -16,9 +16,9 @@ module.exports = withHashicorp({
   experimental: { modern: true },
   env: {
     HASHI_ENV: process.env.HASHI_ENV || 'development',
-    SEGMENT_WRITE_KEY: 'xxx',
-    BUGSNAG_CLIENT_KEY: 'xxx',
-    BUGSNAG_SERVER_KEY: 'xxx',
+    SEGMENT_WRITE_KEY: 'JkNZiSgwVRAAFrkqqdHLxf0xfcZuhYYc',
+    BUGSNAG_CLIENT_KEY: '635db43e199cb02419379291d573205b',
+    BUGSNAG_SERVER_KEY: 'f85278a46e1b5565a9e91974cdc2843b',
     NEXT_PUBLIC_OKTA_DOMAIN: process.env.OKTA_DOMAIN,
     NEXT_PUBLIC_AUTH0_DOMAIN: process.env.AUTH0_DOMAIN,
   },

website/package.json

@@ -4,30 +4,35 @@
   "version": "1.0.0",
   "author": "HashiCorp",
   "dependencies": {
-    "@hashicorp/nextjs-scripts": "^11.1.1",
-    "@hashicorp/react-content": "^4.0.1",
-    "@hashicorp/react-docs-page": "^4.0.1",
-    "@hashicorp/react-docs-sidenav": "^3.2.6",
-    "@hashicorp/react-global-styles": "^4.4.1",
-    "@hashicorp/react-head": "^1.1.2",
-    "@hashicorp/react-image": "^2.0.2",
-    "@hashicorp/react-mega-nav": "^4.0.1-2",
-    "@hashicorp/react-product-downloader": "^4.0.3",
-    "@hashicorp/react-section-header": "^2.0.1",
-    "@hashicorp/react-subnav": "^3.2.4",
-    "@hashicorp/react-vertical-text-block-list": "^2.0.2",
-    "babel-plugin-import-glob-array": "^0.2.0",
-    "next": "9.4.4",
+    "@hashicorp/nextjs-scripts": "13.0.0-canary.1",
+    "@hashicorp/react-content": "4.0.2",
+    "@hashicorp/react-docs-page": "5.0.3",
+    "@hashicorp/react-global-styles": "4.5.0",
+    "@hashicorp/react-head": "1.1.3",
+    "@hashicorp/react-image": "2.0.4",
+    "@hashicorp/react-mega-nav": "4.0.1-2",
+    "@hashicorp/react-product-downloader": "4.1.3",
+    "@hashicorp/react-section-header": "2.0.2",
+    "@hashicorp/react-subnav": "3.3.1",
+    "@hashicorp/react-vertical-text-block-list": "2.0.3",
+    "babel-plugin-import-glob-array": "0.2.0",
+    "fs-exists-sync": "0.1.0",
+    "gray-matter": "4.0.2",
+    "js-yaml": "3.14.0",
+    "line-reader": "0.4.0",
+    "next": "9.5.3",
     "next-auth": "^3.1.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "next-mdx-remote": "1.0.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "readdirp": "3.4.0"
   },
   "devDependencies": {
-    "dart-linkcheck": "^2.0.15",
-    "glob": "^7.1.6",
-    "husky": "^4.2.5",
-    "post-npm-install": "^2.0.0",
-    "prettier": "^2.0.5"
+    "dart-linkcheck": "2.0.15",
+    "glob": "7.1.6",
+    "husky": "4.3.0",
+    "post-npm-install": "2.0.0",
+    "prettier": "2.1.2"
   },
   "husky": {
     "hooks": {
@@ -44,7 +49,7 @@
     "generate:component": "next-hashicorp generate component",
     "generate:readme": "next-hashicorp markdown-blocks README.md",
     "lint": "next-hashicorp lint",
-    "start": "rm -rf .next/cache/next-babel-loader/ && next dev",
+    "start": "next dev",
     "dev:auth": "HASHI_ENV=preview npm start",
     "static": "npm run build && npm run export && cp _redirects out/.",
     "linkcheck": "linkcheck <website url>"

website/pages/_app.js

@@ -30,26 +30,8 @@ function App({ Component, pageProps }) {
           title={`${productName} by HashiCorp`}
           siteName={`${productName} by HashiCorp`}
           description="Write your description here"
-          image="https://www.example.com/img/og-image.png"
-          stylesheet={[
-            {
-              href:
-                'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap',
-            },
-          ]}
+          image="https://www.boundaryproject.io/img/og-image.png"
           icon={[{ href: '/favicon.ico' }]}
-          preload={[
-            { href: '/fonts/klavika/medium.woff2', as: 'font' },
-            { href: '/fonts/gilmer/light.woff2', as: 'font' },
-            { href: '/fonts/gilmer/regular.woff2', as: 'font' },
-            { href: '/fonts/gilmer/medium.woff2', as: 'font' },
-            { href: '/fonts/gilmer/bold.woff2', as: 'font' },
-            { href: '/fonts/metro-sans/book.woff2', as: 'font' },
-            { href: '/fonts/metro-sans/regular.woff2', as: 'font' },
-            { href: '/fonts/metro-sans/semi-bold.woff2', as: 'font' },
-            { href: '/fonts/metro-sans/bold.woff2', as: 'font' },
-            { href: '/fonts/dejavu/mono.woff2', as: 'font' },
-          ]}
         />
         <MegaNav product={productName} />
         <ProductSubnav />

website/pages/_document.js

@@ -1,4 +1,4 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 import HashiHead from '@hashicorp/react-head'
 
 export default class MyDocument extends Document {
@@ -9,7 +9,7 @@ export default class MyDocument extends Document {
 
   render() {
     return (
-      <html>
+      <Html>
         <HashiHead is={Head} />
         <body>
           <Main />
@@ -21,7 +21,7 @@ export default class MyDocument extends Document {
             }}
           />
         </body>
-      </html>
+      </Html>
     )
   }
 }

website/pages/docs/[[...page]].jsx

@@ -0,0 +1,31 @@
+import { productName, productSlug } from 'data/metadata'
+import order from 'data/docs-navigation.js'
+import DocsPage from 'components/temporary_docs-page'
+import {
+  generateStaticPaths,
+  generateStaticProps,
+} from 'components/temporary_docs-page/server'
+
+const subpath = 'docs'
+
+function DocsLayout(props) {
+  return (
+    <DocsPage
+      productName={productName}
+      productSlug={productSlug}
+      subpath={subpath}
+      order={order}
+      staticProps={props}
+    />
+  )
+}
+
+export async function getStaticPaths() {
+  return generateStaticPaths(subpath)
+}
+
+export async function getStaticProps({ params }) {
+  return generateStaticProps(subpath, productName, params)
+}
+
+export default DocsLayout