Merge pull request #2 from draftbox-co/user-customization

Merge User customization

Author: shyamlohar

example/.env.development

@@ -1,3 +1,3 @@
-DISQUS_SHORTNAME=
-FORM_URL=http://localhost:3000/api/project/5e81b8923d8c2d64d8549add/forms
+GATSBY_DISQUS_SHORTNAME=built-with-draftbox
+GATSBY_FORM_URL=http://localhost:3000/api/project/5e81b8923d8c2d64d8549add/forms
 GATSBY_FB_APP_ID=

example/.env.production

@@ -1,3 +1,3 @@
-DISQUS_SHORTNAME=
-FORM_URL=http://localhost:3000/api/project/5e81b8923d8c2d64d8549add/forms
-FB_APP_ID=
+GATSBY_DISQUS_SHORTNAME=built-with-draftbox
+GATSBY_FORM_URL=http://localhost:3000/api/project/5e81b8923d8c2d64d8549add/forms
+GATSBY_FB_APP_ID=

example/site-config.js

@@ -16,6 +16,7 @@ module.exports = {
   themeColor: "#15171A", // Used for Offline Manifest
   apiUrl: "https://wordpress.theasdfghjkl.com",
   subscribeWidget: {
+    visible: true,
     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,59 @@ module.exports = {
   iconUrl: "favicon.png",
   coverUrl: "cover.jpg",
   alternateLogoUrl: "logo.png",
+  themeConfig: {
+    fonts: [
+      {
+        family: "Libre Baskerville",
+        variants: ["400", "700"],
+        fontDisplay: "swap",
+        strategy: "selfHosted",
+      },
+      {
+        family: "Source Code Pro",
+        variants: ["400", "700"],
+        fontDisplay: "swap",
+        strategy: "selfHosted",
+      },
+    ],
+    variables: [
+      {
+        varName: "--page-background",
+        value: "#ede6dd",
+      },
+      {
+        varName: "--primary-font",
+        value: "Libre Baskerville",
+      },
+      {
+        varName: "--primary-font-normal",
+        value: "400",
+      },
+      {
+        varName: "--primary-font-bold",
+        value: "700",
+      },
+      {
+        varName: "--primary-color",
+        value: "#438d8d",
+      },
+      {
+        varName: "--secondary-font",
+        value: "Source Code Pro",
+      },
+      {
+        varName: "--secondary-font-normal",
+        value: "400",
+      },
+      {
+        varName: "--secondary-font-bold",
+        value: "700",
+      },
+      {
+        varName: "--secondary-color",
+        value: "#5e4f40",
+      },
+
+    ],
+  },
 };

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

@@ -56,6 +56,7 @@ let injected = false;
 let injectedTwitterScript = false;
 
 export const onRouteUpdate = ({ location: { hash } }) => {
+
   if (hash) {
     window.setTimeout(scrollTo(hash), 10);
   }

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: [
       /**
@@ -30,6 +30,13 @@ module.exports = (themeOptions) => {
           name: `pages`,
         },
       },
+      {
+        resolve: `gatsby-source-filesystem`,
+        options: {
+          path: path.join(__dirname, `static`),
+          name: `static`,
+        },
+      },
       // Setup for optimized images.
       // See https://www.gatsbyjs.org/packages/gatsby-image/
       {
@@ -88,8 +95,8 @@ module.exports = (themeOptions) => {
             `/404`,
             `/404.html`,
             `/offline-plugin-app-shell-fallback`,
-            '/offline',
-            '/offline.html'
+            "/offline",
+            "/offline.html",
           ],
           createLinkInHead: true,
           addUncaughtPages: true,
@@ -176,6 +183,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,
       },
     });
 
@@ -327,6 +332,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
         component: pageTemplate,
         context: {
           slug: page.node.slug,
+          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",