frontend: add selfhosting view toggle

Preliminary commit to cater some feedback about its design and
underlying JS code; will implement actual content modification later.

Signed-off-by: Luca Zeuch <[email protected]>

Author: l-zeuch

assets/js/custom.js

@@ -1 +1,22 @@
 // Put your custom JS code here
+
+// self-hosting view.
+const getSelfhost = () => {
+  return localStorage.getItem('selfhost') || 'no';
+};
+
+const setSelfhost = (selfhost) => {
+  localStorage.setItem('selfhost', selfhost);
+  document.documentElement.setAttribute('data-selfhost', selfhost);
+};
+
+setSelfhost(getSelfhost());
+
+window.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('[data-selfhost-value]').forEach((element) => {
+    element.addEventListener('click', (event) => {
+      const selfhost = element.getAttribute('data-selfhost-value');
+      setSelfhost(selfhost);
+    });
+  }
+)});

assets/scss/common/_custom.scss

@@ -147,6 +147,28 @@ pre.shiki {
   opacity: var(--ec-frm-inlBtnBgActOpa);
 }
 
+// show active server if self-hosting view enabled
+html[data-selfhost="yes"] {
+  .icon-tabler-server {
+    display: block;
+  }
+
+  .icon-tabler-server-off {
+    display: none;
+  }
+}
+
+// hide active server if self-hosting view disabled
+html[data-selfhost="no"] {
+  .icon-tabler-server {
+    display: none;
+  }
+
+  .icon-tabler-server-off {
+    display: block;
+  }
+}
+
 @media (hover: hover) {
   .highlight .copy button {
       opacity: 0;

config/postcss.config.js

@@ -26,6 +26,7 @@ module.exports = {
 				'data-global-alert',
 				'data-pane', // tabs.js
 				'data-popper-placement',
+				'data-selfhost',
 				'data-sizes',
 				'data-toggle-tab', // tabs.js
 				'id',

layouts/partials/header/header.html

@@ -272,6 +272,24 @@ <h5 class="offcanvas-title fw-bold" id="offcanvasNavMainLabel">{{ .Site.Params.T
         </ul>
         {{ end -}}
 
+        <!-- self-hosting view -->
+        <button id="selfHosting" class="btn btn-link mx-auto nav-link p-0 ms-lg-2 me-lg-1" type="button" aria-label="Toggle self-hosting view">
+          <svg data-selfhost-value="yes" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-server-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <path d="M12 12h-6a3 3 0 0 1 -3 -3v-2c0 -1.083 .574 -2.033 1.435 -2.56m3.565 -.44h10a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-2" />
+            <path d="M16 12h2a3 3 0 0 1 3 3v2m-1.448 2.568a2.986 2.986 0 0 1 -1.552 .432h-12a3 3 0 0 1 -3 -3v-2a3 3 0 0 1 3 -3h6" />
+            <path d="M7 8v.01" />
+            <path d="M7 16v.01" />
+            <path d="M3 3l18 18" />
+          </svg>
+          <svg data-selfhost-value="no" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-server" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <path d="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z" />
+            <path d="M3 12m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z" />
+            <path d="M7 8l0 .01" />
+            <path d="M7 16l0 .01" />
+          </svg>
+        </button>
 
         <!-- Navbar button mobile -->
         {{ if site.Params.doks.navBarButton -}}