veslx 0.1.5 → 0.1.15

package/plugin/src/client.tsx

@@ -1,53 +1,54 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { DirectoryEntry, FileEntry } from "./lib";
-
-async function parsePath(directory: DirectoryEntry, path: string): Promise<{ directory: DirectoryEntry; file: FileEntry | null }> {
-  const parts = path === "." ? [] : path.split("/").filter(Boolean);
-
-  let file = null;
-  let currentDir = directory;
-
-  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;
+import { buildDirectoryTree, navigateToPath } from "./directory-tree";
+// @ts-ignore - virtual module
+import { files, frontmatters } from "virtual:content-modules";
+
+/**
+ * Find the main content file for a directory.
+ * Supports (in order of preference):
+ * - index.mdx / index.md (modern convention)
+ * - README.mdx / README.md (traditional convention)
+ */
+export function findReadme(directory: DirectoryEntry): FileEntry | null {
+  const indexFiles = [
+    "index.mdx", "index.md",
+    "README.mdx", "Readme.mdx", "readme.mdx",
+    "README.md", "Readme.md", "readme.md",
+  ];
+
+  for (const filename of indexFiles) {
+    const found = directory.children.find((child) =>
+      child.type === "file" && child.name === filename
+    ) as FileEntry | undefined;
+    if (found) return found;
   }
 
-  return { directory: currentDir, file };
+  return null;
 }
 
-export function findReadme(directory: DirectoryEntry): FileEntry | null {
-  const readme = directory.children.find((child) => 
-    child.type === "file" && 
-    [
-      "README.md", "Readme.md", "readme.md",
-      "README.mdx", "Readme.mdx", "readme.mdx"
-    ].includes(child.name)
-  ) as FileEntry | undefined;
-
-  return readme || null;
+/**
+ * Find all MDX files in a directory (excluding index/README and slides)
+ */
+export function findMdxFiles(directory: DirectoryEntry): FileEntry[] {
+  const indexFiles = [
+    "index.mdx", "index.md",
+    "README.mdx", "Readme.mdx", "readme.mdx",
+    "README.md", "Readme.md", "readme.md",
+  ];
+  const slideFiles = [
+    "SLIDES.mdx", "Slides.mdx", "slides.mdx",
+    "SLIDES.md", "Slides.md", "slides.md",
+  ];
+  const excludeFiles = [...indexFiles, ...slideFiles];
+
+  return directory.children.filter((child): child is FileEntry =>
+    child.type === "file" &&
+    (child.name.endsWith('.mdx') || child.name.endsWith('.md')) &&
+    !excludeFiles.includes(child.name) &&
+    !child.name.endsWith('.slides.mdx') &&
+    !child.name.endsWith('.slides.md')
+  );
 }
 
 export function findSlides(directory: DirectoryEntry): FileEntry | null {
@@ -64,83 +65,30 @@ export function findSlides(directory: DirectoryEntry): FileEntry | null {
 
 
 export type DirectoryError =
-  | { type: 'config_not_found'; message: string }
-  | { type: 'path_not_found'; message: string; status: 404 }
-  | { type: 'fetch_error'; message: string }
-  | { type: 'parse_error'; message: string };
+  | { type: 'path_not_found'; message: string; status: 404 };
+
+// Build directory tree once from glob keys, with frontmatter metadata
+const directoryTree = buildDirectoryTree(Object.keys(files), frontmatters as Record<string, FileEntry['frontmatter']>);
 
 export function useDirectory(path: string = ".") {
-  const [directory, setDirectory] = useState<DirectoryEntry | null>(null);
-  const [file, setFile] = useState<FileEntry | null>(null);
-  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<DirectoryError | null>(null);
 
-  useEffect(() => {
-    setLoading(true);
-    setError(null);
-
-    (async () => {
-      try {
-        const response = await fetch(`/raw/.veslx.json`);
-
-        if (!response.ok) {
-          if (response.status === 404) {
-            setError({ type: 'config_not_found', message: '.veslx.json not found' });
-          } else {
-            setError({ type: 'fetch_error', message: `Failed to fetch: ${response.status} ${response.statusText}` });
-          }
-          return;
-        }
-
-        let json;
-        try {
-          json = await response.json();
-        } catch {
-          setError({ type: 'parse_error', message: 'Failed to parse .veslx.json' });
-          return;
-        }
-
-        let parsed: { directory: DirectoryEntry; file: FileEntry | null };
-        try {
-          parsed = await parsePath(json, path);
-        } catch {
-          setError({ type: 'path_not_found', message: `Path not found: ${path}`, status: 404 });
-          return;
-        }
-
-        parsed.directory.children.sort((a: any, b: any) => {
-          let aDate, bDate;
-          if (a.children) {
-            const readme = findReadme(a);
-            if (readme && readme.frontmatter && readme.frontmatter.date) {
-              aDate = new Date(readme.frontmatter.date as string | number | Date)
-            }
-          }
-          if (b.children) {
-            const readme = findReadme(b);
-            if (readme && readme.frontmatter && readme.frontmatter.date) {
-              bDate = new Date(readme.frontmatter.date as string | number | Date)
-            }
-          }
-          if (aDate && bDate) {
-            return bDate.getTime() - aDate.getTime()
-          }
-          return 0;
-        });
-
-        setDirectory(parsed.directory);
-        setFile(parsed.file);
-      } catch (err: any) {
-        setError({ type: 'fetch_error', message: err.message || 'Unknown error' });
-      } finally {
-        setLoading(false);
-      }
-    })();
-
-    return () => {};
+  const result = useMemo(() => {
+    try {
+      const { directory, file } = navigateToPath(directoryTree, path);
+      return { directory, file };
+    } catch {
+      setError({ type: 'path_not_found', message: `Path not found: ${path}`, status: 404 });
+      return { directory: null, file: null };
+    }
   }, [path]);
 
-  return { directory, file, loading, error };
+  return {
+    directory: result.directory,
+    file: result.file,
+    loading: false, // No async loading needed
+    error
+  };
 }
 
 export function useFileContent(path: string) {

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