429 lines
17 KiB
JavaScript
429 lines
17 KiB
JavaScript
/* ── Obsidian Vault Reader ─────────────────────────────────────────────
|
|
* File tree navigation, markdown rendering, wiki-links, search.
|
|
* Relies on server.py's /api/vault/* endpoints.
|
|
*/
|
|
|
|
const VAULT_API = '/api/vault';
|
|
|
|
// ── Markdown Renderer ────────────────────────────────────────────────
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.appendChild(document.createTextNode(text));
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function renderMarkdown(md) {
|
|
// Normalise line endings
|
|
let text = md.replace(/\r\n?/g, '\n');
|
|
|
|
// Extract code blocks first so they're not mangled by inline rules
|
|
const blocks = [];
|
|
text = text.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, lang, code) => {
|
|
const idx = blocks.length;
|
|
blocks.push(`<pre><code class="lang-${escapeHtml(lang || '')}">${escapeHtml(code.trimEnd())}</code></pre>`);
|
|
return `\x00CODEBLOCK${idx}\x00`;
|
|
});
|
|
|
|
// Inline code
|
|
text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
|
|
|
|
// Wiki-links [[Page Name]] → clickable links
|
|
text = text.replace(/\[\[([^\]]+)\]\]/g, (_, page) => {
|
|
const label = page.includes('|') ? page.split('|')[1] : page;
|
|
const target = page.split('|')[0];
|
|
const href = '#' + target.replace(/\s+/g, '-').toLowerCase();
|
|
return `<a href="#" class="wiki-link" data-wiki-link="${escapeHtml(target)}">${escapeHtml(label)}</a>`;
|
|
});
|
|
|
|
// Images 
|
|
text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" loading="lazy">');
|
|
|
|
// Links [text](url)
|
|
text = text.replace(/(?<!!)\[([^\]]*)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
|
|
|
|
// Bold/italic: ***bold italic***, **bold**, *italic*
|
|
text = text.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
|
|
text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
|
|
text = text.replace(/(?<!\*)\*([^*\n]+)\*(?!\*)/g, '<em>$1</em>');
|
|
|
|
// Strikethrough
|
|
text = text.replace(/~~(.+?)~~/g, '<del>$1</del>');
|
|
|
|
// Blockquotes
|
|
text = text.replace(/^>(.*)$/gm, '<blockquote>$1</blockquote>');
|
|
text = text.replace(/^>(.*)$/gm, '<blockquote>$1</blockquote>');
|
|
|
|
// Horizontal rules
|
|
text = text.replace(/^(---|\*\*\*|___)\s*$/gm, '<hr>');
|
|
|
|
// Headings (must be at start of line)
|
|
text = text.replace(/^######\s+(.+)$/gm, '<h6>$1</h6>');
|
|
text = text.replace(/^#####\s+(.+)$/gm, '<h5>$1</h5>');
|
|
text = text.replace(/^####\s+(.+)$/gm, '<h4>$1</h4>');
|
|
text = text.replace(/^###\s+(.+)$/gm, '<h3>$1</h3>');
|
|
text = text.replace(/^##\s+(.+)$/gm, '<h2>$1</h2>');
|
|
text = text.replace(/^#\s+(.+)$/gm, function (_, title) {
|
|
const id = title.replace(/\s+/g, '-').replace(/[^\w-]/g, '').toLowerCase();
|
|
return `<h1 id="${id}">${title}</h1>`;
|
|
});
|
|
|
|
// Ordered lists
|
|
text = text.replace(/^(?:\d+\.\s.*(?:\n|$))+/gm, function (match) {
|
|
const items = match.trim().split('\n').map(l => l.replace(/^\d+\.\s+/, '').trim());
|
|
return '<ol>' + items.map(i => `<li>${i}</li>`).join('') + '</ol>\n';
|
|
});
|
|
|
|
// Unordered lists
|
|
text = text.replace(/^(?:[-*+]\s.*(?:\n|$))+/gm, function (match) {
|
|
const items = match.trim().split('\n').map(l => l.replace(/^[-*+]\s+/, '').trim());
|
|
return '<ul>' + items.map(i => `<li>${i}</li>`).join('') + '</ul>\n';
|
|
});
|
|
|
|
// Tables (pipe tables: header | separator | rows)
|
|
text = text.replace(/^(\|.+\|)\n\|[-| :]+\|\n((?:\|.+\|\n?)*)/gm, function (_, header, rows) {
|
|
const headers = header.split('|').map(c => c.trim()).filter(Boolean);
|
|
const rowLines = rows.trim().split('\n').filter(l => l.trim());
|
|
const body = rowLines.map(r => {
|
|
const cells = r.split('|').map(c => c.trim()).filter(Boolean);
|
|
return '<tr>' + cells.map(c => `<td>${c}</td>`).join('') + '</tr>';
|
|
}).join('');
|
|
return '<table><thead><tr>' + headers.map(h => `<th>${h}</th>`).join('') + '</tr></thead><tbody>' + body + '</tbody></table>\n';
|
|
});
|
|
|
|
// Restore code blocks
|
|
text = text.replace(/\x00CODEBLOCK(\d+)\x00/g, (_, idx) => blocks[parseInt(idx)]);
|
|
|
|
// Double line breaks → paragraph breaks (but not inside block elements)
|
|
// Simple approach: wrap consecutive text lines in <p> tags
|
|
// Skip elements that are already block-level
|
|
const blockTags = ['<h1', '<h2', '<h3', '<h4', '<h5', '<h6', '<pre', '<ul', '<ol', '<blockquote', '<hr', '<table', '<div'];
|
|
const lines = text.split('\n');
|
|
let html = '';
|
|
let paraLines = [];
|
|
|
|
function flushPara() {
|
|
if (paraLines.length) {
|
|
const pText = paraLines.join('<br>');
|
|
if (pText.trim()) {
|
|
html += '<p>' + pText.trim() + '</p>\n';
|
|
}
|
|
paraLines = [];
|
|
}
|
|
}
|
|
|
|
for (let i = 0; i < lines.length; i++) {
|
|
const line = lines[i].trim();
|
|
if (!line) {
|
|
flushPara();
|
|
continue;
|
|
}
|
|
const isBlock = blockTags.some(tag => line.startsWith(tag));
|
|
if (isBlock) {
|
|
flushPara();
|
|
html += line + '\n';
|
|
} else {
|
|
paraLines.push(line);
|
|
}
|
|
}
|
|
flushPara();
|
|
|
|
return html;
|
|
}
|
|
|
|
// ── Vault API helpers ─────────────────────────────────────────────────
|
|
async function apiFetch(url) {
|
|
const resp = await fetch(url);
|
|
if (!resp.ok) {
|
|
let msg = `HTTP ${resp.status}`;
|
|
try {
|
|
const body = await resp.json();
|
|
if (body.error) msg = body.error;
|
|
} catch (_) {}
|
|
throw new Error(msg);
|
|
}
|
|
return resp.json();
|
|
}
|
|
|
|
// ── Tree Node Cache ───────────────────────────────────────────────────
|
|
// We cache directory contents so expanding/collapsing folders doesn't re-fetch.
|
|
const treeCache = new Map();
|
|
|
|
async function getTree(dirPath) {
|
|
const key = dirPath || '';
|
|
if (treeCache.has(key)) return treeCache.get(key);
|
|
const params = dirPath ? `?path=${encodeURIComponent(dirPath)}` : '';
|
|
const data = await apiFetch(`${VAULT_API}/tree${params}`);
|
|
treeCache.set(key, data);
|
|
return data;
|
|
}
|
|
|
|
function invalidateTreeCache(path) {
|
|
// If we update a path, clear its parent cache too
|
|
const parts = path.split('/');
|
|
while (parts.length) {
|
|
treeCache.delete(parts.join('/'));
|
|
parts.pop();
|
|
}
|
|
treeCache.delete(''); // root
|
|
}
|
|
|
|
// ── Tree Panel ────────────────────────────────────────────────────────
|
|
let treeLoadStack = []; // tracks which nodes are expanded
|
|
|
|
function renderTree(dirPath, container, level) {
|
|
level = level || 0;
|
|
const padding = level * 18;
|
|
|
|
getTree(dirPath).then(data => {
|
|
const items = data.items || [];
|
|
for (const item of items) {
|
|
const node = document.createElement('div');
|
|
node.className = 'vault-tree-node';
|
|
node.style.paddingLeft = (padding + 4) + 'px';
|
|
|
|
if (item.type === 'folder') {
|
|
const isExpanded = treeLoadStack.includes(dirPath + '/' + item.name);
|
|
const icon = isExpanded ? '▼' : '▶';
|
|
node.innerHTML = `<span class="tree-folder-icon">${icon}</span> <span class="tree-folder-name">${escapeHtml(item.name)}</span>`;
|
|
node.className += ' vault-tree-folder';
|
|
node._path = dirPath ? dirPath + '/' + item.name : item.name;
|
|
node._expanded = isExpanded;
|
|
|
|
if (isExpanded) {
|
|
const childContainer = document.createElement('div');
|
|
childContainer.className = 'vault-tree-children';
|
|
node.appendChild(childContainer);
|
|
renderTree(node._path, childContainer, level + 1);
|
|
}
|
|
|
|
node.addEventListener('click', e => {
|
|
e.stopPropagation();
|
|
toggleFolder(node);
|
|
});
|
|
} else if (item.name.endsWith('.md') || item.name.endsWith('.txt') || item.name.endsWith('.markdown')) {
|
|
node.innerHTML = `<span class="tree-file-icon">📄</span> <span class="tree-file-name">${escapeHtml(item.name)}</span>`;
|
|
node.className += ' vault-tree-file';
|
|
node._path = dirPath ? dirPath + '/' + item.name : item.name;
|
|
node.addEventListener('click', e => {
|
|
e.stopPropagation();
|
|
loadFile(node._path);
|
|
});
|
|
} else {
|
|
node.innerHTML = `<span class="tree-file-icon">📄</span> <span class="tree-file-name tree-muted">${escapeHtml(item.name)}</span>`;
|
|
node.className += ' vault-tree-file vault-tree-other';
|
|
}
|
|
container.appendChild(node);
|
|
}
|
|
}).catch(err => {
|
|
const errNode = document.createElement('div');
|
|
errNode.className = 'vault-tree-error';
|
|
errNode.textContent = '⚠️ ' + err.message;
|
|
container.appendChild(errNode);
|
|
});
|
|
}
|
|
|
|
function toggleFolder(node) {
|
|
const children = node.querySelector('.vault-tree-children');
|
|
const icon = node.querySelector('.tree-folder-icon');
|
|
if (children) {
|
|
// Collapse
|
|
node.removeChild(children);
|
|
icon.textContent = '▶';
|
|
node._expanded = false;
|
|
const idx = treeLoadStack.indexOf(node._path);
|
|
if (idx > -1) treeLoadStack.splice(idx, 1);
|
|
} else {
|
|
// Expand
|
|
icon.textContent = '▼';
|
|
node._expanded = true;
|
|
treeLoadStack.push(node._path);
|
|
const childContainer = document.createElement('div');
|
|
childContainer.className = 'vault-tree-children';
|
|
node.appendChild(childContainer);
|
|
renderTree(node._path, childContainer, parseInt(node.style.paddingLeft) / 18 + 1);
|
|
}
|
|
}
|
|
|
|
async function loadTree(rootPath) {
|
|
const container = document.getElementById('vault-tree');
|
|
container.innerHTML = ''; // clear
|
|
treeLoadStack = [];
|
|
renderTree(rootPath, container, 0);
|
|
}
|
|
|
|
// ── Content Panel ─────────────────────────────────────────────────────
|
|
async function loadFile(filePath) {
|
|
const panel = document.getElementById('vault-content');
|
|
panel.innerHTML = '<div class="vault-loading">Loading...</div>';
|
|
|
|
try {
|
|
const data = await apiFetch(`${VAULT_API}/read?path=${encodeURIComponent(filePath)}`);
|
|
const html = renderMarkdown(data.content);
|
|
|
|
panel.innerHTML = `
|
|
<div class="vault-file-header">
|
|
<span class="vault-file-path">${escapeHtml(data.path)}</span>
|
|
</div>
|
|
<div class="vault-markdown-body">${html}</div>
|
|
`;
|
|
|
|
// Wire up wiki-link clicks
|
|
panel.querySelectorAll('.wiki-link').forEach(link => {
|
|
link.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
const target = link.dataset.wikiLink;
|
|
navigateToWikiPage(target);
|
|
});
|
|
});
|
|
|
|
// Highlight current file in tree
|
|
document.querySelectorAll('.vault-tree-file.active').forEach(el => el.classList.remove('active'));
|
|
document.querySelectorAll('.vault-tree-file').forEach(el => {
|
|
if (el._path === filePath) {
|
|
el.classList.add('active');
|
|
el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|
}
|
|
});
|
|
|
|
} catch (err) {
|
|
panel.innerHTML = `<div class="vault-error"><strong>Error:</strong> ${escapeHtml(err.message)}</div>`;
|
|
}
|
|
}
|
|
|
|
async function navigateToWikiPage(pageName) {
|
|
// Look for a file named after the wiki link
|
|
const encoded = encodeURIComponent(pageName);
|
|
// Try exact filename first, then search
|
|
const possiblePaths = [
|
|
pageName + '.md',
|
|
'wiki/' + pageName + '.md',
|
|
pageName + '/' + pageName + '.md',
|
|
];
|
|
|
|
for (const p of possiblePaths) {
|
|
try {
|
|
await apiFetch(`${VAULT_API}/read?path=${encodeURIComponent(p)}`);
|
|
loadFile(p);
|
|
return;
|
|
} catch (_) {}
|
|
}
|
|
|
|
// Fallback: search for it
|
|
const data = await apiFetch(`${VAULT_API}/search?q=${encodeURIComponent(pageName)}`);
|
|
if (data.results && data.results.length > 0) {
|
|
loadFile(data.results[0].path);
|
|
} else {
|
|
const panel = document.getElementById('vault-content');
|
|
panel.innerHTML = `<div class="vault-error"><strong>Page not found:</strong> ${escapeHtml(pageName)}</div>`;
|
|
}
|
|
}
|
|
|
|
// ── Search ────────────────────────────────────────────────────────────
|
|
let searchTimeout = null;
|
|
|
|
function setupSearch() {
|
|
const input = document.getElementById('vault-search-input');
|
|
const results = document.getElementById('vault-search-results');
|
|
|
|
input.addEventListener('input', () => {
|
|
clearTimeout(searchTimeout);
|
|
const q = input.value.trim();
|
|
if (q.length < 2) {
|
|
results.hidden = true;
|
|
return;
|
|
}
|
|
searchTimeout = setTimeout(() => performSearch(q), 300);
|
|
});
|
|
|
|
// Close on Escape / click outside
|
|
document.addEventListener('click', e => {
|
|
if (!e.target.closest('.vault-search-box')) {
|
|
results.hidden = true;
|
|
}
|
|
});
|
|
|
|
input.addEventListener('keydown', e => {
|
|
if (e.key === 'Escape') results.hidden = true;
|
|
if (e.key === 'Enter' && !results.hidden) {
|
|
const first = results.querySelector('.vault-search-result-item');
|
|
if (first) {
|
|
first.click();
|
|
results.hidden = true;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
async function performSearch(q) {
|
|
const results = document.getElementById('vault-search-results');
|
|
results.innerHTML = '<div class="vault-search-status">Searching...</div>';
|
|
results.hidden = false;
|
|
|
|
try {
|
|
const data = await apiFetch(`${VAULT_API}/search?q=${encodeURIComponent(q)}`);
|
|
if (data.count === 0) {
|
|
results.innerHTML = '<div class="vault-search-status">No results found</div>';
|
|
return;
|
|
}
|
|
|
|
let html = `<div class="vault-search-count">${data.count} result${data.count !== 1 ? 's' : ''}</div>`;
|
|
for (const r of data.results.slice(0, 50)) {
|
|
const displayPath = r.path.length > 80 ? '...' + r.path.slice(-77) : r.path;
|
|
html += `<div class="vault-search-result-item" data-path="${escapeHtml(r.path)}" data-line="${r.line}">
|
|
<div class="vault-search-result-path">${escapeHtml(displayPath)}:${r.line}</div>
|
|
<div class="vault-search-result-snippet">${escapeHtml(r.snippet)}</div>
|
|
</div>`;
|
|
}
|
|
if (data.count > 50) {
|
|
html += `<div class="vault-search-status">... and ${data.count - 50} more</div>`;
|
|
}
|
|
results.innerHTML = html;
|
|
|
|
results.querySelectorAll('.vault-search-result-item').forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
loadFile(item.dataset.path);
|
|
results.hidden = true;
|
|
document.getElementById('vault-search-input').value = '';
|
|
});
|
|
});
|
|
} catch (err) {
|
|
results.innerHTML = `<div class="vault-search-status">Error: ${escapeHtml(err.message)}</div>`;
|
|
}
|
|
}
|
|
|
|
// ── Init ──────────────────────────────────────────────────────────────
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Only init vault when its panel is shown
|
|
const vaultPanel = document.getElementById('vault');
|
|
const observer = new MutationObserver(() => {
|
|
if (!vaultPanel.hidden && !vaultPanel.dataset.vaultLoaded) {
|
|
vaultPanel.dataset.vaultLoaded = 'true';
|
|
initVault();
|
|
}
|
|
});
|
|
observer.observe(vaultPanel, { attributes: true, attributeFilter: ['hidden'] });
|
|
|
|
// Also check initially
|
|
if (!vaultPanel.hidden && !vaultPanel.dataset.vaultLoaded) {
|
|
vaultPanel.dataset.vaultLoaded = 'true';
|
|
initVault();
|
|
}
|
|
|
|
// Toggle tree sidebar on mobile
|
|
document.getElementById('vault-toggle-tree').addEventListener('click', () => {
|
|
document.getElementById('vault-tree').classList.toggle('vault-tree-visible');
|
|
});
|
|
});
|
|
|
|
function initVault() {
|
|
setupSearch();
|
|
loadTree('');
|
|
|
|
// Close tree on file click in mobile view
|
|
document.getElementById('vault-tree').addEventListener('click', e => {
|
|
if (window.innerWidth <= 900 && e.target.closest('.vault-tree-file')) {
|
|
document.getElementById('vault-tree').classList.remove('vault-tree-visible');
|
|
}
|
|
});
|
|
}
|