markopress 0.0.2 → 0.0.4

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

@@ -1,234 +0,0 @@
-/**
- * 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

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

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

@@ -1,180 +0,0 @@
-/*!
- * 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

@@ -1,32 +0,0 @@
-/**
- * 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

@@ -1,49 +0,0 @@
-/**
- * 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>

package/src/theme/default/components/nav-bar.marko

@@ -1,191 +0,0 @@
-/*!
- * Navbar Component
- * Main navigation bar with links and dropdown menus
- */
-
-<let/openDropdown=null/>
-<let/currentPath=(typeof window !== 'undefined' && window.location && window.location.pathname) || ''/>
-
-<nav class="navbar-nav-inner">
-  <for|item| of=(input.items || [])>
-    <!-- Dropdown Menu -->
-    <if=item.items>
-      <div class="nav-dropdown">
-        <button
-          class="nav-link dropdown-trigger"
-          aria-haspopup="true"
-          aria-expanded=openDropdown === item.text
-          onClick(e) {
-            openDropdown = openDropdown === item.text ? null : item.text;
-          }>
-          <span>${item.text}</span>
-          <svg class="dropdown-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
-        </button>
-
-        <if=openDropdown === item.text>
-          <div class="dropdown-menu">
-            <for|subitem| of=item.items>
-              <a class={"dropdown-item": true, active: currentPath === subitem.link} href=subitem.link>
-                ${subitem.text}
-              </a>
-            </for>
-          </div>
-        </if>
-      </div>
-    </if>
-    <if=!item.items>
-      <a class={"nav-link": true, active: currentPath === item.link} href=item.link>
-        ${item.text}
-      </a>
-    </if>
-  </for>
-
-  <!-- Language Switcher (if provided) -->
-  <if=input.locales>
-    <div class="nav-dropdown">
-      <button
-        class="nav-link dropdown-trigger"
-        aria-haspopup="true"
-        aria-expanded=openDropdown === 'lang'>
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <circle cx="12" cy="12" r="10"></circle>
-          <line x1="2" y1="12" x2="22" y2="12"></line>
-          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
-        </svg>
-      </button>
-
-      <if=openDropdown === 'lang'>
-        <div class="dropdown-menu">
-          <for|locale| of=input.locales>
-            <a class={"dropdown-item": true, active: locale.active} href=locale.link>
-              ${locale.label}
-            </a>
-          </for>
-        </div>
-      </if>
-    </div>
-  </if>
-
-  <!-- GitHub/Repo Link -->
-  <if=input.repoUrl>
-    <a
-      class="nav-link nav-icon"
-      href=input.repoUrl
-      target="_blank"
-      rel="noopener noreferrer"
-      aria-label="View source on GitHub">
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-      </svg>
-    </a>
-  </if>
-</nav>
-
-<style>
-  .navbar-nav-inner {
-    display: flex;
-    gap: var(--space-sm);
-    align-items: center;
-  }
-
-  .nav-link {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-xs);
-    padding: var(--space-sm) var(--space-md);
-    font-size: var(--text-sm);
-    font-weight: var(--font-medium);
-    color: var(--text-secondary);
-    border-radius: var(--radius-md);
-    transition: all var(--transition-fast);
-    cursor: pointer;
-    border: none;
-    background: transparent;
-    text-decoration: none;
-  }
-
-  .nav-link:hover {
-    color: var(--text-primary);
-    background: var(--bg-tertiary);
-  }
-
-  .nav-link.active {
-    color: var(--accent-primary);
-    background: var(--accent-bg);
-  }
-
-  .nav-icon {
-    padding: var(--space-sm);
-  }
-
-  .nav-dropdown {
-    position: relative;
-  }
-
-  .dropdown-trigger {
-    gap: var(--space-xs);
-  }
-
-  .dropdown-icon {
-    width: 14px;
-    height: 14px;
-    transition: transform var(--transition-fast);
-  }
-
-  .nav-dropdown[open] .dropdown-icon {
-    transform: rotate(180deg);
-  }
-
-  .dropdown-menu {
-    position: absolute;
-    top: calc(100% + var(--space-xs));
-    left: 0;
-    min-width: 200px;
-    padding: var(--space-xs);
-    background: var(--bg-primary);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-lg);
-    z-index: 100;
-  }
-
-  .dropdown-item {
-    display: block;
-    padding: var(--space-sm) var(--space-md);
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-    text-decoration: none;
-    border-radius: var(--radius-md);
-    transition: all var(--transition-fast);
-  }
-
-  .dropdown-item:hover {
-    color: var(--text-primary);
-    background: var(--bg-tertiary);
-  }
-
-  .dropdown-item.active {
-    color: var(--accent-primary);
-    background: var(--accent-bg);
-  }
-
-  /* Mobile menu specific styles */
-  .navbar-mobile-menu .navbar-nav-inner {
-    flex-direction: column;
-    align-items: stretch;
-    gap: var(--space-xs);
-  }
-
-  .navbar-mobile-menu .nav-dropdown {
-    width: 100%;
-  }
-
-  .navbar-mobile-menu .dropdown-menu {
-    position: static;
-    box-shadow: none;
-    border: none;
-    padding-left: var(--space-lg);
-  }
-</style>