update dependencies, fapply upgrades, fix breaking changes

website/components/enterprise-alert/README.md

@@ -1,27 +0,0 @@
-# Enterprise Alert Component
-
-This component is an easy way to mark some content as only applicable to the enterprise version of consul. It can be used in any documentation pages in a variety of ways. The basic implementation is written as such, on its own line within a markdown file:
-
-```jsx
-<EnterpriseAlert />
-```
-
-And renders [like this](https://p176.p0.n0.cdn.getcloudapp.com/items/geuWOzkz/Screen%20Shot%202020-05-08%20at%204.17.34%20PM.png?v=2ace1c70f48cf1bbdd17f9ce96684453)
-
-The default text can also be replaced with custom text as such:
-
-```jsx
-<EnterpriseAlert>
-  Custom text <a href="">with a link</a>
-</EnterpriseAlert>
-```
-
-Which renders [as such](https://p176.p0.n0.cdn.getcloudapp.com/items/v1uDE2vQ/Screen%20Shot%202020-05-08%20at%204.18.22%20PM.png?v=3a45268830fac868be50047060bb4303)
-
-Finally, it can be rendered inline as a "tag" to mark a section or option as enterprise only by adding the `inline` attribute:
-
-```jsx
-<EnterpriseAlert inline>
-```
-
-This is typically used after a list item, or after a headline. It renders [as such](https://p176.p0.n0.cdn.getcloudapp.com/items/KouqnrOm/Screen%20Shot%202020-05-08%20at%204.16.34%20PM.png?v=ac21328916aa98a1a853cde5989058bd)

website/components/enterprise-alert/index.jsx

@@ -1,5 +0,0 @@
-import EnterpriseAlert from '@hashicorp/react-enterprise-alert'
-
-export default function EnterpriseAlertConsul(props) {
-  return <EnterpriseAlert product="consul" {...props} />
-}

website/components/tabs/README.md

@@ -1,49 +0,0 @@
-# Tabs Component
-
-> An MDX-compatible Tabs component
-
-This React component renders tabbed content. [Example](https://p176.p0.n0.cdn.getcloudapp.com/items/E0ubRrlq/Screen%20Recording%202020-05-08%20at%2004.40%20PM.gif?v=a1f576d2c207f4312ca14adbce8a53ac)
-
-## Usage
-
-- Use the `<Tabs>` tag in your markdown file to begin a tabbed content section.
-- Use the `<Tab>` tag with a `heading` prop to separate your markdown
-
-### Important
-
-A line must be skipped between the `<Tab>` and your markdown (for both above and below said markdown). [This is a limitation of MDX also pointed out by the Docusaurus folks 🔗 ](https://v2.docusaurus.io/docs/markdown-features/#multi-language-support-code-blocks). There is work currently happening with the mdx parser to eliminate this issue.
-
-### Example
-
-```jsx
-<Tabs>
-  <Tab heading="CLI command">
-    {/* Intentionally skipped line.. */}
-    ### Content
-    {/* Intentionally skipped line.. */}
-  </Tab>
-  <Tab heading="API call using cURL">### Content</Tab>
-</Tabs>
-```
-
-### Component Props
-
-`<Tabs>` can be provided any arbitrary `children` so long as the `heading` prop is present the React or HTML tag used to wrap markdown, that said, we provide the `<Tab>` component to separate your tab content without rendering extra, unnecessary markup.
-
-This works:
-
-```jsx
-<Tabs>
-  <Tab heading="CLI command">### Content</Tab>
-  ....
-</Tabs>
-```
-
-This _does not_ work, as the `<Tab>` element is missing a `heading` prop:
-
-```jsx
-<Tabs>
-  <Tab>### Content</Tab>
-  ....
-</Tabs>
-```

website/components/tabs/index.jsx

@@ -1,20 +0,0 @@
-import ReactTabs from '@hashicorp/react-tabs'
-
-export function Tabs({ children }) {
-  if (!Array.isArray(children))
-    throw new Error('Multiple <Tab> elements required')
-
-  return (
-    <ReactTabs
-      items={children.map((Block) => ({
-        heading: Block.props.heading,
-        // eslint-disable-next-line react/display-name
-        tabChildren: () => Block,
-      }))}
-    />
-  )
-}
-
-export function Tab({ children }) {
-  return <>{children}</>
-}

website/components/tabs/style.css

@@ -1,8 +0,0 @@
-/* This is a CSS overwrite on top of the existing component styles to accommodate the Learn layout */
-.g-tabs {
-  & .g-grid-container,
-  & > .g-grid-container {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}

website/layouts/api.jsx

@@ -1,18 +1,16 @@
 import DocsPage from '@hashicorp/react-docs-page'
 import order from '../data/api-navigation.js'
 import { frontMatter as data } from '../pages/api-docs/**/*.mdx'
-import { MDXProvider } from '@mdx-js/react'
-import EnterpriseAlert from '../components/enterprise-alert'
-import { Tabs, Tab } from '../components/tabs'
 import Head from 'next/head'
 import Link from 'next/link'
+import { createMdxProvider } from '@hashicorp/nextjs-scripts/lib/providers/docs'
 
-const DEFAULT_COMPONENTS = { EnterpriseAlert, Tabs, Tab }
+const MDXProvider = createMdxProvider({ product: 'consul', preset: 'oss' })
 
 function ApiDocsLayoutWrapper(pageMeta) {
   function ApiDocsLayout(props) {
     return (
-      <MDXProvider components={DEFAULT_COMPONENTS}>
+      <MDXProvider>
         <DocsPage
           {...props}
           product="consul"

website/layouts/docs.jsx

@@ -1,18 +1,16 @@
 import DocsPage from '@hashicorp/react-docs-page'
 import order from '../data/docs-navigation.js'
 import { frontMatter as data } from '../pages/docs/**/*.mdx'
-import { MDXProvider } from '@mdx-js/react'
-import EnterpriseAlert from '../components/enterprise-alert'
-import { Tabs, Tab } from '../components/tabs'
 import Head from 'next/head'
 import Link from 'next/link'
+import { createMdxProvider } from '@hashicorp/nextjs-scripts/lib/providers/docs'
 
-const DEFAULT_COMPONENTS = { EnterpriseAlert, Tabs, Tab }
+const MDXProvider = createMdxProvider({ product: 'consul', preset: 'oss' })
 
 function DocsLayoutWrapper(pageMeta) {
   function DocsLayout(props) {
     return (
-      <MDXProvider components={DEFAULT_COMPONENTS}>
+      <MDXProvider>
         <DocsPage
           {...props}
           product="consul"

website/layouts/intro.jsx

@@ -1,18 +1,16 @@
 import DocsPage from '@hashicorp/react-docs-page'
 import order from '../data/intro-navigation.js'
 import { frontMatter as data } from '../pages/intro/**/*.mdx'
-import { MDXProvider } from '@mdx-js/react'
-import EnterpriseAlert from '../components/enterprise-alert'
-import { Tabs, Tab } from '../components/tabs'
 import Head from 'next/head'
 import Link from 'next/link'
+import { createMdxProvider } from '@hashicorp/nextjs-scripts/lib/providers/docs'
 
-const DEFAULT_COMPONENTS = { EnterpriseAlert, Tabs, Tab }
+const MDXProvider = createMdxProvider({ product: 'consul', preset: 'oss' })
 
 function IntroLayoutWrapper(pageMeta) {
   function IntroLayout(props) {
     return (
-      <MDXProvider components={DEFAULT_COMPONENTS}>
+      <MDXProvider>
         <DocsPage
           {...props}
           product="consul"

website/package.json

@@ -5,28 +5,26 @@
   "author": "HashiCorp",
   "dependencies": {
     "@hashicorp/nextjs-scripts": "^10.0.2",
-    "@hashicorp/react-alert": "^2.0.0",
+    "@hashicorp/react-alert": "^2.0.1",
     "@hashicorp/react-alert-banner": "^3.1.0",
     "@hashicorp/react-button": "^2.2.0",
     "@hashicorp/react-call-to-action": "^0.2.0",
     "@hashicorp/react-case-study-slider": "^2.1.0",
     "@hashicorp/react-code-block": "^1.2.7",
-    "@hashicorp/react-content": "^3.0.0-0",
+    "@hashicorp/react-content": "3.0.0-0",
-    "@hashicorp/react-docs-page": "^2.0.0",
+    "@hashicorp/react-docs-page": "^3.0.0",
     "@hashicorp/react-docs-sidenav": "^3.2.3",
-    "@hashicorp/react-enterprise-alert": "^2.1.0",
     "@hashicorp/react-featured-slider": "^1.1.0",
     "@hashicorp/react-global-styles": "^4.4.0",
-    "@hashicorp/react-head": "^1.0.0",
+    "@hashicorp/react-head": "^1.1.1",
     "@hashicorp/react-image": "^2.0.1",
     "@hashicorp/react-inline-svg": "^1.0.0",
     "@hashicorp/react-logo-grid": "^2.1.0",
     "@hashicorp/react-mega-nav": "^4.0.1-2",
-    "@hashicorp/react-product-downloader": "^3.2.0",
+    "@hashicorp/react-product-downloader": "^4.0.0",
     "@hashicorp/react-product-features-list": "^1.0.1",
     "@hashicorp/react-section-header": "^2.0.0",
-    "@hashicorp/react-subnav": "^3.2.0",
+    "@hashicorp/react-subnav": "^3.2.2",
-    "@hashicorp/react-tabs": "^0.4.0",
     "@hashicorp/react-text-and-content": "^4.1.0",
     "@hashicorp/react-text-split": "^0.3.0",
     "@hashicorp/react-text-split-with-code": "0.1.0",
@@ -38,11 +36,11 @@
     "babel-plugin-import-glob-array": "^0.2.0",
     "dotenv": "^8.2.0",
     "gray-matter": "^4.0.2",
-    "imagemin-mozjpeg": "^8.0.0",
+    "imagemin-mozjpeg": "^9.0.0",
-    "imagemin-optipng": "^7.1.0",
+    "imagemin-optipng": "^8.0.0",
-    "imagemin-svgo": "^7.1.0",
+    "imagemin-svgo": "^8.0.0",
-    "next": "9.4.1",
+    "next": "9.4.4",
-    "nuka-carousel": "^4.6.7",
+    "nuka-carousel": "^4.7.0",
     "react": "^16.13.1",
     "react-device-detect": "^1.12.1",
     "react-dom": "^16.13.1"

website/pages/downloads/index.jsx

@@ -3,14 +3,14 @@ import ProductDownloader from '@hashicorp/react-product-downloader'
 import Head from 'next/head'
 import HashiHead from '@hashicorp/react-head'
 
-export default function DownloadsPage({ downloadData }) {
+export default function DownloadsPage({ releaseData }) {
   return (
     <div id="p-downloads" className="g-container">
       <HashiHead is={Head} title="Downloads | Consul by HashiCorp" />
       <ProductDownloader
         product="Consul"
         version={VERSION}
-        downloads={downloadData}
+        releaseData={releaseData}
       >
         <p>
           <a href="/downloads_tools">&raquo; Download Consul Tools</a>
@@ -43,16 +43,8 @@ export default function DownloadsPage({ downloadData }) {
 
 export async function getStaticProps() {
   return fetch(`https://releases.hashicorp.com/consul/${VERSION}/index.json`)
-    .then((r) => r.json())
+    .then((res) => res.json())
-    .then((r) => {
+    .then((releaseData) => ({ props: { releaseData } }))
-      // TODO: restructure product-downloader to run this logic internally
-      return r.builds.reduce((acc, build) => {
-        if (!acc[build.os]) acc[build.os] = {}
-        acc[build.os][build.arch] = build.url
-        return acc
-      }, {})
-    })
-    .then((r) => ({ props: { downloadData: r } }))
     .catch(() => {
       throw new Error(
         `--------------------------------------------------------

website/pages/style.css

@@ -40,7 +40,6 @@
 @import '../components/basic-hero/style.css';
 @import '../components/enterprise-comparison/style.css';
 @import '../components/footer/style.css';
-@import '../components/tabs/style.css';
 @import '../components/learn-callout/style.css';
 @import '../components/case-study-carousel/style.css';