Use Head Component

91296370 · Jonathan Neal · ad61f975 · ad61f975 · 91296370 · 91296370
Commit 91296370 authored 5 years ago by Jonathan Neal
Hide whitespace changes
Inline Side-by-side

Showing

with 61 additions and 110 deletions
+61 -110
--- a/website/components/default-head-tags/index.jsx
+++ b/website/components/default-head-tags/index.jsx
-import Head from 'next/head'
-
-export default function DefaultHeadTags() {
-  return (
-    <Head>
-      <title key="title">Nomad by HashiCorp</title>
-      <meta charSet="utf-8" />
-      <meta httpEquiv="x-ua-compatible" content="ie=edge" />
-
-      {/* Metadata, ref: https://www.phpied.com/minimum-viable-sharing-meta-tags/ */}
-      <meta property="og:locale" content="en_US" />
-      <meta property="og:type" content="website" />
-      <meta
-        property="og:site_name"
-        content="Nomad by HashiCorp"
-        key="og-name"
-      />
-      <meta name="twitter:site" content="@HashiCorp" />
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta
-        property="article:publisher"
-        content="https://www.facebook.com/HashiCorp/"
-      />
-      <meta
-        name="description"
-        property="og:description"
-        content="Nomad is a highly available, distributed, data-center aware cluster and application scheduler designed to support the modern datacenter with support for long-running services, batch jobs, and much more."
-        key="description"
-      />
-      <meta
-        property="og:image"
-        content="https://www.nomadproject.io/img/og-image.png"
-        key="image"
-      />
-      <link type="image/png" rel="icon" href="/favicon.ico" />
-
-      {/* Preload */}
-      <link rel="preload" href="/css/nprogress.css" as="style"></link>
-      <link rel="preload" href="/css/nprogress.css" as="style"></link>
-      <link rel="preload" href="/fonts/klavika/medium.woff2" as="font"></link>
-      <link rel="preload" href="/fonts/gilmer/light.woff2" as="font"></link>
-      <link rel="preload" href="/fonts/gilmer/regular.woff2" as="font"></link>
-      <link rel="preload" href="/fonts/gilmer/medium.woff2" as="font"></link>
-      <link rel="preload" href="/fonts/gilmer/bold.woff2" as="font"></link>
-      <link rel="preload" href="/fonts/metro-sans/book.woff2" as="font"></link>
-      <link
-        rel="preload"
-        href="/fonts/metro-sans/regular.woff2"
-        as="font"
-      ></link>
-      <link
-        rel="preload"
-        href="/fonts/metro-sans/semi-bold.woff2"
-        as="font"
-      ></link>
-      <link rel="preload" href="/fonts/metro-sans/bold.woff2" as="font"></link>
-      <link rel="preload" href="/fonts/dejavu/mono.woff2" as="font"></link>
-
-      {/* Styles */}
-      <link rel="stylesheet" href="/css/nprogress.css"></link>
-      <link
-        href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap"
-        rel="stylesheet"
-      />
-    </Head>
-  )
-}
--- a/website/components/docs-page/index.jsx
+++ b/website/components/docs-page/index.jsx
@@ -5,6 +5,7 @@ import InlineSvg from '@hashicorp/react-inline-svg'
 import githubIcon from './img/github-icon.svg?include'
 import Link from 'next/link'
 import Head from 'next/head'
+import HashiHead from '@hashicorp/react-head'

 export default function DocsPage({
  children,
@@ -23,17 +24,11 @@ export default function DocsPage({

  return (
    <div id="p-docs">
-      <Head>
-        <title key="title">{pageMeta.page_title} | Nomad by HashiCorp</title>
-        {pageMeta.description && (
-          <meta
-            name="description"
-            property="og:description"
-            content={pageMeta.description}
-            key="description"
-          />
-        )}
-      </Head>
+      <HashiHead
+        is={Head}
+        title={`${pageMeta.page_title} | Nomad by HashiCorp`}
+        description={pageMeta.description}
+      />
      <div className="content-wrap g-container">
        <div id="sidebar" role="complementary">
          <div className="nav docs-nav">

--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -3122,6 +3122,11 @@
      "resolved": "https://registry.npmjs.org/@hashicorp/react-global-styles/-/react-global-styles-4.0.9.tgz",
      "integrity": "sha512-2I5cgGrn34rBsmcoku4Wbu9qq/WramrYn8r9brMVNfHqvnJojORfIr0uMBEheh3ic9fZiN7XtnbovYcqt4Oy2g=="
    },
+    "@hashicorp/react-head": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-head/-/react-head-0.1.1.tgz",
+      "integrity": "sha512-t1eXCDp9mcAL32xaGrFqyQIpUlXqtH8IIYobUFcfxjNIEaMz+8sLYWZ9AbZwZJ3yPGqBezoEortUGAYT/EUFyQ=="
+    },
    "@hashicorp/react-hero": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/@hashicorp/react-hero/-/react-hero-3.0.3.tgz",

--- a/website/package.json
+++ b/website/package.json
@@ -9,21 +9,22 @@
    "@hashicorp/nextjs-scripts": "^6.0.0-2",
    "@hashicorp/react-alert": "^2.0.0",
    "@hashicorp/react-button": "^2.1.5",
+    "@hashicorp/react-call-to-action": "^0.1.2",
    "@hashicorp/react-case-study-slider": "^2.0.6",
    "@hashicorp/react-consent-manager": "^2.0.5",
-    "@hashicorp/react-call-to-action": "^0.1.2",
    "@hashicorp/react-content": "^2.2.0",
    "@hashicorp/react-docs-sidenav": "^3.0.3",
    "@hashicorp/react-docs-sitemap": "^1.0.0",
    "@hashicorp/react-footer": "^3.1.10",
    "@hashicorp/react-global-styles": "^4.0.9",
+    "@hashicorp/react-head": "^0.1.1",
    "@hashicorp/react-hero": "^3.0.3",
    "@hashicorp/react-image": "^2.0.1",
    "@hashicorp/react-inline-svg": "^1.0.0",
    "@hashicorp/react-product-downloader": "^3.0.1",
    "@hashicorp/react-section-header": "^2.0.0",
-    "@hashicorp/react-text-and-content": "^4.0.4",
    "@hashicorp/react-subnav": "^2.0.0",
+    "@hashicorp/react-text-and-content": "^4.0.4",
    "@hashicorp/react-text-split": "^0.2.2",
    "@hashicorp/react-text-split-with-code": "0.0.4",
    "@hashicorp/react-text-split-with-image": "^1.2.2",

--- a/website/pages/_app.js
+++ b/website/pages/_app.js
@@ -2,7 +2,6 @@ import './style.css'
 import App from 'next/app'
 import NProgress from 'nprogress'
 import Router from 'next/router'
-import DefaultHeadTags from '../components/default-head-tags'
 import ProductSubnav from '../components/subnav'
 import MegaNav from '../components/mega-nav'
 import Footer from '@hashicorp/react-footer'
@@ -10,7 +9,8 @@ import { ConsentManager, open } from '@hashicorp/react-consent-manager'
 import consentManagerConfig from '../lib/consent-manager-config'
 import bugsnagClient from '../lib/bugsnag'
 import Error from './_error'
-import subnavLinks from '../data/subnav'
+import Head from 'next/head'
+import HashiHead from '@hashicorp/react-head'

 Router.events.on('routeChangeStart', NProgress.start)
 Router.events.on('routeChangeError', NProgress.done)
@@ -36,15 +36,41 @@ class NextApp extends App {
      }
    }

-    return { pageProps, path: ctx.asPath }
+    return { pageProps }
  }

  render() {
-    const { Component, pageProps, path } = this.props
+    const { Component, pageProps } = this.props

    return (
      <ErrorBoundary FallbackComponent={Error}>
-        <DefaultHeadTags />
+        <HashiHead
+          is={Head}
+          title="Nomad by HashiCorp"
+          siteName="Nomad by HashiCorp"
+          description="Nomad is a highly available, distributed, data-center aware cluster and application scheduler designed to support the modern datacenter with support for long-running services, batch jobs, and much more."
+          image="https://www.nomadproject.io/img/og-image.png"
+          stylesheet={[
+            { href: '/css/nprogress.css' },
+            {
+              href:
+                'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap'
+            }
+          ]}
+          icon={[{ href: '/favicon.ico' }]}
+          preload={[
+            { href: '/fonts/klavika/medium.woff2', as: 'font' },
+            { href: '/fonts/gilmer/light.woff2', as: 'font' },
+            { href: '/fonts/gilmer/regular.woff2', as: 'font' },
+            { href: '/fonts/gilmer/medium.woff2', as: 'font' },
+            { href: '/fonts/gilmer/bold.woff2', as: 'font' },
+            { href: '/fonts/metro-sans/book.woff2', as: 'font' },
+            { href: '/fonts/metro-sans/regular.woff2', as: 'font' },
+            { href: '/fonts/metro-sans/semi-bold.woff2', as: 'font' },
+            { href: '/fonts/metro-sans/bold.woff2', as: 'font' },
+            { href: '/fonts/dejavu/mono.woff2', as: 'font' }
+          ]}
+        />
        <MegaNav product="Nomad" />
        <ProductSubnav />
        <Component {...pageProps} />

--- a/website/pages/_document.js
+++ b/website/pages/_document.js
 import Document, { Head, Main, NextScript } from 'next/document'
+import HashiHead from '@hashicorp/react-head'

 export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
@@ -9,10 +10,7 @@ export default class MyDocument extends Document {
  render() {
    return (
      <html>
-        <Head>
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <link rel="stylesheet" type="text/css" href="/css/nprogress.css" />
-        </Head>
+        <HashiHead is={Head} />
        <body>
          <Main />
          <NextScript />

--- a/website/pages/downloads/index.jsx
+++ b/website/pages/downloads/index.jsx
@@ -2,13 +2,12 @@ import fetch from 'isomorphic-unfetch'
 import VERSION from '../../data/version.js'
 import ProductDownloader from '@hashicorp/react-product-downloader'
 import Head from 'next/head'
+import HashiHead from '@hashicorp/react-head'

 export default function DownloadsPage({ downloadData }) {
  return (
    <div id="p-downloads" className="g-container">
-      <Head>
-        <title key="title">Downloads | Nomad by HashiCorp</title>
-      </Head>
+      <HashiHead is={Head} title="Downloads | Nomad by HashiCorp" />
      <ProductDownloader
        product="Nomad"
        version={VERSION}

--- a/website/pages/resources/index.jsx
+++ b/website/pages/resources/index.jsx
 import Head from 'next/head'
+import HashiHead from '@hashicorp/react-head'
 import Content from '@hashicorp/react-content'

 export default function ResourcesPage() {
  return (
    <>
-      <Head>
-        <title key="title">Resources | Nomad by HashiCorp</title>
-        <meta
-          name="description"
-          property="og:description"
-          content="Nomad is widely deployed across a range of enterprises and business verticals."
-          key="description"
-        />
-      </Head>
+      <HashiHead
+        is={Head}
+        title="Resources | Nomad by HashiCorp"
+        description="Nomad is widely deployed across a range of enterprises and business verticals."
+      />
      <div id="p-resources" className="g-grid-container">
        <Content
          product="nomad"

--- a/website/pages/security/index.jsx
+++ b/website/pages/security/index.jsx
 import Head from 'next/head'
+import HashiHead from '@hashicorp/react-head'
 import Content from '@hashicorp/react-content'

 export default function ResourcesPage() {
  return (
    <>
-      <Head>
-        <title key="title">Security | Nomad by HashiCorp</title>
-        <meta
-          name="description"
-          property="og:description"
-          content="Nomad takes security very seriously. Please responsibly disclose any security vulnerabilities found and we'll handle it quickly."
-          key="description"
-        />
-      </Head>
+      <HashiHead
+        is={Head}
+        title="Security | Nomad by HashiCorp"
+        description="Nomad takes security very seriously. Please responsibly disclose any security vulnerabilities found and we'll handle it quickly."
+      />
      <div id="p-security" className="g-grid-container">
        <Content
          product="nomad"