Merge pull request #30 from nunocoracao/29-add-likes

added likes

README.md

@@ -18,7 +18,8 @@ Blowfish is designed to be a powerful, lightweight theme for [Hugo](https://gohu
 - Multiple colour schemes (or fully customise your own)
 - Dark mode (forced on/off or auto-switching with user toggle)
 - Highly customisable configuration
-- Firebase integration to support dynamic data (i.e. views)
+- Firebase integration to support dynamic data
+- Views count & like mechanism
 - Multiple homepage layouts
 - Flexible with any content types, taxonomies and menus
 - Multilingual content support inlcuding support for RTL languages

assets/js/process.js

@@ -1,5 +1,6 @@
 if (typeof auth !== 'undefined') {
     var viewsCollection = db.collection('views');
+    var likesCollection = db.collection('likes');
 
     function numberWithCommas(x) {
         //return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
@@ -16,6 +17,16 @@ if (typeof auth !== 'undefined') {
         })
     }
 
+    var update_likes = function (oid, id) {
+        likesCollection.doc(id).onSnapshot(doc => {
+            var data = doc.data();
+            if (data) {
+                var label = document.querySelectorAll("span[id='" + oid + "']")[0].innerText.split(' ')[1]
+                document.querySelectorAll("span[id='" + oid + "']")[0].innerText = numberWithCommas(data.likes) + " " + label
+            }
+        })
+    }
+
 
     auth.signInAnonymously()
         .then(() => {
@@ -28,6 +39,16 @@ if (typeof auth !== 'undefined') {
                     update_views(oid, id)
                 }
             }
+
+            var likes_nodes = document.querySelectorAll("span[id^='likes_']")
+
+            for (var i in likes_nodes) {
+                var oid = likes_nodes[i].id
+                var id = oid ? oid.replaceAll("/", "-") : oid
+                if (id) {
+                    update_likes(oid, id)
+                }
+            }
         })
         .catch((error) => {
             var errorCode = error.code;

config/_default/params.toml

@@ -31,6 +31,7 @@ enableCodeCopy = true
 [article]
   showDate = true
   #showViews = true
+  #showLikes = true
   showDateUpdated = false
   showAuthor = true
   showBreadcrumbs = true

exampleSite/config/_default/params.toml

@@ -31,6 +31,7 @@ mainSections = ["docs", "samples"]
 [article]
   showDate = true
   showViews = true
+  showLikes = true
   showDateUpdated = false
   showAuthor = true
   showBreadcrumbs = true
@@ -44,7 +45,7 @@ mainSections = ["docs", "samples"]
   showReadingTime = true
   showTableOfContents = true
   showTaxonomies = false 
-  showWordCount = true
+  showWordCount = false
   showSummary = true
   sharingLinks = [ "linkedin", "twitter", "whatsapp", "pinterest", "reddit", "facebook", "email"]
 

exampleSite/content/docs/configuration/index.md

@@ -141,6 +141,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 |`homepage.showMoreLinkDest`|'/posts'|The destination of the show more button.|
 |`article.showDate`|`true`|Whether or not article dates are displayed.|
 |`article.showViews`|`false`|Whether or not article views are displayed. This requires firebase integrations to be enabled, look below.|
+|`article.showLikes`|`false`|Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below.|
 |`article.showDateUpdated`|`false`|Whether or not the dates articles were updated are displayed.|
 |`article.showAuthor`|`true`|Whether or not the author box is displayed in the article footer.|
 |`article.showBreadcrumbs`|`false`|Whether or not breadcrumbs are displayed in the article header.|

exampleSite/content/docs/firebase-views/index.md

@@ -1,10 +1,10 @@
 ---
-title: "Firebase & Views"
+title: "Firebase: Views & Likes"
 date: 2020-08-03
 draft: false
-description: "Learn how to integrate Firebase and get dynamic data like views."
+description: "Learn how to integrate Firebase and get dynamic data for views and likes."
 slug: "firebase-views"
-tags: ["firebase", "views"]
+tags: ["firebase", "views", likes]
 ---
 
 In order to be able to support dynamic data across your website we've added the support to integrate Firebase. This will allow you to use the views feature across lists and posts. 
@@ -50,4 +50,4 @@ service cloud.firestore {
 }
 ```
 6. Enable anonymous authorization - Select Build and open Authentication. Select get started, click Anonymous and turn it on, save.
-7. Enjoy - you can now activate views on Blowfish for all (or specific) articles.
+7. Enjoy - you can now activate views and likes on Blowfish for all (or specific) articles.

exampleSite/content/docs/front-matter/index.md

@@ -38,6 +38,7 @@ Front matter parameter default values are inherited from the theme's [base confi
 |`showComments`|`article.showComments`|Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer.|
 |`showSummary`|`list.showSummary`|Whether or not the article summary should be displayed on list pages.|
 |`showViews`|`article.showViews`|Whether or not the article views should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish|
+|`showLikes`|`article.showLikes`|Whether or not the article likes should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish|
 |`summary`|Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}}))|When `showSummary` is enabled, this is the Markdown string to be used as the summary for this article.|
 |`xml`|`true` unless excluded by `sitemap.excludedKinds`|Whether or not this article is included in the generated `/sitemap.xml` file.|
 <!-- prettier-ignore-end -->

i18n/en.yaml

@@ -15,6 +15,9 @@ article:
   views:
     one: "{{ .Count }} view"
     other: "{{ .Count }} views"
+  likes:
+    one: "{{ .Count }} like"
+    other: "{{ .Count }} likes"
 
 author:
   byline_title: "Author"

layouts/_default/single.html

@@ -23,6 +23,9 @@
         {{ .Content | emojify }}
       </div>
       <script>
+
+        var liked_article = false
+
         if (typeof auth !== 'undefined') {
           var oid = "views_{{ .Path }}"
           var id = oid ? oid.replaceAll("/", "-") : oid
@@ -52,6 +55,81 @@
                 console.error(errorCode, errorMessage)
               });
           }
+
+          var oid_likes = "likes_{{ .Path }}"
+          var id_likes = oid_likes ? oid_likes.replaceAll("/", "-") : oid_likes
+
+          var liked = localStorage.getItem(id_likes);
+
+          if (liked) {
+            liked_article = true
+            document.querySelectorAll("button[id='likes_button']")[0].innerText = "Remove Like"
+          }
+
+        }
+
+        function like_article(id_likes) {
+          console.log("add")
+          liked_article = true
+          localStorage.setItem(id_likes, true);
+          document.querySelectorAll("button[id='likes_button']")[0].innerText = "Remove Like"
+          auth.signInAnonymously()
+            .then(() => {
+              var docRef = db.collection('likes').doc(id_likes)
+              docRef.get().then((doc) => {
+                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) {
+          console.log("remove")
+          liked_article = false
+          localStorage.setItem(id_likes, false);
+          document.querySelectorAll("button[id='likes_button']")[0].innerText = "Like"
+          auth.signInAnonymously()
+            .then(() => {
+              var docRef = db.collection('likes').doc(id_likes)
+              docRef.get().then((doc) => {
+                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 oid_likes = "likes_{{ .Path }}"
+          var id_likes = oid_likes ? oid_likes.replaceAll("/", "-") : oid_likes
+          if (!liked_article) {
+            like_article(id_likes)
+          } else {
+            remove_like_article(id_likes)
+          }
         }
       </script>
   </section>

layouts/partials/article-meta.html

@@ -28,10 +28,18 @@
     {{ $meta.Add "partials" (slice (partial "meta/reading-time.html" .)) }}
   {{ end }}
 
-  {{ if (.Params.showViews | default (.Site.Params.article.showViews | default true)) }}
+  {{ if (.Params.showViews | default (.Site.Params.article.showViews | default false)) }}
     {{ $meta.Add "partials" (slice (partial "meta/views.html" .)) }}
   {{ end }}
 
+  {{ if (.Params.showLikes | default (.Site.Params.article.showLikes | default false)) }}
+    {{ $meta.Add "partials" (slice (partial "meta/likes.html" .)) }}
+  {{ end }}
+
+  {{ if and (eq $scope "single") (.Params.showLikes | default (.Site.Params.article.showLikes | default false)) }}
+    {{ $meta.Add "partials" (slice (partial "meta/likes_button.html" .)) }}
+  {{ end }}
+
   {{ if and (eq $scope "single") (.Params.showEdit | default (.Site.Params.article.showEdit | default false)) }}
     {{ $meta.Add "partials" (slice (partial "meta/edit.html" .)) }}
   {{ end }}

layouts/partials/meta/likes.html

@@ -0,0 +1,4 @@
+<span>
+    <span id="likes_{{ .Path }}" title="likes">{{- i18n "article.likes" 0 | markdownify | emojify -}}</span> 
+</span>
+{{- /* Trim EOF */ -}}

layouts/partials/meta/likes_button.html

@@ -0,0 +1,6 @@
+<span>
+    <button id="likes_button" class="border rounded px-3" onclick="process_article()">
+        Like
+    </button>
+</span>
+{{- /* Trim EOF */ -}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hugo-blowfish-theme",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Blowfish theme for Hugo",
   "scripts": {
     "preinstall": "rimraf assets/vendor",