<ProductDownloadsPage> Component

The <ProductDownloadsPage> component renders a standardized downloads page used across each of HashiCorp's product documentation websites.

Share
Code Editor
<ProductDownloadsPage
product="waypoint"
latestVersion="0.1.2"
logo={<strong>Waypoint</strong>}
getStartedDescription="Lorem ipsum dolor sit amet"
getStartedLinks={[{ href: '#', label: 'Link 1' }]}
tutorials={[{ href: '#', label: 'Tutorial' }]}
containers={[{ href: '#', label: 'Docker' }]}
merchandisingSlot={<p>arbitrary content can be added here</p>}
changelog='https://www.hashicorp.com'
packageManagerOverrides={[
{
label: 'Extra',
commands: ['test command', 'foo'],
url: '#',
os: 'linux'
},
{
label: 'Fedora',
commands: ['overridden!'],
url: '#',
os: 'linux'
},
]}
releases={{
name: 'Waypoint',
versions: {
'0.1.0': {
name: 'Waypoint',
shasums: 'waypoint_0.1.0_SHA256SUMS',
shasums_signature: 'waypoint_0.1.0_SHA256SUMS.sig',
version: '0.1.0',
builds: [
{
name: 'waypoint',
version: '0.1.0',
os: 'darwin',
arch: 'amd64',
filename: 'waypoint_0.1.0_darwin_amd64.zip',
url:
'https://releases.hashicorp.com/waypoint/0.1.0/waypoint_0.1.0_darwin_amd64.zip',
},
{
name: 'waypoint',
version: '0.1.0',
os: 'windows',
arch: 'amd64',
filename: 'waypoint_0.1.0_windows_amd64.zip',
url:
'https://releases.hashicorp.com/waypoint/0.1.0/waypoint_0.1.0_windows_amd64.zip',
},
{
name: 'waypoint',
version: '0.1.0',
os: 'linux',
arch: 'amd64',
filename: 'waypoint_0.1.0_windows_amd64.zip',
url:
'https://releases.hashicorp.com/waypoint/0.1.0/waypoint_0.1.0_linux_amd64.zip',
}
],
},
'0.1.1': {
name: "waypoint",
version: "0.1.1",
shasums: "waypoint_0.1.1_SHA256SUMS",
shasums_signature: "waypoint_0.1.1_SHA256SUMS.sig",
builds: [
{
name: "waypoint",
version: "0.1.1",
os: "darwin",
arch: "amd64",
filename: "waypoint_0.1.1_darwin_amd64.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.1/waypoint_0.1.1_darwin_amd64.zip",
},
{
name: "waypoint",
version: "0.1.1",
os: "linux",
arch: "386",
filename: "waypoint_0.1.1_linux_386.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.1/waypoint_0.1.1_linux_386.zip",
},
{
name: "waypoint",
version: "0.1.1",
os: "linux",
arch: "amd64",
filename: "waypoint_0.1.1_linux_amd64.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.1/waypoint_0.1.1_linux_amd64.zip",
},
{
name: "waypoint",
version: "0.1.1",
os: "linux",
arch: "arm",
filename: "waypoint_0.1.1_linux_arm.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.1/waypoint_0.1.1_linux_arm.zip",
},
{
name: "waypoint",
version: "0.1.1",
os: "windows",
arch: "386",
filename: "waypoint_0.1.1_windows_386.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.1/waypoint_0.1.1_windows_386.zip",
},
{
name: "waypoint",
version: "0.1.1",
os: "windows",
arch: "amd64",
filename: "waypoint_0.1.1_windows_amd64.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.1/waypoint_0.1.1_windows_amd64.zip",
},
],
},
'0.1.1+ent': {
name: "waypoint",
version: "0.1.1",
shasums: "waypoint_0.1.1_SHA256SUMS",
shasums_signature: "waypoint_0.1.1_SHA256SUMS.sig",
builds: [
{
name: "waypoint",
version: "0.1.1",
os: "darwin",
arch: "amd64",
filename: "waypoint_0.1.1_darwin_amd64.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.1/waypoint_0.1.1_darwin_amd64.zip",
},
{
name: "waypoint",
version: "0.1.1",
os: "linux",
arch: "386",
filename: "waypoint_0.1.1_linux_386.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.1/waypoint_0.1.1_linux_386.zip",
},
{
name: "waypoint",
version: "0.1.1",
os: "linux",
arch: "amd64",
filename: "waypoint_0.1.1_linux_amd64.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.1/waypoint_0.1.1_linux_amd64.zip",
},
{
name: "waypoint",
version: "0.1.1",
os: "linux",
arch: "arm",
filename: "waypoint_0.1.1_linux_arm.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.1/waypoint_0.1.1_linux_arm.zip",
},
{
name: "waypoint",
version: "0.1.1",
os: "windows",
arch: "386",
filename: "waypoint_0.1.1_windows_386.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.1/waypoint_0.1.1_windows_386.zip",
},
{
name: "waypoint",
version: "0.1.1",
os: "windows",
arch: "amd64",
filename: "waypoint_0.1.1_windows_amd64.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.1/waypoint_0.1.1_windows_amd64.zip",
},
],
},
'0.1.2': {
name: "waypoint",
version: "0.1.2",
shasums: "waypoint_0.1.2_SHA256SUMS",
shasums_signature: "waypoint_0.1.2_SHA256SUMS.sig",
builds: [
{
name: "waypoint",
version: "0.1.2",
os: "darwin",
arch: "amd64",
filename: "waypoint_0.1.2_darwin_amd64.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.2/waypoint_0.1.2_darwin_amd64.zip",
},
{
name: "waypoint",
version: "0.1.2",
os: "linux",
arch: "386",
filename: "waypoint_0.1.2_linux_386.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.2/waypoint_0.1.2_linux_386.zip",
},
{
name: "waypoint",
version: "0.1.2",
os: "linux",
arch: "amd64",
filename: "waypoint_0.1.2_linux_amd64.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.2/waypoint_0.1.2_linux_amd64.zip",
},
{
name: "waypoint",
version: "0.1.2",
os: "linux",
arch: "arm",
filename: "waypoint_0.1.2_linux_arm.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.2/waypoint_0.1.2_linux_arm.zip",
},
{
name: "waypoint",
version: "0.1.2",
os: "windows",
arch: "386",
filename: "waypoint_0.1.2_windows_386.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.2/waypoint_0.1.2_windows_386.zip",
},
{
name: "waypoint",
version: "0.1.2",
os: "windows",
arch: "amd64",
filename: "waypoint_0.1.2_windows_amd64.zip",
url:
"https://releases.hashicorp.com/waypoint/0.1.2/waypoint_0.1.2_windows_amd64.zip",
},
],
},
},
}}
/>

Full usage example:

import ProductDownloadsPage from '@hashicorp/react-product-downloads-page'
import { generateStaticProps } from '@hashicorp/react-product-download-page/server'

export default function DownloadsPage(staticProps) {
  return (
    <ProductDownloadsPage
      logo={<img alt="Vault" src={require('./img/logo.svg')} />}
      merchandisingSlot={<p>...</p>}
      tutorialLink={{
        label: 'Example',
        href: '<url>',
      }}
      getStartedDescription="Follow step-by-step tutorials on the essentials of Vault."
      getStartedLinks={[
        {
          label: 'Example',
          href: '<url>',
        },
      ]}
      containers={[
        {
          label: 'Example',
          href: '<url>',
        },
      ]}
      tutorials={[
        {
          label: 'Example',
          href: '<url>',
        },
      ]}
      changelog="<url>"
      {...staticProps}
    />
  )
}

export const getStaticProps = generateStaticProps({
  product: 'vault',
  latestVersion: '1.0.0',
})
import ProductDownloadsPage from '@hashicorp/react-product-downloads-page'
import { generateStaticProps } from '@hashicorp/react-product-download-page/server'
 
export default function DownloadsPage(staticProps) {
  return (
    <ProductDownloadsPage
      logo={<img alt="Vault" src={require('./img/logo.svg')} />}
      merchandisingSlot={<p>...</p>}
      tutorialLink={{
        label: 'Example',
        href: '<url>',
      }}
      getStartedDescription="Follow step-by-step tutorials on the essentials of Vault."
      getStartedLinks={[
        {
          label: 'Example',
          href: '<url>',
        },
      ]}
      containers={[
        {
          label: 'Example',
          href: '<url>',
        },
      ]}
      tutorials={[
        {
          label: 'Example',
          href: '<url>',
        },
      ]}
      changelog="<url>"
      {...staticProps}
    />
  )
}
 
export const getStaticProps = generateStaticProps({
  product: 'vault',
  latestVersion: '1.0.0',
})

Where it's used

0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...

Props

NameDescription
pageTitle
string
Override the default constructed page title. Useful if the download page is for a non-product release asset, such as Vagrant's vmware utility.
releases*
object
API response from releases endpoint
packageManagersOverrides*
array
object containing array of package managers (and associated commands), grouped by OS
Array members must be of the type below:
packageManagersOverrides[x]
object
Object contains nested props, see below:
packageManagersOverrides[x].label
string
human readable name of the package manager
packageManagersOverrides[x].url
string
package manager informational link url, used in release information section
packageManagersOverrides[x].commmands
array
array of commands. each array index is rendered on a new line
packageManagersOverrides[x].os
string
which operating system this package manager is for
Options: "darwin", "freebsd", "openbsd", "netbsd", "archlinux", "linux", "windows"
showPackageManagers
boolean
defaults to true, if set to false it will hide all package manager information
product*
string
A lower-case product identifier to pull in respective theme colors. The default is hashicorp blue.
Options: "hashicorp", "boundary", "consul", "nomad", "packer", "terraform", "vault", "vagrant", "waypoint"
changelog
string
custom changelog URL
latestVersion*
string
latest version of the product
tutorialLink
object
link to the product tutorial
Object contains nested props, see below:
tutorialLink.href
string
location of the link
tutorialLink.label
string
link text
merchandisingSlot
React.Element
component to be rendered underneath the downloader cards
logo*
React.Element
product logo
getStartedLinks
array
links in the "Get Started" section
Array members must be of the type below:
getStartedLinks[x]
object
Object contains nested props, see below:
getStartedLinks[x].href
text
location of the link
getStartedLinks[x].label
string
link text
getStartedDescription
string
description of the "Get Started" section
containers
array
links to package containers
Array members must be of the type below:
containers[x]
object
Object contains nested props, see below:
containers[x].href
string
location of the link
containers[x].label
string
link text
tutorials
array
links to tutorials
Array members must be of the type below:
tutorials[x]
object
Object contains nested props, see below:
tutorials[x].href
text
location of the link
tutorials[x].label
string
link text