website: upgrade dependencies (#11299)

* upgrades website deps

* add expect-error to get around incorrect prop types

.circleci/config.yml

@@ -170,7 +170,7 @@ jobs:
             fi
   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: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/components/homepage-hero/index.tsx

@@ -14,6 +14,7 @@ export default function HomepageHero({
       <div className={s.gridContainer}>
         <div className={s.content}>
           {alert ? (
+            // @ts-expect-error -- prop types are incorrect, state is not needed
             <Alert
               url={alert.url}
               tag={alert.tag}

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,15 +1,9 @@
 const withHashicorp = require('@hashicorp/platform-nextjs-plugin')
-const path = require('path')
 const redirects = require('./redirects.next')
 
 module.exports = withHashicorp({
   defaultLayout: true,
-  transpileModules: [
-    'is-absolute-url',
-    '@hashicorp/react-.*',
-    '@hashicorp/versioned-docs',
-  ],
-  mdx: { resolveIncludes: path.join(__dirname, 'pages/partials') },
+  nextOptimizedImages: true,
 })({
   svgo: { plugins: [{ removeViewBox: false }] },
   rewrites: () => [

website/package.json

@@ -4,51 +4,47 @@
   "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/nextjs-scripts": "^19.0.3",
-    "@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-command-line-terminal": "^2.0.3",
-    "@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-markdown-page": "1.4.2",
-    "@hashicorp/react-product-downloads-page": "2.4.0",
-    "@hashicorp/react-product-features-list": "^4.1.2",
-    "@hashicorp/react-search": "5.1.2",
-    "@hashicorp/react-section-header": "^5.0.3",
-    "@hashicorp/react-subnav": "^8.4.0",
-    "@hashicorp/react-text-split-with-image": "^4.2.2",
-    "@hashicorp/react-vertical-text-block-list": "^6.0.3",
+    "@hashicorp/react-alert-banner": "^7.0.1",
+    "@hashicorp/react-button": "^6.0.1",
+    "@hashicorp/react-command-line-terminal": "^2.0.4",
+    "@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-markdown-page": "^1.4.3",
+    "@hashicorp/react-product-downloads-page": "^2.5.2",
+    "@hashicorp/react-product-features-list": "^5.0.0",
+    "@hashicorp/react-search": "^6.0.1",
+    "@hashicorp/react-section-header": "^5.0.4",
+    "@hashicorp/react-subnav": "^9.0.1",
+    "@hashicorp/react-text-split-with-image": "^4.2.5",
+    "@hashicorp/react-vertical-text-block-list": "^7.0.0",
     "adm-zip": "^0.5.5",
     "gray-matter": "^4.0.2",
-    "next": "10.2.2",
+    "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.5",
     "prettier": "2.2.1",
     "typescript": "^4.3.5"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "next-hashicorp precommit"
-    }
-  },
+  "husky": { "hooks": { "pre-commit": "next-hashicorp precommit" } },
   "main": "index.js",
   "scripts": {
     "build": "node --max-old-space-size=8192 ./node_modules/.bin/next build",
@@ -61,5 +57,6 @@
     "start": "next-remote-watch './content/**/*.mdx'",
     "static": "npm run build && npm run export && cp _redirects out/.",
     "linkcheck": "linkcheck https://packer.io"
-  }
+  },
+  "engines": { "npm": ">=7.0.0" }
 }

website/pages/style.css

@@ -5,18 +5,6 @@
   --highlight-color: var(--packer-link);
 }
 
-@import '~@hashicorp/react-alert/style.css';
-@import '~@hashicorp/react-alert-banner/style.css';
-@import '~@hashicorp/react-button/styles/index.css';
-@import '~@hashicorp/react-consent-manager/style.css';
-@import '~@hashicorp/react-product-features-list/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-toggle/style.css';
-@import '~@hashicorp/react-vertical-text-block-list/style.css';
-
 /* Local Components */
 @import '../components/footer/style.css';
 @import '../components/search-bar/style.css';
@@ -77,42 +65,3 @@
 .g-subnav ~ * :target {
   scroll-margin-top: calc(64px + 0.5em);
 }
-
-/* Layout Styles */
-.g-section-block section {
-  padding-top: 96px;
-  padding-bottom: 96px;
-
-  & > .g-section-header + *,
-  & > .g-grid-container > .g-section-header + * {
-    margin-top: 72px;
-  }
-
-  & > * + *,
-  & > .g-grid-container > * + * {
-    margin-top: 96px;
-  }
-}
-
-.g-section-block .button-container {
-  display: -webkit-box;
-  display: flex;
-  flex-wrap: wrap;
-  -webkit-box-pack: center;
-  justify-content: center;
-  margin: auto -8px -16px;
-}
-
-.g-section-block section > * + .button-container,
-.g-section-block section > .g-grid-container > * + .button-container {
-  margin-top: 40px;
-}
-
-.g-section-block .button-container > * {
-  margin: auto 8px 16px;
-}
-
-.g-section-block.theme-black-background-white-text {
-  background: var(--gray-1);
-  color: white;
-}