flowdeck/app/templates/public_page.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" type="image/svg+xml" href="/static/favicon.svg">
  <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;
    }
  </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 %}
  <div style="display:flex;align-items:center;gap:12px;margin-bottom:8px;">
    <span class="pub-icon" style="font-size:2rem;">{{ page_icon or 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>
<script>
document.addEventListener('DOMContentLoaded', function () {
  if (!window.katex) return;
  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;
    }
  });
});
</script>

</body>
</html>