fix issue with next/head component

see: vercel/next.js#17721
hkennyv · Jan 2, 2021 · 73e7cd1 · 73e7cd1
1 parent 1d0b1ea
commit 73e7cd1
Showing 1 changed file with 46 additions and 11 deletions.
diff --git a/components/Layout.js b/components/Layout.js
@@ -4,6 +4,46 @@ import Footer from "@components/Footer";
 import Header from "@components/Header";
 import Meta from "@components/Meta";
 
+function getMeta({ authorTwitter, description, keywords, params }) {
+  return (
+    <>
+      <meta httpEquiv="content-type" content="text/html; charset=utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta name="description" content={description || ""} />
+      <meta name="keywords" content={keywords ? keywords.join(",") : ""} />
+      <meta name="robots" content="noodp" />
+      {/* <link rel="canonical" href="" /> */}
+
+      {/* Custom CSS to override theme properties */}
+      {/*
+          Icons: See components/Layout.js.. for some reason, I can't render
+          <link> tags in this component. I suspect that it's related to not
+          being directly rendered under <Head>?
+       */}
+      <link
+        rel="shortcut icon"
+        href={
+          params.favicon
+            ? `/${params.favicon}`
+            : `/favicon/${params.themeColor}.png`
+        }
+      />
+      {/* Twitter Card */}
+      {authorTwitter && (
+        <>
+          <meta name="twitter:card" content="summary" />
+          <meta name="twitter:site" content="" />
+          <meta name="twitter:creator" content={`${authorTwitter}`} />
+        </>
+      )}
+      {/* OG data */}
+      {/* RSS */}
+      {/* JSON Feed */}
+      {/* Extended Head Section */}
+    </>
+  );
+}
+
 export default function Layout({ children, pageTitle, config, ...props }) {
   const {
     title,
@@ -19,19 +59,14 @@ export default function Layout({ children, pageTitle, config, ...props }) {
   return (
     <>
       <Head>
-        {/* use config.params.favicon if provided, otherwise fallback to the
-            provided themeColor icons in public/favicon/{color}.png */}
-        <link
-          rel="shortcut icon"
-          href={
-            params.favicon
-              ? `/${params.favicon}`
-              : `/favicon/${params.themeColor}.png`
-          }
-        />
+        {/* change back to using the <Meta /> component if this issue ever gets resolved
+            (see commented component below):
+            https://github.com/vercel/next.js/issues/17721
+        */}
+        {getMeta({ description: subtitle, keywords, params })}
 
         {/* render all the meta tags in the header, still a WIP */}
-        <Meta description={subtitle} keywords={keywords} params={params} />
+        {/* <Meta description={subtitle} keywords={keywords} params={params} /> */}
 
         {/* if the page uses <Layout /> and supplies a `pageTitle` prop, use
             that. otherwise, fallback to the default `config.title` */}