From 44ec7d339101768cd1934da90f00159598547663 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] feat: add post views counter for GoatCounter

---
 _config.yml                               |  4 ++++
 _includes/views-counter.html              | 11 +++++++++++
 _includes/views-counters/goatcounter.html | 10 ++++++++++
 _layouts/post.html                        |  4 +++-
 4 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 _includes/views-counter.html
 create mode 100644 _includes/views-counters/goatcounter.html

diff --git a/_config.yml b/_config.yml
index 79d451fe0c1..11bd825fdc2 100644
--- a/_config.yml
+++ b/_config.yml
@@ -105,6 +105,10 @@ comments:
     lang: # optional, default to the value of `site.lang`
     reactions_enabled: # optional, default to the value of `1`
 
+views_counter:
+  active: # the option for the post views counter, e.g., 'goatcounter'.
+  # Keep it empty means disable. goatcounter id should be defined in 'goatcounter' section.
+
 # Self-hosted static assets, optional › https://github.com/cotes2020/chirpy-static-assets
 assets:
   self_host:
diff --git a/_includes/views-counter.html b/_includes/views-counter.html
new file mode 100644
index 00000000000..810de799e75
--- /dev/null
+++ b/_includes/views-counter.html
@@ -0,0 +1,11 @@
+<!-- Views counter -->
+
+{% if site.views_counter and site.views_counter.active %}
+  <span>
+    <em id="views-counter"> 0 </em>
+    {{ site.data.locales[lang].post.pageview_measure }}
+  </span>
+
+  {% capture path %}views-counters/{{ site.views_counter.active }}.html{% endcapture %}
+  {% include {{ path }} %}
+{% endif %}
diff --git a/_includes/views-counters/goatcounter.html b/_includes/views-counters/goatcounter.html
new file mode 100644
index 00000000000..c7ce790e701
--- /dev/null
+++ b/_includes/views-counters/goatcounter.html
@@ -0,0 +1,10 @@
+<script>
+  const uri = location.pathname.replace(/\/$/, '');
+  const fetchPromise = fetch(`https://{{site.goatcounter.id}}.goatcounter.com/counter/${encodeURIComponent(uri)}.json`);
+
+  fetchPromise
+    .then((response) => response.json())
+    .then((data) => {
+      document.getElementById('views-counter').innerText = data.count;
+    });
+</script>
diff --git a/_layouts/post.html b/_layouts/post.html
index f7818bf6e0f..7cbc30d9110 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -8,7 +8,6 @@
   - post-nav
   - comments
 ---
-
 {% include lang.html %}
 
 <article class="px-1">
@@ -47,6 +46,9 @@ <h1 data-toc-skip>{{ page.title }}</h1>
         </div>
       {% endif %}
 
+      <!-- Views counter -->
+      {% include views-counter.html %}
+
       <div class="d-flex justify-content-between">
         <!-- author(s) -->
         <span>