website: upgrade dependencies (#11247)

Author: Bryce Kalow

.circleci/config.yml

@@ -494,7 +494,7 @@ jobs:
           destination: /ui-assets
   algolia_index:
     docker:
-      - image: docker.mirror.hashicorp.services/node:12
+      - image: docker.mirror.hashicorp.services/node:14
     steps:
       - checkout
       - run:

website/.nvmrc

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

website/Dockerfile

@@ -1,7 +1,8 @@
-FROM docker.mirror.hashicorp.services/node:12.19.0-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/components/basic-hero/style.css

@@ -21,27 +21,16 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+    gap: 16px;
 
     /*
      * Margins here compensate for extra 8px margin on buttons
      * which are needed to center and space properly regardless of whether
      * buttons are wrapping to multiple lines or not.
      */
     margin-top: calc(32px - 8px);
-    margin-bottom: -8px;
     @media (--large) {
       margin-top: calc(40px - 8px);
     }
-
-    & .g-btn {
-      /*
-       * This ensures 16px between buttons at all times, while maintaining proper centering
-       * when buttons wrap to multiple lines.
-       * There will be an extra 8px space on all sides of the button group.
-       * The top and bottom are accounted for by the -8px adjustment on `.action` margins.
-       * The left and right excess is left as is - it's needed for proper centering when wrapping.
-       */
-      margin: 8px;
-    }
   }
 }

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

@@ -1,16 +1,10 @@
 const withHashicorp = require('@hashicorp/platform-nextjs-plugin')
-const path = require('path')
 const redirects = require('./redirects')
 const rewrites = require('./rewrites')
 
 module.exports = withHashicorp({
   defaultLayout: true,
-  transpileModules: [
-    'is-absolute-url',
-    '@hashicorp/react-.*',
-    '@hashicorp/versioned-docs',
-  ],
-  mdx: { resolveIncludes: path.join(__dirname, 'pages/partials') },
+  nextOptimizedImages: true,
 })({
   redirects() {
     return redirects

website/package-lock.json

@@ -4,52 +4,53 @@
   "version": "1.0.0",
   "author": "HashiCorp",
   "engines": {
-    "node": "12.x - 14.x"
+    "node": "12.x - 14.x",
+    "npm": ">=7.0.0"
   },
   "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-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-call-to-action": "^3.1.2",
-    "@hashicorp/react-code-block": "^4.1.4",
-    "@hashicorp/react-consent-manager": "^6.0.0",
-    "@hashicorp/react-content": "8.0.1",
-    "@hashicorp/react-docs-page": "14.0.1",
-    "@hashicorp/react-featured-slider": "^4.1.2",
-    "@hashicorp/react-hashi-stack-menu": "^2.0.6",
-    "@hashicorp/react-head": "^3.1.1",
-    "@hashicorp/react-hero": "7.3.3",
-    "@hashicorp/react-image": "^4.0.2",
-    "@hashicorp/react-inline-svg": "^6.0.2",
-    "@hashicorp/react-learn-callout": "^1.1.2",
-    "@hashicorp/react-markdown-page": "1.4.2",
-    "@hashicorp/react-product-downloads-page": "2.4.0",
-    "@hashicorp/react-section-header": "^5.0.3",
-    "@hashicorp/react-subnav": "^8.4.0",
-    "@hashicorp/react-tabs": "^6.0.1",
-    "@hashicorp/react-text-split": "^3.2.2",
-    "@hashicorp/react-text-split-with-code": "^3.3.5",
-    "@hashicorp/react-text-split-with-image": "^4.2.2",
-    "@hashicorp/react-text-split-with-logo-grid": "^5.1.2",
-    "@hashicorp/react-use-cases": "^4.0.1",
-    "@hashicorp/react-vertical-text-block-list": "^6.0.3",
+    "@hashicorp/react-alert-banner": "^7.0.1",
+    "@hashicorp/react-button": "^6.0.1",
+    "@hashicorp/react-call-to-action": "^4.0.0",
+    "@hashicorp/react-code-block": "^4.1.5",
+    "@hashicorp/react-consent-manager": "^7.0.1",
+    "@hashicorp/react-content": "^8.0.2",
+    "@hashicorp/react-docs-page": "^14.4.0",
+    "@hashicorp/react-featured-slider": "^5.0.1",
+    "@hashicorp/react-hashi-stack-menu": "^2.0.7",
+    "@hashicorp/react-head": "^3.1.2",
+    "@hashicorp/react-hero": "^8.0.2",
+    "@hashicorp/react-image": "^4.0.3",
+    "@hashicorp/react-inline-svg": "^6.0.3",
+    "@hashicorp/react-learn-callout": "^2.0.1",
+    "@hashicorp/react-markdown-page": "^1.4.3",
+    "@hashicorp/react-product-downloads-page": "^2.5.2",
+    "@hashicorp/react-section-header": "^5.0.4",
+    "@hashicorp/react-subnav": "^9.0.1",
+    "@hashicorp/react-tabs": "^7.0.1",
+    "@hashicorp/react-text-split": "^4.0.0",
+    "@hashicorp/react-text-split-with-code": "^3.3.8",
+    "@hashicorp/react-text-split-with-image": "^4.2.5",
+    "@hashicorp/react-text-split-with-logo-grid": "^5.1.5",
+    "@hashicorp/react-use-cases": "^5.0.0",
+    "@hashicorp/react-vertical-text-block-list": "^7.0.0",
     "marked": "0.7.0",
-    "next": "10.1.3",
+    "next": "^11.1.2",
     "next-mdx-remote": "3.0.1",
     "next-remote-watch": "^1.0.0",
     "nuka-carousel": "4.7.7",
-    "react": "16.14.0",
+    "react": "^17.0.2",
     "react-device-detect": "1.17.0",
-    "react-dom": "16.14.0"
+    "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": "^6.0.0",

website/package.json

@@ -5,22 +5,6 @@
   --highlight-color: var(--nomad);
 }
 
-/* Global Transpiled Components */
-@import '~@hashicorp/react-alert-banner/style.css';
-@import '~@hashicorp/react-button/styles/index.css';
-@import '~@hashicorp/react-call-to-action/style.css';
-@import '~@hashicorp/react-consent-manager/style.css';
-@import '~@hashicorp/react-toggle/style.css';
-@import '~@hashicorp/react-featured-slider/style.css';
-@import '~@hashicorp/react-hero/style.css';
-@import '~@hashicorp/react-learn-callout/style.css';
-@import '~@hashicorp/react-search/style.css';
-@import '~@hashicorp/react-subnav/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';
-
 /* Local Components */
 @import '../components/placement-table/style.css';
 @import '../components/case-study-carousel/style.css';