@docmd/ui 0.6.6 → 0.6.7

package/assets/css/docmd-main.css

@@ -2626,4 +2626,174 @@ ul.contains-task-list > li::marker {
 
 .task-list-item-checkbox {
     margin-top: .25em;
-}
+}
+/**
+ * Hero Container (2.0)
+ * Handles basic, split, and slider layouts.
+ */
+.docmd-hero {
+    position: relative;
+    width: 100%;
+    margin: var(--space-12) 0;
+    padding: var(--space-12) 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.docmd-hero.hero-glow::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80%;
+    height: 80%;
+    background: radial-gradient(circle, var(--link-color) 0%, transparent 70%);
+    opacity: 0.08;
+    filter: blur(100px);
+    z-index: -1;
+    pointer-events: none;
+}
+
+/* Default / Banner Layout */
+.docmd-hero.hero-banner {
+    text-align: center;
+    align-items: center;
+}
+
+.docmd-hero.hero-banner .hero-content {
+    max-width: 800px;
+}
+
+/* Split Layout */
+.docmd-hero.hero-split {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-12);
+    text-align: left;
+}
+
+.docmd-hero.hero-split .hero-content {
+    flex: 1 1 0;
+    min-width: 0;
+}
+
+.docmd-hero.hero-split .hero-side {
+    flex: 1 1 0;
+    min-width: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Slider Layout */
+.docmd-hero.hero-slider {
+    overflow: hidden;
+    position: relative;
+}
+
+.hero-slider-track {
+    display: flex;
+    scroll-snap-type: x mandatory;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    scroll-behavior: smooth;
+}
+
+.hero-slider-track::-webkit-scrollbar {
+    display: none;
+}
+
+.hero-slide {
+    flex: 0 0 100%;
+    scroll-snap-align: start;
+    padding: var(--space-8) var(--space-4);
+    box-sizing: border-box;
+    text-align: center;
+}
+
+.hero-slider-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--space-3);
+    margin-top: var(--space-6);
+}
+
+.hero-slider-btn {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    color: var(--text-primary);
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s, border-color 0.2s;
+    flex-shrink: 0;
+}
+
+.hero-slider-btn:hover {
+    background: var(--link-color);
+    border-color: var(--link-color);
+    color: #fff;
+}
+
+.hero-slider-dots {
+    display: flex;
+    gap: var(--space-2);
+    align-items: center;
+}
+
+.hero-slider-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--border-color);
+    cursor: pointer;
+    transition: background 0.2s, transform 0.2s;
+    border: none;
+    padding: 0;
+}
+
+.hero-slider-dot.active {
+    background: var(--link-color);
+    transform: scale(1.3);
+}
+
+/* Typography & Elements */
+.hero-content h1 {
+    font-size: clamp(2.5rem, 8vw, 4.5rem);
+    font-weight: 900;
+    line-height: .95;
+    letter-spacing: -0.05em;
+    margin-bottom: var(--space-4);
+}
+
+.hero-content p {
+    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
+    color: var(--text-muted);
+    line-height: 1.4;
+    margin-bottom: var(--space-6);
+}
+
+.hero-side img, .hero-side video, .hero-side .docmd-embed {
+    width: 100%;
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
+}
+
+@media (max-width: 960px) {
+    .docmd-hero.hero-split {
+        flex-direction: column;
+        text-align: center;
+        gap: var(--space-8);
+    }
+    .hero-content h1 {
+        font-size: 3rem;
+    }
+}

package/assets/js/docmd-main.js

@@ -132,6 +132,32 @@
         });
       }
     }
+    // Hero Slider
+    const sliderBtn = e.target.closest('.hero-slider-btn, .hero-slider-dot');
+    if (sliderBtn) {
+      const hero = sliderBtn.closest('.docmd-hero.hero-slider');
+      if (!hero) return;
+      const track = hero.querySelector('.hero-slider-track');
+      const slides = hero.querySelectorAll('.hero-slide');
+      const dots = hero.querySelectorAll('.hero-slider-dot');
+      if (!track || !slides.length) return;
+
+      const slideWidth = slides[0].offsetWidth;
+      const currentIndex = Math.round(track.scrollLeft / slideWidth);
+      let targetIndex = currentIndex;
+
+      if (sliderBtn.classList.contains('hero-slider-prev')) {
+        targetIndex = (currentIndex - 1 + slides.length) % slides.length;
+      } else if (sliderBtn.classList.contains('hero-slider-next')) {
+        targetIndex = (currentIndex + 1) % slides.length;
+      } else if (sliderBtn.classList.contains('hero-slider-dot')) {
+        targetIndex = parseInt(sliderBtn.dataset.slide, 10);
+      }
+
+      track.scrollTo({ left: targetIndex * slideWidth, behavior: 'smooth' });
+      dots.forEach((d, i) => d.classList.toggle('active', i === targetIndex));
+    }
+
   });
 
   // 2. COMPONENT INITIALIZERS
@@ -154,6 +180,22 @@
     });
   }
 
+  function initializeHeroSliders() {
+    document.querySelectorAll('.docmd-hero.hero-slider').forEach(hero => {
+      const track = hero.querySelector('.hero-slider-track');
+      const dots = hero.querySelectorAll('.hero-slider-dot');
+      if (!track || !dots.length) return;
+
+      // Sync dots on scroll (handles touch/swipe)
+      track.addEventListener('scroll', () => {
+        const slides = hero.querySelectorAll('.hero-slide');
+        if (!slides.length) return;
+        const idx = Math.round(track.scrollLeft / slides[0].offsetWidth);
+        dots.forEach((d, i) => d.classList.toggle('active', i === idx));
+      }, { passive: true });
+    });
+  }
+
   let scrollObserver = null;
   function initializeScrollSpy() {
     if (scrollObserver) scrollObserver.disconnect();
@@ -342,6 +384,7 @@
 
         injectCopyButtons();
         initializeScrollSpy();
+        initializeHeroSliders();
         const newMainContent = document.querySelector('.main-content');
         if (newMainContent) executeScripts(newMainContent);
 
@@ -384,6 +427,7 @@
 
     injectCopyButtons();
     initializeScrollSpy();
+    initializeHeroSliders();
     initializeSPA();
 
     setTimeout(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docmd/ui",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "description": "Base UI templates and assets for docmd.",
   "type": "module",
   "main": "dist/index.js",

package/templates/no-style.ejs

@@ -92,7 +92,11 @@
 </head>
 <body<% if (frontmatter.components?.theme !==false) { %> data-theme="<%= defaultMode %>"<% } %>
   <% if (frontmatter.bodyClass) { %> class="<%= frontmatter.bodyClass %>"<% } %> data-copy-code-enabled="<%=
-    config.copyCode===true %>">
+    config.copyCode===true %>" data-spa-enabled="<%= frontmatter.components?.spa === true %>">
+  <% if (frontmatter.components?.menubar === true && (locals.menubarConfig && menubarConfig?.enabled !== false)) { %>
+    <%- await include('partials/menubar', { menubarConfig, relativePathToRoot, renderIcon, optionsMenu: locals.optionsMenu }) %>
+  <% } %>
+
     <% if (frontmatter.components?.layout===true || frontmatter.components?.layout==='full' ) { %>
       <div class="main-content-wrapper">
         <% if (frontmatter.components?.header !==false) { %>