favicon from config.

closes #183
patronage · Nov 26, 2021 · dad0317 · dad0317
1 parent 223d959
commit dad0317
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/docs/seo.md b/docs/seo.md
@@ -15,7 +15,7 @@ The primary way we tackle this is to combine the [WordPress Yoast SEO plugin](ht
 
 Inside of our [Meta component](../website/src/components/Meta.js), we merge together defaults defined in `lib/constants.js` and merge in passed in yoast data pulled from graphql via globals context.
 
-An important variable to set is the `META.url` to the production domain. This is used to rewrite relative images and relative links from sitemaps and feeds so that those are only indexed from your production URL.
+Inside of the constants file, you'll want to set per site values like site name and favicons. An important variable to set is the `META.url` to the production domain. This is used to rewrite relative images and relative links from sitemaps and feeds so that those are only indexed from your production URL.
 
 ## Sitemaps and RSS Feeds
 

diff --git a/website/src/components/Meta.js b/website/src/components/Meta.js
@@ -1,5 +1,5 @@
 import GlobalsContext from 'contexts/GlobalsContext';
-import { META, WORDPRESS_DOMAIN, WORDPRESS_URL } from 'lib/constants';
+import { META, WORDPRESS_URL } from 'lib/constants';
 import { trimTrailingSlash } from 'lib/utils';
 import { NextSeo } from 'next-seo';
 import Head from 'next/head';
@@ -61,17 +61,14 @@ export default function Meta({ title, description, image, seo }) {
     ];
   }
 
-  // defaults are fine, only set noindex or nofollow if explicit
+  // set noindex or nofollow if explicitly defined in Yoast
   if (seo?.metaRobotsNoindex == 'noindex') {
     seoSettings.noindex = true;
   }
   if (seo?.metaRobotsNofollow == 'nofollow') {
     seoSettings.nofollow = true;
   }
 
-  // console.log('seoSettings', JSON.stringify(seoSettings, null, 2));
-  // console.log('seo', JSON.stringify(seo, null, 2));
-
   return (
     <>
       <Head>
@@ -82,13 +79,17 @@ export default function Meta({ title, description, image, seo }) {
         />
         <meta charSet="utf-8" key="meta_charset" />
         {/* favicons */}
-        {/* <link rel="icon" href="/cropped-favicon-32x32.png" sizes="32x32" /> */}
-        <link
-          rel="apple-touch-icon"
-          href="/apple-touch-icon.png"
-          sizes="180x180"
-        />
-        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+        {META.icon32 && (
+          <link rel="icon" href={META.icon32} sizes="32x32" />
+        )}
+        {META.iconApple && (
+          <link
+            rel="apple-touch-icon"
+            href={META.iconApple}
+            sizes="180x180"
+          />
+        )}
+        {/* twitter specific meta if defined */}
         {seo?.twitterTitle && (
           <meta
             property="twitter:title"
@@ -111,6 +112,7 @@ export default function Meta({ title, description, image, seo }) {
           />
         )}
       </Head>
+      {/* pass customized SEO object to NextSeo to render all other tags */}
       <NextSeo {...seoSettings} />
     </>
   );

diff --git a/website/src/lib/constants.js b/website/src/lib/constants.js
@@ -27,4 +27,6 @@ export const META = {
   twitterHandle: '@patronageorg',
   siteName: 'Bubs by Patronage',
   proxyWordPressImages: true,
+  icon32: '',
+  iconApple: '/apple-touch-icon.png',
 };