veslx 0.1.5 → 0.1.15

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>

package/src/components/mdx-components.tsx

@@ -1,7 +1,62 @@
-
+import { Link, useLocation } from 'react-router-dom'
 import Gallery from '@/components/gallery'
 import { ParameterTable } from '@/components/parameter-table'
 import { ParameterBadge } from '@/components/parameter-badge'
+import { FrontMatter } from './front-matter'
+
+/**
+ * Smart link component that uses React Router for internal links
+ * and regular anchor tags for external links.
+ */
+function SmartLink({ href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  const location = useLocation()
+
+  // External links: absolute URLs, mailto, tel, etc.
+  const isExternal = href?.startsWith('http') || href?.startsWith('mailto:') || href?.startsWith('tel:')
+
+  // Hash-only links stay as anchors for in-page navigation
+  const isHashOnly = href?.startsWith('#')
+
+  if (isExternal || isHashOnly || !href) {
+    return (
+      <a
+        href={href}
+        className="text-primary hover:underline underline-offset-2"
+        {...(isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+        {...props}
+      >
+        {children}
+      </a>
+    )
+  }
+
+  // Resolve relative paths (./foo.mdx, ../bar.mdx) against current location
+  let resolvedHref = href
+  if (href.startsWith('./') || href.startsWith('../')) {
+    // Get current directory from pathname
+    const currentPath = location.pathname
+    const currentDir = currentPath.replace(/\/[^/]+\.mdx$/, '') || currentPath.replace(/\/[^/]*$/, '') || '/'
+
+    // Simple relative path resolution
+    if (href.startsWith('./')) {
+      resolvedHref = `${currentDir}/${href.slice(2)}`.replace(/\/+/g, '/')
+    } else if (href.startsWith('../')) {
+      const parentDir = currentDir.replace(/\/[^/]+$/, '') || '/'
+      resolvedHref = `${parentDir}/${href.slice(3)}`.replace(/\/+/g, '/')
+    }
+  }
+
+  // Internal link - use React Router Link
+  return (
+    <Link
+      to={resolvedHref}
+      className="text-primary hover:underline underline-offset-2"
+      {...props}
+    >
+      {children}
+    </Link>
+  )
+}
 
 function generateId(children: unknown): string {
   return children
@@ -13,6 +68,9 @@ function generateId(children: unknown): string {
 
 // Shared MDX components - lab notebook / coder aesthetic
 export const mdxComponents = {
+
+  FrontMatter,
+
   Gallery,
 
   ParameterTable,
@@ -110,13 +168,8 @@ export const mdxComponents = {
     <li className="mt-1.5" {...props} />
   ),
 
-  // Links
-  a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
-    <a
-      className="text-primary hover:underline underline-offset-2"
-      {...props}
-    />
-  ),
+  // Links - uses React Router for internal navigation
+  a: SmartLink,
 
   // Tables
   table: (props: React.TableHTMLAttributes<HTMLTableElement>) => (

package/src/components/post-list.tsx

@@ -1,14 +1,64 @@
 import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
-import { DirectoryEntry } from "../../plugin/src/lib";
-import { findReadme, findSlides } from "../../plugin/src/client";
+import { DirectoryEntry, FileEntry } from "../../plugin/src/lib";
+import { findReadme, findSlides, findMdxFiles } from "../../plugin/src/client";
 import { formatDate } from "@/lib/format-date";
 import { ArrowRight } from "lucide-react";
 
+type PostEntry = {
+  type: 'folder' | 'file';
+  name: string;
+  path: string;
+  readme: FileEntry | null;
+  slides: FileEntry | null;
+  file: FileEntry | null; // For standalone MDX files
+};
+
+// Helper to extract numeric prefix from filename (e.g., "01-intro" → 1)
+function extractOrder(name: string): number | null {
+  const match = name.match(/^(\d+)-/);
+  return match ? parseInt(match[1], 10) : null;
+}
+
+// Helper to strip numeric prefix for display (e.g., "01-getting-started" → "Getting Started")
+function stripNumericPrefix(name: string): string {
+  return name
+    .replace(/^\d+-/, '')
+    .replace(/-/g, ' ')
+    .replace(/\b\w/g, c => c.toUpperCase());
+}
+
 export default function PostList({ directory }: { directory: DirectoryEntry }) {
   const folders = directory.children.filter((c): c is DirectoryEntry => c.type === "directory");
+  const standaloneFiles = findMdxFiles(directory);
+
+  // Convert folders to post entries
+  const folderPosts: PostEntry[] = folders.map((folder) => {
+    const readme = findReadme(folder);
+    const slides = findSlides(folder);
+    return {
+      type: 'folder' as const,
+      name: folder.name,
+      path: folder.path,
+      readme,
+      slides,
+      file: null,
+    };
+  });
 
-  if (folders.length === 0) {
+  // Convert standalone MDX files to post entries
+  const filePosts: PostEntry[] = standaloneFiles.map((file) => ({
+    type: 'file' as const,
+    name: file.name.replace(/\.mdx?$/, ''),
+    path: file.path,
+    readme: null,
+    slides: null,
+    file,
+  }));
+
+  let posts: PostEntry[] = [...folderPosts, ...filePosts];
+
+  if (posts.length === 0) {
     return (
       <div className="py-24 text-center">
         <p className="text-muted-foreground font-mono text-sm tracking-wide">no entries</p>
@@ -16,133 +66,117 @@ export default function PostList({ directory }: { directory: DirectoryEntry }) {
     );
   }
 
-  let posts = folders.map((folder) => {
-    const readme = findReadme(folder);
-    const slides = findSlides(folder);
-    return {
-      ...folder,
-      readme,
-      slides,
-    }
-  })
-
+  // Filter out hidden and draft posts
   posts = posts.filter((post) => {
-    return post.readme?.frontmatter?.visibility !== "hidden";
+    const frontmatter = post.readme?.frontmatter || post.file?.frontmatter;
+    return frontmatter?.visibility !== "hidden" && frontmatter?.draft !== true;
   });
 
+  // Helper to get frontmatter from post
+  const getFrontmatter = (post: PostEntry) => {
+    return post.readme?.frontmatter || post.file?.frontmatter || post.slides?.frontmatter;
+  };
+
+  // Helper to get date from post
+  const getPostDate = (post: PostEntry): Date | null => {
+    const frontmatter = getFrontmatter(post);
+    return frontmatter?.date ? new Date(frontmatter.date as string) : null;
+  };
+
+  // Smart sorting: numeric prefix → date → alphabetical
   posts = posts.sort((a, b) => {
-    let aDate = a.readme?.frontmatter?.date ? new Date(a.readme.frontmatter.date as string) : null;
-    let bDate = b.readme?.frontmatter?.date ? new Date(b.readme.frontmatter.date as string) : null;
+    const aOrder = extractOrder(a.name);
+    const bOrder = extractOrder(b.name);
+    const aDate = getPostDate(a);
+    const bDate = getPostDate(b);
 
-    if (!aDate && a.slides) {
-      aDate = a.slides.frontmatter?.date ? new Date(a.slides.frontmatter.date as string) : null;
-    }
-    if (!bDate && b.slides) {
-      bDate = b.slides.frontmatter?.date ? new Date(b.slides.frontmatter.date as string) : null;
+    // Both have numeric prefix → sort by number
+    if (aOrder !== null && bOrder !== null) {
+      return aOrder - bOrder;
     }
+    // One has prefix, one doesn't → prefixed comes first
+    if (aOrder !== null) return -1;
+    if (bOrder !== null) return 1;
 
+    // Both have dates → sort by date (newest first)
     if (aDate && bDate) {
       return bDate.getTime() - aDate.getTime();
-    } else if (aDate) {
-      return -1;
-    } else if (bDate) {
-      return 1;
-    } else {
-      return a.name.localeCompare(b.name);
     }
-  });
+    // One has date → dated comes first
+    if (aDate) return -1;
+    if (bDate) return 1;
 
-  const postsGroupedByMonthAndYear: { [key: string]: typeof posts } = {};
-  posts.forEach((post) => {
-    let date = post.readme?.frontmatter?.date ? new Date(post.readme.frontmatter.date as string) : null;
-    if (!date && post.slides) {
-      date = post.slides.frontmatter?.date ? new Date(post.slides.frontmatter.date as string) : null;
-    }
-    const monthYear = date ? `${date.getFullYear()}-${date.getMonth() + 1}` : "unknown";
-    if (!postsGroupedByMonthAndYear[monthYear]) {
-      postsGroupedByMonthAndYear[monthYear] = [];
-    }
-    postsGroupedByMonthAndYear[monthYear].push(post);
+    // Neither → alphabetical by title
+    const aTitle = (getFrontmatter(a)?.title as string) || a.name;
+    const bTitle = (getFrontmatter(b)?.title as string) || b.name;
+    return aTitle.localeCompare(bTitle);
   });
 
   return (
-    <div className="space-y-8">
-      {Object.entries(postsGroupedByMonthAndYear)
-        .sort(([a], [b]) => {
-          if (a === "unknown") return 1;
-          if (b === "unknown") return -1;
-          return b.localeCompare(a);
-        })
-        .map(([monthYear, monthPosts]) => {
-          const [year, month] = monthYear.split("-");
-          const displayDate = monthYear === "unknown" 
-            ? "Unknown Date" 
-            : new Date(parseInt(year), parseInt(month) - 1).toLocaleDateString("en-US", { 
-                year: "numeric", 
-                month: "long" 
-              });
-
-          return (
-            <div key={monthYear}>
-              <h2 className="text-xs font-mono uppercase tracking-wider text-muted-foreground mb-3">
-                {displayDate}
-              </h2>
-              <div className="space-y-1">
-                {monthPosts.map((post) => {
-                  let frontmatter = post.readme?.frontmatter;
-
-                  if (!post.readme && post.slides) {
-                    frontmatter = post.slides.frontmatter;
-                  }
-
-                  const title = (frontmatter?.title as string) || post.name;
-                  const description = frontmatter?.description as string | undefined;
-                  const date = frontmatter?.date ? new Date(frontmatter.date as string) : null;
-
-                  return (
-                    <Link
-                      key={post.path}
-                      to={(post.slides && !post.readme) ? `/${post.slides.path}` : `/${post.readme.path}`}
-                      className={cn(
-                        "group block py-3 px-3 -mx-3 rounded-md",
-                        "transition-colors duration-150",
-                        // "hover:bg-accent"
-                      )}
-                    >
-                      <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>
-
-                        {/* Main content */}
-                        <div className="flex-1 min-w-0">
-                          <h3 className={cn(
-                            "text-sm font-medium text-foreground",
-                            "group-hover:underline",
-                            "flex items-center gap-2"
-                          )}>
-                            <span>{title}</span>
-                            <ArrowRight className="h-3 w-3 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200 text-primary" />
-                          </h3>
-
-                          {description && (
-                            <p className="text-sm text-muted-foreground line-clamp-1 mt-0.5">
-                              {description}
-                            </p>
-                          )}
-                        </div>
-                      </article>
-                    </Link>
-                  );
-                })}
+    <div className="space-y-1">
+      {posts.map((post) => {
+        const frontmatter = getFrontmatter(post);
+
+        // Title: explicit frontmatter > stripped numeric prefix > raw name
+        const title = (frontmatter?.title as string) || stripNumericPrefix(post.name);
+        const description = frontmatter?.description as string | undefined;
+        const date = frontmatter?.date ? new Date(frontmatter.date as string) : null;
+
+        // Determine the link path
+        let linkPath: string;
+        if (post.file) {
+          // Standalone MDX file
+          linkPath = `/${post.file.path}`;
+        } else if (post.slides && !post.readme) {
+          // Folder with only slides
+          linkPath = `/${post.slides.path}`;
+        } else if (post.readme) {
+          // Folder with readme
+          linkPath = `/${post.readme.path}`;
+        } else {
+          // Fallback to folder path
+          linkPath = `/${post.path}`;
+        }
+
+        return (
+          <Link
+            key={post.path}
+            to={linkPath}
+            className={cn(
+              "group block py-3 px-3 -mx-3 rounded-md",
+              "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>
+
+              {/* Main content */}
+              <div className="flex-1 min-w-0">
+                <h3 className={cn(
+                  "text-sm font-medium text-foreground",
+                  "group-hover:underline",
+                  "flex items-center gap-2"
+                )}>
+                  <span>{title}</span>
+                  <ArrowRight className="h-3 w-3 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200 text-primary" />
+                </h3>
+
+                {description && (
+                  <p className="text-sm text-muted-foreground line-clamp-1 mt-0.5">
+                    {description}
+                  </p>
+                )}
               </div>
-            </div>
-          );
-        })}
+            </article>
+          </Link>
+        );
+      })}
     </div>
   );
 }

package/src/components/running-bar.tsx

@@ -8,7 +8,7 @@ export function RunningBar() {
     <>
       {isRunning && (
         // this should stay red not another color
-        <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">
+        <div className="running-bar 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">
             <span className="h-1.5 w-1.5 rounded-full bg-current animate-pulse" />
             <span className="uppercase tracking-widest">simulation running</span>