markopress 0.0.2 → 0.0.4

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

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

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

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

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

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

@@ -1,211 +0,0 @@
-/*!
- * Footer Component
- * Site footer with navigation, copyright, and social links
- */
-
-<footer class="site-footer">
-  <div class="footer-container">
-    <!-- Main Footer Content -->
-    <div class="footer-main">
-      <!-- Logo/Brand -->
-      <if=input.logo || input.siteName>
-        <div class="footer-brand">
-          <if=input.logo>
-            <img src=input.logo alt="Logo" class="footer-logo">
-          </if>
-          <if=input.siteName>
-            <div class="footer-site-name">${input.siteName}</div>
-          </if>
-          <if=input.tagline>
-            <p class="footer-tagline">${input.tagline}</p>
-          </if>
-        </div>
-      </if>
-
-      <!-- Footer Links Columns -->
-      <div class="footer-columns">
-        <for|column| of=(input.columns || [])>
-          <div class="footer-column">
-            <h3 class="footer-column-title">${column.title}</h3>
-            <ul class="footer-column-links">
-              <for|link| of=column.links>
-                <li>
-                  <a href=link.url class="footer-link">
-                    ${link.text}
-                  </a>
-                </li>
-              </for>
-            </ul>
-          </div>
-        </for>
-      </div>
-    </div>
-
-    <!-- Footer Bottom -->
-    <div class="footer-bottom">
-      <!-- Copyright -->
-      <div class="footer-copyright">
-        <p>© ${new Date().getFullYear()} ${input.siteName || 'MarkoPress'}. All rights reserved.</p>
-        <if=input.license>
-          <p class="footer-license">${input.license}</p>
-        </if>
-      </div>
-
-      <!-- Social Links -->
-      <if=input.social>
-        <div class="footer-social">
-          <for|social| of=input.social>
-            <a
-              href=social.url
-              class="footer-social-link"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label=social.label>
-              <span>${social.icon || social.label}</span>
-            </a>
-          </for>
-        </div>
-      </if>
-    </div>
-  </div>
-</footer>
-
-<style>
-  .site-footer {
-    background: var(--bg-secondary);
-    border-top: 1px solid var(--border-color);
-  }
-
-  .footer-container {
-    max-width: var(--container-max-width);
-    margin: 0 auto;
-    padding: var(--space-3xl) var(--space-lg) var(--space-lg);
-  }
-
-  /* Main Footer Content */
-  .footer-main {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--space-2xl);
-    margin-bottom: var(--space-2xl);
-  }
-
-  @media (min-width: 768px) {
-    .footer-main {
-      grid-template-columns: 2fr 3fr;
-    }
-  }
-
-  /* Brand Section */
-  .footer-brand {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-md);
-  }
-
-  .footer-logo {
-    width: 40px;
-    height: 40px;
-  }
-
-  .footer-site-name {
-    font-size: var(--text-xl);
-    font-weight: var(--font-semibold);
-    color: var(--text-primary);
-  }
-
-  .footer-tagline {
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-    line-height: var(--leading-relaxed);
-  }
-
-  /* Footer Columns */
-  .footer-columns {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: var(--space-lg);
-  }
-
-  .footer-column-title {
-    font-size: var(--text-sm);
-    font-weight: var(--font-semibold);
-    color: var(--text-primary);
-    margin-bottom: var(--space-md);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .footer-column-links {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-sm);
-  }
-
-  .footer-link {
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-    text-decoration: none;
-    transition: color var(--transition-fast);
-  }
-
-  .footer-link:hover {
-    color: var(--accent-primary);
-  }
-
-  /* Footer Bottom */
-  .footer-bottom {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-md);
-    padding-top: var(--space-lg);
-    border-top: 1px solid var(--border-color);
-  }
-
-  @media (min-width: 768px) {
-    .footer-bottom {
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-    }
-  }
-
-  .footer-copyright {
-    font-size: var(--text-sm);
-    color: var(--text-tertiary);
-  }
-
-  .footer-copyright p {
-    margin: 0;
-  }
-
-  .footer-license {
-    margin-top: var(--space-xs);
-  }
-
-  /* Social Links */
-  .footer-social {
-    display: flex;
-    gap: var(--space-md);
-  }
-
-  .footer-social-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    color: var(--text-secondary);
-    background: var(--bg-tertiary);
-    border-radius: var(--radius-md);
-    transition: all var(--transition-fast);
-  }
-
-  .footer-social-link:hover {
-    color: var(--accent-primary);
-    background: var(--accent-bg);
-  }
-</style>