switching from helmet to next/head.

closes #7
patronage · Aug 7, 2020 · 95c55f6 · 95c55f6 · vercel · Aug 7, 2020
1 parent 8e786e7
commit 95c55f6
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 63 deletions.
diff --git a/src/components/footer/footer.module.scss b/src/components/footer/footer.module.scss
@@ -3,6 +3,7 @@
 .footer {
   border-top: 4px solid $primary;
   font-family: $font-sans;
+  background: $dark;
 
   a {
     color: $primary;

diff --git a/src/components/layout/index.js b/src/components/layout/index.js
@@ -1,19 +1,14 @@
-import { Helmet } from "react-helmet";
+import Meta from "components/meta";
 import Header from "components/header";
 import Footer from "components/footer";
 
-function LayoutDefault({ title, children }) {
+export default function Layout({ children, title, description, image }) {
   return (
     <>
-      <Helmet title={title} meta={[{ property: "og:title", content: title }]} />
-
+      <Meta title={title} description={description} image={image} />
       <Header />
-
       {children}
-
       <Footer />
     </>
   );
 }
-
-export default LayoutDefault;
diff --git a/src/components/meta/index.js b/src/components/meta/index.js
@@ -0,0 +1,39 @@
+import Head from "next/head";
+import { META_TITLE, META_OG_IMAGE_URL } from "lib/constants";
+
+export default function Meta({ title, description, image }) {
+  let meta_title = title ? `${title} | ${META_TITLE}` : META_TITLE;
+  let meta_image = image
+    ? `${image} | ${META_OG_IMAGE_URL}`
+    : META_OG_IMAGE_URL;
+
+  return (
+    <Head>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta charSet="utf-8" />
+      {/* search */}
+      <title>{meta_title}</title>
+      {description && <meta name="description" content={description} />}
+      {/* og/facebook */}
+      <meta property="og:locale" content="en_US" />
+      <meta property="og:title" content={title ? title : META_TITLE} />
+      {description && <meta property="og:description" content={description} />}
+      <meta property="og:image" content={meta_image} />}
+      <meta property="og:site_name" content={META_TITLE} />
+      <meta property="og:image" content={meta_image} />
+      <meta property="og:image:width" content="1200" />
+      <meta property="og:image:height" content="600" />
+      {/* twitter */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta property="twitter:title" content={title ? title : META_TITLE} />
+      {description && (
+        <meta property="twitter:description" content={description} />
+      )}
+      <meta property="twitter:image" content={meta_image} />
+      {/* favicons */}
+      <link rel="icon" href="/cropped-favicon-32x32.png" sizes="32x32" />
+      <link rel="icon" href="/cropped-favicon-192x192.png" sizes="192x192" />
+      <link rel="apple-touch-icon" href="/cropped-favicon-180x180.png" />
+    </Head>
+  );
+}
diff --git a/src/lib/constants.js b/src/lib/constants.js
@@ -0,0 +1,4 @@
+export const DOMAIN = "https://" + process.env.VERCEL_URL || "";
+export const META_TITLE = "Bubs Next";
+export const META_DESCRIPTION = "Next.js starter for headless WP";
+export const META_OG_IMAGE_URL = `${DOMAIN}/og-default.png`;
diff --git a/src/pages/_app.js b/src/pages/_app.js
@@ -1,31 +1,10 @@
-import { Helmet } from "react-helmet";
-
 import "styles/global.scss";
 
 // You can set sitewide <head> tags in the <Helmet> below
-function MyApp({ Component, pageProps }) {
+export default function App({ Component, pageProps }) {
   return (
     <>
-      <Helmet
-        htmlAttributes={{ lang: "en" }}
-        title="Hello next.js!"
-        meta={[
-          {
-            name: "viewport",
-            content: "width=device-width, initial-scale=1",
-          },
-        ]}
-        link={[
-          {
-            rel: "stylesheet",
-            href:
-              "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",
-          },
-        ]}
-      />
       <Component {...pageProps} />
     </>
   );
 }
-
-export default MyApp;
diff --git a/src/pages/_document.js b/src/pages/_document.js
@@ -1,35 +1,20 @@
 import Document, { Head, Main, NextScript } from "next/document";
-import { Helmet } from "react-helmet";
 
 export default class MyDocument extends Document {
-  static async getInitialProps(...args) {
-    const documentProps = await super.getInitialProps(...args);
-    // see https://github.com/nfl/react-helmet#server-usage for more information
-    // 'head' was occupied by 'renderPage().head', we cannot use it
-    return { ...documentProps, helmet: Helmet.renderStatic() };
-  }
-
-  // should render on <html>
-  get helmetHtmlAttrComponents() {
-    return this.props.helmet.htmlAttributes.toComponent();
-  }
-
-  // should render on <body>
-  get helmetBodyAttrComponents() {
-    return this.props.helmet.bodyAttributes.toComponent();
-  }
-
-  // should render on <head>
-  get helmetHeadComponents() {
-    return Object.keys(this.props.helmet)
-      .filter((el) => el !== "htmlAttributes" && el !== "bodyAttributes")
-      .map((el) => this.props.helmet[el].toComponent());
-  }
-
   render() {
     return (
-      <html {...this.helmetHtmlAttrComponents}>
-        <Head>{this.helmetHeadComponents}</Head>
+      <html lang="en">
+        <Head>
+          <link
+            rel="preconnect"
+            href="https://fonts.gstatic.com/"
+            crossOrigin="true"
+          />
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Roboto+Slab:wght@300&family=Source+Sans+Pro:wght@400;700&display=swap"
+          />
+        </Head>
         <body {...this.helmetBodyAttrComponents}>
           <Main />
           <NextScript />

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,8 +1,8 @@
-import LayoutDefault from "components/layout";
+import Layout from "components/layout";
 
 export default function main() {
   return (
-    <LayoutDefault title="Homepage">
+    <Layout title="">
       <section className="section-padded">
         <div className="container">
           <div className="row">
@@ -19,6 +19,6 @@ export default function main() {
           </div>
         </div>
       </section>
-    </LayoutDefault>
+    </Layout>
   );
 }
diff --git a/src/pages/privacy.js b/src/pages/privacy.js
@@ -1,8 +1,8 @@
-import LayoutDefault from "components/layout";
+import Layout from "components/layout";
 
 export default function main() {
   return (
-    <LayoutDefault title="Homepage">
+    <Layout title="Privacy Policy">
       <div className="section-padded">
         <div className="container">
           <div className="row">
@@ -40,6 +40,6 @@ export default function main() {
           </div>
         </div>
       </div>
-    </LayoutDefault>
+    </Layout>
   );
 }