🌷 Docs Website Maintenance (#9408)

* update dependencies, adjust for breaking changes - Updates all dependencies to the latest versions - Updates to consent manager to add all analytics scripts in a way that is compliant with GDPR - Improves the product download component to default to 64-bit architecture for `x86_64` arch tags, removes some repeated processing code on the downloads page - Standardizes and documents components available for use within markdown files, adding a new `Tabs` component - Documents syntax highlighting standards - You can now `@include` non-markdown files, they will be imported into a code block. This is great for things like code examples! * Update website/README.md
2020-06-12 06:08:23 -04:00 · 2020-06-12 06:08:23 -04:00 · c9fdd021a5
parent 70a2c7d364
commit c9fdd021a5
7 changed files with 511 additions and 265 deletions
--- a/website/README.md
+++ b/website/README.md
@ -116,6 +116,125 @@ There are several custom markdown plugins that are available by default that enh

  ...while it perhaps would not be an improved user experience, no links would break because of it. The best approach is to **avoid changing headlines and inline code at the start of a list item**. If you must change one of these items, make sure to tag someone from the digital marketing development team on your pull request, they will help to ensure as much compatibility as possible.

+### Custom Components
+
+A number of custom [mdx components](https://mdxjs.com/) are available for use within any `.mdx` file. Each one is documented below:
+
+#### Tabs
+
+The `Tabs` component creates tabbed content of any type, but is often used for code examples given in different languages. Here's an example of how it looks from the Vagrant documentation website:
+
+![Tabs Component](https://p176.p0.n0.cdn.getcloudapp.com/items/WnubALZ4/Screen%20Recording%202020-06-11%20at%2006.03%20PM.gif?v=1de81ea720a8cc8ade83ca64fb0b9edd)
+
+It can be used as such within a markdown file:
+
+````mdx
+Normal **markdown** content.
+
+<Tabs>
+<Tab heading="CLI command">
+            <!-- Intentionally skipped line.. -->
+```shell-session
+$ command ...
+```
+            <!-- Intentionally skipped line.. -->
+</Tab>
+<Tab heading="API call using cURL">
+
+```shell-session
+$ curl ...
+```
+
+</Tab>
+</Tabs>
+
+Contined normal markdown content
+````
+
+The intentionally skipped line is a limitation of the mdx parser which is being actively worked on. All tabs must have a heading, and there is no limit to the number of tabs, though it is recommended to go for a maximum of three or four.
+
+#### Enterprise Alert
+
+This component provides a standard way to call out functionality as being present only in the enterprise version of the software. It can be presented in two contexts, inline or standalone. Here's an example of standalone usage from the Consul docs website:
+
+![Enterprise Alert Component - Standalone](https://p176.p0.n0.cdn.getcloudapp.com/items/WnubALp8/Screen%20Shot%202020-06-11%20at%206.06.03%20PM.png?v=d1505b90bdcbde6ed664831a885ea5fb)
+
+The standalone component can be used as such in markdown files:
+
+```mdx
+# Page Headline
+
+<EnterpriseAlert />
+
+Continued markdown content...
+```
+
+It can also receive custom text contents if you need to change the messaging but wish to retain the style. This will replace the text `This feature is available in all versions of Consul Enterprise.` with whatever you add. For example:
+
+```mdx
+# Page Headline
+
+<EnterpriseAlert>
+  My custom text here, and <a href="#">a link</a>!
+</EnterpriseAlert>
+
+Continued markdown content...
+```
+
+It's important to note that once you are adding custom content, it must be html and can not be markdown, as demonstrated above with the link.
+
+Now let's look at inline usage, here's an example:
+
+![Enterprise Alert Component - Inline](https://p176.p0.n0.cdn.getcloudapp.com/items/L1upYLEJ/Screen%20Shot%202020-06-11%20at%206.07.50%20PM.png?v=013ba439263de8292befbc851d31dd78)
+
+And here's how it could be used in your markdown document:
+
+```mdx
+### Some Enterprise Feature <EnterpriseAlert inline />
+
+Continued markdown content...
+```
+
+It's also worth noting that this component will automatically adjust to the correct product colors depending on the context.
+
+#### Other Components
+
+Other custom components can be made available on a per-site basis, the above are the standards. If you have questions about custom components that are not documented here, or have a request for a new custom component, please reach out to @hashicorp/digital-marketing.
+
+### Syntax Highlighting
+
+When using fenced code blocks, the recommendation is to tag the code block with a language so that it can be syntax highlighted. For example:
+
+````
+```
+// BAD: Code block with no language tag
+```
+
+```javascript
+// GOOD: Code block with a language tag
+```
+````
+
+Check out the [supported languages list](https://prismjs.com/#supported-languages) for the syntax highlighter we use if you want to double check the language name.
+
+It is also worth noting specifically that if you are using a code block that is an example of a terminal command, the correct language tag is `shell-session`. For example:
+
+🚫**BAD**: Using `shell`, `sh`, `bash`, or `plaintext` to represent a terminal command
+
+````
+```shell
+$ terraform apply
+```
+````
+
+✅**GOOD**: Using `shell-session` to represent a terminal command
+
+````
+```shell-session
+$ terraform apply
+```
+````
+
 <!-- END: editing-markdown -->

 <!-- BEGIN: editing-docs-sidebars -->
--- a/website/layouts/docs.jsx
+++ b/website/layouts/docs.jsx
@ -3,10 +3,14 @@ import order from 'data/docs-navigation.js'
 import { frontMatter as data } from '../pages/docs/**/*.mdx'
 import Head from 'next/head'
 import Link from 'next/link'
+import { createMdxProvider } from '@hashicorp/nextjs-scripts/lib/providers/docs'

-function DocsLayoutWrapper(pageMeta) {
+const MDXProvider = createMdxProvider({ product: 'packer' })
+
+export default function DocsLayoutWrapper(pageMeta) {
  function DocsLayout(props) {
    return (
+      <MDXProvider>
        <DocsPage
          {...props}
          product="packer"
@ -25,6 +29,7 @@ function DocsLayoutWrapper(pageMeta) {
          }}
          resourceURL={`https://github.com/hashicorp/packer/blob/master/website/pages/${pageMeta.__resourcePath}`}
        />
+      </MDXProvider>
    )
  }

@ -32,5 +37,3 @@ function DocsLayoutWrapper(pageMeta) {

  return DocsLayout
 }
-
-export default DocsLayoutWrapper
--- a/website/layouts/guides.jsx
+++ b/website/layouts/guides.jsx
@ -3,10 +3,14 @@ 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'
+import { createMdxProvider } from '@hashicorp/nextjs-scripts/lib/providers/docs'

-function GuidesLayoutWrapper(pageMeta) {
+const MDXProvider = createMdxProvider({ product: 'packer' })
+
+export default function GuidesLayoutWrapper(pageMeta) {
  function GuidesLayout(props) {
    return (
+      <MDXProvider>
        <DocsPage
          {...props}
          product="packer"
@ -25,6 +29,7 @@ function GuidesLayoutWrapper(pageMeta) {
          }}
          resourceURL={`https://github.com/hashicorp/packer/blob/master/website/pages/${pageMeta.__resourcePath}`}
        />
+      </MDXProvider>
    )
  }

@ -32,5 +37,3 @@ function GuidesLayoutWrapper(pageMeta) {

  return GuidesLayout
 }
-
-export default GuidesLayoutWrapper
--- a/website/layouts/intro.jsx
+++ b/website/layouts/intro.jsx
@ -3,10 +3,14 @@ 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'
+import { createMdxProvider } from '@hashicorp/nextjs-scripts/lib/providers/docs'

-function IntroLayoutWrapper(pageMeta) {
+const MDXProvider = createMdxProvider({ product: 'packer' })
+
+export default function IntroLayoutWrapper(pageMeta) {
  function IntroLayout(props) {
    return (
+      <MDXProvider>
        <DocsPage
          {...props}
          product="packer"
@ -25,6 +29,7 @@ function IntroLayoutWrapper(pageMeta) {
          }}
          resourceURL={`https://github.com/hashicorp/packer/blob/master/website/pages/${pageMeta.__resourcePath}`}
        />
+      </MDXProvider>
    )
  }

@ -32,5 +37,3 @@ function IntroLayoutWrapper(pageMeta) {

  return IntroLayout
 }
-
-export default IntroLayoutWrapper
--- a/website/package-lock.json
+++ b/website/package-lock.json
@ -1423,31 +1423,39 @@
        "@hapi/hoek": "^8.3.0"
      }
    },
+    "@hashicorp/js-utils": {
+      "version": "1.0.9-alpha.0",
+      "resolved": "https://registry.npmjs.org/@hashicorp/js-utils/-/js-utils-1.0.9-alpha.0.tgz",
+      "integrity": "sha512-/Mgw6ufzjsysw5U0v7c0tCXMQeE4BSbGeasDaTuh1r6jQ+2Cokl1XhPqKqXn4+xkcx3CIVdyoUYOSLmgzutn3Q=="
+    },
    "@hashicorp/nextjs-scripts": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@hashicorp/nextjs-scripts/-/nextjs-scripts-8.3.2.tgz",
-      "integrity": "sha512-Oi+e77ajI1Bo93HyVLx5XXF7U0/+YZkkQVUsWXdX0NkWVZSu85pxzI0jh5XxneVSLYkYBlX78lXZG/GJDwBBnQ==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@hashicorp/nextjs-scripts/-/nextjs-scripts-10.0.1.tgz",
+      "integrity": "sha512-IwKr0HQvt6NZoJ9SlTBXqgDHYi4ticfcLM3mH3WH8b0Mr2B+Y5I/VzOOHiLxVcWmJmOECuV9EY+TaxlE5h2YQQ==",
      "requires": {
        "@bugsnag/js": "7.1.1",
        "@bugsnag/plugin-react": "7.1.1",
-        "@hashicorp/react-consent-manager": "2.1.0",
-        "@hashicorp/remark-plugins": "2.2.2",
+        "@hashicorp/react-consent-manager": "2.1.1",
+        "@hashicorp/react-enterprise-alert": "^2.1.0",
+        "@hashicorp/react-tabs": "^0.4.0",
+        "@hashicorp/remark-plugins": "3.0.0",
        "@mapbox/rehype-prism": "0.4.0",
+        "@mdx-js/react": "^1.6.5",
        "@next/bundle-analyzer": "9.4.4",
-        "@typescript-eslint/eslint-plugin": "3.1.0",
-        "@typescript-eslint/parser": "3.1.0",
+        "@typescript-eslint/eslint-plugin": "3.2.0",
+        "@typescript-eslint/parser": "3.2.0",
        "babel-eslint": "10.1.0",
-        "chalk": "4.0.0",
+        "chalk": "4.1.0",
        "debug": "4.1.1",
        "ejs": "3.1.3",
-        "eslint": "7.1.0",
+        "eslint": "7.2.0",
        "eslint-config-prettier": "6.11.0",
        "eslint-plugin-jsx-a11y": "6.2.3",
        "eslint-plugin-prettier": "3.1.3",
        "eslint-plugin-react": "7.20.0",
-        "fs-extra": "9.0.0",
+        "fs-extra": "9.0.1",
        "inquirer": "7.1.0",
-        "lint-staged": "10.2.7",
+        "lint-staged": "10.2.9",
        "next-mdx-enhanced": "3.0.0",
        "next-optimized-images": "2.6.1",
        "next-transpile-modules": "3.3.0",
@ -1458,16 +1466,19 @@
        "postcss-preset-env": "6.7.0",
        "pretty-quick": "2.0.1",
        "readdirp": "3.4.0",
+        "rehype-katex": "^3.0.0",
+        "remark-math": "^2.0.1",
        "rivet-graphql": "0.0.2",
        "signale": "1.4.0",
-        "stylelint": "^13.5.0",
+        "stylelint": "^13.6.0",
+        "stylelint-config-css-modules": "^2.2.0",
        "stylelint-config-prettier": "^8.0.1",
        "stylelint-config-standard": "^20.0.0",
        "stylelint-media-use-custom-media": "^2.0.0",
        "stylelint-order": "^4.1.0",
        "stylelint-use-nesting": "^3.0.0",
        "stylelint-value-no-unknown-custom-properties": "^3.0.0",
-        "typescript": "3.9.3",
+        "typescript": "3.9.5",
        "typewriter": "7.1.0"
      },
      "dependencies": {
@ -1481,9 +1492,9 @@
          }
        },
        "chalk": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
-          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
@ -1528,9 +1539,9 @@
      }
    },
    "@hashicorp/react-consent-manager": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@hashicorp/react-consent-manager/-/react-consent-manager-2.1.0.tgz",
-      "integrity": "sha512-3AV6acJmj6bnYAy2mBA04/fuaigOafzG68N43XZaA720VX+wBLVR4TOrtHpPpOfQJ2yR/4RVRcAzqzjYG8+pHA==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-consent-manager/-/react-consent-manager-2.1.1.tgz",
+      "integrity": "sha512-tIVR3LhDnwcHAxa+lrfrjJmthynCzpVrn9MYHcqKBVrCozV3SCC9zeRjPSlvxU9/GfAYAefull2hH/kg/duyOw==",
      "requires": {
        "@hashicorp/react-button": "^2.2.0",
        "@hashicorp/react-toggle": "^1.0.1",
@ -1546,20 +1557,20 @@
      "integrity": "sha512-yP5d8zA6az3rvL1vHjsV8c9jUl05M06knvtmMdP4VYlkElikeoJ0kd/oJi0n1Zb5s4Pe4k7zOZah7VmYLYdwyw=="
    },
    "@hashicorp/react-docs-page": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@hashicorp/react-docs-page/-/react-docs-page-2.0.0.tgz",
-      "integrity": "sha512-0C8qjJHl/6QGbgsJG/yY+ixYCtrkb03qjzTUuZtgHIKtsYnxjqhJuTB8p2BtePXfRzEjjjhoZ0VRhJsB8OOGQA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-docs-page/-/react-docs-page-3.0.0.tgz",
+      "integrity": "sha512-bdyKzNYCNmUNuEu1i0wNo/LBv0MBhcrFZf9VzKLQnG2oZy44iCsX+Oq8l+gXALO1hLBIRPmlsowTNnSAHPFwbw==",
      "requires": {
-        "@hashicorp/react-content": "^2.2.1",
+        "@hashicorp/react-content": "^3.0.0",
        "@hashicorp/react-docs-sidenav": "^3.2.3",
-        "@hashicorp/react-head": "^1.0.0",
+        "@hashicorp/react-head": "^1.1.1",
        "@hashicorp/react-inline-svg": "^1.0.0"
      },
      "dependencies": {
        "@hashicorp/react-content": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/@hashicorp/react-content/-/react-content-2.2.1.tgz",
-          "integrity": "sha512-1CHIwS/hUrZEVArGLHXhqyGwmpIl6Un6DNFq0281MUtMGpGKP56Y4kSLYSqtTNuNBmG8zoDboaJ/qBXJMq5f+Q=="
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/@hashicorp/react-content/-/react-content-3.0.0.tgz",
+          "integrity": "sha512-boTEhinzvu3Pi8SZJ5tnu8/cykSQinbHtt0PuLDG/lZl7HSYX4fZNW2Xjm/UMOwd3V1hcia5zHa1NZixsXBGyA=="
        }
      }
    },
@ -1572,15 +1583,23 @@
        "fuzzysearch": "^1.0.3"
      }
    },
+    "@hashicorp/react-enterprise-alert": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-enterprise-alert/-/react-enterprise-alert-2.1.0.tgz",
+      "integrity": "sha512-SYSn7I23aPQewdw43DtDm8tgeUXmlRIxX1UKpGqE1gmBOk9ygEBdyd5OZ/Cecg+doIKJwWB7V9uv2vMu6+GSFQ==",
+      "requires": {
+        "@hashicorp/js-utils": "^1.0.9-alpha.0"
+      }
+    },
    "@hashicorp/react-global-styles": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/@hashicorp/react-global-styles/-/react-global-styles-4.4.0.tgz",
      "integrity": "sha512-lv6XR2plm2m3+qO6VE+RYquTzOODIt3mQ/1fBT1bn7wsR0qxFiuryW4JfsF94oCGk++LkDkRt/8V742HiT+fHw=="
    },
    "@hashicorp/react-head": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@hashicorp/react-head/-/react-head-1.0.0.tgz",
-      "integrity": "sha512-s3klBASVhR8+mwF2SEBGxWk631OU/RecAvR59ry0n3cRFIj8dmIMYl1lcKCRHz28yDdPhYRWOpiHOmtckrg50w=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-head/-/react-head-1.1.1.tgz",
+      "integrity": "sha512-zYr1kaPQuy14+EVVqyXTN6sXc+9Z/ezLLQTMfnx1lMgFXNl+Fe3npRRnWyku+h0xFbJ1yzjn8cmRHiff0eiYhg=="
    },
    "@hashicorp/react-image": {
      "version": "2.0.1",
@ -1613,9 +1632,9 @@
      }
    },
    "@hashicorp/react-product-downloader": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@hashicorp/react-product-downloader/-/react-product-downloader-3.3.0.tgz",
-      "integrity": "sha512-/7kVCUCN7WAyOITvrW5ga1x5+/yDkzt7SJqyH+o+2TEpZWUiP2BQ8yRHvAuxby9IU1k55XLXtsXzJkrztZNDzQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-product-downloader/-/react-product-downloader-4.0.0.tgz",
+      "integrity": "sha512-Dy1qdpGk31THTLJ3cSaL6CH08PFvBtK2besORGQFmH5R6xA0Nw62EeZ3mWcKg8q8/ogmWHExYsPfSanuNv9FQg==",
      "requires": {
        "@hashicorp/react-button": "^2.2.0"
      }
@ -1637,9 +1656,9 @@
      }
    },
    "@hashicorp/react-subnav": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@hashicorp/react-subnav/-/react-subnav-3.2.1.tgz",
-      "integrity": "sha512-vrl9blWG08Tdm5F4B/amp2ru16pAeUErlRLIRmn0x4lFZoLwBAX80HEJET5n+At7Y7KEtKi2JXexgwPW7moO6g==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-subnav/-/react-subnav-3.2.2.tgz",
+      "integrity": "sha512-8BEUkDXnETJf0HFMEgFevRTNwpJdJsWu5dNdPOIwTw4x1ASCUunLJzTEWKtUH3i7c36VnspwHU4cmX0AX/xRkA==",
      "requires": {
        "@hashicorp/react-button": "^2.2.0",
        "@hashicorp/react-global-styles": "^4.4.0",
@ -1655,6 +1674,16 @@
        }
      }
    },
+    "@hashicorp/react-tabs": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-tabs/-/react-tabs-0.4.0.tgz",
+      "integrity": "sha512-KSkd3akWC9843ybMEw1Ahga/yCfiG2BWLvjb1Hl1qVWrYIHPAYQ+W+mLvMRKJrGPlCMCTqpiNR5bK8iBvcDC/Q==",
+      "requires": {
+        "@hashicorp/react-global-styles": "^4.4.0",
+        "@hashicorp/react-inline-svg": "^1.0.0",
+        "@tippy.js/react": "^3.1.1"
+      }
+    },
    "@hashicorp/react-toggle": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@hashicorp/react-toggle/-/react-toggle-1.0.1.tgz",
@ -1671,9 +1700,9 @@
      }
    },
    "@hashicorp/remark-plugins": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/@hashicorp/remark-plugins/-/remark-plugins-2.2.2.tgz",
-      "integrity": "sha512-5iEae5lhZ/PnNHdFO5aExxbazN90Y7Eo7qAszx6wlX3C3xeGPphTVxuRjCx0AcpmU9DHeubhoXuO0rsBlqYW5A==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@hashicorp/remark-plugins/-/remark-plugins-3.0.0.tgz",
+      "integrity": "sha512-K5gn2kXW8zs2MSduobwnv5hXPANXfuH3bL5Ji42UoExoUmbitbIONtsn5N8ckeUVL+Ykk8dlMsb7gZkFHalLZg==",
      "requires": {
        "github-slugger": "^1.3.0",
        "remark": "^11.0.2",
@ -1969,14 +1998,6 @@
        "fastq": "^1.6.0"
      }
    },
-    "@samverschueren/stream-to-observable": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz",
-      "integrity": "sha512-MI4Xx6LHs4Webyvi6EbspgyAb4D2Q2VtnCQ1blOJcoLS6mVa8lNN2rkIy1CVxfTUpoyIbCTkXES1rLXztFD1lg==",
-      "requires": {
-        "any-observable": "^0.3.0"
-      }
-    },
    "@segment/in-eu": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/@segment/in-eu/-/in-eu-0.2.1.tgz",
@ -2079,9 +2100,9 @@
          }
        },
        "remark-stringify": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-8.0.0.tgz",
-          "integrity": "sha512-cABVYVloFH+2ZI5bdqzoOmemcz/ZuhQSH6W6ZNYnLojAUUn3xtX7u+6BpnYp35qHoGr2NFBsERV14t4vCIeW8w==",
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-8.1.0.tgz",
+          "integrity": "sha512-FSPZv1ds76oAZjurhhuV5qXSUSoz6QRPuwYK38S41sLHwg4oB7ejnmZshj7qwjgYLf93kdz6BOX9j5aidNE7rA==",
          "requires": {
            "ccount": "^1.0.0",
            "is-alphanumeric": "^1.0.0",
@ -2147,6 +2168,15 @@
        "defer-to-connect": "^1.0.1"
      }
    },
+    "@tippy.js/react": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@tippy.js/react/-/react-3.1.1.tgz",
+      "integrity": "sha512-KF45vW/jKh/nBXk/2zzTFslv/T46zOMkIoDJ56ymZ+M00yHttk58J5wZ29oqGqDIUnobWSZD+cFpbR4u/UUvgw==",
+      "requires": {
+        "prop-types": "^15.6.2",
+        "tippy.js": "^5.1.1"
+      }
+    },
    "@types/color-name": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@ -2206,11 +2236,11 @@
      "integrity": "sha512-S9q47ByT2pPvD65IvrWp7qppVMpk9WGMbVq9wbWZOHg6tnXSD4vyhao6nOSBwwfDdV2p3Kx9evA9vI+XWTfDvw=="
    },
    "@typescript-eslint/eslint-plugin": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.1.0.tgz",
-      "integrity": "sha512-D52KwdgkjYc+fmTZKW7CZpH5ZBJREJKZXRrveMiRCmlzZ+Rw9wRVJ1JAmHQ9b/+Ehy1ZeaylofDB9wwXUt83wg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.2.0.tgz",
+      "integrity": "sha512-t9RTk/GyYilIXt6BmZurhBzuMT9kLKw3fQoJtK9ayv0tXTlznXEAnx07sCLXdkN3/tZDep1s1CEV95CWuARYWA==",
      "requires": {
-        "@typescript-eslint/experimental-utils": "3.1.0",
+        "@typescript-eslint/experimental-utils": "3.2.0",
        "functional-red-black-tree": "^1.0.1",
        "regexpp": "^3.0.0",
        "semver": "^7.3.2",
@ -2218,31 +2248,31 @@
      }
    },
    "@typescript-eslint/experimental-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.1.0.tgz",
-      "integrity": "sha512-Zf8JVC2K1svqPIk1CB/ehCiWPaERJBBokbMfNTNRczCbQSlQXaXtO/7OfYz9wZaecNvdSvVADt6/XQuIxhC79w==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.2.0.tgz",
+      "integrity": "sha512-UbJBsk+xO9dIFKtj16+m42EvUvsjZbbgQ2O5xSTSfVT1Z3yGkL90DVu0Hd3029FZ5/uBgl+F3Vo8FAcEcqc6aQ==",
      "requires": {
        "@types/json-schema": "^7.0.3",
-        "@typescript-eslint/typescript-estree": "3.1.0",
+        "@typescript-eslint/typescript-estree": "3.2.0",
        "eslint-scope": "^5.0.0",
        "eslint-utils": "^2.0.0"
      }
    },
    "@typescript-eslint/parser": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.1.0.tgz",
-      "integrity": "sha512-NcDSJK8qTA2tPfyGiPes9HtVKLbksmuYjlgGAUs7Ld2K0swdWibnCq9IJx9kJN8JJdgUJSorFiGaPHBgH81F/Q==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.2.0.tgz",
+      "integrity": "sha512-Vhu+wwdevDLVDjK1lIcoD6ZbuOa93fzqszkaO3iCnmrScmKwyW/AGkzc2UvfE5TCoCXqq7Jyt6SOXjsIlpqF4A==",
      "requires": {
        "@types/eslint-visitor-keys": "^1.0.0",
-        "@typescript-eslint/experimental-utils": "3.1.0",
-        "@typescript-eslint/typescript-estree": "3.1.0",
+        "@typescript-eslint/experimental-utils": "3.2.0",
+        "@typescript-eslint/typescript-estree": "3.2.0",
        "eslint-visitor-keys": "^1.1.0"
      }
    },
    "@typescript-eslint/typescript-estree": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.1.0.tgz",
-      "integrity": "sha512-+4nfYauqeQvK55PgFrmBWFVYb6IskLyOosYEmhH3mSVhfBp9AIJnjExdgDmKWoOBHRcPM8Ihfm2BFpZf0euUZQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.2.0.tgz",
+      "integrity": "sha512-uh+Y2QO7dxNrdLw7mVnjUqkwO/InxEqwN0wF+Za6eo3coxls9aH9kQ/5rSvW2GcNanebRTmsT5w1/92lAOb1bA==",
      "requires": {
        "debug": "^4.1.1",
        "eslint-visitor-keys": "^1.1.0",
@ -2430,9 +2460,9 @@
      }
    },
    "acorn": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz",
-      "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ=="
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.3.1.tgz",
+      "integrity": "sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA=="
    },
    "acorn-jsx": {
      "version": "5.2.0",
@ -2543,13 +2573,6 @@
        "ms": "^2.0.0",
        "remove-trailing-slash": "^0.1.0",
        "uuid": "^3.2.1"
-      },
-      "dependencies": {
-        "uuid": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
-        }
      }
    },
    "anser": {
@ -2583,11 +2606,6 @@
        "color-convert": "^1.9.0"
      }
    },
-    "any-observable": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/any-observable/-/any-observable-0.3.0.tgz",
-      "integrity": "sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog=="
-    },
    "anymatch": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
@ -4513,11 +4531,6 @@
        }
      }
    },
-    "clone": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
-      "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
-    },
    "clone-deep": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@ -5435,14 +5448,6 @@
      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
    },
-    "defaults": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
-      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
-      "requires": {
-        "clone": "^1.0.2"
-      }
-    },
    "defer-to-connect": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
@ -5785,11 +5790,6 @@
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.453.tgz",
      "integrity": "sha512-IQbCfjJR0NDDn/+vojTlq7fPSREcALtF8M1n01gw7nQghCtfFYrJ2dfhsp8APr8bANoFC8vRTFVXMOGpT0eetw=="
    },
-    "elegant-spinner": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-2.0.0.tgz",
-      "integrity": "sha512-5YRYHhvhYzV/FC4AiMdeSIg3jAYGq9xFvbhZMpPlJoBsfYgrw2DSCYeXfat6tYBu45PWiyRr3+flaCPPmviPaA=="
-    },
    "elliptic": {
      "version": "6.5.2",
      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
@ -5982,9 +5982,9 @@
      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
    },
    "eslint": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.1.0.tgz",
-      "integrity": "sha512-DfS3b8iHMK5z/YLSme8K5cge168I8j8o1uiVmFCgnnjxZQbCGyraF8bMl7Ju4yfBmCuxD7shOF7eqGkcuIHfsA==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.2.0.tgz",
+      "integrity": "sha512-B3BtEyaDKC5MlfDa2Ha8/D6DsS4fju95zs0hjS3HdGazw+LNayai38A25qMppK37wWGWNYSPOR6oYzlz5MHsRQ==",
      "requires": {
        "@babel/code-frame": "^7.0.0",
        "ajv": "^6.10.0",
@ -5992,10 +5992,10 @@
        "cross-spawn": "^7.0.2",
        "debug": "^4.0.1",
        "doctrine": "^3.0.0",
-        "eslint-scope": "^5.0.0",
+        "eslint-scope": "^5.1.0",
        "eslint-utils": "^2.0.0",
-        "eslint-visitor-keys": "^1.1.0",
-        "espree": "^7.0.0",
+        "eslint-visitor-keys": "^1.2.0",
+        "espree": "^7.1.0",
        "esquery": "^1.2.0",
        "esutils": "^2.0.2",
        "file-entry-cache": "^5.0.1",
@ -6034,9 +6034,9 @@
          }
        },
        "chalk": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
-          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
@ -6146,9 +6146,9 @@
      }
    },
    "eslint-scope": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz",
-      "integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.0.tgz",
+      "integrity": "sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==",
      "requires": {
        "esrecurse": "^4.1.0",
        "estraverse": "^4.1.1"
@ -6163,18 +6163,18 @@
      }
    },
    "eslint-visitor-keys": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz",
-      "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.2.0.tgz",
+      "integrity": "sha512-WFb4ihckKil6hu3Dp798xdzSfddwKKU3+nGniKF6HfeW6OLd2OUDEPP7TcHtB5+QXOKg2s6B2DaMPE1Nn/kxKQ=="
    },
    "espree": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-7.0.0.tgz",
-      "integrity": "sha512-/r2XEx5Mw4pgKdyb7GNLQNsu++asx/dltf/CI8RFi9oGHxmQFgvLbc5Op4U6i8Oaj+kdslhJtVlEZeAqH5qOTw==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-7.1.0.tgz",
+      "integrity": "sha512-dcorZSyfmm4WTuTnE5Y7MEN1DyoPYy1ZR783QW1FJoenn7RailyWFsq/UL6ZAAA7uXurN9FIpYyUs3OfiIW+Qw==",
      "requires": {
-        "acorn": "^7.1.1",
+        "acorn": "^7.2.0",
        "acorn-jsx": "^5.2.0",
-        "eslint-visitor-keys": "^1.1.0"
+        "eslint-visitor-keys": "^1.2.0"
      }
    },
    "esprima": {
@ -7230,9 +7230,9 @@
      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
    },
    "fs-extra": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.0.tgz",
-      "integrity": "sha512-pmEYSk3vYsG/bF651KPUXZ+hvjpgWYw/Gc7W9NFUe3ZVLczKKWIij3IKpOrQcdw4TILtibFslZ0UmR8Vvzig4g==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
+      "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
      "requires": {
        "at-least-node": "^1.0.0",
        "graceful-fs": "^4.2.0",
@ -7740,6 +7740,11 @@
        "xtend": "^4.0.1"
      }
    },
+    "hast-util-is-element": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-1.0.4.tgz",
+      "integrity": "sha512-NFR6ljJRvDcyPP5SbV7MyPBgF47X3BsskLnmw1U34yL+X6YC0MoBx9EyMg8Jtx4FzGH95jw8+c1VPLHaRA0wDQ=="
+    },
    "hast-util-parse-selector": {
      "version": "2.2.4",
      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.4.tgz",
@ -7777,6 +7782,16 @@
      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-1.0.3.tgz",
      "integrity": "sha512-3lDgDE5OdpTfP3aFeKRWEwdIZ4vprztvp+AoD+RhF7uGOBs1yBDWZFadxnjcUV4KCoI3vB9A7gdFO98hEXA90w=="
    },
+    "hast-util-to-text": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-2.0.0.tgz",
+      "integrity": "sha512-idXqFGmKInLKcFMbLvh0fldmV94o+aOdXL/z5H5XhPhUp/5vzycu7i15c8V9kC6W3XgGHg2uuiIcRJlWtESVfQ==",
+      "requires": {
+        "hast-util-is-element": "^1.0.0",
+        "repeat-string": "^1.0.0",
+        "unist-util-find-after": "^3.0.0"
+      }
+    },
    "hastscript": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-5.1.2.tgz",
@ -8807,9 +8822,9 @@
      "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg=="
    },
    "jake": {
-      "version": "10.8.1",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.1.tgz",
-      "integrity": "sha512-eSp5h9S7UFzKdQERTyF+KuPLjDZa1Tbw8gCVUn98n4PbIkLEDGe4zl7vF4Qge9kQj06HcymnksPk8jznPZeKsA==",
+      "version": "10.8.2",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz",
+      "integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==",
      "requires": {
        "async": "0.9.x",
        "chalk": "^2.4.2",
@ -8941,6 +8956,14 @@
        "object.assign": "^4.1.0"
      }
    },
+    "katex": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.11.1.tgz",
+      "integrity": "sha512-5oANDICCTX0NqYIyAiFCCwjQ7ERu3DQG2JFHLbYOf+fXaMoH8eg/zOq5WSYJsKMi/QebW+Eh3gSM+oss1H/bww==",
+      "requires": {
+        "commander": "^2.19.0"
+      }
+    },
    "keyv": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
@ -8995,9 +9018,9 @@
      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
    },
    "lint-staged": {
-      "version": "10.2.7",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.2.7.tgz",
-      "integrity": "sha512-srod2bTpF8riaLz+Bgr6v0mI/nSntE8M9jbh4WwAhoosx0G7RKEUIG7mI5Nu5SMbTF9o8GROPgK0Lhf5cDnUUw==",
+      "version": "10.2.9",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.2.9.tgz",
+      "integrity": "sha512-ziRAuXEqvJLSXg43ezBpHxRW8FOJCXISaXU//BWrxRrp5cBdRkIx7g5IsB3OI45xYGE0S6cOacfekSjDyDKF2g==",
      "requires": {
        "chalk": "^4.0.0",
        "cli-truncate": "2.1.0",
@ -9005,8 +9028,9 @@
        "cosmiconfig": "^6.0.0",
        "debug": "^4.1.1",
        "dedent": "^0.7.0",
+        "enquirer": "^2.3.5",
        "execa": "^4.0.1",
-        "listr2": "^2.0.2",
+        "listr2": "^2.1.0",
        "log-symbols": "^4.0.0",
        "micromatch": "^4.0.2",
        "normalize-path": "^3.0.0",
@ -9025,9 +9049,9 @@
          }
        },
        "chalk": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
-          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
@ -9067,24 +9091,18 @@
      }
    },
    "listr2": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/listr2/-/listr2-2.0.4.tgz",
-      "integrity": "sha512-oJaAcplPsa72rKW0eg4P4LbEJjhH+UO2I8uqR/I2wzHrVg16ohSfUy0SlcHS21zfYXxtsUpL8YXGHjyfWMR0cg==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-2.1.3.tgz",
+      "integrity": "sha512-6oy3QhrZAlJGrG8oPcRp1hix1zUpb5AvyvZ5je979HCyf48tIj3Hn1TG5+rfyhz30t7HfySH/OIaVbwrI2kruA==",
      "requires": {
-        "@samverschueren/stream-to-observable": "^0.3.0",
        "chalk": "^4.0.0",
-        "cli-cursor": "^3.1.0",
        "cli-truncate": "^2.1.0",
-        "elegant-spinner": "^2.0.0",
-        "enquirer": "^2.3.5",
        "figures": "^3.2.0",
        "indent-string": "^4.0.0",
        "log-update": "^4.0.0",
        "p-map": "^4.0.0",
-        "pad": "^3.2.0",
        "rxjs": "^6.5.5",
-        "through": "^2.3.8",
-        "uuid": "^7.0.2"
+        "through": "^2.3.8"
      },
      "dependencies": {
        "ansi-styles": {
@ -9097,9 +9115,9 @@
          }
        },
        "chalk": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
-          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
@ -9275,9 +9293,9 @@
          }
        },
        "chalk": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
-          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
@ -9813,9 +9831,9 @@
      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
    },
    "merge2": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.3.0.tgz",
-      "integrity": "sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw=="
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
    },
    "methods": {
      "version": "1.1.2",
@ -10975,14 +10993,6 @@
        }
      }
    },
-    "pad": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/pad/-/pad-3.2.0.tgz",
-      "integrity": "sha512-2u0TrjcGbOjBTJpyewEl4hBO3OeX5wWue7eIFPzQTg6wFSvoaHcBTTUY5m+n0hd04gmTCPuY0kCpVIVuw5etwg==",
-      "requires": {
-        "wcwidth": "^1.0.1"
-      }
-    },
    "pako": {
      "version": "1.0.11",
      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
@ -11247,6 +11257,11 @@
        "ts-pnp": "^1.1.6"
      }
    },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
    "posix-character-classes": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@ -12948,6 +12963,28 @@
        }
      }
    },
+    "rehype-katex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-katex/-/rehype-katex-3.0.0.tgz",
+      "integrity": "sha512-gWC86mSCzTQ4ogpBOTIeCPRaJUyGVFAL+CcR/rhaPET99RADjXKBEWVyheeWFqbJjYzDGWZoanznc63E0tpOIg==",
+      "requires": {
+        "hast-util-to-text": "^2.0.0",
+        "katex": "^0.11.0",
+        "rehype-parse": "^6.0.0",
+        "unified": "^8.0.0",
+        "unist-util-visit": "^2.0.0"
+      }
+    },
+    "rehype-parse": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/rehype-parse/-/rehype-parse-6.0.2.tgz",
+      "integrity": "sha512-0S3CpvpTAgGmnz8kiCyFLGuW5yA4OQhyNTm/nwPopZ7+PI11WnGl1TTWTGv/2hPEe/g2jRLlhVVSsoDH8waRug==",
+      "requires": {
+        "hast-util-from-parse5": "^5.0.0",
+        "parse5": "^5.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
    "remark": {
      "version": "11.0.2",
      "resolved": "https://registry.npmjs.org/remark/-/remark-11.0.2.tgz",
@ -12963,6 +13000,11 @@
      "resolved": "https://registry.npmjs.org/remark-footnotes/-/remark-footnotes-1.0.0.tgz",
      "integrity": "sha512-X9Ncj4cj3/CIvLI2Z9IobHtVi8FVdUrdJkCNaL9kdX8ohfsi18DXHsCVd/A7ssARBdccdDb5ODnt62WuEWaM/g=="
    },
+    "remark-math": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/remark-math/-/remark-math-2.0.1.tgz",
+      "integrity": "sha512-FokDg5BmlPbKaAdD4IfSVuRgYH6FBPeIn0zxZA6oZ6epc4qOSjoSJPyhsH0H/WKABuaCVMJuF5O2STti6UmBQw=="
+    },
    "remark-mdx": {
      "version": "1.6.5",
      "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-1.6.5.tgz",
@ -14490,13 +14532,13 @@
      }
    },
    "stylelint": {
-      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.5.0.tgz",
-      "integrity": "sha512-+Jy7ieKAWKTf2tmcAE7jgScxH39Urb87i0bjK/enScFaGWWaFn4kAPwepGOSk2b7CLUDVt/O6kwA0x0p/V7moQ==",
+      "version": "13.6.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.6.0.tgz",
+      "integrity": "sha512-55gG2pNjVr183JJM/tlr3KAua6vTVX7Ho/lgKKuCIWszTZ1gmrXjX4Wok53SI8wRYFPbwKAcJGULQ77OJxTcNw==",
      "requires": {
        "@stylelint/postcss-css-in-js": "^0.37.1",
        "@stylelint/postcss-markdown": "^0.36.1",
-        "autoprefixer": "^9.7.6",
+        "autoprefixer": "^9.8.0",
        "balanced-match": "^1.0.0",
        "chalk": "^4.0.0",
        "cosmiconfig": "^6.0.0",
@ -14505,10 +14547,10 @@
        "file-entry-cache": "^5.0.1",
        "get-stdin": "^8.0.0",
        "global-modules": "^2.0.0",
-        "globby": "^11.0.0",
+        "globby": "^11.0.1",
        "globjoin": "^0.1.4",
        "html-tags": "^3.1.0",
-        "ignore": "^5.1.4",
+        "ignore": "^5.1.8",
        "import-lazy": "^4.0.0",
        "imurmurhash": "^0.1.4",
        "known-css-properties": "^0.19.0",
@ -14519,7 +14561,7 @@
        "meow": "^7.0.1",
        "micromatch": "^4.0.2",
        "normalize-selector": "^0.2.0",
-        "postcss": "^7.0.30",
+        "postcss": "^7.0.32",
        "postcss-html": "^0.36.0",
        "postcss-less": "^3.1.4",
        "postcss-media-query-parser": "^0.2.3",
@ -14527,7 +14569,7 @@
        "postcss-resolve-nested-selector": "^0.1.1",
        "postcss-safe-parser": "^4.0.2",
        "postcss-sass": "^0.4.4",
-        "postcss-scss": "^2.0.0",
+        "postcss-scss": "^2.1.1",
        "postcss-selector-parser": "^6.0.2",
        "postcss-syntax": "^0.36.2",
        "postcss-value-parser": "^4.1.0",
@ -14540,7 +14582,7 @@
        "sugarss": "^2.0.0",
        "svg-tags": "^1.0.0",
        "table": "^5.4.6",
-        "v8-compile-cache": "^2.1.0",
+        "v8-compile-cache": "^2.1.1",
        "write-file-atomic": "^3.0.3"
      },
      "dependencies": {
@ -14564,9 +14606,9 @@
          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="
        },
        "chalk": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
-          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
@ -14649,6 +14691,72 @@
          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
        },
+        "postcss": {
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "3.2.1",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+              "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+              "requires": {
+                "color-convert": "^1.9.0"
+              }
+            },
+            "chalk": {
+              "version": "2.4.2",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+              "requires": {
+                "ansi-styles": "^3.2.1",
+                "escape-string-regexp": "^1.0.5",
+                "supports-color": "^5.3.0"
+              },
+              "dependencies": {
+                "supports-color": {
+                  "version": "5.5.0",
+                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+                  "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+                  "requires": {
+                    "has-flag": "^3.0.0"
+                  }
+                }
+              }
+            },
+            "color-convert": {
+              "version": "1.9.3",
+              "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+              "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+              "requires": {
+                "color-name": "1.1.3"
+              }
+            },
+            "color-name": {
+              "version": "1.1.3",
+              "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+              "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+            },
+            "has-flag": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+              "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+            },
+            "supports-color": {
+              "version": "6.1.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+              "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
        "postcss-selector-parser": {
          "version": "6.0.2",
          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
@ -14664,6 +14772,11 @@
          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
          "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="
        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
        "string-width": {
          "version": "4.2.0",
          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
@ -14684,6 +14797,11 @@
        }
      }
    },
+    "stylelint-config-css-modules": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-css-modules/-/stylelint-config-css-modules-2.2.0.tgz",
+      "integrity": "sha512-+zjcDbot+zbuxy1UA31k4G2lUG+nHUwnLyii3uT2F09B8kT2YrT9LZYNfMtAWlDidrxr7sFd5HX9EqPHGU3WKA=="
+    },
    "stylelint-config-prettier": {
      "version": "8.0.1",
      "resolved": "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-8.0.1.tgz",
@ -15131,6 +15249,14 @@
      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
      "optional": true
    },
+    "tippy.js": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-5.2.1.tgz",
+      "integrity": "sha512-66UT6JRVn3dXNCORE+0UvUK3JZqV/VhLlU6HTDm3FmrweUUFUxUGvT8tUQ7ycMp+uhuLAwQw6dBabyC+iKf/MA==",
+      "requires": {
+        "popper.js": "^1.16.0"
+      }
+    },
    "tlds": {
      "version": "1.207.0",
      "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.207.0.tgz",
@ -15362,9 +15488,9 @@
      }
    },
    "typescript": {
-      "version": "3.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.3.tgz",
-      "integrity": "sha512-D/wqnB2xzNFIcoBG9FG8cXRDjiqSTbG2wd8DMZeQyJlP1vfTkIxH4GKveWaEBYySKIg+USu+E+EDIR47SqnaMQ=="
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.5.tgz",
+      "integrity": "sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ=="
    },
    "typewriter": {
      "version": "7.1.0",
@ -15522,6 +15648,14 @@
      "resolved": "https://registry.npmjs.org/unist-builder/-/unist-builder-2.0.3.tgz",
      "integrity": "sha512-f98yt5pnlMWlzP539tPc4grGMsFaQQlP/vM396b00jngsiINumNmsY8rkXjfoi1c6QaM8nQ3vaGDuoKWbe/1Uw=="
    },
+    "unist-util-find-after": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-3.0.0.tgz",
+      "integrity": "sha512-ojlBqfsBftYXExNu3+hHLfJQ/X1jYY/9vdm4yZWjIbf0VuWF6CRufci1ZyoD/wV2TYMKxXUoNuoqwy+CkgzAiQ==",
+      "requires": {
+        "unist-util-is": "^4.0.0"
+      }
+    },
    "unist-util-find-all-after": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/unist-util-find-all-after/-/unist-util-find-all-after-3.0.1.tgz",
@ -15821,9 +15955,9 @@
      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
    },
    "uuid": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
-      "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
    },
    "v8-compile-cache": {
      "version": "2.1.1",
@ -15905,14 +16039,6 @@
        "chokidar": "^2.1.8"
      }
    },
-    "wcwidth": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
-      "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
-      "requires": {
-        "defaults": "^1.0.3"
-      }
-    },
    "web-namespaces": {
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-1.1.4.tgz",
--- a/website/package.json
+++ b/website/package.json
@ -4,17 +4,17 @@
  "version": "1.0.0",
  "author": "HashiCorp",
  "dependencies": {
-    "@hashicorp/nextjs-scripts": "^8.3.2",
+    "@hashicorp/nextjs-scripts": "^10.0.1",
    "@hashicorp/react-button": "^2.2.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-global-styles": "^4.4.0",
-    "@hashicorp/react-head": "^1.0.0",
+    "@hashicorp/react-head": "^1.1.1",
    "@hashicorp/react-mega-nav": "^4.0.1-2",
-    "@hashicorp/react-product-downloader": "^3.3.0",
+    "@hashicorp/react-product-downloader": "^4.0.0",
    "@hashicorp/react-section-header": "^2.0.0",
-    "@hashicorp/react-subnav": "^3.2.1",
+    "@hashicorp/react-subnav": "^3.2.2",
    "@hashicorp/react-vertical-text-block-list": "^2.0.1",
    "babel-plugin-import-glob-array": "^0.2.0",
    "imagemin-mozjpeg": "^9.0.0",
--- a/website/pages/downloads/index.jsx
+++ b/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 | Packer by HashiCorp" />
      <ProductDownloader
        product="Packer"
        version={VERSION}
-        downloads={downloadData}
+        releaseData={releaseData}
      />
    </div>
  )
@ -18,16 +18,8 @@ export default function DownloadsPage({ downloadData }) {

 export async function getStaticProps() {
  return fetch(`https://releases.hashicorp.com/packer/${VERSION}/index.json`)
-    .then((r) => r.json())
-    .then((r) => {
-      // 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 } }))
+    .then((res) => res.json())
+    .then((releaseData) => ({ props: { releaseData } }))
    .catch(() => {
      throw new Error(
        `--------------------------------------------------------