✨Taxonomy add likes and views

assets/js/page.js

@@ -0,0 +1,106 @@
+var liked_page = false
+
+if (typeof auth !== 'undefined') {
+    var id = oid ? oid.replaceAll("/", "-") : oid
+    var viewed = localStorage.getItem(id);
+
+    if (!viewed) {
+        auth.signInAnonymously()
+            .then(() => {
+                var docRef = db.collection('views').doc(id)
+                localStorage.setItem(id, true);
+                docRef.get().then((doc) => {
+                    if (doc.exists) {
+                        db.collection('views').doc(id).update({
+                            views: firebase.firestore.FieldValue.increment(1)
+                        });
+                    } else {
+                        db.collection('views').doc(id).set({ views: 1 })
+                    }
+                }).catch((error) => {
+                    console.log("Error getting document:", error);
+                });
+            })
+            .catch((error) => {
+                var errorCode = error.code;
+                var errorMessage = error.message;
+                console.error(errorCode, errorMessage)
+            });
+    }
+
+    var id_likes = oid_likes ? oid_likes.replaceAll("/", "-") : oid_likes
+    var liked = localStorage.getItem(id_likes);
+
+    if (liked) {
+        liked_page = true
+        document.querySelectorAll("span[id='likes_button_heart']")[0].style.display = ""
+        document.querySelectorAll("span[id='likes_button_emtpty_heart']")[0].style.display = "none"
+        document.querySelectorAll("span[id='likes_button_text']")[0].innerText = ""
+    }
+
+}
+
+function like_article(id_likes) {
+    auth.signInAnonymously()
+        .then(() => {
+            var docRef = db.collection('likes').doc(id_likes)
+            docRef.get().then((doc) => {
+                liked_page = true
+                localStorage.setItem(id_likes, true);
+                document.querySelectorAll("span[id='likes_button_heart']")[0].style.display = ""
+                document.querySelectorAll("span[id='likes_button_emtpty_heart']")[0].style.display = "none"
+                document.querySelectorAll("span[id='likes_button_text']")[0].innerText = ""
+                if (doc.exists) {
+                    db.collection('likes').doc(id_likes).update({
+                        likes: firebase.firestore.FieldValue.increment(1)
+                    });
+                } else {
+                    db.collection('likes').doc(id_likes).set({ likes: 1 })
+                }
+            }).catch((error) => {
+                console.log("Error getting document:", error);
+            });
+        })
+        .catch((error) => {
+            var errorCode = error.code;
+            var errorMessage = error.message;
+            console.error(errorCode, errorMessage)
+        });
+}
+
+function remove_like_article(id_likes) {
+    auth.signInAnonymously()
+        .then(() => {
+            var docRef = db.collection('likes').doc(id_likes)
+            docRef.get().then((doc) => {
+                liked_page = false
+                localStorage.removeItem(id_likes);
+                document.querySelectorAll("span[id='likes_button_heart']")[0].style.display = "none"
+                document.querySelectorAll("span[id='likes_button_emtpty_heart']")[0].style.display = ""
+                document.querySelectorAll("span[id='likes_button_text']")[0].innerText = "\xa0Like"
+                if (doc.exists) {
+                    db.collection('likes').doc(id_likes).update({
+                        likes: firebase.firestore.FieldValue.increment(-1)
+                    });
+                } else {
+                    db.collection('likes').doc(id_likes).set({ likes: 0 })
+                }
+            }).catch((error) => {
+                console.log("Error getting document:", error);
+            });
+        })
+        .catch((error) => {
+            var errorCode = error.code;
+            var errorMessage = error.message;
+            console.error(errorCode, errorMessage)
+        });
+}
+
+function process_article() {
+    var id_likes = oid_likes ? oid_likes.replaceAll("/", "-") : oid_likes
+    if (!liked_page) {
+        like_article(id_likes)
+    } else {
+        remove_like_article(id_likes)
+    }
+}

config/_default/params.toml

@@ -82,11 +82,12 @@ enableCodeCopy = true
   excludedKinds = []
 
 [taxonomy]
-  #showTermCount = true
+  showTermCount = true
   #showHero = true
   #heroStyle = "background" # valid options: basic, big, background, thumbAndBackground
   #layoutBackgroundBlur = true # only used when heroStyle equals background
   #layoutBackgroundHeaderSpace = false
+  showBreadcrumbs = false
   #showViews = false
   #showLikes = false
   #showTableOfContents = true

exampleSite/config/_default/params.toml

@@ -86,6 +86,7 @@ mainSections = ["docs"]
   heroStyle = "background" # valid options: basic, big, background, thumbAndBackground
   layoutBackgroundBlur = true # only used when heroStyle equals background
   layoutBackgroundHeaderSpace = false
+  showBreadcrumbs = false
   showViews = true
   showLikes = true
   showTableOfContents = true

layouts/_default/taxonomy.html

@@ -1,15 +1,25 @@
 {{ define "main" }}
   <header>
-    {{ if .Params.showBreadcrumbs | default (.Site.Params.list.showBreadcrumbs | default false) }}
+    {{ if .Params.showBreadcrumbs | default (.Site.Params.taxonomy.showBreadcrumbs | default false) }}
       {{ partial "breadcrumbs.html" . }}
     {{ end }}
     <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
+    <div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
+      {{ partial "article-meta-taxonomy.html" (dict "context" . "scope" "single") }}
+    </div>
   </header>
   {{ if .Content }}
     <section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
       <div class="min-w-0 min-h-0 max-w-prose">
         {{ .Content | emojify }}
       </div>
+      <script>
+        var oid = "views_{{ .File.Path }}"
+        var oid_likes = "likes_{{ .File.Path }}"
+      </script>
+      {{ $jsPage := resources.Get "js/page.js" }}
+      {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint "sha512" }}
+      <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}"></script>
     </section>
   {{ end }}
   <section class="flex flex-wrap max-w-prose -mx-2 overflow-hidden">

layouts/partials/article-meta-taxonomy.html

@@ -0,0 +1,36 @@
+{{/* Determine the correct context and scope */}}
+{{/* This allows for different logic depending on where the partial is called */}}
+{{ $context := . }}
+{{ $scope := default nil }}
+
+{{ if (reflect.IsMap . ) }}
+{{ $context = .context }}
+{{ $scope = cond (not .scope) nil .scope }}
+{{ end }}
+
+{{ with $context }}
+{{ $meta := newScratch }}
+
+{{/* Gather partials for this context */}}
+
+{{ if (.Params.showViews | default (.Site.Params.taxonomy.showViews | default false)) }}
+{{ $meta.Add "partials" (slice (partial "meta/views.html" .)) }}
+{{ end }}
+
+{{ if (.Params.showLikes | default (.Site.Params.taxonomy.showLikes | default false)) }}
+{{ $meta.Add "partials" (slice (partial "meta/likes.html" .)) }}
+{{ end }}
+
+{{ if and (eq $scope "single") (.Params.showLikes | default (.Site.Params.taxonomy.showLikes | default false)) }}
+{{ $meta.Add "partials" (slice (partial "meta/likes_button.html" .)) }}
+{{ end }}
+
+
+<div class="flex flex-row flex-wrap items-center">
+  {{/* Output partials */}}
+  {{ with ($meta.Get "partials") }}
+  {{ delimit . "<span class=\"px-2 text-primary-500\">&middot;</span>" }}
+  {{ end }}
+</div>
+
+{{ end }}