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 @@
-
+
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 = `
-
+
${doc.title}
`;
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;
+ }
}
});
});