/

<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

Latest:2.9.0
Search with

Releases

Latest:2.9.0
registry.npmjs.org
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