markopress 0.0.1

package/src/theme/default/build/generate-all.ts

@@ -0,0 +1,99 @@
+/**
+ * CSS Generation Script
+ * Generates all theme CSS variants from design systems
+ */
+
+import { writeFile, mkdir, copyFile, readFile } from 'fs/promises';
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { readdir } from 'fs/promises';
+import { generateThemeCSS } from './generate-css.js';
+import { designSystems } from '../design-systems/index.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const publicDir = resolve(__dirname, '../public');
+const componentsDir = resolve(__dirname, '../components');
+const distTagsDir = resolve(__dirname, '../tags');
+
+/**
+ * Copy Marko components to dist/tags for export
+ * Recursively copies from src/components and subdirectories
+ */
+async function copyComponentsToDist() {
+  try {
+    // Ensure dist/tags directory exists
+    await mkdir(distTagsDir, { recursive: true });
+
+    // Recursively get all .marko files from src/components
+    async function getMarkoFiles(dir: string): Promise<string[]> {
+      const entries = await readdir(dir, { withFileTypes: true });
+      const files: string[] = [];
+
+      for (const entry of entries) {
+        const fullPath = resolve(dir, entry.name);
+        if (entry.isDirectory()) {
+          const subFiles = await getMarkoFiles(fullPath);
+          files.push(...subFiles);
+        } else if (entry.isFile() && entry.name.endsWith('.marko')) {
+          files.push(fullPath);
+        }
+      }
+      return files;
+    }
+
+    const markoFiles = await getMarkoFiles(componentsDir);
+
+    // Copy each .marko file to dist/tags
+    // Files in subdirectories get flattened (theme/ThemeNavbarEnd.marko -> ThemeNavbarEnd.marko)
+    for (const srcPath of markoFiles) {
+      const fileName = srcPath.split('/').pop()!; // Get just the filename
+      const destPath = resolve(distTagsDir, fileName);
+
+      await copyFile(srcPath, destPath);
+    }
+
+    console.log(`✓ Copied ${markoFiles.length} component(s) to dist/tags`);
+  } catch (error) {
+    // Silently skip if components dir doesn't exist yet
+    if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+      console.error('Warning: Failed to copy components:', error);
+    }
+  }
+}
+
+/**
+ * Generate all theme CSS variants
+ */
+export async function generateAllThemes() {
+  const styles = ['default', 'vitepress', 'docusaurus'] as const;
+
+  console.log('Generating theme CSS files...\n');
+
+  // Read the component styles (includes line numbers, code blocks, etc.)
+  const stylesCssPath = resolve(__dirname, '../styles.css');
+  const componentStyles = await readFile(stylesCssPath, 'utf-8');
+
+  for (const style of styles) {
+    const system = designSystems[style];
+    const css = generateThemeCSS(system);
+    const outputPath = resolve(publicDir, `theme-${style}.css`);
+
+    // Combine design system CSS + component styles
+    const fullCss = `${css}\n\n/* Component Styles */\n${componentStyles}`;
+    await writeFile(outputPath, fullCss, 'utf-8');
+    console.log(`✓ Generated theme-${style}.css`);
+  }
+
+  console.log('\nCopying Marko components to dist/tags...\n');
+  await copyComponentsToDist();
+
+  console.log('\n✨ All theme assets generated successfully!');
+}
+
+// Run if called directly
+if (process.argv[1] === fileURLToPath(import.meta.url)) {
+  generateAllThemes().catch((error) => {
+    console.error('Error generating CSS files:', error);
+    process.exit(1);
+  });
+}

package/src/theme/default/build/generate-css.ts

@@ -0,0 +1,234 @@
+/**
+ * CSS Variable Generator
+ * Converts design tokens into CSS custom properties
+ */
+
+import type { DesignSystem, ColorTokens, TypographyTokens, SpacingTokens, EffectTokens, LayoutTokens } from '../design-systems/types.js';
+import { getDarkModeOverride as getDarkOverride, type DesignSystemName } from '../design-systems/index.js';
+
+/**
+ * Generate CSS variables from design system
+ * @param designSystem - Design system object
+ * @param darkMode - Whether to generate dark mode variables
+ * @returns CSS string with :root variables
+ */
+export function generateCSSVariables(designSystem: DesignSystem, darkMode: boolean = false): string {
+  const lines: string[] = [];
+
+  // Root selector
+  lines.push(darkMode ? ':root.dark,' : ':root,');
+  lines.push(darkMode ? 'html.dark {' : 'html {');
+
+  // Colors
+  generateColorVariables(lines, designSystem.colors);
+
+  // Typography
+  generateTypographyVariables(lines, designSystem.typography);
+
+  // Spacing
+  generateSpacingVariables(lines, designSystem.spacing);
+
+  // Effects (shadows, border radius, transitions)
+  generateEffectVariables(lines, designSystem.effects);
+
+  // Layout (dimensions, z-index)
+  generateLayoutVariables(lines, designSystem.layout);
+
+  lines.push('}');
+
+  return lines.join('\n');
+}
+
+/**
+ * Generate color CSS variables
+ */
+function generateColorVariables(lines: string[], colors: ColorTokens): void {
+  // Primary colors
+  lines.push(`  --color-primary-1: ${colors.primary['1']};`);
+  lines.push(`  --color-primary-2: ${colors.primary['2']};`);
+  lines.push(`  --color-primary-3: ${colors.primary['3']};`);
+  lines.push(`  --color-primary-soft: ${colors.primary.soft};`);
+
+  // Semantic colors (success, warning, danger, info)
+  (['success', 'warning', 'danger', 'info'] as const).forEach((color) => {
+    lines.push(`  --color-${color}-1: ${colors[color]['1']};`);
+    lines.push(`  --color-${color}-2: ${colors[color]['2']};`);
+    lines.push(`  --color-${color}-3: ${colors[color]['3']};`);
+    lines.push(`  --color-${color}-soft: ${colors[color].soft};`);
+  });
+
+  // Gray scale
+  lines.push(`  --color-gray-1: ${colors.gray['1']};`);
+  lines.push(`  --color-gray-2: ${colors.gray['2']};`);
+  lines.push(`  --color-gray-3: ${colors.gray['3']};`);
+  lines.push(`  --color-gray-soft: ${colors.gray.soft};`);
+
+  // Background colors
+  lines.push(`  --bg-default: ${colors.bg.default};`);
+  lines.push(`  --bg-alt: ${colors.bg.alt};`);
+  lines.push(`  --bg-elevated: ${colors.bg.elevated};`);
+  lines.push(`  --bg-soft: ${colors.bg.soft};`);
+
+  // Text colors
+  lines.push(`  --text-1: ${colors.text['1']};`);
+  lines.push(`  --text-2: ${colors.text['2']};`);
+  lines.push(`  --text-3: ${colors.text['3']};`);
+
+  // Border colors
+  lines.push(`  --border-default: ${colors.border.default};`);
+  lines.push(`  --border-divider: ${colors.border.divider};`);
+  lines.push(`  --border-gutter: ${colors.border.gutter};`);
+
+  // Divider
+  lines.push(`  --divider: ${colors.divider};`);
+
+  // Soft backgrounds
+  lines.push(`  --soft-brand: ${colors.soft.brand};`);
+  lines.push(`  --soft-gray: ${colors.soft.gray};`);
+}
+
+/**
+ * Generate typography CSS variables
+ */
+function generateTypographyVariables(lines: string[], typography: TypographyTokens): void {
+  // Font families
+  lines.push(`  --font-sans: ${typography.fontFamily.sans};`);
+  lines.push(`  --font-mono: ${typography.fontFamily.mono};`);
+
+  // Font sizes
+  lines.push(`  --font-size-xs: ${typography.fontSize.xs};`);
+  lines.push(`  --font-size-sm: ${typography.fontSize.sm};`);
+  lines.push(`  --font-size-base: ${typography.fontSize.base};`);
+  lines.push(`  --font-size-lg: ${typography.fontSize.lg};`);
+  lines.push(`  --font-size-xl: ${typography.fontSize.xl};`);
+  lines.push(`  --font-size-2xl: ${typography.fontSize['2xl']};`);
+  lines.push(`  --font-size-3xl: ${typography.fontSize['3xl']};`);
+  lines.push(`  --font-size-4xl: ${typography.fontSize['4xl']};`);
+
+  // Font weights
+  lines.push(`  --font-weight-normal: ${typography.fontWeight.normal};`);
+  lines.push(`  --font-weight-medium: ${typography.fontWeight.medium};`);
+  lines.push(`  --font-weight-semibold: ${typography.fontWeight.semibold};`);
+  lines.push(`  --font-weight-bold: ${typography.fontWeight.bold};`);
+
+  // Line heights
+  lines.push(`  --line-height-tight: ${typography.lineHeight.tight};`);
+  lines.push(`  --line-height-normal: ${typography.lineHeight.normal};`);
+  lines.push(`  --line-height-relaxed: ${typography.lineHeight.relaxed};`);
+
+  // Letter spacing (optional)
+  if (typography.letterSpacing) {
+    if (typography.letterSpacing.tight) {
+      lines.push(`  --letter-spacing-tight: ${typography.letterSpacing.tight};`);
+    }
+    if (typography.letterSpacing.normal) {
+      lines.push(`  --letter-spacing-normal: ${typography.letterSpacing.normal};`);
+    }
+    if (typography.letterSpacing.wide) {
+      lines.push(`  --letter-spacing-wide: ${typography.letterSpacing.wide};`);
+    }
+  }
+}
+
+/**
+ * Generate spacing CSS variables
+ */
+function generateSpacingVariables(lines: string[], spacing: SpacingTokens): void {
+  lines.push(`  --space-xs: ${spacing.scale.xs};`);
+  lines.push(`  --space-sm: ${spacing.scale.sm};`);
+  lines.push(`  --space-md: ${spacing.scale.md};`);
+  lines.push(`  --space-lg: ${spacing.scale.lg};`);
+  lines.push(`  --space-xl: ${spacing.scale.xl};`);
+  lines.push(`  --space-2xl: ${spacing.scale['2xl']};`);
+  lines.push(`  --space-3xl: ${spacing.scale['3xl']};`);
+  lines.push(`  --space-4xl: ${spacing.scale['4xl']};`);
+}
+
+/**
+ * Generate effect CSS variables (shadows, border radius, transitions)
+ */
+function generateEffectVariables(lines: string[], effects: EffectTokens): void {
+  // Shadows
+  lines.push(`  --shadow-1: ${effects.shadows['1']};`);
+  lines.push(`  --shadow-2: ${effects.shadows['2']};`);
+  lines.push(`  --shadow-3: ${effects.shadows['3']};`);
+  lines.push(`  --shadow-4: ${effects.shadows['4']};`);
+  lines.push(`  --shadow-5: ${effects.shadows['5']};`);
+
+  // Border radius
+  lines.push(`  --radius-sm: ${effects.borderRadius.sm};`);
+  lines.push(`  --radius-md: ${effects.borderRadius.md};`);
+  lines.push(`  --radius-lg: ${effects.borderRadius.lg};`);
+
+  // Transitions
+  if (effects.transitions.base) {
+    lines.push(`  --transition-base: ${effects.transitions.base};`);
+  }
+  if (effects.transitions.fast) {
+    lines.push(`  --transition-fast: ${effects.transitions.fast};`);
+  }
+  if (effects.transitions.slow) {
+    lines.push(`  --transition-slow: ${effects.transitions.slow};`);
+  }
+}
+
+/**
+ * Generate layout CSS variables (dimensions, z-index)
+ */
+function generateLayoutVariables(lines: string[], layout: LayoutTokens): void {
+  // Dimensions
+  lines.push(`  --layout-max-width: ${layout.maxWidth};`);
+  lines.push(`  --navbar-height: ${layout.navbarHeight};`);
+  lines.push(`  --sidebar-width: ${layout.sidebarWidth};`);
+  if (layout.tocWidth) {
+    lines.push(`  --toc-width: ${layout.tocWidth};`);
+  }
+
+  // Z-index
+  lines.push(`  --z-footer: ${layout.zIndex.footer};`);
+  lines.push(`  --z-local-nav: ${layout.zIndex.localNav};`);
+  lines.push(`  --z-nav: ${layout.zIndex.nav};`);
+  lines.push(`  --z-layout-top: ${layout.zIndex.layoutTop};`);
+  lines.push(`  --z-backdrop: ${layout.zIndex.backdrop};`);
+  lines.push(`  --z-sidebar: ${layout.zIndex.sidebar};`);
+}
+
+/**
+ * Generate complete CSS theme file
+ * @param designSystem - Design system object
+ * @returns Complete CSS with light and dark mode
+ */
+export function generateThemeCSS(designSystem: DesignSystem): string {
+  const lines: string[] = [];
+
+  // Header comment
+  lines.push(`/*`);
+  lines.push(` * ${designSystem.name} Design System`);
+  lines.push(` * Version: ${designSystem.version}`);
+  if (designSystem.description) {
+    lines.push(` * ${designSystem.description}`);
+  }
+  lines.push(` * Auto-generated from design tokens`);
+  lines.push(` */`);
+  lines.push('');
+
+  // Light mode
+  lines.push(generateCSSVariables(designSystem, false));
+  lines.push('');
+
+  // Dark mode (if override exists)
+  const darkOverride = getDarkModeOverride(designSystem.name);
+  if (darkOverride) {
+    const darkSystem = { ...designSystem, ...darkOverride };
+    lines.push(generateCSSVariables(darkSystem, true));
+  }
+
+  return lines.join('\n');
+}
+
+/**
+ * Get dark mode override for a design system
+ */
+function getDarkModeOverride(name: string): Partial<DesignSystem> | null {
+  return getDarkOverride(name as DesignSystemName) || null;
+}

package/src/theme/default/build/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Build utilities for theme-default
+ */
+
+export { generateCSSVariables, generateThemeCSS } from './generate-css.js';

package/src/theme/default/components/doc-footer.marko

@@ -0,0 +1,180 @@
+/*!
+ * Documentation Footer Component
+ * Displays edit link, last updated timestamp, and prev/next navigation
+ */
+
+<script>
+  const formatDate = (date) => {
+    if (!date) return '';
+    if (typeof window === 'undefined') return date;
+
+    const d = new Date(date);
+    return d.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  };
+</script>
+
+<footer class="doc-footer">
+  <!-- Edit Link -->
+  <if=input.editUrl>
+    <div class="doc-footer-edit">
+      <a
+        href=input.editUrl
+        target="_blank"
+        rel="noopener noreferrer"
+        class="edit-link">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+        </svg>
+        <span>Edit this page</span>
+      </a>
+    </div>
+  </if>
+
+  <!-- Last Updated -->
+  <if=input.lastUpdated>
+    <div class="doc-footer-updated">
+      <span class="updated-label">Last updated:</span>
+      <time datetime=input.lastUpdated>${formatDate(input.lastUpdated)}</time>
+    </div>
+  </if>
+
+  <!-- Prev/Next Navigation -->
+  <if=input.prev || input.next>
+    <div class="doc-footer-nav">
+      <!-- Previous Page -->
+      <if=input.prev>
+        <a class="page-nav-prev" href=input.prev.link>
+          <span class="page-nav-label">Previous</span>
+          <span class="page-nav-title">${input.prev.title}</span>
+        </a>
+      <else>
+        <div class="page-nav-spacer"></div>
+      </else>
+
+      <!-- Next Page -->
+      <if=input.next>
+        <a class="page-nav-next" href=input.next.link>
+          <span class="page-nav-label">Next</span>
+          <span class="page-nav-title">${input.next.title}</span>
+        </a>
+      </if>
+    </div>
+  </if>
+</footer>
+
+<style>
+  .doc-footer {
+    margin-top: var(--space-3xl);
+    padding-top: var(--space-xl);
+    border-top: 1px solid var(--border-default);
+  }
+
+  /* Edit Link */
+  .doc-footer-edit {
+    margin-bottom: var(--space-md);
+  }
+
+  .edit-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    color: var(--text-2);
+    font-size: var(--font-size-sm);
+    text-decoration: none;
+    transition: color var(--transition-fast);
+  }
+
+  .edit-link:hover {
+    color: var(--color-primary-2, #3a5ccc);
+  }
+
+  .edit-link svg {
+    flex-shrink: 0;
+  }
+
+  /* Last Updated */
+  .doc-footer-updated {
+    margin-bottom: var(--space-lg);
+    font-size: var(--font-size-sm);
+    color: var(--text-3);
+  }
+
+  .updated-label {
+    margin-right: var(--space-xs);
+  }
+
+  /* Prev/Next Navigation */
+  .doc-footer-nav {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-md);
+    margin-top: var(--space-xl);
+  }
+
+  .page-nav-prev,
+  .page-nav-next {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    padding: var(--space-md);
+    background: var(--bg-alt);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-lg, 12px);
+    text-decoration: none;
+    color: var(--text-1);
+    transition: all var(--transition-fast);
+  }
+
+  .page-nav-prev:hover,
+  .page-nav-next:hover {
+    border-color: var(--color-primary-2, #3a5ccc);
+    background: var(--bg-soft);
+  }
+
+  .page-nav-prev {
+    grid-column: 1;
+    text-align: left;
+  }
+
+  .page-nav-next {
+    grid-column: 2;
+    text-align: right;
+  }
+
+  .page-nav-spacer {
+    grid-column: 1;
+  }
+
+  .page-nav-label {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+    color: var(--text-2);
+    letter-spacing: 0.05em;
+  }
+
+  .page-nav-title {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
+  }
+
+  /* Mobile Responsive */
+  @media (max-width: 768px) {
+    .doc-footer-nav {
+      grid-template-columns: 1fr;
+    }
+
+    .page-nav-next {
+      grid-column: 1;
+    }
+
+    .page-nav-spacer {
+      display: none;
+    }
+  }
+</style>

package/src/theme/default/components/footer.marko

@@ -0,0 +1,32 @@
+/**
+ * Footer component
+ */
+
+<let/message=input.message || ''/>
+<let/copyright=input.copyright || ''/>
+
+<div class="site-footer">
+  <div class="footer-container">
+    <if=message>
+      <p class="footer-message">${message}</p>
+    </if>
+    <if=copyright>
+      <p class="footer-copyright">${copyright}</p>
+    </if>
+  </div>
+</div>
+
+<style>
+  .site-footer {
+    border-top: 1px solid var(--border-color);
+    padding: 2rem 0;
+    margin-top: 4rem;
+  }
+
+  .footer-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+    text-align: center;
+  }
+</style>

package/src/theme/default/components/header.marko

@@ -0,0 +1,49 @@
+/**
+ * Header component
+ */
+
+<let/siteTitle=input.siteTitle || 'MarkoPress'/>
+<let/navItems=input.navItems || []/>
+
+<div class="site-header">
+  <div class="header-container">
+    <a href="/" class="site-title">${siteTitle}</a>
+    <nav class="site-nav">
+      <for|item| in=navItems>
+        <a href=item.link class="nav-link">${item.text}</a>
+      </for>
+    </nav>
+  </div>
+</div>
+
+<style>
+  .site-header {
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 0;
+  }
+
+  .header-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .site-title {
+    font-weight: bold;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .site-nav {
+    display: flex;
+    gap: 1.5rem;
+  }
+
+  .nav-link {
+    text-decoration: none;
+    color: inherit;
+  }
+</style>