markymark 0.1.0

data/lib/public/css/style.css

@@ -0,0 +1,350 @@
+/* CSS Variables for theming */
+:root {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f6f8fa;
+  --bg-tertiary: #f0f0f0;
+  --text-primary: #24292f;
+  --text-secondary: #57606a;
+  --border: #d0d7de;
+  --link: #0969da;
+  --link-hover: #0550ae;
+  --code-bg: #f6f8fa;
+  --sidebar-bg: #ffffff;
+  --header-bg: #24292f;
+  --header-text: #ffffff;
+  --selected-bg: #ddf4ff;
+}
+
+[data-theme="dark"] {
+  --bg-primary: #0d1117;
+  --bg-secondary: #161b22;
+  --bg-tertiary: #21262d;
+  --text-primary: #c9d1d9;
+  --text-secondary: #8b949e;
+  --border: #30363d;
+  --link: #58a6ff;
+  --link-hover: #79c0ff;
+  --code-bg: #161b22;
+  --sidebar-bg: #0d1117;
+  --header-bg: #161b22;
+  --header-text: #c9d1d9;
+  --selected-bg: #1f6feb20;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.6;
+  transition: background-color 0.3s, color 0.3s;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header */
+.header {
+  background-color: var(--header-bg);
+  color: var(--header-text);
+  padding: 1rem 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0; /* Header doesn't shrink */
+}
+
+.logo {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.theme-toggle {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.5rem;
+  cursor: pointer;
+  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+}
+
+.theme-toggle:hover {
+  background-color: var(--bg-tertiary);
+}
+
+.current-path {
+  flex: 1;
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  font-family: monospace;
+}
+
+/* Main container */
+.container {
+  display: flex;
+  flex: 1; /* Takes remaining space after header */
+  min-height: 0; /* Critical: allows flex children to shrink below content size */
+  overflow: hidden;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 300px;
+  min-width: 300px;
+  max-width: 300px;
+  background-color: var(--sidebar-bg);
+  border-right: 1px solid var(--border);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* Critical: allows file-tree to respect height constraint */
+}
+
+.file-tree {
+  user-select: none;
+  padding: 1rem;
+  flex: 1;
+  min-height: 0; /* Allows content to shrink */
+  overflow-y: scroll !important; /* Force vertical scrollbar to always show */
+  overflow-x: auto; /* Show horizontal scrollbar if needed */
+  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+}
+
+.tree-folder,
+.tree-file {
+  padding: 0.4rem 0.5rem;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: background-color 0.15s;
+}
+
+.tree-folder:hover,
+.tree-file:hover {
+  background-color: var(--bg-secondary);
+}
+
+.tree-file.selected {
+  background-color: var(--selected-bg);
+  font-weight: 500;
+}
+
+.tree-folder-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tree-icon {
+  flex-shrink: 0;
+  font-size: 0.9rem;
+}
+
+.tree-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Content area */
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 2rem;
+}
+
+/* Markdown styles (GitHub-flavored) */
+.markdown-body {
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.markdown-body h1 {
+  font-size: 2em;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 0.3em;
+}
+
+.markdown-body h2 {
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 0.3em;
+}
+
+.markdown-body h3 {
+  font-size: 1.25em;
+}
+
+.markdown-body p {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-body a {
+  color: var(--link);
+  text-decoration: none;
+}
+
+.markdown-body a:hover {
+  color: var(--link-hover);
+  text-decoration: underline;
+}
+
+.markdown-body code {
+  background-color: var(--code-bg);
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  border-radius: 6px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+.markdown-body pre {
+  background-color: var(--code-bg);
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  border-radius: 6px;
+  margin-bottom: 16px;
+}
+
+.markdown-body pre code {
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+  font-size: 100%;
+}
+
+.markdown-body blockquote {
+  padding: 0 1em;
+  color: var(--text-secondary);
+  border-left: 0.25em solid var(--border);
+  margin-bottom: 16px;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 2em;
+  margin-bottom: 16px;
+}
+
+.markdown-body li {
+  margin-bottom: 0.25em;
+}
+
+.markdown-body table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  margin-bottom: 16px;
+  width: 100%;
+}
+
+.markdown-body table tr {
+  background-color: var(--bg-primary);
+  border-top: 1px solid var(--border);
+}
+
+.markdown-body table tr:nth-child(2n) {
+  background-color: var(--bg-secondary);
+}
+
+.markdown-body table th,
+.markdown-body table td {
+  padding: 6px 13px;
+  border: 1px solid var(--border);
+}
+
+.markdown-body table th {
+  font-weight: 600;
+  background-color: var(--bg-secondary);
+}
+
+.markdown-body img {
+  max-width: 100%;
+  height: auto;
+}
+
+.markdown-body hr {
+  height: 0.25em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: var(--border);
+  border: 0;
+}
+
+/* Mermaid diagrams */
+.mermaid-diagram {
+  margin: 16px 0;
+  text-align: center;
+  background-color: var(--bg-secondary);
+  padding: 16px;
+  border-radius: 6px;
+}
+
+.mermaid-error {
+  background-color: #ff000020;
+  border: 1px solid #ff0000;
+  padding: 16px;
+  border-radius: 6px;
+  margin: 16px 0;
+}
+
+/* Messages */
+.message {
+  padding: 2rem;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 1.1rem;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-secondary);
+}

data/lib/public/js/app.js

@@ -0,0 +1,186 @@
+// Main application logic
+(function() {
+  let currentFile = null;
+  let eventSource = null;
+
+  function init() {
+    // Configure marked.js for GFM
+    marked.setOptions({
+      gfm: true,
+      breaks: true,
+      headerIds: true,
+      mangle: false
+    });
+
+    // Configure mermaid
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: window.MarkyTheme && window.MarkyTheme.current() === 'dark' ? 'dark' : 'default'
+    });
+
+    // Load file from URL or default
+    loadInitialFile();
+
+    // Set up SSE connection
+    connectSSE();
+
+    // Handle browser back/forward
+    window.addEventListener('popstate', () => {
+      loadFileFromURL();
+    });
+  }
+
+  async function loadInitialFile() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const fileParam = urlParams.get('file');
+
+    if (fileParam) {
+      await loadFile(fileParam, false);
+    } else {
+      // Load default file
+      await loadDefaultFile();
+    }
+  }
+
+  async function loadDefaultFile() {
+    try {
+      const response = await fetch('/api/default-file');
+      const data = await response.json();
+
+      if (data.file) {
+        // Update URL and load file
+        const url = new URL(window.location);
+        url.searchParams.set('file', data.file);
+        window.history.replaceState({}, '', url);
+        await loadFile(data.file, false);
+      } else {
+        showMessage('No markdown files found in this directory.');
+      }
+    } catch (error) {
+      console.error('Failed to load default file:', error);
+      showMessage('Failed to load default file.');
+    }
+  }
+
+  async function loadFileFromURL() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const fileParam = urlParams.get('file');
+    if (fileParam) {
+      await loadFile(fileParam, false);
+    }
+  }
+
+  async function loadFile(filePath, updateHistory = true) {
+    try {
+      const response = await fetch(`/api/content?file=${encodeURIComponent(filePath)}`);
+      if (!response.ok) {
+        throw new Error('Failed to load file');
+      }
+
+      const data = await response.json();
+      currentFile = data.path;
+
+      // Update URL if needed
+      if (updateHistory) {
+        const url = new URL(window.location);
+        url.searchParams.set('file', filePath);
+        window.history.pushState({}, '', url);
+      }
+
+      // Update current path display
+      const pathDisplay = document.getElementById('current-path');
+      if (pathDisplay) {
+        pathDisplay.textContent = filePath;
+      }
+
+      // Render markdown
+      renderMarkdown(data.content);
+
+      // Update tree selection
+      if (window.MarkyTree) {
+        window.MarkyTree.reload();
+      }
+    } catch (error) {
+      console.error('Failed to load file:', error);
+      showMessage('Failed to load file: ' + filePath);
+    }
+  }
+
+  function renderMarkdown(markdown) {
+    const container = document.getElementById('markdown-content');
+    if (!container) return;
+
+    // Convert markdown to HTML
+    const html = marked.parse(markdown);
+    container.innerHTML = html;
+
+    // Highlight code blocks
+    container.querySelectorAll('pre code').forEach((block) => {
+      hljs.highlightElement(block);
+    });
+
+    // Render Mermaid diagrams
+    container.querySelectorAll('code.language-mermaid').forEach(async (block, index) => {
+      const code = block.textContent;
+      const id = `mermaid-${Date.now()}-${index}`;
+
+      try {
+        const { svg } = await mermaid.render(id, code);
+        const wrapper = document.createElement('div');
+        wrapper.className = 'mermaid-diagram';
+        wrapper.innerHTML = svg;
+        block.parentElement.replaceWith(wrapper);
+      } catch (error) {
+        console.error('Mermaid rendering error:', error);
+        block.parentElement.classList.add('mermaid-error');
+      }
+    });
+  }
+
+  function showMessage(message) {
+    const container = document.getElementById('markdown-content');
+    if (container) {
+      container.innerHTML = `<div class="message">${escapeHtml(message)}</div>`;
+    }
+  }
+
+  function connectSSE() {
+    eventSource = new EventSource('/stream');
+
+    eventSource.addEventListener('file_changed', (event) => {
+      const data = JSON.parse(event.data);
+      if (data.path === currentFile) {
+        // Current file was modified, re-render
+        renderMarkdown(data.content);
+      }
+    });
+
+    eventSource.addEventListener('tree_updated', (event) => {
+      const tree = JSON.parse(event.data);
+      if (window.MarkyTree) {
+        window.MarkyTree.update(tree);
+      }
+    });
+
+    eventSource.onerror = (error) => {
+      console.error('SSE error:', error);
+      // Reconnect after delay
+      setTimeout(() => {
+        connectSSE();
+      }, 5000);
+    };
+  }
+
+  function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  // Initialize on DOM load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

data/lib/public/js/theme.js

@@ -0,0 +1,79 @@
+// Theme management for dark/light mode
+(function() {
+  const THEME_KEY = 'markymark-theme';
+  const LIGHT = 'light';
+  const DARK = 'dark';
+
+  let currentTheme = LIGHT;
+
+  function initTheme() {
+    // Check localStorage first, then system preference
+    const savedTheme = localStorage.getItem(THEME_KEY);
+    if (savedTheme) {
+      currentTheme = savedTheme;
+    } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      currentTheme = DARK;
+    }
+
+    applyTheme(currentTheme);
+    setupToggle();
+  }
+
+  function applyTheme(theme) {
+    currentTheme = theme;
+    document.documentElement.setAttribute('data-theme', theme);
+
+    // Toggle highlight.js stylesheets
+    const lightStyle = document.getElementById('highlight-light');
+    const darkStyle = document.getElementById('highlight-dark');
+
+    if (theme === DARK) {
+      lightStyle.disabled = true;
+      darkStyle.disabled = false;
+    } else {
+      lightStyle.disabled = false;
+      darkStyle.disabled = true;
+    }
+
+    // Update toggle button icon
+    const themeIcon = document.querySelector('.theme-icon');
+    if (themeIcon) {
+      themeIcon.textContent = theme === DARK ? '☀️' : '🌙';
+    }
+
+    // Save to localStorage
+    localStorage.setItem(THEME_KEY, theme);
+  }
+
+  function toggleTheme() {
+    const newTheme = currentTheme === LIGHT ? DARK : LIGHT;
+    applyTheme(newTheme);
+
+    // Re-highlight code blocks with new theme
+    if (window.hljs) {
+      document.querySelectorAll('pre code').forEach((block) => {
+        hljs.highlightElement(block);
+      });
+    }
+  }
+
+  function setupToggle() {
+    const toggle = document.getElementById('theme-toggle');
+    if (toggle) {
+      toggle.addEventListener('click', toggleTheme);
+    }
+  }
+
+  // Initialize on DOM load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initTheme);
+  } else {
+    initTheme();
+  }
+
+  // Export for use by other scripts
+  window.MarkyTheme = {
+    current: () => currentTheme,
+    toggle: toggleTheme
+  };
+})();