✨ Zen-mode feature

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;

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/zen-mode.js

@@ -0,0 +1,65 @@
+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/_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

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/single.html

@@ -31,8 +31,8 @@
     {{ $showAuthor := 0 }}
 
     {{ if .Params.showAuthor | default (.Site.Params.article.showAuthor | default true) }}
-    {{ $showAuthor = 1 }}
-    {{ partial "author.html" . }}
+      {{ $showAuthor = 1 }}
+      {{ 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>
                 

layouts/partials/article-meta/basic.html

@@ -4,8 +4,8 @@
 {{ $scope := default nil }}
 
 {{ if (reflect.IsMap . ) }}
-{{ $context = .context }}
-{{ $scope = cond (not .scope) nil .scope }}
+  {{ $context = .context }}
+  {{ $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/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/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" }}