From e9c5a86645a67fc7be94fe33c76630135b7affe2 Mon Sep 17 00:00:00 2001 From: Jeff Escalante Date: Tue, 6 Apr 2021 21:28:42 -0400 Subject: [PATCH] Upgrade Downloads Page (#11278) * add new downloads page * fix localhost links * 2.6% size reduction in logo svg :joy: --- website/data/version.js | 50 +++++++++++++ website/package-lock.json | 10 +-- website/package.json | 2 +- website/pages/downloads/img/vault-logo.svg | 1 + website/pages/downloads/index.jsx | 84 +++++++++++++++++----- website/pages/downloads/style.css | 4 -- website/pages/downloads/style.module.css | 14 ++++ website/pages/style.css | 2 - 8 files changed, 140 insertions(+), 27 deletions(-) create mode 100644 website/pages/downloads/img/vault-logo.svg delete mode 100644 website/pages/downloads/style.css create mode 100644 website/pages/downloads/style.module.css diff --git a/website/data/version.js b/website/data/version.js index 2bc602d488..288ca3f392 100644 --- a/website/data/version.js +++ b/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', + }, +] diff --git a/website/package-lock.json b/website/package-lock.json index c6f701cacc..9e0e15d640 100644 --- a/website/package-lock.json +++ b/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": { diff --git a/website/package.json b/website/package.json index af7e44bdf3..58c1054fd1 100644 --- a/website/package.json +++ b/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", diff --git a/website/pages/downloads/img/vault-logo.svg b/website/pages/downloads/img/vault-logo.svg new file mode 100644 index 0000000000..12ade4af80 --- /dev/null +++ b/website/pages/downloads/img/vault-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/pages/downloads/index.jsx b/website/pages/downloads/index.jsx index 9294687bfe..f9f53ef263 100644 --- a/website/pages/downloads/index.jsx +++ b/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 }) {
-

Release notes are available in our - documentation. -

- + 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={ + Nomad + } + tutorialLink={{ + href: 'https://learn.hashicorp.com/vault', + label: 'View Tutorials at HashiCorp Learn', + }} + merchandisingSlot={ +

+ Release notes are available in our{' '} + + documentation + + . +

+ } + />
) } 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 - . Usually this + . 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. diff --git a/website/pages/downloads/style.css b/website/pages/downloads/style.css deleted file mode 100644 index 812de6d11a..0000000000 --- a/website/pages/downloads/style.css +++ /dev/null @@ -1,4 +0,0 @@ -#p-downloads { - margin-top: 72px; - margin-bottom: 72px; -} diff --git a/website/pages/downloads/style.module.css b/website/pages/downloads/style.module.css new file mode 100644 index 0000000000..b7d3d345b1 --- /dev/null +++ b/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; +} diff --git a/website/pages/style.css b/website/pages/style.css index 6c074249b9..16826deb24 100644 --- a/website/pages/style.css +++ b/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';