veslx 0.1.14 → 0.1.15

package/src/hooks/use-mdx-content.ts

@@ -8,12 +8,69 @@ interface MDXModule {
     description?: string
     date?: string
     visibility?: string
+    draft?: boolean
   }
+  slideCount?: number // Exported by remark-slides plugin for SLIDES.mdx files
 }
 
 type ModuleLoader = () => Promise<MDXModule>
 type ModuleMap = Record<string, ModuleLoader>
 
+/**
+ * Find MDX module by path. Supports:
+ * - Full path: "docs/intro.mdx" -> matches exactly
+ * - Folder path: "docs" -> matches "docs/index.mdx", "docs/README.mdx", or "docs.mdx"
+ */
+function findMdxModule(modules: ModuleMap, path: string): ModuleLoader | null {
+  const keys = Object.keys(modules)
+
+  // Normalize path - remove leading slash if present
+  const normalizedPath = path.replace(/^\//, '')
+
+  // If path already ends with .mdx, match exactly
+  if (normalizedPath.endsWith('.mdx')) {
+    // Try multiple matching strategies for different Vite glob formats
+    const matchingKey = keys.find(key => {
+      // Strategy 1: Key ends with /path (e.g., @content/docs/foo.mdx matches docs/foo.mdx)
+      if (key.endsWith(`/${normalizedPath}`)) return true
+      // Strategy 2: Key equals @content/path (alias form)
+      if (key === `@content/${normalizedPath}`) return true
+      // Strategy 3: Key equals /@content/path (with leading slash)
+      if (key === `/@content/${normalizedPath}`) return true
+      // Strategy 4: Key equals path directly
+      if (key === normalizedPath) return true
+      // Strategy 5: Key equals /path (with leading slash)
+      if (key === `/${normalizedPath}`) return true
+      return false
+    })
+    return matchingKey ? modules[matchingKey] : null
+  }
+
+  // Otherwise, try folder conventions in order of preference:
+  // 1. folder/index.mdx (modern convention)
+  // 2. folder/README.mdx (current convention)
+  // 3. folder.mdx (file alongside folders)
+  const candidates = [
+    `${normalizedPath}/index.mdx`,
+    `${normalizedPath}/README.mdx`,
+    `${normalizedPath}.mdx`,
+  ]
+
+  for (const candidate of candidates) {
+    const matchingKey = keys.find(key => {
+      if (key.endsWith(`/${candidate}`)) return true
+      if (key === `@content/${candidate}`) return true
+      if (key === candidate) return true
+      return false
+    })
+    if (matchingKey) {
+      return modules[matchingKey]
+    }
+  }
+
+  return null
+}
+
 export function useMDXContent(path: string) {
   const [Content, setContent] = useState<MDXModule['default'] | null>(null)
   const [frontmatter, setFrontmatter] = useState<MDXModule['frontmatter']>(undefined)
@@ -28,10 +85,7 @@ export function useMDXContent(path: string) {
     // Dynamic import to avoid pre-bundling issues
     import('virtual:content-modules')
       .then(({ modules }) => {
-        const matchingKey = Object.keys(modules).find(key =>
-          key.endsWith(`/${path}/README.mdx`)
-        )
-        const loader = matchingKey ? (modules as ModuleMap)[matchingKey] : null
+        const loader = findMdxModule(modules as ModuleMap, path)
 
         if (!loader) {
           throw new Error(`MDX module not found for path: ${path}`)
@@ -61,9 +115,42 @@ export function useMDXContent(path: string) {
   return { Content, frontmatter, loading, error }
 }
 
+/**
+ * Find slides module by path. Supports:
+ * - Full path: "docs/intro.slides.mdx" or "docs/SLIDES.mdx" -> matches exactly
+ * - Folder path: "docs" -> matches "docs/SLIDES.mdx" or "docs/index.slides.mdx"
+ */
+function findSlidesModule(modules: ModuleMap, path: string): ModuleLoader | null {
+  const keys = Object.keys(modules)
+
+  // If path already ends with .mdx, match exactly
+  if (path.endsWith('.mdx')) {
+    const matchingKey = keys.find(key => key.endsWith(`/${path}`))
+    return matchingKey ? modules[matchingKey] : null
+  }
+
+  // Otherwise, try folder conventions:
+  // 1. folder/SLIDES.mdx (current convention)
+  // 2. folder/index.slides.mdx (alternative)
+  const candidates = [
+    `/${path}/SLIDES.mdx`,
+    `/${path}/index.slides.mdx`,
+  ]
+
+  for (const suffix of candidates) {
+    const matchingKey = keys.find(key => key.endsWith(suffix))
+    if (matchingKey) {
+      return modules[matchingKey]
+    }
+  }
+
+  return null
+}
+
 export function useMDXSlides(path: string) {
   const [Content, setContent] = useState<MDXModule['default'] | null>(null)
   const [frontmatter, setFrontmatter] = useState<MDXModule['frontmatter']>(undefined)
+  const [slideCount, setSlideCount] = useState<number | undefined>(undefined)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<Error | null>(null)
 
@@ -75,10 +162,7 @@ export function useMDXSlides(path: string) {
     // Dynamic import to avoid pre-bundling issues
     import('virtual:content-modules')
       .then(({ slides }) => {
-        const matchingKey = Object.keys(slides).find(key =>
-          key.endsWith(`/${path}/SLIDES.mdx`)
-        )
-        const loader = matchingKey ? (slides as ModuleMap)[matchingKey] : null
+        const loader = findSlidesModule(slides as ModuleMap, path)
 
         if (!loader) {
           throw new Error(`Slides module not found for path: ${path}`)
@@ -90,6 +174,7 @@ export function useMDXSlides(path: string) {
         if (!cancelled) {
           setContent(() => mod.default)
           setFrontmatter(mod.frontmatter)
+          setSlideCount(mod.slideCount)
           setLoading(false)
         }
       })
@@ -105,5 +190,5 @@ export function useMDXSlides(path: string) {
     }
   }, [path])
 
-  return { Content, frontmatter, loading, error }
+  return { Content, frontmatter, slideCount, loading, error }
 }

package/src/index.css

@@ -277,3 +277,162 @@
 .animate-slide-up {
   animation: slide-up 0.5s ease-out forwards;
 }
+
+/* Shimmer loading animation for skeletons */
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.animate-shimmer {
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+/* Print styles - slides landscape, posts portrait */
+@media print {
+  /* Default page is portrait for posts */
+  @page {
+    size: portrait;
+    margin: 1in;
+  }
+
+  /* Named page for slides - landscape */
+  @page slides {
+    size: landscape;
+    margin: 0;
+  }
+
+  /* Slides container uses the slides page */
+  .slides-container {
+    page: slides;
+  }
+
+  /* Reset everything */
+  html, body {
+    height: auto !important;
+    overflow: visible !important;
+    background: white !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  /* Hide ALL UI elements aggressively */
+  .slides-container > header,
+  .slides-container > .running-bar,
+  .slides-container hr,
+  .slides-container > title,
+  header.print\\:hidden,
+  [class*="print:hidden"] {
+    display: none !important;
+    height: 0 !important;
+    width: 0 !important;
+    overflow: hidden !important;
+    position: absolute !important;
+    left: -9999px !important;
+  }
+
+  /* Main container - no space, no pages */
+  .slides-container {
+    display: block !important;
+    position: static !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  /* All wrapper divs - collapse completely */
+  .slides-container > div:not(.slide-section),
+  .slides-container > div > div:not(.slide-section) {
+    display: contents !important;
+  }
+
+  /* Each slide is one page */
+  .slide-section {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    min-height: 100vh !important;
+    max-height: 100vh !important;
+    padding: 5vh 8vw !important;
+    margin: 0 !important;
+    page-break-after: always !important;
+    break-after: page !important;
+    page-break-inside: avoid !important;
+    break-inside: avoid !important;
+    box-sizing: border-box !important;
+    overflow: hidden !important;
+  }
+
+  /* Last slide shouldn't add extra page */
+  .slide-section:last-of-type {
+    page-break-after: auto !important;
+    break-after: auto !important;
+  }
+
+  /* Slide content fills available space */
+  .slide-content {
+    max-width: 90% !important;
+    max-height: 90vh !important;
+    width: auto !important;
+    margin: 0 auto !important;
+  }
+
+  /* Scale images appropriately for print */
+  .slide-content img {
+    max-height: 60vh !important;
+    width: auto !important;
+    height: auto !important;
+    object-fit: contain !important;
+  }
+
+  /* Gallery adjustments for print */
+  .slide-content figure {
+    margin: 0 !important;
+    padding: 1rem 0 !important;
+  }
+
+  /* Ensure text is black for print */
+  .slide-content,
+  .slide-content * {
+    color: black !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  /* Hide carousel navigation in print */
+  .slide-content button[class*="Carousel"] {
+    display: none !important;
+  }
+
+  /* === Post print styles === */
+
+  /* Hide carousel navigation buttons in posts */
+  figure button {
+    display: none !important;
+  }
+
+  /* Make carousel show all items in grid for print */
+  [data-slot="carousel-content"] {
+    display: grid !important;
+    grid-template-columns: repeat(3, 1fr) !important;
+    gap: 0.5rem !important;
+    transform: none !important;
+  }
+
+  [data-slot="carousel-item"] {
+    flex: none !important;
+    width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  /* Ensure gallery images print well */
+  figure img {
+    break-inside: avoid !important;
+  }
+}

package/src/main.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import 'katex/dist/katex.min.css'
 import './index.css'
 import App from '@/App'
 

package/src/pages/content-router.tsx

@@ -0,0 +1,27 @@
+import { useParams } from "react-router-dom"
+import { Home } from "./home"
+import { Post } from "./post"
+import { SlidesPage } from "./slides"
+
+/**
+ * Routes to the appropriate page based on the URL path:
+ * - *.slides.mdx or *SLIDES.mdx → SlidesPage
+ * - *.mdx → Post
+ * - everything else → Home (directory listing)
+ */
+export function ContentRouter() {
+  const { "*": path = "" } = useParams()
+
+  // Check if this is a slides file
+  if (path.endsWith('.slides.mdx') || path.endsWith('SLIDES.mdx')) {
+    return <SlidesPage />
+  }
+
+  // Check if this is any MDX file
+  if (path.endsWith('.mdx') || path.endsWith('.md')) {
+    return <Post />
+  }
+
+  // Otherwise show directory listing
+  return <Home />
+}

package/src/pages/home.tsx

@@ -5,10 +5,12 @@ import PostList from "@/components/post-list";
 import { ErrorDisplay } from "@/components/page-error";
 import { RunningBar } from "@/components/running-bar";
 import { Header } from "@/components/header";
+import siteConfig from "virtual:veslx-config";
 
 export function Home() {
   const { "*": path = "." } = useParams();
   const { directory, loading, error } = useDirectory(path)
+  const config = siteConfig;
 
   if (error) {
     return <ErrorDisplay error={error} path={path} />;
@@ -25,8 +27,20 @@ export function Home() {
       <RunningBar />
       <Header />
       <main className="flex-1 mx-auto w-full max-w-[var(--content-width)] px-[var(--page-padding)]">
-        <title>{`Pinglab ${path}`}</title>
-        <main className="flex flex-col gap-6 mb-32 mt-32">
+        <title>{(path === "." || path === "") ? config.name : `${config.name} - ${path}`}</title>
+        <main className="flex flex-col gap-8 mb-32 mt-32">
+          {(path === "." || path === "") && (
+            <div className="animate-fade-in">
+              <h1 className="text-2xl md:text-3xl font-semibold tracking-tight text-foreground">
+                {config.name}
+              </h1>
+              {config.description && (
+                <p className="mt-2 text-muted-foreground">
+                  {config.description}
+                </p>
+              )}
+            </div>
+          )}
           {directory && (
             <div className="animate-fade-in">
               <PostList directory={directory}/>

package/src/pages/post.tsx

@@ -2,18 +2,22 @@ import { useParams } from "react-router-dom";
 import { findSlides, isSimulationRunning, useDirectory } from "../../plugin/src/client";
 import Loading from "@/components/loading";
 import { FileEntry } from "plugin/src/lib";
-import { FrontMatter } from "@/components/front-matter";
 import { RunningBar } from "@/components/running-bar";
 import { Header } from "@/components/header";
 import { useMDXContent } from "@/hooks/use-mdx-content";
 import { mdxComponents } from "@/components/mdx-components";
 
-
 export function Post() {
-  const { "path": path = "." } = useParams();
-  const filePath = `${path}/README.mdx`
-  const { directory, loading: dirLoading } = useDirectory(filePath)
-  const { Content, frontmatter, loading: mdxLoading, error } = useMDXContent(path);
+  const { "*": rawPath = "." } = useParams();
+
+  // The path includes the .mdx extension from the route
+  const mdxPath = rawPath;
+
+  // Extract directory path for finding sibling files (slides, etc.)
+  const dirPath = mdxPath.replace(/\/[^/]+\.mdx$/, '') || '.';
+
+  const { directory, loading: dirLoading } = useDirectory(dirPath)
+  const { Content, frontmatter, loading: mdxLoading, error } = useMDXContent(mdxPath);
   const isRunning = isSimulationRunning();
 
   let slides: FileEntry | null = null;
@@ -39,7 +43,6 @@ export function Post() {
       <RunningBar />
       <Header />
       <main className="flex-1 mx-auto w-full max-w-[var(--content-width)] px-[var(--page-padding)]">
-
         {isRunning && (
           <div className="sticky top-0 z-50 px-[var(--page-padding)] py-2 bg-red-500 text-primary-foreground font-mono text-xs text-center tracking-wide">
             <span className="inline-flex items-center gap-3">
@@ -52,12 +55,6 @@ export function Post() {
 
         {Content && (
           <article className="my-24 prose dark:prose-invert prose-headings:tracking-tight prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline max-w-[var(--prose-width)] animate-fade-in">
-            <FrontMatter
-              title={frontmatter?.title}
-              date={frontmatter?.date}
-              description={frontmatter?.description}
-              slides={slides}
-            />
             <Content components={mdxComponents} />
           </article>
         )}

package/src/pages/slides.tsx

@@ -2,60 +2,100 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { FULLSCREEN_DATA_ATTR } from "@/lib/constants";
 import { useParams, useSearchParams } from "react-router-dom"
 import Loading from "@/components/loading";
-import { FrontMatter } from "@/components/front-matter";
 import { RunningBar } from "@/components/running-bar";
 import { Header } from "@/components/header";
 import { useMDXSlides } from "@/hooks/use-mdx-content";
-import { useSlidesFromMDX, SlideContent } from "@/components/slides-renderer";
+import { slidesMdxComponents } from "@/components/slides-renderer";
 
 
 export function SlidesPage() {
-  const { "path": path = "." } = useParams();
+  const { "*": rawPath = "." } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
 
-  // Load the compiled MDX module
-  const { Content, frontmatter, loading, error } = useMDXSlides(path);
+  // The path includes the .mdx extension from the route
+  const mdxPath = rawPath;
 
-  // Split the MDX content into slides by <hr> elements
-  const { slides } = useSlidesFromMDX({ Content, frontmatter });
+  // Load the compiled MDX module (now includes slideCount export)
+  const { Content, frontmatter, slideCount, loading, error } = useMDXSlides(mdxPath);
 
   // Total slides = 1 (title) + content slides
-  const totalSlides = slides.length + 1;
-
-  // Get initial slide from query param
-  const initialSlide = Math.max(0, Math.min(
-    parseInt(searchParams.get("slide") || "0", 10),
-    totalSlides - 1
-  ));
-
-  const [currentSlide, setCurrentSlide] = useState(initialSlide);
-  const slideRefs = useRef<(HTMLDivElement | null)[]>([]);
-
-  // Scroll to slide and update query param
-  const goToSlide = useCallback((index: number) => {
-    const clampedIndex = Math.max(0, Math.min(index, totalSlides - 1));
-    const target = slideRefs.current[clampedIndex];
-    if (target) {
-      const targetTop = target.getBoundingClientRect().top + window.scrollY;
-      window.scrollTo({ top: targetTop, behavior: "smooth" });
+  const totalSlides = (slideCount || 0) + 1;
+
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const titleSlideRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Scroll to slide on initial load if query param is set
+  useEffect(() => {
+    const slideParam = parseInt(searchParams.get("slide") || "0", 10);
+    if (slideParam > 0 && contentRef.current) {
+      const slideEl = contentRef.current.querySelector(`[data-slide-index="${slideParam - 1}"]`);
+      if (slideEl) {
+        slideEl.scrollIntoView({ behavior: "auto" });
+      }
+    }
+  }, [searchParams, Content]);
+
+  // Track current slide based on scroll position
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const index = entry.target.getAttribute("data-slide-index");
+            if (index !== null) {
+              const slideNum = index === "title" ? 0 : parseInt(index, 10) + 1;
+              setCurrentSlide(slideNum);
+              setSearchParams(slideNum > 0 ? { slide: String(slideNum) } : {}, { replace: true });
+            }
+          }
+        }
+      },
+      { threshold: 0.5 }
+    );
+
+    // Observe title slide
+    if (titleSlideRef.current) {
+      observer.observe(titleSlideRef.current);
     }
-  }, [totalSlides]);
 
+    // Observe content slides
+    if (contentRef.current) {
+      const slides = contentRef.current.querySelectorAll("[data-slide-index]");
+      slides.forEach((slide) => observer.observe(slide));
+    }
+
+    return () => observer.disconnect();
+  }, [Content, setSearchParams]);
+
+  // Keyboard/scroll navigation helpers
   const goToPrevious = useCallback(() => {
-    goToSlide(currentSlide - 1);
-  }, [currentSlide, goToSlide]);
+    const prev = Math.max(0, currentSlide - 1);
+    if (prev === 0 && titleSlideRef.current) {
+      titleSlideRef.current.scrollIntoView({ behavior: "smooth" });
+    } else if (contentRef.current) {
+      const slideEl = contentRef.current.querySelector(`[data-slide-index="${prev - 1}"]`);
+      slideEl?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [currentSlide]);
 
   const goToNext = useCallback(() => {
-    goToSlide(currentSlide + 1);
-  }, [currentSlide, goToSlide]);
+    const next = Math.min(totalSlides - 1, currentSlide + 1);
+    if (next === 0 && titleSlideRef.current) {
+      titleSlideRef.current.scrollIntoView({ behavior: "smooth" });
+    } else if (contentRef.current) {
+      const slideEl = contentRef.current.querySelector(`[data-slide-index="${next - 1}"]`);
+      slideEl?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [currentSlide, totalSlides]);
 
   // Keyboard navigation
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "ArrowUp" || e.key === "k") {
+      if (e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "k") {
         e.preventDefault();
         goToPrevious();
-      } else if (e.key === "ArrowDown" || e.key === "j") {
+      } else if (e.key === "ArrowDown" || e.key === "ArrowRight" || e.key === "j") {
         e.preventDefault();
         goToNext();
       }
@@ -65,37 +105,6 @@ export function SlidesPage() {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [goToPrevious, goToNext]);
 
-  // Update query param on scroll (delayed to avoid interference on load)
-  useEffect(() => {
-    let observer: IntersectionObserver | null = null;
-
-    const timeoutId = setTimeout(() => {
-      observer = new IntersectionObserver(
-        (entries) => {
-          for (const entry of entries) {
-            if (entry.isIntersecting) {
-              const index = slideRefs.current.findIndex((ref) => ref === entry.target);
-              if (index !== -1) {
-                setCurrentSlide(index);
-                setSearchParams(index > 0 ? { slide: String(index) } : {}, { replace: true });
-              }
-            }
-          }
-        },
-        { threshold: 0.5 }
-      );
-
-      slideRefs.current.forEach((ref) => {
-        if (ref) observer!.observe(ref);
-      });
-    }, 100);
-
-    return () => {
-      clearTimeout(timeoutId);
-      observer?.disconnect();
-    };
-  }, [slides.length, setSearchParams]);
-
   if (loading) {
     return <Loading />
   }
@@ -108,7 +117,7 @@ export function SlidesPage() {
     )
   }
 
-  if (slides.length === 0) {
+  if (!Content) {
     return (
       <div className="flex items-center justify-center p-12 text-muted-foreground font-mono text-sm">
         no slides found — use "---" to separate slides
@@ -129,31 +138,9 @@ export function SlidesPage() {
         }}
       />
       <div {...{[FULLSCREEN_DATA_ATTR]: "true"}}>
-        {/* Title slide */}
-        <div
-          ref={(el) => { slideRefs.current[0] = el; }}
-          className="slide-page max-w-xl min-h-[50vh] sm:min-h-[70vh] md:min-h-screen flex items-center justify-center py-8 sm:py-12 md:py-16 px-4 mx-auto"
-        >
-          <FrontMatter
-            title={frontmatter?.title}
-            date={frontmatter?.date}
-            description={frontmatter?.description}
-          />
+        <div ref={contentRef}>
+          <Content components={slidesMdxComponents} />
         </div>
-        <hr className="print:hidden" />
-
-        {/* Content slides */}
-        {slides.map((slideContent, index) => (
-          <div key={index}>
-            <div
-              ref={(el) => { slideRefs.current[index + 1] = el; }}
-              className="slide-page min-h-[50vh] sm:min-h-[70vh] md:min-h-screen flex items-center justify-center py-8 sm:py-12 md:py-16 px-4 mx-auto"
-            >
-              <SlideContent>{slideContent}</SlideContent>
-            </div>
-            {index < slides.length - 1 && <hr className="print:hidden" />}
-          </div>
-        ))}
       </div>
     </main>
   )

package/src/vite-env.d.ts

@@ -1,21 +1,11 @@
 /// <reference types="vite/client" />
 
-declare module 'virtual:content-modules' {
-  import type { ComponentType } from 'react'
-
-  interface MDXModule {
-    default: ComponentType<{ components?: Record<string, ComponentType> }>
-    frontmatter?: {
-      title?: string
-      description?: string
-      date?: string
-      visibility?: string
-    }
+declare module 'virtual:veslx-config' {
+  interface SiteConfig {
+    name: string;
+    description: string;
+    github: string;
   }
-
-  type ModuleLoader = () => Promise<MDXModule>
-
-  export const modules: Record<string, ModuleLoader>
-  export const slides: Record<string, ModuleLoader>
-  export const index: Record<string, { default: unknown }>
+  const config: SiteConfig;
+  export default config;
 }