veslx 0.1.14 → 0.1.15

package/plugin/src/directory-tree.ts

@@ -0,0 +1,171 @@
+import type { DirectoryEntry, FileEntry } from './lib';
+
+/**
+ * Find the common directory prefix among all paths.
+ * E.g., ["/docs/a.mdx", "/docs/b/c.mdx"] -> "/docs"
+ * Only considers directory segments, not filenames.
+ */
+function findCommonPrefix(paths: string[]): string {
+  if (paths.length === 0) return '';
+
+  // Extract directory parts only (exclude filename from each path)
+  const dirPaths = paths.map(p => {
+    const parts = p.split('/').filter(Boolean);
+    // Remove the last part (filename)
+    return parts.slice(0, -1);
+  });
+
+  if (dirPaths.length === 0 || dirPaths[0].length === 0) return '';
+
+  // Find how many directory segments are common to all paths
+  const firstDirParts = dirPaths[0];
+  let commonLength = 0;
+
+  for (let i = 0; i < firstDirParts.length; i++) {
+    const segment = firstDirParts[i];
+    const allMatch = dirPaths.every(parts => parts[i] === segment);
+    if (allMatch) {
+      commonLength = i + 1;
+    } else {
+      break;
+    }
+  }
+
+  if (commonLength > 0) {
+    return '/' + firstDirParts.slice(0, commonLength).join('/');
+  }
+  return '';
+}
+
+/**
+ * Build a directory tree from glob keys.
+ * Keys are paths like "/docs/file.mdx" (Vite-resolved from @content alias)
+ * We auto-detect and strip the common prefix (content directory).
+ * @param globKeys - Array of file paths from import.meta.glob
+ * @param frontmatters - Optional map of paths to frontmatter objects
+ */
+export function buildDirectoryTree(
+  globKeys: string[],
+  frontmatters?: Record<string, FileEntry['frontmatter']>
+): DirectoryEntry {
+  const root: DirectoryEntry = {
+    type: 'directory',
+    name: '.',
+    path: '.',
+    children: []
+  };
+
+  if (globKeys.length === 0) return root;
+
+  // Auto-detect the content directory prefix
+  // Vite resolves @content to the actual path, so keys look like "/docs/file.mdx"
+  const commonPrefix = findCommonPrefix(globKeys);
+
+  for (const key of globKeys) {
+    // Strip the common prefix to get path relative to content root
+    let relativePath = key;
+    if (commonPrefix && key.startsWith(commonPrefix)) {
+      relativePath = key.slice(commonPrefix.length);
+    }
+    // Remove leading slash if present
+    if (relativePath.startsWith('/')) {
+      relativePath = relativePath.slice(1);
+    }
+
+    // Skip hidden files and directories
+    if (relativePath.split('/').some(part => part.startsWith('.'))) {
+      continue;
+    }
+
+    const parts = relativePath.split('/').filter(Boolean);
+    if (parts.length === 0) continue;
+
+    let current = root;
+
+    // Navigate/create directories for all but the last part
+    for (let i = 0; i < parts.length - 1; i++) {
+      const dirName = parts[i];
+      let dir = current.children.find(
+        c => c.type === 'directory' && c.name === dirName
+      ) as DirectoryEntry | undefined;
+
+      if (!dir) {
+        dir = {
+          type: 'directory',
+          name: dirName,
+          path: parts.slice(0, i + 1).join('/'),
+          children: []
+        };
+        current.children.push(dir);
+      }
+      current = dir;
+    }
+
+    // Add file entry (last part)
+    const filename = parts[parts.length - 1];
+
+    // Don't add duplicates
+    const exists = current.children.some(
+      c => c.type === 'file' && c.name === filename
+    );
+    if (exists) continue;
+
+    // Look up frontmatter using the original key (before prefix stripping)
+    const frontmatter = frontmatters?.[key];
+
+    const fileEntry: FileEntry = {
+      type: 'file',
+      name: filename,
+      path: relativePath,
+      size: 0, // Size not available from glob keys
+      frontmatter
+    };
+    current.children.push(fileEntry);
+  }
+
+  return root;
+}
+
+/**
+ * Navigate to a path within the directory tree.
+ * Returns the directory and optionally a file if the path points to one.
+ */
+export function navigateToPath(
+  root: DirectoryEntry,
+  path: string
+): { directory: DirectoryEntry; file: FileEntry | null } {
+  const parts = path === '.' || path === '' ? [] : path.split('/').filter(Boolean);
+
+  let currentDir = root;
+  let file: FileEntry | null = null;
+
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    const isLastPart = i === parts.length - 1;
+
+    // Check if this part matches a file (only on last part)
+    if (isLastPart) {
+      const matchedFile = currentDir.children.find(
+        child => child.type === 'file' && child.name === part
+      ) as FileEntry | undefined;
+
+      if (matchedFile) {
+        file = matchedFile;
+        break;
+      }
+    }
+
+    // Otherwise, look for a directory
+    const nextDir = currentDir.children.find(
+      child => child.type === 'directory' && child.name === part
+    ) as DirectoryEntry | undefined;
+
+    if (!nextDir) {
+      throw new Error(`Path not found: ${path}`);
+    }
+
+    currentDir = nextDir;
+  }
+
+  return { directory: currentDir, file };
+}

package/plugin/src/lib.ts

@@ -1,8 +1,7 @@
-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'
+/**
+ * Type definitions for directory tree structure.
+ * Used by the Gallery component and useDirectory hook.
+ */
 
 export type FileEntry = {
   type: 'file';
@@ -13,6 +12,8 @@ export type FileEntry = {
     title?: string;
     description?: string;
     date?: string;
+    draft?: boolean;
+    visibility?: string;
   };
 }
 
@@ -22,247 +23,3 @@ export type DirectoryEntry = {
   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

@@ -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'