✨ 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)
+        }
+    });
+})();