Fix plausible script tags and make them configurable (#105)

* Add plausible through metadata

* Use Gatsby SiteMetadata for plausible domain and src

* Use automatic plausible inference and relative proxy source links

* Disable plausible on example

* v0.1.23

* Add plausibleAPI

* Re-disable plausible in example

* Fix conditional plausible disable

* Re-add defaults for max compatibility

* Use disablePlausible flag and change mechanism to signal with src

* Use pluginOptions for src/api/domain and use src presence over extra boolean flag

* Allow null on plausible options

* Change src to null

Author: rogermparent

packages/example/gatsby-config.js

@@ -9,13 +9,14 @@ module.exports = {
     title: 'Example website',
     description: 'Example website description',
     keywords: ['docs', 'test'],
-    siteUrl: 'http://localhost:8000'
+    siteUrl: 'http://gatsby-theme-iterative-example.herokuapp.com'
   },
   plugins: [
     {
       resolve: themePackageName,
       options: {
-        simpleLinkerTerms: require('./content/linked-terms')
+        simpleLinkerTerms: require('./content/linked-terms'),
+        plausibleSrc: null
       }
     },
     {

packages/gatsby-theme-iterative/gatsby-config.js

@@ -33,6 +33,9 @@ const imageMaxWidth = 700
 
 module.exports = ({
   simpleLinkerTerms,
+  plausibleSrc = '/pl/js/plausible.outbound-links.js',
+  plausibleAPI = '/pl/api/event',
+  plausibleDomain,
   cssBase = defaultCssBase,
   customMediaConfig = { importFrom: [mediaConfig] },
   customPropertiesConfig = {
@@ -172,7 +175,9 @@ module.exports = ({
   ],
   siteMetadata: {
     author: 'Iterative',
-    siteUrl: 'https://cml.dev',
-    titleTemplate: ''
+    titleTemplate: '',
+    plausibleSrc,
+    plausibleAPI,
+    plausibleDomain
   }
 })

packages/gatsby-theme-iterative/gatsby-node.js

@@ -26,7 +26,10 @@ exports.pluginOptionsSchema = ({ Joi }) => {
     customMediaConfig: Joi.object(),
     customPropertiesConfig: Joi.object(),
     colorModConfig: Joi.object(),
-    postCssPlugins: Joi.array()
+    postCssPlugins: Joi.array(),
+    plausibleSrc: [Joi.string().optional(), Joi.allow(null)],
+    plausibleAPI: [Joi.string().optional(), Joi.allow(null)],
+    plausibleDomain: [Joi.string().optional(), Joi.allow(null)]
   })
 }
 
@@ -57,6 +60,17 @@ exports.createSchemaCustomization = async api => {
         name: 'String!',
         match: '[String]'
       }
+    }),
+    buildObjectType({
+      name: 'SiteSiteMetadata',
+      fields: {
+        author: 'String',
+        siteUrl: 'String',
+        titleTemplate: 'String',
+        plausibleSrc: 'String',
+        plausibleDomain: 'String',
+        plausibleAPI: 'String'
+      }
     })
   ])
 }

packages/gatsby-theme-iterative/gatsby-ssr.js

@@ -1,5 +1,22 @@
 /* eslint-env node */
+const React = require('react')
 
 const PageWrapper = require('./src/components/PageWrapper').default
 
 exports.wrapPageElement = PageWrapper
+
+const onRenderBody = ({ setHeadComponents }, { plausibleSrc }) => {
+  if (plausibleSrc) {
+    return setHeadComponents([
+      <script
+        key="plausible-custom-events"
+        dangerouslySetInnerHTML={{
+          __html:
+            'window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }'
+        }}
+      />
+    ])
+  }
+}
+
+exports.onRenderBody = onRenderBody

packages/gatsby-theme-iterative/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvcorg/gatsby-theme-iterative",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "description": "",
   "main": "index.js",
   "types": "src/typings.d.ts",

packages/gatsby-theme-iterative/src/components/Page/DefaultSEO/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { Script } from 'gatsby'
 import Helmet from 'react-helmet'
 
 import { MetaProps } from '../../SEO'
@@ -17,11 +16,16 @@ const metaImage = {
 
 const DefaultSEO: React.FC<IDefaultSEOProps> = ({ pathname }) => {
   const siteMeta = getSiteMeta()
-  const siteUrl = siteMeta.siteUrl
-  const metaTitle = siteMeta.title
-  const metaTitleTemplate = siteMeta.titleTemplate
-  const metaDescription = siteMeta.description
-  const metaKeywords = siteMeta.keywords
+  const {
+    siteUrl,
+    titleTemplate,
+    title: metaTitle,
+    description: metaDescription,
+    keywords: metaKeywords,
+    plausibleDomain,
+    plausibleSrc,
+    plausibleAPI
+  } = siteMeta
   const fullUrl = siteUrl + pathname
 
   const meta: MetaProps[] = [
@@ -104,32 +108,34 @@ const DefaultSEO: React.FC<IDefaultSEOProps> = ({ pathname }) => {
   ]
 
   return (
-    <>
-      <Helmet
-        htmlAttributes={{
-          lang: 'en'
-        }}
-        defaultTitle={metaTitle}
-        titleTemplate={metaTitleTemplate || `%s | ${metaTitle}`}
-        meta={meta}
-        link={[
-          {
-            rel: 'mask-icon',
-            href: '/safari-pinned-tab.svg',
-            color: '#13adc7'
-          },
-          {
-            rel: 'canonical',
-            href: fullUrl
-          }
-        ]}
-      />
-      <Script
-        defer
-        data-domain="dvc.org"
-        src="https://plausible.io/js/plausible.outbound-links.js"
-      />
-    </>
+    <Helmet
+      htmlAttributes={{
+        lang: 'en'
+      }}
+      defaultTitle={metaTitle}
+      titleTemplate={titleTemplate || `%s | ${metaTitle}`}
+      meta={meta}
+      link={[
+        {
+          rel: 'mask-icon',
+          href: '/safari-pinned-tab.svg',
+          color: '#13adc7'
+        },
+        {
+          rel: 'canonical',
+          href: fullUrl
+        }
+      ]}
+    >
+      {plausibleSrc ? (
+        <script
+          defer
+          data-domain={plausibleDomain || new URL(siteUrl).hostname}
+          data-api={plausibleAPI || undefined}
+          src={plausibleSrc}
+        />
+      ) : null}
+    </Helmet>
   )
 }
 

packages/gatsby-theme-iterative/src/queries/siteMeta.ts

@@ -6,6 +6,9 @@ interface ISiteMeta {
   keywords: string
   siteUrl: string
   titleTemplate: string
+  plausibleDomain: string | null
+  plausibleSrc: string | null
+  plausibleAPI: string | null
 }
 
 export default function siteMeta(): ISiteMeta {
@@ -21,6 +24,9 @@ export default function siteMeta(): ISiteMeta {
             keywords
             siteUrl
             titleTemplate
+            plausibleDomain
+            plausibleSrc
+            plausibleAPI
           }
         }
       }