mkdnsite 0.0.1 → 1.0.1

package/src/security/csp.ts

@@ -0,0 +1,92 @@
+import type { MkdnSiteConfig, CspConfig } from '../config/schema.ts'
+
+/**
+ * Sanitize a CSP source value to prevent directive injection.
+ * Strips semicolons which act as directive separators.
+ */
+function sanitizeCspValue (val: string): string {
+  return val.replace(/;/g, '').trim()
+}
+
+/**
+ * Build a Content-Security-Policy header value string from the current config.
+ * Only includes external sources for features that are actually enabled.
+ */
+export function buildCsp (config: MkdnSiteConfig): string {
+  const { client, analytics, csp, theme } = config
+  const gaEnabled = (analytics?.googleAnalytics?.measurementId ?? '') !== ''
+  const useCdn = client.mermaid || client.charts
+  const extra: CspConfig = csp ?? { enabled: true }
+
+  // script-src
+  const scriptSrc = ["'self'", "'unsafe-inline'"]
+  if (useCdn) scriptSrc.push('https://cdn.jsdelivr.net')
+  if (gaEnabled) {
+    scriptSrc.push('https://www.googletagmanager.com')
+    scriptSrc.push('https://www.google-analytics.com')
+  }
+  if (extra.extraScriptSrc != null) {
+    scriptSrc.push(...extra.extraScriptSrc.map(sanitizeCspValue))
+  }
+
+  // style-src
+  const styleSrc = ["'self'", "'unsafe-inline'"]
+  if (client.math) styleSrc.push('https://cdn.jsdelivr.net')
+  if (theme.customCssUrl != null) {
+    try {
+      const u = new URL(theme.customCssUrl)
+      if (u.protocol === 'https:' || u.protocol === 'http:') {
+        styleSrc.push(u.origin)
+      }
+    } catch {
+      // relative URL — 'self' covers it
+    }
+  }
+  if (extra.extraStyleSrc != null) {
+    styleSrc.push(...extra.extraStyleSrc.map(sanitizeCspValue))
+  }
+
+  // img-src
+  const imgSrc = ["'self'", 'data:', 'https:']
+  if (client.mermaid) imgSrc.push('blob:')
+  if (extra.extraImgSrc != null) {
+    imgSrc.push(...extra.extraImgSrc.map(sanitizeCspValue))
+  }
+
+  // font-src
+  const fontSrc = ["'self'", 'https://fonts.gstatic.com']
+  if (client.math) fontSrc.push('https://cdn.jsdelivr.net')
+  if (extra.extraFontSrc != null) {
+    fontSrc.push(...extra.extraFontSrc.map(sanitizeCspValue))
+  }
+
+  // connect-src
+  const connectSrc = ["'self'"]
+  if (gaEnabled) {
+    connectSrc.push('https://www.google-analytics.com')
+    connectSrc.push('https://analytics.google.com')
+    connectSrc.push('https://region1.google-analytics.com')
+  }
+  if (extra.extraConnectSrc != null) {
+    connectSrc.push(...extra.extraConnectSrc.map(sanitizeCspValue))
+  }
+
+  const directives: string[] = [
+    "default-src 'self'",
+    'script-src ' + scriptSrc.join(' '),
+    'style-src ' + styleSrc.join(' '),
+    'img-src ' + imgSrc.join(' '),
+    'font-src ' + fontSrc.join(' '),
+    'connect-src ' + connectSrc.join(' '),
+    "frame-src 'none'",
+    "object-src 'none'",
+    "base-uri 'self'",
+    "form-action 'self'"
+  ]
+
+  if (extra.reportUri != null && extra.reportUri !== '') {
+    directives.push('report-uri ' + sanitizeCspValue(extra.reportUri))
+  }
+
+  return directives.join('; ')
+}

package/src/theme/{prose-css.ts → base-css.ts}

@@ -1,5 +1,5 @@
 /**
- * Default theme CSS for mkdnsite.
+ * Base theme CSS for mkdnsite.
  *
  * Inspired by @tailwindcss/typography prose styles and GitHub's
  * markdown rendering. Designed to look beautiful out of the box
@@ -9,54 +9,54 @@
  * child elements rendered from markdown. The layout classes
  * (.mkdn-layout, .mkdn-nav, .mkdn-main) handle the page chrome.
  *
- * Users can override this entirely via config.theme.customCss.
- * Users on the 'components' theme mode can provide their own
- * Tailwind build with custom component styling.
+ * Users can extend this via config.theme.colors/fonts/customCss or
+ * replace it entirely via config.theme.builtinCss: false.
  */
-export const THEME_CSS = `
+export const BASE_THEME_CSS = `
 :root {
   --mkdn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+  --mkdn-font-heading: var(--mkdn-font);
   --mkdn-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --mkdn-accent: #0969da;
   --mkdn-text: #1f2328;
   --mkdn-text-muted: #656d76;
   --mkdn-bg: #ffffff;
   --mkdn-bg-alt: #f6f8fa;
   --mkdn-border: #d0d7de;
-  --mkdn-link: #0969da;
+  --mkdn-link: var(--mkdn-accent);
   --mkdn-link-hover: #0550ae;
   --mkdn-code-bg: rgba(175, 184, 193, 0.2);
   --mkdn-pre-bg: #f6f8fa;
   --mkdn-nav-w: 260px;
   --mkdn-content-max: 880px;
-  --mkdn-accent: #0969da;
 }
 
 [data-theme="dark"] {
+  --mkdn-accent: #58a6ff;
   --mkdn-text: #e6edf3;
   --mkdn-text-muted: #8d96a0;
   --mkdn-bg: #0d1117;
   --mkdn-bg-alt: #161b22;
   --mkdn-border: #30363d;
-  --mkdn-link: #58a6ff;
+  --mkdn-link: var(--mkdn-accent);
   --mkdn-link-hover: #79c0ff;
   --mkdn-code-bg: rgba(110, 118, 129, 0.4);
   --mkdn-pre-bg: #161b22;
-  --mkdn-accent: #58a6ff;
 }
 
 /* No-JS fallback: respect system preference */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
+    --mkdn-accent: #58a6ff;
     --mkdn-text: #e6edf3;
     --mkdn-text-muted: #8d96a0;
     --mkdn-bg: #0d1117;
     --mkdn-bg-alt: #161b22;
     --mkdn-border: #30363d;
-    --mkdn-link: #58a6ff;
+    --mkdn-link: var(--mkdn-accent);
     --mkdn-link-hover: #79c0ff;
     --mkdn-code-bg: rgba(110, 118, 129, 0.4);
     --mkdn-pre-bg: #161b22;
-    --mkdn-accent: #58a6ff;
   }
 }
 
@@ -72,6 +72,11 @@ body {
   line-height: 1.6;
 }
 
+:focus-visible {
+  outline: 2px solid var(--mkdn-accent);
+  outline-offset: 2px;
+}
+
 /* ---- Layout ---- */
 .mkdn-layout { display: flex; min-height: 100vh; }
 
@@ -94,6 +99,8 @@ body {
 .mkdn-nav-list li.active > a,
 .mkdn-nav-list a[aria-current="page"] {
   color: var(--mkdn-text); background: var(--mkdn-code-bg); font-weight: 600;
+  border-left: 2px solid var(--mkdn-accent);
+  padding-left: calc(0.75rem - 2px);
 }
 .mkdn-nav-section-title {
   display: block; padding: 0.5rem 0.75rem 0.2rem;
@@ -109,6 +116,43 @@ body {
   margin: 0 auto; padding: 2rem 2.5rem;
 }
 
+/* Two-column layout when TOC sidebar is present */
+.mkdn-main:has(.mkdn-toc) {
+  display: flex; flex-direction: row;
+  gap: 2.5rem; align-items: flex-start;
+  max-width: calc(var(--mkdn-content-max) + 260px);
+}
+.mkdn-content-area { flex: 1; min-width: 0; }
+
+/* TOC sidebar */
+.mkdn-toc {
+  flex: 0 0 220px; position: sticky; top: 2rem;
+  max-height: calc(100vh - 4rem); overflow-y: auto;
+  font-size: 0.8rem;
+}
+.mkdn-toc-title {
+  font-size: 0.7rem; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--mkdn-text-muted); margin: 0 0 0.5rem;
+}
+.mkdn-toc ul { list-style: none; padding: 0; margin: 0; }
+.mkdn-toc li { margin: 0; }
+.mkdn-toc a {
+  display: block; padding: 0.2rem 0;
+  color: var(--mkdn-text-muted); text-decoration: none;
+  border-left: 2px solid transparent;
+  padding-left: 0.5rem; transition: color 0.15s, border-color 0.15s;
+  line-height: 1.4;
+}
+.mkdn-toc a:hover { color: var(--mkdn-text); border-left-color: var(--mkdn-accent); }
+.mkdn-toc-3 a { padding-left: 1rem; font-size: 0.775rem; }
+.mkdn-toc-4 a { padding-left: 1.5rem; font-size: 0.75rem; }
+
+@media (max-width: 1200px) {
+  .mkdn-main:has(.mkdn-toc) { flex-direction: column; }
+  .mkdn-toc { display: none; }
+}
+
 .mkdn-footer {
   margin-top: 4rem; padding-top: 1.5rem;
   border-top: 1px solid var(--mkdn-border);
@@ -116,9 +160,59 @@ body {
 }
 .mkdn-footer a { color: var(--mkdn-link); }
 
+/* ---- Page title (from frontmatter) ---- */
+.mkdn-page-title {
+  font-size: 2.5rem; font-weight: 800;
+  letter-spacing: -0.03em; line-height: 1.1;
+  margin-top: 0; margin-bottom: 0.35em;
+}
+
+/* ---- Page meta (date + reading time) ---- */
+.mkdn-page-meta {
+  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem;
+  color: var(--mkdn-text-muted); font-size: 0.875rem;
+  margin-bottom: 2rem;
+}
+.mkdn-page-meta time { color: var(--mkdn-text-muted); }
+.mkdn-reading-time { color: var(--mkdn-text-muted); }
+
+/* ---- Prev/Next navigation ---- */
+.mkdn-prev-next {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  gap: 1rem; padding: 1.5rem 0; margin-top: 2.5rem;
+  border-top: 1px solid var(--mkdn-border);
+}
+.mkdn-prev-next a {
+  display: flex; flex-direction: column; gap: 0.2rem;
+  text-decoration: none; color: var(--mkdn-text-muted);
+  font-size: 0.875rem; max-width: 45%;
+  transition: color 0.15s;
+}
+.mkdn-prev-next a:hover { color: var(--mkdn-accent); }
+.mkdn-prev { align-items: flex-start; }
+.mkdn-next { align-items: flex-end; text-align: right; }
+.mkdn-prev-next .mkdn-pn-label {
+  font-size: 0.75rem; text-transform: uppercase;
+  letter-spacing: 0.05em; color: var(--mkdn-text-muted); font-weight: 600;
+}
+.mkdn-prev-next .mkdn-pn-title { color: var(--mkdn-link); font-weight: 500; }
+
+/* ---- Nav header (logo + site name) ---- */
+.mkdn-nav-header {
+  display: flex; align-items: center; gap: 0.6rem;
+  padding: 0 1rem 1rem; margin-bottom: 0.5rem;
+  border-bottom: 1px solid var(--mkdn-border);
+  text-decoration: none; color: var(--mkdn-text);
+}
+.mkdn-nav-header:hover { color: var(--mkdn-text); }
+.mkdn-nav-logo { display: block; flex-shrink: 0; }
+.mkdn-nav-logo img { display: block; border-radius: 4px; }
+.mkdn-nav-title { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
+
 /* ---- Prose typography (shadcn/Radix-inspired, applied to .mkdn-prose) ---- */
 .mkdn-prose h1, .mkdn-prose h2, .mkdn-prose h3,
 .mkdn-prose h4, .mkdn-prose h5, .mkdn-prose h6 {
+  font-family: var(--mkdn-font-heading);
   scroll-margin-top: 1rem;
   letter-spacing: -0.025em;
   line-height: 1.2;
@@ -216,6 +310,7 @@ body {
 .mkdn-prose th { font-weight: 600; }
 .mkdn-prose tr:last-child td { border-bottom: none; }
 .mkdn-prose tbody tr:nth-child(even) { background: var(--mkdn-bg-alt); }
+.mkdn-prose thead th { background: var(--mkdn-bg-alt); }
 .mkdn-prose td[align="center"], .mkdn-prose th[align="center"] { text-align: center; }
 .mkdn-prose td[align="right"], .mkdn-prose th[align="right"] { text-align: right; }
 
@@ -374,4 +469,149 @@ body {
   }
   .mkdn-main { padding: 1.5rem 1rem; }
 }
+
+/* ---- Search trigger button ---- */
+.mkdn-search-trigger {
+  position: fixed; top: 0.75rem; right: 3.25rem; z-index: 200;
+  display: flex; align-items: center; justify-content: center;
+  width: 36px; height: 36px; border-radius: 50%; border: none;
+  background: transparent; cursor: pointer;
+  color: var(--mkdn-text-muted);
+  transition: color 0.15s, background 0.15s;
+}
+.mkdn-search-trigger:hover { color: var(--mkdn-text); background: var(--mkdn-code-bg); }
+
+/* ---- Search modal overlay ---- */
+.mkdn-search-overlay {
+  position: fixed; inset: 0; z-index: 1000;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex; align-items: flex-start; justify-content: center;
+  padding-top: 8vh;
+  opacity: 0; pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+.mkdn-search-overlay--open {
+  opacity: 1; pointer-events: auto;
+}
+
+/* ---- Search modal box ---- */
+.mkdn-search-modal {
+  background: var(--mkdn-bg);
+  border: 1px solid var(--mkdn-border);
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+  width: 100%; max-width: 600px; max-height: 80vh;
+  display: flex; flex-direction: column; overflow: hidden;
+}
+
+/* ---- Input row ---- */
+.mkdn-search-input-wrap {
+  display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--mkdn-border);
+}
+.mkdn-search-icon { flex-shrink: 0; color: var(--mkdn-text-muted); }
+.mkdn-search-input {
+  flex: 1; border: none; outline: none; background: transparent;
+  font-size: 1.05rem; color: var(--mkdn-text);
+  font-family: inherit;
+}
+.mkdn-search-input::placeholder { color: var(--mkdn-text-muted); }
+.mkdn-search-kbd {
+  flex-shrink: 0; font-size: 0.7rem; padding: 2px 6px;
+  border: 1px solid var(--mkdn-border); border-radius: 4px;
+  background: var(--mkdn-code-bg); color: var(--mkdn-text-muted);
+  font-family: inherit;
+}
+
+/* ---- Results list ---- */
+.mkdn-search-results {
+  overflow-y: auto; max-height: 400px; padding: 0.5rem 0;
+}
+.mkdn-search-hint {
+  padding: 1.5rem 1rem; margin: 0;
+  text-align: center; color: var(--mkdn-text-muted); font-size: 0.9rem;
+}
+.mkdn-search-result {
+  display: block; padding: 0.65rem 1rem;
+  text-decoration: none; color: inherit;
+  border-left: 3px solid transparent;
+  transition: background 0.1s;
+}
+.mkdn-search-result--active {
+  background: var(--mkdn-bg-alt);
+  border-left-color: var(--mkdn-accent);
+}
+.mkdn-search-result-title {
+  font-weight: 600; font-size: 0.95rem;
+  color: var(--mkdn-text); margin-bottom: 0.15rem;
+}
+.mkdn-search-result-excerpt {
+  font-size: 0.82rem; color: var(--mkdn-text-muted);
+  line-height: 1.5; margin-bottom: 0.15rem;
+}
+.mkdn-search-result-excerpt mark {
+  background: transparent; color: var(--mkdn-accent);
+  font-weight: 600; padding: 0;
+}
+.mkdn-search-result-slug {
+  font-size: 0.75rem; color: var(--mkdn-text-muted); opacity: 0.7;
+  font-family: var(--mkdn-font-mono, monospace);
+}
+
+@media (max-width: 640px) {
+  .mkdn-search-overlay { padding-top: 0; align-items: flex-end; }
+  .mkdn-search-modal {
+    max-width: 100%; border-radius: 12px 12px 0 0;
+    max-height: 70vh;
+  }
+  .mkdn-search-trigger { right: 3rem; }
+}
+
+/* ---- Search result highlighting (on target page) ---- */
+.mkdn-search-highlight {
+  background: color-mix(in srgb, var(--mkdn-accent) 20%, transparent);
+  border-radius: 2px; padding: 1px 2px;
+  transition: background 0.5s ease;
+}
+.mkdn-search-highlight--fading { background: transparent; }
+
+/* ---- Sticky table header (JS-cloned) ---- */
+.mkdn-thead-clone {
+  position: fixed;
+  top: 0;
+  z-index: 100;
+  pointer-events: none;
+  overflow: hidden;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border: 1px solid var(--mkdn-border);
+  border-bottom: none;
+}
+.mkdn-thead-clone table {
+  border-collapse: collapse;
+}
+
+/* ---- Chart rendering ---- */
+.mkdn-chart {
+  max-width: 600px;
+  margin: 1.5rem auto;
+  padding: 1rem;
+  background: var(--mkdn-bg);
+  border: 1px solid var(--mkdn-border);
+  border-radius: 8px;
+}
+.mkdn-chart canvas {
+  width: 100% !important;
+  height: auto !important;
+}
+.mkdn-chart-error {
+  padding: 1rem;
+  margin: 1rem 0;
+  border: 1px solid #ef4444;
+  border-radius: 8px;
+  color: #ef4444;
+  font-size: 0.9rem;
+  text-align: center;
+}
 `.trim()

package/src/theme/build-css.ts

@@ -0,0 +1,74 @@
+import type { MkdnSiteConfig, ColorTokens, FontTokens } from '../config/schema.ts'
+import { BASE_THEME_CSS } from './base-css.ts'
+
+/**
+ * Build the full CSS string for a page, combining the base theme with
+ * any user-defined color, font, and custom CSS overrides from config.
+ */
+export function buildThemeCss (config: MkdnSiteConfig): string {
+  const { theme } = config
+  const parts: string[] = []
+
+  // Base built-in styles
+  if (theme.builtinCss !== false) {
+    parts.push(BASE_THEME_CSS)
+  }
+
+  // Light mode color token overrides
+  if (theme.colors != null) {
+    const tokens = renderColorTokens(theme.colors)
+    if (tokens !== '') {
+      parts.push(`:root {\n${tokens}\n}`)
+    }
+  }
+
+  // Dark mode color token overrides.
+  // Uses [data-theme="dark"] as the primary selector and
+  // @media (prefers-color-scheme: dark) with :root:not([data-theme]) as no-JS fallback.
+  if (theme.colorsDark != null) {
+    const tokens = renderColorTokens(theme.colorsDark)
+    if (tokens !== '') {
+      const indented = tokens.split('\n').map(l => `  ${l}`).join('\n')
+      parts.push(`[data-theme="dark"] {\n${tokens}\n}`)
+      parts.push(`@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n${indented}\n  }\n}`)
+    }
+  }
+
+  // Font token overrides
+  if (theme.fonts != null) {
+    const tokens = renderFontTokens(theme.fonts)
+    if (tokens !== '') {
+      parts.push(`:root {\n${tokens}\n}`)
+    }
+  }
+
+  // Inline custom CSS appended last (highest specificity wins)
+  if (theme.customCss != null && theme.customCss.trim() !== '') {
+    parts.push(theme.customCss.trim())
+  }
+
+  return parts.join('\n\n')
+}
+
+function renderColorTokens (colors: ColorTokens): string {
+  const lines: string[] = []
+  if (colors.accent != null) lines.push(`  --mkdn-accent: ${colors.accent};`)
+  if (colors.text != null) lines.push(`  --mkdn-text: ${colors.text};`)
+  if (colors.textMuted != null) lines.push(`  --mkdn-text-muted: ${colors.textMuted};`)
+  if (colors.bg != null) lines.push(`  --mkdn-bg: ${colors.bg};`)
+  if (colors.bgAlt != null) lines.push(`  --mkdn-bg-alt: ${colors.bgAlt};`)
+  if (colors.border != null) lines.push(`  --mkdn-border: ${colors.border};`)
+  if (colors.link != null) lines.push(`  --mkdn-link: ${colors.link};`)
+  if (colors.linkHover != null) lines.push(`  --mkdn-link-hover: ${colors.linkHover};`)
+  if (colors.codeBg != null) lines.push(`  --mkdn-code-bg: ${colors.codeBg};`)
+  if (colors.preBg != null) lines.push(`  --mkdn-pre-bg: ${colors.preBg};`)
+  return lines.join('\n')
+}
+
+function renderFontTokens (fonts: FontTokens): string {
+  const lines: string[] = []
+  if (fonts.body != null) lines.push(`  --mkdn-font: ${fonts.body};`)
+  if (fonts.mono != null) lines.push(`  --mkdn-mono: ${fonts.mono};`)
+  if (fonts.heading != null) lines.push(`  --mkdn-font-heading: ${fonts.heading};`)
+  return lines.join('\n')
+}