Publication page tags support

assets/sass/pages/_publication.scss

@@ -39,6 +39,9 @@
     a {
       @include themify($themes) {
         color: themed('title-color');
+        @include on-event {
+          color: themed('link-hover');
+        }
       }
     }
   }
@@ -59,7 +62,7 @@
   }
 
   &__btn {
-    padding: 0 0.25rem;
+    padding: 0 0.4rem;
     border-radius: 0.2rem;
     
     @include themify($themes) {
@@ -71,6 +74,32 @@
     }
   }
 
+  &__metas {
+    margin-top: 0.25rem;
+
+    @include flexbox();
+    @include flex-wrap(wrap);
+  }
+
+  &__tags {
+    display: inline-block;
+    list-style-type: none;
+    z-index: z('card-outter');
+
+    @include flexbox();
+    @include align-items(center);
+  }
+
+  &__tag {
+    padding: 0 0.25rem;
+    @include themify($themes) {
+      color: themed('link') !important;
+      @include on-event {
+        color: themed('link-hover') !important;
+      }
+    }
+  }
+
   &__box {
     width: 100%;
     height: auto;
@@ -128,14 +157,14 @@
       }
 
       &[data-dir="ltr"] {
-        a {
+        a:not(.pub__tag) {
             &:first-child {
             margin-right: 1rem;
           }
         }
       }
       &[data-dir="rtl"] {
-        a {
+        a:not(.pub__tag) {
             &:first-child {
             margin-left: 1rem;
           }

assets/sass/themes/_hacker.scss

@@ -1,8 +1,8 @@
 $hacker: (
     footer-background-color: #252526,
-    footer-color: #C7BA00,
+    footer-color: #A1AD64,
     link: #E08C48,
-    link-hover: #E08C48,
+    link-hover: #C7BA00,
     title-color: #A1AD64,
     meta-color: #CDF5CC,
     body-color: #1FFF2A,

layouts/_default/list.searchindex.json

@@ -9,7 +9,7 @@
   {{ else }}
     {{ $paginator := .Paginate (where .Pages "Type" .Type) ($.Param "pubPaginate") }}
     {{- range $index, $element := $paginator.Pages -}}
-      {{- $.Scratch.Add "searchindex" (dict "id" $index "title" $element.Title "shorttitle" $element.Params.shorttitle "booktitle" $element.Params.booktitle "uri" $element.Permalink "tags" $element.Params.tags "authors" $element.Params.authors "abstract" $element.Params.abstract "ENTRYTYPE" $element.Params.ENTRYTYPE "publication" $element.Params.publication "publishDate" $element.Params.publishDate) -}}
+      {{- $.Scratch.Add "searchindex" (dict "id" $index "title" $element.Title "shorttitle" $element.Params.shorttitle "booktitle" $element.Params.booktitle "uri" $element.Permalink "tags" $element.Params.tags "authors" $element.Params.authors "abstract" $element.Params.abstract "ENTRYTYPE" $element.Params.ENTRYTYPE "publication" $element.Params.publication "publishDate" $element.Params.publishDate "tags" $element.Params.tags) -}}
     {{- end -}}
   {{ end }}
 

layouts/partials/body/tags.html

@@ -1,14 +1,11 @@
+{{ $taxo := "tags" }}
 <div class="single__tags caption">
-{{ range $index, $value := .Params.Tags }}
+{{ range $index, $value := .Param $taxo }}
   {{ if and (eq $index 0) (ne (len $value) 0) }}
     🏷️
   {{ end }}
-  {{ if $value }}
+  {{ with $.Site.GetPage (printf "/%s/%s" $taxo ($value | urlize)) }}
-  <li>
+    <li><a href="{{ .Permalink }}" class="single__tag" title="{{ $value }}">#{{ $value }}</a></li>
-    <a href="{{ "/tags/" | relLangURL }}{{ $value | urlize }}" class="single__tag" title="{{ $value }}">
-      #{{ $value }}
-    </a>
-  </li>
   {{ end }}
 {{ end }}
 </div>

layouts/partials/publication/pub-list.html

@@ -17,8 +17,9 @@
         {{ end }}
       </a>
       {{ if not .IsNode }}
-        <div>
+        <div class="pub__metas">
           {{ partial "publication/pub-meta" . }}
+          {{ partial "publication/pub-tags" . }}
         </div>
         <div class="pub__summary">
           {{ .Params.abstract }}

layouts/partials/publication/pub-overview.html

@@ -20,6 +20,7 @@
                   <a href="{{ .FirstSection.Permalink }}/{{ .Params.ENTRYTYPE }}">
                     🎯 {{ .Params.ENTRYTYPE }}
                   </a>
+                  {{ partial "publication/pub-tags" . }}
                   {{ with .Params.links }}
                     {{ range . }}
                       <a href="{{ .link }}" class="pub__btn" target="_blank" rel="noreferrer">

layouts/partials/publication/pub-tags.html

@@ -0,0 +1,13 @@
+{{ $taxo := "tags" }}
+<ul id="{{ $taxo }}" class="pub__tags caption">
+  {{ range $index, $value := .Param $taxo }}
+    {{ if and (eq $index 0) (ne (len $value) 0) }}
+    &nbsp;🏷️
+    {{ end }}
+
+    {{ $name := . }}
+    {{ with $.Site.GetPage (printf "/%s/%s" $taxo ($name | urlize)) }}
+      <li><a href="{{ .Permalink }}" class="pub__tag">#{{ $name }}</a></li>
+    {{ end }}
+  {{ end }}
+</ul>

layouts/partials/script/pub-list-script.html

@@ -2,12 +2,18 @@
 <script defer src="{{ $shave.RelPermalink }}"></script>
 {{ $fuse := resources.Get "js/fuse.min.js" | resources.Fingerprint }}
 <script defer src="{{ $fuse.RelPermalink }}"></script>
+{{ $masonry := resources.Get "js/masonry.pkgd.min.js" | resources.Fingerprint }}
+<script defer src="{{ $masonry.RelPermalink }}"></script>
+{{ $imagesloaded := resources.Get "js/imagesloaded.pkgd.min.js" | resources.Fingerprint }}
+<script defer src="{{ $imagesloaded.RelPermalink }}"></script>
 
 <script>
   {{ $enableSearchHighlight := ($.Param "enableSearchHighlight") }}
   var enableSearchHighlight = JSON.parse({{ $enableSearchHighlight | jsonify }});
   {{ $isFirstSection := eq .Permalink .FirstSection.Permalink }}
   var isFirstSection = JSON.parse({{ $isFirstSection | jsonify }});
+  {{ $tagsBaseURL := ("/tags/" | relLangURL) }}
+  var tagsBaseURL = JSON.parse({{ $tagsBaseURL | jsonify }});
   
   document.addEventListener('DOMContentLoaded', function () {
     var originHtmlText = JSON.stringify(document.querySelector('.pub__ul').innerHTML);
@@ -22,22 +28,24 @@
       var li = document.createElement('li');
       li.className = 'pub__item';
 
-      var a = document.createElement('a');
+      var titleLink = document.createElement('a');
-      a.innerHTML = obj.title;
+      titleLink.innerHTML = obj.title;
-      a.setAttribute('href', obj.permalink);
+      titleLink.setAttribute('href', obj.uri);
+
       if (obj.booktitle) {
         var span = document.createElement('span');
         span.className = 'p2';
         span.innerText = ' - ' + obj.booktitle;
-        a.appendChild(span);
+        titleLink.appendChild(span);
       } else if (obj.shorttitle) {
         var span = document.createElement('span');
         span.className = 'p2';
         span.innerText = ' - ' + obj.shorttitle;
-        a.appendChild(span);
+        titleLink.appendChild(span);
       }
 
       var metaDiv = document.createElement('div');
+      metaDiv.setAttribute('class', 'pub__metas');
       if (obj.publishDate) {
         var dateSpan = document.createElement('span');
         dateSpan.className = 'caption pub__meta';
@@ -66,15 +74,37 @@
         metaDiv.appendChild(typeSpan);
       }
 
+      var tagsUl = null;
+      if (obj.tags && obj.tags.length) {
+        tagsUl = document.createElement('ul');
+        tagsUl.setAttribute('class', 'pub__tags caption');
+        tagsUl.innerHTML = '&nbsp;🏷️';
+
+        for (var i = 0; i < obj.tags.length; i++) {
+          var tagLi = document.createElement('li');
+          var tagLink = document.createElement('a');
+
+          tagLink.setAttribute('href', tagsBaseURL + obj.tags[i]);
+          tagLink.setAttribute('class', 'pub__tag');
+          tagLink.innerText = "#" + obj.tags[i];
+
+          tagLi.appendChild(tagLink);
+          tagsUl.appendChild(tagLi);
+        }
+      }
+
       var descDiv = document.createElement('div');
       descDiv.className = 'pub__summary';
       if (obj.abstract) {
         descDiv.innerHTML = obj.abstract.substr(0, 300);
       }
       
-      li.appendChild(a);
+      li.appendChild(titleLink);
       li.appendChild(metaDiv);
       li.appendChild(descDiv);
+      if (tagsUl) {
+        metaDiv.appendChild(tagsUl);
+      }
       ulElem.appendChild(li);
     }
 
@@ -82,9 +112,9 @@
       var li = document.createElement('li');
       li.className = 'pub__item';
       
-      var a = document.createElement('a');
+      var titleLink = document.createElement('a');
-      a.innerHTML = obj.item.title;
+      titleLink.innerHTML = obj.item.title;
-      a.setAttribute('href', obj.item.uri);
+      titleLink.setAttribute('href', obj.item.uri);
 
       var descDiv = null;
       if (obj.item.abstract) {
@@ -93,29 +123,29 @@
         descDiv.className = 'pub__summary';
       }
       
-      var metaDiv = null;
-      
       if (obj.matches && obj.matches.length) {
         for (var i = 0; i < obj.matches.length; i++) {
-          a.innerHTML = obj.item.title;
+          titleLink.innerHTML = obj.item.title;
 
           if (obj.matches[i].key === 'title') {
-            a.innerHTML = generateHighlightedText(obj.item.title, obj.matches[i].indices);
+            titleLink.innerHTML = generateHighlightedText(obj.item.title, obj.matches[i].indices);
           }
 
           if (obj.item.booktitle) {
             var span = document.createElement('span');
             span.className = 'p2';
             span.innerHTML = ' - ' + obj.item.booktitle;
-            a.appendChild(span);
+            titleLink.appendChild(span);
           } else if (obj.item.shorttitle) {
             var span = document.createElement('span');
             span.className = 'p2';
             span.innerHTML = ' - ' + obj.item.shorttitle;
-            a.appendChild(span);
+            titleLink.appendChild(span);
           }
 
-          metaDiv = document.createElement('div');
+          var metaDiv = document.createElement('div');
+          metaDiv.setAttribute('class', 'pub__metas');
+
           if (obj.item.publishDate) {
             var dateSpan = document.createElement('span');
             dateSpan.className = 'caption pub__meta';
@@ -144,18 +174,41 @@
             metaDiv.appendChild(typeSpan);
           }
           
+          var tagsUl = null;
+          if (obj.item.tags && obj.item.tags.length) {
+            tagsUl = document.createElement('ul');
+            tagsUl.setAttribute('class', 'pub__tags caption');
+            tagsUl.innerHTML = '&nbsp;🏷️';
+
+            for (var j = 0; j < obj.item.tags.length; j++) {
+              var tagLi = document.createElement('li');
+              var tagLink = document.createElement('a');
+
+              tagLink.setAttribute('href', tagsBaseURL + obj.item.tags[j]);
+              tagLink.setAttribute('class', 'pub__tag');
+              tagLink.innerText = "#" + obj.item.tags[j];
+
+              tagLi.appendChild(tagLink);
+              tagsUl.appendChild(tagLi);
+            }
+          }
+
           if (obj.matches[i].key === 'abstract') {
             descDiv.innerHTML = generateHighlightedText(obj.matches[i].value, obj.matches[i].indices);
           }
         }
 
-        li.appendChild(a);
+        li.appendChild(titleLink);
         if (metaDiv) {
           li.appendChild(metaDiv);
         }
         if (descDiv) {
           li.appendChild(descDiv);
         }
+        if (tagsUl && metaDiv) {
+          metaDiv.appendChild(tagsUl);
+        }
+        
         ulElem.appendChild(li);
       }
     }
@@ -203,9 +256,24 @@
       newUl.setAttribute('class', 'pub__ul');
 
       if (!searchText) {
-        fuse ? fuse.list.forEach(function(item) {
+        if (isFirstSection) {
-          makeLi(newUl, item);
+          originUl.innerHTML = JSON.parse(originHtmlText);
-        }) : null;
+          var grid = document.querySelector('.pgrid');
+          var msnry = new Masonry(grid, {
+            itemSelector: '.pgrid-item',
+            columnWidth: '.pgrid-sizer',
+            percentPosition: true,
+          });
+          imagesLoaded(grid).on('progress', function () {
+            msnry.layout();
+          });
+          return null;
+        } else {
+          fuse ? fuse.list.forEach(function (item) {
+            makeLi(newUl, item);
+          }) : null;
+        }
+
         pubResult ? pubResult.setAttribute('data-display', 'none') : null;
         originUl ? originUl.setAttribute('data-display', 'block') : null;
       } else if (results) {
@@ -230,6 +298,15 @@
       if (!searchText) {
         if (isFirstSection) {
           originUl.innerHTML = JSON.parse(originHtmlText);
+          var grid = document.querySelector('.pgrid');
+          var msnry = new Masonry(grid, {
+            itemSelector: '.pgrid-item',
+            columnWidth: '.pgrid-sizer',
+            percentPosition: true,
+          });
+          imagesLoaded(grid).on('progress', function () {
+            msnry.layout();
+          });
           return null;
         } else {
           fuse ? fuse.list.forEach(function (item) {

layouts/partials/script/pub-overview-script.html

@@ -1,8 +1,3 @@
-{{ $masonry := resources.Get "js/masonry.pkgd.min.js" | resources.Fingerprint }}
-<script defer src="{{ $masonry.RelPermalink }}"></script>
-{{ $imagesloaded := resources.Get "js/imagesloaded.pkgd.min.js" | resources.Fingerprint }}
-<script defer src="{{ $imagesloaded.RelPermalink }}"></script>
-
 <script>
   window.onload = function () {
     // ========================= masonry =========================

layouts/publication/single.html

@@ -14,6 +14,7 @@
     {{ end }}
     <div class="single__meta">
       {{ partial "publication/pub-meta" . }}
+      {{ partial "publication/pub-tags" . }}
     </div>
     <div class="pub__links">
       {{ partial "publication/pub-links" . }}