From c14709fb1c6e5d0453f100c77e525931a4090cd5 Mon Sep 17 00:00:00 2001
From: Alexander Fuks <kungfux@users.noreply.github.com>
Date: Fri, 16 Feb 2024 03:48:20 +0400
Subject: [PATCH 1/2] feat: add post views counter for GoatCounter

---
 _config.yml                              | 15 ++++++++++-----
 _includes/analytics/goatcounter.html     |  7 +++++++
 _includes/analytics/google.html          | 14 ++++++++++++++
 _includes/goatcounter.html               |  8 --------
 _includes/google-analytics.html          | 14 --------------
 _includes/head.html                      |  2 +-
 _includes/js-selector.html               | 20 ++++++++++++++++----
 _includes/views-counter.html             | 11 +++++++++++
 _includes/views-counter/goatcounter.html | 12 ++++++++++++
 _layouts/post.html                       | 10 +++++++---
 _sass/layout/post.scss                   |  2 +-
 11 files changed, 79 insertions(+), 36 deletions(-)
 create mode 100644 _includes/analytics/goatcounter.html
 create mode 100644 _includes/analytics/google.html
 delete mode 100644 _includes/goatcounter.html
 delete mode 100644 _includes/google-analytics.html
 create mode 100644 _includes/views-counter.html
 create mode 100644 _includes/views-counter/goatcounter.html

diff --git a/_config.yml b/_config.yml
index 79d451fe0c1..6c0896583b4 100644
--- a/_config.yml
+++ b/_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.
 #
diff --git a/_includes/analytics/goatcounter.html b/_includes/analytics/goatcounter.html
new file mode 100644
index 00000000000..c7fef85e005
--- /dev/null
+++ b/_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>
diff --git a/_includes/analytics/google.html b/_includes/analytics/google.html
new file mode 100644
index 00000000000..b6e09d2a575
--- /dev/null
+++ b/_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>
diff --git a/_includes/goatcounter.html b/_includes/goatcounter.html
deleted file mode 100644
index 4d21d21ec38..00000000000
--- a/_includes/goatcounter.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<!-- GoatCounter -->
-
-<script
-  data-goatcounter="https://{{ site.goatcounter.id }}.goatcounter.com/count"
-  async
-  src="https://gc.zgo.at/count.js"
-></script>
-
diff --git a/_includes/google-analytics.html b/_includes/google-analytics.html
deleted file mode 100644
index e5e5119e555..00000000000
--- a/_includes/google-analytics.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!--
-  The GA snippet
--->
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics.id }}"></script>
-<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-
-    gtag('js', new Date());
-    gtag('config', '{{ site.google_analytics.id }}');
-  });
-</script>
diff --git a/_includes/head.html b/_includes/head.html
index 9bad78a729d..7c093597b71 100644
--- a/_includes/head.html
+++ b/_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">
 
diff --git a/_includes/js-selector.html b/_includes/js-selector.html
index 1a1fa580bb7..641ef1a3abc 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -95,6 +95,18 @@
   <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 %}
@@ -102,12 +114,12 @@
   {% 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 %}
diff --git a/_includes/views-counter.html b/_includes/views-counter.html
new file mode 100644
index 00000000000..c8c2d36283e
--- /dev/null
+++ b/_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 %}
diff --git a/_includes/views-counter/goatcounter.html b/_includes/views-counter/goatcounter.html
new file mode 100644
index 00000000000..dfcfee2a2da
--- /dev/null
+++ b/_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>
diff --git a/_layouts/post.html b/_layouts/post.html
index f7818bf6e0f..521582e25aa 100644
--- a/_layouts/post.html
+++ b/_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>
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index efbde822686..a6dc878cfea 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -15,7 +15,7 @@
 }
 
 h1 + .post-meta {
-  > span + span::before {
+  span + span::before {
     @include dot;
   }
 

From 46fa35041ca47c533acab40be702c99ee6b540a6 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 25 Feb 2024 05:25:06 +0800
Subject: [PATCH 2/2] refactor: improve web analytics

---
 _config.yml                              |  2 +-
 _includes/analytics/goatcounter.html     |  5 ++--
 _includes/analytics/google.html          |  1 -
 _includes/js-selector.html               | 29 ++++++++++++------------
 _includes/pageviews/goatcounter.html     | 18 +++++++++++++++
 _includes/views-counter.html             | 11 ---------
 _includes/views-counter/goatcounter.html | 12 ----------
 _layouts/post.html                       | 14 ++++++++----
 8 files changed, 46 insertions(+), 46 deletions(-)
 create mode 100644 _includes/pageviews/goatcounter.html
 delete mode 100644 _includes/views-counter.html
 delete mode 100644 _includes/views-counter/goatcounter.html

diff --git a/_config.yml b/_config.yml
index 6c0896583b4..79f153d5603 100644
--- a/_config.yml
+++ b/_config.yml
@@ -58,7 +58,7 @@ analytics:
 
 # Pageviews settings
 pageviews:
-  provider: # [google | goatcounter]
+  provider: # now only supports 'goatcounter'
 
 # Prefer color scheme setting.
 #
diff --git a/_includes/analytics/goatcounter.html b/_includes/analytics/goatcounter.html
index c7fef85e005..78c90b72682 100644
--- a/_includes/analytics/goatcounter.html
+++ b/_includes/analytics/goatcounter.html
@@ -1,7 +1,6 @@
 <!-- GoatCounter -->
-
 <script
-  data-goatcounter="https://{{ site.analytics.goatcounter.id }}.goatcounter.com/count"
   async
-  src="https://gc.zgo.at/count.js"
+  src="//gc.zgo.at/count.js"
+  data-goatcounter="https://{{ site.analytics.goatcounter.id }}.goatcounter.com/count"
 ></script>
diff --git a/_includes/analytics/google.html b/_includes/analytics/google.html
index b6e09d2a575..d0aac651c22 100644
--- a/_includes/analytics/google.html
+++ b/_includes/analytics/google.html
@@ -1,4 +1,3 @@
-<!-- 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>
diff --git a/_includes/js-selector.html b/_includes/js-selector.html
index 641ef1a3abc..b37d7103fff 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -95,13 +95,15 @@
   <script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
 {% endif %}
 
+<!-- Pageviews -->
 {% if page.layout == 'post' %}
-  <!-- Pageviews counter -->
-  {% if site.pageviews.provider != empty and site.pageviews.provider %}
-    {% case site.pageviews.provider %}
+  {% assign provider = site.pageviews.provider %}
+
+  {% if provider and provider != empty %}
+    {% case provider %}
       {% when 'goatcounter' %}
-        {% if site.analytics.goatcounter.id != empty and site.analytics.goatcounter.id %}
-          {% include views-counter/goatcounter.html %}
+        {% if site.analytics[provider].id != empty and site.analytics[provider].id %}
+          {% include pageviews/{{ provider }}.html %}
         {% endif %}
     {% endcase %}
   {% endif %}
@@ -113,13 +115,12 @@
     <script defer src="{{ 'app.min.js' | prepend: js_dist | relative_url }}"></script>
   {% endif %}
 
-  <!-- GA -->
-  {% if site.analytics.google.id != empty and site.analytics.google.id %}
-    {% include analytics/google.html %}
-  {% endif %}
-
-  <!-- GoatCounter -->
-  {% if site.analytics.goatcounter.id != empty and site.analytics.goatcounter.id %}
-    {% include analytics/goatcounter.html %}
-  {% endif %}
+  <!-- Web Analytics -->
+  {% for analytics in site.analytics %}
+    {% capture str %}{{ analytics }}{% endcapture %}
+    {% assign type = str | split: '{' | first %}
+    {% if site.analytics[type].id and site.analytics[type].id != empty %}
+      {% include analytics/{{ type }}.html %}
+    {% endif %}
+  {% endfor %}
 {% endif %}
diff --git a/_includes/pageviews/goatcounter.html b/_includes/pageviews/goatcounter.html
new file mode 100644
index 00000000000..af536dbdd7c
--- /dev/null
+++ b/_includes/pageviews/goatcounter.html
@@ -0,0 +1,18 @@
+<!-- Display GoatCounter pageviews -->
+<script>
+  let pv = document.getElementById('pageviews');
+
+  if (pv !== null) {
+    const uri = location.pathname.replace(/\/$/, '');
+    const url = `https://{{ site.analytics.goatcounter.id }}.goatcounter.com/counter/${encodeURIComponent(uri)}.json`;
+
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => {
+        pv.innerText = new Intl.NumberFormat().format(data.count);
+      })
+      .catch((error) => {
+        pv.innerText = '1';
+      });
+  }
+</script>
diff --git a/_includes/views-counter.html b/_includes/views-counter.html
deleted file mode 100644
index c8c2d36283e..00000000000
--- a/_includes/views-counter.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- 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 %}
diff --git a/_includes/views-counter/goatcounter.html b/_includes/views-counter/goatcounter.html
deleted file mode 100644
index dfcfee2a2da..00000000000
--- a/_includes/views-counter/goatcounter.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<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>
diff --git a/_layouts/post.html b/_layouts/post.html
index 521582e25aa..f666d71642c 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -8,6 +8,7 @@
   - post-nav
   - comments
 ---
+
 {% include lang.html %}
 
 <article class="px-1">
@@ -74,16 +75,21 @@ <h1 data-toc-skip>{{ page.title }}</h1>
         </span>
 
         <div>
-          <!-- pageviews counter -->
-          {% include views-counter.html %}
+          <!-- pageviews -->
+          {% if site.pageviews.provider and site.analytics[site.pageviews.provider].id %}
+            <span>
+              <em id="pageviews">
+                <i class="fas fa-spinner fa-spin small"></i>
+              </em>
+              {{ site.data.locales[lang].post.pageview_measure }}
+            </span>
+          {% endif %}
 
           <!-- read time -->
           {% include read-time.html content=content prompt=true lang=lang %}
         </div>
       </div>
-      <!-- .d-flex -->
     </div>
-    <!-- .post-meta -->
   </header>
 
   <div class="content">