veslx 0.1.5 → 0.1.15

package/src/components/slide.tsx

@@ -1,11 +1,28 @@
+import { ReactNode } from 'react'
 
+interface SlideProps {
+  index: number
+  children: ReactNode
+}
 
-export function Slide({ children }: { children: React.ReactNode }) {
+/**
+ * Slide component - wraps slide content for stacked scrollable display.
+ * Each slide takes full viewport height.
+ */
+export function Slide({ index, children }: SlideProps) {
   return (
-    <div className="w-screen h-screen bg-red-500 flex items-center justify-center p-8">
-      <div className="max-w-5xl w-full h-full">
-        {children}
+    <>
+      {index > 0 && (
+        <hr className="border-t border-border w-full" />
+      )}
+      <div
+        className="slide-section min-h-screen flex items-center justify-center py-8 sm:py-12 md:py-16 px-4"
+        data-slide-index={index}
+      >
+        <div className="slide-content prose dark:prose-invert prose-headings:tracking-tight prose-p:leading-relaxed max-w-[var(--content-width)] w-full">
+          {children}
+        </div>
       </div>
-    </div>
+    </>
   )
 }

package/src/components/slides-renderer.tsx

@@ -1,127 +1,19 @@
-import React, { Children, isValidElement, ReactNode, useMemo } from 'react'
+import { ReactNode } from 'react'
 import { mdxComponents } from '@/components/mdx-components'
-
-interface SlidesRendererProps {
-  Content: React.ComponentType<{ components?: Record<string, React.ComponentType> }> | null
-  frontmatter?: {
-    title?: string
-    description?: string
-    date?: string
-  }
-}
-
-/**
- * Splits MDX content into slides by <hr> elements.
- * The MDX is compiled at build time, so imports work.
- * Slide boundaries are marked with --- in MDX (which becomes <hr>).
- */
-export function useSlidesFromMDX({ Content, frontmatter }: SlidesRendererProps) {
-  const slides = useMemo(() => {
-    // Handle null Content (loading state)
-    if (!Content) {
-      return []
-    }
-
-    // Create a custom hr component that we can detect
-    const SlideBreak = () => <hr data-slide-break="true" />
-
-    // Render the MDX with our custom hr
-    const componentsWithBreak = {
-      ...mdxComponents,
-      hr: SlideBreak,
-    }
-
-    // Render to get the element tree
-    const rendered = <Content components={componentsWithBreak} />
-
-    // Split children by hr elements
-    return splitByHr(rendered)
-  }, [Content])
-
-  return { slides, frontmatter }
-}
+import { Slide } from '@/components/slide'
 
 /**
- * Recursively traverses React element tree and splits by <hr> elements
+ * MDX components for slides - includes the Slide component
  */
-function splitByHr(element: ReactNode): ReactNode[][] {
-  const slides: ReactNode[][] = [[]]
-
-  function traverse(node: ReactNode) {
-    if (!node) return
-
-    if (Array.isArray(node)) {
-      node.forEach(traverse)
-      return
-    }
-
-    if (isValidElement(node)) {
-      // Check if this is our slide break marker
-      if (node.type === 'hr' || (node.props && node.props['data-slide-break'] === 'true')) {
-        // Start a new slide
-        slides.push([])
-        return
-      }
-
-      // Check if it's an hr component from mdxComponents
-      const nodeType = node.type as any
-      if (typeof nodeType === 'function' && nodeType.name === 'SlideBreak') {
-        slides.push([])
-        return
-      }
-
-      // For fragments or elements with children, we need to check children
-      if (node.props?.children) {
-        const children = Children.toArray(node.props.children)
-
-        // Check if any child is an hr - if so, we need to split this element
-        const hasHrChild = children.some(child =>
-          isValidElement(child) && (
-            child.type === 'hr' ||
-            (child.props && child.props['data-slide-break'] === 'true')
-          )
-        )
-
-        if (hasHrChild) {
-          // Split the children
-          children.forEach(child => {
-            if (isValidElement(child) && (
-              child.type === 'hr' ||
-              (child.props && child.props['data-slide-break'] === 'true')
-            )) {
-              slides.push([])
-            } else {
-              slides[slides.length - 1].push(child)
-            }
-          })
-        } else {
-          // No hr children, add the whole element
-          slides[slides.length - 1].push(node)
-        }
-        return
-      }
-    }
-
-    // Add to current slide
-    slides[slides.length - 1].push(node)
-  }
-
-  // Get the children of the rendered element
-  if (isValidElement(element) && element.props?.children) {
-    const children = Children.toArray(element.props.children)
-    children.forEach(traverse)
-  } else {
-    traverse(element)
-  }
-
-  // Filter out empty slides
-  return slides.filter(slide => slide.length > 0)
+export const slidesMdxComponents = {
+  ...mdxComponents,
+  Slide,
 }
 
 /**
  * Renders a single slide's content
  */
-export function SlideContent({ children }: { children: ReactNode[] }) {
+export function SlideContent({ children }: { children: ReactNode }) {
   return (
     <div className="slide-content prose dark:prose-invert prose-headings:tracking-tight prose-p:leading-relaxed max-w-xl">
       {children}

package/src/components/welcome.tsx

@@ -1,21 +1,18 @@
+import siteConfig from "virtual:veslx-config";
 
 export function Welcome() {
+  const config = siteConfig;
+
   return (
     <div className="text-muted-foreground">
-      <pre 
-        className="not-prose text-xs md:text-sm rounded"
-      >
-        {/* Rubifont on figlet */}
-{`
-▗▄▄▖▗▄▄▄▖▗▖  ▗▖ ▗▄▄▖▗▖    ▗▄▖ ▗▄▄▖ 
-▐▌ ▐▌ █  ▐▛▚▖▐▌▐▌   ▐▌   ▐▌ ▐▌▐▌ ▐▌
-▐▛▀▘  █  ▐▌ ▝▜▌▐▌▝▜▌▐▌   ▐▛▀▜▌▐▛▀▚▖
-▐▌  ▗▄█▄▖▐▌  ▐▌▝▚▄▞▘▐▙▄▄▖▐▌ ▐▌▐▙▄▞▘                                                                    
-`}
-      </pre>
-      <div className="text-xs mt-2 font-mono">
-        PingLab is a repository for running experiments on PING Spiking Neural Networks.
-      </div>
+      <h1 className="text-xl md:text-2xl font-semibold tracking-tight text-foreground mb-2">
+        {config.name}
+      </h1>
+      {config.description && (
+        <p className="text-sm text-muted-foreground/80 font-mono">
+          {config.description}
+        </p>
+      )}
     </div>
   )
 }

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>
         )}