Adds option to customize fonts and color, support for extra socials, pinterest/whatsapp share

Author: thandaanda

example/site-config.js

@@ -16,6 +16,7 @@ module.exports = {
   themeColor: "#15171A", // Used for Offline Manifest
   apiUrl: "https://wordpress.theasdfghjkl.com",
   subscribeWidget: {
+    visible: false,
     title: "Subscribe to Draftbox",
     helpText: "Get the latest posts delivered right to your inbox.",
     successMessage: "Thanks for subscribing to Draftbox.",
@@ -63,6 +64,12 @@ module.exports = {
     instagram: "https://www.instagram.com/",
     linkedin: "https://linkedin.com/",
     github: "https://github.com/draftbox-co",
+    whatsapp: "",
+    pinterest: "",
+    youtube: "",
+    dribbble: "",
+    behance: "",
+    externalLink: "",
   },
   contactWidget: {
     title: "Contact Built with Draftbox",
@@ -95,4 +102,32 @@ module.exports = {
   iconUrl: "favicon.png",
   coverUrl: "cover.jpg",
   alternateLogoUrl: "logo.png",
+  themeConfig: {
+    fonts: [
+      {
+        family: "Libre Baskerville",
+        variants: ["400", "700"],
+        fontDisplay: "swap",
+        strategy: "selfHosted",
+      },
+    ],
+    variables: [
+      {
+        varName: "--primary-font",
+        value: "Libre Baskerville",
+      },
+      {
+        varName: "--primary-font-normal",
+        value: "400",
+      },
+      {
+        varName: "--primary-font-bold",
+        value: "700",
+      },
+      {
+        varName: "--primary-color",
+        value: "#404040",
+      },
+    ],
+  },
 };

gatsby-wordpress-theme-libre/gatsby-config.js

@@ -13,7 +13,7 @@ module.exports = (themeOptions) => {
   const siteConfig = themeOptions.siteConfig || siteConfigDefaults;
   const wordpressConfig = themeOptions.wordpressConfig;
 
-  return {
+  const configOptions = {
     siteMetadata: siteConfig,
     plugins: [
       /**
@@ -176,6 +176,30 @@ module.exports = (themeOptions) => {
           content: `Draftbox`,
         },
       },
+      {
+        resolve: `@draftbox-co/gatsby-plugin-css-variables`,
+        options: {
+          variables: siteConfig.themeConfig.variables,
+        },
+      },
     ],
   };
+
+  if (siteConfig.themeConfig.fonts && siteConfig.themeConfig.fonts.length > 0) {
+    configOptions.plugins.push({
+      resolve: `@draftbox-co/gatsby-plugin-webfonts`,
+      options: {
+        fonts: {
+          google: siteConfig.themeConfig.fonts,
+        },
+        formats: ["woff2", "woff"],
+        useMinify: true,
+        usePreload: true,
+        usePreconnect: true,
+        blacklist: ["/amp"],
+      },
+    });
+  }
+
+  return configOptions;
 };

gatsby-wordpress-theme-libre/gatsby-node.js

@@ -255,6 +255,9 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
           siteMetadata {
             postsPerPage
             siteTitle
+            subscribeWidget {
+              visible
+            }
           }
         }
 
@@ -276,6 +279,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   const tags = result.data.allWordpressTag.edges;
   const pages = result.data.allWordpressPage.edges;
   const siteTitle = result.data.site.siteMetadata.siteTitle;
+  const subscribeWidget = result.data.site.siteMetadata.subscribeWidget;
 
   posts.forEach((post, i, arr) => {
     createPage({
@@ -285,6 +289,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
         slug: post.node.slug,
         next: i === arr.length - 1 ? null : arr[i + 1].node.id,
         prev: i !== 0 ? arr[i - 1].node.id : null,
+        subscribeWidget: subscribeWidget,
       },
     });
 

gatsby-wordpress-theme-libre/package.json

@@ -47,6 +47,8 @@
   },
   "dependencies": {
     "@draftbox-co/gatsby-plugin-amp": "^0.2.4",
+    "@draftbox-co/gatsby-plugin-css-variables": "^0.0.3",
+    "@draftbox-co/gatsby-plugin-webfonts": "^1.1.3",
     "@reach/router": "^1.3.3",
     "disqus-react": "^1.0.8",
     "gatsby-awesome-pagination": "^0.3.5",