veslx 0.1.5 → 0.1.15

package/plugin/src/plugin.ts

@@ -1,13 +1,57 @@
 import { type Plugin, type Connect } from 'vite'
 import path from 'path'
 import fs from 'fs'
-import { buildAll } from './lib'
-import chokidar, { type FSWatcher } from 'chokidar'
 import type { IncomingMessage, ServerResponse } from 'http'
+import { type VeslxConfig, type ResolvedSiteConfig, DEFAULT_SITE_CONFIG } from './types'
+import matter from 'gray-matter'
+
+/**
+ * Extract frontmatter from all MDX files in a directory
+ */
+function extractFrontmatters(dir: string): Record<string, { title?: string; description?: string; date?: string }> {
+  const frontmatters: Record<string, { title?: string; description?: string; date?: string }> = {};
+
+  function scanDir(currentDir: string, relativePath: string = '') {
+    if (!fs.existsSync(currentDir)) return;
+
+    const entries = fs.readdirSync(currentDir, { withFileTypes: true });
+    for (const entry of entries) {
+      const fullPath = path.join(currentDir, entry.name);
+      const relPath = relativePath ? `${relativePath}/${entry.name}` : entry.name;
+
+      if (entry.isDirectory()) {
+        // Skip hidden directories and node_modules
+        if (!entry.name.startsWith('.') && entry.name !== 'node_modules') {
+          scanDir(fullPath, relPath);
+        }
+      } else if (entry.name.endsWith('.mdx') || entry.name.endsWith('.md')) {
+        try {
+          const content = fs.readFileSync(fullPath, 'utf-8');
+          const { data } = matter(content);
+          // Use @content prefix to match glob keys
+          const key = `@content/${relPath}`;
+          frontmatters[key] = {
+            title: data.title,
+            description: data.description,
+            date: data.date instanceof Date ? data.date.toISOString() : data.date,
+          };
+        } catch {
+          // Skip files that can't be parsed
+        }
+      }
+    }
+  }
+
+  scanDir(dir);
+  return frontmatters;
+}
 
 const VIRTUAL_MODULE_ID = 'virtual:content-modules'
 const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID
 
+const VIRTUAL_CONFIG_ID = 'virtual:veslx-config'
+const RESOLVED_VIRTUAL_CONFIG_ID = '\0' + VIRTUAL_CONFIG_ID
+
 /**
  * Recursively copy a directory
  */
@@ -27,7 +71,7 @@ function copyDirSync(src: string, dest: string) {
   }
 }
 
-export default function contentPlugin(contentDir: string): Plugin {
+export default function contentPlugin(contentDir: string, config?: VeslxConfig): Plugin {
 
   if (!contentDir) {
     throw new Error('Content directory must be specified.')
@@ -39,9 +83,11 @@ export default function contentPlugin(contentDir: string): Plugin {
 
   const dir = contentDir
 
-  const buildFn = () => buildAll([dir])
-
-  let watchers: FSWatcher[] = []
+  // Resolve site config with defaults
+  const siteConfig: ResolvedSiteConfig = {
+    ...DEFAULT_SITE_CONFIG,
+    ...config?.site,
+  }
 
   // Server middleware for serving content files
   const urlToDir = new Map<string, string>()
@@ -101,76 +147,73 @@ export default function contentPlugin(contentDir: string): Plugin {
           },
         },
         optimizeDeps: {
-          exclude: ['virtual:content-modules'],
+          exclude: ['virtual:content-modules', 'virtual:veslx-config'],
         },
       }
     },
 
-    // Virtual module for content MDX imports
+    // Virtual modules for content MDX imports and site config
     resolveId(id) {
       if (id === VIRTUAL_MODULE_ID) {
         return RESOLVED_VIRTUAL_MODULE_ID
       }
+      if (id === VIRTUAL_CONFIG_ID) {
+        return RESOLVED_VIRTUAL_CONFIG_ID
+      }
     },
 
     load(id) {
       if (id === RESOLVED_VIRTUAL_MODULE_ID) {
+        // Extract frontmatter from MDX files at build time (avoids MDX hook issues)
+        const frontmatterData = extractFrontmatters(dir);
+
         // Generate virtual module with import.meta.glob for MDX files
         return `
-export const modules = import.meta.glob('@content/**/README.mdx');
-export const slides = import.meta.glob('@content/**/SLIDES.mdx');
-export const index = import.meta.glob('@content/.veslx.json', { eager: true });
+export const posts = import.meta.glob('@content/**/*.mdx', {
+  import: 'default',
+  query: { skipSlides: true }
+});
+export const allMdx = import.meta.glob('@content/**/*.mdx');
+export const slides = import.meta.glob(['@content/**/SLIDES.mdx', '@content/**/*.slides.mdx']);
+
+// All files for directory tree building (web-compatible files only)
+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',
+], { eager: false });
+
+// 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');
 `
       }
+      if (id === RESOLVED_VIRTUAL_CONFIG_ID) {
+        // Generate virtual module with site config
+        return `export default ${JSON.stringify(siteConfig)};`
+      }
     },
 
-    async buildStart() {
-      await buildFn()
-    },
     configureServer(server) {
       // Add middleware for serving content files
       server.middlewares.use(middleware)
-
-      // Watch all content directories and rebuild on changes
-      watchers = [dir].map(dir => {
-        const watcher = chokidar.watch(dir, {
-          ignored: (path: string) => path.endsWith('.veslx.json'),
-          persistent: true,
-        })
-
-        watcher.on('change', async () => {
-          const runningFilePath = path.join(dir, '.running')
-          if (!fs.existsSync(runningFilePath)) {
-            await buildFn()
-            server.ws.send({
-              type: 'full-reload',
-              path: '*',
-            })
-          }
-        })
-        
-        watcher.on('unlink', async (filePath) => {
-          if (path.basename(filePath) === '.running') {
-            await buildFn()
-            server.ws.send({
-              type: 'full-reload',
-              path: '*',
-            })
-          }
-        })
-
-        return watcher
-      })
-
     },
     configurePreviewServer(server) {
       // Add middleware for preview server too
       server.middlewares.use(middleware)
     },
-    async buildEnd() {
-      await Promise.all(watchers.map(w => w.close()))
-      watchers = []
-    },
     writeBundle(options) {
       // Copy content directory to dist/raw during production build
       const outDir = options.dir || 'dist'

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