Add page view counter

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
 

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/)

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 = []
 +++

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"

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() {
@@ -25,3 +25,9 @@
 <script src="{{ $val }}"></script>
 {{- end }}
 {{- 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}}

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}}

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"

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"