add and setup plausible

.github/workflows/publish.yml

@@ -39,6 +39,9 @@ jobs:
         uses: docker/build-push-action@v2
         with:
           context: .
+          build-args: |
+            PLAUSIBLE_CUSTOM_DOMAIN=${{ secrets.PLAUSIBLE_CUSTOM_DOMAIN }}
+            VERSION=v${{ steps.get_version.outputs.VERSION }}
           tags: |
             ${{ secrets.REGISTRY_NAME }}/dwysokinski.me:latest
             ${{ secrets.REGISTRY_NAME }}/dwysokinski.me:${{ steps.get_version.outputs.VERSION }}

Dockerfile

@@ -1,6 +1,9 @@
 FROM node:14.18.1-alpine as build-deps
 
-ENV NODE_ENV=production
+ARG PLAUSIBLE_CUSTOM_DOMAIN=""
+
+ENV PLAUSIBLE_CUSTOM_DOMAIN=$PLAUSIBLE_CUSTOM_DOMAIN \
+    NODE_ENV=production
 
 RUN apk --no-cache add shadow \
     gcc \

gatsby-browser.js

@@ -1 +1,12 @@
 import '@kichiyaki/roboto';
+
+export const onRouteUpdate = ({ location }) => {
+  if (
+    process.env.NODE_ENV !== `production` ||
+    typeof window.plausible !== `object`
+  ) {
+    return;
+  }
+
+  window.plausible('pageview');
+};

gatsby-config.js

@@ -1,4 +1,5 @@
-const siteUrl = 'https://dwysokinski.me';
+const DOMAIN = process.env.DOMAIN;
+const SITE_URL = 'https://' + DOMAIN;
 
 module.exports = {
   siteMetadata: {
@@ -6,10 +7,12 @@ module.exports = {
     description: `Dawid Wysokiński - Full Stack Web Developer | Back End Developer | Front End Developer | Golang Developer | React Developer | JavaScript Developer`,
     authorTwitter: `@Dawid56143781`,
     authorFullName: 'Dawid Wysokiński',
-    siteUrl,
+    siteUrl: SITE_URL,
     email: 'contact@dwysokinski.me',
     github: 'https://github.com/Kichiyaki',
     facebook: 'https://www.facebook.com/dawidwysokinski00',
+    domain: DOMAIN,
+    plausibleCustomDomain: process.env.PLAUSIBLE_CUSTOM_DOMAIN,
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
@@ -25,7 +28,7 @@ module.exports = {
     {
       resolve: `gatsby-plugin-manifest`,
       options: {
-        name: `dwysokinski.me`,
+        name: DOMAIN,
         short_name: `dw`,
         start_url: `/`,
         background_color: `#303030`,
@@ -53,8 +56,8 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-robots-txt',
       options: {
-        host: siteUrl,
-        sitemap: siteUrl + '/sitemap.xml',
+        host: SITE_URL,
+        sitemap: SITE_URL + '/sitemap.xml',
         env: {
           development: {
             policy: [{ userAgent: '*', disallow: ['/'] }],

gatsby-node.js

@@ -1,7 +0,0 @@
-/**
- * Implement Gatsby's Node APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/node-apis/
- */
-
-// You can delete this file if you're not using it

gatsby-ssr.js

@@ -1,7 +1,34 @@
-/**
- * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/ssr-apis/
- */
+import React from 'react';
 
-// You can delete this file if you're not using it
+export const onRenderBody = ({ setHeadComponents, ...rest }) => {
+  if (process.env.NODE_ENV !== 'production') {
+    return null;
+  }
+
+  const plausibleDomain = process.env.PLAUSIBLE_CUSTOM_DOMAIN ?? 'plausible.io';
+  const domain = process.env.DOMAIN ?? 'localhost';
+
+  const scriptProps = {
+    async: true,
+    defer: true,
+    'data-domain': domain,
+    src: `https://${plausibleDomain}/js/plausible.js`,
+  };
+
+  return setHeadComponents([
+    // <link
+    //   key="gatsby-plugin-plausible-preconnect"
+    //   rel="preconnect"
+    //   href={`https://${plausibleDomain}`}
+    // />,
+    <script key="plausible-script" {...scriptProps} />,
+    <script
+      key="plausible-custom-events"
+      dangerouslySetInnerHTML={{
+        __html: `
+          window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) };
+          `,
+      }}
+    />,
+  ]);
+};

src/components/Seo.js

@@ -103,7 +103,7 @@ function Seo({ description, lang, meta, title, pathname }) {
       <link
         rel="canonical"
         content={`${site.siteMetadata.siteUrl}${pathname}`}
-      ></link>
+      />
     </Helmet>
   );
 }