fix: popout window — theme, Mermaid, frontmatter parity with main app
- Added Mermaid CDN script + mermaid.initialize() with theme detection - Frontmatter card now collapsed by default (matching main app isOpen=false) - Hidden acCard initially when collapsed - Theme inherits localStorage obsigate-theme (same as main window)
This commit is contained in:
+15
-3
@@ -8,6 +8,7 @@
|
|||||||
document.documentElement.setAttribute('data-theme', localStorage.getItem('obsigate-theme') || 'dark');
|
document.documentElement.setAttribute('data-theme', localStorage.getItem('obsigate-theme') || 'dark');
|
||||||
</script>
|
</script>
|
||||||
<link rel="stylesheet" href="/static/style.css">
|
<link rel="stylesheet" href="/static/style.css">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
|
||||||
<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-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>
|
<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://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||||||
@@ -873,6 +874,14 @@ const RightSidebarManager = {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Render Mermaid diagrams
|
||||||
|
setTimeout(() => {
|
||||||
|
if (typeof mermaid !== 'undefined') {
|
||||||
|
mermaid.initialize({ startOnLoad: false, theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default' });
|
||||||
|
mermaid.run({ querySelector: '.mermaid' }).catch(() => {});
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
|
||||||
// Hide loading
|
// Hide loading
|
||||||
document.getElementById('loading').style.opacity = '0';
|
document.getElementById('loading').style.opacity = '0';
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -1384,11 +1393,11 @@ const RightSidebarManager = {
|
|||||||
const booleanFlags = ['publish', 'favoris', 'template', 'task', 'archive', 'draft', 'private']
|
const booleanFlags = ['publish', 'favoris', 'template', 'task', 'archive', 'draft', 'private']
|
||||||
.map(key => ({ key, value: !!frontmatter[key] }));
|
.map(key => ({ key, value: !!frontmatter[key] }));
|
||||||
|
|
||||||
// Toggle state
|
// Toggle state — collapsed by default
|
||||||
let isOpen = true;
|
let isOpen = false;
|
||||||
|
|
||||||
// Build header with chevron
|
// Build header with chevron
|
||||||
const chevron = el("span", "fm-chevron open");
|
const chevron = el("span", "fm-chevron closed");
|
||||||
chevron.innerHTML = '<i data-lucide="chevron-down" style="width:14px;height:14px"></i>';
|
chevron.innerHTML = '<i data-lucide="chevron-down" style="width:14px;height:14px"></i>';
|
||||||
|
|
||||||
const fmHeader = el("div", "fm-header");
|
const fmHeader = el("div", "fm-header");
|
||||||
@@ -1532,6 +1541,9 @@ const RightSidebarManager = {
|
|||||||
if (window.lucide) window.lucide.createIcons();
|
if (window.lucide) window.lucide.createIcons();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Hide card initially (collapsed by default)
|
||||||
|
acCard.style.display = "none";
|
||||||
|
|
||||||
// Wrap in section
|
// Wrap in section
|
||||||
const fmSection = el("div", "fm-section");
|
const fmSection = el("div", "fm-section");
|
||||||
fmSection.appendChild(fmHeader);
|
fmSection.appendChild(fmHeader);
|
||||||
|
|||||||
Reference in New Issue
Block a user