markopress 0.0.1

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

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

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

@@ -0,0 +1,20 @@
+/*!
+ * Header Component
+ * Displays site title, description, and statistics
+ */
+
+<div class="header">
+  <h1>🚀 ${input.title || 'MarkoPress'}</h1>
+  <p>${input.description || 'A general-purpose static site generator using Marko.js v6'}</p>
+
+  <if=input.stats>
+    <div class="stats stats-container">
+      <for|stat| of=input.stats>
+        <div class="stat">
+          <div class="stat-value">${stat.value}</div>
+          <div class="stat-label">${stat.label}</div>
+        </div>
+      </for>
+    </div>
+  </if>
+</div>

package/src/theme/default/components/reading-progress.marko

@@ -0,0 +1,36 @@
+/*!
+ * Reading Progress Indicator Component
+ * Subtle progress bar at top of page showing scroll progress
+ */
+
+<let/progress=0/>
+
+<style/styles>
+  .container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: transparent;
+    z-index: 9999;
+    pointer-events: none;
+  }
+
+  .bar {
+    height: 100%;
+    background: var(--color-primary-2, rgba(100, 108, 255, 0.3));
+    transition: width 100ms linear;
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    .bar {
+      transition: none;
+    }
+  }
+</style>
+
+<div class=styles.container>
+  <div class=styles.bar style="width: ${progress}%"></>
+</div>

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

@@ -0,0 +1,239 @@
+/*!
+ * Search Component
+ * Search placeholder with keyboard shortcut (Ctrl+K / Cmd+K) and modal overlay
+ * Functional search to be implemented later
+ */
+
+<let/isOpen=false/>
+
+<button
+  class="search-trigger"
+  aria-label="Search"
+  onClick(e) {
+    isOpen = true;
+  }>
+  <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="11" cy="11" r="8"></circle>
+    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+  </svg>
+  <span class="search-label">Search</span>
+  <kbd class="search-shortcut">
+    <if=(typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform))>
+      ⌘K
+    </if>
+    <else>
+      Ctrl K
+    </else>
+  </kbd>
+</button>
+
+<if=isOpen>
+  <div
+    class="search-modal"
+    onClick(e) {
+      isOpen = false;
+    }>
+    <div
+      class="search-modal-content"
+      onClick(e) {
+        e.stopPropagation();
+      }>
+      <div class="search-input-wrapper">
+        <svg class="search-icon" 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="11" cy="11" r="8"></circle>
+          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+        </svg>
+        <input
+          type="text"
+          class="search-input"
+          placeholder="Search documentation..."
+          disabled
+        />
+        <kbd class="search-shortcut-small">ESC</kbd>
+      </div>
+      <div class="search-placeholder">
+        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="search-placeholder-icon">
+          <circle cx="11" cy="11" r="8"></circle>
+          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+        </svg>
+        <p class="search-placeholder-text">Search is coming soon!</p>
+        <p class="search-placeholder-hint">Press <kbd>ESC</kbd> to close</p>
+      </div>
+    </div>
+  </div>
+</if>
+
+<style>
+  .search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-sm) var(--space-md);
+    border: 1px solid var(--border-default);
+    background: var(--bg-alt);
+    color: var(--text-2);
+    font-size: var(--font-size-sm);
+    border-radius: var(--radius-md, 8px);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+  }
+
+  .search-trigger:hover {
+    border-color: var(--color-primary-2, #3a5ccc);
+    background: var(--bg-soft);
+    color: var(--text-1);
+  }
+
+  .search-trigger:focus-visible {
+    outline: 2px solid var(--color-primary-2, #3a5ccc);
+    outline-offset: 2px;
+  }
+
+  .search-label {
+    display: none;
+  }
+
+  @media (min-width: 768px) {
+    .search-label {
+      display: inline;
+    }
+  }
+
+  .search-shortcut,
+  .search-shortcut-small {
+    padding: 2px 6px;
+    font-size: 11px;
+    font-family: var(--font-mono);
+    background: var(--bg-default);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm, 4px);
+    color: var(--text-3);
+  }
+
+  .search-shortcut {
+    display: none;
+  }
+
+  @media (min-width: 768px) {
+    .search-shortcut {
+      display: inline-block;
+    }
+  }
+
+  /* Search Modal */
+  .search-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: calc(var(--navbar-height, 64px) + var(--space-xl));
+    z-index: 100;
+    animation: fade-in 0.2s ease-out;
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .search-modal-content {
+    width: 90%;
+    max-width: 640px;
+    background: var(--bg-default);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-lg, 12px);
+    box-shadow: var(--shadow-5);
+    overflow: hidden;
+    animation: slide-down 0.2s ease-out;
+  }
+
+  @keyframes slide-down {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .search-input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    padding: var(--space-md) var(--space-lg);
+    border-bottom: 1px solid var(--border-default);
+  }
+
+  .search-icon {
+    flex-shrink: 0;
+    color: var(--text-3);
+  }
+
+  .search-input {
+    flex: 1;
+    border: none;
+    background: transparent;
+    font-size: var(--font-size-base);
+    color: var(--text-1);
+    outline: none;
+  }
+
+  .search-input::placeholder {
+    color: var(--text-3);
+  }
+
+  .search-input:disabled {
+    cursor: not-allowed;
+  }
+
+  .search-shortcut-small {
+    flex-shrink: 0;
+  }
+
+  .search-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-3xl);
+    text-align: center;
+  }
+
+  .search-placeholder-icon {
+    margin-bottom: var(--space-md);
+    color: var(--text-3);
+    opacity: 0.5;
+  }
+
+  .search-placeholder-text {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
+    color: var(--text-1);
+    margin-bottom: var(--space-sm);
+  }
+
+  .search-placeholder-hint {
+    font-size: var(--font-size-sm);
+    color: var(--text-3);
+  }
+
+  .search-placeholder-hint kbd {
+    padding: 2px 6px;
+    font-size: 11px;
+    font-family: var(--font-mono);
+    background: var(--bg-alt);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm, 4px);
+  }
+</style>

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

@@ -0,0 +1,211 @@
+/*!
+ * Sidebar Component
+ * Hierarchical navigation with collapsible groups
+ */
+
+<let/openGroups=new Set((input.initialOpenGroups || []))/>
+<let/currentPath=(typeof window !== "undefined" && window.location && window.location.pathname) || ""/>
+
+<style/styles>
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+  }
+
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+  }
+
+  .sectionHeader {
+    padding: var(--sidebar-category-padding, var(--space-sm) 0);
+    font-size: var(--sidebar-category-font-size, 0.75rem);
+    font-weight: var(--sidebar-category-font-weight, 600);
+    text-transform: var(--sidebar-category-text-transform, uppercase);
+    color: var(--text-2, #6b7280);
+    letter-spacing: 0.05em;
+  }
+
+  .nav {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--sidebar-item-gap, var(--space-xs));
+  }
+
+  .item {
+    list-style: none;
+  }
+
+  .link {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--sidebar-item-padding, var(--space-sm) var(--space-md));
+    font-size: var(--sidebar-item-font-size, 0.875rem);
+    font-weight: var(--sidebar-item-font-weight, 400);
+    color: var(--text-2, #6b7280);
+    text-decoration: none;
+    border-radius: var(--sidebar-item-border-radius, 4px);
+    transition: all var(--transition-fast, 0.15s);
+    line-height: var(--sidebar-item-height, 1.4);
+    height: var(--sidebar-item-height, auto);
+  }
+
+  .link:hover {
+    color: var(--text-1, #1f2937);
+    background: var(--sidebar-hover-background, rgba(0, 0, 0, 0.05));
+  }
+
+  .link.active {
+    color: var(--color-primary-1, #3a5ccc);
+    background: var(--sidebar-active-background, rgba(100, 108, 255, 0.14));
+    font-weight: var(--sidebar-item-font-weight, 500);
+    border-left: var(--sidebar-active-border, 2px solid #3451b2);
+  }
+
+  .icon {
+    flex-shrink: 0;
+    font-size: 1rem;
+  }
+
+  .text {
+    flex: 1;
+  }
+
+  .group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .groupHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--sidebar-item-padding, var(--space-sm) var(--space-md));
+    font-size: var(--sidebar-item-font-size, 0.875rem);
+    font-weight: 500;
+    color: var(--text-1, #1f2937);
+    cursor: pointer;
+    border-radius: var(--sidebar-item-border-radius, 4px);
+    transition: background-color var(--transition-fast, 0.15s);
+    user-select: none;
+    height: var(--sidebar-item-height, auto);
+  }
+
+  .groupHeader:hover {
+    background: var(--sidebar-hover-background, rgba(0, 0, 0, 0.05));
+  }
+
+  .groupTitle {
+    flex: 1;
+  }
+
+  .groupIcon {
+    flex-shrink: 0;
+    transition: transform var(--transition-fast, 0.15s);
+  }
+
+  .groupIcon.rotated {
+    transform: rotate(90deg);
+  }
+
+  .groupItems {
+    list-style: none;
+    padding-left: var(--space-lg);
+    margin-top: var(--space-xs);
+    display: flex;
+    flex-direction: column;
+    gap: var(--sidebar-item-gap, var(--space-xs));
+    border-left: 1px solid var(--border-divider, #e5e7eb);
+  }
+
+  .groupItems .link {
+    font-size: var(--sidebar-item-font-size, 0.875rem);
+    color: var(--text-2, #6b7280);
+  }
+</style>
+
+<div class=styles.content role="navigation" aria-label="Sidebar navigation">
+  <!-- Sidebar Sections -->
+  <for|section| of=(input.sections || [])>
+    <div class=styles.section>
+      <!-- Section Header -->
+      <if=section.text>
+        <div class=styles.sectionHeader>${section.text}</div>
+      </if>
+
+      <!-- Section Items -->
+      <ul class=styles.nav>
+        <for|item| of=section.items>
+          <if=item.items && item.items.length>
+            <!-- Item with children (collapsible group) -->
+            <li class=styles.group>
+              <div
+                class=styles.groupHeader
+                onClick(e) {
+                  if (openGroups.has(item.text)) {
+                    openGroups.delete(item.text);
+                  } else {
+                    openGroups.add(item.text);
+                  }
+                }
+                role="button"
+                tabindex="0"
+                aria-expanded=openGroups.has(item.text)>
+                <span class=styles.groupTitle>${item.text}</span>
+                <let/rotatedClass=openGroups.has(item.text) ? styles.groupIcon + ' ' + styles.rotated : styles.groupIcon/>
+                <svg
+                  class=rotatedClass
+                  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="9 18 15 12 9 6"></polyline>
+                </svg>
+              </div>
+
+              <if=openGroups.has(item.text)>
+                <ul class=styles.groupItems>
+                  <for|subitem| of=item.items>
+                    <let/subitemClass=currentPath === subitem.link ? styles.link + ' ' + styles.active : styles.link/>
+                    <li class=styles.item>
+                      <a
+                        class=subitemClass
+                        href=subitem.link>
+                        <if=subitem.icon>
+                          <span class=styles.icon>${subitem.icon}</span>
+                        </if>
+                        <span class=styles.text>${subitem.text}</span>
+                      </a>
+                    </li>
+                  </for>
+                </ul>
+              </if>
+            </li>
+          </if>
+
+          <if=!item.items || item.items.length === 0>
+            <!-- Regular item (no children) -->
+            <let/itemClass=currentPath === item.link ? styles.link + ' ' + styles.active : styles.link/>
+            <li class=styles.item>
+              <a
+                class=itemClass
+                href=item.link>
+                <if=item.icon>
+                  <span class=styles.icon>${item.icon}</span>
+                </if>
+                <span class=styles.text>${item.text}</span>
+              </a>
+            </li>
+          </if>
+        </for>
+      </ul>
+    </div>
+  </for>
+</div>