Upgrade global styles (#10936)

* website: upgrade global-styles packages

* website: upgrade community page

* website: hide alert-banner on mobile

* website: upgrade g-container to g-grid-container

* website: update /security to use markdown-page

* website: fix unsupported prop

* website: fix incorrect github link in security page

* website: bump to latest patched dependencies

website/components/footer/index.jsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 export default function Footer({ openConsentManager }) {
   return (
     <footer className="g-footer">
-      <div className="g-container">
+      <div className="g-grid-container">
         <div className="left">
           <Link href="/docs">
             <a>Docs</a>

website/components/footer/style.css

@@ -3,7 +3,7 @@
   flex-shrink: 0;
   display: flex;
 
-  & .g-container {
+  & .g-grid-container {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;

website/content/security.mdx

@@ -0,0 +1,16 @@
+---
+layout: index
+page_title: Security
+description: >-
+  Nomad takes security very seriously. Please responsibly disclose any security vulnerabilities found and we'll handle it quickly.
+---
+
+# Nomad Security
+
+We understand that many users place a high level of trust in HashiCorp and the tools we build. We apply best practices and focus on security to make sure we can maintain the trust of the community.
+
+We deeply appreciate any effort to disclose vulnerabilities responsibly.
+
+If you would like to report a vulnerability, please see the [HashiCorp security page](https://www.hashicorp.com/security), which has the proper email to communicate with as well as our PGP key. Please **do not create a GitHub issue for security concerns**.
+
+If you aren't reporting a security sensitive vulnerability, please open an issue on the standard [GitHub](https://github.com/hashicorp/nomad) repository.

website/package.json

@@ -7,26 +7,27 @@
     "node": "12.x - 14.x"
   },
   "dependencies": {
-    "@hashicorp/mktg-global-styles": "^3.1.0",
+    "@hashicorp/mktg-global-styles": "4.0.0",
     "@hashicorp/mktg-logos": "^1.2.0",
     "@hashicorp/platform-code-highlighting": "^0.1.1",
     "@hashicorp/platform-runtime-error-monitoring": "^0.1.0",
     "@hashicorp/platform-util": "^0.1.0",
-    "@hashicorp/react-alert-banner": "^6.1.2",
+    "@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": "^7.0.2",
-    "@hashicorp/react-docs-page": "^13.5.1",
+    "@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.2",
+    "@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-product-downloads-page": "^2.3.1",
+    "@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",

website/pages/_app.js

@@ -34,7 +34,7 @@ export default function App({ Component, pageProps }) {
         icon={[{ href: '/_favicon.ico' }]}
       />
       {ALERT_BANNER_ACTIVE && (
-        <AlertBanner {...alertBannerData} product="nomad" />
+        <AlertBanner {...alertBannerData} product="nomad" hideOnMobile />
       )}
       <HashiStackMenu />
       <ProductSubnav />

website/pages/community/index.jsx

@@ -1,10 +1,11 @@
 import VerticalTextBlockList from '@hashicorp/react-vertical-text-block-list'
 import SectionHeader from '@hashicorp/react-section-header'
 import Head from 'next/head'
+import s from './style.module.css'
 
 export default function CommunityPage() {
   return (
-    <div id="p-community">
+    <div className={s.root}>
       <Head>
         <title key="title">Community | Nomad by HashiCorp</title>
       </Head>

website/pages/community/style.module.css

@@ -0,0 +1,9 @@
+.root {
+  composes: g-grid-container from global;
+  margin-top: 72px;
+  margin-bottom: 72px;
+
+  & :global(.g-section-header) {
+    margin-bottom: 100px;
+  }
+}

website/pages/downloads/style.module.css

@@ -1,5 +1,5 @@
 .root {
-  composes: .g-container from global;
+  composes: .g-grid-container from global;
   margin-top: 72px;
   margin-bottom: 72px;
 }

website/pages/not-found/index.jsx

@@ -18,11 +18,8 @@ export default function NotFound() {
 
   return (
     <div className={s.root}>
-      <h1>Page Not Found</h1>
-      <p>
-        We're sorry but we can't find the page you're looking
-        for.
-      </p>
+      <h1 className="g-type-display-1">Page Not Found</h1>
+      <p>We're sorry but we can't find the page you're looking for.</p>
       <p>
         <Link href="/">
           <a>Back to Home</a>

website/pages/print.css

@@ -70,7 +70,7 @@
 
 @media print {
   /* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/layout.css */
-  .g-container {
+  .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.

website/pages/security/index.jsx

@@ -1,59 +1,10 @@
-import Head from 'next/head'
-import HashiHead from '@hashicorp/react-head'
-import Content from '@hashicorp/react-content'
+import MarkdownPage from '@hashicorp/react-markdown-page'
+import generateStaticProps from '@hashicorp/react-markdown-page/server'
 
-export default function ResourcesPage() {
-  return (
-    <>
-      <HashiHead
-        is={Head}
-        title="Security | Nomad by HashiCorp"
-        description="Nomad takes security very seriously. Please responsibly disclose any security vulnerabilities found and we'll handle it quickly."
-      />
-      <div id="p-security" className="g-grid-container">
-        <Content
-          product="nomad"
-          content={
-            <>
-              <h2>Nomad Security</h2>
-
-              <p>
-                We understand that many users place a high level of trust in
-                HashiCorp and the tools we build. We apply best practices and
-                focus on security to make sure we can maintain the trust of the
-                community.
-              </p>
-
-              <p>
-                We deeply appreciate any effort to disclose vulnerabilities
-                responsibly.
-              </p>
-
-              <p>
-                If you would like to report a vulnerability, please see the{' '}
-                <a href="https://www.hashicorp.com/security">
-                  HashiCorp security page
-                </a>
-                , which has the proper email to communicate with as well as our
-                PGP key. Please{' '}
-                <strong>
-                  do not create an GitHub issue for security concerns
-                </strong>
-                .
-              </p>
-
-              <p>
-                If you are not reporting a security sensitive vulnerability,
-                please open an issue on the{' '}
-                <a href="https://github.com/hashicorp/nomad">
-                  Nomad GitHub repository
-                </a>
-                .
-              </p>
-            </>
-          }
-        />
-      </div>
-    </>
-  )
+export default function SecurityPage(staticProps) {
+  return <MarkdownPage {...staticProps} />
 }
+
+export const getStaticProps = generateStaticProps({
+  pagePath: 'content/security.mdx',
+})

website/pages/style.css

@@ -1,7 +1,5 @@
 /* Global Component Styles */
 @import '~@hashicorp/mktg-global-styles/style.css';
-@import '~@hashicorp/mktg-global-styles/_temporary-to-remove/layout.css';
-@import '~@hashicorp/mktg-global-styles/_temporary-to-remove/tables.css';
 
 :root {
   --highlight-color: var(--nomad);
@@ -13,8 +11,6 @@
 @import '~@hashicorp/react-call-to-action/style.css';
 @import '~@hashicorp/react-consent-manager/style.css';
 @import '~@hashicorp/react-toggle/style.css';
-@import '~@hashicorp/react-content/style.css';
-@import '~@hashicorp/react-docs-page/style.css';
 @import '~@hashicorp/react-featured-slider/style.css';
 @import '~@hashicorp/react-hero/style.css';
 @import '~@hashicorp/react-learn-callout/style.css';
@@ -38,8 +34,6 @@
 
 /* Local Pages */
 @import './home/style.css';
-@import './security/style.css';
-@import './community/style.css';
 
 /* Print Styles */
 @import './print.css';
@@ -69,9 +63,3 @@
 .g-subnav ~ * :target {
   scroll-margin-top: calc(64px + 0.5em);
 }
-
-/* overrides */
-
-.g-content pre code {
-  background: none;
-}