From 32deb0752ec6b2d3113e5ecee23109856f02831c Mon Sep 17 00:00:00 2001
From: Fabien POLLY <fabien-polly@hotmail.com>
Date: Tue, 9 Dec 2025 12:23:42 +0100
Subject: [PATCH] feat: Improve UI with early breadcrumbs, sidebar
 auto-expansion, and mobile swipe gestures, fix image and TOC rendering, and
 add an Introduction page.

---
 index.html                      | 152 ++++++++++++++++++++++++---
 wiki/01_General/Introduction.md | 178 +++++++++++++++++++++++++++++++-
 2 files changed, 316 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index d8cca6b..0ee300a 100644
--- a/index.html
+++ b/index.html
@@ -661,11 +661,21 @@
     <script>
         // --- 1. CONFIG & STATE ---
         const renderer = new marked.Renderer();
-        // Custom Image Rendering for Lazy Loading and styling
+
+        // --- FIXED IMAGE RENDERER (Handles Marked 5.0+ Object Token) ---
         renderer.image = function (href, title, text) {
+            // New Marked versions pass an object as the first argument
+            if (typeof href === 'object' && href !== null) {
+                const token = href;
+                href = token.href;
+                title = token.title;
+                text = token.text;
+            }
+
             // 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">`;
+            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>`;
@@ -813,7 +823,6 @@
                 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)) {
@@ -901,6 +910,13 @@
             const pageNav = document.getElementById('page-nav');
             const scrollContainer = document.getElementById('scroll-container');
 
+            // Set Breadcrumbs early so they appear even if loading fails/takes time
+            const cleanFolder = folder.replace(/^\d+_/, '').replace(/_/g, ' ');
+            document.getElementById('breadcrumbs').innerHTML = `
+                <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>
+            `;
+
             // UI Reset
             if (!STATE.contentCache[`${folder}/${filename}`]) {
                 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>`;
@@ -955,13 +971,6 @@
                 generateTOC();
                 renderPagination(folder, title);
 
-                // 5. Breadcrumbs
-                const cleanFolder = folder.replace(/^\d+_/, '').replace(/_/g, ' ');
-                document.getElementById('breadcrumbs').innerHTML = `
-                    <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}`;
@@ -969,6 +978,8 @@
                 }
 
                 // 7. Scroll
+                STATE.expandedSections = new Set([folder]);
+                renderSidebar();
                 if (window.location.hash) {
                     const el = document.getElementById(window.location.hash.substring(1));
                     if (el) el.scrollIntoView();
@@ -995,6 +1006,9 @@
                         2. Check capitalization (Linux/GitHub is case-sensitive).<br>
                         3. Verify <code>.nojekyll</code> is at the root of your repo.
                     </p>`;
+
+                // Breadcrumbs Fallback
+                document.getElementById('breadcrumbs').innerHTML = `<span class="hover:text-hack-heading cursor-pointer" onclick="loadDefault()">wiki</span> <span>/</span> <span class="text-red-500">Error</span>`;
             }
         }
 
@@ -1049,7 +1063,7 @@
         }
 
         function enhanceMarkdownContent() {
-            // Anchor Links
+            // Anchor Links Generation (Same ID logic as before)
             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, '');
 
@@ -1066,6 +1080,34 @@
                 h.appendChild(anchor);
             });
 
+            // NEW: Fix Manual TOC Links (Smart Handler)
+            // This catches clicks on generated TOC links like [Introduction](#-introduction)
+            document.querySelectorAll('#markdown-viewer a[href^="#"]').forEach(link => {
+                // Ignore the anchor links we just created above (class anchor-link)
+                if (link.classList.contains('anchor-link')) return;
+
+                link.onclick = (e) => {
+                    e.preventDefault();
+                    const hash = link.getAttribute('href').substring(1); // remove #
+
+                    // 1. Try exact match (e.g. if ID matches TOC exactly)
+                    let target = document.getElementById(hash);
+
+                    // 2. Fallback: Try removing leading dashes (Fixes GitHub style TOC vs JS generated IDs)
+                    if (!target) {
+                        const cleanHash = hash.replace(/^-+/, '');
+                        target = document.getElementById(cleanHash);
+                    }
+
+                    if (target) {
+                        target.scrollIntoView({ behavior: 'smooth' });
+                        history.pushState(null, null, `#${hash}`);
+                    } else {
+                        console.warn('Anchor target not found:', hash);
+                    }
+                };
+            });
+
             // Syntax Highlight
             document.querySelectorAll('pre code').forEach((el) => hljs.highlightElement(el));
 
@@ -1091,13 +1133,29 @@
 
             // External Links
             document.querySelectorAll('#markdown-viewer a').forEach(a => {
-                if (a.hostname !== window.location.hostname && !a.className.includes('anchor-link')) {
+
+                // Skip if:
+                // - link is internal
+                // - it's an anchor-link
+                // - it has no href
+                // - href starts with "#"
+                // - link contains an <img> → prevents icon under badges
+                if (
+                    a.hostname !== window.location.hostname &&
+                    !a.classList.contains('anchor-link') &&
+                    a.getAttribute('href') &&
+                    !a.getAttribute('href').startsWith('#') &&
+                    !a.querySelector('img') // ⬅ NEW: do NOT add icon when link wraps an image
+                ) {
                     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>';
+                    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) {
@@ -1336,8 +1394,76 @@
             }
         });
 
+        // Initialize UI Logic (Scroll Bar) immediately
+        function initUI() {
+            const scrollContainer = document.getElementById('scroll-container');
+            const progressBar = document.getElementById('reading-progress-bar');
+            const scrollBtn = document.getElementById('scroll-top-btn');
+
+            if (scrollContainer && progressBar) {
+                scrollContainer.addEventListener('scroll', () => {
+                    const scrollTop = scrollContainer.scrollTop;
+                    const scrollHeight = scrollContainer.scrollHeight - scrollContainer.clientHeight;
+                    const scrollPercent = (scrollHeight > 0) ? (scrollTop / scrollHeight) * 100 : 0;
+                    progressBar.style.width = scrollPercent + '%';
+
+                    // Show/Hide Scroll Top Button
+                    if (scrollTop > 300) scrollBtn.classList.remove('hidden');
+                    else scrollBtn.classList.add('hidden');
+                });
+            }
+            if (scrollBtn) {
+                scrollBtn.onclick = () => scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
+            }
+        }
+        // --- MOBILE SWIPE GESTURES ---
+        // Detect swipe from left edge → open menu
+        let touchStartX = 0;
+        let touchStartY = 0;
+        let touchEndX = 0;
+        let touchEndY = 0;
+
+        const MIN_SWIPE_DISTANCE = 50;     // minimal movement to count as a swipe
+        const MAX_VERTICAL_DRIFT = 80;     // tolerance to avoid accidental scroll/swipe mix
+        const EDGE_ZONE = 40;              // swipe must start within 40px from screen left
+
+        document.addEventListener("touchstart", (e) => {
+            const t = e.changedTouches[0];
+            touchStartX = t.clientX;
+            touchStartY = t.clientY;
+        });
+
+        document.addEventListener("touchmove", (e) => {
+            const t = e.changedTouches[0];
+            touchEndX = t.clientX;
+            touchEndY = t.clientY;
+        });
+
+        document.addEventListener("touchend", () => {
+            const dx = touchEndX - touchStartX;
+            const dy = Math.abs(touchEndY - touchStartY);
+
+            // 1. SWIPE → RIGHT = OPEN MENU
+            if (
+                touchStartX < EDGE_ZONE &&      // gesture started at screen left
+                dx > MIN_SWIPE_DISTANCE &&      // swiped enough to the right
+                dy < MAX_VERTICAL_DRIFT         // not a vertical scroll
+            ) {
+                openMenu();
+            }
+
+            // 2. SWIPE → LEFT = CLOSE MENU
+            if (
+                dx < -MIN_SWIPE_DISTANCE &&     // swipe left
+                dy < MAX_VERTICAL_DRIFT         // again avoid scroll false positives
+            ) {
+                closeMenu();
+            }
+        });
+
         // INIT
         window.onload = () => {
+            initUI();
             fetchLatestVersion();
             initWiki();
             lucide.createIcons();
diff --git a/wiki/01_General/Introduction.md b/wiki/01_General/Introduction.md
index 230ed36..d3d1d7a 100644
--- a/wiki/01_General/Introduction.md
+++ b/wiki/01_General/Introduction.md
@@ -1 +1,177 @@
-# Test2
\ No newline at end of file
+# <img src="https://github.com/user-attachments/assets/c5eb4cc1-0c3d-497d-9422-1614651a84ab" alt="thumbnail_IMG_0546" width="33"> Bjorn
+
+![Python](https://img.shields.io/badge/Python-3776AB?logo=python&logoColor=fff)
+![Status](https://img.shields.io/badge/Status-Development-blue.svg)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+[![Reddit](https://img.shields.io/badge/Reddit-Bjorn__CyberViking-orange?style=for-the-badge&logo=reddit)](https://www.reddit.com/r/Bjorn_CyberViking)
+[![Discord](https://img.shields.io/badge/Discord-Join%20Us-7289DA?style=for-the-badge&logo=discord)](https://discord.com/invite/B3ZH9taVfT)
+
+<p align="center">
+  <img src="https://github.com/user-attachments/assets/c5eb4cc1-0c3d-497d-9422-1614651a84ab" alt="thumbnail_IMG_0546" width="150">
+  <img src="https://github.com/user-attachments/assets/1b490f07-f28e-4418-8d41-14f1492890c6" alt="bjorn_epd-removebg-preview" width="150">
+</p>
+
+Bjorn is a « Tamagotchi like » sophisticated, autonomous network scanning, vulnerability assessment, and offensive security tool designed to run on a Raspberry Pi equipped with a 2.13-inch e-Paper HAT. This document provides a detailed explanation of the project.
+
+
+## 📚 Table of Contents
+
+- [Introduction](#-introduction)
+- [Features](#-features)
+- [Getting Started](#-getting-started)
+  - [Prerequisites](#-prerequisites)
+  - [Installation](#-installation)
+- [Quick Start](#quick-start)
+- [Usage Example](#-usage-example)
+- [Contributing](#-contributing)
+- [License](#-license)
+- [Contact](#-contact)
+
+## 📄 Introduction
+
+Bjorn is a powerful tool designed to perform comprehensive network scanning, vulnerability assessment, and data ex-filtration. Its modular design and extensive configuration options allow for flexible and targeted operations. By combining different actions and orchestrating them intelligently, Bjorn can provide valuable insights into network security and help identify and mitigate potential risks.
+
+The e-Paper HAT display and web interface make it easy to monitor and interact with Bjorn, providing real-time updates and status information. With its extensible architecture and customizable actions, Bjorn can be adapted to suit a wide range of security testing and monitoring needs.
+
+## 🌟 Features
+
+- **Network Scanning**: Identifies live hosts and open ports on the network.
+- **Vulnerability Assessment**: Performs vulnerability scans using Nmap and other tools.
+- **System Attacks**: Conducts brute-force attacks on various services (FTP, SSH, SMB, RDP, Telnet, SQL).
+- **File Stealing**: Extracts data from vulnerable services.
+- **User Interface**: Real-time display on the e-Paper HAT and web interface for monitoring and interaction.
+
+![Bjorn Display](https://github.com/infinition/Bjorn/assets/37984399/bcad830d-77d6-4f3e-833d-473eadd33921)
+
+## 🚀 Getting Started
+
+## 📌 Prerequisites
+
+### 📋 Prerequisites for RPI zero W (32bits)
+
+![image](https://github.com/user-attachments/assets/3980ec5f-a8fc-4848-ab25-4356e0529639)
+
+- Raspberry Pi OS installed. 
+    - Stable:
+      - System: 32-bit
+      - Kernel version: 6.6
+      - Debian version: 12 (bookworm) '2024-10-22-raspios-bookworm-armhf-lite'
+- Username and hostname set to `bjorn`.
+- 2.13-inch e-Paper HAT connected to GPIO pins.
+
+### 📋 Prerequisites for RPI zero W2 (64bits)
+
+![image](https://github.com/user-attachments/assets/e8d276be-4cb2-474d-a74d-b5b6704d22f5)
+
+I did not develop Bjorn for the raspberry pi zero w2 64bits, but several feedbacks have attested that the installation worked perfectly.
+
+- Raspberry Pi OS installed. 
+    - Stable:
+      - System: 64-bit
+      - Kernel version: 6.6
+      - Debian version: 12 (bookworm) '2024-10-22-raspios-bookworm-arm64-lite'
+- Username and hostname set to `bjorn`.
+- 2.13-inch e-Paper HAT connected to GPIO pins.
+
+
+At the moment the paper screen v2  v4 have been tested and implemented.
+I juste hope the V1 & V3 will work the same.
+
+### 🔨 Installation
+
+The fastest way to install Bjorn is using the automatic installation script :
+
+```bash
+# Download and run the installer
+wget https://raw.githubusercontent.com/infinition/Bjorn/refs/heads/main/install_bjorn.sh
+sudo chmod +x install_bjorn.sh && sudo ./install_bjorn.sh
+# Choose the choice 1 for automatic installation. It may take a while as a lot of packages and modules will be installed. You must reboot at the end.
+```
+
+For **detailed information** about **installation** process go to [Install Guide](INSTALL.md)
+
+## ⚡ Quick Start
+
+**Need help ? You struggle to find Bjorn's IP after the installation ?**
+Use my Bjorn Detector & SSH Launcher :
+
+[https://github.com/infinition/bjorn-detector](https://github.com/infinition/bjorn-detector)
+
+![ezgif-1-a310f5fe8f](https://github.com/user-attachments/assets/182f82f0-5c3a-48a9-a75e-37b9cfa2263a)
+
+**Hmm, You still need help ?**
+For **detailed information** about **troubleshooting** go to [Troubleshooting](TROUBLESHOOTING.md)
+
+**Quick Installation**: you can use the fastest way to install **Bjorn** [Getting Started](#-getting-started)
+
+## 💡 Usage Example
+
+Here's a demonstration of how Bjorn autonomously hunts through your network like a Viking raider (fake demo for illustration):
+
+```bash
+# Reconnaissance Phase
+[NetworkScanner] Discovering alive hosts...
+[+] Host found: 192.168.1.100
+    ├── Ports: 22,80,445,3306
+    └── MAC: 00:11:22:33:44:55
+
+# Attack Sequence 
+[NmapVulnScanner] Found vulnerabilities on 192.168.1.100
+    ├── MySQL 5.5 < 5.7 - User Enumeration
+    └── SMB - EternalBlue Candidate
+
+[SSHBruteforce] Cracking credentials...
+[+] Success! user:password123
+[StealFilesSSH] Extracting sensitive data...
+
+# Automated Data Exfiltration
+[SQLBruteforce] Database accessed!
+[StealDataSQL] Dumping tables...
+[SMBBruteforce] Share accessible
+[+] Found config files, credentials, backups...
+```
+
+This is just a demo output - actual results will vary based on your network and target configuration.
+
+All discovered data is automatically organized in the data/output/ directory, viewable through both the e-Paper display (as indicators) and web interface.
+Bjorn works tirelessly, expanding its network knowledge base and growing stronger with each discovery.
+
+No constant monitoring needed - just deploy and let Bjorn do what it does best: hunt for vulnerabilities.
+
+🔧 Expand Bjorn's Arsenal!
+Bjorn is designed to be a community-driven weapon forge. Create and share your own attack modules!
+
+⚠️ **For educational and authorized testing purposes only** ⚠️
+
+## 🤝 Contributing
+
+The project welcomes contributions in:
+
+- New attack modules.
+- Bug fixes.
+- Documentation.
+- Feature improvements.
+
+For **detailed information** about **contributing** process go to [Contributing Docs](CONTRIBUTING.md), [Code Of Conduct](CODE_OF_CONDUCT.md) and [Development Guide](DEVELOPMENT.md).
+
+## 📫 Contact
+
+- **Report Issues**: Via GitHub.
+- **Guidelines**:
+  - Follow ethical guidelines.
+  - Document reproduction steps.
+  - Provide logs and context.
+
+- **Author**: __infinition__
+- **GitHub**: [infinition/Bjorn](https://github.com/infinition/Bjorn)
+
+## 🌠 Stargazers
+
+[![Star History Chart](https://api.star-history.com/svg?repos=infinition/bjorn&type=Date)](https://star-history.com/#infinition/bjorn&Date)
+
+---
+
+## 📜 License
+
+2024 - Bjorn is distributed under the MIT License. For more details, please refer to the [LICENSE](LICENSE) file included in this repository.