litruv/Docs-Viewer
1
0
Fork 0
mirror of https://github.com/litruv/Docs-Viewer.git synced 2026-07-24 02:36:07 +10:00
Code Issues Packages Projects Releases Wiki Activity

Enhance build-docs.js to extract headers from markdown files and include them in metadata

Browse Source
This commit is contained in:
Litruv
2025-03-24 17:29:17 +11:00
parent 3ab838a224
commit eda31a8066
2 changed files with 189 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
build-docs.js
View File

@@ -1,7 +1,21 @@
//get all *.md files in ./docs, reccursively, and store them in an array, with their properties in the first block, they're from obsidian
const fs = require('fs');
const path = require('path');
function extractHeaders(content) {
const headerRegex = /^(#{1,6})\s+(.+)$/gm;
const headers = [];
let match;
while ((match = headerRegex.exec(content)) !== null) {
// Don't include h1 headers as they're typically the title
if (match[1].length > 1) {
headers.push(match[2].trim());
}
}
return headers;
}
function parseFrontMatter(content) {
const lines = content.trim().split('\n');
let metadata = {};
@@ -20,9 +34,15 @@ function parseFrontMatter(content) {
}
}
const contentText = lines.slice(contentStart).join('\n').trim();
const headers = extractHeaders(contentText);
if (headers.length > 0) {
metadata.headers = headers;
}
return {
metadata,
content: lines.slice(contentStart).join('\n').trim()
content: contentText
};
}
@@ -124,7 +144,6 @@ function loadIndexTemplate() {
const indexPath = path.join(__dirname, 'index.json');
try {
const indexData = JSON.parse(fs.readFileSync(indexPath, 'utf-8'));
// Strip out documents array, keeping all other properties
delete indexData.documents;
return indexData;
} catch (error) {
@@ -156,12 +175,10 @@ function combineIndexes(dir) {
const indexData = loadIndexTemplate();
const documents = readAllMarkdownFiles(dir);
// Add the documents array with new content
indexData.documents = documents;
writeIndexFile(indexData);
}
// Replace console.log with combineIndexes call
combineIndexes(path.join(__dirname, 'docs'));
module.exports = readAllMarkdownFiles;

164
index.js
View File

@@ -49,13 +49,27 @@ class SearchService {
if (doc.type === 'folder') {
const currentPath = parentPath ? `${parentPath} / ${doc.title}` : doc.title;
if (doc.path) {
this.searchIndex.push({
title: doc.title,
path: doc.path,
slug: doc.slug,
location: currentPath,
type: 'folder'
});
if (doc.showfolderpage !== 'false') {
this.searchIndex.push({
title: doc.title,
path: doc.path,
slug: doc.slug,
location: currentPath,
type: 'folder'
});
}
if (doc.headers) {
doc.headers.forEach(header => {
this.searchIndex.push({
title: header,
path: doc.path,
slug: `${doc.slug}#${header.toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-')}`,
location: `${currentPath} / ${doc.title}`,
type: 'header'
});
});
}
}
if (doc.items) {
this.processDocuments(doc.items, currentPath);
@@ -68,6 +82,18 @@ class SearchService {
location: parentPath,
type: 'file'
});
if (doc.headers) {
doc.headers.forEach(header => {
this.searchIndex.push({
title: header,
path: doc.path,
slug: `${doc.slug}#${header.toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-')}`,
location: `${parentPath} / ${doc.title}`,
type: 'header'
});
});
}
}
});
}
@@ -77,21 +103,23 @@ class SearchService {
query = query.toLowerCase();
return this.searchIndex
.filter(item => {
const titleMatch = item.title.toLowerCase().includes(query);
const pathMatch = item.path.toLowerCase().includes(query);
const locationMatch = item.location.toLowerCase().includes(query);
return titleMatch || pathMatch || locationMatch;
.map(item => {
const titleLower = item.title.toLowerCase();
let score = 0;
if (titleLower === query) score = 100;
else if (titleLower.startsWith(query)) score = 80;
else if (titleLower.includes(query)) score = 60;
else if (item.path.toLowerCase().includes(query)) score = 40;
else if (item.location.toLowerCase().includes(query)) score = 20;
if (item.type === 'header') score += 5;
return { ...item, score };
})
.sort((a, b) => {
// Prioritize exact matches in title
const aTitle = a.title.toLowerCase();
const bTitle = b.title.toLowerCase();
if (aTitle === query) return -1;
if (bTitle === query) return 1;
return aTitle.localeCompare(bTitle);
})
.slice(0, 10); // Limit to 10 results
.filter(item => item.score > 0)
.sort((a, b) => b.score - a.score)
.slice(0, 10);
}
}
@@ -113,8 +141,8 @@ class IndexService {
const found = this.findDocumentByTitle(doc.items, title);
if (found) return found;
} else if (doc.title === title ||
doc.path.endsWith(title + '.md') ||
doc.slug === title.toLowerCase().replace(/ /g, '-')) {
doc.path.endsWith(title + '.md') ||
doc.slug === title.toLowerCase().replace(/ /g, '-')) {
return doc;
}
}
@@ -156,12 +184,12 @@ class DOMService {
titleText: document.querySelector('.title-text .page-title'),
leftSidebar: document.querySelector('.left-sidebar'),
menuButton: document.querySelector('.menu-button'),
header: document.querySelector('title-bar'), // Add header element
header: document.querySelector('title-bar'),
searchInput: document.getElementById('search-input'),
searchResults: document.getElementById('search-results'),
clearSearch: document.getElementById('clear-search')
};
this.headerOffset = 60; // Fixed header heightfsetHeight || 0; // Get header height
this.headerOffset = 60;
}
setupMobileMenu() {
@@ -196,14 +224,24 @@ class DOMService {
const folderHeader = document.createElement('div');
folderHeader.className = 'folder-header';
const iconClass = doc.icon || `fas fa-folder${doc.defaultOpen !== false ? '-open' : ''}`;
folderHeader.innerHTML = doc.path ?
this.createFolderHeaderWithFile(iconClass, doc) :
this.createFolderHeaderBasic(iconClass, doc);
this.setupFolderListeners(folderDiv, folderHeader, doc);
// Only add folder click handler if showfolderpage is not false
if (doc.path && doc.metadata?.showfolderpage !== false) {
folderHeader.innerHTML = this.createFolderHeaderWithFile(iconClass, doc);
this.setupFolderListeners(folderDiv, folderHeader, doc);
} else {
folderHeader.innerHTML = this.createFolderHeaderBasic(iconClass, doc);
// Only setup the folder open/close functionality
folderHeader.addEventListener('click', () => {
folderDiv.classList.toggle('open');
if (!doc.icon) {
const icon = folderHeader.querySelector('.folder-icon');
icon.classList.toggle('fa-folder-closed');
icon.classList.toggle('fa-folder-open');
}
});
}
const folderContent = document.createElement('div');
folderContent.className = 'folder-content';
@@ -263,14 +301,16 @@ class DOMService {
}
createFolderHeaderWithFile(iconClass, doc) {
const showFolderPage = doc.showfolderpage !== 'false';
return `
<div class="folder-icons">
<i class="${iconClass} folder-icon"></i>
</div>
<span>${doc.title}</span>
<a href="?${doc.slug}" class="folder-link" title="View folder page">
<i class="fas fa-file-alt"></i>
</a>`;
<span>${doc.title}</pan>
${showFolderPage ? `
<a href="?${doc.slug}" class="folder-link" title="View folder page">
<i class="fas fa-file-alt"></i>
</a>` : ''}`;
}
createFolderHeaderBasic(iconClass, doc) {
@@ -402,7 +442,9 @@ class DOMService {
div.className = 'search-result';
const icon = document.createElement('i');
icon.className = result.type === 'folder' ? 'fas fa-folder' : 'fas fa-file-alt';
icon.className = result.type === 'folder' ? 'fas fa-folder' :
result.type === 'header' ? 'fas fa-hashtag' :
'fas fa-file-alt';
const link = document.createElement('a');
link.href = `?${result.slug}`;
@@ -418,8 +460,13 @@ class DOMService {
e.preventDefault();
this.elements.searchInput.value = '';
container.style.display = 'none';
const [baseSlug, hash] = result.slug.split('#');
history.pushState(null, '', link.href);
this.eventBus.emit('navigation:requested', { slug: result.slug });
this.eventBus.emit('navigation:requested', {
slug: baseSlug,
hash: hash ? `#${hash}` : '',
fromSearch: true // Add this flag
});
});
div.appendChild(link);
@@ -472,7 +519,6 @@ class DocumentService {
return link.replace(/^<a /, `<a${attrs} `);
};
// Add custom heading renderer to make headers clickable - without link icon
const originalHeading = renderer.heading.bind(renderer);
renderer.heading = (text, level) => {
const escapedText = text.toLowerCase()
@@ -610,15 +656,12 @@ class NavigationService {
setupEventListeners() {
window.addEventListener('popstate', async () => {
const search = window.location.search;
// If no search params or just '?', use default page
const hash = window.location.hash;
const slug = (search === '' || search === '?') ?
window._indexData.defaultPage :
search.replace(/^\?/, '');
search.replace(/^\?/, '').split('#')[0];
this.eventBus.emit('navigation:requested', {
slug,
hash: window.location.hash
});
this.eventBus.emit('navigation:requested', { slug, hash });
});
document.addEventListener('click', async (e) => {
@@ -626,7 +669,6 @@ class NavigationService {
if (target) {
e.preventDefault();
const slug = target.href.split('?').pop();
// Use clean URL format without equal sign
history.pushState(null, '', `?${slug}`);
this.eventBus.emit('navigation:requested', { slug });
}
@@ -647,9 +689,9 @@ class Documentation {
}
setupEventListeners() {
this.eventBus.on('navigation:requested', async ({ slug }) => {
this.eventBus.on('navigation:requested', async ({ slug, hash }) => {
slug = slug.replace(/^[?=]/, '');
await this.loadDocumentBySlug(slug);
await this.loadDocumentBySlug(slug, hash);
});
this.eventBus.on('document:load', async ({ path }) => {
@@ -692,7 +734,6 @@ class Documentation {
this.indexData.documents.forEach(doc =>
this.domService.createFileIndexItem(doc, this.domService.elements.fileIndex));
// Simplified URL parameter handling
const search = window.location.search;
const slug = search === '' || search === '?'
? this.indexData.defaultPage
@@ -735,29 +776,30 @@ class Documentation {
}
}
async loadDocumentBySlug(slug) {
const doc = this.indexService.findDocumentBySlug(this.indexData.documents, slug);
async loadDocumentBySlug(slug, hash) {
const [baseSlug] = slug.split('#');
const doc = this.indexService.findDocumentBySlug(this.indexData.documents, baseSlug);
if (!doc) {
this.domService.setError(`Document not found: ${slug}`);
this.domService.setError(`Document not found: ${baseSlug}`);
return;
}
if (doc.type === 'folder') {
if (doc.path) {
await this.loadDocument(doc.path);
await this.loadDocument(doc.path, hash);
} else if (doc.items?.length > 0) {
await this.loadDocument(doc.items[0].path);
await this.loadDocument(doc.items[0].path, hash);
} else {
this.domService.setError('This folder is empty.');
}
return;
}
await this.loadDocument(doc.path);
await this.loadDocument(doc.path, hash);
}
async loadDocument(path) {
async loadDocument(path, hash, fromSearch = false) {
try {
const { content, metadata, marked, title } = await this.documentService.loadDocument(path);
@@ -768,10 +810,8 @@ class Documentation {
const headings = document.querySelectorAll('h2, h3, h4, h5, h6');
const headingLinks = this.domService.createOutline(headings);
// Add click handlers to all headers
headings.forEach(heading => {
heading.addEventListener('click', (e) => {
// Don't trigger if clicking on fold toggle
if (e.target.closest('svg') || e.target.closest('.header-anchor')) return;
const id = heading.id;
@@ -789,12 +829,16 @@ class Documentation {
window._currentPath = path;
if (window.location.hash) {
const element = document.getElementById(window.location.hash.slice(1));
if (hash) {
const element = document.getElementById(hash.slice(1));
if (element) {
const delay = fromSearch ? 300 : 100;
setTimeout(() => {
this.domService.scrollToElement(element);
}, 100);
element.classList.remove('highlight');
void element.offsetWidth;
element.classList.add('highlight');
}, delay);
}
} else {
window.scrollTo({ top: 0, behavior: 'smooth' });