Merge pull request #1144 from nunocoracao/dev

🔖 v2.49.0

.github/workflows/pages.yml

@@ -51,7 +51,7 @@ jobs:
         run: |
           hugo --minify -s exampleSite --themesDir ../.. -d ../docs --baseURL https://nunocoracao.github.io/blowfish/
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
           path: ./docs
 
@@ -65,4 +65,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v3
+        uses: actions/deploy-pages@v4

.github/workflows/stale.yml

@@ -18,7 +18,7 @@ jobs:
       pull-requests: write
 
     steps:
-    - uses: actions/stale@v8
+    - uses: actions/stale@v9
       with:
         repo-token: ${{ secrets.GITHUB_TOKEN }}
         stale-issue-message: 'This issue will be closed since it has been stale for 60 days.'

.gitignore

@@ -29,3 +29,4 @@ node_modules
 ._*
 .Spotlight-V100
 .Trashes
+.idea

README.md

@@ -33,6 +33,7 @@ Blowfish is designed to be a powerful, lightweight theme for [Hugo](https://gohu
 - Multiple homepage layouts
 - Multiple authors
 - Series of articles
+- Zen mode for article reading
 - Flexible with any content types, taxonomies and menus
 - Header and footer menus
 - Nested menus & sub-navigation menu

assets/css/components/zen-mode.css

@@ -0,0 +1,16 @@
+#zen-mode-button {
+    cursor:pointer
+}
+
+.zen-mode {
+    position: relative;
+}
+
+body.zen-mode-enable {
+    #bmc-wbtn, .author {
+        display:none !important;
+    }
+}
+
+
+

assets/css/main.css

@@ -1,5 +1,7 @@
 /*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */
 
+@import 'components/zen-mode.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -111,6 +113,21 @@ body:has(#menu-controller:checked) {
   @apply absolute opacity-5 -z-10;
 }
 
+/* Fix long KaTeX equations on mobile (see https://katex.org/docs/issues.html#css-customization) */
+.katex-display { overflow: auto hidden }
+
+/* Fix long tables breaking out of article on mobile */
+table {
+    display: block;
+    overflow: auto;
+}
+
+/* Fix long inline code sections breaking out of article on mobile */
+code {
+    word-wrap: break-word;         /* All browsers since IE 5.5+ */
+    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
+}
+
 /* -- Chroma Highlight -- */
 /* Background */
 .prose .chroma {

assets/icons/edit.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M490.3 40.4C512.2 62.27 512.2 97.73 490.3 119.6L460.3 149.7L362.3 51.72L392.4 21.66C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7L339.7 74.34L437.7 172.3L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2L159.6 382.8C150.1 385.6 141.5 383.4 135 376.1C128.6 370.5 126.4 361 129.2 352.4L158.8 263.6C161.6 255.3 166.2 247.8 172.4 241.7V241.7zM192 63.1C209.7 63.1 224 78.33 224 95.1C224 113.7 209.7 127.1 192 127.1H96C78.33 127.1 64 142.3 64 159.1V416C64 433.7 78.33 448 96 448H352C369.7 448 384 433.7 384 416V319.1C384 302.3 398.3 287.1 416 287.1C433.7 287.1 448 302.3 448 319.1V416C448 469 405 512 352 512H96C42.98 512 0 469 0 416V159.1C0 106.1 42.98 63.1 96 63.1H192z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z"/></svg>

assets/icons/expand.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px">
+    <path fill="currentColor" d="M 12.980469 4 C 9.1204688 4 5.9804688 7.14 5.9804688 11 L 6 26 L 9.9804688 26 L 9.9804688 11 C 9.9804688 9.35 11.320469 8 12.980469 8 L 40.019531 8 C 41.679531 8 43.019531 9.35 43.019531 11 L 43.019531 39 C 43.019531 40.65 41.679531 42 40.019531 42 L 29 42 C 29 43.54 28.420938 44.94 27.460938 46 L 40.019531 46 C 43.879531 46 47.019531 42.86 47.019531 39 L 47.019531 11 C 47.019531 7.14 43.879531 4 40.019531 4 L 12.980469 4 z M 7 28 C 4.794 28 3 29.794 3 32 L 3 42 C 3 44.206 4.794 46 7 46 L 23 46 C 25.206 46 27 44.206 27 42 L 27 32 C 27 29.794 25.206 28 23 28 L 7 28 z M 7 32 L 23 32 L 23.001953 42 L 7 42 L 7 32 z"/>
+</svg>

assets/js/page.js

@@ -33,9 +33,9 @@ if (typeof auth !== 'undefined') {
 
     if (liked) {
         liked_page = true
-        document.querySelectorAll("span[id='likes_button_heart']")[0].style.display = ""
+        document.querySelectorAll("span[id='button_likes_heart']")[0].style.display = ""
-        document.querySelectorAll("span[id='likes_button_emtpty_heart']")[0].style.display = "none"
+        document.querySelectorAll("span[id='button_likes_emtpty_heart']")[0].style.display = "none"
-        document.querySelectorAll("span[id='likes_button_text']")[0].innerText = ""
+        document.querySelectorAll("span[id='button_likes_text']")[0].innerText = ""
     }
 
 }
@@ -47,9 +47,9 @@ function like_article(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='button_likes_heart']")[0].style.display = ""
-                document.querySelectorAll("span[id='likes_button_emtpty_heart']")[0].style.display = "none"
+                document.querySelectorAll("span[id='button_likes_emtpty_heart']")[0].style.display = "none"
-                document.querySelectorAll("span[id='likes_button_text']")[0].innerText = ""
+                document.querySelectorAll("span[id='button_likes_text']")[0].innerText = ""
                 if (doc.exists) {
                     db.collection('likes').doc(id_likes).update({
                         likes: firebase.firestore.FieldValue.increment(1)
@@ -75,9 +75,9 @@ function remove_like_article(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='button_likes_heart']")[0].style.display = "none"
-                document.querySelectorAll("span[id='likes_button_emtpty_heart']")[0].style.display = ""
+                document.querySelectorAll("span[id='button_likes_emtpty_heart']")[0].style.display = ""
-                document.querySelectorAll("span[id='likes_button_text']")[0].innerText = "\xa0Like"
+                document.querySelectorAll("span[id='button_likes_text']")[0].innerText = "\xa0Like"
                 if (doc.exists) {
                     db.collection('likes').doc(id_likes).update({
                         likes: firebase.firestore.FieldValue.increment(-1)

assets/js/process.js

@@ -8,6 +8,7 @@ if (typeof auth !== 'undefined') {
 
     function toggleLoaders(node){
         var classesString = node.className;
+        if(classesString == "") return
         var classes = classesString.split(" ");
         for(var i in classes){  
             node.classList.toggle(classes[i])
@@ -18,9 +19,11 @@ if (typeof auth !== 'undefined') {
         viewsCollection.doc(id).onSnapshot(doc => {
             var data = doc.data();
             if (data) {
-                toggleLoaders(node)
                 node.innerText = numberWithCommas(data.views)
+            } else {
+                node.innerText = 0
             }
+            toggleLoaders(node)
         })
     }
 
@@ -28,9 +31,12 @@ if (typeof auth !== 'undefined') {
         likesCollection.doc(id).onSnapshot(doc => {
             var data = doc.data();
             if (data) {
-                toggleLoaders(node)
                 node.innerText = numberWithCommas(data.likes)
+            } else {
+                node.innerText = 0
             }
+            toggleLoaders(node)
+
         })
     }
 

assets/js/search.js

@@ -63,6 +63,21 @@ document.addEventListener("keydown", function (event) {
       }
     }
   }
+
+  // Enter to get to results
+  if (event.key == "Enter") {
+    if (searchVisible && hasResults) {
+      event.preventDefault();
+      if (document.activeElement == input) {
+        first.focus();
+      } else {
+        document.activeElement.click();
+      }
+    }else{
+      event.preventDefault();
+    }
+  }
+
 });
 
 // Update search on each keypress

assets/js/shortcodes/gallery.js

@@ -0,0 +1,24 @@
+function _getDefaultPackeryOptions() {
+    return {
+        percentPosition: true,
+        gutter: 5,
+        resize: true
+    };
+}
+
+(function init() {
+    window.addEventListener("DOMContentLoaded", (event) => {
+        console.groupCollapsed('[DEBUG] Gallery feature enable');
+        let packeries = [];
+        let nodeGalleries = document.querySelectorAll('.gallery');
+
+        nodeGalleries.forEach(nodeGallery => {
+            // TODO : implement a reader of Packery configuration _getPackeryOptions; for example by reading data-attribute
+            let packery = new Packery(nodeGallery, _getDefaultPackeryOptions());
+            packeries.push(packery);
+        });
+
+        console.log("Galleries founded and initialized with packery", packeries);
+        console.groupEnd();
+    });
+})();

assets/js/zen-mode.js

@@ -0,0 +1,66 @@
+function _toogleZenMode(zendModeButton) {
+    // Nodes selection
+    const body = document.querySelector('body');
+    const tocRight = document.querySelector('.toc-right');
+    const tocInside = document.querySelector('.toc-inside');
+    const articleContent = document.querySelector('.article-content');
+    const header = document.querySelector('#single_header');
+
+
+    // Add semantic class into body tag
+    body.classList.toggle('zen-mode-enable');
+
+    // Show/Hide 'toc right' and 'toc inside'
+    tocRight.classList.toggle('lg:block');
+    tocInside.classList.toggle('lg:hidden');
+
+    // Change width of article content
+    articleContent.classList.toggle('max-w-fit');
+    articleContent.classList.toggle('max-w-prose');
+
+    // Read i18n title from data-attributes
+    const titleI18nDisable = zendModeButton.getAttribute('data-title-i18n-disable');
+    const titleI18nEnable = zendModeButton.getAttribute('data-title-i18n-enable');
+
+    if (body.classList.contains('zen-mode-enable')) {
+        // Persist configuration
+        //localStorage.setItem('blowfish-zen-mode-enabled', 'true');
+        
+        // Change title to enable
+        zendModeButton.setAttribute('title', titleI18nEnable)
+        // Auto-scroll to title article
+        window.scrollTo(window.scrollX, header.getBoundingClientRect().top - 90);
+    } else {
+        //localStorage.setItem('blowfish-zen-mode-enabled', 'false');
+        zendModeButton.setAttribute('title', titleI18nDisable);
+        document.querySelector('body').scrollIntoView();
+    }
+}
+
+function _registerZendModeButtonClick(zendModeButton) {
+    zendModeButton.addEventListener('click', function (event) {
+        event.preventDefault();
+
+        // Toggle zen-mode
+        _toogleZenMode(zendModeButton);
+    });
+}
+
+(function init() {
+    window.addEventListener("DOMContentLoaded", (event) => {
+        console.debug('[DEBUG] Zen-mode feature enable');
+
+        // Register click on 'zen-mode-button' node element
+        const zendModeButton = document.getElementById('zen-mode-button');
+        if(zendModeButton !== null && zendModeButton !== undefined) {
+            _registerZendModeButtonClick(zendModeButton);
+        }
+
+        // Initialize localstorage option 'blowfish-zen-mode-enabled' to false, if it does not exist, otherwise enable it.
+        //if (localStorage.getItem('blowfish-zen-mode-enabled') === null) {
+        //    localStorage.setItem('blowfish-zen-mode-enabled', 'false');
+        //} else if (localStorage.getItem('blowfish-zen-mode-enabled') === 'true') {
+        //    _toogleZenMode(zendModeButton)
+        //}
+    });
+})();

config.toml

@@ -2,4 +2,4 @@
   [module.hugoVersion]
     extended = true
     min = "0.87.0"
-    max = "0.121.0"
+    max = "0.121.1"

config/_default/params.toml

@@ -73,6 +73,7 @@ disableTextInHeader = false
   showAuthorsBadges = false
   showWordCount = true
   # sharingLinks = [ "linkedin", "twitter", "reddit", "pinterest", "facebook", "email", "whatsapp", "telegram"]
+  showZenMode = true
 
 [list]
   showHero = false

exampleSite/config/_default/params.toml

@@ -72,6 +72,7 @@ smartTOCHideUnfocusedChildren = false
   showAuthorsBadges = true 
   showWordCount = false
   sharingLinks = [ "linkedin", "twitter", "reddit", "whatsapp", "telegram", "pinterest", "facebook", "email"]
+  showZenMode = true
 
 [list]
   showHero = true

exampleSite/content/docs/configuration/index.md

@@ -232,6 +232,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `article.showWordCount`               | `false`   | Whether or not article word counts are displayed.                                                                                                                                                                                                                                                                      |
 | `article.showComments`                | `false`   | Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer.                                                                                                                                                                                                           |
 | `article.sharingLinks`                | _Not set_ | Which sharing links to display at the end of each article. When not provided, or set to `false` no links will be displayed.  Available values are: "linkedin", "twitter", "reddit", "pinterest", "facebook", "email", "whatsapp", and "telegram"                                                                       |
+| `article.showZenMode`                 | `true`    | Flag to activate Zen Mode reading feature for articles.                                                                                                                                                                                                                                                                |
 
 ### List
 

exampleSite/content/docs/shortcodes/index.md

@@ -377,6 +377,48 @@ Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}
 
 <br/><br/><br/>
 
+
+## Keyword
+
+
+The `keyword` component can be used to visually highlight certain important words or phrases, e.g. professional skills etc. The `keywordList` shortcode can be used to group together multiple `keyword` items. Each item can have the following properties.
+
+
+<!-- prettier-ignore-start -->
+| Parameter   | Description                                  |
+| ----------- | -------------------------------------------- |
+| `icon`      | Optional icon to be used in the keyword      |
+<!-- prettier-ignore-end -->
+
+The input is written in Markdown so you can format it however you please.
+
+**Example1 :**
+
+```md
+{{</* keyword */>}} Super skill {{</* /keyword */>}}
+```
+
+{{< keyword >}} *Standalone* skill {{< /keyword >}}
+
+**Example2 :**
+
+```md
+{{</* keywordList */>}}
+{{</* keyword icon="github" */>}} Lorem ipsum dolor. {{</* /keyword */>}}
+{{</* keyword icon="code" */>}} **Important** skill {{</* /keyword */>}}
+{{</* /keywordList */>}}
+
+{{</* keyword */>}} *Standalone* skill {{</* /keyword */>}}
+```
+
+{{< keywordList >}}
+{{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}}
+{{< keyword icon="code" >}} **Important** skill {{< /keyword >}}
+{{< /keywordList >}}
+{{< keyword >}} *Standalone* skill {{< /keyword >}}
+
+<br/><br/><br/>
+
 ## Lead
 
 `lead` is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the `lead` shortcode.
@@ -393,7 +435,7 @@ When life gives you lemons, make lemonade.
 When life gives you lemons, make lemonade.
 {{< /lead >}}
 
-<br/><br/><br/>
+<br/><br/><br/> 
 
 ## List
 
@@ -456,6 +498,31 @@ The `where` and `value` values are used in the following query `where .Site.Regu
 
 <br/><br/><br/>
 
+## Markdown Importer
+
+This shortcode allows you to import markdown files from external sources. This is useful for including content from other repositories or websites without having to copy and paste the content.
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                                             |
+| --------- | ------------------------------------------------------- |
+| `url`     | **Required** URL to an externally hosted markdown file. |
+
+
+<!-- prettier-ignore-end -->
+
+
+**Example:**
+
+```md
+{{</* mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" */>}}
+
+```
+
+{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}}
+
+
+<br/><br/>
+
 ## Mermaid
 
 `mermaid` allows you to draw detailed diagrams and visualisations using text. It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats.

exampleSite/content/samples/icons/index.md

@@ -37,6 +37,7 @@ The full list of built-in icons and their corresponding names can referenced bel
 | edit                 | {{< icon edit >}}                 |
 | email                | {{< icon email >}}                |
 | envelope             | {{< icon envelope >}}             |
+| expand               | {{< icon expand >}}               |
 | eye                  | {{< icon eye >}}                  |
 | facebook             | {{< icon facebook >}}             |
 | fire                 | {{< icon fire >}}                 |

exampleSite/content/users/alxhslm.github.io/index.md

@@ -0,0 +1,13 @@
+---
+                title: "alxhslm.github.io"
+                tags: [Personal Site]
+                externalUrl: "https://alxhslm.github.io/"
+                date: 9925-08-08
+                showDate: false
+                showAuthor: false
+                showReadingTime: false
+                showEdit: false
+                showLikes: false
+                showViews: false
+                layoutBackgroundHeaderSpace: false
+                
---

exampleSite/content/users/binarydigit.cafe/index.md

@@ -0,0 +1,13 @@
+---
+                title: "binarydigit.cafe"
+                tags: [Personal site]
+                externalUrl: "https://binarydigit.cafe/"
+                date: 9926-08-08
+                showDate: false
+                showAuthor: false
+                showReadingTime: false
+                showEdit: false
+                showLikes: false
+                showViews: false
+                layoutBackgroundHeaderSpace: false
+                
---

exampleSite/content/users/fm126.top/index.md

@@ -0,0 +1,13 @@
+---
+                title: "fm126.top"
+                tags: [Personal site,Blog]
+                externalUrl: "https://fm126.top/"
+                date: 9924-08-08
+                showDate: false
+                showAuthor: false
+                showReadingTime: false
+                showEdit: false
+                showLikes: false
+                showViews: false
+                layoutBackgroundHeaderSpace: false
+                
---

exampleSite/content/users/technicaldc.github.io/index.md

@@ -0,0 +1,13 @@
+---
+                title: "technicaldc.github.io"
+                tags: [Personal Site,Blog]
+                externalUrl: "https://technicaldc.github.io/"
+                date: 9927-08-08
+                showDate: false
+                showAuthor: false
+                showReadingTime: false
+                showEdit: false
+                showLikes: false
+                showViews: false
+                layoutBackgroundHeaderSpace: false
+                
---

exampleSite/content/users/users.json

@@ -504,5 +504,35 @@
       "Personal Site",
       "Blog"
     ]
+  },
+  {
+    "title": "technicaldc.github.io",
+    "url": "https://technicaldc.github.io/",
+    "tags": [
+      "Personal Site",
+      "Blog"
+    ]
+  },
+  {
+    "title": "binarydigit.cafe",
+    "url": "https://binarydigit.cafe/",
+    "tags": [
+      "Personal site"
+    ]
+  },
+  {
+    "title": "alxhslm.github.io",
+    "url": "https://alxhslm.github.io/",
+    "tags": [
+      "Personal Site"
+    ]
+  },
+  {
+    "title": "fm126.top",
+    "url": "https://fm126.top/",
+    "tags": [
+      "Personal site",
+      "Blog"
+    ]
   }
-]
+]

i18n/en.yaml

@@ -25,6 +25,9 @@ article:
   part: "Part"
   this_article: "This Article"
   related_articles: "Related"
+  zen_mode_title:
+    enable: "Enable zen mode"
+    disable: "Disable zen mode"
 
 author:
   byline_title: "Author"

i18n/fr.yaml

@@ -19,6 +19,9 @@ article:
   part: "Partie"
   this_article: "Cet article"
   related_articles: "Articles connexes"
+  zen_mode_title:
+    enable: "Activer le mode zen"
+    disable: "Désactiver le mode zen"
 
 author:
   byline_title: "Auteur"

layouts/_default/list.html

@@ -19,10 +19,12 @@
   <div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
     {{ partial "article-meta/list.html" (dict "context" . "scope" "single") }}
   </div>
+  {{ with .File }}
   <script>
-    var oid = "views_{{ .File.Path }}"
+    var oid = "views_{{ .Path }}"
-    var oid_likes = "likes_{{ .File.Path }}"
+    var oid_likes = "likes_{{ .Path }}"
   </script>
+  {{ end }}
   {{ $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>

layouts/_default/single.html

@@ -31,8 +31,8 @@
     {{ $showAuthor := 0 }}
 
     {{ if .Params.showAuthor | default (.Site.Params.article.showAuthor | default true) }}
-    {{ $showAuthor = 1 }}
+      {{ $showAuthor = 1 }}
-    {{ partial "author.html" . }}
+      {{ partial "author.html" . }}
     {{ end }}
 
     {{ if not (strings.HasSuffix $baseURL "/") }}
@@ -63,7 +63,7 @@
     
     {{ if or (and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in
     .TableOfContents "<ul")) (.Site.Params.article.showRelatedPosts | default false) }} <div
-      class="order-first sm:max-w-prose lg:ml-auto px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
+      class="order-first lg:ml-auto px-0 lg:order-last ltr:lg:pl-8 rtl:lg:pr-8">
       <div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky {{ if hasPrefix .Site.Params.header.layout "fixed" -}}
         lg:top-[140px]{{ else }}lg:top-10{{ end }}">
 
@@ -77,7 +77,7 @@
         
         {{ partial "series.html" . }}
 
-        <div class="max-w-prose mb-20">
+        <div class="article-content max-w-prose mb-20">
           {{ .Content | emojify }}
         </div>
                 
@@ -86,10 +86,12 @@
         {{ partial "related.html" . }}  
       </div>
      
+    {{ with .File }}
      <script>
-        var oid = "views_{{ .File.Path }}"
+        var oid = "views_{{ .Path }}"
-        var oid_likes = "likes_{{ .File.Path }}"
+        var oid_likes = "likes_{{ .Path }}"
       </script>
+      {{ end }}
       {{ $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>

layouts/partials/article-link/card-related.html

@@ -4,7 +4,7 @@
   {{ else }}
   <a href="{{ .RelPermalink }}" class="min-w-full">
     {{ end }}
-    <div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative backdrop-blur">
+    <div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
 
       {{- with $.Params.images -}}
       {{- range first 6 . }}

layouts/partials/article-link/card.html

@@ -4,7 +4,7 @@
   {{ else }}
   <a href="{{ .RelPermalink }}" class="min-w-full">
     {{ end }}
-    <div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative backdrop-blur">
+    <div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
 
       {{- with $.Params.images -}}
       {{- range first 6 . }}

layouts/partials/article-link/simple.html

@@ -2,7 +2,7 @@
 
 {{ $articleClasses := "flex flex-wrap article" }}
 {{ if .Site.Params.list.showCards }}
-{{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md backdrop-blur overflow-hidden") " " }}
+{{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }}
 {{ else }}
 {{ $articleClasses = delimit (slice $articleClasses "") " " }}
 {{ end }}

layouts/partials/article-meta/basic.html

@@ -4,8 +4,8 @@
 {{ $scope := default nil }}
 
 {{ if (reflect.IsMap . ) }}
-{{ $context = .context }}
+  {{ $context = .context }}
-{{ $scope = cond (not .scope) nil .scope }}
+  {{ $scope = cond (not .scope) nil .scope }}
 {{ end }}
 
 {{ with $context }}
@@ -13,37 +13,41 @@
 
 {{/* Gather partials for this context */}}
 {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
-{{ $meta.Add "partials" (slice (partial "meta/date.html" .Date)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/date.html" .Date)) }}
 {{ end }}
 
 {{ if and (.Params.showDateUpdated | default (.Site.Params.article.showDateUpdated | default false)) (ne (partial
 "functions/date.html" .Date) (partial "functions/date.html" .Lastmod)) }}
-{{ $meta.Add "partials" (slice (partial "meta/date-updated.html" .Lastmod)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/date-updated.html" .Lastmod)) }}
 {{ end }}
 
 {{ if and (.Params.showWordCount | default (.Site.Params.article.showWordCount | default false)) (ne .WordCount 0) }}
-{{ $meta.Add "partials" (slice (partial "meta/word-count.html" .)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/word-count.html" .)) }}
 {{ end }}
 
 {{ if and (.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true)) (ne .ReadingTime 0)
 }}
-{{ $meta.Add "partials" (slice (partial "meta/reading-time.html" .)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/reading-time.html" .)) }}
 {{ end }}
 
 {{ if and (not .Params.externalURL) (.Params.showViews | default (.Site.Params.article.showViews | default false)) }}
-{{ $meta.Add "partials" (slice (partial "meta/views.html" .)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/views.html" .)) }}
 {{ end }}
 
 {{ if and (not .Params.externalURL) (.Params.showLikes | default (.Site.Params.article.showLikes | default false)) }}
-{{ $meta.Add "partials" (slice (partial "meta/likes.html" .)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/likes.html" .)) }}
 {{ end }}
 
 {{ if and (eq $scope "single") (not .Params.externalURL) (.Params.showLikes | default (.Site.Params.article.showLikes | default false)) }}
-{{ $meta.Add "partials" (slice (partial "meta/likes_button.html" .)) }}
+  {{ $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" .)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/edit.html" .)) }}
+{{ end }}
+
+{{ if and (eq $scope "single") (.Params.showZenMode | default (.Site.Params.article.showZenMode | default false)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/zen-mode.html" .)) }}
 {{ end }}
 
 

layouts/partials/author-extra.html

@@ -1,5 +1,5 @@
 {{ $disableImageOptimization := .Site.Params.disableImageOptimization | default false }}
-<div class="flex mt-4">
+<div class="flex author author-extra mt-4">
   {{ with .data.image }}
   {{ $authorImage := resources.Get . }}
   {{ if $authorImage }}

layouts/partials/author.html

@@ -1,5 +1,5 @@
 {{ $disableImageOptimization := .Site.Params.disableImageOptimization | default false }}
-<div class="flex">
+<div class="flex author">
   {{ with .Site.Author.image }}
   {{ $authorImage := resources.Get . }}
   {{ if $authorImage }}

layouts/partials/meta/likes_button.html

@@ -1,10 +1,10 @@
 <span>
-    <button id="likes_button"
+    <button id="button_likes"
         class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"
         onclick="process_article()">
-        <span id="likes_button_heart" style="display:none" class="inline-block align-text-bottom">{{ partial "icon.html" "heart" }} </span>
+        <span id="button_likes_heart" style="display:none" class="inline-block align-text-bottom">{{ partial "icon.html" "heart" }} </span>
-        <span id="likes_button_emtpty_heart" class="inline-block align-text-bottom">{{ partial "icon.html" "heart-empty" }}</span>
+        <span id="button_likes_emtpty_heart" class="inline-block align-text-bottom">{{ partial "icon.html" "heart-empty" }}</span>
-        <span id="likes_button_text">&nbsp;Like</span>
+        <span id="button_likes_text">&nbsp;Like</span>
     </button>
 </span>
 {{- /* Trim EOF */ -}}

layouts/partials/meta/zen-mode.html

@@ -0,0 +1,14 @@
+{{ $jsZenMode := resources.Get "js/zen-mode.js" }}
+{{ $jsZenMode = $jsZenMode | resources.Minify | resources.Fingerprint "sha512" }}
+
+<script type="text/javascript" src="{{ $jsZenMode.RelPermalink }}" integrity="{{ $jsZenMode.Data.Integrity }}"></script>
+
+<span class="mb-[2px]">
+    <span id="zen-mode-button"
+          class="text-lg hover:text-primary-500"
+          title="{{ i18n "article.zen_mode_title.enable" }}"
+          data-title-i18n-disable="{{ i18n "article.zen_mode_title.enable" }}"
+          data-title-i18n-enable="{{ i18n "article.zen_mode_title.disable" }}">
+        <span class="inline-block align-text-bottom">{{ partial "icon.html" "expand" }}</span>
+    </span>
+</span>

layouts/partials/scroll-to-top.html

@@ -1,6 +1,6 @@
 <div id="top-scroller" class="pointer-events-none absolute top-[110vh] bottom-0 w-12 ltr:right-0 rtl:left-0">
   <a href="#the-top"
-    class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 mb-16 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
+    class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 mb-16 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
     aria-label="{{ i18n "nav.scroll_to_top_title" }}" title="{{ i18n "nav.scroll_to_top_title" }}">
     &uarr;
   </a>

layouts/partials/term-link/card.html

@@ -1,6 +1,6 @@
 <a href="{{ .Page.RelPermalink }}" class="min-w-full">
   <div
-    class="border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative backdrop-blur">
+    class="border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
 
     {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
 
@@ -32,7 +32,7 @@
     <span class="absolute bottom-0 right-0 m-2">
       <span class="flex">
         <span
-          class="rounded-md border backdrop-blur border-primary-400 px-1 py-[1px] text-xl font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"
+          class="rounded-md border border-primary-400 px-1 py-[1px] text-xl font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"
         >
         {{ .Count }}
         </span>

layouts/partials/toc.html

@@ -1,4 +1,4 @@
-<details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block">
+<details open class="toc-right mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block">
   <summary
     class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
     {{ i18n "article.table_of_contents" }}
@@ -8,7 +8,7 @@
     {{ .TableOfContents | emojify }}
   </div>
 </details>
-<details class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 lg:hidden">
+<details class="toc-inside mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 lg:hidden">
   <summary
     class="py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
     {{ i18n "article.table_of_contents" }}

layouts/partials/translations.html

@@ -6,7 +6,7 @@
     </a>
   </div>
   <div class="absolute menuhide">
-    <div class="pt-2 p-5 mt-2 rounded-xl backdrop-blur shadow-2xl">
+    <div class="pt-2 p-5 mt-2 rounded-xl shadow-2xl">
       <div class="flex flex-col space-y-3">
         {{ range .AllTranslations }}
         <a href="{{ .RelPermalink }}" class="flex items-center">

layouts/partials/vendor.html

@@ -48,8 +48,12 @@
 
 {{/* Packery */}}
 {{ if .Page.HasShortcode "gallery" }}
-{{ $packeryLib := resources.Get "lib/packery/packery.pkgd.min.js" }}
+    {{ $packeryLib := resources.Get "lib/packery/packery.pkgd.min.js" }}
-<script defer src="{{ $packeryLib.RelPermalink }}" integrity="{{ $packeryLib.Data.Integrity }}"></script>
+    <script defer src="{{ $packeryLib.RelPermalink }}" integrity="{{ $packeryLib.Data.Integrity }}"></script>
+
+    {{ $jsShortcodeGallery := resources.Get "js/shortcodes/gallery.js" }}
+    {{ $jsShortcodeGallery = $jsShortcodeGallery | resources.Minify | resources.Fingerprint "sha512" }}
+    <script type="text/javascript" src="{{ $jsShortcodeGallery.RelPermalink }}" integrity="{{ $jsShortcodeGallery.Data.Integrity }}"></script>
 {{ end }}
 
 {{/* tw-elements */}}

layouts/shortcodes/gallery.html

@@ -1,15 +1,6 @@
-{{ $id := delimit (slice "gallery" .Ordinal now.UnixNano) "-" }}
+{{ $random := delimit (shuffle (seq 1 9)) "" }}
+{{ $id := delimit (slice "gallery" $random now.UnixNano) "-" }}
 
-<div id="{{ $id }}">
+<div id="{{ $id }}" class="gallery">
   {{ .Inner }}
-</div>
+</div>
-
-<script>
-  $(window).on("load", function () {
-    $('#{{ $id }}').packery({
-      percentPosition: true,
-      gutter: 5,
-      resize: true
-    });
-  })
-</script>

layouts/shortcodes/github.html

@@ -6,7 +6,7 @@
 
 <a id="{{ $id }}" target="_blank" href="{{ .html_url }}" class="cursor-pointer">
   <div
-    class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md backdrop-blur shadow-2xl">
+    class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
 
     <div class="flex items-center">
       <span class="text-2xl text-neutral-800 dark:text-neutral" style="margin-right:10px;">

layouts/shortcodes/gitlab.html

@@ -5,7 +5,7 @@
 {{- with $gitLabData -}}
 
 <a target="_blank" href="{{ .html_url }}" class="cursor-pointer">
-  <div class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md backdrop-blur shadow-2xl">
+  <div class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
 
     <div class="flex items-center">
       <span class="text-2xl text-neutral-800 dark:text-neutral" style="margin-right:10px;">

layouts/shortcodes/keyword.html

@@ -0,0 +1,13 @@
+{{ $icon := .Get "icon"}}
+<div class="flex mt-2">
+<span
+  class="rounded-full bg-primary-500 dark:bg-primary-400 text-neutral-50 dark:text-neutral-800 px-1.5 py-[1px] text-xs font-normal"
+>
+  <span class="flex flex-row items-center">
+    {{if $icon}}
+    <span class="mr-1">{{ partial "icon" $icon }}</span>
+    {{ end }}
+    <span> {{- .Inner | markdownify -}} </span>
+  </span>
+</span>
+</div>

layouts/shortcodes/keywordList.html

@@ -0,0 +1 @@
+<div class="flex flex-row flex-wrap items-center space-x-2">{{- .Inner -}}</div>

layouts/shortcodes/mdimporter.html

@@ -0,0 +1,6 @@
+{{ $url := .Get "url"}}
+{{ with resources.GetRemote (printf $url) }}
+{{ .Content | markdownify }}
+{{ else }}
+{{ errorf "Mardown Importer Shortcode - Unable to get remote resource" . }}
+{{ end }}

layouts/shortcodes/timelineItem.html

@@ -8,7 +8,7 @@
     <div class="bg-primary-500 dark:bg-primary-300 text-neutral-50 dark:text-neutral-700 min-w-[30px] h-8 text-2xl flex items-center justify-center rounded-full -ml-12 mt-5">
       {{ partial "icon" $icon }}
     </div>
-    <div class="block p-6 rounded-lg shadow-2xl min-w-full ml-6 mb-10 backdrop-blur">
+    <div class="block p-6 rounded-lg shadow-2xl min-w-full ml-6 mb-10 break-words">
       <div class="flex justify-between">
         {{ if $header }}
         <h2 class="mt-0">
@@ -29,4 +29,4 @@
       <p class="text-gray-700 mb-6">{{- .Inner -}}</p>
     </div>
   </div>
-</li>
+</li>