@thanhvn14/csvibe 0.1.3 → 0.1.5

package/.github/skills/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/.github/skills/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/.github/skills/markdown-novel-viewer/package-lock.json

@@ -0,0 +1,146 @@
+{
+  "name": "markdown-novel-viewer",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "markdown-novel-viewer",
+      "version": "1.0.0",
+      "dependencies": {
+        "gray-matter": "^4.0.3",
+        "highlight.js": "^11.11.1",
+        "marked": "^17.0.0"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gray-matter": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-yaml": "^3.13.1",
+        "kind-of": "^6.0.2",
+        "section-matter": "^1.0.0",
+        "strip-bom-string": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/js-yaml": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
+      "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/marked": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.1.tgz",
+      "integrity": "sha512-boeBdiS0ghpWcSwoNm/jJBwdpFaMnZWRzjA6SkUMYb40SVaN1x7mmfGKp0jvexGcx+7y2La5zRZsYFZI6Qpypg==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/section-matter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
+      "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
+      "license": "MIT",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/strip-bom-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
+      "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    }
+  }
+}

package/.github/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"
+  }
+}