diff --git a/website/components/default-head-tags/index.jsx b/website/components/default-head-tags/index.jsx
deleted file mode 100644
index 0e04b6f8312582f54577098ce98e15afb6b0390b..0000000000000000000000000000000000000000
--- a/website/components/default-head-tags/index.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-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>
- )
-}
diff --git a/website/components/docs-page/index.jsx b/website/components/docs-page/index.jsx
index ef4e9243423fcbbe4bd1ac0f53e07bbff289bce8..33db805ba9f28bff8ada322a4287fc31ccb16116 100644
--- 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">
diff --git a/website/package-lock.json b/website/package-lock.json
index 15b4d745b77bb48b9e5509b31fdc42f26a971b61..e910943a711d92e2b857e6e590f96cb3b535696a 100644
--- 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",
diff --git a/website/package.json b/website/package.json
index 58c9b3d652e247e9bd8064ae7cca4b8f8c987ce1..fd190848839ef84335c461bd15f6cb082833ce4c 100644
--- 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",
diff --git a/website/pages/_app.js b/website/pages/_app.js
index c9c98012cb0df4ed88010f54386b64e6d69ea672..e3629ad39b73cae149094fda722c28c8add56466 100644
--- 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} />
diff --git a/website/pages/_document.js b/website/pages/_document.js
index 4cfeeec67c1077c89145509b5a7a1971cd261c0f..ac6e55e7e65a232361d9a55af82f16f3c72b386d 100644
--- a/website/pages/_document.js
+++ b/website/pages/_document.js
@@ -1,4 +1,5 @@
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 />
diff --git a/website/pages/downloads/index.jsx b/website/pages/downloads/index.jsx
index 7db4d5b4941390c2ee66d113847eefebe0fd3990..a36abbd620ed16ec05b295296cbe340632a05615 100644
--- 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}
diff --git a/website/pages/resources/index.jsx b/website/pages/resources/index.jsx
index 48459cf0ae5f6883b2ba11220807af18694b52ed..26151fdf8abe59b4081374dc61f951f61a279e53 100644
--- a/website/pages/resources/index.jsx
+++ b/website/pages/resources/index.jsx
@@ -1,18 +1,15 @@
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"
diff --git a/website/pages/security/index.jsx b/website/pages/security/index.jsx
index 7a27452561a892bc46d82b322d3c27612e26d8c6..0d93b9875792adbca6fc224542e2414d9f7471f7 100644
--- a/website/pages/security/index.jsx
+++ b/website/pages/security/index.jsx
@@ -1,18 +1,15 @@
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"