From cd7f1e737ab2d95fdc5b1e2c7fcd9416392fd704 Mon Sep 17 00:00:00 2001
From: Fabien POLLY <fabien-polly@hotmail.com>
Date: Tue, 9 Dec 2025 11:30:19 +0100
Subject: [PATCH] feat: Add .nojekyll, meta description, scrollbar styling, and
 refine UI/UX with CDN comments, print styles, and image fallbacks.

---
 .nojekyll  |   0
 index.html | 660 ++++++++++++++++++++++++++---------------------------
 2 files changed, 319 insertions(+), 341 deletions(-)
 create mode 100644 .nojekyll

diff --git a/.nojekyll b/.nojekyll
new file mode 100644
index 0000000..e69de29
diff --git a/index.html b/index.html
index ac4636c..c45a20f 100644
--- a/index.html
+++ b/index.html
@@ -5,16 +5,26 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>BJORN // WIKI NODE</title>
+    <meta name="description" content="Official Documentation and Wiki for BJORN Cyber Viking">
 
+    <!-- Tailwind CSS (CDN) -->
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/lucide/0.263.1/lucide.min.js"></script>
 
+    <!-- Icons: Lucide -->
+    <script src="https://unpkg.com/lucide@latest"></script>
+
+    <!-- Markdown Parser: Marked -->
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+
+    <!-- Sanitizer: DOMPurify -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"></script>
+
+    <!-- Syntax Highlighting: Highlight.js -->
     <link rel="stylesheet"
         href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
 
+    <!-- Fonts -->
     <link
         href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600&display=swap"
         rel="stylesheet">
@@ -52,6 +62,25 @@
             transition: background-color 0.3s, color 0.3s;
         }
 
+        /* Scrollbar Styling */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: var(--bg-body);
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--accent-green);
+        }
+
         /* Utility Classes using vars */
         .bg-hack-sidebar {
             background-color: var(--bg-sidebar);
@@ -102,11 +131,6 @@
             display: flex;
             align-items: center;
             scroll-margin-top: 80px;
-            position: relative;
-        }
-
-        .markdown-body h2:hover .anchor-link {
-            opacity: 1;
         }
 
         .markdown-body h3 {
@@ -116,13 +140,6 @@
             margin-top: 2rem;
             margin-bottom: 0.75rem;
             scroll-margin-top: 80px;
-            position: relative;
-            display: flex;
-            align-items: center;
-        }
-
-        .markdown-body h3:hover .anchor-link {
-            opacity: 1;
         }
 
         /* Anchor Links (#) */
@@ -138,6 +155,11 @@
             user-select: none;
         }
 
+        h2:hover .anchor-link,
+        h3:hover .anchor-link {
+            opacity: 1;
+        }
+
         .markdown-body p {
             margin-bottom: 1.25rem;
             line-height: 1.7;
@@ -179,6 +201,8 @@
             font-family: 'JetBrains Mono', monospace;
             font-size: 0.875rem;
             background-color: transparent;
+            display: block;
+            overflow-x: auto;
         }
 
         /* Inline Code */
@@ -213,6 +237,7 @@
             padding: 1rem;
             border-radius: 0 4px 4px 0;
             color: var(--text-heading);
+            margin-bottom: 1.5rem;
         }
 
         .markdown-body strong {
@@ -381,7 +406,9 @@
             #theme-toggle-desktop,
             #scroll-top-btn,
             #reading-progress-bar,
-            #overlay {
+            #overlay,
+            .copy-btn,
+            .toc-container {
                 display: none !important;
             }
 
@@ -409,29 +436,6 @@
                 border: none;
             }
 
-            .markdown-body h1,
-            .markdown-body h2,
-            .markdown-body h3 {
-                color: black !important;
-                page-break-after: avoid;
-            }
-
-            .copy-btn {
-                display: none;
-            }
-
-            .toc-container {
-                display: none;
-            }
-
-            aside {
-                display: none;
-            }
-
-            #page-nav {
-                display: none;
-            }
-
             #breadcrumbs {
                 color: black !important;
                 border-bottom: 1px solid #ccc;
@@ -449,6 +453,9 @@
                     colors: {
                         hack: {
                             green: 'var(--accent-green)',
+                            bg: 'var(--bg-body)',
+                            sidebar: 'var(--bg-sidebar)',
+                            border: 'var(--border-color)'
                         }
                     },
                     fontFamily: {
@@ -465,6 +472,7 @@
 
     <div id="reading-progress-bar"></div>
 
+    <!-- Lightbox -->
     <div id="lightbox"
         class="fixed inset-0 z-[100] bg-black/90 backdrop-blur-sm flex items-center justify-center opacity-0 invisible cursor-zoom-out"
         onclick="closeLightbox()">
@@ -472,12 +480,13 @@
             class="rounded-lg border border-hack-border transform scale-95 transition-transform duration-300">
     </div>
 
+    <!-- Mobile Header -->
     <header
         class="md:hidden flex-none bg-hack-sidebar border-b border-hack-border h-16 flex items-center justify-between px-4 z-[60] relative shadow-lg">
         <div class="flex items-center gap-3">
             <div class="w-10 h-10">
-                <img src="assets/bjorn.png" alt="Bjorn Icon"
-                    class="w-full h-full object-contain drop-shadow-[0_0_5px_rgba(34,197,94,0.3)]">
+                <img src="assets/bjorn.png" onerror="this.src='https://placehold.co/40x40/111214/22c55e?text=B'"
+                    alt="Bjorn Icon" class="w-full h-full object-contain drop-shadow-[0_0_5px_rgba(34,197,94,0.3)]">
             </div>
             <span class="font-bold text-hack-heading tracking-wide flex items-center gap-2">
                 BJORN <span class="version-display text-hack-green text-[10px] font-mono opacity-80 pt-1">...</span>
@@ -498,10 +507,12 @@
         </div>
     </header>
 
+    <!-- Overlay -->
     <div id="overlay"
         class="fixed inset-0 bg-black/80 backdrop-blur-[2px] z-[65] hidden transition-opacity opacity-0 md:hidden">
     </div>
 
+    <!-- Sidebar -->
     <aside id="sidebar"
         class="sidebar-mobile fixed top-0 bottom-0 left-0 z-[70] w-[280px] bg-hack-sidebar border-r border-hack-border transform -translate-x-full md:translate-x-0 md:static md:h-full flex flex-col shadow-2xl md:shadow-none transition-transform duration-300">
 
@@ -513,7 +524,8 @@
             <div class="flex items-center justify-between mb-4">
                 <div class="flex items-center gap-3">
                     <div class="w-12 h-12 shrink-0">
-                        <img src="assets/bjorn.png" alt="Bjorn Icon"
+                        <img src="assets/bjorn.png" onerror="this.src='https://placehold.co/48x48/111214/22c55e?text=B'"
+                            alt="Bjorn Icon"
                             class="w-full h-full object-contain drop-shadow-[0_0_8px_rgba(34,197,94,0.4)]">
                     </div>
                     <div>
@@ -529,21 +541,15 @@
                 <i data-lucide="search" class="absolute left-2.5 top-2.5 w-4 h-4 text-gray-500"></i>
                 <input type="text" id="search-input" placeholder="Search (Ctrl+K)..."
                     class="w-full border rounded py-1.5 pl-8 pr-8 text-base md:text-sm shadow-sm transition-colors appearance-none">
-
                 <button id="search-clear"
                     class="absolute right-0 top-0 bottom-0 px-2 flex items-center justify-center text-hack-green hover:text-white transition-all z-20 cursor-pointer opacity-0 pointer-events-none"
                     title="Clear search (Esc)">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M18 6 6 18" />
-                        <path d="m6 6 12 12" />
-                    </svg>
+                    <i data-lucide="x" class="w-3 h-3"></i>
                 </button>
             </div>
         </div>
 
         <div class="flex-1 overflow-y-auto flex flex-col" role="navigation" aria-label="Main Navigation">
-
             <div class="px-3 pt-4">
                 <div class="nav-group mb-1">
                     <button id="btn-versions"
@@ -564,7 +570,7 @@
                     <div
                         class="w-4 h-4 border-2 border-hack-green border-t-transparent rounded-full animate-spin mx-auto mb-2">
                     </div>
-                    Loading wiki...
+                    Initializing...
                 </div>
             </nav>
 
@@ -577,41 +583,34 @@
             <div class="text-center">
                 <strong class="text-gray-500 text-sm block mb-3 font-mono tracking-wide">:: JOIN US ::</strong>
                 <div class="flex flex-col gap-2.5">
-
                     <a href="https://discord.gg/B3ZH9taVfT" target="_blank"
                         class="hover:opacity-80 transition-opacity block">
                         <img src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fdiscord.com%2Fapi%2Finvites%2FB3ZH9taVfT%3Fwith_counts%3Dtrue&query=%24.approximate_member_count&logo=discord&logoColor=white&style=for-the-badge&label=BJORN&color=5865F2&labelColor=2A2E35"
                             alt="Discord BJORN" class="w-full" />
                     </a>
-
                     <a href="https://www.reddit.com/r/Bjorn_CyberViking/" target="_blank"
                         class="hover:opacity-80 transition-opacity block">
                         <img src="https://img.shields.io/reddit/subreddit-subscribers/Bjorn_CyberViking?style=for-the-badge&logo=reddit&label=r/Bjorn&color=FF4500&labelColor=2A2E35&logoColor=white"
                             alt="Reddit" class="w-full" />
                     </a>
-
                     <a href="https://github.com/infinition/Bjorn" target="_blank"
                         class="hover:opacity-80 transition-opacity block">
                         <img src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Finfinition%2FBjorn&query=%24.stargazers_count&style=for-the-badge&logo=github&color=0B0C0E&labelColor=2A2E35&label=BJORN&logoColor=white"
                             alt="GitHub BJORN" class="w-full" />
                     </a>
-
                     <a href="https://buymeacoffee.com/infinition" target="_blank"
                         class="hover:opacity-80 transition-opacity block pt-2 border-t border-hack-border/30 mt-1">
                         <img src="https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black"
                             alt="Buy Me A Coffee" class="w-full" />
                     </a>
-
                 </div>
             </div>
         </div>
     </aside>
 
     <div class="flex-1 flex flex-col h-full overflow-hidden relative">
-
         <main class="flex-1 overflow-y-auto bg-hack-bg scroll-smooth relative w-full" id="scroll-container">
             <div class="max-w-6xl mx-auto px-5 py-8 md:py-12 md:px-10 flex gap-10">
-
                 <div class="flex-1 min-w-0">
                     <div
                         class="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-2 border-b border-hack-border/50 pb-4">
@@ -635,11 +634,9 @@
                     </div>
 
                     <div id="markdown-viewer" class="markdown-body min-h-[50vh]"></div>
-
                     <div id="page-nav"
                         class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-12 pt-8 border-t border-hack-border empty:hidden">
                     </div>
-
                     <div class="h-20"></div>
                 </div>
 
@@ -648,11 +645,9 @@
                         <h4
                             class="text-xs font-bold text-gray-500 uppercase tracking-widest mb-4 border-b border-hack-border pb-2">
                             On this page</h4>
-                        <ul id="toc-container" class="space-y-2 text-xs border-l border-hack-border pl-3">
-                        </ul>
+                        <ul id="toc-container" class="space-y-2 text-xs border-l border-hack-border pl-3"></ul>
                     </div>
                 </aside>
-
             </div>
         </main>
 
@@ -666,39 +661,45 @@
     <script>
         // --- 1. CONFIG & STATE ---
         const renderer = new marked.Renderer();
-        // OPTIMIZATION: Lazy loading images
+        // Custom Image Rendering for Lazy Loading and styling
         renderer.image = function (href, title, text) {
-            return `<img src="${href}" alt="${text}" title="${title || ''}" loading="lazy" class="rounded-lg border border-hack-border">`;
+            // Handle relative paths for GitHub Pages if needed, usually browser handles it.
+            return `<img src="${href}" alt="${text}" title="${title || ''}" loading="lazy" class="rounded-lg border border-hack-border bg-black/20">`;
         };
+        // Table styling
+        renderer.table = function (header, body) {
+            return `<div class="overflow-x-auto my-4 border border-hack-border rounded-lg"><table class="w-full text-left text-sm border-collapse"><thead>${header}</thead><tbody>${body}</tbody></table></div>`;
+        };
+
         marked.use({ renderer });
         marked.setOptions({ breaks: true, gfm: true });
 
         const STATE = {
             wikiData: {},
-            contentCache: {}, // OPTIMIZATION: Memory Cache
-            searchIndex: [], // FULL TEXT SEARCH INDEX
+            contentCache: {},
+            searchIndex: [],
             expandedSections: new Set(),
-            releasesPage: 1,
-            releasesPerPage: 10,
-            currentPath: null,
-            repo: "infinition/Bjorn"
+            repo: "infinition/Bjorn", // YOUR REPO
+            branch: "wiki"
         };
 
         // --- 2. THEME ENGINE ---
         function initTheme() {
             const savedTheme = localStorage.getItem('theme') || 'dark';
+            const html = document.documentElement;
             if (savedTheme === 'light') {
-                document.documentElement.classList.remove('dark');
-                document.documentElement.classList.add('light');
+                html.classList.remove('dark');
+                html.classList.add('light');
             } else {
-                document.documentElement.classList.add('dark');
-                document.documentElement.classList.remove('light');
+                html.classList.add('dark');
+                html.classList.remove('light');
             }
         }
 
         function toggleTheme() {
             const html = document.documentElement;
-            if (html.classList.contains('dark')) {
+            const isDark = html.classList.contains('dark');
+            if (isDark) {
                 html.classList.remove('dark');
                 html.classList.add('light');
                 localStorage.setItem('theme', 'light');
@@ -707,43 +708,54 @@
                 html.classList.add('dark');
                 localStorage.setItem('theme', 'dark');
             }
+            lucide.createIcons();
         }
 
         document.getElementById('theme-toggle-desktop').onclick = toggleTheme;
         document.getElementById('theme-toggle-mobile').onclick = toggleTheme;
         initTheme();
 
-        // --- 3. FETCH DATA ---
-        async function fetchLatestVersion() {
-            const CACHE_KEY = 'bjorn_ver';
-            const CACHE_TS = 'bjorn_ts';
-            const now = Date.now();
+        // --- 3. FETCH DATA (GitHub API) ---
+        // Includes Cache to avoid GitHub API Rate Limiting (60 requests/hr for unauth)
 
-            if (localStorage.getItem(CACHE_KEY) && (now - localStorage.getItem(CACHE_TS) < 3600000)) {
-                updateVersionUI(localStorage.getItem(CACHE_KEY), true);
-                return;
+        async function fetchLatestVersion() {
+            const CACHE_KEY = 'bjorn_ver_data';
+            const now = Date.now();
+            const ONE_HOUR = 3600 * 1000;
+
+            const cached = localStorage.getItem(CACHE_KEY);
+            if (cached) {
+                const { timestamp, version } = JSON.parse(cached);
+                if (now - timestamp < ONE_HOUR) {
+                    updateVersionUI(version, true);
+                    return;
+                }
             }
 
             try {
                 let ver = "v2.0";
-                const res = await fetch(`https://api.github.com/repos/${STATE.repo}/releases/latest`);
+                // Try Releases first
+                let res = await fetch(`https://api.github.com/repos/${STATE.repo}/releases/latest`);
 
                 if (res.ok) {
                     const data = await res.json();
                     ver = data.tag_name;
                 } else {
-                    const tagsRes = await fetch(`https://api.github.com/repos/${STATE.repo}/tags`);
-                    if (tagsRes.ok) {
-                        const tags = await tagsRes.json();
+                    // Fallback to tags
+                    res = await fetch(`https://api.github.com/repos/${STATE.repo}/tags`);
+                    if (res.ok) {
+                        const tags = await res.json();
                         if (tags.length > 0) ver = tags[0].name;
                     }
                 }
 
-                localStorage.setItem(CACHE_KEY, ver);
-                localStorage.setItem(CACHE_TS, now);
+                localStorage.setItem(CACHE_KEY, JSON.stringify({ timestamp: now, version: ver }));
                 updateVersionUI(ver, true);
             } catch (e) {
-                updateVersionUI("v2.0", false);
+                console.warn("GitHub API Limit or Network Error", e);
+                // Fallback to cached version even if old, or default
+                if (cached) updateVersionUI(JSON.parse(cached).version, true);
+                else updateVersionUI("v2.0", false);
             }
         }
 
@@ -754,179 +766,191 @@
             });
         }
 
-        // --- 4. WIKI CORE & ERROR HANDLING ---
+        // --- 4. WIKI CORE ---
         async function initWiki() {
             try {
-                const res = await fetch('wiki/structure.json');
-                if (!res.ok) throw new Error("Config missing");
+                // IMPORTANT: Fetch relative to index.html
+                const res = await fetch('./wiki/structure.json');
+
+                if (!res.ok) {
+                    if (res.status === 404) throw new Error("File not found: wiki/structure.json");
+                    throw new Error("Config missing");
+                }
+
                 STATE.wikiData = await res.json();
 
+                // Expand first folder by default
                 const firstFolder = Object.keys(STATE.wikiData)[0];
                 if (firstFolder) STATE.expandedSections.add(firstFolder);
 
                 renderSidebar();
+                buildSearchIndex(); // Background
 
-                // BUILD FULL TEXT SEARCH INDEX IN BACKGROUND
-                buildSearchIndex();
-
+                // History handling
                 window.onpopstate = (event) => {
                     if (event.state) {
                         if (event.state.page === 'versions') toggleVersionsPage(null, false);
                         else loadContent(event.state.folder, event.state.title, event.state.filename, false);
+                    } else {
+                        // Check URL params on back button to root
+                        handleInitialRoute();
                     }
                 };
 
-                const urlParams = new URLSearchParams(window.location.search);
-                const pageParam = urlParams.get('page');
-
-                if (pageParam === 'changelog') {
-                    toggleVersionsPage(null, false);
-                } else if (pageParam) {
-                    let found = false;
-                    for (const [folder, files] of Object.entries(STATE.wikiData)) {
-                        for (const [title, file] of Object.entries(files)) {
-                            if (`${folder}/${file}` === pageParam) {
-                                loadContent(folder, title, file, false);
-                                STATE.expandedSections.add(folder);
-                                renderSidebar();
-                                found = true; break;
-                            }
-                        }
-                        if (found) break;
-                    }
-                    if (!found) loadDefault();
-                } else {
-                    loadDefault();
-                }
+                handleInitialRoute();
 
             } catch (e) {
-                showErrorState();
+                console.error(e);
+                showErrorState(e.message);
+            }
+        }
+
+        function handleInitialRoute() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const pageParam = urlParams.get('page');
+
+            if (pageParam === 'changelog') {
+                toggleVersionsPage(null, false);
+            } else if (pageParam) {
+                // pageParam format: "Folder/Filename.md" or similar
+                // We need to find the title for this file
+                let found = false;
+                for (const [folder, files] of Object.entries(STATE.wikiData)) {
+                    for (const [title, file] of Object.entries(files)) {
+                        // Check strict match or loose match
+                        if (`${folder}/${file}` === pageParam || file === pageParam) {
+                            loadContent(folder, title, file, false);
+                            STATE.expandedSections.add(folder);
+                            renderSidebar();
+                            found = true;
+                            break;
+                        }
+                    }
+                    if (found) break;
+                }
+                if (!found) loadDefault();
+            } else {
+                loadDefault();
             }
         }
 
-        // FULL TEXT INDEXER
         async function buildSearchIndex() {
             const promises = [];
             for (const [folder, files] of Object.entries(STATE.wikiData)) {
                 for (const [title, filename] of Object.entries(files)) {
+                    // Skip if not markdown
+                    if (!filename.endsWith('.md')) continue;
+
                     promises.push(
-                        fetch(`wiki/${folder}/${filename}`)
-                            .then(res => res.text())
+                        fetch(`./wiki/${folder}/${filename}`)
+                            .then(res => { if (!res.ok) return ''; return res.text(); })
                             .then(text => {
+                                if (!text) return;
                                 STATE.searchIndex.push({
-                                    folder,
-                                    title,
-                                    filename,
+                                    folder, title, filename,
                                     content: text.toLowerCase(),
                                     titleLower: title.toLowerCase()
                                 });
                             })
-                            .catch(err => console.log("Failed to index", filename))
+                            .catch(err => console.log("Indexing skip:", filename))
                     );
                 }
             }
             await Promise.all(promises);
-            console.log("Full text index built:", STATE.searchIndex.length, "pages.");
         }
 
         function loadDefault() {
-            const firstFolder = Object.keys(STATE.wikiData)[0];
-            const firstFile = Object.keys(STATE.wikiData[firstFolder])[0];
-            loadContent(firstFolder, firstFile, STATE.wikiData[firstFolder][firstFile], true);
+            const folders = Object.keys(STATE.wikiData);
+            if (folders.length === 0) return;
+            const firstFolder = folders[0];
+            const files = Object.keys(STATE.wikiData[firstFolder]);
+            if (files.length === 0) return;
+
+            const firstTitle = files[0];
+            loadContent(firstFolder, firstTitle, STATE.wikiData[firstFolder][firstTitle], true);
         }
 
-        function showErrorState() {
-            document.getElementById('nav-container').innerHTML = `<div class="p-4 text-xs text-red-400 border border-red-900 bg-red-900/10 rounded m-2 font-mono"><strong>[!] CONFIG ERROR</strong><br>Missing 'wiki/structure.json'.</div>`;
+        function showErrorState(msg) {
+            document.getElementById('nav-container').innerHTML = `
+                <div class="p-4 text-xs text-red-400 border border-red-900 bg-red-900/10 rounded m-2 font-mono">
+                    <strong>[!] CONFIG ERROR</strong><br>${msg}
+                </div>`;
 
-            // FULLY RESTORED DATA AS REQUESTED
             document.getElementById('markdown-viewer').innerHTML = `
-            <h1>Wiki Setup Required</h1>
-            <p>To use this wiki, please create the following folder structure in the root:</p>
-            
-            <h3>1. Create Folder Structure</h3>
-            <pre><code>/ (Root of your site)
+                <h1>Wiki Setup Guide</h1>
+                <p>Welcome to your new Wiki Node. To enable content, please ensure your repository structure matches the config.</p>
+                <div class="p-4 bg-gray-800 rounded border border-gray-700">
+                    <h3 class="text-white mt-0">Required Structure</h3>
+                    <pre><code class="language-bash">/ (Root)
 ├── index.html
+├── .nojekyll  <-- IMPORTANT for GitHub Pages
 ├── assets/
 │   └── bjorn.png
 └── wiki/
     ├── structure.json
-    ├── 01_General/
-    │   └── Introduction.md
-    └── 02_Setup/
-        └── Installation.md</code></pre>
-
-            <h3>2. Create <code>wiki/structure.json</code></h3>
-            <pre><code>{
-  "01_General": {
-    "Introduction": "Introduction.md"
-  },
-  "02_Setup": {
-    "Installation": "Installation.md"
-  }
-}</code></pre>
-            <blockquote><strong>Note:</strong> You must run this via a local server (e.g., Live Server in VS Code) for fetch() to work. Opening index.html directly won't load external files.</blockquote>
+    └── 01_General/
+        └── Introduction.md</code></pre>
+                </div>
             `;
+            hljs.highlightAll();
         }
 
-        // --- 5. CONTENT LOADER & FEATURES ---
+        // --- 5. CONTENT LOADER ---
         async function loadContent(folder, title, filename, pushHistory = true) {
             const viewer = document.getElementById('markdown-viewer');
-            const scrollContainer = document.getElementById('scroll-container');
             const pageNav = document.getElementById('page-nav');
-            const readingTimeEl = document.getElementById('reading-time');
-            const lastUpdatedEl = document.getElementById('last-updated');
+            const scrollContainer = document.getElementById('scroll-container');
 
             // UI Reset
             if (!STATE.contentCache[`${folder}/${filename}`]) {
-                viewer.innerHTML = `<div class="animate-pulse space-y-4"><div class="h-4 bg-gray-700 rounded w-3/4"></div><div class="h-4 bg-gray-700 rounded w-1/2"></div></div>`;
+                viewer.innerHTML = `<div class="animate-pulse space-y-4 pt-10"><div class="h-8 bg-gray-800 rounded w-1/3 mb-6"></div><div class="h-4 bg-gray-800 rounded w-full"></div><div class="h-4 bg-gray-800 rounded w-5/6"></div><div class="h-4 bg-gray-800 rounded w-4/6"></div></div>`;
             }
             pageNav.innerHTML = '';
-            readingTimeEl.innerHTML = '';
-            lastUpdatedEl.innerHTML = '';
+            document.getElementById('reading-time').innerText = '';
+            document.getElementById('last-updated').innerText = '';
 
             try {
                 let text;
                 const cacheKey = `${folder}/${filename}`;
 
-                // OPTIMIZATION: Check Cache
+                // 1. Get Markdown
                 if (STATE.contentCache[cacheKey]) {
                     text = STATE.contentCache[cacheKey];
                 } else {
-                    const res = await fetch(`wiki/${folder}/${filename}`);
-                    if (!res.ok) throw new Error("404");
+                    const res = await fetch(`./wiki/${folder}/${filename}`);
+                    if (!res.ok) throw new Error(`HTTP ${res.status}`);
                     text = await res.text();
-                    STATE.contentCache[cacheKey] = text; // Set Cache
+                    STATE.contentCache[cacheKey] = text;
                 }
 
-                // Sanitize and Parse
-                const rawHTML = marked.parse(text);
-                viewer.innerHTML = DOMPurify.sanitize(rawHTML);
+                // 2. Render
+                const cleanHTML = DOMPurify.sanitize(marked.parse(text));
+                viewer.innerHTML = cleanHTML;
 
-                // UX: Calculate Reading Time
+                // 3. Stats
                 const wordCount = text.replace(/[#*`]/g, '').split(/\s+/).length;
-                const readingTime = Math.ceil(wordCount / 200);
-                readingTimeEl.textContent = `~${readingTime} min read`;
-
-                // UX: Fetch Last Updated (Async, non-blocking)
+                document.getElementById('reading-time').textContent = `~${Math.ceil(wordCount / 200)} min read`;
                 fetchLastUpdated(folder, filename);
 
-                // Enhance Features
+                // 4. UI Enhancements
                 enhanceMarkdownContent();
                 generateTOC();
                 renderPagination(folder, title);
 
-                // Breadcrumbs
+                // 5. Breadcrumbs
                 const cleanFolder = folder.replace(/^\d+_/, '').replace(/_/g, ' ');
                 document.getElementById('breadcrumbs').innerHTML = `
-                    <span class="hover:text-hack-heading cursor-pointer">wiki</span> <span>/</span> 
+                    <span class="hover:text-hack-heading cursor-pointer" onclick="loadDefault()">wiki</span> <span>/</span> 
                     <span>${cleanFolder}</span> <span>/</span> <span class="text-hack-green font-bold">${title}</span>
                 `;
 
+                // 6. Navigation / History
                 if (pushHistory) {
                     const newUrl = `?page=${folder}/${filename}`;
                     window.history.pushState({ folder, title, filename }, "", newUrl);
                 }
 
+                // 7. Scroll
                 if (window.location.hash) {
                     const el = document.getElementById(window.location.hash.substring(1));
                     if (el) el.scrollIntoView();
@@ -936,19 +960,31 @@
 
                 if (window.innerWidth < 768) closeMenu();
 
-                // OPTIMIZATION: Predictive Preloading
+                // 8. Preload next/prev
                 preloadAdjacent(folder, title);
 
             } catch (e) {
-                console.error(e);
-                viewer.innerHTML = `<h1>Page Not Found</h1><p>Could not load ${filename}</p>`;
+                console.error("Load failed", e);
+                viewer.innerHTML = `<h1>Page Not Found</h1><p class="text-red-400">Could not load content: ${filename}</p><p>Check if the file exists in your <code>wiki/</code> folder and if <code>.nojekyll</code> exists in repo root.</p>`;
             }
         }
 
-        // UX: Fetch Last commit date for file
+        // Cache last updated to prevent API ban
         async function fetchLastUpdated(folder, filename) {
+            const CACHE_KEY = `bjorn_upd_${folder}_${filename}`;
+            const now = Date.now();
+
+            const cached = localStorage.getItem(CACHE_KEY);
+            if (cached) {
+                const data = JSON.parse(cached);
+                if (now - data.ts < 86400000) { // 24h cache
+                    document.getElementById('last-updated').textContent = `Updated: ${data.date}`;
+                    return;
+                }
+            }
+
             try {
-                // Warning: This hits GitHub API rate limits if used too heavily without auth
+                // Rate limit protection
                 const path = `wiki/${folder}/${filename}`;
                 const res = await fetch(`https://api.github.com/repos/${STATE.repo}/commits?path=${path}&page=1&per_page=1`);
                 if (res.ok) {
@@ -956,12 +992,14 @@
                     if (data.length > 0) {
                         const date = new Date(data[0].commit.committer.date).toLocaleDateString();
                         document.getElementById('last-updated').textContent = `Updated: ${date}`;
+                        localStorage.setItem(CACHE_KEY, JSON.stringify({ ts: now, date }));
                     }
                 }
-            } catch (e) { /* Ignore errors silently */ }
+            } catch (e) {
+                // Silent fail
+            }
         }
 
-        // OPTIMIZATION: Preload Next/Prev pages
         function preloadAdjacent(currentFolder, currentTitle) {
             let flatList = [];
             for (const [folder, files] of Object.entries(STATE.wikiData)) {
@@ -973,45 +1011,36 @@
 
             [idx - 1, idx + 1].forEach(i => {
                 if (flatList[i]) {
-                    const item = flatList[i];
-                    const key = `${item.folder}/${item.file}`;
-                    if (!STATE.contentCache[key]) {
-                        fetch(`wiki/${item.folder}/${item.file}`).then(res => res.text()).then(txt => {
-                            STATE.contentCache[key] = txt;
-                        }).catch(() => { });
-                    }
+                    const url = `./wiki/${flatList[i].folder}/${flatList[i].file}`;
+                    fetch(url).then(r => r.text()).then(t => {
+                        STATE.contentCache[`${flatList[i].folder}/${flatList[i].file}`] = t;
+                    }).catch(() => { });
                 }
             });
         }
 
         function enhanceMarkdownContent() {
-            // 1. Headings IDs and Anchors
-            const headings = document.querySelectorAll('#markdown-viewer h2, #markdown-viewer h3');
-            headings.forEach(h => {
+            // Anchor Links
+            document.querySelectorAll('#markdown-viewer h2, #markdown-viewer h3').forEach(h => {
                 if (!h.id) h.id = h.textContent.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
 
                 const anchor = document.createElement('a');
                 anchor.className = 'anchor-link';
                 anchor.innerHTML = '#';
-                anchor.title = 'Copy link';
                 anchor.onclick = (e) => {
                     e.preventDefault();
-                    e.stopPropagation();
-                    const url = `${window.location.origin}${window.location.pathname}?page=${new URLSearchParams(window.location.search).get('page')}#${h.id}`;
-                    navigator.clipboard.writeText(url);
+                    navigator.clipboard.writeText(window.location.href.split('#')[0] + '#' + h.id);
                     anchor.innerHTML = 'copied!';
                     setTimeout(() => anchor.innerHTML = '#', 1500);
-                    history.pushState(null, null, `#${h.id}`);
+                    history.replaceState(null, null, `#${h.id}`);
                 };
                 h.appendChild(anchor);
             });
 
-            // 2. Syntax Highlighting
-            document.querySelectorAll('pre code').forEach((el) => {
-                hljs.highlightElement(el);
-            });
+            // Syntax Highlight
+            document.querySelectorAll('pre code').forEach((el) => hljs.highlightElement(el));
 
-            // 3. Copy Buttons for Code
+            // Copy Buttons
             document.querySelectorAll('pre').forEach(pre => {
                 if (pre.querySelector('.copy-btn')) return;
                 const btn = document.createElement('button');
@@ -1020,30 +1049,30 @@
                 btn.onclick = () => {
                     navigator.clipboard.writeText(pre.querySelector('code').innerText);
                     btn.textContent = 'Copied!';
-                    btn.style.borderColor = 'var(--accent-green)';
                     btn.style.color = 'var(--accent-green)';
-                    setTimeout(() => { btn.textContent = 'Copy'; btn.style = ''; }, 2000);
+                    setTimeout(() => { btn.textContent = 'Copy'; btn.style.color = ''; }, 2000);
                 }
                 pre.appendChild(btn);
             });
 
-            // 4. Lightbox for Images
+            // Images -> Lightbox
             document.querySelectorAll('#markdown-viewer img').forEach(img => {
                 img.onclick = () => openLightbox(img.src);
             });
 
-            // 5. External Links
+            // External Links
             document.querySelectorAll('#markdown-viewer a').forEach(a => {
                 if (a.hostname !== window.location.hostname && !a.className.includes('anchor-link')) {
                     a.target = '_blank';
                     a.rel = 'noopener noreferrer';
+                    // Add external icon
+                    a.innerHTML += ' <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline-block opacity-50"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>';
                 }
             });
         }
 
         function renderPagination(currentFolder, currentTitle) {
             const navContainer = document.getElementById('page-nav');
-
             let flatList = [];
             for (const [folder, files] of Object.entries(STATE.wikiData)) {
                 for (const [title, file] of Object.entries(files)) {
@@ -1051,27 +1080,25 @@
                 }
             }
 
-            const currentIndex = flatList.findIndex(item => item.folder === currentFolder && item.title === currentTitle);
-            if (currentIndex === -1) return;
+            const idx = flatList.findIndex(item => item.folder === currentFolder && item.title === currentTitle);
+            if (idx === -1) return;
 
             // Prev
-            if (currentIndex > 0) {
-                const prev = flatList[currentIndex - 1];
+            if (idx > 0) {
+                const prev = flatList[idx - 1];
                 const btn = document.createElement('button');
-                btn.className = "text-left p-4 rounded border border-hack-border hover:border-hack-green group transition-colors bg-hack-sidebar/50 hover:bg-hack-sidebar w-full";
-                btn.innerHTML = `<div class="text-[10px] text-gray-500 uppercase tracking-widest mb-1 group-hover:text-hack-green">Previous</div><div class="font-bold text-sm truncate text-hack-heading">« ${prev.title}</div>`;
+                btn.className = "text-left p-4 rounded border border-hack-border hover:border-hack-green group transition-colors bg-hack-sidebar/50 hover:bg-hack-sidebar w-full flex flex-col items-start";
+                btn.innerHTML = `<span class="text-[10px] text-gray-500 uppercase tracking-widest mb-1 group-hover:text-hack-green">Previous</span><span class="font-bold text-sm truncate text-hack-heading w-full">« ${prev.title}</span>`;
                 btn.onclick = () => loadContent(prev.folder, prev.title, prev.file);
                 navContainer.appendChild(btn);
-            } else {
-                navContainer.appendChild(document.createElement('div'));
-            }
+            } else { navContainer.appendChild(document.createElement('div')); }
 
             // Next
-            if (currentIndex < flatList.length - 1) {
-                const next = flatList[currentIndex + 1];
+            if (idx < flatList.length - 1) {
+                const next = flatList[idx + 1];
                 const btn = document.createElement('button');
-                btn.className = "text-right p-4 rounded border border-hack-border hover:border-hack-green group transition-colors bg-hack-sidebar/50 hover:bg-hack-sidebar w-full";
-                btn.innerHTML = `<div class="text-[10px] text-gray-500 uppercase tracking-widest mb-1 group-hover:text-hack-green">Next</div><div class="font-bold text-sm truncate text-hack-heading">${next.title} »</div>`;
+                btn.className = "text-right p-4 rounded border border-hack-border hover:border-hack-green group transition-colors bg-hack-sidebar/50 hover:bg-hack-sidebar w-full flex flex-col items-end";
+                btn.innerHTML = `<span class="text-[10px] text-gray-500 uppercase tracking-widest mb-1 group-hover:text-hack-green">Next</span><span class="font-bold text-sm truncate text-hack-heading w-full">${next.title} »</span>`;
                 btn.onclick = () => loadContent(next.folder, next.title, next.file);
                 navContainer.appendChild(btn);
             }
@@ -1081,36 +1108,31 @@
             const toc = document.getElementById('toc-container');
             const headings = document.querySelectorAll('#markdown-viewer h2, #markdown-viewer h3');
             toc.innerHTML = '';
-
             if (headings.length === 0) {
                 toc.innerHTML = '<li class="text-gray-600 italic">No sections</li>';
                 return;
             }
-
             headings.forEach(h => {
                 const li = document.createElement('li');
                 const link = document.createElement('a');
-                link.textContent = h.childNodes[0].textContent;
+                link.textContent = h.childNodes[0].textContent; // ignore anchor link
                 link.href = `#${h.id}`;
                 link.className = `toc-link block py-1 pl-2 border-l-2 border-transparent hover:text-hack-green transition-colors truncate ${h.tagName === 'H3' ? 'ml-3 opacity-80' : ''}`;
-
                 link.onclick = (e) => {
                     e.preventDefault();
                     document.getElementById(h.id).scrollIntoView({ behavior: 'smooth' });
                     history.pushState(null, null, `#${h.id}`);
                 };
-
                 li.appendChild(link);
                 toc.appendChild(li);
             });
         }
 
-        // --- 6. SIDEBAR & SEARCH ---
+        // --- 6. SIDEBAR ---
         function renderSidebar(searchResults = null) {
             const container = document.getElementById('nav-container');
             const noResults = document.getElementById('search-results-msg');
             container.innerHTML = '';
-
             let hasContent = false;
 
             Object.keys(STATE.wikiData).forEach(folder => {
@@ -1121,12 +1143,12 @@
                 group.className = 'nav-group mb-1';
 
                 const btn = document.createElement('button');
-                btn.className = `section-header w-full flex items-center justify-between px-2 py-2 text-gray-500 hover:text-hack-heading transition-colors rounded hover:bg-hack-bg focus:outline-none focus:bg-hack-bg ${STATE.expandedSections.has(folder) ? 'active' : ''}`;
+                const isExpanded = STATE.expandedSections.has(folder) || searchResults;
+                btn.className = `section-header w-full flex items-center justify-between px-2 py-2 text-gray-500 hover:text-hack-heading transition-colors rounded hover:bg-hack-bg focus:outline-none focus:bg-hack-bg ${isExpanded ? 'active' : ''}`;
                 btn.innerHTML = `
                     <span class="flex items-center gap-2 text-[11px] font-bold uppercase tracking-widest font-mono"><i data-lucide="folder" class="w-3 h-3"></i> ${cleanName}</span>
                     <i data-lucide="chevron-right" class="section-arrow w-3 h-3 transition-transform"></i>
                 `;
-
                 btn.onclick = () => {
                     if (STATE.expandedSections.has(folder)) STATE.expandedSections.delete(folder);
                     else STATE.expandedSections.add(folder);
@@ -1134,24 +1156,22 @@
                 };
 
                 const list = document.createElement('div');
-                list.className = `nav-list pl-2 border-l border-hack-border/30 ml-1 ${STATE.expandedSections.has(folder) || searchResults ? 'expanded' : 'collapsed'}`;
+                list.className = `nav-list pl-2 border-l border-hack-border/30 ml-1 ${isExpanded ? 'expanded' : 'collapsed'}`;
 
                 Object.keys(STATE.wikiData[folder]).forEach(title => {
                     if (searchResults && !searchResults[folder][title]) return;
                     hasContent = true;
-
                     const filename = STATE.wikiData[folder][title];
                     const link = document.createElement('a');
-                    link.href = '#';
+                    link.href = `?page=${folder}/${filename}`; // Fallback href
                     link.className = 'nav-link group flex items-center gap-3 px-2 py-1.5 rounded-md text-sm font-medium text-gray-400 hover:text-hack-heading hover:bg-hack-bg transition-all outline-none focus:bg-hack-bg';
                     link.innerHTML = `<span class="w-1.5 h-1.5 rounded-full bg-hack-border group-hover:bg-hack-green flex-shrink-0 transition-colors"></span> ${title}`;
                     link.onclick = (e) => {
                         e.preventDefault();
                         loadContent(folder, title, filename);
-                        highlightLink(link);
+                        document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
+                        link.classList.add('active');
                     };
-                    link.onkeydown = (e) => { if (e.key === 'Enter') link.click(); };
-
                     list.appendChild(link);
                 });
 
@@ -1160,118 +1180,100 @@
                 container.appendChild(group);
             });
 
-            if (!hasContent && searchResults) {
-                noResults.classList.remove('hidden');
-            } else {
-                noResults.classList.add('hidden');
-            }
+            if (!hasContent && searchResults) noResults.classList.remove('hidden');
+            else noResults.classList.add('hidden');
 
             lucide.createIcons();
         }
 
-        function highlightLink(el) {
-            document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
-            el.classList.add('active');
-        }
-
-        // --- 7. SEARCH LOGIC (DEBOUNCED & FULL TEXT) ---
-        function debounce(func, wait) {
-            let timeout;
-            return function (...args) {
-                clearTimeout(timeout);
-                timeout = setTimeout(() => func.apply(this, args), wait);
-            };
-        }
-
+        // --- 7. SEARCH ---
         const searchInput = document.getElementById('search-input');
         const searchClear = document.getElementById('search-clear');
+        let debounceTimeout;
 
-        const performSearch = debounce((e) => {
-            const q = e.target.value.toLowerCase();
-            if (!q) {
-                renderSidebar();
-                searchClear.classList.add('opacity-0', 'pointer-events-none');
-                return;
-            }
-            searchClear.classList.remove('opacity-0', 'pointer-events-none');
+        searchInput.addEventListener('input', (e) => {
+            clearTimeout(debounceTimeout);
+            debounceTimeout = setTimeout(() => {
+                const q = e.target.value.toLowerCase();
+                if (!q) {
+                    renderSidebar();
+                    searchClear.classList.add('opacity-0', 'pointer-events-none');
+                    return;
+                }
+                searchClear.classList.remove('opacity-0', 'pointer-events-none');
 
-            // FULL TEXT SEARCH
-            const results = {};
-            if (STATE.searchIndex.length > 0) {
-                STATE.searchIndex.forEach(item => {
-                    if (item.titleLower.includes(q) || item.content.includes(q)) {
-                        if (!results[item.folder]) results[item.folder] = {};
-                        results[item.folder][item.title] = item.filename;
-                    }
-                });
-                renderSidebar(results);
-            } else {
-                // Fallback if index not ready
-                for (const [folder, files] of Object.entries(STATE.wikiData)) {
-                    const matches = {};
-                    let foundInFolder = false;
-                    for (const [title, file] of Object.entries(files)) {
-                        if (title.toLowerCase().includes(q)) {
-                            matches[title] = file;
-                            foundInFolder = true;
+                const results = {};
+                if (STATE.searchIndex.length > 0) {
+                    STATE.searchIndex.forEach(item => {
+                        if (item.titleLower.includes(q) || item.content.includes(q)) {
+                            if (!results[item.folder]) results[item.folder] = {};
+                            results[item.folder][item.title] = item.filename;
+                        }
+                    });
+                } else {
+                    // Fallback
+                    for (const [folder, files] of Object.entries(STATE.wikiData)) {
+                        for (const [title, file] of Object.entries(files)) {
+                            if (title.toLowerCase().includes(q)) {
+                                if (!results[folder]) results[folder] = {};
+                                results[folder][title] = file;
+                            }
                         }
                     }
-                    if (foundInFolder) results[folder] = matches;
                 }
                 renderSidebar(results);
-            }
-        }, 300);
-
-        searchInput.addEventListener('input', performSearch);
+            }, 300);
+        });
 
         searchClear.onclick = () => {
             searchInput.value = '';
-            renderSidebar();
-            searchClear.classList.add('opacity-0', 'pointer-events-none');
+            searchInput.dispatchEvent(new Event('input'));
             searchInput.focus();
         };
 
-        // --- 8. VERSIONS PAGE ---
+        // --- 8. CHANGELOG ---
         async function toggleVersionsPage(btn, pushHistory = true) {
             const viewer = document.getElementById('markdown-viewer');
-            const breadcrumbs = document.getElementById('breadcrumbs');
-            const pageNav = document.getElementById('page-nav');
-
-            breadcrumbs.innerHTML = `<span class="hover:text-hack-heading cursor-pointer">Bjorn</span> <span>/</span> <span class="text-hack-green font-bold">Changelog</span>`;
-            pageNav.innerHTML = '';
+            document.getElementById('breadcrumbs').innerHTML = `<span class="hover:text-hack-heading cursor-pointer" onclick="loadDefault()">Bjorn</span> <span>/</span> <span class="text-hack-green font-bold">Changelog</span>`;
+            document.getElementById('page-nav').innerHTML = '';
             document.getElementById('reading-time').innerHTML = '';
             document.getElementById('last-updated').innerHTML = '';
 
-            viewer.innerHTML = `<h1>Changelog</h1><div id="versions-list" class="space-y-4 mt-6"><div class="animate-pulse text-hack-green">Fetching releases...</div></div>`;
-
+            viewer.innerHTML = `<h1>Changelog</h1><div id="versions-list" class="space-y-4 mt-6"><div class="animate-pulse text-hack-green">Fetching GitHub releases...</div></div>`;
             if (pushHistory) window.history.pushState({ page: 'versions' }, "", "?page=changelog");
 
             try {
+                // Get releases from API
                 const res = await fetch(`https://api.github.com/repos/${STATE.repo}/releases`);
+                if (!res.ok) throw new Error("API Limit");
                 const data = await res.json();
                 const list = document.getElementById('versions-list');
                 list.innerHTML = '';
 
-                if (!Array.isArray(data) || data.length === 0) {
-                    list.innerHTML = '<p>No releases found.</p>';
-                    return;
-                }
+                if (data.length === 0) list.innerHTML = '<p>No releases found.</p>';
 
-                data.slice(0, 10).forEach(r => {
+                data.forEach(r => {
                     const div = document.createElement('div');
-                    div.className = 'border-b border-hack-border pb-4';
-                    div.innerHTML = `<h2 class="text-xl font-bold flex items-center gap-2">${r.tag_name} <span class="text-xs font-mono text-gray-500">${new Date(r.published_at).toLocaleDateString()}</span></h2><div class="markdown-body text-sm mt-2 pl-2 border-l-2 border-hack-border">${DOMPurify.sanitize(marked.parse(r.body || ''))}</div>`;
+                    div.className = 'border-b border-hack-border pb-4 mb-4';
+                    const body = DOMPurify.sanitize(marked.parse(r.body || 'No description'));
+                    div.innerHTML = `
+                        <div class="flex items-center justify-between mb-2">
+                            <h2 class="text-xl font-bold !mt-0 !mb-0 flex items-center gap-2 text-hack-green">${r.tag_name}</h2>
+                            <span class="text-xs font-mono text-gray-500">${new Date(r.published_at).toLocaleDateString()}</span>
+                        </div>
+                        <div class="markdown-body text-sm pl-2 border-l-2 border-hack-border/50">${body}</div>
+                        <a href="${r.html_url}" target="_blank" class="text-xs mt-2 inline-block opacity-50 hover:opacity-100">View on GitHub &rarr;</a>
+                    `;
                     list.appendChild(div);
                 });
             } catch (e) {
-                document.getElementById('versions-list').innerHTML = `<p class="text-red-500">Failed to load releases.</p>`;
+                document.getElementById('versions-list').innerHTML = `<p class="text-red-400">Unable to load changelog (GitHub API Rate Limit might be reached). Please check back later.</p>`;
             }
         }
 
-        // --- 9. LIGHTBOX LOGIC ---
+        // --- 9. UTILS ---
         const lightbox = document.getElementById('lightbox');
         const lightboxImg = document.getElementById('lightbox-img');
-
         function openLightbox(src) {
             lightboxImg.src = src;
             lightbox.classList.add('active');
@@ -1279,7 +1281,6 @@
             lightboxImg.classList.add('scale-100');
             document.body.style.overflow = 'hidden';
         }
-
         function closeLightbox() {
             lightbox.classList.remove('active');
             lightboxImg.classList.remove('scale-100');
@@ -1287,42 +1288,7 @@
             document.body.style.overflow = '';
         }
 
-        // --- 10. GLOBAL EVENTS & PROGRESS ---
-        const scrollBtn = document.getElementById('scroll-top-btn');
-        const scrollContainer = document.getElementById('scroll-container');
-        const progressBar = document.getElementById('reading-progress-bar');
-
-        scrollContainer.addEventListener('scroll', (e) => {
-            // Scroll Top Button
-            if (e.target.scrollTop > 300) scrollBtn.classList.remove('hidden');
-            else scrollBtn.classList.add('hidden');
-
-            // UX: Reading Progress
-            const scrollTop = e.target.scrollTop;
-            const scrollHeight = e.target.scrollHeight - e.target.clientHeight;
-            const scrollPercent = (scrollTop / scrollHeight) * 100;
-            progressBar.style.width = scrollPercent + '%';
-        });
-
-        scrollBtn.onclick = () => document.getElementById('scroll-container').scrollTo({ top: 0, behavior: 'smooth' });
-
-        document.addEventListener('keydown', (e) => {
-            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
-                e.preventDefault();
-                searchInput.focus();
-            }
-            if (e.key === 'Escape') {
-                if (document.activeElement === searchInput) {
-                    searchInput.blur();
-                    if (searchInput.value) { searchInput.value = ''; renderSidebar(); }
-                } else if (lightbox.classList.contains('active')) {
-                    closeLightbox();
-                } else {
-                    closeMenu();
-                }
-            }
-        });
-
+        // Mobile Menu
         const sidebar = document.getElementById('sidebar');
         const overlay = document.getElementById('overlay');
         function openMenu() { sidebar.classList.remove('-translate-x-full'); overlay.classList.remove('hidden'); setTimeout(() => overlay.classList.remove('opacity-0'), 10); }
@@ -1331,9 +1297,21 @@
         document.getElementById('close-sidebar-btn').onclick = closeMenu;
         overlay.onclick = closeMenu;
 
+        // Events
+        document.addEventListener('keydown', (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); searchInput.focus(); }
+            if (e.key === 'Escape') {
+                if (document.activeElement === searchInput) searchInput.blur();
+                else if (lightbox.classList.contains('active')) closeLightbox();
+                else closeMenu();
+            }
+        });
+
+        // INIT
         window.onload = () => {
             fetchLatestVersion();
             initWiki();
+            lucide.createIcons();
         };
     </script>
 </body>