markopress 0.0.2 → 0.0.4

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

@@ -1,49 +0,0 @@
-/*!
- * 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/components/theme/theme-aside-bottom.marko

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

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

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

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

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

package/src/theme/default/components/theme/theme-body-top.marko

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

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

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

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

@@ -1 +0,0 @@
-<!-- Extension point: theme doc footer after -->

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

@@ -1 +0,0 @@
-<!-- Extension point: theme doc footer before -->

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

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

package/src/theme/default/components/theme/theme-head-bottom.marko

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

package/src/theme/default/components/theme/theme-head-top.marko

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

package/src/theme/default/components/theme/theme-home-features-after.marko

@@ -1 +0,0 @@
-<!-- Extension point: theme home features after -->

package/src/theme/default/components/theme/theme-home-hero-after.marko

@@ -1 +0,0 @@
-<!-- Extension point: theme home hero after -->

package/src/theme/default/components/theme/theme-home-hero-before.marko

@@ -1 +0,0 @@
-<!-- Extension point: theme home hero before -->

package/src/theme/default/components/theme/theme-navbar-center.marko

@@ -1,5 +0,0 @@
-<nav class="navbar-nav">
-  <if=input.items>
-    <nav-bar items=input.items/>
-  </if>
-</nav>

package/src/theme/default/components/theme/theme-navbar-end.marko

@@ -1,30 +0,0 @@
-<div class="navbar-actions">
-  <!-- Search Component with Keyboard Shortcut -->
-  <search/>
-
-  <!-- Theme Toggle (Dark Mode) -->
-  <theme-toggle/>
-
-  <!-- Mobile Menu Toggle -->
-  <button class="btn-icon mobile-menu-toggle" aria-label="Toggle menu" onClick() {
-    if (input.setMobileMenuOpen) {
-      input.setMobileMenuOpen(!input.mobileMenuOpen);
-    }
-  }>
-    <if=input.mobileMenuOpen>
-      <!-- Close Icon -->
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <line x1=18 y1=6 x2=6 y2=18/>
-        <line x1=6 y1=6 x2=18 y2=18/>
-      </svg>
-    </if>
-    <else>
-      <!-- Menu Icon -->
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <line x1=3 y1=12 x2=21 y2=12/>
-        <line x1=3 y1=6 x2=21 y2=6/>
-        <line x1=3 y1=18 x2=21 y2=18/>
-      </svg>
-    </else>
-  </button>
-</div>

package/src/theme/default/components/theme/theme-navbar-start.marko

@@ -1 +0,0 @@
-<!-- Extension point: theme navbar start -->

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

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

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

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

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

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

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

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

package/src/theme/default/components/theme/theme-toc-item.marko

@@ -1 +0,0 @@
-<!-- Extension point: theme toc item -->

package/src/theme/default/components/theme-toggle.marko

@@ -1,122 +0,0 @@
-/*!
- * Theme Toggle Component
- * Dark mode toggle with sun/moon icons and localStorage persistence
- */
-
-<let/isDark=false/>
-
-<style/styles>
-  .toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: var(--text-2);
-    cursor: pointer;
-    border-radius: var(--radius-md, 8px);
-    transition: background-color var(--transition-fast), color var(--transition-fast);
-  }
-
-  .toggle:hover {
-    background: var(--bg-soft);
-    color: var(--text-1);
-  }
-
-  .toggle:focus-visible {
-    outline: 2px solid var(--color-primary-2, #3a5ccc);
-    outline-offset: 2px;
-  }
-
-  .icon {
-    transition: opacity var(--transition-fast), transform var(--transition-fast);
-  }
-
-  .icon.moon {
-    animation: moon-rise 0.3s ease-out;
-  }
-
-  .icon.sun {
-    animation: sun-rise 0.3s ease-out;
-  }
-
-  @keyframes moon-rise {
-    from {
-      opacity: 0;
-      transform: rotate(-90deg) scale(0.5);
-    }
-    to {
-      opacity: 1;
-      transform: rotate(0) scale(1);
-    }
-  }
-
-  @keyframes sun-rise {
-    from {
-      opacity: 0;
-      transform: rotate(90deg) scale(0.5);
-    }
-    to {
-      opacity: 1;
-      transform: rotate(0) scale(1);
-    }
-  }
-</style>
-
-<button
-  class=styles.toggle
-  aria-label="Toggle dark mode"
-  onClick(e) {
-    isDark = !isDark;
-    if (typeof document !== 'undefined') {
-      const html = document.documentElement;
-      if (isDark) {
-        html.classList.add('dark');
-      } else {
-        html.classList.remove('dark');
-      }
-      localStorage.setItem('theme', isDark ? 'dark' : 'light');
-    }
-  }>
-  <if=isDark>
-    <svg
-      class=styles.icon.sun
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round">
-      <circle cx="12" cy="12" r="5"></circle>
-      <line x1="12" y1="1" x2="12" y2="3"></line>
-      <line x1="12" y1="21" x2="12" y2="23"></line>
-      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-      <line x1="1" y1="12" x2="3" y2="12"></line>
-      <line x1="21" y1="12" x2="23" y2="12"></line>
-      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-    </svg>
-  </if>
-  <else>
-    <svg
-      class=styles.icon.moon
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round">
-      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-    </svg>
-  </else>
-</button>

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

@@ -1,140 +0,0 @@
-<let/hasHeaders=(input.headers && input.headers.length > 0)/>
-
-<if=hasHeaders>
-  <nav class="toc">
-    <div class="toc-header">On This Page</div>
-    <ul class="toc-list">
-      <for|header| of=input.headers>
-        <li class="toc-item">
-          <a href="#" + header.slug class="toc-link toc-link--level-2">
-            <span class="toc-text">${header.title}</span>
-          </a>
-
-          <if=(header.children && header.children.length > 0)>
-            <ul class="toc-list toc-list--nested">
-              <for|child| of=header.children>
-                <li class="toc-item">
-                  <a href="#" + child.slug class="toc-link toc-link--level-3">
-                    <span class="toc-text">${child.title}</span>
-                  </a>
-                </li>
-              </for>
-            </ul>
-          </if>
-        </li>
-      </for>
-    </ul>
-  </nav>
-</if>
-
-<style>
-  .toc {
-    position: sticky;
-    top: var(--navbar-height, 60px);
-    width: var(--toc-width, 220px);
-    flex-shrink: 0;
-    align-self: flex-start;
-    max-height: calc(100vh - 80px);
-    overflow-y: auto;
-    padding-left: var(--space-md, 1rem);
-    border-left: 1px solid var(--border-color, #e5e7eb);
-  }
-
-  .toc-header {
-    font-size: var(--text-xs, 0.75rem);
-    font-weight: var(--font-semibold, 600);
-    color: var(--text-tertiary, #6b7280);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-bottom: var(--space-sm, 0.75rem);
-    padding-left: var(--space-xs, 0.5rem);
-  }
-
-  .toc-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  .toc-list--nested {
-    gap: 1px;
-    margin-top: 2px;
-    padding-left: 0;
-  }
-
-  .toc-item {
-    list-style: none;
-  }
-
-  .toc-link {
-    display: flex;
-    align-items: center;
-    padding: 6px var(--space-sm, 0.75rem);
-    font-size: var(--text-sm, 0.875rem);
-    color: var(--text-secondary, #64748b);
-    text-decoration: none;
-    border-radius: 4px;
-    transition: all 0.15s ease;
-    line-height: 1.5;
-  }
-
-  .toc-link:hover {
-    color: var(--text-primary, #334155);
-    background-color: var(--c-gray-100, #f1f5f9);
-  }
-
-  .toc-link.toc-link--level-3 {
-    font-size: var(--text-xs, 0.75rem);
-    padding: 4px var(--space-sm, 0.75rem) 4px 24px;
-    color: var(--text-tertiary, #94a3b8);
-  }
-
-  .toc-link.toc-link--level-3:hover {
-    color: var(--text-secondary, #475569);
-    background-color: var(--c-gray-50, #f8fafc);
-  }
-
-  .toc-link.active {
-    color: var(--c-brand, #3b82f6);
-    background-color: var(--accent-bg, rgba(59, 130, 246, 0.1));
-    font-weight: var(--font-medium, 500);
-  }
-
-  .toc-link.toc-link--level-3.active {
-    color: var(--c-brand, #3b82f6);
-    background-color: var(--accent-bg, rgba(59, 130, 246, 0.1));
-  }
-
-  /* Scrollbar styling for TOC */
-  .toc::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  .toc::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  .toc::-webkit-scrollbar-thumb {
-    background: var(--c-gray-300, #d1d5db);
-    border-radius: 2px;
-  }
-
-  .toc::-webkit-scrollbar-thumb:hover {
-    background: var(--c-gray-400, #9ca3af);
-  }
-
-  @media (max-width: 1280px) {
-    .toc {
-      width: 180px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    .toc {
-      display: none;
-    }
-  }
-</style>