From 8ff37227804f06bfb1d36d158efe77d0bcdf7708 Mon Sep 17 00:00:00 2001
From: Maik de Kruif <maik@maik.dev>
Date: Sat, 12 Oct 2024 16:13:39 +0200
Subject: [PATCH] Add page view counter

---
 config/_default/hugo.toml                        |  6 ++++++
 config/production/hugo.toml                      |  2 +-
 content/portfolio/learn-to-program.md            |  2 ++
 themes/maik-blog/archetypes/default.md           |  5 ++++-
 themes/maik-blog/i18n/en.toml                    |  4 ++++
 .../maik-blog/layouts/partials/javascript.html   | 10 ++++++++--
 .../maik-blog/layouts/partials/page_views.html   | 16 ++++++++++++++++
 themes/maik-blog/layouts/posts/single.html       | 14 ++++++++++++++
 themes/maik-blog/layouts/writeups/single.html    | 14 ++++++++++++++
 9 files changed, 69 insertions(+), 4 deletions(-)
 create mode 100644 themes/maik-blog/layouts/partials/page_views.html

diff --git a/config/_default/hugo.toml b/config/_default/hugo.toml
index afdea31..708615d 100644
--- a/config/_default/hugo.toml
+++ b/config/_default/hugo.toml
@@ -60,6 +60,12 @@ enableEmoji     = true
   # Prefix of link to the git commit detail page. GitInfo must be enabled.
   gitUrl = "https://github.com/maikka39/Personal-Website/commit/"
 
+  # Add domain for GoatCounter to enable
+  goatCounter = "webstats.maik.dev"
+
+  # Show pageviews on posts, writeups, etc.
+  showPageViews = true
+
   # Set disableReadOtherPosts to true in order to hide the links to other posts.
   disableReadOtherPosts = false
 
diff --git a/config/production/hugo.toml b/config/production/hugo.toml
index 856a307..bfd6738 100644
--- a/config/production/hugo.toml
+++ b/config/production/hugo.toml
@@ -2,4 +2,4 @@ baseURL = "https://maik.dev/"
 
 [services]
   [services.googleAnalytics]
-    id = "UA-136337666-1"
\ No newline at end of file
+    id = "UA-136337666-1"
diff --git a/content/portfolio/learn-to-program.md b/content/portfolio/learn-to-program.md
index 543d293..8156ab0 100644
--- a/content/portfolio/learn-to-program.md
+++ b/content/portfolio/learn-to-program.md
@@ -15,3 +15,5 @@ skills = [
 This website was created for a school assignment. It was created with HTML and CSS only and no frameworks were used.
 
 [Github](https://github.com/maikka39/Learn-to-Program)
+
+[Live](https://maikka39.github.io/Learn-to-Program/)
diff --git a/themes/maik-blog/archetypes/default.md b/themes/maik-blog/archetypes/default.md
index 7201aca..99f75e8 100644
--- a/themes/maik-blog/archetypes/default.md
+++ b/themes/maik-blog/archetypes/default.md
@@ -1,13 +1,16 @@
 +++
 author = "Maik de Kruif"
 title = "{{ replace .Name "-" " " | title }}"
+subtitle = ""
+# showPageViews = false
 date = {{ .Date }}
 description = ""
-images = []
+cover = "img/writeups/google-ctf/2021/beginners-quest/10/cover.png"
 tags = [
     "untagged",
 ]
 categories = [
     "uncategorized",
 ]
+# aliases = []
 +++
diff --git a/themes/maik-blog/i18n/en.toml b/themes/maik-blog/i18n/en.toml
index 467981c..de9c0ad 100644
--- a/themes/maik-blog/i18n/en.toml
+++ b/themes/maik-blog/i18n/en.toml
@@ -34,3 +34,7 @@ other = "Table of Contents"
 [wordCount]
 one   = "One Word"
 other = "{{ .Count }} Words"
+
+[post]
+pageViews = "Views"
+unknownViews = "Unknown"
\ No newline at end of file
diff --git a/themes/maik-blog/layouts/partials/javascript.html b/themes/maik-blog/layouts/partials/javascript.html
index d9bacbe..47c7aa3 100644
--- a/themes/maik-blog/layouts/partials/javascript.html
+++ b/themes/maik-blog/layouts/partials/javascript.html
@@ -8,7 +8,7 @@
 {{- if .Site.Config.Services.GoogleAnalytics.ID }}
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Config.Services.GoogleAnalytics.ID }}"></script>
-<script>
+<script async>
     window.dataLayer = window.dataLayer || [];
 
     function gtag() {
@@ -24,4 +24,10 @@
 {{- if gt (len $val) 0 }}
 <script src="{{ $val }}"></script>
 {{- end }}
-{{- end }}
\ No newline at end of file
+{{- end }}
+
+{{- if .Site.Params.goatCounter }}
+<script data-goatcounter="https://{{ .Site.Params.goatCounter }}/count"
+        data-goatcounter-settings='{"path": "{{ .RelPermalink }}"}'
+        async src="//gc.zgo.at/count.js"></script>
+{{- end}}
\ No newline at end of file
diff --git a/themes/maik-blog/layouts/partials/page_views.html b/themes/maik-blog/layouts/partials/page_views.html
new file mode 100644
index 0000000..8eb1b7b
--- /dev/null
+++ b/themes/maik-blog/layouts/partials/page_views.html
@@ -0,0 +1,16 @@
+{{- if .Site.Params.goatCounter }}
+<span id="{{ .File.UniqueID }}" title="{{ i18n "post.pageViews" }}">{{ i18n "post.unknownViews" }}</span>
+<script async>
+    let url =
+        "https://{{ .Site.Params.goatCounter }}/counter/" +
+        encodeURIComponent({{ .RelPermalink }}.replace(/(\/)?$/, "")) +
+        ".json";
+
+    fetch(url)
+        .then(res => res.json())
+        .then(data => data.count)
+        .then(count => {
+            document.getElementById("{{ .File.UniqueID }}").innerText = count + " " + {{ i18n "post.pageViews" }};
+        });
+</script>
+{{- end}}
diff --git a/themes/maik-blog/layouts/posts/single.html b/themes/maik-blog/layouts/posts/single.html
index 6843119..70bbc79 100644
--- a/themes/maik-blog/layouts/posts/single.html
+++ b/themes/maik-blog/layouts/posts/single.html
@@ -77,6 +77,20 @@
       {{ i18n "wordCount" .Page.WordCount }}
     </p>
 
+    {{- if and (default true .Params.showPageViews) (default true .Site.Params.showPageViews) }}
+    {{- if .Site.Params.goatCounter }}
+    <p>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+        class="feather feather-activity">
+        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+        <circle cx="12" cy="12" r="3"></circle>
+      </svg>
+        {{- partial "page_views.html" . -}}
+      </p>
+    {{- end }}
+    {{- end }}
+
     <p>
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
diff --git a/themes/maik-blog/layouts/writeups/single.html b/themes/maik-blog/layouts/writeups/single.html
index 6843119..70bbc79 100644
--- a/themes/maik-blog/layouts/writeups/single.html
+++ b/themes/maik-blog/layouts/writeups/single.html
@@ -77,6 +77,20 @@
       {{ i18n "wordCount" .Page.WordCount }}
     </p>
 
+    {{- if and (default true .Params.showPageViews) (default true .Site.Params.showPageViews) }}
+    {{- if .Site.Params.goatCounter }}
+    <p>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+        class="feather feather-activity">
+        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+        <circle cx="12" cy="12" r="3"></circle>
+      </svg>
+        {{- partial "page_views.html" . -}}
+      </p>
+    {{- end }}
+    {{- end }}
+
     <p>
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"