Upgrade Downloads Page (#11278)

* add new downloads page

* fix localhost links

* 2.6% size reduction in logo svg 😂

website/data/version.js

@@ -1,3 +1,53 @@
 export const VERSION = '1.7.0'
 export const CHANGELOG_URL =
   'https://github.com/hashicorp/vault/blob/master/CHANGELOG.md#170'
+
+// HashiCorp officially supported package managers
+export const packageManagers = [
+  {
+    label: 'Homebrew',
+    commands: ['brew tap hashicorp/tap', 'brew install hashicorp/tap/vault'],
+    os: 'darwin',
+  },
+  {
+    label: 'Ubuntu/Debian',
+    commands: [
+      'curl -fsSL https://apt.releases.hashicorp.com/gpg | sudo apt-key add -',
+      'sudo apt-add-repository "deb [arch=amd64] https://apt.releases.hashicorp.com $(lsb_release -cs) main"',
+      'sudo apt-get update && sudo apt-get install vault',
+    ],
+    os: 'linux',
+  },
+  {
+    label: 'CentOS/RHEL',
+    commands: [
+      'sudo yum install -y yum-utils',
+      'sudo yum-config-manager --add-repo https://rpm.releases.hashicorp.com/RHEL/hashicorp.repo',
+      'sudo yum -y install vault',
+    ],
+    os: 'linux',
+  },
+  {
+    label: 'Fedora',
+    commands: [
+      'sudo dnf install -y dnf-plugins-core',
+      'sudo dnf config-manager --add-repo https://rpm.releases.hashicorp.com/fedora/hashicorp.repo',
+      'sudo dnf -y install vault',
+    ],
+    os: 'linux',
+  },
+  {
+    label: 'Amazon Linux',
+    commands: [
+      'sudo yum install -y yum-utils',
+      'sudo yum-config-manager --add-repo https://rpm.releases.hashicorp.com/AmazonLinux/hashicorp.repo',
+      'sudo yum -y install vault',
+    ],
+    os: 'linux',
+  },
+  {
+    label: 'Homebrew',
+    commands: ['brew tap hashicorp/tap', 'brew install hashicorp/tap/vault'],
+    os: 'linux',
+  },
+]

website/package-lock.json

@@ -2039,11 +2039,13 @@
       }
     },
     "@hashicorp/react-product-downloader": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@hashicorp/react-product-downloader/-/react-product-downloader-4.0.2.tgz",
-      "integrity": "sha512-k7CcpZmKc4kSCoZZq0lskXAhtMAzlTVnBzeFUCNME5iSbTLpUVU9m56zHg2g03o+kFdhwd73B4gXCXk0Oyan2A==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-product-downloader/-/react-product-downloader-7.0.4.tgz",
+      "integrity": "sha512-7OVuzSnxCES1RqHWgmy1usXlwpSxthP3Wi786MOFAwbLEMSamsjpVBUCwwzNj5V/dJnUayrnibzqOZOPoTr9Fg==",
       "requires": {
-        "@hashicorp/react-button": "^2.2.1"
+        "@hashicorp/react-button": "^2.2.8",
+        "@hashicorp/react-tabs": "^3.0.1",
+        "semver": "^7.3.2"
       },
       "dependencies": {
         "@hashicorp/react-button": {

website/package.json

@@ -18,7 +18,7 @@
     "@hashicorp/react-inline-svg": "5.0.0",
     "@hashicorp/react-logo-grid": "3.0.1",
     "@hashicorp/react-markdown-page": "0.1.0",
-    "@hashicorp/react-product-downloader": "4.0.2",
+    "@hashicorp/react-product-downloader": "7.0.4",
     "@hashicorp/react-section-header": "3.0.1",
     "@hashicorp/react-subnav": "7.1.0",
     "@hashicorp/react-text-splits": "1.0.5",

website/pages/downloads/img/vault-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="136" height="48" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M134.509 35.895c-.978.414-2.857.714-4.023.714-3.346 0-5.037-1.579-5.037-4.849V21.574h-2.744v-3.646h2.744v-4.549l4.586-.64v5.189h4.698l-.3 3.646h-4.398v9.585c0 .978.451 1.617 1.654 1.617.677 0 1.503-.15 2.293-.375l.527 3.495zm-18.269.338V10.446l4.586-.64v26.427h-4.586zm-14.773-18.306v12.78c0 .978.414 1.466 1.466 1.466 1.128 0 3.12-.676 4.774-1.54V17.926h4.586v18.306h-3.496l-.451-1.541c-2.293 1.128-5.187 1.917-7.33 1.917-3.044 0-4.135-2.143-4.135-5.413v-13.27h4.586zm-12.555 11.39H85.53c-1.503 0-1.917.414-1.917 1.805 0 1.278.414 1.84 1.841 1.84 1.354 0 2.595-.45 3.46-.939v-2.706zm4.586 6.916H89.74l-.338-1.24c-1.654 1.09-3.609 1.616-5.45 1.616-3.347 0-4.775-2.293-4.775-5.45 0-3.721 1.617-5.15 5.338-5.15h4.398V24.09c0-2.03-.564-2.744-3.496-2.744-1.654 0-3.458.226-5.074.564l-.564-3.496c1.728-.526 4.247-.865 6.277-.865 5.752 0 7.443 2.03 7.443 6.617v12.066zm-20.11-25.036h4.924l-7.48 25.036h-6.993l-7.48-25.036h4.924l6.052 20.864 6.053-20.864zm-45.96 9.567h2.782v-2.783h-2.782v2.783zm-.024-4.174h2.782v-2.783h-2.782v2.783zm-4.15-4.174h2.782V9.633h-2.783v2.783zm0 4.174h2.782v-2.783h-2.783v2.783zm0 4.174h2.782V17.98h-2.783v2.783zm0 4.174h2.782v-2.783h-2.783v2.782zM19.08 12.415h2.783V9.633H19.08v2.783zm0 4.174h2.783v-2.783H19.08v2.783zm0 4.174h2.783V17.98H19.08v2.783zm8.324-8.348h2.782V9.633h-2.782v2.783zM.645 0l23.913 48L48.645 0h-48z" fill="#000"/></svg>

website/pages/downloads/index.jsx

@@ -1,11 +1,12 @@
-import fetch from 'isomorphic-unfetch'
-import { VERSION, CHANGELOG_URL } from '../../data/version.js'
-import ProductDownloader from '@hashicorp/react-product-downloader'
 import Head from 'next/head'
 import Link from 'next/link'
+import ProductDownloader from '@hashicorp/react-product-downloader'
 import HashiHead from '@hashicorp/react-head'
+import { VERSION, CHANGELOG_URL, packageManagers } from 'data/version'
+import { productName, productSlug } from 'data/metadata'
+import s from './style.module.css'
 
-export default function DownloadsPage({ releaseData }) {
+export default function DownloadsPage({ releases }) {
   const changelogUrl = CHANGELOG_URL.length
     ? CHANGELOG_URL
     : `https://github.com/hashicorp/vault/blob/v${VERSION}/CHANGELOG.md`
@@ -13,27 +14,78 @@ export default function DownloadsPage({ releaseData }) {
     <div id="p-downloads" className="g-container">
       <HashiHead is={Head} title="Downloads | Vault by Hashicorp" />
       <ProductDownloader
-        product="Vault"
-        version={VERSION}
-        releaseData={releaseData}
-        changelog={changelogUrl}>
-        <p className="description g-type-body">Release notes are available in our
-          <Link href="/docs/release-notes"><a> documentation</a></Link>.
-        </p>
-      </ProductDownloader>
+        releases={releases}
+        packageManagers={packageManagers}
+        productName={productName}
+        productId={productSlug}
+        latestVersion={VERSION}
+        changelog={changelogUrl}
+        getStartedDescription="Follow step-by-step tutorials on the essentials of Nomad."
+        getStartedLinks={[
+          {
+            label: 'Getting Started with the CLI',
+            href:
+              'http://learn.hashicorp.com/collections/vault/getting-started',
+          },
+          {
+            label: 'Getting Started with Vault UI',
+            href:
+              'http://learn.hashicorp.com/collections/vault/getting-started-ui',
+          },
+          {
+            label: 'Vault on HCP',
+            href:
+              'http://learn.hashicorp.com/collections/vault/getting-started-ui',
+          },
+          {
+            label: 'View all Vault tutorials',
+            href: 'https://learn.hashicorp.com/vault',
+          },
+        ]}
+        logo={
+          <img
+            className={s.logo}
+            alt="Nomad"
+            src={require('./img/vault-logo.svg')}
+          />
+        }
+        tutorialLink={{
+          href: 'https://learn.hashicorp.com/vault',
+          label: 'View Tutorials at HashiCorp Learn',
+        }}
+        merchandisingSlot={
+          <p className={s.releaseNote}>
+            Release notes are available in our{' '}
+            <Link href={`/docs/release-notes/${VERSION}`}>
+              <a>documentation</a>
+            </Link>
+            .
+          </p>
+        }
+      />
     </div>
   )
 }
 
 export async function getStaticProps() {
-  return fetch(`https://releases.hashicorp.com/vault/${VERSION}/index.json`)
-    .then((r) => r.json())
-    .then((releaseData) => ({ props: { releaseData } }))
+  return fetch(`https://releases.hashicorp.com/vault/index.json`, {
+    headers: {
+      'Cache-Control': 'no-cache',
+    },
+  })
+    .then((res) => res.json())
+    .then((result) => {
+      return {
+        props: {
+          releases: result,
+        },
+      }
+    })
     .catch(() => {
       throw new Error(
         `--------------------------------------------------------
         Unable to resolve version ${VERSION} on releases.hashicorp.com from link
-        <https://releases.hashicorp.com/vault/${VERSION}/index.json>. Usually this
+        <https://releases.hashicorp.com/${productSlug}/${VERSION}/index.json>. Usually this
         means that the specified version has not yet been released. The downloads page
         version can only be updated after the new version has been released, to ensure
         that it works for all users.

website/pages/downloads/style.css

@@ -1,4 +0,0 @@
-#p-downloads {
-  margin-top: 72px;
-  margin-bottom: 72px;
-}

website/pages/downloads/style.module.css

@@ -0,0 +1,14 @@
+.root {
+  composes: .g-container from global;
+  margin-top: 72px;
+  margin-bottom: 72px;
+}
+
+.logo {
+  width: 105px;
+}
+
+.releaseNote {
+  composes: .g-type-body from global;
+  text-align: center;
+}

website/pages/style.css

@@ -18,7 +18,6 @@
 @import '~@hashicorp/react-enterprise-alert/style.css';
 @import '~@hashicorp/react-hero/style.css';
 @import '~@hashicorp/react-logo-grid/style.css';
-@import '~@hashicorp/react-product-downloader/dist/style.css';
 @import '~@hashicorp/react-search/style.css';
 @import '~@hashicorp/react-section-header/style.css';
 @import '~@hashicorp/react-tabs/style.css';
@@ -36,7 +35,6 @@
 
 /* Pages */
 @import './not-found/style.css';
-@import './downloads/style.css';
 @import './community/style.css';
 @import './use-cases/style.css';