bruno
0218d8f5e5
Corrige deux régressions de /local-workspace :
- le chemin du header restait bloqué sur « Home / <workspace> » quel que
soit le dossier affiché : la route rend désormais breadcrumb_items
(Home / <workspace> / <dossier> / <sous-dossier>, niveaux cliquables,
collapse « … » au-delà de 4) et la navigation sans rechargement recalcule
le chemin via l'event flowdeck:breadcrumb-changed ;
- le clic sur un dossier du sidebar affichait TOUS les composants à la
fois : Alpine.data('wsInitData') retournait le même objet singleton, le
2e montage (navigation partielle) levait « Cannot redefine property:
\ » et initTree abandonnait, laissant tout le contenu au state
brut. La factory retourne désormais une enveloppe fraîche par montage
qui délègue à l'état réactif partagé. #lw-config est aussi relu à chaque
exécution (le 2e montage gardait le folder_id du 1er chargement).
Inclus également le travail en cours de l'arbre : Library (colonnes Last
visited/Source, ordre d'en-tête, favoris à icônes Workspace), Meeting
Notes (bloc, CSS, routes, docs), coloration de code hljs, badges
favori/publié dans l'arbre local-workspace, docs (DATA_MODEL,
architectures) et tests associés.
234 lines
8.0 KiB
HTML
234 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
{% from '_icons.html' import fd_icon %}
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ title }} — FlowDeck</title>
|
|
<link rel="icon" href="/static/favicon.ico" sizes="48x48">
|
|
<style>
|
|
:root {
|
|
--bg: #191919;
|
|
--bg-card: #1e1e1e;
|
|
--text: #e0e0e0;
|
|
--text-dim: #999;
|
|
--accent: #4c9aff;
|
|
--radius: 12px;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.7;
|
|
min-height: 100vh;
|
|
}
|
|
.pub-header {
|
|
border-bottom: 1px solid rgba(255,255,255,.06);
|
|
padding: 14px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(255,255,255,.01);
|
|
backdrop-filter: blur(10px);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
.pub-brand {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.pub-brand span { font-size: 18px; }
|
|
.pub-badge {
|
|
font-size: 11px;
|
|
padding: 3px 10px;
|
|
background: rgba(76,154,255,.12);
|
|
color: var(--accent);
|
|
border-radius: 20px;
|
|
font-weight: 500;
|
|
}
|
|
.pub-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 40px 24px 80px;
|
|
}
|
|
.pub-title {
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
margin-bottom: 8px;
|
|
letter-spacing: -.5px;
|
|
}
|
|
.pub-meta {
|
|
font-size: 13px;
|
|
color: var(--text-dim);
|
|
margin-bottom: 32px;
|
|
}
|
|
.pub-content {
|
|
font-size: 16px;
|
|
color: var(--text);
|
|
}
|
|
.pub-content p {
|
|
margin: 4px 0;
|
|
line-height: 1.7;
|
|
}
|
|
.pub-content h1, .pub-content h2, .pub-content h3, .pub-content h4 {
|
|
color: var(--text);
|
|
margin-bottom: 6px;
|
|
}
|
|
.pub-content pre {
|
|
background: rgba(255,255,255,.05);
|
|
padding: 16px 20px;
|
|
border-radius: 8px;
|
|
overflow-x: auto;
|
|
margin: 12px 0;
|
|
}
|
|
.pub-content code {
|
|
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
|
|
font-size: 14px;
|
|
}
|
|
.pub-content blockquote {
|
|
border-left: 3px solid var(--accent);
|
|
margin: 12px 0;
|
|
padding: 4px 16px;
|
|
opacity: .85;
|
|
}
|
|
.pub-content img {
|
|
max-width: 100%;
|
|
border-radius: 8px;
|
|
}
|
|
.pub-content hr {
|
|
border: none;
|
|
border-top: 1px solid rgba(255,255,255,.08);
|
|
margin: 16px 0;
|
|
}
|
|
.pub-content details {
|
|
margin: 8px 0;
|
|
}
|
|
.pub-content summary {
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
}
|
|
.pub-footer {
|
|
text-align: center;
|
|
padding: 24px;
|
|
border-top: 1px solid rgba(255,255,255,.06);
|
|
font-size: 12px;
|
|
color: var(--text-dim);
|
|
}
|
|
.pub-footer a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
.pub-content img[data-full] { cursor: zoom-in; }
|
|
.fd-lightbox { user-select: none; }
|
|
.fd-lightbox-nav {
|
|
position: absolute; top: 50%; transform: translateY(-50%);
|
|
width: 48px; height: 48px; border-radius: 50%; border: none;
|
|
background: rgba(255,255,255,.12); color: #fff; font-size: 30px;
|
|
line-height: 1; cursor: pointer; display: flex; align-items: center;
|
|
justify-content: center; transition: background .15s ease;
|
|
}
|
|
.fd-lightbox-nav:hover { background: rgba(255,255,255,.25); }
|
|
.fd-lightbox-nav[data-nav="prev"] { left: 24px; }
|
|
.fd-lightbox-nav[data-nav="next"] { right: 24px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="pub-header">
|
|
<a href="/" class="pub-brand">
|
|
<span>{{ fd_icon("book",20) }}</span> FlowDeck
|
|
</a>
|
|
<span class="pub-badge">{{ fd_icon("globe",14) }} Published</span>
|
|
</header>
|
|
|
|
<main class="pub-container">
|
|
{% if cover_url %}
|
|
<div class="pub-cover" style="position:relative;margin:-40px -24px 32px;height:240px;overflow:hidden;">
|
|
<img src="{{ cover_url }}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">
|
|
<div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.5) 100%);"></div>
|
|
</div>
|
|
{% endif %}
|
|
{% from '_icons.html' import fd_page_icon %}
|
|
<div style="display:flex;align-items:center;gap:12px;margin-bottom:8px;">
|
|
<span class="pub-icon" style="font-size:2rem;">{{ fd_page_icon(page_icon, 32) if page_icon else fd_icon('file',24) }}</span>
|
|
<h1 class="pub-title">{{ title }}</h1>
|
|
</div>
|
|
{% if updated_at %}
|
|
<div class="pub-meta">Last updated: {{ updated_at[:10] }}</div>
|
|
{% endif %}
|
|
<div class="pub-content">
|
|
{{ content_html | safe }}
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="pub-footer">
|
|
Made with <a href="/">FlowDeck</a> — a Notion-style workspace
|
|
</footer>
|
|
|
|
<script src="/static/js/katex.min.js?v=0.16.11"></script>
|
|
<link rel="stylesheet" href="/static/css/highlight.css?v={{ asset_version }}">
|
|
<script src="/static/js/highlight.min.js?v={{ asset_version }}"></script>
|
|
<script src="/static/js/highlight-extra.min.js?v={{ asset_version }}"></script>
|
|
<script src="/static/js/code-highlight.js?v={{ asset_version }}"></script>
|
|
<script data-cfasync="false" nonce="{{ csp_nonce() }}">
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// hljs — syntax-highlight code blocks (~230 file types via FDHighlight).
|
|
try {
|
|
if (window.FDHighlight) FDHighlight.highlightAllIn(document.querySelector('.pub-content') || document);
|
|
else if (window.hljs) document.querySelectorAll('.pub-content pre code').forEach(function (el) { try { window.hljs.highlightElement(el); } catch (e) {} });
|
|
} catch (e) {}
|
|
if (window.katex) {
|
|
document.querySelectorAll('div[data-katex]').forEach(function (el) {
|
|
var tex = el.getAttribute('data-katex') || '';
|
|
try {
|
|
el.innerHTML = window.katex.renderToString(tex, { displayMode: true, throwOnError: false });
|
|
} catch (e) {
|
|
el.textContent = tex;
|
|
}
|
|
});
|
|
}
|
|
|
|
// v5.5.0 — Image lightbox (fullscreen + keyboard navigation)
|
|
var imgs = Array.prototype.slice.call(document.querySelectorAll('.pub-content img[data-full]'));
|
|
imgs.forEach(function (im) { im.addEventListener('click', function () { openLb(im); }); });
|
|
|
|
function openLb(target) {
|
|
var idx = imgs.indexOf(target); if (idx < 0) idx = 0;
|
|
var ov = document.createElement('div');
|
|
ov.className = 'fd-lightbox';
|
|
ov.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:5000;display:flex;align-items:center;justify-content:center;flex-direction:column;';
|
|
ov.innerHTML = '<button class="fd-lightbox-nav" data-nav="prev" aria-label="Previous">‹</button>'
|
|
+ '<img style="max-width:95vw;max-height:88vh;border-radius:4px;box-shadow:0 0 40px rgba(0,0,0,.8);">'
|
|
+ '<button class="fd-lightbox-nav" data-nav="next" aria-label="Next">›</button>'
|
|
+ '<div class="fd-lb-hint" style="margin-top:14px;color:#999;font-size:13px;"></div>';
|
|
document.body.appendChild(ov);
|
|
var img = ov.querySelector('img');
|
|
var hint = ov.querySelector('.fd-lb-hint');
|
|
function show() {
|
|
var cur = imgs[idx];
|
|
img.src = cur.getAttribute('data-full') || cur.src;
|
|
hint.textContent = (imgs.length > 1 ? (idx + 1) + ' / ' + imgs.length + ' — ' : '') + '← → to navigate · Esc to close';
|
|
}
|
|
function step(d) { if (imgs.length < 2) return; idx = (idx + d + imgs.length) % imgs.length; show(); }
|
|
function close() { ov.remove(); document.removeEventListener('keydown', kd); }
|
|
function kd(e) { if (e.key === 'Escape') close(); else if (e.key === 'ArrowRight') step(1); else if (e.key === 'ArrowLeft') step(-1); }
|
|
document.addEventListener('keydown', kd);
|
|
ov.querySelectorAll('[data-nav]').forEach(function (b) {
|
|
b.addEventListener('click', function (e) { e.stopPropagation(); step(b.getAttribute('data-nav') === 'next' ? 1 : -1); });
|
|
});
|
|
ov.addEventListener('click', function (e) { if (e.target === ov) close(); });
|
|
show();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|