website: add desktop download callout (#1140)

* setup desktop client download callout * display different formats for desktop client * add desktop download cta * fix: invalid id * style up hero download button * address review feedback, cleanup
5 years ago · cf9def7ced
parent 358f5a61fb
commit cf9def7ced
8 changed files with 153 additions and 12 deletions
--- a/website/components/homepage-hero/HomepageHero.module.css
+++ b/website/components/homepage-hero/HomepageHero.module.css
@ -14,11 +14,27 @@
    background: none;
    padding: 0;

-    & :global(.g-btn) {
+    & :global(.g-btn:nth-of-type(1)) {
      border-color: var(--boundary);
      background-color: var(--boundary);
    }

+    /* Asana ticket to address this debt: https://app.asana.com/0/1100423001970639/1200214305924669/f */
+    & :global(.g-btn:nth-of-type(2)) {
+      color: var(--gray-1);
+
+      &::after {
+        display: inline-block;
+        margin-left: 5px;
+        vertical-align: middle;
+        content: ' ';
+        background-image: url('/img/icon-right-arrow.svg');
+        background-size: 20px 20px;
+        height: 20px;
+        width: 20px;
+      }
+    }
+
    & :global(.carousel) {
      display: flex;
      flex-direction: column-reverse;
--- a/website/components/merch-desktop-client/img/apple-logo.svg
+++ b/website/components/merch-desktop-client/img/apple-logo.svg
@ -0,0 +1,10 @@
+<svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M21.7144 16.9682C21.7593 21.8016 25.9535 23.41 26 23.4306C25.9645 23.544 25.3298 25.7227 23.7903 27.9732C22.4594 29.9189 21.0781 31.8574 18.9022 31.8976C16.7641 31.937 16.0766 30.6294 13.6322 30.6294C11.1885 30.6294 10.4247 31.8574 8.40075 31.937C6.30043 32.0165 4.70106 29.833 3.35912 27.8945C0.617022 23.9291 -1.47851 16.6894 1.33526 11.8025C2.73308 9.37558 5.23109 7.83878 7.94245 7.79938C10.0049 7.76002 11.9516 9.18727 13.2124 9.18727C14.4724 9.18727 16.8381 7.47088 19.3251 7.72296C20.3662 7.7663 23.2886 8.14361 25.1652 10.8911C25.014 10.9849 21.6781 12.9273 21.7144 16.9682V16.9682ZM17.6962 5.09955C18.8112 3.74947 19.5617 1.87003 19.357 0C17.7497 0.0646146 15.8061 1.07132 14.6532 2.42066C13.62 3.61556 12.7152 5.52808 12.9593 7.3611C14.7509 7.49974 16.581 6.45049 17.6962 5.09955" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="26" height="31.9391" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/website/components/merch-desktop-client/index.jsx
+++ b/website/components/merch-desktop-client/index.jsx
@ -0,0 +1,32 @@
+import s from './merch-desktop-client.module.css'
+import InlineSvg from '@hashicorp/react-inline-svg'
+
+export default function MerchDesktopDownload({ version, releases }) {
+  const { builds } = releases.versions[version]
+
+  return (
+    <div className={s.container} id="desktop">
+      <div className={s.wrapper}>
+        <span className={s.title}>Desktop Client</span>
+        <div className={s.platformVersion}>
+          <InlineSvg
+            className={s.logo}
+            src={require('./img/apple-logo.svg?include')}
+          />
+          <span className={s.version}>{version}</span>
+        </div>
+        <div className={s.downloadLinks}>
+          {builds.map((build) => (
+            <a key={build.filename} className={s.downloadLink} href={build.url}>
+              .{getFileExtension(build.filename)}
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function getFileExtension(filename) {
+  return filename.substring(filename.lastIndexOf('.') + 1, filename.length)
+}
--- a/website/components/merch-desktop-client/merch-desktop-client.module.css
+++ b/website/components/merch-desktop-client/merch-desktop-client.module.css
@ -0,0 +1,52 @@
+.container {
+  width: 100%;
+  border: 1px solid var(--gray-6);
+  display: flex;
+  justify-content: center;
+  min-height: 193px;
+  padding: 40px 50px;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-content: center;
+  text-align: center;
+}
+
+.title {
+  font-family: var(--font-display);
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--gray-4);
+  font-weight: bold;
+}
+
+.platformVersion {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+
+  & .logo {
+    margin-right: 20px;
+  }
+
+  & .version {
+    align-self: center;
+  }
+}
+
+.downloadLinks {
+  color: var(--brand);
+
+  & a {
+    margin-right: 20px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
--- a/website/data/version.js
+++ b/website/data/version.js
@ -1 +1,2 @@
-export default '0.2.0'
+export const VERSION = '0.2.0'
+export const DESKTOP_VERSION = '1.0.0'
--- a/website/pages/downloads/index.jsx
+++ b/website/pages/downloads/index.jsx
@ -1,16 +1,19 @@
-import VERSION from 'data/version.js'
+import { VERSION, DESKTOP_VERSION } from 'data/version.js'
 import Head from 'next/head'
 import HashiHead from '@hashicorp/react-head'
 import { productName, productSlug } from 'data/metadata'
 import ProductDownloader from '@hashicorp/react-product-downloader'
+import MerchDesktopClient from 'components/merch-desktop-client'
 import styles from './style.module.css'

-export default function DownloadsPage({ releases }) {
+const DESKTOP_BINARY_SLUG = 'boundary-desktop'
+
+export default function DownloadsPage({ binaryReleases, desktopReleases }) {
  return (
    <div className={styles.root}>
      <HashiHead is={Head} title={`Downloads | ${productName} by HashiCorp`} />
      <ProductDownloader
-        releases={releases}
+        releases={binaryReleases}
        packageManagers={[
          {
            label: 'Homebrew',
@ -90,22 +93,41 @@ export default function DownloadsPage({ releases }) {
          href:
            'https://learn.hashicorp.com/tutorials/boundary/getting-started-install',
        }}
+        merchandisingSlot={
+          <MerchDesktopClient
+            version={DESKTOP_VERSION}
+            releases={desktopReleases}
+          />
+        }
      />
    </div>
  )
 }

 export async function getStaticProps() {
-  return fetch(`https://releases.hashicorp.com/boundary/index.json`, {
-    headers: {
-      'Cache-Control': 'no-cache',
-    },
-  })
-    .then((res) => res.json())
+  return Promise.all([
+    fetch(`https://releases.hashicorp.com/boundary/index.json`, {
+      headers: {
+        'Cache-Control': 'no-cache',
+      },
+    }).then((res) => res.json()),
+    fetch(`https://releases.hashicorp.com/boundary-desktop/index.json`, {
+      headers: {
+        'Cache-Control': 'no-cache',
+      },
+    }).then((res) => res.json()),
+  ])
    .then((result) => {
+      const binaryReleases = result.find(
+        (releases) => releases.name === productSlug
+      )
+      const desktopReleases = result.find(
+        (releases) => releases.name === DESKTOP_BINARY_SLUG
+      )
      return {
        props: {
-          releases: result,
+          binaryReleases,
+          desktopReleases,
        },
      }
    })
--- a/website/pages/home/index.jsx
+++ b/website/pages/home/index.jsx
@ -18,6 +18,10 @@ export default function HomePage() {
              'https://learn.hashicorp.com/collections/boundary/getting-started',
            external: true,
          },
+          {
+            title: 'Download macOS Client',
+            url: '/downloads#desktop',
+          },
        ]}
        uiVideo={{
          url: 'https://www.datocms-assets.com/2885/1614100050-hero-ui.mp4',
--- a/website/public/img/icon-right-arrow.svg
+++ b/website/public/img/icon-right-arrow.svg
@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.3335 10H16.6668" stroke="#1D1E23" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.6665 5L16.6665 10L11.6665 15" stroke="#1D1E23" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>