From 6392cac91dd298ec3db35dad8c089f320349ea77 Mon Sep 17 00:00:00 2001
From: Max Litruv Boonzaayer <litruv@gmail.com>
Date: Tue, 4 Feb 2025 16:11:44 +1100
Subject: [PATCH] Add folder configuration options and update Font Awesome
 version

---
 README.md  | 26 +++++++++++++++++++++++++-
 index.html |  2 +-
 index.js   | 27 +++++++++++++++++++++------
 3 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index c41cdd1..c25da65 100644
--- a/README.md
+++ b/README.md
@@ -79,10 +79,34 @@ styles.css         # Custom styling
 }
 ```
 
+## Configuring Folders
+You can control whether a folder is expanded by default using `defaultOpen`. You can also specify a Font Awesome `icon`. 
+Both properties (`defaultOpen` and `icon`) are optional — if you omit them, the folder will use default behavior.
+
+Example in index.json:
+```json
+{
+    "folders": [
+        {
+            "title": "Folder 1",
+            "defaultOpen": true,
+            "icon": "fa-folder",
+            "documents": [
+                {
+                    "title": "Document 1",
+                    "path": "docs/Document1.md"
+                }
+            ]
+        }
+    ]
+}
+```
+
 ## Acknowledgements
 
 - [marked](https://github.com/markedjs/marked) for Markdown parsing.
-- [Prism](https://prismjs.com/) for syntax highlighting.
+- [highlight.js](https://highlightjs.org/) for syntax highlighting.
+- [Font Awesome](https://fontawesome.com/) for icons
 
 ## License
 
diff --git a/index.html b/index.html
index fb0ad76..ede0f54 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
     <meta name="twitter:description" content="Documentation for Litruv's tools and projects">
     
     <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
     
 </head>
diff --git a/index.js b/index.js
index 820bfe8..5e62337 100644
--- a/index.js
+++ b/index.js
@@ -54,8 +54,11 @@ function createFileIndexItem(doc, container, level = 0) {
 
         const folderHeader = document.createElement('div');
         folderHeader.className = 'folder-header';
+        
+        // Use custom icon if provided, otherwise use default folder icon
+        const iconClass = doc.icon || `fas fa-folder${doc.defaultOpen !== false ? '-open' : ''}`;
         folderHeader.innerHTML = `
-            <i class="fas fa-folder${doc.defaultOpen !== false ? '-open' : ''} folder-icon"></i>
+            <i class="${iconClass} folder-icon"></i>
             <span>${doc.title}</span>
         `;
         folderDiv.appendChild(folderHeader);
@@ -67,8 +70,10 @@ function createFileIndexItem(doc, container, level = 0) {
 
         folderHeader.addEventListener('click', () => {
             folderDiv.classList.toggle('open');
-            folderHeader.querySelector('.folder-icon').classList.toggle('fa-folder-closed');
-            folderHeader.querySelector('.folder-icon').classList.toggle('fa-folder-open');
+            if (!doc.icon) {  // Only toggle folder icon if using default
+                folderHeader.querySelector('.folder-icon').classList.toggle('fa-folder-closed');
+                folderHeader.querySelector('.folder-icon').classList.toggle('fa-folder-open');
+            }
         });
 
         container.appendChild(folderDiv);
@@ -348,10 +353,20 @@ async function loadDocument(path) {
                 const svg = toggleBtn.querySelector('svg');
                 const isFolded = svg.style.transform === 'rotate(90deg)';
                 svg.style.transform = isFolded ? 'rotate(0deg)' : 'rotate(90deg)';
+                const currentLevel = parseInt(heading.tagName[1]);
                 let next = heading.nextElementSibling;
-                while (next && !/^H[1-6]$/.test(next.tagName)) {
-                    next.style.display = isFolded ? 'none' : '';
-                    next = next.nextElementSibling;
+                while (next) {
+                    if (!/^H[1-6]$/.test(next.tagName)) {
+                        next.style.display = isFolded ? 'none' : '';
+                        next = next.nextElementSibling;
+                    } else {
+                        const nextLevel = parseInt(next.tagName[1]);
+                        if (nextLevel <= currentLevel) {
+                            break;
+                        }
+                        next.style.display = isFolded ? 'none' : '';
+                        next = next.nextElementSibling;
+                    }
                 }
             });
         });