cokit-cli 1.0.4 → 1.0.5

package/templates/repo/.github/skills/ck-markdown-novel-viewer/assets/reader.js

@@ -0,0 +1,262 @@
+/**
+ * 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.getElementById('theme-toggle');
+  const sidebarToggle = document.getElementById('sidebar-toggle');
+  const sidebar = document.getElementById('sidebar');
+  const fontBtns = document.querySelectorAll('.font-btn');
+  const hljsLight = document.getElementById('hljs-light');
+  const hljsDark = document.getElementById('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) {
+    html.dataset.theme = theme;
+    localStorage.setItem(THEME_KEY, theme);
+
+    // Switch highlight.js theme
+    if (hljsLight && hljsDark) {
+      hljsLight.disabled = theme === 'dark';
+      hljsDark.disabled = theme === 'light';
+    }
+  }
+
+  // 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.getElementById('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.getElementById('plan-nav');
+    if (!planNav) return;
+
+    // Get all anchors from sidebar
+    const anchors = Array.from(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.hash;
+    if (hash) {
+      const targetId = hash.slice(1);
+      const target = document.getElementById(targetId);
+      if (target) {
+        updateSidebarActiveState(targetId);
+      }
+    }
+  }
+
+  // Initialize
+  function init() {
+    initTheme();
+    initFontSize();
+    initSidebar();
+
+    // 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/repo/.github/skills/ck-markdown-novel-viewer/assets/template.html

@@ -0,0 +1,80 @@
+<!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>
+</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/repo/.github/skills/ck-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"
+  }
+}