veslx 0.1.35 → 0.1.38

package/plugin/src/plugin.ts

@@ -310,9 +310,6 @@ export default function contentPlugin(contentDir: string, config?: VeslxConfig,
     next()
   }
 
-  // Virtual module ID for the modified CSS
-  const VIRTUAL_CSS_MODULE = '\0veslx:index.css'
-
   return {
     name: 'content',
     enforce: 'pre',
@@ -336,17 +333,8 @@ export default function contentPlugin(contentDir: string, config?: VeslxConfig,
       }
     },
 
-    // Intercept CSS and virtual module imports
-    resolveId(id, importer) {
-      // Intercept index.css imported from main.tsx and redirect to our virtual module
-      // This allows us to inject @source directive for Tailwind to scan user content
-      if (id === './index.css' && importer?.endsWith('/src/main.tsx')) {
-        return VIRTUAL_CSS_MODULE
-      }
-      // Also catch the resolved path
-      if (id.endsWith('/src/index.css') && !id.startsWith('\0')) {
-        return VIRTUAL_CSS_MODULE
-      }
+    // Intercept virtual module imports
+    resolveId(id) {
       // Virtual modules for content
       if (id === VIRTUAL_MODULE_ID) {
         return RESOLVED_VIRTUAL_MODULE_ID
@@ -356,28 +344,25 @@ export default function contentPlugin(contentDir: string, config?: VeslxConfig,
       }
     },
 
-    load(id) {
-      // Serve the modified CSS content with @source directive
-      // This enables Tailwind v4 to scan the user's content directory for classes
-      if (id === VIRTUAL_CSS_MODULE) {
-        // Read the original CSS
-        const veslxRoot = path.dirname(path.dirname(__dirname))
-        const cssPath = path.join(veslxRoot, 'src/index.css')
-        const cssContent = fs.readFileSync(cssPath, 'utf-8')
-
+    // Transform CSS to inject @source directive for Tailwind
+    // This enables Tailwind v4 to scan the user's content directory for classes
+    transform(code, id) {
+      if (id.endsWith('/src/index.css') && code.includes("@import 'tailwindcss'")) {
         // Use absolute path for @source directive
         const absoluteContentDir = dir.replace(/\\/g, '/')
+        const sourceDirective = `@source "${absoluteContentDir}";`
 
         // Inject @source directive after the tailwindcss import
-        const sourceDirective = `@source "${absoluteContentDir}";`
-        const modified = cssContent.replace(
+        const modified = code.replace(
           /(@import\s+["']tailwindcss["'];?)/,
           `$1\n${sourceDirective}`
         )
 
-        return modified
+        return { code: modified, map: null }
       }
+    },
 
+    load(id) {
       // Virtual module for content
       if (id === RESOLVED_VIRTUAL_MODULE_ID) {
         // Extract frontmatter from MDX files at build time (avoids MDX hook issues)
@@ -385,15 +370,32 @@ export default function contentPlugin(contentDir: string, config?: VeslxConfig,
 
         // Generate virtual module with import.meta.glob for MDX files
         return `
-export const posts = import.meta.glob(['@content/**/*.mdx', '@content/**/*.md'], {
+export const posts = import.meta.glob(['@content/*.mdx', '@content/*.md', '@content/**/*.mdx', '@content/**/*.md'], {
   import: 'default',
   query: { skipSlides: true }
 });
-export const allMdx = import.meta.glob(['@content/**/*.mdx', '@content/**/*.md']);
-export const slides = import.meta.glob(['@content/**/SLIDES.mdx', '@content/**/SLIDES.md', '@content/**/*.slides.mdx', '@content/**/*.slides.md']);
+export const allMdx = import.meta.glob(['@content/*.mdx', '@content/*.md', '@content/**/*.mdx', '@content/**/*.md']);
+export const slides = import.meta.glob(['@content/SLIDES.mdx', '@content/SLIDES.md', '@content/*.slides.mdx', '@content/*.slides.md', '@content/**/SLIDES.mdx', '@content/**/SLIDES.md', '@content/**/*.slides.mdx', '@content/**/*.slides.md']);
 
-// All files for directory tree building (web-compatible files only)
+// All files for directory tree building (using ?url to avoid parsing non-JS files)
+// Exclude veslx.yaml config files from bundling
 export const files = import.meta.glob([
+  '@content/*.mdx',
+  '@content/*.md',
+  '@content/*.tsx',
+  '@content/*.ts',
+  '@content/*.jsx',
+  '@content/*.js',
+  '@content/*.png',
+  '@content/*.jpg',
+  '@content/*.jpeg',
+  '@content/*.gif',
+  '@content/*.svg',
+  '@content/*.webp',
+  '@content/*.css',
+  '@content/*.yaml',
+  '@content/*.yml',
+  '@content/*.json',
   '@content/**/*.mdx',
   '@content/**/*.md',
   '@content/**/*.tsx',
@@ -407,13 +409,18 @@ export const files = import.meta.glob([
   '@content/**/*.svg',
   '@content/**/*.webp',
   '@content/**/*.css',
-], { eager: false });
+  '@content/**/*.yaml',
+  '@content/**/*.yml',
+  '@content/**/*.json',
+  '!@content/veslx.yaml',
+  '!@content/**/veslx.yaml',
+], { eager: false, query: '?url', import: 'default' });
 
 // Frontmatter extracted at build time (no MDX execution required)
 export const frontmatters = ${JSON.stringify(frontmatterData)};
 
 // Legacy aliases for backwards compatibility
-export const modules = import.meta.glob(['@content/**/*.mdx', '@content/**/*.md']);
+export const modules = import.meta.glob(['@content/*.mdx', '@content/*.md', '@content/**/*.mdx', '@content/**/*.md']);
 `
       }
       if (id === RESOLVED_VIRTUAL_CONFIG_ID) {
@@ -438,15 +445,21 @@ export const modules = import.meta.glob(['@content/**/*.mdx', '@content/**/*.md'
       // File extensions that should trigger a full reload
       const watchedExtensions = ['.mdx', '.md', '.yaml', '.yml', '.json', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.tsx', '.ts', '.jsx', '.js', '.css']
 
-      const handleContentChange = (filePath: string, event: 'add' | 'unlink' | 'change') => {
-        // Check if the file is in the content directory
-        if (!filePath.startsWith(dir)) return
+      // Debounce reload to avoid rapid-fire refreshes when multiple files change
+      let reloadTimeout: ReturnType<typeof setTimeout> | null = null
+      const pendingChanges: Array<{ filePath: string; event: 'add' | 'unlink' | 'change' }> = []
+      const DEBOUNCE_MS = 1000
 
-        // Check if it's a watched file type
-        const ext = path.extname(filePath).toLowerCase()
-        if (!watchedExtensions.includes(ext)) return
+      const flushReload = () => {
+        if (pendingChanges.length === 0) return
 
-        console.log(`[veslx] Content ${event}: ${path.relative(dir, filePath)}`)
+        // Log all pending changes
+        for (const { filePath, event } of pendingChanges) {
+          console.log(`[veslx] Content ${event}: ${path.relative(dir, filePath)}`)
+        }
+
+        // Clear pending changes
+        pendingChanges.length = 0
 
         // Invalidate the virtual content module so frontmatters are re-extracted
         const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID)
@@ -458,6 +471,24 @@ export const modules = import.meta.glob(['@content/**/*.mdx', '@content/**/*.md'
         server.ws.send({ type: 'full-reload' })
       }
 
+      const handleContentChange = (filePath: string, event: 'add' | 'unlink' | 'change') => {
+        // Check if the file is in the content directory
+        if (!filePath.startsWith(dir)) return
+
+        // Check if it's a watched file type
+        const ext = path.extname(filePath).toLowerCase()
+        if (!watchedExtensions.includes(ext)) return
+
+        // Queue this change
+        pendingChanges.push({ filePath, event })
+
+        // Debounce: clear existing timeout and set a new one
+        if (reloadTimeout) {
+          clearTimeout(reloadTimeout)
+        }
+        reloadTimeout = setTimeout(flushReload, DEBOUNCE_MS)
+      }
+
       server.watcher.on('add', (filePath) => handleContentChange(filePath, 'add'))
       server.watcher.on('unlink', (filePath) => handleContentChange(filePath, 'unlink'))
       server.watcher.on('change', (filePath) => handleContentChange(filePath, 'change'))

package/src/components/footer.tsx

@@ -0,0 +1,18 @@
+import packageJson from "../../package.json";
+
+export function Footer() {
+  return (
+    <footer className="py-4 mx-auto w-full max-w-[var(--content-width)] px-[var(--page-padding)]">
+      <div className="flex justify-end">
+        <a
+          href="https://github.com/eoinmurray/veslx"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="font-mono text-xs text-muted-foreground/50 hover:text-muted-foreground transition-colors"
+        >
+          veslx v{packageJson.version}
+        </a>
+      </div>
+    </footer>
+  );
+}

package/src/components/gallery/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useRef, useEffect } from "react";
 import { Image } from "lucide-react";
 import { Lightbox, LightboxImage } from "@/components/gallery/components/lightbox";
 import { useGalleryImages } from "./hooks/use-gallery-images";
@@ -7,6 +7,34 @@ import { LoadingImage } from "./components/loading-image";
 import { FigureHeader } from "./components/figure-header";
 import { FigureCaption } from "./components/figure-caption";
 
+/**
+ * Hook to prevent horizontal scroll from triggering browser back/forward gestures.
+ * Captures wheel events and prevents default when at scroll boundaries.
+ */
+function usePreventSwipeNavigation(ref: React.RefObject<HTMLElement | null>) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      // Only handle horizontal scrolling
+      if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;
+
+      const { scrollLeft, scrollWidth, clientWidth } = el;
+      const atLeftEdge = scrollLeft <= 0;
+      const atRightEdge = scrollLeft + clientWidth >= scrollWidth - 1;
+
+      // Prevent default if trying to scroll past boundaries
+      if ((atLeftEdge && e.deltaX < 0) || (atRightEdge && e.deltaX > 0)) {
+        e.preventDefault();
+      }
+    };
+
+    el.addEventListener('wheel', handleWheel, { passive: false });
+    return () => el.removeEventListener('wheel', handleWheel);
+  }, [ref]);
+}
+
 function getImageLabel(path: string): string {
   const filename = path.split('/').pop() || path;
   return filename
@@ -51,6 +79,8 @@ export default function Gallery({
   });
 
   const lightbox = useLightbox(paths.length);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  usePreventSwipeNavigation(scrollRef);
 
   const images: LightboxImage[] = useMemo(() =>
     paths.map(p => ({ src: getImageUrl(p), label: getImageLabel(p) })),
@@ -142,7 +172,7 @@ export default function Gallery({
             {images.map((img, index) => imageElement(index, img, 'flex-1'))}
           </div>
         ) : (
-          <div className="flex gap-3 overflow-x-auto overscroll-x-contain pb-4">
+          <div ref={scrollRef} className="flex gap-3 overflow-x-auto overscroll-x-contain pb-4">
             {images.map((img, index) => (
               <div
                 key={index}

package/src/components/mdx-components.tsx

@@ -8,6 +8,7 @@ import { FigureSlide } from './slides/figure-slide'
 import { TextSlide } from './slides/text-slide'
 import { SlideOutline } from './slides/slide-outline'
 import { PostList } from '@/components/post-list'
+import { PostListItem } from '@/components/post-list-item'
 /**
  * Smart link component that uses React Router for internal links
  * and regular anchor tags for external links.
@@ -91,6 +92,8 @@ export const mdxComponents = {
 
   PostList,
 
+  PostListItem,
+
   // Headings - clean sans-serif
   h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => {
     const id = generateId(props.children)

package/src/components/parameter-table.tsx

@@ -1,6 +1,8 @@
-import { useFileContent } from "../../plugin/src/client";
-import { useMemo, useState } from "react";
+import { useFileContent, useDirectory } from "../../plugin/src/client";
+import { useMemo, useState, useRef, useEffect } from "react";
+import { useParams } from "react-router-dom";
 import { cn } from "@/lib/utils";
+import { minimatch } from "minimatch";
 import {
   type ParameterValue,
   extractPath,
@@ -8,6 +10,67 @@ import {
   formatValue,
   parseConfigFile,
 } from "@/lib/parameter-utils";
+import { FileEntry, DirectoryEntry } from "../../plugin/src/lib";
+
+/**
+ * Hook to prevent horizontal scroll from triggering browser back/forward gestures.
+ */
+function usePreventSwipeNavigation(ref: React.RefObject<HTMLElement | null>) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;
+
+      const { scrollLeft, scrollWidth, clientWidth } = el;
+      const atLeftEdge = scrollLeft <= 0;
+      const atRightEdge = scrollLeft + clientWidth >= scrollWidth - 1;
+
+      if ((atLeftEdge && e.deltaX < 0) || (atRightEdge && e.deltaX > 0)) {
+        e.preventDefault();
+      }
+    };
+
+    el.addEventListener('wheel', handleWheel, { passive: false });
+    return () => el.removeEventListener('wheel', handleWheel);
+  }, [ref]);
+}
+
+// Check if a path contains glob patterns
+function isGlobPattern(path: string): boolean {
+  return path.includes('*') || path.includes('?') || path.includes('[');
+}
+
+// Recursively collect all config files from a directory tree
+function collectAllConfigFiles(entry: DirectoryEntry | FileEntry): FileEntry[] {
+  if (entry.type === "file") {
+    if (entry.name.match(/\.(yaml|yml|json)$/i)) {
+      return [entry];
+    }
+    return [];
+  }
+  const files: FileEntry[] = [];
+  for (const child of entry.children || []) {
+    files.push(...collectAllConfigFiles(child));
+  }
+  return files;
+}
+
+// Sort paths numerically
+function sortPathsNumerically(paths: string[]): void {
+  paths.sort((a, b) => {
+    const nums = (s: string) => (s.match(/\d+/g) || []).map(Number);
+    const na = nums(a);
+    const nb = nums(b);
+    const len = Math.max(na.length, nb.length);
+    for (let i = 0; i < len; i++) {
+      const diff = (na[i] ?? 0) - (nb[i] ?? 0);
+      if (diff !== 0) return diff;
+    }
+    return a.localeCompare(b);
+  });
+}
 
 /**
  * Build a filtered data object from an array of jq-like paths.
@@ -59,12 +122,13 @@ function ParameterGrid({ entries }: { entries: [string, ParameterValue][] }) {
             </span>
             <span
               className={cn(
-                "text-[11px] font-mono tabular-nums font-medium shrink-0",
+                "text-[11px] font-mono tabular-nums font-medium truncate max-w-[120px]",
                 type === "number" && "text-foreground",
                 type === "string" && "text-amber-600 dark:text-amber-500",
                 type === "boolean" && "text-cyan-600 dark:text-cyan-500",
                 type === "null" && "text-muted-foreground/50"
               )}
+              title={type === "string" ? `"${formatValue(value)}"` : formatValue(value)}
             >
               {type === "string" ? `"${formatValue(value)}"` : formatValue(value)}
             </span>
@@ -184,7 +248,7 @@ function ParameterSection({
   );
 }
 
-interface ParameterTableProps {
+interface SingleParameterTableProps {
   /** Path to the YAML or JSON file */
   path: string;
   /**
@@ -195,6 +259,19 @@ interface ParameterTableProps {
    *   - [".default_inputs", ".base.dt"] → show default_inputs section and dt from base
    */
   keys?: string[];
+  /** Optional label to show above the table */
+  label?: string;
+  /** Whether to include vertical margin (default true) */
+  withMargin?: boolean;
+}
+
+interface ParameterTableProps {
+  /** Path to the YAML or JSON file, supports glob patterns like "*.yaml" */
+  path: string;
+  /**
+   * Optional array of jq-like paths to filter which parameters to show.
+   */
+  keys?: string[];
 }
 
 /**
@@ -282,20 +359,34 @@ function splitIntoColumns<T extends [string, ParameterValue]>(
   return columns;
 }
 
-export function ParameterTable({ path, keys }: ParameterTableProps) {
+function SingleParameterTable({ path, keys, label, withMargin = true }: SingleParameterTableProps) {
   const { content, loading, error } = useFileContent(path);
 
-  const parsed = useMemo(() => {
-    if (!content) return null;
+  const { parsed, parseError } = useMemo(() => {
+    if (!content) return { parsed: null, parseError: 'no content' };
 
     const data = parseConfigFile(content, path);
-    if (!data) return null;
+    if (!data) {
+      // Check why parsing failed
+      if (!path.match(/\.(yaml|yml|json)$/i)) {
+        return { parsed: null, parseError: `unsupported file type` };
+      }
+      // Check if content looks like HTML (404 page)
+      if (content.trim().startsWith('<!') || content.trim().startsWith('<html')) {
+        return { parsed: null, parseError: `file not found` };
+      }
+      return { parsed: null, parseError: `invalid ${path.split('.').pop()} syntax` };
+    }
 
     if (keys && keys.length > 0) {
-      return filterData(data, keys);
+      const filtered = filterData(data, keys);
+      if (Object.keys(filtered).length === 0) {
+        return { parsed: null, parseError: `keys not found: ${keys.join(', ')}` };
+      }
+      return { parsed: filtered, parseError: null };
     }
 
-    return data;
+    return { parsed: data, parseError: null };
   }, [content, path, keys]);
 
   if (loading) {
@@ -319,8 +410,11 @@ export function ParameterTable({ path, keys }: ParameterTableProps) {
 
   if (!parsed) {
     return (
-      <div className="my-6 p-3 rounded border border-border/50 bg-card/30">
-        <p className="text-[11px] font-mono text-muted-foreground">unable to parse config</p>
+      <div className={cn("p-3 rounded border border-border/50 bg-card/30", withMargin && "my-6")}>
+        <p className="text-[11px] font-mono text-muted-foreground">
+          {label && <span className="text-foreground/60">{label}: </span>}
+          {parseError || 'unable to parse'}
+        </p>
       </div>
     );
   }
@@ -390,8 +484,13 @@ export function ParameterTable({ path, keys }: ParameterTableProps) {
   };
 
   return (
-    <div className="my-6 not-prose">
-      <div className="rounded border border-border/60 bg-card/20 p-3 overflow-hidden">
+    <div className={cn("not-prose", withMargin && "my-6")}>
+      {label && (
+        <div className="text-[11px] font-mono text-muted-foreground mb-1.5 truncate" title={label}>
+          {label}
+        </div>
+      )}
+      <div className="rounded border border-border/60 bg-card/20 p-3 overflow-hidden max-w-full">
         {topLeaves.length > 0 && (
           <div className={cn(topNested.length > 0 && "mb-4 pb-3 border-b border-border/30")}>
             <ParameterGrid entries={topLeaves} />
@@ -418,3 +517,123 @@ export function ParameterTable({ path, keys }: ParameterTableProps) {
     </div>
   );
 }
+
+/**
+ * ParameterTable component that displays YAML/JSON config files.
+ * Supports glob patterns in the path prop to show multiple files.
+ */
+export function ParameterTable({ path, keys }: ParameterTableProps) {
+  const { "*": routePath = "" } = useParams();
+
+  // Get current directory from route
+  const currentDir = routePath
+    .replace(/\/?[^/]+\.mdx$/i, "")
+    .replace(/\/$/, "")
+    || ".";
+
+  // Resolve relative paths
+  let resolvedPath = path;
+  if (path?.startsWith("./")) {
+    const relativePart = path.slice(2);
+    resolvedPath = currentDir === "." ? relativePart : `${currentDir}/${relativePart}`;
+  } else if (path && !path.startsWith("/") && !path.includes("/") && !isGlobPattern(path)) {
+    resolvedPath = currentDir === "." ? path : `${currentDir}/${path}`;
+  }
+
+  // Check if this is a glob pattern
+  const hasGlob = isGlobPattern(resolvedPath);
+
+  // For glob patterns, get the base directory (directory containing the glob pattern)
+  const baseDir = useMemo(() => {
+    if (!hasGlob) return null;
+    // Get everything before the first glob character
+    const beforeGlob = resolvedPath.split(/[*?\[]/, 1)[0];
+    // Extract directory portion (everything up to the last slash)
+    const lastSlash = beforeGlob.lastIndexOf('/');
+    if (lastSlash === -1) return ".";
+    return beforeGlob.slice(0, lastSlash) || ".";
+  }, [hasGlob, resolvedPath]);
+
+  const { directory } = useDirectory(baseDir || ".");
+
+  // Find matching files for glob patterns
+  const matchingPaths = useMemo(() => {
+    if (!hasGlob || !directory) return [];
+
+    const allFiles = collectAllConfigFiles(directory);
+    const paths = allFiles
+      .map(f => f.path)
+      .filter(p => minimatch(p, resolvedPath, { matchBase: true }));
+
+    sortPathsNumerically(paths);
+
+    // Debug logging
+    console.log('[ParameterTable]', {
+      original: path,
+      resolved: resolvedPath,
+      baseDir,
+      allConfigFiles: allFiles.map(f => f.path),
+      matched: paths
+    });
+
+    return paths;
+  }, [hasGlob, directory, resolvedPath, path, baseDir]);
+
+  // If not a glob pattern, just render the single table
+  if (!hasGlob) {
+    return <SingleParameterTable path={resolvedPath} keys={keys} />;
+  }
+
+  // Loading state for glob patterns
+  if (!directory) {
+    return (
+      <div className="my-6 p-4 rounded border border-border/50 bg-card/30">
+        <div className="flex items-center gap-2 text-muted-foreground/60">
+          <div className="w-3 h-3 border border-current border-t-transparent rounded-full animate-spin" />
+          <span className="text-[11px] font-mono">loading parameters...</span>
+        </div>
+      </div>
+    );
+  }
+
+  // No matches
+  if (matchingPaths.length === 0) {
+    return (
+      <div className="my-6 p-3 rounded border border-border/50 bg-card/30">
+        <p className="text-[11px] font-mono text-muted-foreground">
+          no files matching: {resolvedPath}
+          <br />
+          <span className="text-muted-foreground/50">(base dir: {baseDir}, original: {path})</span>
+        </p>
+      </div>
+    );
+  }
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  usePreventSwipeNavigation(scrollRef);
+
+  // Breakout width based on count
+  const count = matchingPaths.length;
+  const breakoutClass = count >= 4
+    ? 'w-[96vw] ml-[calc(-48vw+50%)]'
+    : count >= 2
+      ? 'w-[75vw] ml-[calc(-37.5vw+50%)]'
+      : '';
+
+  return (
+    <div className={`my-6 ${breakoutClass}`}>
+      <div ref={scrollRef} className="flex gap-4 overflow-x-auto overscroll-x-contain pb-2">
+        {matchingPaths.map((filePath) => (
+          <div key={filePath} className="flex-none w-[280px]">
+            <SingleParameterTable
+              path={filePath}
+              keys={keys}
+              label={filePath.split('/').pop() || filePath}
+              withMargin={false}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/post-list.tsx

@@ -1,4 +1,5 @@
 import { useParams } from "react-router-dom";
+import { minimatch } from "minimatch";
 import {
   type PostEntry,
   directoryToPostEntries,
@@ -11,6 +12,11 @@ import Loading from "./loading";
 import { PostListItem } from "./post-list-item";
 import veslxConfig from "virtual:veslx-config";
 
+interface PostListProps {
+  /** Glob patterns to filter posts by name (e.g., ["01-*", "getting-*"]) */
+  globs?: string[] | null;
+}
+
 // Helper to format name for display (e.g., "01-getting-started" → "Getting Started")
 function formatName(name: string): string {
   return name
@@ -36,7 +42,7 @@ function getLinkPath(post: PostEntry): string {
   }
 }
 
-export function PostList() {
+export function PostList({ globs = null }: PostListProps) {
   const { "*": path = "." } = useParams();
 
   const { directory, loading, error } = useDirectory(path)
@@ -72,6 +78,13 @@ export function PostList() {
   // Filter out hidden and draft posts
   posts = filterVisiblePosts(posts);
 
+  // Filter by glob patterns if provided
+  if (globs && globs.length > 0) {
+    posts = posts.filter(post =>
+      globs.some(pattern => minimatch(post.name, pattern, { matchBase: true }))
+    );
+  }
+
   if (posts.length === 0) {
     return (
       <div className="py-24 text-center">