veslx 0.1.14 → 0.1.16

package/plugin/src/remark-slides.ts

@@ -0,0 +1,100 @@
+import type { Root, Content } from 'mdast'
+
+/**
+ * Remark plugin that transforms MDX content into slides.
+ * Splits content at thematic breaks (---) and wraps each section
+ * in a <Slide index={n}> component.
+ *
+ * Also exports `slideCount` from the MDX module.
+ *
+ * Note: This plugin should run AFTER remark-frontmatter so that
+ * YAML frontmatter is already extracted and won't be confused with
+ * slide breaks.
+ */
+export function remarkSlides() {
+  return (tree: Root) => {
+    const slides: Content[][] = [[]]
+    let frontmatterNode: Content | null = null
+
+    // Split children by thematic breaks (skip yaml/toml frontmatter nodes)
+    for (const node of tree.children) {
+      if (node.type === 'thematicBreak') {
+        // Start a new slide
+        slides.push([])
+      } else if (node.type === 'yaml' || node.type === 'toml') {
+        // Keep frontmatter to add back later
+        frontmatterNode = node
+      } else {
+        // Add to current slide
+        slides[slides.length - 1].push(node)
+      }
+    }
+
+    // Filter out empty slides
+    const nonEmptySlides = slides.filter(slide => slide.length > 0)
+
+    // Build new tree with Slide wrappers
+    const newChildren: Content[] = []
+
+    // Preserve frontmatter at the top (for remark-mdx-frontmatter to process)
+    if (frontmatterNode) {
+      newChildren.push(frontmatterNode)
+    }
+
+    // Add slideCount export
+    newChildren.push({
+      type: 'mdxjsEsm',
+      value: `export const slideCount = ${nonEmptySlides.length};`,
+      data: {
+        estree: {
+          type: 'Program',
+          sourceType: 'module',
+          body: [{
+            type: 'ExportNamedDeclaration',
+            declaration: {
+              type: 'VariableDeclaration',
+              kind: 'const',
+              declarations: [{
+                type: 'VariableDeclarator',
+                id: { type: 'Identifier', name: 'slideCount' },
+                init: { type: 'Literal', value: nonEmptySlides.length }
+              }]
+            },
+            specifiers: [],
+            source: null
+          }]
+        }
+      }
+    } as any)
+
+    // Wrap each slide's content in a Slide component
+    nonEmptySlides.forEach((slideContent, index) => {
+      // Opening <Slide index={n}>
+      newChildren.push({
+        type: 'mdxJsxFlowElement',
+        name: 'Slide',
+        attributes: [{
+          type: 'mdxJsxAttribute',
+          name: 'index',
+          value: {
+            type: 'mdxJsxAttributeValueExpression',
+            value: String(index),
+            data: {
+              estree: {
+                type: 'Program',
+                sourceType: 'module',
+                body: [{
+                  type: 'ExpressionStatement',
+                  expression: { type: 'Literal', value: index }
+                }]
+              }
+            }
+          }
+        }],
+        children: slideContent
+      } as any)
+    })
+
+    tree.children = newChildren
+  }
+}

package/plugin/src/types.ts

@@ -0,0 +1,22 @@
+export interface SiteConfig {
+  name?: string;
+  description?: string;
+  github?: string;
+}
+
+export interface VeslxConfig {
+  dir?: string;
+  site?: SiteConfig;
+}
+
+export interface ResolvedSiteConfig {
+  name: string;
+  description: string;
+  github: string;
+}
+
+export const DEFAULT_SITE_CONFIG: ResolvedSiteConfig = {
+  name: 'veslx',
+  description: '',
+  github: '',
+};

package/src/App.tsx

@@ -1,17 +1,14 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom"
 import { ThemeProvider } from "./components/theme-provider"
-import { Home } from "./pages/home"
-import { Post } from "./pages/post"
-import { SlidesPage } from "./pages/slides"
+import { ContentRouter } from "./pages/content-router"
 
 function App() {
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
       <BrowserRouter>
           <Routes>
-            <Route path=":path/SLIDES.mdx" element={<SlidesPage />} />
-            <Route path=":path/README.mdx" element={<Post />} />
-            <Route path="/*" element={<Home />} />
+            {/* Single catch-all route - ContentRouter determines page type */}
+            <Route path="/*" element={<ContentRouter />} />
           </Routes>
       </BrowserRouter>
     </ThemeProvider>

package/src/components/front-matter.tsx

@@ -1,49 +1,34 @@
+import { useMDXContent, useMDXSlides } from "@/hooks/use-mdx-content";
 import { formatDate } from "@/lib/format-date"
-import { Presentation } from "lucide-react"
-import { FileEntry } from "plugin/src/lib"
-import { Link } from "react-router-dom"
+import { useParams } from "react-router-dom"
 
-export function FrontMatter({
-  title,
-  date,
-  description,
-  slides,
-}: {
-  title?: string
-  date?: string
-  description?: string
-  slides?: FileEntry | null
-}){
+export function FrontMatter(){
+  const { "path": path = "." } = useParams();
+  const { frontmatter: readmeFm } = useMDXContent(path);
+  const { frontmatter: slidesFm } = useMDXSlides(path);
+
+  let frontmatter = readmeFm || slidesFm;
 
   return (
     <div>
-      {title && (
+      {frontmatter?.title && (
         <header className="not-prose flex flex-col gap-2 mb-8 pt-4">
           <h1 className="text-2xl md:text-3xl font-semibold tracking-tight text-foreground mb-3">
-            {title}
+            {frontmatter?.title}
           </h1>
 
           {/* Meta line */}
           <div className="flex flex-wrap items-center gap-3 text-muted-foreground">
-            {date && (
+            {frontmatter?.date && (
               <time className="font-mono text-xs bg-muted px-2 py-0.5 rounded">
-                {formatDate(new Date(date as string))}
+                {formatDate(new Date(frontmatter.date as string))}
               </time>
             )}
-            {slides && (
-              <Link
-                to={`/${slides.path}`}
-                className="font-mono text-xs px-2 py-0.5 rounded flex items-center gap-1"
-              >
-                <Presentation className="h-3.5 w-3.5" />
-                <span>slides</span>
-              </Link>
-            )}
           </div>
 
-          {description && (
+          {frontmatter?.description && (
             <div className="flex flex-wrap text-sm items-center gap-3 text-muted-foreground">
-              {description}
+              {frontmatter?.description}
             </div>
           )}
         </header>

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

@@ -4,12 +4,20 @@ export function FigureCaption({ caption, label }: { caption?: string; label?: st
   if (!caption && !label) return null;
 
   return (
-    <div className="mx-auto max-w-md">
-      <div className="text-sm text-muted-foreground leading-relaxed text-left">
-        {label && <span className="font-medium text-foreground">{label}</span>}
-        {label && caption && <span className="mx-1">—</span>}
-        {caption && renderMathInText(caption)}
-      </div>
-    </div>
+    <figcaption className="px-[calc((var(--gallery-width)-var(--content-width))/2)] mt-4">
+      <p className="text-[13px] leading-[1.6] text-muted-foreground">
+        {label && (
+          <span className="font-semibold text-foreground tracking-tight">
+            {label}
+            {caption && <span className="font-normal mx-1.5">·</span>}
+          </span>
+        )}
+        {caption && (
+          <span className="text-muted-foreground/90">
+            {renderMathInText(caption)}
+          </span>
+        )}
+      </p>
+    </figcaption>
   );
 }

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

@@ -4,14 +4,14 @@ export function FigureHeader({ title, subtitle }: { title?: string; subtitle?: s
   if (!title && !subtitle) return null;
 
   return (
-    <div className="mx-auto max-w-md">
+    <div className="px-[calc((var(--gallery-width)-var(--content-width))/2)] mb-4">
       {title && (
-        <h3 className="text-sm md:text-base font-medium tracking-tight text-foreground text-left">
+        <h3 className="text-[15px] font-medium tracking-[-0.01em] text-foreground">
           {renderMathInText(title)}
         </h3>
       )}
       {subtitle && (
-        <p className="text-sm text-muted-foreground leading-relaxed text-left mt-1">
+        <p className="text-[13px] text-muted-foreground/80 leading-relaxed mt-1">
           {renderMathInText(subtitle)}
         </p>
       )}

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

@@ -31,25 +31,27 @@ export function Lightbox({
 
   return createPortal(
     <div
-      className="fixed inset-0 z-[9999] bg-background"
+      className="fixed inset-0 z-[9999] bg-background/98 backdrop-blur-md animate-fade-in-slow"
       onClick={onClose}
       {...{ [FULLSCREEN_DATA_ATTR]: "true" }}
       style={{ top: 0, left: 0, right: 0, bottom: 0 }}
     >
       {/* Top bar */}
       <div
-        className="fixed top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3 bg-background/80 backdrop-blur-sm"
+        className="fixed top-0 left-0 right-0 z-10 flex items-center justify-between px-6 py-4"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="font-mono text-xs text-muted-foreground tabular-nums">
-          {String(selectedIndex + 1).padStart(2, '0')} / {String(images.length).padStart(2, '0')}
+        <div className="font-mono text-[11px] text-muted-foreground/60 tabular-nums tracking-wider uppercase">
+          {String(selectedIndex + 1).padStart(2, '0')}
+          <span className="mx-1.5 text-muted-foreground/30">/</span>
+          {String(images.length).padStart(2, '0')}
         </div>
         <button
           onClick={onClose}
-          className="p-2 text-muted-foreground hover:text-foreground transition-colors"
+          className="p-2 -m-2 text-muted-foreground/50 hover:text-foreground transition-colors duration-200"
           aria-label="Close"
         >
-          <X className="h-5 w-5" />
+          <X className="h-4 w-4" strokeWidth={1.5} />
         </button>
       </div>
 
@@ -60,10 +62,10 @@ export function Lightbox({
             e.stopPropagation();
             onPrevious();
           }}
-          className="fixed left-4 top-1/2 -translate-y-1/2 z-10 p-2 text-muted-foreground hover:text-foreground transition-colors"
+          className="fixed left-6 top-1/2 -translate-y-1/2 z-10 p-3 -m-3 text-muted-foreground/40 hover:text-foreground transition-colors duration-200"
           aria-label="Previous image"
         >
-          <ChevronLeft className="h-8 w-8" />
+          <ChevronLeft className="h-6 w-6" strokeWidth={1.5} />
         </button>
       )}
 
@@ -74,10 +76,10 @@ export function Lightbox({
             e.stopPropagation();
             onNext();
           }}
-          className="fixed right-4 top-1/2 -translate-y-1/2 z-10 p-2 text-muted-foreground hover:text-foreground transition-colors"
+          className="fixed right-6 top-1/2 -translate-y-1/2 z-10 p-3 -m-3 text-muted-foreground/40 hover:text-foreground transition-colors duration-200"
           aria-label="Next image"
         >
-          <ChevronRight className="h-8 w-8" />
+          <ChevronRight className="h-6 w-6" strokeWidth={1.5} />
         </button>
       )}
 
@@ -86,17 +88,17 @@ export function Lightbox({
         <img
           src={current.src}
           alt={current.label}
-          className="max-w-full max-h-full object-contain"
+          className="max-w-full max-h-full object-contain rounded-sm shadow-2xl"
           onClick={(e) => e.stopPropagation()}
         />
       </div>
 
       {/* Caption */}
       <div
-        className="fixed bottom-0 left-0 right-0 z-10 p-4 text-center bg-background/80 backdrop-blur-sm"
+        className="fixed bottom-0 left-0 right-0 z-10 px-6 py-5 text-center"
         onClick={(e) => e.stopPropagation()}
       >
-        <span className="font-mono text-xs text-muted-foreground">
+        <span className="font-mono text-[11px] text-muted-foreground/50 tracking-wide">
           {current.label}
         </span>
       </div>

package/src/components/gallery/components/loading-image.tsx

@@ -1,5 +1,5 @@
 import { useState, ImgHTMLAttributes } from "react";
-import { Image } from "lucide-react";
+import { ImageOff } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 export function LoadingImage({
@@ -11,27 +11,30 @@ export function LoadingImage({
   const [hasError, setHasError] = useState(false);
 
   return (
-    <div className={cn("relative", wrapperClassName)}>
+    <div className={cn("relative overflow-hidden rounded-sm bg-muted/20", wrapperClassName)}>
       {isLoading && !hasError && (
-        <div className="absolute inset-0 bg-muted/30 animate-pulse flex items-center justify-center">
-          <div className="w-8 h-8 border border-border/50 rounded-sm" />
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-muted/40 to-transparent animate-shimmer" />
         </div>
       )}
       {hasError && (
-        <div className="absolute inset-0 bg-muted/20 flex items-center justify-center">
-          <div className="text-center">
-            <Image className="h-5 w-5 text-muted-foreground/40 mx-auto" />
-            <span className="text-xs text-muted-foreground/40 mt-1.5 block font-mono">failed</span>
+        <div className="absolute inset-0 bg-muted/10 flex items-center justify-center backdrop-blur-sm">
+          <div className="text-center space-y-1">
+            <ImageOff className="h-4 w-4 text-muted-foreground/30 mx-auto" strokeWidth={1.5} />
+            <span className="text-[10px] text-muted-foreground/30 block font-mono uppercase tracking-wider">
+              unavailable
+            </span>
           </div>
         </div>
       )}
       <img
         {...props}
         className={cn(
-          className,
-          "transition-opacity duration-500 ease-out-expo",
-          isLoading && "opacity-0",
-          hasError && "opacity-0"
+          "w-full h-full",
+          "transition-all duration-500 ease-out",
+          isLoading ? "opacity-0 scale-[1.02]" : "opacity-100 scale-100",
+          hasError && "opacity-0",
+          className
         )}
         onLoad={(e) => {
           setIsLoading(false);

package/src/components/gallery/hooks/use-gallery-images.ts

@@ -1,9 +1,26 @@
 import { useMemo } from "react";
 import { useTheme } from "next-themes";
+import { useParams } from "react-router-dom";
 import { useDirectory } from "../../../../plugin/src/client";
-import { FileEntry } from "../../../../plugin/src/lib";
+import { FileEntry, DirectoryEntry } from "../../../../plugin/src/lib";
 import { minimatch } from "minimatch";
 
+// Recursively collect all image files from a directory tree
+function collectAllImages(entry: DirectoryEntry | FileEntry): FileEntry[] {
+  if (entry.type === "file") {
+    if (entry.name.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i)) {
+      return [entry];
+    }
+    return [];
+  }
+  // It's a directory - recurse into children
+  const images: FileEntry[] = [];
+  for (const child of entry.children || []) {
+    images.push(...collectAllImages(child));
+  }
+  return images;
+}
+
 function sortPathsNumerically(paths: string[]): void {
   paths.sort((a, b) => {
     const nums = (s: string) => (s.match(/\d+/g) || []).map(Number);
@@ -65,24 +82,48 @@ export function useGalleryImages({
   page?: number;
 }) {
   const { resolvedTheme } = useTheme();
+  const { "*": routePath = "" } = useParams();
 
-  let resolvedPath = path;
+  // Get the current post's directory from the route
+  // Route is like "04-components/README.mdx" -> "04-components"
+  // Or "gallery-examples" -> "gallery-examples"
+  const currentDir = routePath
+    .replace(/\/[^/]+\.mdx$/i, "")  // Remove /filename.mdx
+    .replace(/\/$/, "")              // Remove trailing slash
+    || ".";
 
-  const { directory } = useDirectory(resolvedPath);
+  // Resolve the path relative to current directory
+  let resolvedPath = path;
+  if (path?.startsWith("./")) {
+    // Relative path like "./images" -> "gallery-examples/images"
+    const relativePart = path.slice(2);
+    resolvedPath = currentDir === "." ? relativePart : `${currentDir}/${relativePart}`;
+  } else if (path && !path.startsWith("/") && !path.includes("/")) {
+    // Simple name like "images" -> "gallery-examples/images"
+    resolvedPath = currentDir === "." ? path : `${currentDir}/${path}`;
+  }
+
+  // If only globs provided (no path), use root directory
+  const directoryPath = resolvedPath || ".";
+  const { directory } = useDirectory(directoryPath);
 
   const paths = useMemo(() => {
     if (!directory) return [];
 
-    const imageChildren = directory.children.filter((child): child is FileEntry => {
-      return !!child.name.match(/\.(png|jpeg|gif|svg|webp)$/i) && child.type === "file";
-    });
-
-    let imagePaths = imageChildren.map(child => child.path);
+    let imagePaths: string[];
 
     if (globs && globs.length > 0) {
-      imagePaths = imagePaths.filter(p => {
-        return globs.some(glob => minimatch(p.split('/').pop() || '', glob));
+      // When globs provided, collect all images recursively and match against filename
+      const allImages = collectAllImages(directory);
+      imagePaths = allImages
+        .map(img => img.path)
+        .filter(p => globs.some(glob => minimatch(p, glob, { matchBase: true })));
+    } else {
+      // No globs - just get images from the specified directory
+      const imageChildren = directory.children.filter((child): child is FileEntry => {
+        return !!child.name.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i) && child.type === "file";
       });
+      imagePaths = imageChildren.map(child => child.path);
     }
 
     sortPathsNumerically(imagePaths);

package/src/components/gallery/index.tsx

@@ -62,63 +62,69 @@ export default function Gallery({
 
   if (isLoading) {
     return (
-      <div className="not-prose py-4 md:py-6">
-        <div className="grid grid-cols-3 gap-2 sm:gap-4 max-w-[var(--gallery-width)] mx-auto">
+      <figure className="not-prose py-6 md:py-8">
+        <div className="grid grid-cols-3 gap-3 max-w-[var(--gallery-width)] mx-auto">
           {[...Array(3)].map((_, i) => (
             <div
               key={i}
-              className="aspect-[4/3] bg-muted/30 animate-pulse"
-              style={{ animationDelay: `${i * 100}ms` }}
-            />
+              className="aspect-square rounded-sm bg-muted/20 relative overflow-hidden"
+            >
+              <div
+                className="absolute inset-0 bg-gradient-to-r from-transparent via-muted/30 to-transparent animate-shimmer"
+                style={{ animationDelay: `${i * 150}ms` }}
+              />
+            </div>
           ))}
         </div>
-      </div>
+      </figure>
     );
   }
 
   if (isEmpty) {
     return (
-      <div className="not-prose py-16 text-center">
-        <div className="inline-flex items-center gap-3 text-muted-foreground/60">
-          <Image className="h-4 w-4" />
-          <span className="font-mono text-sm tracking-wide">no image(s) found</span>
+      <figure className="not-prose py-12 text-center">
+        <div className="inline-flex items-center gap-2.5 text-muted-foreground/40">
+          <Image className="h-3.5 w-3.5" strokeWidth={1.5} />
+          <span className="font-mono text-xs uppercase tracking-widest">No images</span>
         </div>
-      </div>
+      </figure>
     );
   }
 
   return (
     <>
-      <div className="rounded-lg not-prose flex flex-col gap-0 relative p-4 -mx-[calc((var(--gallery-width)-var(--content-width))/2+var(--page-padding))]">
+      <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} />
 
-        <Carousel>
-          <CarouselContent>
+        <Carousel className="w-full">
+          <CarouselContent className={`-ml-2 md:-ml-3 ${images.length < 3 ? 'justify-center' : ''}`}>
             {images.map((img, index) => (
-              <CarouselItem 
-                key={index} 
-                className="mx-auto md:basis-1/2 lg:basis-1/3 cursor-pointer transition-transform duration-700 ease-out-expo hover:scale-[1.02]"
-                // wrapperClassName="h-full"
+              <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)}
               >
-                <LoadingImage
-                  src={img.src}
-                  alt={img.label}
-                />
+                <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>
 
           {images.length > 3 && (
             <>
-              <CarouselPrevious />
-              <CarouselNext />
+              <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} />
-      </div>
+      </figure>
 
       {lightbox.isOpen && lightbox.selectedIndex !== null && (
         <Lightbox

package/src/components/header.tsx

@@ -2,6 +2,7 @@ import { Link } 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";
 
 interface HeaderProps {
   slideControls?: {
@@ -13,6 +14,8 @@ interface HeaderProps {
 }
 
 export function Header({ slideControls }: HeaderProps = {}) {
+  const config = siteConfig;
+
   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">
@@ -21,7 +24,7 @@ export function Header({ slideControls }: HeaderProps = {}) {
             to="/"
             className="rounded-lg font-mono py-1.5 text-sm font-medium text-muted-foreground hover:underline"
           >
-            pl
+            {config.name}
           </Link>
         </nav>
 
@@ -52,14 +55,16 @@ export function Header({ slideControls }: HeaderProps = {}) {
 
         {/* Navigation */}
         <nav className="flex items-center gap-2">
-          <Link
-            to="https://github.com/eoinmurray/pinglab"
-            target="_blank"
-            className="text-muted-foreground/70 hover:text-foreground transition-colors duration-300"
-            aria-label="GitHub"
-          >
-            <SiGithub className="h-4 w-4" />
-          </Link>
+          {config.github && (
+            <Link
+              to={`https://github.com/${config.github}`}
+              target="_blank"
+              className="text-muted-foreground/70 hover:text-foreground transition-colors duration-300"
+              aria-label="GitHub"
+            >
+              <SiGithub className="h-4 w-4" />
+            </Link>
+          )}
           <ModeToggle />
         </nav>
       </div>