veslx 0.0.1

package/plugin/src/lib.ts

@@ -0,0 +1,268 @@
+import { readdir, writeFile, stat, readFile } from 'fs/promises';
+import { join, relative, basename, extname } from 'path';
+import matter from 'gray-matter';
+
+export const GITIGNORE_FILENAME = '.gitignore'
+
+export type FileEntry = {
+  type: 'file';
+  name: string;
+  path: string;
+  size: number;
+  frontmatter?: {
+    title?: string;
+    description?: string;
+    date?: string;
+  };
+}
+
+export type DirectoryEntry = {
+  type: 'directory';
+  name: string;
+  path: string;
+  children: (FileEntry | DirectoryEntry)[];
+}
+
+const MARKDOWN_EXTENSIONS = ['.md', '.mdx', '.markdown'];
+
+/**
+ * Check if a file is a markdown file
+ */
+function isMarkdownFile(filename: string): boolean {
+  const ext = extname(filename).toLowerCase();
+  return MARKDOWN_EXTENSIONS.includes(ext);
+}
+
+/**
+ * Parse frontmatter from a markdown file
+ * Returns undefined if no frontmatter exists or file is not markdown
+ */
+async function parseFrontmatter(filePath: string): Promise<Record<string, unknown> | undefined> {
+  try {
+    const content = await readFile(filePath, 'utf-8');
+    const { data } = matter(content);
+    // Only return frontmatter if it has content
+    if (Object.keys(data).length > 0) {
+      return data;
+    }
+    return undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Check if a path is a directory
+ */
+async function isDirectory(path: string): Promise<boolean> {
+  try {
+    const stats = await stat(path);
+    return stats.isDirectory();
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Parse .gitignore file and return array of patterns
+ */
+async function parseGitignore(gitignorePath: string): Promise<string[]> {
+  try {
+    const content = await readFile(gitignorePath, 'utf-8');
+    return content
+      .split('\n')
+      .map(line => line.trim())
+      .filter(line => line && !line.startsWith('#')); // Skip empty lines and comments
+  } catch {
+    return []; // Return empty array if .gitignore doesn't exist
+  }
+}
+
+/**
+ * Convert gitignore pattern to regex-like matching function
+ * Supports:
+ * - *.ext (any file ending with .ext)
+ * - dir/ (directory anywhere in tree)
+ * - dir/** (directory and all contents)
+ * - **\/pattern (pattern anywhere)
+ */
+function createGitignoreMatcher(patterns: string[]): (relativePath: string, isDir: boolean) => boolean {
+  return (relativePath: string, isDir: boolean) => {
+    const pathParts = relativePath.split('/');
+    const filename = basename(relativePath);
+
+    for (const pattern of patterns) {
+      // Handle directory patterns (ending with /)
+      if (pattern.endsWith('/')) {
+        const dirPattern = pattern.slice(0, -1);
+        if (isDir) {
+          // Match if any part of the path matches the directory name
+          if (pathParts.includes(dirPattern) || relativePath === dirPattern || relativePath.startsWith(dirPattern + '/')) {
+            return true;
+          }
+        }
+        continue;
+      }
+
+      // Handle ** patterns
+      if (pattern.includes('**')) {
+        const regexPattern = pattern
+          .replace(/\./g, '\\.')
+          .replace(/\*\*/g, '.*')
+          .replace(/\*/g, '[^/]*');
+        const regex = new RegExp(`^${regexPattern}$`);
+        if (regex.test(relativePath)) {
+          return true;
+        }
+        continue;
+      }
+
+      // Handle simple wildcard patterns (*.ext)
+      if (pattern.includes('*')) {
+        const regexPattern = pattern
+          .replace(/\./g, '\\.')
+          .replace(/\*/g, '[^/]*');
+        const regex = new RegExp(`^${regexPattern}$`);
+
+        // Check if the pattern matches the full path or just the filename
+        if (regex.test(relativePath) || regex.test(filename)) {
+          return true;
+        }
+        continue;
+      }
+
+      // Exact match - check both full path and filename
+      if (relativePath === pattern || filename === pattern) {
+        return true;
+      }
+
+      // Prefix match for directories
+      if (relativePath.startsWith(pattern + '/')) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+}
+
+/**
+ * Recursively scan directory and build flat index
+ */
+async function scanDirectory(
+  dirPath: string,
+  rootPath: string,
+  shouldIgnore: (relativePath: string, isDir: boolean) => boolean,
+  depth: number = 0
+): Promise<DirectoryEntry> {
+  const entries = await readdir(dirPath);
+  const children: (FileEntry | DirectoryEntry)[] = [];
+
+  for (const entry of entries) {
+    // Skip hidden files and the index file itself
+    if (entry.startsWith('.')) {
+      continue;
+    }
+
+    const fullPath = join(dirPath, entry);
+    const relativePath = relative(rootPath, fullPath);
+    const isDir = await isDirectory(fullPath);
+
+    // Check if this path should be ignored
+    if (shouldIgnore(relativePath, isDir)) {
+      continue;
+    }
+
+    if (isDir) {
+      // Recursively scan subdirectories
+      const subDir = await scanDirectory(fullPath, rootPath, shouldIgnore, depth + 1);
+      children.push(subDir);
+    } else {
+      // Add file entry
+      const stats = await stat(fullPath);
+      const fileEntry: FileEntry = {
+        type: 'file',
+        name: entry,
+        path: relativePath,
+        size: stats.size,
+      };
+
+      // Parse frontmatter for markdown files
+      if (isMarkdownFile(entry)) {
+        const frontmatter = await parseFrontmatter(fullPath);
+        if (frontmatter) {
+          fileEntry.frontmatter = frontmatter;
+        }
+      }
+
+      children.push(fileEntry);
+    }
+  }
+
+  return {
+    type: 'directory',
+    name: basename(dirPath),
+    path: relative(rootPath, dirPath) || '.',
+    children,
+  };
+}
+
+/**
+ * Build content for a single target
+ */
+async function buildTarget(target: string): Promise<void> {
+  console.log(`${'-'.repeat(80)}`);
+  console.log(`Building: ${target}`);
+  console.log(`${'-'.repeat(80)}`);
+
+  const gitignorePath = join(target, GITIGNORE_FILENAME);
+  const ignorePatterns = await parseGitignore(gitignorePath);
+  const shouldIgnore = createGitignoreMatcher(ignorePatterns);
+
+  if (ignorePatterns.length > 0) {
+    console.log(`   Found .gitignore with ${ignorePatterns.length} pattern${ignorePatterns.length !== 1 ? 's' : ''}`);
+  } else {
+    console.log(`   No .gitignore found or empty\n`);
+  }
+
+  const index = await scanDirectory(target, target, shouldIgnore);
+
+  // Count files and directories
+  function countEntries(entry: DirectoryEntry): { files: number; dirs: number } {
+    let files = 0;
+    let dirs = 0;
+
+    for (const child of entry.children) {
+      if (child.type === 'file') {
+        files++;
+      } else {
+        dirs++;
+        const counts = countEntries(child);
+        files += counts.files;
+        dirs += counts.dirs;
+      }
+    }
+
+    return { files, dirs };
+  }
+
+  const counts = countEntries(index);
+  console.log(`   Found ${counts.dirs} directories and ${counts.files} files`);
+
+  // Write output
+  const outputFile = join(target, '.veslx.json');
+  await writeFile(outputFile, JSON.stringify(index, null, 2));
+
+  console.log(`   Generated ${outputFile}`);
+}
+
+/**
+ * Build content for all configured targets
+ */
+async function buildAll(targets: string[]): Promise<void> {
+  for (const target of targets) {
+    await buildTarget(target);
+  }
+}
+
+export { buildAll };

package/plugin/src/plugin.ts

@@ -0,0 +1,109 @@
+import { type Plugin, type Connect } from 'vite'
+import path from 'path'
+import fs from 'fs'
+import { buildAll } from './lib'
+import chokidar from 'chokidar'
+import type { IncomingMessage, ServerResponse } from 'http'
+
+export default function contentPlugin(dir: string): Plugin {
+  
+  if (!dir) {
+    throw new Error('Content directory must be specified.')
+  }
+
+  const buildFn = () => buildAll([dir])
+
+  let watchers: chokidar.FSWatcher[] = []
+
+  // Server middleware for serving content files
+  const urlToDir = new Map<string, string>()
+
+  urlToDir.set('/raw', dir)
+
+  const middleware: Connect.NextHandleFunction = (req: IncomingMessage, res: ServerResponse, next: Connect.NextFunction) => {
+    // Check if URL matches any registered content directory
+    for (const [urlBase, contentDir] of urlToDir.entries()) {
+      if (req.url?.startsWith(urlBase + '/')) {
+        const relativePath = req.url.slice(urlBase.length + 1)
+        const filePath = path.join(contentDir, relativePath)
+
+        if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
+          res.setHeader('Access-Control-Allow-Origin', '*')
+          const ext = path.extname(filePath).toLowerCase()
+
+          // Set appropriate content types
+          const contentTypes: Record<string, string> = {
+            '.png': 'image/png',
+            '.jpg': 'image/jpeg',
+            '.jpeg': 'image/jpeg',
+            '.gif': 'image/gif',
+            '.svg': 'image/svg+xml',
+            '.json': 'application/json',
+            '.md': 'text/markdown',
+            '.yaml': 'text/yaml',
+            '.yml': 'text/yaml',
+            '.npz': 'application/octet-stream',
+          }
+
+          if (contentTypes[ext]) {
+            res.setHeader('Content-Type', contentTypes[ext])
+          }
+
+          return fs.createReadStream(filePath).pipe(res)
+        }
+      }
+    }
+    next()
+  }
+
+  return {
+    name: 'content',
+    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 = []
+    },
+  }
+}

package/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

package/src/App.tsx

@@ -0,0 +1,21 @@
+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"
+
+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 />} />
+          </Routes>
+      </BrowserRouter>
+    </ThemeProvider>
+  )
+}
+
+export default App

package/src/components/front-matter.tsx

@@ -0,0 +1,53 @@
+import { formatDate } from "@/lib/format-date"
+import { Presentation } from "lucide-react"
+import { FileEntry } from "plugin/src/lib"
+import { Link } from "react-router-dom"
+
+export function FrontMatter({
+  title,
+  date,
+  description,
+  slides,
+}: {
+  title?: string
+  date?: string
+  description?: string
+  slides?: FileEntry | null
+}){
+
+  return (
+    <div>
+      {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}
+          </h1>
+
+          {/* Meta line */}
+          <div className="flex flex-wrap items-center gap-3 text-muted-foreground">
+            {date && (
+              <time className="font-mono text-xs bg-muted px-2 py-0.5 rounded">
+                {formatDate(new Date(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 && (
+            <div className="flex flex-wrap text-sm items-center gap-3 text-muted-foreground">
+              {description}
+            </div>
+          )}
+        </header>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,15 @@
+import { renderMathInText } from "../lib/render-math-in-text";
+
+export function FigureCaption({ caption, label }: { caption?: string; label?: string }) {
+  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>
+  );
+}

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

@@ -0,0 +1,20 @@
+import { renderMathInText } from "../lib/render-math-in-text";
+
+export function FigureHeader({ title, subtitle }: { title?: string; subtitle?: string }) {
+  if (!title && !subtitle) return null;
+
+  return (
+    <div className="mx-auto max-w-md">
+      {title && (
+        <h3 className="text-sm md:text-base font-medium tracking-tight text-foreground text-left">
+          {renderMathInText(title)}
+        </h3>
+      )}
+      {subtitle && (
+        <p className="text-sm text-muted-foreground leading-relaxed text-left mt-1">
+          {renderMathInText(subtitle)}
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,106 @@
+import { createPortal } from "react-dom";
+import { X, ChevronLeft, ChevronRight } from "lucide-react";
+import { FULLSCREEN_DATA_ATTR } from "@/lib/constants";
+
+export interface LightboxImage {
+  src: string;
+  label: string;
+}
+
+export interface LightboxProps {
+  images: LightboxImage[];
+  selectedIndex: number;
+  onClose: () => void;
+  onPrevious: () => void;
+  onNext: () => void;
+  showNavigation?: boolean;
+}
+
+/**
+ * Fullscreen lightbox component for viewing images
+ */
+export function Lightbox({
+  images,
+  selectedIndex,
+  onClose,
+  onPrevious,
+  onNext,
+  showNavigation = true,
+}: LightboxProps) {
+  const current = images[selectedIndex];
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[9999] bg-background"
+      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"
+        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>
+        <button
+          onClick={onClose}
+          className="p-2 text-muted-foreground hover:text-foreground transition-colors"
+          aria-label="Close"
+        >
+          <X className="h-5 w-5" />
+        </button>
+      </div>
+
+      {/* Navigation: Previous */}
+      {showNavigation && selectedIndex > 0 && (
+        <button
+          onClick={(e) => {
+            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"
+          aria-label="Previous image"
+        >
+          <ChevronLeft className="h-8 w-8" />
+        </button>
+      )}
+
+      {/* Navigation: Next */}
+      {showNavigation && selectedIndex < images.length - 1 && (
+        <button
+          onClick={(e) => {
+            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"
+          aria-label="Next image"
+        >
+          <ChevronRight className="h-8 w-8" />
+        </button>
+      )}
+
+      {/* Main image */}
+      <div className="fixed inset-0 flex items-center justify-center p-16">
+        <img
+          src={current.src}
+          alt={current.label}
+          className="max-w-full max-h-full object-contain"
+          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"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <span className="font-mono text-xs text-muted-foreground">
+          {current.label}
+        </span>
+      </div>
+    </div>,
+    document.body
+  );
+}

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

@@ -0,0 +1,48 @@
+import { useState, ImgHTMLAttributes } from "react";
+import { Image } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function LoadingImage({
+  className,
+  wrapperClassName,
+  ...props
+}: ImgHTMLAttributes<HTMLImageElement> & { wrapperClassName?: string }) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  return (
+    <div className={cn("relative", 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>
+      )}
+      {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>
+        </div>
+      )}
+      <img
+        {...props}
+        className={cn(
+          className,
+          "transition-opacity duration-500 ease-out-expo",
+          isLoading && "opacity-0",
+          hasError && "opacity-0"
+        )}
+        onLoad={(e) => {
+          setIsLoading(false);
+          props.onLoad?.(e);
+        }}
+        onError={(e) => {
+          setIsLoading(false);
+          setHasError(true);
+          props.onError?.(e);
+        }}
+      />
+    </div>
+  );
+}