@macpaw/cctk 1.0.0-beta.1

package/templates/claude/skills/markdown-novel-viewer/assets/reader.js

@@ -0,0 +1,378 @@
+/**
+ * Reader.js - Client-side interactivity for novel viewer
+ * Handles theme toggle, font size, sidebar, and keyboard navigation
+ */
+
+(function () {
+  'use strict';
+
+  // DOM Elements
+  const html = document.documentElement;
+  const themeToggle = document.querySelector('#theme-toggle');
+  const sidebarToggle = document.querySelector('#sidebar-toggle');
+  const sidebar = document.querySelector('#sidebar');
+  const fontBtns = document.querySelectorAll('.font-btn');
+  const hljsLight = document.querySelector('#hljs-light');
+  const hljsDark = document.querySelector('#hljs-dark');
+
+  // Storage keys (shared with kanban dashboard for theme persistence)
+  const THEME_KEY = 'theme';
+  const FONT_KEY = 'novel-viewer-font';
+  const SIDEBAR_KEY = 'novel-viewer-sidebar';
+
+  // Initialize theme
+  function initTheme() {
+    const stored = localStorage.getItem(THEME_KEY);
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const theme = stored || (prefersDark ? 'dark' : 'light');
+
+    setTheme(theme);
+  }
+
+  // Set theme
+  function setTheme(theme, skipMermaid = false) {
+    html.dataset.theme = theme;
+    localStorage.setItem(THEME_KEY, theme);
+
+    // Switch highlight.js theme
+    if (hljsLight && hljsDark) {
+      hljsLight.disabled = theme === 'dark';
+      hljsDark.disabled = theme === 'light';
+    }
+
+    // Re-render mermaid diagrams with new theme (skip on initial load)
+    if (!skipMermaid && window.mermaidModule) {
+      updateMermaidTheme();
+    }
+  }
+
+  // Toggle theme
+  function toggleTheme() {
+    const current = html.dataset.theme || 'light';
+    const next = current === 'light' ? 'dark' : 'light';
+
+    setTheme(next);
+  }
+
+  // Initialize font size
+  function initFontSize() {
+    const stored = localStorage.getItem(FONT_KEY) || 'M';
+
+    setFontSize(stored);
+  }
+
+  // Set font size
+  function setFontSize(size) {
+    html.dataset.fontSize = size;
+    localStorage.setItem(FONT_KEY, size);
+
+    // Update button states
+    fontBtns.forEach((btn) => {
+      btn.classList.toggle('active', btn.dataset.size === size);
+    });
+  }
+
+  // Initialize sidebar
+  function initSidebar() {
+    const stored = localStorage.getItem(SIDEBAR_KEY);
+    const isMobile = window.innerWidth <= 900;
+
+    if (isMobile) {
+      sidebar?.classList.add('hidden');
+    } else if (stored === 'hidden') {
+      sidebar?.classList.add('hidden');
+    }
+  }
+
+  // Toggle sidebar
+  function toggleSidebar() {
+    const isHidden = sidebar?.classList.toggle('hidden');
+
+    localStorage.setItem(SIDEBAR_KEY, isHidden ? 'hidden' : 'visible');
+  }
+
+  // Keyboard navigation
+  function handleKeydown(e) {
+    // Skip if in input/textarea
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
+      return;
+    }
+
+    const navPrev = document.querySelector('.nav-prev');
+    const navNext = document.querySelector('.nav-next');
+
+    switch (e.key) {
+      case 'ArrowLeft': {
+        if (navPrev) {
+          e.preventDefault();
+          window.location.href = navPrev.href;
+        }
+        break;
+      }
+      case 'ArrowRight': {
+        if (navNext) {
+          e.preventDefault();
+          window.location.href = navNext.href;
+        }
+        break;
+      }
+      case 'Escape': {
+        if (window.innerWidth <= 900 && sidebar && !sidebar.classList.contains('hidden')) {
+          toggleSidebar();
+        }
+        break;
+      }
+      case 't':
+      case 'T': {
+        if (!e.ctrlKey && !e.metaKey) {
+          toggleTheme();
+        }
+        break;
+      }
+      case 's':
+      case 'S': {
+        if (!e.ctrlKey && !e.metaKey) {
+          toggleSidebar();
+        }
+        break;
+      }
+    }
+  }
+
+  // Smooth scroll to anchor with sidebar active state update
+  function handleAnchorClick(e) {
+    const anchor = e.target.closest('a');
+    const href = anchor?.getAttribute('href');
+
+    if (href?.startsWith('#')) {
+      e.preventDefault();
+      const targetId = href.slice(1);
+      const target = document.getElementById(targetId);
+
+      if (target) {
+        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        history.pushState(null, '', href);
+        // Update sidebar active state
+        updateSidebarActiveState(targetId);
+      }
+    }
+  }
+
+  // Update sidebar active state based on anchor
+  function updateSidebarActiveState(anchorId) {
+    const planNav = document.querySelector('#plan-nav');
+
+    if (!planNav) return;
+
+    // Remove active from all items
+    planNav.querySelectorAll('.phase-item').forEach((item) => {
+      item.classList.remove('active');
+    });
+
+    // Add active to matching item
+    const matchingItem = planNav.querySelector(`[data-anchor="${anchorId}"]`);
+
+    if (matchingItem) {
+      matchingItem.classList.add('active');
+    }
+  }
+
+  // Setup Intersection Observer for section tracking
+  function setupSectionObserver() {
+    const planNav = document.querySelector('#plan-nav');
+
+    if (!planNav) return;
+
+    // Get all anchors from sidebar
+    const anchors = [...planNav.querySelectorAll('[data-anchor]')].map((item) => item.dataset.anchor);
+
+    if (anchors.length === 0) return;
+
+    // Find corresponding elements in content
+    const sections = anchors.map((id) => document.getElementById(id)).filter((el) => el !== null);
+
+    if (sections.length === 0) return;
+
+    // Create observer
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            updateSidebarActiveState(entry.target.id);
+          }
+        });
+      },
+      {
+        rootMargin: '-20% 0px -60% 0px', // Trigger when section is in upper portion of viewport
+        threshold: 0,
+      },
+    );
+
+    // Observe all sections
+    sections.forEach((section) => observer.observe(section));
+  }
+
+  // Handle hash change (browser back/forward)
+  function handleHashChange() {
+    const { hash } = window.location;
+
+    if (hash) {
+      const targetId = hash.slice(1);
+      const target = document.getElementById(targetId);
+
+      if (target) {
+        updateSidebarActiveState(targetId);
+      }
+    }
+  }
+
+  // Initialize Mermaid diagrams
+  async function initMermaid() {
+    // Wait for mermaid module to load (imported in template.html)
+    let attempts = 0;
+
+    while (!window.mermaidModule && attempts < 50) {
+      await new Promise((r) => setTimeout(r, 100));
+      attempts++;
+    }
+
+    if (!window.mermaidModule) {
+      console.warn('Mermaid module not loaded');
+
+      return;
+    }
+
+    const mermaid = window.mermaidModule;
+    const isDark = html.dataset.theme === 'dark';
+
+    // Initialize mermaid with theme
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: isDark ? 'dark' : 'default',
+      securityLevel: 'loose',
+      fontFamily: 'Inter, sans-serif',
+    });
+
+    // Find unprocessed mermaid elements (both pre and div)
+    const diagrams = document.querySelectorAll('.mermaid:not([data-processed="true"])');
+
+    if (diagrams.length === 0) {
+      return; // Nothing to render
+    }
+
+    // Store original source before mermaid replaces content (for theme switching)
+    diagrams.forEach((el) => {
+      if (!el.dataset.mermaidSource) {
+        el.dataset.mermaidSource = el.textContent;
+      }
+    });
+
+    // Use mermaid.run() - the preferred API for v10+
+    try {
+      await mermaid.run({
+        nodes: diagrams,
+        suppressErrors: false,
+      });
+    } catch (error) {
+      console.error('Mermaid run error:', error);
+      // Show errors inline for diagrams that failed
+      diagrams.forEach((el) => {
+        if (!el.querySelector('svg') && !Object.hasOwn(el.dataset, 'processed')) {
+          const code = el.dataset.mermaidSource || el.textContent;
+
+          el.innerHTML = `<div class="mermaid-error">
+            <strong>Mermaid Error:</strong>
+            <pre>${error.message || error}</pre>
+            <details><summary>Source</summary><pre>${code}</pre></details>
+          </div>`;
+          el.classList.add('mermaid-error-container');
+        }
+      });
+    }
+  }
+
+  // Re-render mermaid on theme change
+  async function updateMermaidTheme() {
+    if (!window.mermaidModule) return;
+
+    const isDark = html.dataset.theme === 'dark';
+
+    // Re-initialize with new theme
+    window.mermaidModule.initialize({
+      startOnLoad: false,
+      theme: isDark ? 'dark' : 'default',
+      securityLevel: 'loose',
+      fontFamily: 'Inter, sans-serif',
+    });
+
+    // Restore original source and re-render
+    const diagrams = document.querySelectorAll('.mermaid[data-processed="true"]');
+
+    diagrams.forEach((el) => {
+      const source = el.dataset.mermaidSource;
+
+      if (source) {
+        el.textContent = source;
+        delete el.dataset.processed;
+      }
+    });
+
+    await initMermaid();
+  }
+
+  // Initialize
+  function init() {
+    initTheme();
+    initFontSize();
+    initSidebar();
+    initMermaid();
+
+    // Event listeners
+    themeToggle?.addEventListener('click', toggleTheme);
+    sidebarToggle?.addEventListener('click', toggleSidebar);
+
+    fontBtns.forEach((btn) => {
+      btn.addEventListener('click', () => setFontSize(btn.dataset.size));
+    });
+
+    document.addEventListener('keydown', handleKeydown);
+    document.addEventListener('click', handleAnchorClick);
+
+    // Handle hash change for sidebar active state
+    window.addEventListener('hashchange', handleHashChange);
+
+    // Setup section observer for auto-highlighting sidebar
+    setupSectionObserver();
+
+    // Handle initial hash on page load
+    if (window.location.hash) {
+      handleHashChange();
+    }
+
+    // Handle resize
+    let resizeTimeout;
+
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        if (window.innerWidth > 900) {
+          sidebar?.classList.remove('visible');
+        }
+      }, 100);
+    });
+
+    // Listen for system theme changes
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+      if (!localStorage.getItem(THEME_KEY)) {
+        setTheme(e.matches ? 'dark' : 'light');
+      }
+    });
+  }
+
+  // Run when DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

package/templates/claude/skills/markdown-novel-viewer/assets/template.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{title}} - Novel Viewer</title>
+  <link rel="icon" type="image/png" href="/assets/favicon.png">
+  <!-- Apply stored preferences BEFORE CSS loads to prevent FOUC -->
+  <script>
+    (function(){
+      var h=document.documentElement;
+      var t=localStorage.getItem('theme');
+      var f=localStorage.getItem('novel-viewer-font');
+      if(t)h.dataset.theme=t;
+      else if(window.matchMedia('(prefers-color-scheme:dark)').matches)h.dataset.theme='dark';
+      if(f)h.dataset.fontSize=f;
+    })();
+  </script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/assets/novel-theme.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" id="hljs-light">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" id="hljs-dark" disabled>
+  <!-- Mermaid.js for diagram rendering -->
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+    window.mermaidModule = mermaid;
+  </script>
+</head>
+<body class="{{has-plan}}">
+  <header class="reader-header">
+    <div class="header-left">
+      {{back-button}}
+      <button id="sidebar-toggle" class="icon-btn" aria-label="Toggle sidebar" title="Toggle sidebar">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M3 12h18M3 6h18M3 18h18"/>
+        </svg>
+      </button>
+      {{header-nav}}
+    </div>
+    <div class="header-center">
+      <span class="doc-title">{{title}}</span>
+    </div>
+    <div class="header-right">
+      <div class="font-controls">
+        <button class="font-btn" data-size="S" title="Small font">S</button>
+        <button class="font-btn" data-size="M" title="Medium font">M</button>
+        <button class="font-btn" data-size="L" title="Large font">L</button>
+      </div>
+      <button id="theme-toggle" class="icon-btn" aria-label="Toggle theme" title="Toggle theme">
+        <svg class="sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="5"/>
+          <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+        </svg>
+        <svg class="moon-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+        </svg>
+      </button>
+    </div>
+  </header>
+
+  <div class="layout">
+    <aside class="sidebar" id="sidebar">
+      {{nav-sidebar}}
+      <div class="toc-section">
+        <div class="toc-title">Contents</div>
+        {{toc}}
+      </div>
+    </aside>
+
+    <main class="main-content">
+      <article class="content">
+        {{content}}
+      </article>
+      {{nav-footer}}
+    </main>
+  </div>
+
+  <script>
+    window.__frontmatter = {{frontmatter}};
+  </script>
+  <script src="/assets/reader.js"></script>
+</body>
+</html>

package/templates/claude/skills/markdown-novel-viewer/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "markdown-novel-viewer",
+  "version": "1.0.0",
+  "description": "Background HTTP server rendering markdown files with calm, book-like reading experience",
+  "main": "scripts/server.cjs",
+  "scripts": {
+    "start": "node scripts/server.cjs",
+    "test": "node scripts/tests/server.test.cjs"
+  },
+  "dependencies": {
+    "gray-matter": "^4.0.3",
+    "highlight.js": "^11.11.1",
+    "marked": "^17.0.0"
+  }
+}