website: upgrades dependencies (#12670)

* upgrades deps and gets it building

* remove unneeded css file

* fix: hide intended elements in print (#12710)

* upgrade deps to latest

Co-authored-by: Zachary Shilton <4624598+zchsh@users.noreply.github.com>

website/.nvmrc

@@ -0,0 +1 @@
+v14

website/components/subnav/index.jsx

@@ -7,6 +7,7 @@ export default function ProductSubnav() {
 
   return (
     <Subnav
+      className="g-product-subnav"
       hideGithubStars={true}
       titleLink={{
         text: 'vault',

website/components/subnav/style.css

@@ -1,15 +0,0 @@
-@import '~@hashicorp/react-subnav/style.css';
-
-/* limit the inner width of the navigation to match the site layout */
-
-.g-subnav {
-  & .g-subnav-inner {
-    @media (width < 1288px) {
-      padding: 0 32px;
-    }
-
-    @media (width >= 1288px) {
-      padding: 0 calc(50% - 1288px / 2 + 32px);
-    }
-  }
-}

website/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@hashicorp/platform-types" />

website/next-env.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
-/// <reference types="@hashicorp/platform-types" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

website/next.config.js

@@ -2,7 +2,7 @@ const withHashicorp = require('@hashicorp/platform-nextjs-plugin')
 const redirects = require('./redirects.next')
 
 module.exports = withHashicorp({
-  transpileModules: ['@hashicorp/versioned-docs'],
+  nextOptimizedImages: true,
 })({
   svgo: { plugins: [{ removeViewBox: false }] },
   rewrites: () => [

website/package.json

@@ -4,46 +4,46 @@
   "version": "1.0.0",
   "author": "HashiCorp",
   "dependencies": {
-    "@hashicorp/mktg-global-styles": "4.0.0",
+    "@hashicorp/mktg-global-styles": "^4.0.0",
     "@hashicorp/mktg-logos": "^1.2.0",
-    "@hashicorp/platform-code-highlighting": "^0.1.1",
+    "@hashicorp/platform-code-highlighting": "^0.1.2",
     "@hashicorp/platform-markdown-utils": "^0.1.3",
     "@hashicorp/platform-runtime-error-monitoring": "^0.1.0",
     "@hashicorp/platform-util": "^0.1.0",
-    "@hashicorp/react-alert-banner": "6.2.0",
+    "@hashicorp/react-alert-banner": "^7.0.1",
-    "@hashicorp/react-button": "^5.2.1",
+    "@hashicorp/react-button": "^6.0.1",
-    "@hashicorp/react-case-study-slider": "^6.1.2",
+    "@hashicorp/react-case-study-slider": "^7.0.1",
-    "@hashicorp/react-code-block": "^4.1.4",
+    "@hashicorp/react-code-block": "^4.1.5",
-    "@hashicorp/react-consent-manager": "6.0.0",
+    "@hashicorp/react-consent-manager": "^7.0.1",
-    "@hashicorp/react-content": "8.0.1",
+    "@hashicorp/react-content": "^8.0.2",
-    "@hashicorp/react-docs-page": "14.0.1",
+    "@hashicorp/react-docs-page": "^14.4.0",
-    "@hashicorp/react-featured-slider": "^4.1.2",
+    "@hashicorp/react-featured-slider": "^5.0.1",
-    "@hashicorp/react-hashi-stack-menu": "^2.0.6",
+    "@hashicorp/react-hashi-stack-menu": "^2.0.7",
-    "@hashicorp/react-head": "^3.1.1",
+    "@hashicorp/react-head": "^3.1.2",
-    "@hashicorp/react-hero": "7.3.3",
+    "@hashicorp/react-hero": "^8.0.2",
-    "@hashicorp/react-image": "^4.0.2",
+    "@hashicorp/react-image": "^4.0.3",
-    "@hashicorp/react-inline-svg": "^6.0.2",
+    "@hashicorp/react-inline-svg": "^6.0.3",
-    "@hashicorp/react-logo-grid": "^4.1.2",
+    "@hashicorp/react-logo-grid": "^5.0.1",
-    "@hashicorp/react-markdown-page": "1.4.2",
+    "@hashicorp/react-markdown-page": "^1.4.3",
-    "@hashicorp/react-product-downloads-page": "2.4.0",
+    "@hashicorp/react-product-downloads-page": "^2.5.2",
-    "@hashicorp/react-section-header": "^5.0.3",
+    "@hashicorp/react-section-header": "^5.0.4",
-    "@hashicorp/react-subnav": "^8.4.0",
+    "@hashicorp/react-subnav": "^9.0.1",
-    "@hashicorp/react-tabs": "^6.0.1",
+    "@hashicorp/react-tabs": "^7.0.1",
-    "@hashicorp/react-text-split": "^3.2.2",
+    "@hashicorp/react-text-split": "^4.0.0",
-    "@hashicorp/react-text-splits": "^3.2.5",
+    "@hashicorp/react-text-splits": "^3.2.7",
-    "@hashicorp/react-use-cases": "^4.0.1",
+    "@hashicorp/react-use-cases": "^5.0.0",
-    "@hashicorp/react-vertical-text-block-list": "^6.0.3",
+    "@hashicorp/react-vertical-text-block-list": "^7.0.0",
-    "next": "10.2.2",
+    "next": "^11.1.2",
     "next-mdx-remote": "3.0.2",
     "next-remote-watch": "1.0.0",
-    "react": "16.14.0",
+    "react": "^17.0.2",
-    "react-dom": "16.14.0",
+    "react-dom": "^17.0.2",
     "tippy.js": "4.0.0"
   },
   "devDependencies": {
-    "@hashicorp/platform-cli": "^0.2.0",
+    "@hashicorp/platform-cli": "^1.2.0",
-    "@hashicorp/platform-nextjs-plugin": "^0.1.0",
+    "@hashicorp/platform-nextjs-plugin": "^1.0.1",
-    "@hashicorp/platform-types": "^0.1.0",
+    "@hashicorp/platform-types": "^0.1.1",
     "@types/react": "^17.0.11",
     "dart-linkcheck": "^2.0.15",
     "husky": "^4.3.8",
@@ -67,5 +67,8 @@
     "lint": "next-hashicorp lint",
     "start": "next-remote-watch './content/**/*.mdx'",
     "static": "npm run build && npm run export && cp _redirects out/."
+  },
+  "engines": {
+    "npm": ">=7.0.0"
   }
 }

website/pages/_app.js

@@ -65,7 +65,7 @@ export default function App({ Component, pageProps }) {
       <ProductSubnav />
       <Component {...pageProps} />
       <Footer openConsentManager={openConsentManager} />
-      <ConsentManager />
+      <ConsentManager className="g-consent-manager" />
     </ErrorBoundary>
   )
 }

website/pages/print.css

@@ -1,240 +1,240 @@
 /* Print Styles - Hide Elements */
 @media print {
-    iframe,
+  iframe,
-    .g-mega-nav,
+  #__next > header,
-    .g-product-subnav,
+  .g-product-subnav,
-    .g-footer,
+  .g-footer,
-    [aria-hidden='true'],
+  .g-consent-manager,
-    [id='sidebar'],
+  [aria-hidden='true'],
-    [id='edit-this-page'],
+  [id='sidebar'],
-    [id='jump-to-section'],
+  [id='edit-this-page'],
-    [id='__next-build-watcher'] {
+  [id='jump-to-section'],
-      display: none !important;
+  [id='__next-build-watcher'] {
-    }
+    display: none !important;
   }
-  
+}
-  /* Print Styles - Page Spacing */
+
-  @media print {
+/* Print Styles - Page Spacing */
-    @page {
+@media print {
-      margin: 2cm 0.5cm;
+  @page {
-    }
+    margin: 2cm 0.5cm;
-  
-    @page :first {
-      margin-top: 0;
-    }
-  
-    @page :last {
-      margin-top: 0;
-    }
-  
-    blockquote {
-      break-inside: avoid;
-    }
-  
-    body {
-      margin-bottom: 2cm;
-      margin-top: 2cm;
-    }
-  
-    dl,
-    ol,
-    ul {
-      break-before: avoid;
-    }
-  
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      break-after: avoid;
-      break-inside: avoid;
-    }
-  
-    img {
-      break-inside: avoid;
-      break-after: avoid;
-    }
-  
-    pre,
-    table {
-      break-inside: avoid;
-    }
-  
-    pre {
-      white-space: pre-wrap;
-    }
   }
-  
+
-  @media print {
+  @page :first {
-    /* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/layout.css */
+    margin-top: 0;
-    .g-grid-container {
+  }
-      /*
+
+  @page :last {
+    margin-top: 0;
+  }
+
+  blockquote {
+    break-inside: avoid;
+  }
+
+  body {
+    margin-bottom: 2cm;
+    margin-top: 2cm;
+  }
+
+  dl,
+  ol,
+  ul {
+    break-before: avoid;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    break-after: avoid;
+    break-inside: avoid;
+  }
+
+  img {
+    break-inside: avoid;
+    break-after: avoid;
+  }
+
+  pre,
+  table {
+    break-inside: avoid;
+  }
+
+  pre {
+    white-space: pre-wrap;
+  }
+}
+
+@media print {
+  /* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/layout.css */
+  .g-grid-container {
+    /*
       * A “measure” is the number of characters in a line of text.
       * Long lines fatique readers as they find the start of a new line of text.
       * It seems widely accepted that an ideal measure is 66 characters per line.
       * An average character takes up .5em, and so we define a measure of 33em.
       * See: https://webtypography.net/2.1.2
       */
-      max-width: 33em;
+    max-width: 33em;
-      padding-left: 0;
+    padding-left: 0;
-      padding-right: 0;
+    padding-right: 0;
-      word-break: break-word;
+    word-break: break-word;
-    }
+  }
-  
+
-    /* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/tables.css */
+  /* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/tables.css */
-    table {
+  table {
-      margin-bottom: 0;
+    margin-bottom: 0;
-      margin-top: 20px;
+    margin-top: 20px;
+  }
+}
+
+/* @todo: move print styles to @hashicorp/react-global-styles/global.css */
+@media print {
+  pre code,
+  code,
+  pre {
+    font-weight: inherit;
+  }
+
+  pre {
+    background: transparent;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+    color: inherit;
+    padding: 0.5em;
+
+    & > code {
+      white-space: inherit;
     }
   }
-  
+}
-  /* @todo: move print styles to @hashicorp/react-global-styles/global.css */
+
-  @media print {
+/* @todo: move print styles to @hashicorp/react-content/dist/style.css */
-    pre code,
+@media print {
-    code,
+  .g-content {
-    pre {
+    & a {
-      font-weight: inherit;
-    }
-  
-    pre {
-      background: transparent;
-      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
       color: inherit;
-      padding: 0.5em;
+      font-weight: 700;
-  
+
-      & > code {
+      &:not(.anchor) {
-        white-space: inherit;
+        &::after {
+          background-color: transparent;
+          position: static;
+          opacity: 1;
+        }
       }
-    }
+
-  }
+      &[href^='http'] {
-  
+        &::after {
-  /* @todo: move print styles to @hashicorp/react-content/dist/style.css */
+          content: ' <' attr(href) '>';
-  @media print {
+          font-size: 0.8em;
-    .g-content {
+          font-style: italic;
-      & a {
+          letter-spacing: -0.01875em;
+          vertical-align: top;
+        }
+      }
+
+      &:not([href^='http']) {
+        text-decoration: underline;
+      }
+
+      & > code {
         color: inherit;
         font-weight: 700;
-  
+
-        &:not(.anchor) {
+        &::before,
-          &::after {
+        &::after {
-            background-color: transparent;
+          content: none;
-            position: static;
-            opacity: 1;
-          }
         }
-  
-        &[href^='http'] {
-          &::after {
-            content: ' <' attr(href) '>';
-            font-size: 0.8em;
-            font-style: italic;
-            letter-spacing: -0.01875em;
-            vertical-align: top;
-          }
-        }
-  
-        &:not([href^='http']) {
-          text-decoration: underline;
-        }
-  
-        & > code {
-          color: inherit;
-          font-weight: 700;
-  
-          &::before,
-          &::after {
-            content: none;
-          }
-        }
-      }
-  
-      & h1,
-      & h2,
-      & h3,
-      & h4,
-      & h5,
-      & h6 {
-        & code {
-          background: none;
-          font-size: 1em;
-          padding: 0;
-        }
-      }
-  
-      & h2 {
-        margin: 1em 0 0;
-      }
-  
-      & h3 {
-        margin: 1em 0 0;
-        padding-bottom: 0.25em;
-      }
-  
-      & img {
-        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
-        margin: 1em 0 0;
-      }
-  
-      & ol,
-      & ul {
-        margin: 1em 0 0;
-  
-        & li {
-          margin-bottom: 0;
-          margin-top: 0.5em;
-  
-          & p:first-child {
-            margin-top: 0;
-          }
-        }
-      }
-  
-      & p {
-        margin: 1em 0 0;
-      }
-  
-      & pre {
-        background-color: transparent;
-        border-radius: 0;
-        margin: 1.5em 0 0;
-  
-        & code {
-          background: transparent;
-          color: inherit;
-        }
-      }
-  
-      & dd,
-      & dt,
-      & li,
-      & p,
-      & td,
-      & th {
-        & > :not(pre) code,
-        & > code {
-          background: transparent;
-          font-weight: 700;
-          padding: 0;
-        }
-      }
-  
-      & .alert.alert-danger,
-      & .alert.alert-info,
-      & .alert.alert-success,
-      & .alert.alert-warning {
-        background-color: transparent;
       }
     }
-  }
+
-  
+    & h1,
-  /* @todo: move print styles to @hashicorp/react-global-styles/code-highlighting.css */
+    & h2,
-  @media print {
+    & h3,
-    .hljs {
+    & h4,
-      & * {
+    & h5,
+    & h6 {
+      & code {
+        background: none;
+        font-size: 1em;
+        padding: 0;
+      }
+    }
+
+    & h2 {
+      margin: 1em 0 0;
+    }
+
+    & h3 {
+      margin: 1em 0 0;
+      padding-bottom: 0.25em;
+    }
+
+    & img {
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
+      margin: 1em 0 0;
+    }
+
+    & ol,
+    & ul {
+      margin: 1em 0 0;
+
+      & li {
+        margin-bottom: 0;
+        margin-top: 0.5em;
+
+        & p:first-child {
+          margin-top: 0;
+        }
+      }
+    }
+
+    & p {
+      margin: 1em 0 0;
+    }
+
+    & pre {
+      background-color: transparent;
+      border-radius: 0;
+      margin: 1.5em 0 0;
+
+      & code {
+        background: transparent;
         color: inherit;
       }
     }
+
+    & dd,
+    & dt,
+    & li,
+    & p,
+    & td,
+    & th {
+      & > :not(pre) code,
+      & > code {
+        background: transparent;
+        font-weight: 700;
+        padding: 0;
+      }
+    }
+
+    & .alert.alert-danger,
+    & .alert.alert-info,
+    & .alert.alert-success,
+    & .alert.alert-warning {
+      background-color: transparent;
+    }
   }
-  
+}
+
+/* @todo: move print styles to @hashicorp/react-global-styles/code-highlighting.css */
+@media print {
+  .hljs {
+    & * {
+      color: inherit;
+    }
+  }
+}

website/pages/style.css

@@ -5,24 +5,8 @@
   --highlight-color: var(--brand-link);
 }
 
-@import '~@hashicorp/react-consent-manager/style.css';
-@import '~@hashicorp/react-toggle/style.css';
-@import '~@hashicorp/react-alert-banner/style.css';
-@import '~@hashicorp/react-button/styles/index.css';
-@import '~@hashicorp/react-featured-slider/style.css';
-@import '~@hashicorp/react-hero/style.css';
-@import '~@hashicorp/react-logo-grid/style.css';
-@import '~@hashicorp/react-search/style.css';
-@import '~@hashicorp/react-tabs/style.css';
-@import '~@hashicorp/react-text-split/style.css';
-@import '~@hashicorp/react-use-cases/style.css';
-@import '~@hashicorp/react-vertical-text-block-list/style.css';
-
-/* Global Components - Transpiled */
-
 /* Local Components */
 @import '../components/footer/style.css';
-@import '../components/subnav/style.css';
 @import '../components/use-case-cta-section/style.css';
 
 /* Pages */