cokit-cli 1.0.8 → 1.0.9

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

@@ -1,262 +0,0 @@
-/**
- * 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/skills/ck-markdown-novel-viewer/assets/template.html

@@ -1,80 +0,0 @@
-<!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/skills/ck-markdown-novel-viewer/package.json

@@ -1,15 +0,0 @@
-{
-  "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"
-  }
-}