website: update dependencies (#12528)

.circleci/config.yml

@@ -24,7 +24,7 @@ jobs:
             fi
   algolia-index:
     docker:
-      - image: node:12
+      - image: node:14
     steps:
       - checkout
       - run:

website/.nvmrc

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

website/Dockerfile

@@ -1,7 +1,8 @@
-FROM docker.mirror.hashicorp.services/node:10.16.3-alpine
+FROM docker.mirror.hashicorp.services/node:14-alpine
 RUN apk add --update --no-cache git make g++ automake autoconf libtool nasm libpng-dev
 
 COPY ./package.json /website/package.json
 COPY ./package-lock.json /website/package-lock.json
 WORKDIR /website
+RUN npm install -g npm@latest
 RUN npm install

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

@@ -5,11 +5,7 @@ console.log(`Environment: ${process.env.HASHI_ENV}`)
 
 module.exports = withHashicorp({
   defaultLayout: true,
-  transpileModules: [
-    'is-absolute-url',
-    '@hashicorp/react-image',
-    '@hashicorp/versioned-docs',
-  ],
+  nextOptimizedImages: true,
 })({
   svgo: { plugins: [{ removeViewBox: false }] },
   redirects: () => redirects,

website/package.json

@@ -4,35 +4,36 @@
   "version": "1.0.0",
   "author": "HashiCorp",
   "dependencies": {
-    "@hashicorp/mktg-global-styles": "4.0.0",
-    "@hashicorp/platform-code-highlighting": "^0.1.1",
+    "@hashicorp/mktg-global-styles": "^4.0.0",
+    "@hashicorp/platform-code-highlighting": "^0.1.2",
     "@hashicorp/platform-runtime-error-monitoring": "^0.1.0",
     "@hashicorp/platform-util": "^0.1.0",
-    "@hashicorp/react-alert-banner": "6.2.0",
-    "@hashicorp/react-button": "^5.2.1",
-    "@hashicorp/react-code-block": "^4.1.4",
-    "@hashicorp/react-consent-manager": "6.0.0",
-    "@hashicorp/react-docs-page": "14.0.1",
-    "@hashicorp/react-hashi-stack-menu": "^2.0.6",
-    "@hashicorp/react-head": "^3.1.1",
-    "@hashicorp/react-inline-svg": "^6.0.2",
-    "@hashicorp/react-product-downloader": "^4.1.5",
-    "@hashicorp/react-product-downloads-page": "^2.5.0",
-    "@hashicorp/react-search": "5.1.2",
-    "@hashicorp/react-section-header": "^5.0.3",
-    "@hashicorp/react-subnav": "^8.4.0",
-    "@hashicorp/react-tabs": "^6.0.1",
-    "@hashicorp/react-vertical-text-block-list": "^6.0.3",
-    "next": "10.1.3",
+    "@hashicorp/react-alert-banner": "^7.0.1",
+    "@hashicorp/react-button": "^6.0.1",
+    "@hashicorp/react-code-block": "^4.1.5",
+    "@hashicorp/react-consent-manager": "^7.0.1",
+    "@hashicorp/react-docs-page": "^14.2.5",
+    "@hashicorp/react-hashi-stack-menu": "^2.0.7",
+    "@hashicorp/react-head": "^3.1.2",
+    "@hashicorp/react-inline-svg": "^6.0.3",
+    "@hashicorp/react-min-100-layout": "^2.0.1",
+    "@hashicorp/react-product-downloader": "^8.0.0",
+    "@hashicorp/react-product-downloads-page": "^2.5.2",
+    "@hashicorp/react-search": "^6.0.1",
+    "@hashicorp/react-section-header": "^5.0.4",
+    "@hashicorp/react-subnav": "^9.0.1",
+    "@hashicorp/react-tabs": "^7.0.1",
+    "@hashicorp/react-vertical-text-block-list": "^7.0.0",
+    "next": "^11.1.2",
     "next-mdx-remote": "3.0.1",
     "next-remote-watch": "^1.0.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@hashicorp/platform-cli": "^0.2.0",
-    "@hashicorp/platform-nextjs-plugin": "^0.1.0",
-    "@hashicorp/platform-types": "^0.1.0",
+    "@hashicorp/platform-cli": "^1.2.0",
+    "@hashicorp/platform-nextjs-plugin": "^1.0.1",
+    "@hashicorp/platform-types": "^0.1.1",
     "@types/react": "^17.0.3",
     "dart-linkcheck": "2.0.15",
     "husky": "4.3.6",
@@ -54,5 +55,8 @@
     "start": "next-remote-watch './content/**/*.mdx'",
     "static": "npm run build && npm run export && cp _redirects out/.",
     "linkcheck": "linkcheck https://vagrantup.com"
+  },
+  "engines": {
+    "npm": ">=7.0.0"
   }
 }

website/pages/_app.js

@@ -1,6 +1,7 @@
 import './style.css'
 import '@hashicorp/platform-util/nprogress/style.css'
 
+import Min100Layout from '@hashicorp/react-min-100-layout'
 import NProgress from '@hashicorp/platform-util/nprogress'
 import createConsentManager from '@hashicorp/react-consent-manager/loader'
 import useAnchorLinkAnalytics from '@hashicorp/platform-util/anchor-link-analytics'
@@ -34,15 +35,16 @@ export default function App({ Component, pageProps }) {
         image="https://www.vagrantup.com/img/og-image.png"
         icon={[{ href: '/favicon.ico' }]}
       />
-      {ALERT_BANNER_ACTIVE && (
-        <AlertBanner {...alertBannerData} product="vagrant" hideOnMobile />
-      )}
-      <HashiStackMenu />
-      <ProductSubnav />
-      <div className="content">
-        <Component {...pageProps} />
-      </div>
-      <Footer openConsentManager={openConsentManager} />
+      <Min100Layout footer={<Footer openConsentManager={openConsentManager} />}>
+        {ALERT_BANNER_ACTIVE && (
+          <AlertBanner {...alertBannerData} product="vagrant" hideOnMobile />
+        )}
+        <HashiStackMenu />
+        <ProductSubnav />
+        <div className="content">
+          <Component {...pageProps} />
+        </div>
+      </Min100Layout>
       <ConsentManager />
     </ErrorBoundary>
   )

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

@@ -4,7 +4,7 @@ import {
   generateStaticPaths,
   generateStaticProps,
 } from '@hashicorp/react-docs-page/server'
-import { VMWARE_UTILITY_VERSION } from 'data/version.json'
+import versions from 'data/version.json'
 import Button from '@hashicorp/react-button'
 
 const NAV_DATA_FILE = 'data/docs-nav-data.json'
@@ -41,7 +41,7 @@ export async function getStaticProps({ params }) {
       product: { name: productName, slug: productSlug },
       params,
       additionalComponents,
-      scope: { VMWARE_UTILITY_VERSION },
+      scope: { VMWARE_UTILITY_VERSION: versions.VMWARE_UTILITY_VERSION },
     }),
   }
 }

website/pages/home/index.jsx

@@ -2,7 +2,7 @@ import s from './style.module.css'
 import Button from '@hashicorp/react-button'
 import TextSplit from 'components/temporary_text-split'
 import CodeBlock from '@hashicorp/react-code-block'
-import { VERSION } from 'data/version.json'
+import versions from 'data/version.json'
 
 export default function HomePage() {
   return (
@@ -16,7 +16,7 @@ export default function HomePage() {
           <div className={s.buttons}>
             <Button title="Get Started" url="/intro/index" />
             <Button
-              title={`Download ${VERSION}`}
+              title={`Download ${versions.VERSION}`}
               theme={{ variant: 'secondary' }}
               url="/downloads"
             />

website/pages/style.css

@@ -5,24 +5,9 @@
   --highlight-color: var(--vagrant);
 }
 
-@import '~@hashicorp/react-alert-banner/style.css';
-@import '~@hashicorp/react-button/styles/index.css';
-@import '~@hashicorp/react-consent-manager/style.css';
-@import '~@hashicorp/react-search/style.css';
-@import '~@hashicorp/react-subnav/style.css';
-@import '~@hashicorp/react-tabs/style.css';
-@import '~@hashicorp/react-toggle/style.css';
-@import '~@hashicorp/react-vertical-text-block-list/style.css';
-@import '~@hashicorp/react-product-downloader/dist/style.css';
-
 /* Print Styles */
 @import './print.css';
 
-/* Expand content so footer is always at the bottom */
-.__next > .content {
-  min-height: calc(100vh - 260px);
-}
-
 /*
  * About this selector:
  * `.g-subnav ~ *` finds all elements after the navigation.
@@ -39,12 +24,3 @@
 .g-subnav ~ * :target {
   scroll-margin-top: calc(64px + 0.5em);
 }
-
-/* Sticky Footer */
-#p-docs {
-  min-height: calc(100vh - 260px);
-}
-
-.g-type-body {
-  color: var(--gray-2);
-}