veslx 0.1.21 → 0.1.23

package/dist/client/plugin/src/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","sources":["../../../../plugin/src/client.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from \"react\";\nimport { DirectoryEntry, FileEntry } from \"./lib\";\nimport { buildDirectoryTree, navigateToPath } from \"./directory-tree\";\n// @ts-ignore - virtual module\nimport { files, frontmatters } from \"virtual:content-modules\";\n\n/**\n * Find the main content file for a directory.\n * Supports (in order of preference):\n * - index.mdx / index.md (modern convention)\n * - README.mdx / README.md (traditional convention)\n */\nexport function findReadme(directory: DirectoryEntry): FileEntry | null {\n  const indexFiles = [\n    \"index.mdx\", \"index.md\",\n    \"README.mdx\", \"Readme.mdx\", \"readme.mdx\",\n    \"README.md\", \"Readme.md\", \"readme.md\",\n  ];\n\n  for (const filename of indexFiles) {\n    const found = directory.children.find((child) =>\n      child.type === \"file\" && child.name === filename\n    ) as FileEntry | undefined;\n    if (found) return found;\n  }\n\n  return null;\n}\n\n/**\n * Find all MDX files in a directory (excluding index/README and slides)\n */\nexport function findMdxFiles(directory: DirectoryEntry): FileEntry[] {\n  const indexFiles = [\n    \"index.mdx\", \"index.md\",\n    \"README.mdx\", \"Readme.mdx\", \"readme.mdx\",\n    \"README.md\", \"Readme.md\", \"readme.md\",\n  ];\n  const slideFiles = [\n    \"SLIDES.mdx\", \"Slides.mdx\", \"slides.mdx\",\n    \"SLIDES.md\", \"Slides.md\", \"slides.md\",\n  ];\n  const excludeFiles = [...indexFiles, ...slideFiles];\n\n  return directory.children.filter((child): child is FileEntry =>\n    child.type === \"file\" &&\n    (child.name.endsWith('.mdx') || child.name.endsWith('.md')) &&\n    !excludeFiles.includes(child.name) &&\n    !child.name.endsWith('.slides.mdx') &&\n    !child.name.endsWith('.slides.md')\n  );\n}\n\nexport function findSlides(directory: DirectoryEntry): FileEntry | null {\n  const readme = directory.children.find((child) =>\n    child.type === \"file\" &&\n    [\n      \"SLIDES.md\", \"Slides.md\", \"slides.md\",\n      \"SLIDES.mdx\", \"Slides.mdx\", \"slides.mdx\"\n    ].includes(child.name)\n  ) as FileEntry | undefined;\n\n  return readme || null;\n}\n\n\nexport type DirectoryError =\n  | { type: 'path_not_found'; message: string; status: 404 };\n\n// Build directory tree once from glob keys, with frontmatter metadata\nconst directoryTree = buildDirectoryTree(Object.keys(files), frontmatters as Record<string, FileEntry['frontmatter']>);\n\nexport function useDirectory(path: string = \".\") {\n  const [error, setError] = useState<DirectoryError | null>(null);\n\n  const result = useMemo(() => {\n    try {\n      const { directory, file } = navigateToPath(directoryTree, path);\n      return { directory, file };\n    } catch {\n      setError({ type: 'path_not_found', message: `Path not found: ${path}`, status: 404 });\n      return { directory: null, file: null };\n    }\n  }, [path]);\n\n  return {\n    directory: result.directory,\n    file: result.file,\n    loading: false, // No async loading needed\n    error\n  };\n}\n\nexport function useFileContent(path: string) {\n  const [blob, setBlob] = useState<Blob | null>(null);\n  const [content, setContent] = useState<string | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    const controller = new AbortController();\n    setLoading(true);\n    setError(null);\n\n    (async () => {\n      try {\n        const res = await fetch(`/raw/${path}`, {\n          signal: controller.signal,\n        });\n\n        if (!res.ok) {\n          throw new Error(`Failed to fetch: ${res.status} ${res.statusText}`);\n        }\n\n        const fetchedBlob = await res.blob();\n        setBlob(fetchedBlob);\n\n        // Try to read as text - some binary files may fail\n        try {\n          const text = await fetchedBlob.text();\n          setContent(text);\n        } catch {\n          // Binary file - text content not available\n          setContent(null);\n        }\n      } catch (err) {\n        if (err instanceof Error && err.name === 'AbortError') {\n          return; // Ignore abort errors\n        }\n        setError(err instanceof Error ? err.message : 'Unknown error');\n      } finally {\n        setLoading(false);\n      }\n    })();\n\n    return () => controller.abort();\n  }, [path]);\n\n  return { blob, content, loading, error };\n}\n\nexport function isSimulationRunning() {\n  const [running, setRunning] = useState<boolean>(false);\n\n  useEffect(() => {\n    let interval: ReturnType<typeof setInterval>;\n\n    const fetchStatus = async () => {\n      const response = await fetch(`/raw/.running`);\n\n      // this is an elaborate workaround to stop devtools logging errors on 404s\n      const text = await response.text()\n      if (text === \"\") {\n        setRunning(true);\n      } else {\n        setRunning(false);\n      }\n    };\n\n    // Initial fetch\n    fetchStatus();\n\n    // Poll every second\n    interval = setInterval(fetchStatus, 1000);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, []);\n\n  return running;\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"client.js","sources":["../../../../plugin/src/client.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from \"react\";\nimport { DirectoryEntry, FileEntry } from \"./lib\";\nimport { buildDirectoryTree, navigateToPath } from \"./directory-tree\";\n// @ts-ignore - virtual module\nimport { files, frontmatters } from \"virtual:content-modules\";\n\n/**\n * Find the main content file for a directory.\n * Supports (in order of preference):\n * - index.mdx / index.md (modern convention)\n * - README.mdx / README.md (traditional convention)\n */\nexport function findReadme(directory: DirectoryEntry): FileEntry | null {\n  const indexFiles = [\n    \"index.mdx\", \"index.md\",\n    \"README.mdx\", \"Readme.mdx\", \"readme.mdx\",\n    \"README.md\", \"Readme.md\", \"readme.md\",\n  ];\n\n  for (const filename of indexFiles) {\n    const found = directory.children.find((child) =>\n      child.type === \"file\" && child.name === filename\n    ) as FileEntry | undefined;\n    if (found) return found;\n  }\n\n  return null;\n}\n\n/**\n * Find all MDX files in a directory (excluding index/README and slides)\n */\nexport function findMdxFiles(directory: DirectoryEntry): FileEntry[] {\n  const indexFiles = [\n    \"index.mdx\", \"index.md\",\n    \"README.mdx\", \"Readme.mdx\", \"readme.mdx\",\n    \"README.md\", \"Readme.md\", \"readme.md\",\n  ];\n  const slideFiles = [\n    \"SLIDES.mdx\", \"Slides.mdx\", \"slides.mdx\",\n    \"SLIDES.md\", \"Slides.md\", \"slides.md\",\n  ];\n  const excludeFiles = [...indexFiles, ...slideFiles];\n\n  return directory.children.filter((child): child is FileEntry =>\n    child.type === \"file\" &&\n    (child.name.endsWith('.mdx') || child.name.endsWith('.md')) &&\n    !excludeFiles.includes(child.name) &&\n    !child.name.endsWith('.slides.mdx') &&\n    !child.name.endsWith('.slides.md')\n  );\n}\n\nexport function findSlides(directory: DirectoryEntry): FileEntry | null {\n  // First check for standard SLIDES.mdx files\n  const standardSlides = directory.children.find((child) =>\n    child.type === \"file\" &&\n    [\n      \"SLIDES.md\", \"Slides.md\", \"slides.md\",\n      \"SLIDES.mdx\", \"Slides.mdx\", \"slides.mdx\"\n    ].includes(child.name)\n  ) as FileEntry | undefined;\n\n  if (standardSlides) return standardSlides;\n\n  // Then check for *.slides.mdx files\n  const dotSlides = directory.children.find((child) =>\n    child.type === \"file\" &&\n    (child.name.endsWith('.slides.mdx') || child.name.endsWith('.slides.md'))\n  ) as FileEntry | undefined;\n\n  return dotSlides || null;\n}\n\n/**\n * Find all standalone slides files in a directory (*.slides.mdx, *.slides.md)\n * These are slides files that aren't part of a folder (like getting-started.slides.mdx)\n */\nexport function findStandaloneSlides(directory: DirectoryEntry): FileEntry[] {\n  const standardSlideFiles = [\n    \"SLIDES.mdx\", \"Slides.mdx\", \"slides.mdx\",\n    \"SLIDES.md\", \"Slides.md\", \"slides.md\",\n  ];\n\n  return directory.children.filter((child): child is FileEntry =>\n    child.type === \"file\" &&\n    (child.name.endsWith('.slides.mdx') || child.name.endsWith('.slides.md')) &&\n    !standardSlideFiles.includes(child.name)\n  );\n}\n\n\nexport type DirectoryError =\n  | { type: 'path_not_found'; message: string; status: 404 };\n\n// Build directory tree once from glob keys, with frontmatter metadata\nconst directoryTree = buildDirectoryTree(Object.keys(files), frontmatters as Record<string, FileEntry['frontmatter']>);\n\nexport function useDirectory(path: string = \".\") {\n  const [error, setError] = useState<DirectoryError | null>(null);\n\n  const result = useMemo(() => {\n    try {\n      const { directory, file } = navigateToPath(directoryTree, path);\n      return { directory, file };\n    } catch {\n      setError({ type: 'path_not_found', message: `Path not found: ${path}`, status: 404 });\n      return { directory: null, file: null };\n    }\n  }, [path]);\n\n  return {\n    directory: result.directory,\n    file: result.file,\n    loading: false, // No async loading needed\n    error\n  };\n}\n\nexport function useFileContent(path: string) {\n  const [blob, setBlob] = useState<Blob | null>(null);\n  const [content, setContent] = useState<string | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    const controller = new AbortController();\n    setLoading(true);\n    setError(null);\n\n    (async () => {\n      try {\n        const res = await fetch(`/raw/${path}`, {\n          signal: controller.signal,\n        });\n\n        if (!res.ok) {\n          throw new Error(`Failed to fetch: ${res.status} ${res.statusText}`);\n        }\n\n        const fetchedBlob = await res.blob();\n        setBlob(fetchedBlob);\n\n        // Try to read as text - some binary files may fail\n        try {\n          const text = await fetchedBlob.text();\n          setContent(text);\n        } catch {\n          // Binary file - text content not available\n          setContent(null);\n        }\n      } catch (err) {\n        if (err instanceof Error && err.name === 'AbortError') {\n          return; // Ignore abort errors\n        }\n        setError(err instanceof Error ? err.message : 'Unknown error');\n      } finally {\n        setLoading(false);\n      }\n    })();\n\n    return () => controller.abort();\n  }, [path]);\n\n  return { blob, content, loading, error };\n}\n\nexport function isSimulationRunning() {\n  const [running, setRunning] = useState<boolean>(false);\n\n  useEffect(() => {\n    let interval: ReturnType<typeof setInterval>;\n\n    const fetchStatus = async () => {\n      const response = await fetch(`/raw/.running`);\n\n      // this is an elaborate workaround to stop devtools logging errors on 404s\n      const text = await response.text()\n      if (text === \"\") {\n        setRunning(true);\n      } else {\n        setRunning(false);\n      }\n    };\n\n    // Initial fetch\n    fetchStatus();\n\n    // Poll every second\n    interval = setInterval(fetchStatus, 1000);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, []);\n\n  return running;\n}"],"names":[],"mappings":"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"}

package/index.html

@@ -5,6 +5,19 @@
     <link rel="icon" type="image/svg+xml" href="/logo_dark.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>veslx</title>
+    <!-- Prevent FOUC: apply theme before render -->
+    <script>
+      (function() {
+        var theme = localStorage.getItem('theme');
+        var isDark = theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        if (isDark) document.documentElement.classList.add('dark');
+        document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+      })();
+    </script>
+    <style>
+      html { background: hsl(0 0% 100%); }
+      html.dark { background: hsl(0 0% 7%); }
+    </style>
     <!-- Google Fonts: DM Sans + DM Mono -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veslx",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "type": "module",
   "repository": {
     "type": "git",

package/plugin/src/client.tsx

@@ -52,7 +52,8 @@ export function findMdxFiles(directory: DirectoryEntry): FileEntry[] {
 }
 
 export function findSlides(directory: DirectoryEntry): FileEntry | null {
-  const readme = directory.children.find((child) =>
+  // First check for standard SLIDES.mdx files
+  const standardSlides = directory.children.find((child) =>
     child.type === "file" &&
     [
       "SLIDES.md", "Slides.md", "slides.md",
@@ -60,7 +61,32 @@ export function findSlides(directory: DirectoryEntry): FileEntry | null {
     ].includes(child.name)
   ) as FileEntry | undefined;
 
-  return readme || null;
+  if (standardSlides) return standardSlides;
+
+  // Then check for *.slides.mdx files
+  const dotSlides = directory.children.find((child) =>
+    child.type === "file" &&
+    (child.name.endsWith('.slides.mdx') || child.name.endsWith('.slides.md'))
+  ) as FileEntry | undefined;
+
+  return dotSlides || null;
+}
+
+/**
+ * Find all standalone slides files in a directory (*.slides.mdx, *.slides.md)
+ * These are slides files that aren't part of a folder (like getting-started.slides.mdx)
+ */
+export function findStandaloneSlides(directory: DirectoryEntry): FileEntry[] {
+  const standardSlideFiles = [
+    "SLIDES.mdx", "Slides.mdx", "slides.mdx",
+    "SLIDES.md", "Slides.md", "slides.md",
+  ];
+
+  return directory.children.filter((child): child is FileEntry =>
+    child.type === "file" &&
+    (child.name.endsWith('.slides.mdx') || child.name.endsWith('.slides.md')) &&
+    !standardSlideFiles.includes(child.name)
+  );
 }
 
 

package/plugin/src/plugin.ts

@@ -1,6 +1,7 @@
-import { type Plugin, type Connect } from 'vite'
+import { type Plugin, type Connect, type ViteDevServer } from 'vite'
 import path from 'path'
 import fs from 'fs'
+import yaml from 'js-yaml'
 import type { IncomingMessage, ServerResponse } from 'http'
 import { type VeslxConfig, type ResolvedSiteConfig, DEFAULT_SITE_CONFIG } from './types'
 import matter from 'gray-matter'
@@ -71,7 +72,11 @@ function copyDirSync(src: string, dest: string) {
   }
 }
 
-export default function contentPlugin(contentDir: string, config?: VeslxConfig): Plugin {
+interface PluginOptions {
+  configPath?: string
+}
+
+export default function contentPlugin(contentDir: string, config?: VeslxConfig, options?: PluginOptions): Plugin {
 
   if (!contentDir) {
     throw new Error('Content directory must be specified.')
@@ -82,13 +87,31 @@ export default function contentPlugin(contentDir: string, config?: VeslxConfig):
   }
 
   const dir = contentDir
+  const configPath = options?.configPath
 
-  // Resolve site config with defaults
-  const siteConfig: ResolvedSiteConfig = {
+  // Mutable site config that can be updated on hot reload
+  let siteConfig: ResolvedSiteConfig = {
     ...DEFAULT_SITE_CONFIG,
     ...config?.site,
   }
 
+  // Helper to reload config from file
+  function reloadConfig(): boolean {
+    if (!configPath || !fs.existsSync(configPath)) return false
+    try {
+      const content = fs.readFileSync(configPath, 'utf-8')
+      const parsed = yaml.load(content) as VeslxConfig
+      siteConfig = {
+        ...DEFAULT_SITE_CONFIG,
+        ...parsed?.site,
+      }
+      return true
+    } catch (e) {
+      console.error('[veslx] Failed to reload config:', e)
+      return false
+    }
+  }
+
   // Server middleware for serving content files
   const urlToDir = new Map<string, string>()
 
@@ -209,6 +232,28 @@ export const modules = import.meta.glob('@content/**/*.mdx');
     configureServer(server) {
       // Add middleware for serving content files
       server.middlewares.use(middleware)
+
+      // Watch config file for hot reload
+      if (configPath && fs.existsSync(configPath)) {
+        server.watcher.add(configPath)
+      }
+    },
+
+    handleHotUpdate({ file, server }) {
+      // Check if the changed file is our config
+      if (configPath && file === configPath) {
+        console.log('[veslx] Config changed, reloading...')
+        if (reloadConfig()) {
+          // Invalidate the virtual config module
+          const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_CONFIG_ID)
+          if (mod) {
+            server.moduleGraph.invalidateModule(mod)
+          }
+          // Full reload since config affects the entire app
+          server.ws.send({ type: 'full-reload' })
+          return [] // Prevent default HMR handling
+        }
+      }
     },
     configurePreviewServer(server) {
       // Add middleware for preview server too

package/src/components/content-tabs.tsx

@@ -8,9 +8,9 @@ interface ContentTabsProps {
 }
 
 const views: { key: ContentView; label: string; path: string }[] = [
-  { key: "posts", label: "posts", path: "/posts" },
-  { key: "docs", label: "docs", path: "/docs" },
-  { key: "all", label: "all", path: "/all" },
+  { key: "posts", label: "Posts", path: "/posts" },
+  { key: "docs", label: "Docs", path: "/docs" },
+  // { key: "all", label: "All", path: "/all" },
 ];
 
 export function ContentTabs({ value, counts }: ContentTabsProps) {
@@ -28,7 +28,7 @@ export function ContentTabs({ value, counts }: ContentTabsProps) {
   };
 
   return (
-    <nav className="flex justify-end items-center gap-3 font-mono font-medium text-xs text-muted-foreground">
+    <nav className="flex items-center gap-3 font-mono font-medium text-xs text-muted-foreground">
       {views.map((view) => {
         const disabled = isDisabled(view.key);
 

package/src/components/front-matter.tsx

@@ -1,13 +1,8 @@
-import { useMDXContent, useMDXSlides } from "@/hooks/use-mdx-content";
+import { useFrontmatter } from "@/lib/frontmatter-context";
 import { formatDate } from "@/lib/format-date"
-import { useParams } from "react-router-dom"
 
 export function FrontMatter(){
-  const { "path": path = "." } = useParams();
-  const { frontmatter: readmeFm } = useMDXContent(path);
-  const { frontmatter: slidesFm } = useMDXSlides(path);
-
-  let frontmatter = readmeFm || slidesFm;
+  const frontmatter = useFrontmatter();
 
   return (
     <div>
@@ -35,4 +30,4 @@ export function FrontMatter(){
       )}
     </div>
   )
-}
+}

package/src/components/gallery/components/figure-caption.tsx

@@ -4,7 +4,7 @@ export function FigureCaption({ caption, label }: { caption?: string; label?: st
   if (!caption && !label) return null;
 
   return (
-    <figcaption className="px-[calc((var(--gallery-width)-var(--content-width))/2)] mt-4">
+    <figcaption className="mt-4">
       <p className="text-[13px] leading-[1.6] text-muted-foreground">
         {label && (
           <span className="font-semibold text-foreground tracking-tight">

package/src/components/gallery/components/figure-header.tsx

@@ -4,7 +4,7 @@ export function FigureHeader({ title, subtitle }: { title?: string; subtitle?: s
   if (!title && !subtitle) return null;
 
   return (
-    <div className="px-[calc((var(--gallery-width)-var(--content-width))/2)] mb-4">
+    <div className="mb-4">
       {title && (
         <h3 className="text-[15px] font-medium tracking-[-0.01em] text-foreground">
           {renderMathInText(title)}

package/src/components/gallery/components/lightbox.tsx

@@ -31,7 +31,7 @@ export function Lightbox({
 
   return createPortal(
     <div
-      className="fixed inset-0 z-[9999] bg-background/98 backdrop-blur-md animate-fade-in-slow"
+      className="fixed inset-0 z-[9999] bg-background/98 backdrop-blur-md animate-[fade-in_150ms_ease-out]"
       onClick={onClose}
       {...{ [FULLSCREEN_DATA_ATTR]: "true" }}
       style={{ top: 0, left: 0, right: 0, bottom: 0 }}

package/src/components/gallery/index.tsx

@@ -29,13 +29,15 @@ function getImageUrl(path: string): string {
 
 export default function Gallery({
   path,
-  globs = null, 
+  globs = null,
   caption,
   captionLabel,
   title,
   subtitle,
   limit = null,
   page = 0,
+  children,
+  childAlign = "right",
 }: {
   path?: string;
   globs?: string[] | null;
@@ -45,6 +47,8 @@ export default function Gallery({
   subtitle?: string;
   limit?: number | null;
   page?: number;
+  children?: React.ReactNode;
+  childAlign?: "left" | "right";
 }) {
   const { paths, isLoading, isEmpty } = useGalleryImages({
     path,
@@ -91,39 +95,74 @@ export default function Gallery({
     );
   }
 
+  const isCompact = images.length <= 3;
+  const isSingleWithChildren = images.length === 1 && children;
+
+  const imageElement = (index: number, img: LightboxImage, className?: string) => (
+    <div
+      key={index}
+      className={`aspect-square overflow-hidden rounded-sm bg-muted/10 cursor-pointer group ${className || ''}`}
+      onClick={() => lightbox.open(index)}
+    >
+      <LoadingImage
+        src={img.src}
+        alt={img.label}
+        className="object-contain transition-transform duration-500 ease-out group-hover:scale-[1.02]"
+      />
+    </div>
+  );
+
   return (
     <>
-      <figure className="not-prose relative py-6 md:py-8 -mx-[calc((var(--gallery-width)-var(--content-width))/2+var(--page-padding))]">
-        <FigureHeader title={title} subtitle={subtitle} />
+      <figure className={`not-prose relative py-6 md:py-8 ${isCompact ? '' : '-mx-[calc((var(--gallery-width)-var(--content-width))/2+var(--page-padding))] px-[calc((var(--gallery-width)-var(--content-width))/2)]'}`}>
+        {!isSingleWithChildren && <FigureHeader title={title} subtitle={subtitle} />}
 
-        <Carousel className="w-full">
-          <CarouselContent className={`-ml-2 md:-ml-3 ${images.length < 3 ? 'justify-center' : ''}`}>
-            {images.map((img, index) => (
-              <CarouselItem
-                key={index}
-                className={`pl-2 md:pl-3 md:basis-1/2 lg:basis-1/3 cursor-pointer group ${images.length < 3 ? 'flex-none' : ''}`}
-                onClick={() => lightbox.open(index)}
-              >
-                <div className="aspect-square overflow-hidden rounded-sm ring-1 ring-border/50 transition-all duration-300 group-hover:ring-border group-hover:shadow-lg bg-muted/10">
-                  <LoadingImage
-                    src={img.src}
-                    alt={img.label}
-                    className="object-contain transition-transform duration-500 ease-out group-hover:scale-[1.02]"
-                  />
-                </div>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
+        {isSingleWithChildren ? (
+          <div className={`flex gap-6 ${childAlign === 'left' ? '' : 'flex-row-reverse'}`}>
+            <div className="flex-1 text-sm leading-relaxed text-foreground/90 space-y-3 [&>ul]:space-y-1.5 [&>ul]:list-disc [&>ul]:pl-5 [&>ol]:space-y-1.5 [&>ol]:list-decimal [&>ol]:pl-5 flex flex-col">
+              {(title || subtitle) && <div className="invisible"><FigureHeader title={title} subtitle={subtitle} /></div>}
+              <div>{children}</div>
+            </div>
+            <div className="w-3/5 flex-shrink-0">
+              <FigureHeader title={title} subtitle={subtitle} />
+              {imageElement(0, images[0])}
+              <FigureCaption caption={caption} label={captionLabel} />
+            </div>
+          </div>
+        ) : isCompact ? (
+          <div className="flex gap-3">
+            {images.map((img, index) => imageElement(index, img, 'flex-1'))}
+          </div>
+        ) : (
+          <Carousel className="w-full">
+            <CarouselContent className="-ml-2 md:-ml-3">
+              {images.map((img, index) => (
+                <CarouselItem
+                  key={index}
+                  className="pl-2 md:pl-3 md:basis-1/2 lg:basis-1/3 cursor-pointer group"
+                  onClick={() => lightbox.open(index)}
+                >
+                  <div className="aspect-square overflow-hidden rounded-sm bg-muted/10">
+                    <LoadingImage
+                      src={img.src}
+                      alt={img.label}
+                      className="object-contain transition-transform duration-500 ease-out group-hover:scale-[1.02]"
+                    />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
 
-          {images.length > 3 && (
-            <>
-              <CarouselPrevious className="left-4 bg-background/80 backdrop-blur-sm border-border/50 hover:bg-background hover:border-border" />
-              <CarouselNext className="right-4 bg-background/80 backdrop-blur-sm border-border/50 hover:bg-background hover:border-border" />
-            </>
-          )}
-        </Carousel>
+            {images.length > 3 && (
+              <>
+                <CarouselPrevious className="left-4 bg-background/80 backdrop-blur-sm border-border/50 hover:bg-background hover:border-border" />
+                <CarouselNext className="right-4 bg-background/80 backdrop-blur-sm border-border/50 hover:bg-background hover:border-border" />
+              </>
+            )}
+          </Carousel>
+        )}
 
-        <FigureCaption caption={caption} label={captionLabel} />
+        {!isSingleWithChildren && <FigureCaption caption={caption} label={captionLabel} />}
       </figure>
 
       {lightbox.isOpen && lightbox.selectedIndex !== null && (

package/src/components/header.tsx

@@ -1,8 +1,9 @@
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { ModeToggle } from "./mode-toggle";
 import { SiGithub } from "@icons-pack/react-simple-icons";
 import { ChevronUp, ChevronDown } from "lucide-react";
 import siteConfig from "virtual:veslx-config";
+import { cn } from "@/lib/utils";
 
 interface HeaderProps {
   slideControls?: {
@@ -16,6 +17,8 @@ interface HeaderProps {
 export function Header({ slideControls }: HeaderProps = {}) {
   const config = siteConfig;
 
+  const { "*": path } = useParams()
+
   return (
     <header className="print:hidden fixed top-0 left-0 right-0 z-40">
       <div className="mx-auto w-full px-[var(--page-padding)] flex items-center gap-8 py-4">
@@ -30,31 +33,47 @@ export function Header({ slideControls }: HeaderProps = {}) {
 
         <div className="flex-1" />
 
-        {/* Slide navigation controls */}
-        {slideControls && (
-          <nav className="flex items-center gap-1">
-            <button
-              onClick={slideControls.onPrevious}
-              className="p-1.5 text-muted-foreground/70 hover:text-foreground transition-colors duration-200"
-              title="Previous slide (↑)"
-            >
-              <ChevronUp className="h-4 w-4" />
-            </button>
-            <span className="font-mono text-xs text-muted-foreground/70 tabular-nums min-w-[3ch] text-center">
-              {slideControls.current + 1}/{slideControls.total}
-            </span>
-            <button
-              onClick={slideControls.onNext}
-              className="p-1.5 text-muted-foreground/70 hover:text-foreground transition-colors duration-200"
-              title="Next slide (↓)"
-            >
-              <ChevronDown className="h-4 w-4" />
-            </button>
-          </nav>
-        )}
-
         {/* Navigation */}
-        <nav className="flex items-center gap-2">
+        <nav className="flex items-center gap-4">
+          {slideControls && (
+            <>
+              <button
+                onClick={slideControls.onPrevious}
+                className="p-1.5 text-muted-foreground/70 hover:text-foreground transition-colors duration-200"
+                title="Previous slide (↑)"
+              >
+                <ChevronUp className="h-4 w-4" />
+              </button>
+              <span className="font-mono text-xs text-muted-foreground/70 tabular-nums min-w-[3ch] text-center">
+                {slideControls.current + 1}/{slideControls.total}
+              </span>
+              <button
+                onClick={slideControls.onNext}
+                className="p-1.5 text-muted-foreground/70 hover:text-foreground transition-colors duration-200"
+                title="Next slide (↓)"
+              >
+                <ChevronDown className="h-4 w-4" />
+              </button>
+            </>
+          )}
+          <Link
+            to={`/posts`}
+            className={cn(
+              "font-medium text-muted-foreground/70 hover:text-foreground transition-colors duration-300",
+              path?.startsWith("posts") && "font-semibold text-foreground",
+            )}
+          >
+            Posts
+          </Link>
+          <Link
+            to={`/docs`}
+            className={cn(
+              "font-medium text-muted-foreground/70 hover:text-foreground transition-colors duration-300",
+              path?.startsWith("docs") && "font-semibold text-foreground",
+            )}
+          >
+            Docs
+          </Link>
           {config.github && (
             <Link
               to={`https://github.com/${config.github}`}

package/src/components/mdx-components.tsx

@@ -3,6 +3,10 @@ import Gallery from '@/components/gallery'
 import { ParameterTable } from '@/components/parameter-table'
 import { ParameterBadge } from '@/components/parameter-badge'
 import { FrontMatter } from './front-matter'
+import { HeroSlide } from './slides/hero-slide'
+import { FigureSlide } from './slides/figure-slide'
+import { TextSlide } from './slides/text-slide'
+import { SlideOutline } from './slides/slide-outline'
 
 /**
  * Smart link component that uses React Router for internal links
@@ -77,6 +81,14 @@ export const mdxComponents = {
 
   ParameterBadge,
 
+  HeroSlide,
+
+  FigureSlide,
+
+  TextSlide,
+
+  SlideOutline,
+
   // Headings - clean sans-serif
   h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => {
     const id = generateId(props.children)

package/src/components/post-list.tsx

@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
 import type { DirectoryEntry } from "../../plugin/src/lib";
 import { formatDate } from "@/lib/format-date";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, Presentation } from "lucide-react";
 import {
   type ContentView,
   type PostEntry,
@@ -117,6 +117,8 @@ export default function PostList({ directory, view = 'all' }: PostListProps) {
           linkPath = `/${post.path}`;
         }
 
+        const isSlides = linkPath.endsWith('SLIDES.mdx');
+
         return (
           <Link
             key={post.path}
@@ -126,15 +128,7 @@ export default function PostList({ directory, view = 'all' }: PostListProps) {
               "transition-colors duration-150",
             )}
           >
-            <article className="flex items-start gap-4">
-              {/* Date - left side, fixed width */}
-              <time
-                dateTime={date?.toISOString()}
-                className="font-mono text-xs text-muted-foreground tabular-nums w-20 flex-shrink-0 pt-0.5"
-              >
-                {date ? formatDate(date) : <span className="text-muted-foreground/30">—</span>}
-              </time>
-
+            <article className="flex items-center gap-4">
               {/* Main content */}
               <div className="flex-1 min-w-0">
                 <h3 className={cn(
@@ -152,6 +146,16 @@ export default function PostList({ directory, view = 'all' }: PostListProps) {
                   </p>
                 )}
               </div>
+
+              {isSlides && (
+                <Presentation className="h-3 w-3 text-muted-foreground" />
+              )}
+              <time
+                dateTime={date?.toISOString()}
+                className="font-mono text-xs text-muted-foreground tabular-nums w-20 flex-shrink-0"
+              >
+                {date && formatDate(date)}
+              </time>
             </article>
           </Link>
         );

package/src/components/slides/figure-slide.tsx

@@ -0,0 +1,16 @@
+
+
+export function FigureSlide({
+  title,
+  src,
+}: {
+  title: string;
+  src: string;
+}) {
+  return (
+    <div className="figure-slide">
+      <h2>{title}</h2>
+      <img src={src} alt={title} />
+    </div>
+  );
+}

package/src/components/slides/hero-slide.tsx

@@ -0,0 +1,34 @@
+
+export function HeroSlide({
+  title,
+  subtitle,
+  author,
+  date,
+}: {
+  title: string;
+  subtitle?: string;
+  author?: string;
+  date?: string;
+}) {
+  return (
+    <div>
+      <h1 className="text-[clamp(2.5rem,6vw,5rem)] font-semibold leading-[1.1] tracking-[-0.02em] text-foreground text-balance">
+        {title}
+      </h1>
+
+      {subtitle && (
+        <p className="text-[clamp(1rem,2vw,1.5rem)] text-muted-foreground max-w-[50ch] leading-relaxed">
+          {subtitle}
+        </p>
+      )}
+
+      {(author || date) && (
+        <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground mt-4">
+          {author && <span>{author}</span>}
+          {author && date && <span className="text-border">·</span>}
+          {date && <span>{date}</span>}
+        </div>
+      )}
+    </div>
+  );
+}