markopress 0.0.1

package/src/theme/default/tags/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/tags/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>

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

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

package/src/theme/default/tags/skip-link.marko

@@ -0,0 +1,49 @@
+/*!
+ * Skip Link Component
+ * Accessibility skip link that allows keyboard users to jump to main content
+ * Hidden until focused
+ */
+
+<a
+  href="#main-content"
+  class="skip-link"
+  aria-label="Skip to main content">
+  Skip to main content
+</a>
+
+<style>
+  .skip-link {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    padding: var(--space-sm) var(--space-md);
+    background: var(--color-primary-2, #3a5ccc);
+    color: var(--bg-default, #ffffff);
+    text-decoration: none;
+    font-weight: var(--font-weight-medium);
+    z-index: 9999;
+    transition: top var(--transition-fast);
+    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
+  }
+
+  .skip-link:focus {
+    top: 0;
+    outline: 2px solid var(--color-primary-1, #3451b2);
+    outline-offset: -2px;
+  }
+
+  /* Ensure high contrast for accessibility */
+  @media (prefers-contrast: high) {
+    .skip-link {
+      background: var(--color-primary-1, #3451b2);
+      border: 2px solid var(--text-1, #111827);
+    }
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    .skip-link {
+      transition: none;
+    }
+  }
+</style>

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

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

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

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

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

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