markopress 0.0.1

package/src/theme/default/tags/theme-body-top.marko

@@ -0,0 +1 @@
+<!-- Extension point: theme body top -->

package/src/theme/default/tags/theme-doc-bottom.marko

@@ -0,0 +1 @@
+<!-- Extension point: theme doc bottom -->

package/src/theme/default/tags/theme-doc-footer-after.marko

@@ -0,0 +1 @@
+<!-- Extension point: theme doc footer after -->

package/src/theme/default/tags/theme-doc-footer-before.marko

@@ -0,0 +1 @@
+<!-- Extension point: theme doc footer before -->

package/src/theme/default/tags/theme-doc-top.marko

@@ -0,0 +1 @@
+<!-- Extension point: theme doc top -->

package/src/theme/default/tags/theme-head-bottom.marko

@@ -0,0 +1 @@
+<!-- Extension point: theme head bottom -->

package/src/theme/default/tags/theme-head-top.marko

@@ -0,0 +1 @@
+<!-- Extension point: theme head top -->

package/src/theme/default/tags/theme-home-features-after.marko

@@ -0,0 +1 @@
+<!-- Extension point: theme home features after -->

package/src/theme/default/tags/theme-home-hero-after.marko

@@ -0,0 +1 @@
+<!-- Extension point: theme home hero after -->

package/src/theme/default/tags/theme-home-hero-before.marko

@@ -0,0 +1 @@
+<!-- Extension point: theme home hero before -->

package/src/theme/default/tags/theme-navbar-center.marko

@@ -0,0 +1,5 @@
+<nav class="navbar-nav">
+  <if=input.items>
+    <nav-bar items=input.items/>
+  </if>
+</nav>

package/src/theme/default/tags/theme-navbar-end.marko

@@ -0,0 +1,30 @@
+<div class="navbar-actions">
+  <!-- Search Component with Keyboard Shortcut -->
+  <search/>
+
+  <!-- Theme Toggle (Dark Mode) -->
+  <theme-toggle/>
+
+  <!-- Mobile Menu Toggle -->
+  <button class="btn-icon mobile-menu-toggle" aria-label="Toggle menu" onClick() {
+    if (input.setMobileMenuOpen) {
+      input.setMobileMenuOpen(!input.mobileMenuOpen);
+    }
+  }>
+    <if=input.mobileMenuOpen>
+      <!-- Close Icon -->
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <line x1=18 y1=6 x2=6 y2=18/>
+        <line x1=6 y1=6 x2=18 y2=18/>
+      </svg>
+    </if>
+    <else>
+      <!-- Menu Icon -->
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <line x1=3 y1=12 x2=21 y2=12/>
+        <line x1=3 y1=6 x2=21 y2=6/>
+        <line x1=3 y1=18 x2=21 y2=18/>
+      </svg>
+    </else>
+  </button>
+</div>

package/src/theme/default/tags/theme-navbar-start.marko

@@ -0,0 +1 @@
+<!-- Extension point: theme navbar start -->

package/src/theme/default/tags/theme-page-bottom.marko

@@ -0,0 +1 @@
+<!-- Extension point: theme page bottom -->

package/src/theme/default/tags/theme-page-top.marko

@@ -0,0 +1 @@
+<!-- Extension point: theme page top -->

package/src/theme/default/tags/theme-sidebar-bottom.marko

@@ -0,0 +1 @@
+<!-- Extension point: theme sidebar bottom -->

package/src/theme/default/tags/theme-sidebar-top.marko

@@ -0,0 +1 @@
+<!-- Extension point: theme sidebar top -->

package/src/theme/default/tags/theme-toc-item.marko

@@ -0,0 +1 @@
+<!-- Extension point: theme toc item -->

package/src/theme/default/tags/theme-toggle.marko

@@ -0,0 +1,122 @@
+/*!
+ * Theme Toggle Component
+ * Dark mode toggle with sun/moon icons and localStorage persistence
+ */
+
+<let/isDark=false/>
+
+<style/styles>
+  .toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--text-2);
+    cursor: pointer;
+    border-radius: var(--radius-md, 8px);
+    transition: background-color var(--transition-fast), color var(--transition-fast);
+  }
+
+  .toggle:hover {
+    background: var(--bg-soft);
+    color: var(--text-1);
+  }
+
+  .toggle:focus-visible {
+    outline: 2px solid var(--color-primary-2, #3a5ccc);
+    outline-offset: 2px;
+  }
+
+  .icon {
+    transition: opacity var(--transition-fast), transform var(--transition-fast);
+  }
+
+  .icon.moon {
+    animation: moon-rise 0.3s ease-out;
+  }
+
+  .icon.sun {
+    animation: sun-rise 0.3s ease-out;
+  }
+
+  @keyframes moon-rise {
+    from {
+      opacity: 0;
+      transform: rotate(-90deg) scale(0.5);
+    }
+    to {
+      opacity: 1;
+      transform: rotate(0) scale(1);
+    }
+  }
+
+  @keyframes sun-rise {
+    from {
+      opacity: 0;
+      transform: rotate(90deg) scale(0.5);
+    }
+    to {
+      opacity: 1;
+      transform: rotate(0) scale(1);
+    }
+  }
+</style>
+
+<button
+  class=styles.toggle
+  aria-label="Toggle dark mode"
+  onClick(e) {
+    isDark = !isDark;
+    if (typeof document !== 'undefined') {
+      const html = document.documentElement;
+      if (isDark) {
+        html.classList.add('dark');
+      } else {
+        html.classList.remove('dark');
+      }
+      localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    }
+  }>
+  <if=isDark>
+    <svg
+      class=styles.icon.sun
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round">
+      <circle cx="12" cy="12" r="5"></circle>
+      <line x1="12" y1="1" x2="12" y2="3"></line>
+      <line x1="12" y1="21" x2="12" y2="23"></line>
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+      <line x1="1" y1="12" x2="3" y2="12"></line>
+      <line x1="21" y1="12" x2="23" y2="12"></line>
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+    </svg>
+  </if>
+  <else>
+    <svg
+      class=styles.icon.moon
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round">
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+    </svg>
+  </else>
+</button>

package/src/theme/default/tags/toc.marko

@@ -0,0 +1,140 @@
+<let/hasHeaders=(input.headers && input.headers.length > 0)/>
+
+<if=hasHeaders>
+  <nav class="toc">
+    <div class="toc-header">On This Page</div>
+    <ul class="toc-list">
+      <for|header| of=input.headers>
+        <li class="toc-item">
+          <a href="#" + header.slug class="toc-link toc-link--level-2">
+            <span class="toc-text">${header.title}</span>
+          </a>
+
+          <if=(header.children && header.children.length > 0)>
+            <ul class="toc-list toc-list--nested">
+              <for|child| of=header.children>
+                <li class="toc-item">
+                  <a href="#" + child.slug class="toc-link toc-link--level-3">
+                    <span class="toc-text">${child.title}</span>
+                  </a>
+                </li>
+              </for>
+            </ul>
+          </if>
+        </li>
+      </for>
+    </ul>
+  </nav>
+</if>
+
+<style>
+  .toc {
+    position: sticky;
+    top: var(--navbar-height, 60px);
+    width: var(--toc-width, 220px);
+    flex-shrink: 0;
+    align-self: flex-start;
+    max-height: calc(100vh - 80px);
+    overflow-y: auto;
+    padding-left: var(--space-md, 1rem);
+    border-left: 1px solid var(--border-color, #e5e7eb);
+  }
+
+  .toc-header {
+    font-size: var(--text-xs, 0.75rem);
+    font-weight: var(--font-semibold, 600);
+    color: var(--text-tertiary, #6b7280);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: var(--space-sm, 0.75rem);
+    padding-left: var(--space-xs, 0.5rem);
+  }
+
+  .toc-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .toc-list--nested {
+    gap: 1px;
+    margin-top: 2px;
+    padding-left: 0;
+  }
+
+  .toc-item {
+    list-style: none;
+  }
+
+  .toc-link {
+    display: flex;
+    align-items: center;
+    padding: 6px var(--space-sm, 0.75rem);
+    font-size: var(--text-sm, 0.875rem);
+    color: var(--text-secondary, #64748b);
+    text-decoration: none;
+    border-radius: 4px;
+    transition: all 0.15s ease;
+    line-height: 1.5;
+  }
+
+  .toc-link:hover {
+    color: var(--text-primary, #334155);
+    background-color: var(--c-gray-100, #f1f5f9);
+  }
+
+  .toc-link.toc-link--level-3 {
+    font-size: var(--text-xs, 0.75rem);
+    padding: 4px var(--space-sm, 0.75rem) 4px 24px;
+    color: var(--text-tertiary, #94a3b8);
+  }
+
+  .toc-link.toc-link--level-3:hover {
+    color: var(--text-secondary, #475569);
+    background-color: var(--c-gray-50, #f8fafc);
+  }
+
+  .toc-link.active {
+    color: var(--c-brand, #3b82f6);
+    background-color: var(--accent-bg, rgba(59, 130, 246, 0.1));
+    font-weight: var(--font-medium, 500);
+  }
+
+  .toc-link.toc-link--level-3.active {
+    color: var(--c-brand, #3b82f6);
+    background-color: var(--accent-bg, rgba(59, 130, 246, 0.1));
+  }
+
+  /* Scrollbar styling for TOC */
+  .toc::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  .toc::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .toc::-webkit-scrollbar-thumb {
+    background: var(--c-gray-300, #d1d5db);
+    border-radius: 2px;
+  }
+
+  .toc::-webkit-scrollbar-thumb:hover {
+    background: var(--c-gray-400, #9ca3af);
+  }
+
+  @media (max-width: 1280px) {
+    .toc {
+      width: 180px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .toc {
+      display: none;
+    }
+  }
+</style>

package/src/theme/default/theme.ts

@@ -0,0 +1,83 @@
+declare const document: any;
+declare const localStorage: any;
+declare const window: any;
+
+/**
+ * MarkoPress Default Theme - Client-side Scripts
+ * Handles dark mode, sidebar, and other interactive features
+ */
+
+declare global {
+  interface Window {
+    MarkoPressTheme?: {
+      toggleDarkMode: () => void;
+      toggleSidebar: () => void;
+    };
+  }
+}
+
+(function() {
+  'use strict';
+
+  // Dark Mode Toggle
+  const darkModeToggle = document.getElementById('dark-mode-toggle');
+  const DARK_MODE_KEY = 'theme';
+
+  function initDarkMode() {
+    const currentTheme = localStorage.getItem(DARK_MODE_KEY) || 'light';
+    if (currentTheme === 'dark') {
+      document.body.classList.add('dark-mode');
+      if (darkModeToggle) {
+        darkModeToggle.textContent = '☀️';
+      }
+    }
+  }
+
+  function toggleDarkMode() {
+    document.body.classList.toggle('dark-mode');
+    const isDarkMode = document.body.classList.contains('dark-mode');
+    if (darkModeToggle) {
+      darkModeToggle.textContent = isDarkMode ? '☀️' : '🌙';
+    }
+    localStorage.setItem(DARK_MODE_KEY, isDarkMode ? 'dark' : 'light');
+  }
+
+  // Sidebar Toggle
+  const sidebarToggle = document.getElementById('sidebar-toggle');
+  const sidebar = document.getElementById('sidebar');
+
+  function toggleSidebar() {
+    if (sidebar) {
+      sidebar.classList.toggle('open');
+    }
+  }
+
+  // Initialize
+  function init() {
+    // Dark mode
+    if (darkModeToggle) {
+      initDarkMode();
+      darkModeToggle.addEventListener('click', toggleDarkMode);
+    }
+
+    // Sidebar
+    if (sidebarToggle) {
+      sidebarToggle.addEventListener('click', toggleSidebar);
+    }
+  }
+
+  // Run on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+
+  // Expose utilities globally
+  window.MarkoPressTheme = {
+    toggleDarkMode,
+    toggleSidebar,
+  };
+
+  console.log('[MarkoPress Theme] Initialized');
+})();

package/templates/blog-post.marko.template

@@ -0,0 +1,13 @@
+<article class="blog-post">
+  <header>
+    <h1>${$global.title}</h1>
+    <div class="meta">
+      <span class="date">${$global.date || ''}</span>
+      <span class="author"> by ${$global.author || ''}</span>
+    </div>
+  </header>
+  <div class="content">
+    $!{$global.content}
+  </div>
+</article>
+

package/templates/catch-all-handler.js.template

@@ -0,0 +1,90 @@
+import { renderMarkdown } from 'markopress/markdown';
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+import { config } from '{{CONFIG_PATH}}';
+import { loadMarkdownModule, registerMarkdownContent } from '{{VITE_PLUGIN_PATH}}';
+
+// Load module enhancements (sidebar, etc.) generated during build
+let moduleEnhancements = {};
+try {
+  const enhancementsPath = path.join(config.root, 'src/.generated/module-enhancements.json');
+  moduleEnhancements = await fs.readFile(enhancementsPath, 'utf-8').then(JSON.parse).catch(() => ({}));
+} catch {
+  // Enhancements file not found, use empty object
+}
+
+export async function GET(context, next) {
+  const slug = context.params.slug || 'index';
+  const contentType = '{{CONTENT_TYPE}}'; // 'pages', 'blog', 'guides', etc.
+
+  // Build file path from content config
+  // Content paths in config are relative to config.root (e.g., ../content/pages)
+  // Get the content directory for this module
+  const contentConfig = config.content[contentType];
+  const contentDir = typeof contentConfig === 'string' ? contentConfig : contentConfig?.dir;
+
+  if (!contentDir) {
+    // No content directory configured for this type
+    return next();
+  }
+
+  // Resolve the full file path (contentDir is relative to config.root)
+  const filePath = path.join(config.root, contentDir, `${slug}.md`);
+
+  try {
+    // Check if file exists and read it
+    const source = await fs.readFile(filePath, 'utf-8').catch(() => null);
+
+    if (!source) {
+      // File not found - return 404
+      return new Response('Not Found', { status: 404, statusText: 'Not Found' });
+    }
+
+    // Render markdown at request time
+    const rendered = await renderMarkdown(source);
+
+    // Register the markdown content as a virtual Marko component
+    const contentId = `${contentType}/${slug}`;
+    await registerMarkdownContent(contentId, rendered.html);
+
+    // Import the virtual module (handled by vite plugin)
+    const contentComponent = (await loadMarkdownModule(`virtual:markdown-content/${contentId}`)).default;
+
+    // Set theme config from markopress.config.js (only after file is found)
+    context.navbar = config.theme.options.navbar || [];
+    context.lang = config.site.lang || 'en-US';
+    context.siteHead = config.site.head || [];
+    context.footer = config.theme.options.footer || null;
+
+    // Set context for template
+    context.title = rendered.frontmatter.title || slug;
+    context.description = rendered.frontmatter.description || '';
+    context.contentComponent = contentComponent;
+    context.slug = slug;
+
+    // Load module enhancements for this content type (sidebar, etc.)
+    const enhancements = moduleEnhancements[contentType] || {};
+    context.sidebar = enhancements.sidebar || null;
+
+    // TOC (table of contents) - extracted from headers
+    if (rendered.headers && rendered.headers.length > 0) {
+      context.toc = rendered.headers;
+    }
+
+    // Blog-specific fields
+    if (rendered.frontmatter.date) {
+      context.date = rendered.frontmatter.date;
+    }
+    if (rendered.frontmatter.author) {
+      context.author = rendered.frontmatter.author;
+    }
+    if (rendered.frontmatter.tags) {
+      context.tags = rendered.frontmatter.tags;
+    }
+
+  } catch (error) {
+    // Log error and return 404
+    console.error(`Error rendering ${contentType}/${slug}:`, error);
+    return new Response('Not Found', { status: 404, statusText: 'Not Found' });
+  }
+}

package/templates/catch-all-page.marko.template

@@ -0,0 +1,69 @@
+<div class="content {{CONTENT_TYPE_CLASS}}">
+  <theme-body-top/>
+  <div class="content-layout">
+    <div class="content-body">
+      <h1>${$global.title}</h1>
+      <if=$global.description>
+        <p class="description">${$global.description}</p>
+      </if>
+      <if=$global.date>
+        <p class="meta">Published: ${$global.date}</p>
+      </if>
+      <if=$global.author>
+        <p class="meta">By ${$global.author}</p>
+      </if>
+      <if=$global.tags>
+        <p class="meta">
+          <for|tag| of=$global.tags>
+            <span class="tag">${tag}</span>
+          </for>
+        </p>
+      </if>
+      <hr>
+      <${$global.contentComponent || {}}>
+        <div>No content</div>
+      </${$global.contentComponent || {}}>
+    </div>
+    <if=$global.toc>
+      <toc headers=$global.toc/>
+    </if>
+  </div>
+  <theme-body-bottom/>
+</div>
+
+<style>
+  .content-layout {
+    display: flex;
+    gap: 32px;
+    max-width: 1100px;
+    margin: 0 auto;
+    position: relative;
+  }
+
+  .content-body {
+    flex: 1;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .toc {
+    position: sticky;
+    top: 1rem;
+    width: 200px;
+    flex-shrink: 0;
+  }
+
+  .meta {
+    font-size: 0.875rem;
+    color: #666;
+  }
+
+  .tag {
+    display: inline-block;
+    background: #e5e7eb;
+    padding: 0.125rem 0.5rem;
+    border-radius: 4px;
+    margin-right: 0.5rem;
+    font-size: 0.75rem;
+  }
+</style>

package/templates/doc.marko.template

@@ -0,0 +1,6 @@
+<div class="content">
+  <h1>${$global.title}</h1>
+  <div class="content-body">
+    $!{$global.content}
+  </div>
+</div>