doc: modernize site + dark theme

- remove the default ascii doctor theme
- add dark theme
- use atom-one-dark as highlight
- fix #3859

Author: jknack

docs/asciidoc/docinfo-footer.html

@@ -1,16 +1,46 @@
+<button id="theme-toggle" class="theme-toggle" aria-label="Toggle Dark Mode">
+  <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18.75a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zM6.166 18.894a.75.75 0 01-1.06-1.06l1.59-1.591a.75.75 0 111.061 1.06l-1.59 1.591zM2.25 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3a.75.75 0 01-.75-.75zM5.106 6.166a.75.75 0 011.06-1.06l1.591 1.59a.75.75 0 11-1.06 1.061l-1.591-1.59z"/></svg>
+  <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd"/></svg>
+</button>
+
 <script src="/js/clipboard.min.js"></script>
 <script src="/js/toc.js"></script>
 
 <script>
-  // Replacing $(function() { ... }) with native DOMContentLoaded
   document.addEventListener('DOMContentLoaded', () => {
-    /** Tabs: */
+
+    /** 1. Theme Switcher Logic */
+    const themeToggle = document.getElementById('theme-toggle');
+    const htmlElement = document.documentElement;
+    const hljsThemeLink = document.getElementById('hljs-theme'); // Grab the CSS link
+
+    if (themeToggle) {
+      themeToggle.addEventListener('click', () => {
+        if (htmlElement.getAttribute('data-theme') === 'dark') {
+          // Switch to Light Mode
+          htmlElement.removeAttribute('data-theme');
+          localStorage.setItem('jooby-theme', 'light');
+
+          // Switch code block to Agate
+          if (hljsThemeLink) hljsThemeLink.href = 'js/styles/agate.min.css';
+
+        } else {
+          // Switch to Dark Mode
+          htmlElement.setAttribute('data-theme', 'dark');
+          localStorage.setItem('jooby-theme', 'dark');
+
+          // Switch code block to Atom One Dark
+          if (hljsThemeLink) hljsThemeLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css';
+        }
+      });
+    }
+
+    /** 2. Tabs Logic */
     const tabButtons = document.querySelectorAll('.primary .switch .switch--item');
     const contents = document.querySelectorAll('.primary .content');
 
     tabButtons.forEach(button => {
       button.addEventListener('click', function () {
-        // Extract option number (e.g., '1' from 'option-1')
         const match = this.className.match(/option-(\d+)/);
         if (!match) return;
         const option = match[1];
@@ -28,11 +58,24 @@
       });
     });
 
-    /** Clipboard.js Initialization */
-        // Note: Since you're already loading clipboard.min.js, we just use the native constructor
+    /** 3. Clipboard.js Initialization */
     const clipboard = new ClipboardJS('.clipboard');
     clipboard.on('success', (e) => {
       e.clearSelection();
+      const btn = e.trigger;
+      const originalHTML = btn.innerHTML;
+
+      // Temporarily change background and insert a checkmark SVG
+      btn.style.backgroundColor = '#10b981'; // Tailwind emerald-500
+      btn.style.borderColor = '#059669';
+      btn.innerHTML = `<svg fill="none" stroke="white" stroke-width="2.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>`;
+
+      // Revert back after 2 seconds
+      setTimeout(() => {
+        btn.style.backgroundColor = '';
+        btn.style.borderColor = '';
+        btn.innerHTML = originalHTML;
+      }, 2000);
     });
   });
 </script>

docs/asciidoc/docinfo.html

@@ -1,109 +1,9 @@
-<link rel="stylesheet" href="/js/styles/toc.css">
-<style>
-  /** Tabs */
-  .hidden {
-    display: none;
-  }
-
-  .switch {
-    display: inline-block;
-  }
-
-  .switch--item {
-    padding: 5px 10px;
-    color: #fff;
-    display: inline-block;
-    cursor: pointer;
-    background-color: #333;
-    border-left: 1px solid #ffa;
-  }
-
-  .switch--item:not(:first-child) {
-  }
-
-  .switch--item:last-child {
-    border-radius: 0 5px 0 0;
-  }
-
-  .switch--item.selected {
-    color: #ffa;
-    border-bottom: 1px solid #ffa;
-  }
-
-  .clipboard {
-    position: absolute;
-    bottom: .1rem;
-    right: .1rem;
-    display: inline-block;
-    padding: 4px 8px;
-    font-size: 13px;
-    font-weight: 700;
-    line-height: 20px;
-    color: #333;
-    white-space: nowrap;
-    vertical-align: middle;
-    cursor: pointer;
-    background-color: #eee;
-    background-image: linear-gradient(#fcfcfc, #eee);
-    border: 1px solid #d5d5d5;
-    border-radius: 3px;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-appearance: none
-  }
-
-  .clipboard i {
-    font-style: normal;
-    font-weight: 500;
-    opacity: .6
-  }
-
-  .clipboard .octicon {
-    vertical-align: text-top
-  }
-
-  .clipboard .counter {
-    text-shadow: none;
-    background-color: #e5e5e5
-  }
-
-  .clipboard:focus {
-    text-decoration: none;
-    border-color: #51a7e8;
-    outline: none;
-    box-shadow: 0 0 5px rgba(81, 167, 232, .5)
-  }
-
-  .clipboard:focus:hover, .clipboard.selected:focus {
-    border-color: #51a7e8
-  }
-
-  .clipboard:hover, .clipboard:active, .clipboard.zeroclipboard-is-hover, .clipboard.zeroclipboard-is-active {
-    text-decoration: none;
-    background-color: #ddd;
-    background-image: linear-gradient(#eee, #ddd);
-    border-color: #ccc
-  }
-
-  .clipboard:active, .clipboard.selected, .clipboard.zeroclipboard-is-active {
-    background-color: #dcdcdc;
-    background-image: none;
-    border-color: #b5b5b5;
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15)
-  }
-
-  .clipboard.selected:hover {
-    background-color: #cfcfcf
-  }
-
-  .clipboard:disabled, .clipboard:disabled:hover, .clipboard.disabled, .clipboard.disabled:hover {
-    color: rgba(102, 102, 102, .5);
-    cursor: default;
-    background-color: rgba(229, 229, 229, .5);
-    background-image: none;
-    border-color: rgba(197, 197, 197, .5);
-    box-shadow: none
-  }
-</style>
+<script>
+  // This MUST be in the <head>. It runs before the body is rendered, preventing the white flash.
+  (function() {
+    const savedTheme = localStorage.getItem('jooby-theme');
+    if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    }
+  })();
+</script>