feat: add post views counter for GoatCounter

_config.yml

@@ -49,11 +49,16 @@ google_site_verification: # fill in to your verification string
 # ↑ --------------------------
 # The end of `jekyll-seo-tag` settings
 
-google_analytics:
-  id: # fill in your Google Analytics ID
-
-goatcounter:
-  id: # fill in your Goatcounter ID
+# Web Analytics Settings
+analytics:
+  google:
+    id: # fill in your Google Analytics ID
+  goatcounter:
+    id: # fill in your GoatCounter ID
+
+# Pageviews settings
+pageviews:
+  provider: # [google | goatcounter]
 
 # Prefer color scheme setting.
 #

_includes/analytics/goatcounter.html

@@ -0,0 +1,7 @@
+<!-- GoatCounter -->
+
+<script
+  data-goatcounter="https://{{ site.analytics.goatcounter.id }}.goatcounter.com/count"
+  async
+  src="https://gc.zgo.at/count.js"
+></script>

_includes/analytics/google.html

@@ -0,0 +1,14 @@
+<!-- The GA snippet -->
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.google.id }}"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', function (event) {
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+
+    gtag('js', new Date());
+    gtag('config', '{{ site.analytics.google.id }}');
+  });
+</script>

_includes/head.html

@@ -72,7 +72,7 @@
   {% endif %}
 
   <!-- GA -->
-  {% if jekyll.environment == 'production' and site.google_analytics.id != empty and site.google_analytics.id %}
+  {% if jekyll.environment == 'production' and site.analytics.google.id != empty and site.analytics.google.id %}
     <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
     <link rel="dns-prefetch" href="https://www.google-analytics.com">
 

_includes/js-selector.html

@@ -95,19 +95,31 @@
   <script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
 {% endif %}
 
+{% if page.layout == 'post' %}
+  <!-- Pageviews counter -->
+  {% if site.pageviews.provider != empty and site.pageviews.provider %}
+    {% case site.pageviews.provider %}
+      {% when 'goatcounter' %}
+        {% if site.analytics.goatcounter.id != empty and site.analytics.goatcounter.id %}
+          {% include views-counter/goatcounter.html %}
+        {% endif %}
+    {% endcase %}
+  {% endif %}
+{% endif %}
+
 {% if jekyll.environment == 'production' %}
   <!-- PWA -->
   {% if site.pwa.enabled %}
     <script defer src="{{ 'app.min.js' | prepend: js_dist | relative_url }}"></script>
   {% endif %}
 
   <!-- GA -->
-  {% if site.google_analytics.id != empty and site.google_analytics.id %}
-    {% include google-analytics.html %}
+  {% if site.analytics.google.id != empty and site.analytics.google.id %}
+    {% include analytics/google.html %}
   {% endif %}
 
   <!-- GoatCounter -->
-  {% if site.goatcounter.id != empty and site.goatcounter.id %}
-    {% include goatcounter.html %}
+  {% if site.analytics.goatcounter.id != empty and site.analytics.goatcounter.id %}
+    {% include analytics/goatcounter.html %}
   {% endif %}
 {% endif %}

_includes/views-counter.html

@@ -0,0 +1,11 @@
+<!-- Pageviews counter -->
+{% if site.pageviews.provider != empty
+  and site.pageviews.provider
+  and site.analytics.goatcounter.id != empty
+  and site.analytics.goatcounter.id
+%}
+  <span>
+    <em id="pageviews-counter"> 1 </em>
+    {{ site.data.locales[lang].post.pageview_measure }}
+  </span>
+{% endif %}

_includes/views-counter/goatcounter.html

@@ -0,0 +1,12 @@
+<script>
+  const uri = location.pathname.replace(/\/$/, '');
+  const fetchPromise = fetch(
+    `https://{{site.analytics.goatcounter.id}}.goatcounter.com/counter/${encodeURIComponent(uri)}.json`
+  );
+
+  fetchPromise
+    .then((response) => response.json())
+    .then((data) => {
+      document.getElementById('pageviews-counter').innerText = data.count;
+    });
+</script>

_layouts/post.html

@@ -8,7 +8,6 @@
   - post-nav
   - comments
 ---
-
 {% include lang.html %}
 
 <article class="px-1">
@@ -74,8 +73,13 @@ <h1 data-toc-skip>{{ page.title }}</h1>
           </em>
         </span>
 
-        <!-- read time -->
-        {% include read-time.html content=content prompt=true lang=lang %}
+        <div>
+          <!-- pageviews counter -->
+          {% include views-counter.html %}
+
+          <!-- read time -->
+          {% include read-time.html content=content prompt=true lang=lang %}
+        </div>
       </div>
       <!-- .d-flex -->
     </div>

_sass/layout/post.scss

@@ -15,7 +15,7 @@
 }
 
 h1 + .post-meta {
-  > span + span::before {
+  span + span::before {
     @include dot;
   }