848 lines
27 KiB
HTML
848 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ObsiGate - Popout</title>
|
|
<script>
|
|
document.documentElement.setAttribute('data-theme', localStorage.getItem('obsigate-theme') || 'dark');
|
|
</script>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" id="hljs-theme-dark">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" id="hljs-theme-light" disabled>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
<script src="https://unpkg.com/lucide@0.344.0/dist/umd/lucide.min.js"></script>
|
|
<style>
|
|
body, html {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.popout-loading {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
z-index: 100;
|
|
transition: opacity 0.3s;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="popup-mode">
|
|
<div class="popout-loading" id="loading">Chargement...</div>
|
|
|
|
<div class="main-layout" style="height: 100vh; display: flex; position: relative; overflow: hidden;">
|
|
<main class="content-area" id="content-area" style="margin-top: 15px; flex: 1; overflow-y: auto; overflow-x: hidden;">
|
|
<!-- JavaScript will inject breadcrumb, title, and markdown content here -->
|
|
</main>
|
|
<div class="right-sidebar-resize-handle" id="right-sidebar-resize-handle"></div>
|
|
<aside class="right-sidebar hidden" id="right-sidebar" role="complementary" aria-label="Table des matières">
|
|
<div class="right-sidebar-header">
|
|
<h2 class="right-sidebar-title">SUR CETTE PAGE</h2>
|
|
<button class="right-sidebar-toggle-btn" id="right-sidebar-toggle-btn" type="button" title="Masquer le panneau">
|
|
<i data-lucide="chevron-right" style="width:16px;height:16px"></i>
|
|
</button>
|
|
</div>
|
|
<div class="outline-panel" id="outline-panel">
|
|
<nav class="outline-list" id="outline-list" role="navigation"></nav>
|
|
<div class="outline-empty" id="outline-empty" hidden>
|
|
<i data-lucide="list" style="width:24px;height:24px;opacity:0.3"></i>
|
|
<span>Aucun titre dans ce document</span>
|
|
</div>
|
|
</div>
|
|
<div class="reading-progress" id="reading-progress">
|
|
<div class="reading-progress-bar"><div class="reading-progress-fill" id="reading-progress-fill"></div></div>
|
|
<div class="reading-progress-text" id="reading-progress-text">0%</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<script>
|
|
function applyTheme(theme) {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
|
|
const darkSheet = document.getElementById('hljs-theme-dark');
|
|
const lightSheet = document.getElementById('hljs-theme-light');
|
|
if (darkSheet && lightSheet) {
|
|
darkSheet.disabled = theme !== 'dark';
|
|
lightSheet.disabled = theme !== 'light';
|
|
}
|
|
}
|
|
|
|
function initTheme() {
|
|
const saved = localStorage.getItem('obsigate-theme') || 'dark';
|
|
applyTheme(saved);
|
|
}
|
|
|
|
let rightSidebarVisible = false;
|
|
let rightSidebarWidth = 280;
|
|
let headingsCache = [];
|
|
let activeHeadingId = null;
|
|
|
|
function el(tag, attrs, children) {
|
|
const e = document.createElement(tag);
|
|
if (attrs) { for (let k in attrs) { if (k === "class") e.className = attrs[k]; else e.setAttribute(k, attrs[k]); } }
|
|
if (children) { children.forEach(c => { if (typeof c === "string") e.appendChild(document.createTextNode(c)); else e.appendChild(c); }); }
|
|
return e;
|
|
}
|
|
|
|
function safeCreateIcons() { if (window.lucide) window.lucide.createIcons(); }
|
|
|
|
const OutlineManager = {
|
|
/**
|
|
* Slugify text to create valid IDs
|
|
*/
|
|
slugify(text) {
|
|
return text
|
|
.toLowerCase()
|
|
.normalize('NFD')
|
|
.replace(/[\u0300-\u036f]/g, '')
|
|
.replace(/[^\w\s-]/g, '')
|
|
.replace(/\s+/g, '-')
|
|
.replace(/-+/g, '-')
|
|
.trim() || 'heading';
|
|
},
|
|
|
|
/**
|
|
* Parse headings from markdown content
|
|
*/
|
|
parseHeadings() {
|
|
const contentArea = document.querySelector('.md-content');
|
|
if (!contentArea) return [];
|
|
|
|
const headings = [];
|
|
const h2s = contentArea.querySelectorAll('h2');
|
|
const h3s = contentArea.querySelectorAll('h3');
|
|
const allHeadings = [...h2s, ...h3s].sort((a, b) => {
|
|
return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
|
|
});
|
|
|
|
const usedIds = new Map();
|
|
|
|
allHeadings.forEach((heading) => {
|
|
const text = heading.textContent.trim();
|
|
if (!text) return;
|
|
|
|
const level = parseInt(heading.tagName[1]);
|
|
let id = this.slugify(text);
|
|
|
|
// Handle duplicate IDs
|
|
if (usedIds.has(id)) {
|
|
const count = usedIds.get(id) + 1;
|
|
usedIds.set(id, count);
|
|
id = `${id}-${count}`;
|
|
} else {
|
|
usedIds.set(id, 1);
|
|
}
|
|
|
|
// Inject ID into heading if not present
|
|
if (!heading.id) {
|
|
heading.id = id;
|
|
} else {
|
|
id = heading.id;
|
|
}
|
|
|
|
headings.push({
|
|
id,
|
|
level,
|
|
text,
|
|
element: heading
|
|
});
|
|
});
|
|
|
|
return headings;
|
|
},
|
|
|
|
/**
|
|
* Render outline list
|
|
*/
|
|
renderOutline(headings) {
|
|
const outlineList = document.getElementById('outline-list');
|
|
const outlineEmpty = document.getElementById('outline-empty');
|
|
|
|
if (!outlineList) return;
|
|
|
|
outlineList.innerHTML = '';
|
|
|
|
if (!headings || headings.length === 0) {
|
|
outlineList.hidden = true;
|
|
if (outlineEmpty) {
|
|
outlineEmpty.hidden = false;
|
|
safeCreateIcons();
|
|
}
|
|
return;
|
|
}
|
|
|
|
outlineList.hidden = false;
|
|
if (outlineEmpty) outlineEmpty.hidden = true;
|
|
|
|
headings.forEach((heading) => {
|
|
const item = el('a', {
|
|
class: `outline-item level-${heading.level}`,
|
|
href: `#${heading.id}`,
|
|
'data-heading-id': heading.id,
|
|
role: 'link'
|
|
}, [document.createTextNode(heading.text)]);
|
|
|
|
item.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
this.scrollToHeading(heading.id);
|
|
});
|
|
|
|
outlineList.appendChild(item);
|
|
});
|
|
|
|
headingsCache = headings;
|
|
},
|
|
|
|
/**
|
|
* Scroll to heading with smooth behavior
|
|
*/
|
|
scrollToHeading(headingId) {
|
|
const heading = document.getElementById(headingId);
|
|
if (!heading) return;
|
|
|
|
const contentArea = document.getElementById('content-area');
|
|
if (!contentArea) return;
|
|
|
|
// Calculate offset for fixed header (if any)
|
|
const headerHeight = 80;
|
|
const headingTop = heading.offsetTop;
|
|
|
|
contentArea.scrollTo({
|
|
top: headingTop - headerHeight,
|
|
behavior: 'smooth'
|
|
});
|
|
|
|
// Update active state immediately
|
|
this.setActiveHeading(headingId);
|
|
},
|
|
|
|
/**
|
|
* Set active heading in outline
|
|
*/
|
|
setActiveHeading(headingId) {
|
|
if (activeHeadingId === headingId) return;
|
|
|
|
activeHeadingId = headingId;
|
|
|
|
const items = document.querySelectorAll('.outline-item');
|
|
items.forEach((item) => {
|
|
if (item.getAttribute('data-heading-id') === headingId) {
|
|
item.classList.add('active');
|
|
item.setAttribute('aria-current', 'location');
|
|
// Scroll outline item into view
|
|
item.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|
} else {
|
|
item.classList.remove('active');
|
|
item.removeAttribute('aria-current');
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Initialize outline for current document
|
|
*/
|
|
init() {
|
|
const headings = this.parseHeadings();
|
|
this.renderOutline(headings);
|
|
ScrollSpyManager.init(headings);
|
|
ReadingProgressManager.init();
|
|
},
|
|
|
|
/**
|
|
* Cleanup
|
|
*/
|
|
destroy() {
|
|
ScrollSpyManager.destroy();
|
|
ReadingProgressManager.destroy();
|
|
headingsCache = [];
|
|
activeHeadingId = null;
|
|
}
|
|
};
|
|
|
|
const ScrollSpyManager = {
|
|
observer: null,
|
|
headings: [],
|
|
|
|
init(headings) {
|
|
this.destroy();
|
|
this.headings = headings;
|
|
|
|
if (!headings || headings.length === 0) return;
|
|
|
|
const contentArea = document.getElementById('content-area');
|
|
if (!contentArea) return;
|
|
|
|
const options = {
|
|
root: contentArea,
|
|
rootMargin: '-20% 0px -70% 0px',
|
|
threshold: [0, 0.3, 0.5, 1.0]
|
|
};
|
|
|
|
this.observer = new IntersectionObserver((entries) => {
|
|
// Find the most visible heading
|
|
let mostVisible = null;
|
|
let maxRatio = 0;
|
|
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting && entry.intersectionRatio > maxRatio) {
|
|
maxRatio = entry.intersectionRatio;
|
|
mostVisible = entry.target;
|
|
}
|
|
});
|
|
|
|
if (mostVisible && mostVisible.id) {
|
|
OutlineManager.setActiveHeading(mostVisible.id);
|
|
}
|
|
}, options);
|
|
|
|
// Observe all headings
|
|
headings.forEach((heading) => {
|
|
if (heading.element) {
|
|
this.observer.observe(heading.element);
|
|
}
|
|
});
|
|
},
|
|
|
|
destroy() {
|
|
if (this.observer) {
|
|
this.observer.disconnect();
|
|
this.observer = null;
|
|
}
|
|
this.headings = [];
|
|
}
|
|
};
|
|
|
|
const ReadingProgressManager = {
|
|
scrollHandler: null,
|
|
|
|
init() {
|
|
this.destroy();
|
|
|
|
const contentArea = document.getElementById('content-area');
|
|
if (!contentArea) return;
|
|
|
|
this.scrollHandler = this.throttle(() => {
|
|
this.updateProgress();
|
|
}, 100);
|
|
|
|
contentArea.addEventListener('scroll', this.scrollHandler);
|
|
this.updateProgress();
|
|
},
|
|
|
|
updateProgress() {
|
|
const contentArea = document.getElementById('content-area');
|
|
const progressFill = document.getElementById('reading-progress-fill');
|
|
const progressText = document.getElementById('reading-progress-text');
|
|
|
|
if (!contentArea || !progressFill || !progressText) return;
|
|
|
|
const scrollTop = contentArea.scrollTop;
|
|
const scrollHeight = contentArea.scrollHeight;
|
|
const clientHeight = contentArea.clientHeight;
|
|
|
|
const maxScroll = scrollHeight - clientHeight;
|
|
const percentage = maxScroll > 0 ? Math.round((scrollTop / maxScroll) * 100) : 0;
|
|
|
|
progressFill.style.width = `${percentage}%`;
|
|
progressText.textContent = `${percentage}%`;
|
|
},
|
|
|
|
throttle(func, delay) {
|
|
let lastCall = 0;
|
|
return function(...args) {
|
|
const now = Date.now();
|
|
if (now - lastCall >= delay) {
|
|
lastCall = now;
|
|
func.apply(this, args);
|
|
}
|
|
};
|
|
},
|
|
|
|
destroy() {
|
|
const contentArea = document.getElementById('content-area');
|
|
if (contentArea && this.scrollHandler) {
|
|
contentArea.removeEventListener('scroll', this.scrollHandler);
|
|
}
|
|
this.scrollHandler = null;
|
|
|
|
// Reset progress
|
|
const progressFill = document.getElementById('reading-progress-fill');
|
|
const progressText = document.getElementById('reading-progress-text');
|
|
if (progressFill) progressFill.style.width = '0%';
|
|
if (progressText) progressText.textContent = '0%';
|
|
}
|
|
};
|
|
|
|
const RightSidebarManager = {
|
|
init() {
|
|
this.loadState();
|
|
this.initToggle();
|
|
this.initResize();
|
|
},
|
|
|
|
loadState() {
|
|
const savedVisible = localStorage.getItem('obsigate-right-sidebar-visible');
|
|
const savedWidth = localStorage.getItem('obsigate-right-sidebar-width');
|
|
|
|
if (savedVisible !== null) {
|
|
rightSidebarVisible = savedVisible === 'true';
|
|
}
|
|
|
|
if (savedWidth) {
|
|
rightSidebarWidth = parseInt(savedWidth) || 280;
|
|
}
|
|
|
|
this.applyState();
|
|
},
|
|
|
|
applyState() {
|
|
const sidebar = document.getElementById('right-sidebar');
|
|
const handle = document.getElementById('right-sidebar-resize-handle');
|
|
const tocBtn = document.getElementById('toc-toggle-btn');
|
|
const headerToggleBtn = document.getElementById('right-sidebar-toggle-btn');
|
|
|
|
if (!sidebar) return;
|
|
|
|
if (rightSidebarVisible) {
|
|
sidebar.classList.remove('hidden');
|
|
sidebar.style.width = `${rightSidebarWidth}px`;
|
|
if (handle) handle.classList.remove('hidden');
|
|
if (tocBtn) {
|
|
tocBtn.classList.add('active');
|
|
tocBtn.title = 'Masquer le sommaire';
|
|
}
|
|
if (headerToggleBtn) {
|
|
headerToggleBtn.title = 'Masquer le panneau';
|
|
headerToggleBtn.setAttribute('aria-label', 'Masquer le panneau');
|
|
}
|
|
} else {
|
|
sidebar.classList.add('hidden');
|
|
if (handle) handle.classList.add('hidden');
|
|
if (tocBtn) {
|
|
tocBtn.classList.remove('active');
|
|
tocBtn.title = 'Afficher le sommaire';
|
|
}
|
|
if (headerToggleBtn) {
|
|
headerToggleBtn.title = 'Afficher le panneau';
|
|
headerToggleBtn.setAttribute('aria-label', 'Afficher le panneau');
|
|
}
|
|
}
|
|
|
|
// Update icons
|
|
safeCreateIcons();
|
|
},
|
|
|
|
toggle() {
|
|
rightSidebarVisible = !rightSidebarVisible;
|
|
localStorage.setItem('obsigate-right-sidebar-visible', rightSidebarVisible);
|
|
this.applyState();
|
|
},
|
|
|
|
initToggle() {
|
|
const toggleBtn = document.getElementById('right-sidebar-toggle-btn');
|
|
if (toggleBtn) {
|
|
toggleBtn.addEventListener('click', () => this.toggle());
|
|
}
|
|
},
|
|
|
|
initResize() {
|
|
const handle = document.getElementById('right-sidebar-resize-handle');
|
|
const sidebar = document.getElementById('right-sidebar');
|
|
|
|
if (!handle || !sidebar) return;
|
|
|
|
let isResizing = false;
|
|
let startX = 0;
|
|
let startWidth = 0;
|
|
|
|
const onMouseDown = (e) => {
|
|
isResizing = true;
|
|
startX = e.clientX;
|
|
startWidth = sidebar.offsetWidth;
|
|
handle.classList.add('active');
|
|
document.body.style.cursor = 'ew-resize';
|
|
document.body.style.userSelect = 'none';
|
|
};
|
|
|
|
const onMouseMove = (e) => {
|
|
if (!isResizing) return;
|
|
|
|
const delta = startX - e.clientX;
|
|
let newWidth = startWidth + delta;
|
|
|
|
// Constrain width
|
|
newWidth = Math.max(200, Math.min(400, newWidth));
|
|
|
|
sidebar.style.width = `${newWidth}px`;
|
|
rightSidebarWidth = newWidth;
|
|
};
|
|
|
|
const onMouseUp = () => {
|
|
if (!isResizing) return;
|
|
|
|
isResizing = false;
|
|
handle.classList.remove('active');
|
|
document.body.style.cursor = '';
|
|
document.body.style.userSelect = '';
|
|
|
|
localStorage.setItem('obsigate-right-sidebar-width', rightSidebarWidth);
|
|
};
|
|
|
|
handle.addEventListener('mousedown', onMouseDown);
|
|
document.addEventListener('mousemove', onMouseMove);
|
|
document.addEventListener('mouseup', onMouseUp);
|
|
}
|
|
};
|
|
|
|
async function initPopout() {
|
|
const pathParts = window.location.pathname.split('/');
|
|
const vault = decodeURIComponent(pathParts[2]);
|
|
const path = decodeURIComponent(pathParts.slice(3).join('/'));
|
|
|
|
if (!vault || !path) {
|
|
document.getElementById('loading').textContent = "Paramètres invalides";
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/file/${encodeURIComponent(vault)}?path=${encodeURIComponent(path)}`, {
|
|
credentials: 'include'
|
|
});
|
|
if (!response.ok) throw new Error("Erreur lors du chargement (Essayez de vous reconnecter sur le site principal)");
|
|
|
|
const data = await response.json();
|
|
document.title = data.title + " - ObsiGate";
|
|
|
|
const area = document.getElementById('content-area');
|
|
area.innerHTML = "";
|
|
|
|
// Build breadcrumb (identical structure to app.js)
|
|
const parts = path.split("/");
|
|
const breadcrumb = document.createElement("div");
|
|
breadcrumb.className = "breadcrumb";
|
|
|
|
breadcrumb.appendChild(createBreadcrumbSep());
|
|
breadcrumb.appendChild(createBreadcrumbItem(vault));
|
|
|
|
parts.forEach((part, i) => {
|
|
breadcrumb.appendChild(createBreadcrumbSep());
|
|
const name = i === parts.length - 1 ? part.replace(/\.md$/i, "") : part;
|
|
breadcrumb.appendChild(createBreadcrumbItem(name));
|
|
});
|
|
area.appendChild(breadcrumb);
|
|
|
|
// Build file header
|
|
const header = document.createElement("div");
|
|
header.className = "file-header";
|
|
const titleDiv = document.createElement("div");
|
|
titleDiv.className = "file-title";
|
|
titleDiv.textContent = data.title;
|
|
header.appendChild(titleDiv);
|
|
|
|
// Tags
|
|
if (data.tags && data.tags.length > 0) {
|
|
const tagsDiv = document.createElement("div");
|
|
tagsDiv.className = "file-tags";
|
|
data.tags.forEach(t => {
|
|
const span = document.createElement("span");
|
|
span.className = "file-tag";
|
|
span.textContent = "#" + t;
|
|
tagsDiv.appendChild(span);
|
|
});
|
|
header.appendChild(tagsDiv);
|
|
}
|
|
|
|
// Action buttons
|
|
const actionsDiv = document.createElement("div");
|
|
actionsDiv.className = "file-actions";
|
|
|
|
const copyBtn = document.createElement("button");
|
|
copyBtn.className = "btn-action";
|
|
copyBtn.title = "Copier la source";
|
|
copyBtn.innerHTML = '<i data-lucide="copy" style="width:14px;height:14px"></i> Copier';
|
|
copyBtn.addEventListener("click", async () => {
|
|
try {
|
|
const rawUrl = `/api/file/${encodeURIComponent(vault)}/raw?path=${encodeURIComponent(path)}`;
|
|
const rawData = await (await fetch(rawUrl, {credentials: 'include'})).json();
|
|
await navigator.clipboard.writeText(rawData.raw);
|
|
copyBtn.textContent = "Copié !";
|
|
setTimeout(() => (copyBtn.innerHTML = '<i data-lucide="copy" style="width:14px;height:14px"></i> Copier'), 1500);
|
|
if (window.lucide) window.lucide.createIcons();
|
|
} catch (e) {}
|
|
});
|
|
actionsDiv.appendChild(copyBtn);
|
|
|
|
const dlBtn = document.createElement("button");
|
|
dlBtn.className = "btn-action";
|
|
dlBtn.title = "Télécharger";
|
|
dlBtn.innerHTML = '<i data-lucide="download" style="width:14px;height:14px"></i> Télécharger';
|
|
dlBtn.addEventListener("click", () => {
|
|
const a = document.createElement("a");
|
|
a.href = `/api/file/${encodeURIComponent(vault)}/download?path=${encodeURIComponent(path)}`;
|
|
a.download = path.split('/').pop();
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
});
|
|
actionsDiv.appendChild(dlBtn);
|
|
|
|
const tocBtn = document.createElement("button");
|
|
tocBtn.className = "btn-action";
|
|
tocBtn.id = "toc-toggle-btn";
|
|
tocBtn.title = "Afficher/Masquer le sommaire";
|
|
tocBtn.innerHTML = '<i data-lucide="list" style="width:14px;height:14px"></i> TOC';
|
|
tocBtn.addEventListener("click", () => { RightSidebarManager.toggle(); });
|
|
actionsDiv.appendChild(tocBtn);
|
|
|
|
header.appendChild(actionsDiv);
|
|
area.appendChild(header);
|
|
|
|
// Frontmatter — Accent Card
|
|
if (data.frontmatter && Object.keys(data.frontmatter).length > 0) {
|
|
const fmSection = buildFrontmatterCard(data.frontmatter);
|
|
area.appendChild(fmSection);
|
|
}
|
|
|
|
// Markdown content wrapper
|
|
const mdDiv = document.createElement("div");
|
|
mdDiv.className = "md-content";
|
|
mdDiv.id = "file-rendered-content";
|
|
mdDiv.innerHTML = data.html;
|
|
area.appendChild(mdDiv);
|
|
|
|
// Render lucide icons
|
|
if (window.lucide) {
|
|
window.lucide.createIcons();
|
|
}
|
|
|
|
OutlineManager.init(); RightSidebarManager.init();
|
|
|
|
// Highlight code blocks
|
|
document.querySelectorAll('pre code').forEach((el) => {
|
|
hljs.highlightElement(el);
|
|
});
|
|
|
|
// Hide loading
|
|
document.getElementById('loading').style.opacity = '0';
|
|
setTimeout(() => {
|
|
document.getElementById('loading').style.display = 'none';
|
|
}, 300);
|
|
|
|
} catch (err) {
|
|
document.getElementById('loading').textContent = err.message;
|
|
}
|
|
}
|
|
|
|
function createBreadcrumbSep() {
|
|
const sep = document.createElement("span");
|
|
sep.className = "sep";
|
|
sep.textContent = " / ";
|
|
return sep;
|
|
}
|
|
|
|
function createBreadcrumbItem(text) {
|
|
const item = document.createElement("span");
|
|
item.className = "breadcrumb-item";
|
|
item.textContent = text;
|
|
return item;
|
|
}
|
|
|
|
function buildFrontmatterCard(frontmatter) {
|
|
// Helper: format date
|
|
function formatDate(iso) {
|
|
if (!iso) return '—';
|
|
const d = new Date(iso);
|
|
const date = d.toISOString().slice(0, 10);
|
|
const time = d.toTimeString().slice(0, 5);
|
|
return `${date} · ${time}`;
|
|
}
|
|
|
|
// Helper: create element
|
|
function el(tag, className, children) {
|
|
const e = document.createElement(tag);
|
|
if (className) e.className = className;
|
|
if (children) {
|
|
children.forEach(c => { if (c) e.appendChild(c); });
|
|
}
|
|
return e;
|
|
}
|
|
|
|
// Extract boolean flags
|
|
const booleanFlags = ['publish', 'favoris', 'template', 'task', 'archive', 'draft', 'private']
|
|
.map(key => ({ key, value: !!frontmatter[key] }));
|
|
|
|
// Toggle state
|
|
let isOpen = true;
|
|
|
|
// Build header with chevron
|
|
const chevron = el("span", "fm-chevron open");
|
|
chevron.innerHTML = '<i data-lucide="chevron-down" style="width:14px;height:14px"></i>';
|
|
|
|
const fmHeader = el("div", "fm-header");
|
|
fmHeader.appendChild(chevron);
|
|
fmHeader.appendChild(document.createTextNode("Frontmatter"));
|
|
|
|
// ZONE 1: Top strip
|
|
const acTop = el("div", "ac-top");
|
|
|
|
// Title badge
|
|
const title = frontmatter.titre || frontmatter.title || '';
|
|
if (title) {
|
|
const titleSpan = el("span", "ac-title");
|
|
titleSpan.textContent = `"${title}"`;
|
|
acTop.appendChild(titleSpan);
|
|
}
|
|
|
|
// Status badge
|
|
if (frontmatter.statut) {
|
|
const statusBadge = el("span", "ac-badge green");
|
|
const dot = el("span", "ac-dot");
|
|
statusBadge.appendChild(dot);
|
|
statusBadge.appendChild(document.createTextNode(frontmatter.statut));
|
|
acTop.appendChild(statusBadge);
|
|
}
|
|
|
|
// Category badge
|
|
if (frontmatter.catégorie || frontmatter.categorie) {
|
|
const cat = frontmatter.catégorie || frontmatter.categorie;
|
|
const catBadge = el("span", "ac-badge blue");
|
|
catBadge.textContent = cat;
|
|
acTop.appendChild(catBadge);
|
|
}
|
|
|
|
// Publish badge
|
|
if (frontmatter.publish) {
|
|
const pubBadge = el("span", "ac-badge purple");
|
|
pubBadge.textContent = "publié";
|
|
acTop.appendChild(pubBadge);
|
|
}
|
|
|
|
// Favoris badge
|
|
if (frontmatter.favoris) {
|
|
const favBadge = el("span", "ac-badge purple");
|
|
favBadge.textContent = "favori";
|
|
acTop.appendChild(favBadge);
|
|
}
|
|
|
|
// ZONE 2: Body 2 columns
|
|
const leftCol = el("div", "ac-col");
|
|
|
|
const row1 = el("div", "ac-row");
|
|
row1.innerHTML = '<span class="ac-k">auteur</span><span class="ac-v">' + (frontmatter.auteur || '—') + '</span>';
|
|
leftCol.appendChild(row1);
|
|
|
|
const row2 = el("div", "ac-row");
|
|
row2.innerHTML = '<span class="ac-k">catégorie</span><span class="ac-v">' + (frontmatter.catégorie || frontmatter.categorie || '—') + '</span>';
|
|
leftCol.appendChild(row2);
|
|
|
|
const row3 = el("div", "ac-row");
|
|
row3.innerHTML = '<span class="ac-k">statut</span><span class="ac-v">' + (frontmatter.statut || '—') + '</span>';
|
|
leftCol.appendChild(row3);
|
|
|
|
const row4 = el("div", "ac-row");
|
|
const aliases = frontmatter.aliases && frontmatter.aliases.length > 0 ? frontmatter.aliases.join(', ') : '[]';
|
|
row4.innerHTML = '<span class="ac-k">aliases</span><span class="ac-v muted">' + aliases + '</span>';
|
|
leftCol.appendChild(row4);
|
|
|
|
const rightCol = el("div", "ac-col");
|
|
|
|
const row5 = el("div", "ac-row");
|
|
row5.innerHTML = '<span class="ac-k">creation_date</span><span class="ac-v mono">' + formatDate(frontmatter.creation_date) + '</span>';
|
|
rightCol.appendChild(row5);
|
|
|
|
const row6 = el("div", "ac-row");
|
|
row6.innerHTML = '<span class="ac-k">modification_date</span><span class="ac-v mono">' + formatDate(frontmatter.modification_date) + '</span>';
|
|
rightCol.appendChild(row6);
|
|
|
|
const row7 = el("div", "ac-row");
|
|
row7.innerHTML = '<span class="ac-k">publish</span><span class="ac-v">' + String(frontmatter.publish || false) + '</span>';
|
|
rightCol.appendChild(row7);
|
|
|
|
const row8 = el("div", "ac-row");
|
|
row8.innerHTML = '<span class="ac-k">favoris</span><span class="ac-v">' + String(frontmatter.favoris || false) + '</span>';
|
|
rightCol.appendChild(row8);
|
|
|
|
const acBody = el("div", "ac-body");
|
|
acBody.appendChild(leftCol);
|
|
acBody.appendChild(rightCol);
|
|
|
|
// ZONE 3: Tags row
|
|
const acTagsRow = el("div", "ac-tags-row");
|
|
const tagsLabel = el("span", "ac-tags-k");
|
|
tagsLabel.textContent = "tags";
|
|
acTagsRow.appendChild(tagsLabel);
|
|
|
|
const tagsWrap = el("div", "ac-tags-wrap");
|
|
if (frontmatter.tags && frontmatter.tags.length > 0) {
|
|
frontmatter.tags.forEach(tag => {
|
|
const tagSpan = el("span", "ac-tag");
|
|
tagSpan.textContent = tag;
|
|
tagsWrap.appendChild(tagSpan);
|
|
});
|
|
}
|
|
acTagsRow.appendChild(tagsWrap);
|
|
|
|
// ZONE 4: Flags row
|
|
const acFlagsRow = el("div", "ac-flags-row");
|
|
const flagsLabel = el("span", "ac-flags-k");
|
|
flagsLabel.textContent = "flags";
|
|
acFlagsRow.appendChild(flagsLabel);
|
|
|
|
booleanFlags.forEach(flag => {
|
|
const chipClass = flag.value ? "flag-chip on" : "flag-chip off";
|
|
const chip = el("span", chipClass);
|
|
const dot = el("span", "flag-dot");
|
|
chip.appendChild(dot);
|
|
chip.appendChild(document.createTextNode(flag.key));
|
|
acFlagsRow.appendChild(chip);
|
|
});
|
|
|
|
// Assemble the card
|
|
const acCard = el("div", "ac-card");
|
|
acCard.appendChild(acTop);
|
|
acCard.appendChild(acBody);
|
|
acCard.appendChild(acTagsRow);
|
|
acCard.appendChild(acFlagsRow);
|
|
|
|
// Toggle functionality
|
|
fmHeader.addEventListener("click", () => {
|
|
isOpen = !isOpen;
|
|
if (isOpen) {
|
|
acCard.style.display = "block";
|
|
chevron.classList.remove("closed");
|
|
chevron.classList.add("open");
|
|
} else {
|
|
acCard.style.display = "none";
|
|
chevron.classList.remove("open");
|
|
chevron.classList.add("closed");
|
|
}
|
|
if (window.lucide) window.lucide.createIcons();
|
|
});
|
|
|
|
// Wrap in section
|
|
const fmSection = el("div", "fm-section");
|
|
fmSection.appendChild(fmHeader);
|
|
fmSection.appendChild(acCard);
|
|
|
|
return fmSection;
|
|
}
|
|
|
|
initTheme();
|
|
window.addEventListener('storage', (event) => {
|
|
if (event.key === 'obsigate-theme' && event.newValue) {
|
|
applyTheme(event.newValue);
|
|
}
|
|
});
|
|
initPopout();
|
|
</script>
|
|
</body>
|
|
</html>
|