Implement MKTG-032 in DocsSidenav and DocsPage

package.json

@@ -16,6 +16,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
+    "dotenv": "^8.2.0",
     "eslint": "^7.18.0",
     "husky": "^4.3.8",
     "identity-obj-proxy": "^3.0.0",

packages/docs-page/README.md

@@ -1,44 +1,47 @@
 # DocsPage
 
-The **DocsPage** component lets you create a Hashicorp branded docs page in NextJS projects using `next-mdx-remote`. This is a very highly abstracted component with slightly more involved usage since it renders an entire page.
+The **DocsPage** component lets you create a Hashicorp branded docs page in NextJS projects using `next-mdx-remote`. This is a very highly abstracted component with slightly more involved usage since it renders an entire collection of pages.
 
 ## Example Usage
 
-This component is intended to be used on an [optional catch-all route](https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes) page, like `pages/docs/[[slug]].mdx` - example source shown below:
+This component is intended to be used on an [optional catch-all route](https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes) page, like `pages/docs/[[...page]].mdx` - example source shown below:
 
-```js
-import order from 'data/docs-navigation.js'
+```jsx
 import DocsPage from '@hashicorp/react-docs-page'
+// Imports below are only used server-side
 import {
   generateStaticPaths,
   generateStaticProps,
 } from '@hashicorp/react-docs-page/server'
 
-const productName = 'Vault'
-const productSlug = 'vault'
-// this example is at `pages/docs/[[slug]].mdx` - if the path is different
-// this 'subpath' prop should be adjusted to match
-const subpath = 'docs'
+//  Set up DocsPage settings
+const BASE_ROUTE = 'docs'
+const NAV_DATA = 'data/docs-nav-data.json'
+const CONTENT_DIR = 'content/docs'
+const PRODUCT = {
+  name: 'Packer',
+  slug: 'packer',
+}
 
 function DocsLayout(props) {
   return (
-    <DocsPage
-      productName={productName}
-      productSlug={productSlug}
-      subpath={subpath}
-      order={order}
-      showEditPage={true}
-      staticProps={props}
-    />
+    <DocsPage baseRoute={BASE_ROUTE} product={PRODUCT} staticProps={props} />
   )
 }
 
 export async function getStaticPaths() {
-  return generateStaticPaths(subpath)
+  const paths = await generateStaticPaths(NAV_DATA, CONTENT_DIR)
+  return { paths, fallback: false }
 }
 
 export async function getStaticProps({ params }) {
-  return generateStaticProps({ subpath, productName, params })
+  const props = await generateStaticProps(
+    NAV_DATA,
+    CONTENT_DIR,
+    params,
+    PRODUCT
+  )
+  return { props }
 }
 
 export default DocsLayout

packages/docs-page/docs.mdx

@@ -7,59 +7,24 @@ We have a lot of docs sites, all of which render content in exactly the same way
 <LiveComponent
   components={{
     staticPropsResult: {
-      mdxSource: {
-        compiledSource:
-          '"use strict";\n' +
-          '\n' +
-          'function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n' +
-          '\n' +
-          'function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n' +
-          '\n' +
-          'function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n' +
-          '\n' +
-          '/* @jsxRuntime classic */\n' +
-          '\n' +
-          '/* @jsx mdx */\n' +
-          'var layoutProps = {};\n' +
-          'var MDXLayout = "wrapper";\n' +
-          '\n' +
-          'function MDXContent(_ref) {\n' +
-          '  var components = _ref.components,\n' +
-          '      props = _objectWithoutProperties(_ref, ["components"]);\n' +
-          '\n' +
-          '  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n' +
-          '    components: components,\n' +
-          '    mdxType: "MDXLayout"\n' +
-          '  }), mdx("h1", { className: "g-type-display-2" }, "Example Page"), mdx("p", null, "This is a cool docs page!"));\n' +
-          '}\n' +
-          '\n' +
-          ';\n' +
-          'MDXContent.isMDXComponent = true;',
-        renderedOutput:
-          '<h1 className="g-type-display-2">Example Page</h1><p>This is a cool docs page!</p>',
-        scope: {},
+      mdxSource: componentProps.staticProps.properties.mdxSource.testValue,
+      frontMatter: {
+        page_title:
+          componentProps.staticProps.properties.frontMatter.properties
+            .page_title.testValue,
+        description:
+          componentProps.staticProps.properties.frontMatter.properties
+            .description.testValue,
       },
-      data: [
-        {
-          __resourcePath: 'docs/test.mdx',
-          page_title: 'Testing Page',
-          sidebar_title: 'Testing Page',
-        },
-        {
-          __resourcePath: 'docs/test2.mdx',
-          page_title: 'Other Testing Page',
-          sidebar_title: 'Other Testing Page',
-        },
-      ],
-      frontMatter: { page_title: 'Test Page', description: 'test description' },
-      pagePath: '/docs/test',
-      filePath: 'test.mdx',
+      githubFileUrl:
+        componentProps.staticProps.properties.githubFileUrl.testValue,
+      currentPath: componentProps.staticProps.properties.currentPath.testValue,
+      navData: componentProps.staticProps.properties.navData.testValue,
     },
   }}
 >{`<DocsPage
   product={{ name: 'Nomad', slug: 'nomad' }}
-  subpath='docs'
-  order={['test', 'test2']}
+  baseRoute='docs'
   // pass in the results of executing the 'generateStaticProps' function from '@hashicorp/react-docs-page/server'
   staticProps={staticPropsResult}
 >

packages/docs-page/index.js

@@ -3,26 +3,23 @@ import Content from '@hashicorp/react-content'
 import DocsSidenav from '@hashicorp/react-docs-sidenav'
 import HashiHead from '@hashicorp/react-head'
 import Head from 'next/head'
-import Link from 'next/link'
 import hydrate from 'next-mdx-remote/hydrate'
 import { SearchProvider } from '@hashicorp/react-search'
 import SearchBar from './search-bar'
 import generateComponents from './components'
 import temporary_injectJumpToSection from './temporary_jump-to-section'
 
 export function DocsPageWrapper({
-  allPageData,
   canonicalUrl,
   children,
   description,
-  filePath,
-  mainBranch = 'main',
-  order,
-  pagePath,
+  navData,
+  currentPath,
   pageTitle,
+  baseRoute,
+  githubFileUrl,
   product: { name, slug },
   showEditPage = true,
-  subpath,
 }) {
   // TEMPORARY (https://app.asana.com/0/1100423001970639/1160656182754009)
   // activates the "jump to section" feature
@@ -49,11 +46,9 @@ export function DocsPageWrapper({
           <div className="nav docs-nav">
             <DocsSidenav
               product={slug}
-              Link={Link}
-              category={subpath}
-              currentPage={pagePath}
-              data={allPageData}
-              order={order}
+              baseRoute={baseRoute}
+              currentPath={currentPath}
+              navData={navData}
             />
           </div>
         </div>
@@ -75,9 +70,7 @@ export function DocsPageWrapper({
       {/* if desired, show an "edit this page" link on the bottom right, linking to github */}
       {showEditPage && (
         <div id="edit-this-page" className="g-container">
-          <a
-            href={`https://github.com/hashicorp/${slug}/blob/${mainBranch}/website/content/${filePath}`}
-          >
+          <a href={githubFileUrl}>
             <img src={require('./img/github-logo.svg')} alt="github logo" />
             <span>Edit this page</span>
           </a>
@@ -89,12 +82,10 @@ export function DocsPageWrapper({
 
 export default function DocsPage({
   product,
-  subpath,
-  order,
-  mainBranch = 'main',
+  baseRoute,
   showEditPage = true,
   additionalComponents,
-  staticProps: { mdxSource, data, frontMatter, pagePath, filePath },
+  staticProps: { mdxSource, frontMatter, currentPath, navData, githubFileUrl },
 }) {
   // This component is written to work with next-mdx-remote -- here it hydrates the content
   const content = hydrate(mdxSource, {
@@ -103,17 +94,15 @@ export default function DocsPage({
 
   return (
     <DocsPageWrapper
-      allPageData={data}
       canonicalUrl={frontMatter.canonical_url}
       description={frontMatter.description}
-      filePath={filePath}
-      mainBranch={mainBranch}
-      order={order}
-      pagePath={pagePath}
+      githubFileUrl={githubFileUrl}
+      navData={navData}
+      currentPath={currentPath}
       pageTitle={frontMatter.page_title}
       product={product}
       showEditPage={showEditPage}
-      subpath={subpath}
+      baseRoute={baseRoute}
     >
       {content}
     </DocsPageWrapper>