@stacksjs/bunpress 0.1.0 → 0.1.1

package/dist/templates/page-toc.stx

@@ -0,0 +1,267 @@
+<aside class="VPDocAside">
+  <div class="VPDocAsideOutline">
+    <p class="outline-title">On this page</p>
+    <nav class="page-toc">
+      <div class="outline-marker"></div>
+      {{ items }}
+    </nav>
+  </div>
+</aside>
+
+<style>
+.VPDocAside {
+  position: fixed;
+  top: var(--bp-nav-height, 64px);
+  bottom: 0;
+  width: 224px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 32px 16px 32px 16px;
+  display: none;
+  right: max(32px, calc((100vw - var(--bp-layout-max-width, 1440px)) / 2 + 32px));
+  background-color: var(--bp-c-bg);
+  scrollbar-width: none;
+}
+
+.VPDocAside::-webkit-scrollbar {
+  display: none;
+}
+
+.VPDocAsideOutline {
+  font-size: 14px;
+}
+
+.outline-title {
+  font-weight: 600;
+  color: var(--bp-c-text-1);
+  margin-bottom: 16px;
+  font-size: 13px;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+}
+
+/* Show aside on xl screens and adjust main content */
+@media (min-width: 1280px) {
+  .VPDocAside {
+    display: block !important;
+  }
+
+  .VPContent {
+    right: max(256px, calc((100vw - var(--bp-layout-max-width, 1440px)) / 2 + 256px)) !important;
+  }
+}
+
+.page-toc {
+  position: relative;
+}
+
+/* Animated marker indicator like VitePress */
+.outline-marker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  opacity: 0;
+  width: 2px;
+  border-radius: 2px;
+  height: 18px;
+  background-color: var(--bp-c-brand-1);
+  transition:
+    top 0.25s cubic-bezier(0, 1, 0.5, 1),
+    opacity 0.25s,
+    background-color 0.5s;
+}
+
+.page-toc a {
+  position: relative;
+  display: block;
+  padding: 4px 0 4px 16px;
+  color: var(--bp-c-text-2);
+  text-decoration: none;
+  border-left: 1px solid var(--bp-c-divider);
+  transition: color 0.25s;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.page-toc a:hover {
+  color: var(--bp-c-text-1);
+}
+
+.page-toc a.active {
+  color: var(--bp-c-text-1);
+  font-weight: 500;
+  border-left-color: transparent;
+}
+
+.page-toc a.level-3 {
+  padding-left: 28px;
+}
+
+.page-toc a.level-4 {
+  padding-left: 40px;
+}
+
+.page-toc a.level-5 {
+  padding-left: 52px;
+}
+
+.page-toc a.level-6 {
+  padding-left: 64px;
+}
+</style>
+
+<script>
+// VitePress-style scrollspy with animated marker
+function initPageTOC() {
+  const tocContainer = document.querySelector('.page-toc');
+  const marker = document.querySelector('.outline-marker');
+  const tocLinks = document.querySelectorAll('.page-toc a');
+  const headings = Array.from(document.querySelectorAll('h2[id], h3[id], h4[id], h5[id], h6[id]'));
+  const scrollContainer = document.querySelector('.VPContent');
+
+  if (!tocLinks.length || !headings.length || !scrollContainer || !marker) return;
+
+  // Get scroll offset (nav height)
+  function getScrollOffset() {
+    return 100; // Account for nav + some padding
+  }
+
+  // Throttle and debounce utility
+  function throttleAndDebounce(fn, delay) {
+    let timeoutId;
+    let called = false;
+
+    return function() {
+      if (timeoutId) clearTimeout(timeoutId);
+      if (!called) {
+        fn();
+        called = true;
+        setTimeout(() => { called = false; }, delay);
+      } else {
+        timeoutId = setTimeout(fn, delay);
+      }
+    };
+  }
+
+  // Activate a TOC link by hash
+  function activateLink(hash) {
+    // Remove previous active class
+    tocLinks.forEach(link => link.classList.remove('active'));
+
+    if (hash) {
+      // Find and activate new link
+      const activeLink = tocContainer.querySelector('a[href="' + decodeURIComponent(hash) + '"]');
+
+      if (activeLink) {
+        activeLink.classList.add('active');
+
+        // Position the marker at the active link
+        const linkRect = activeLink.getBoundingClientRect();
+        const containerRect = tocContainer.getBoundingClientRect();
+        const top = linkRect.top - containerRect.top;
+
+        marker.style.top = top + 'px';
+        marker.style.opacity = '1';
+      } else {
+        marker.style.opacity = '0';
+      }
+    } else {
+      marker.style.opacity = '0';
+    }
+  }
+
+  // Set active link based on scroll position
+  function setActiveLink() {
+    const scrollY = scrollContainer.scrollTop;
+    const scrollOffset = getScrollOffset();
+
+    // Get heading positions relative to scroll container
+    const headingPositions = headings.map(heading => {
+      // Get the element's position relative to the scroll container
+      const rect = heading.getBoundingClientRect();
+      const containerRect = scrollContainer.getBoundingClientRect();
+      const top = rect.top - containerRect.top + scrollY;
+
+      return {
+        id: heading.id,
+        top: top
+      };
+    }).filter(h => !isNaN(h.top)).sort((a, b) => a.top - b.top);
+
+    // Find the last heading that's above the current scroll position
+    let activeId = null;
+    for (const { id, top } of headingPositions) {
+      if (top > scrollY + scrollOffset + 4) {
+        break;
+      }
+      activeId = id;
+    }
+
+    // If no heading found and we're at the top, use the first one
+    if (!activeId && headingPositions.length > 0 && scrollY < headingPositions[0].top) {
+      activeId = headingPositions[0].id;
+    }
+
+    // Activate the link
+    activateLink(activeId ? '#' + activeId : null);
+  }
+
+  // Throttled scroll handler
+  const onScroll = throttleAndDebounce(setActiveLink, 100);
+
+  // Smooth scroll to anchor
+  tocLinks.forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      const targetId = link.getAttribute('href').substring(1);
+      const targetElement = document.getElementById(targetId);
+      if (targetElement) {
+        // Calculate target position
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const targetRect = targetElement.getBoundingClientRect();
+        const scrollTo = targetRect.top - containerRect.top + scrollContainer.scrollTop - 80;
+
+        scrollContainer.scrollTo({
+          top: scrollTo,
+          behavior: 'smooth'
+        });
+
+        // Update URL without page reload
+        history.pushState(null, '', '#' + targetId);
+      }
+    });
+  });
+
+  // Listen to scroll events on the actual scrolling container
+  scrollContainer.addEventListener('scroll', onScroll);
+
+  // Handle URL hash on page load
+  if (window.location.hash) {
+    setTimeout(() => {
+      const targetId = window.location.hash.substring(1);
+      const targetElement = document.getElementById(targetId);
+      if (targetElement) {
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const targetRect = targetElement.getBoundingClientRect();
+        const scrollTo = targetRect.top - containerRect.top + scrollContainer.scrollTop - 80;
+
+        scrollContainer.scrollTo({
+          top: scrollTo,
+          behavior: 'smooth'
+        });
+      }
+    }, 100);
+  }
+
+  // Initial update
+  requestAnimationFrame(setActiveLink);
+}
+
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initPageTOC);
+} else {
+  initPageTOC();
+}
+</script>

package/dist/templates/sidebar-section.stx

@@ -0,0 +1,42 @@
+<div class="VPSidebarItem sidebar-section" style="margin-bottom: 16px;">
+  <button
+    style="width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 8px 24px; font-size: 14px; font-weight: 600; color: var(--bp-c-text-1); background: transparent; border: none; cursor: pointer; transition: color 0.25s;"
+    onclick="toggleSection(this.parentElement)"
+    onmouseover="this.style.color='var(--bp-c-brand-1)'"
+    onmouseout="this.style.color='var(--bp-c-text-1)'"
+  >
+    <span>{{ title }}</span>
+    <svg class="chevron" style="width: 16px; height: 16px; transition: transform 0.2s ease-in-out;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+    </svg>
+  </button>
+  <div class="sidebar-items-wrapper">
+    <ul class="sidebar-items" style="list-style: none; margin: 4px 0 0 0; padding: 0;">
+      {{ items }}
+    </ul>
+  </div>
+</div>
+
+<style>
+.sidebar-items-wrapper {
+  overflow: hidden;
+  transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
+  max-height: 500px;
+  opacity: 1;
+}
+
+.sidebar-section.collapsed .sidebar-items-wrapper {
+  max-height: 0;
+  opacity: 0;
+}
+
+.sidebar-section.collapsed .chevron {
+  transform: rotate(-90deg);
+}
+</style>
+
+<script>
+function toggleSection(section) {
+  section.classList.toggle('collapsed');
+}
+</script>

package/dist/templates/sidebar.stx

@@ -0,0 +1,54 @@
+<nav class="VPSidebar">
+  <div class="sidebar-content">
+    {{ sections }}
+  </div>
+</nav>
+
+<style>
+.VPSidebar {
+  position: fixed;
+  top: var(--bp-nav-height, 64px);
+  bottom: 0;
+  left: 0;
+  width: var(--bp-sidebar-width, 272px);
+  background-color: var(--bp-sidebar-bg-color, var(--bp-c-bg-alt));
+  border-right: 1px solid var(--bp-c-divider);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 24px 0 24px 0;
+  z-index: var(--bp-z-index-sidebar, 25);
+}
+
+.sidebar-content {
+  width: var(--bp-sidebar-width, 272px);
+  margin-left: auto;
+}
+
+/* At 960px+ (tablet), position sidebar normally */
+@media (min-width: 960px) {
+  .VPSidebar {
+    left: 0;
+    width: var(--bp-sidebar-width, 272px);
+  }
+
+  .sidebar-content {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+
+/* At 1440px+ (ultra-wide), extend sidebar to fill left margin */
+@media (min-width: 1440px) {
+  .VPSidebar {
+    /* Extend width to include left margin area */
+    width: calc((100vw - var(--bp-layout-max-width, 1440px)) / 2 + var(--bp-sidebar-width, 272px));
+    /* Padding pushes content to the right position */
+    padding-left: calc((100vw - var(--bp-layout-max-width, 1440px)) / 2);
+  }
+
+  .sidebar-content {
+    width: var(--bp-sidebar-width, 272px);
+    margin-left: 0;
+  }
+}
+</style>

package/dist/themes/bun/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Get all Bun theme CSS combined
+ */
+export declare function getBunThemeCSS(): string;
+/**
+ * Get Bun theme CSS variables only
+ */
+export declare function getBunVars(): string;
+/**
+ * Get Bun base styles only
+ */
+export declare function getBunBase(): string;
+/**
+ * Get Bun custom block styles only
+ */
+export declare function getBunCustomBlocks(): string;
+/**
+ * Get Bun code group styles only
+ */
+export declare function getBunCodeGroups(): string;
+/**
+ * Get Bun extra styles only
+ */
+export declare function getBunExtras(): string;
+export declare interface BunTheme {
+  name: string
+  getCSS: () => string
+  getVars: () => string
+  getBase: () => string
+  getCustomBlocks: () => string
+  getCodeGroups: () => string
+  getExtras: () => string
+}
+export default bunTheme;

package/dist/themes/index.d.ts

@@ -0,0 +1,24 @@
+import bunTheme, { getBunThemeCSS } from './bun';
+import vitePressTheme, { getVitePressThemeCSS } from './vitepress';
+/**
+ * Get theme CSS by name
+ */
+export declare function getThemeCSS(themeName?: ThemeName): string;
+/**
+ * Available themes
+ */
+export declare const themes: {
+  vitepress: unknown;
+  bun: unknown
+};
+/**
+ * Default theme name
+ */
+export declare const defaultTheme: ThemeName;
+export declare interface Theme {
+  name: string
+  getCSS: () => string
+}
+export type ThemeName = 'vitepress' | 'bun'
+export { getVitePressThemeCSS, vitePressTheme, getBunThemeCSS, bunTheme };
+export default themes;