veslx 0.1.27 → 0.1.28

package/src/components/post-list.tsx

@@ -1,37 +1,63 @@
-import { Link } from "react-router-dom";
-import { cn } from "@/lib/utils";
-import type { DirectoryEntry } from "../../plugin/src/lib";
-import { formatDate } from "@/lib/format-date";
-import { ArrowRight, Presentation } from "lucide-react";
+import { useParams } from "react-router-dom";
 import {
-  type ContentView,
   type PostEntry,
   directoryToPostEntries,
   filterVisiblePosts,
-  filterByView,
   getFrontmatter,
 } from "@/lib/content-classification";
+import { useDirectory } from "../../plugin/src/client";
+import { ErrorDisplay } from "./page-error";
+import Loading from "./loading";
+import { PostListItem } from "./post-list-item";
 
-// Helper to extract numeric prefix from filename (e.g., "01-intro" → 1)
-function extractOrder(name: string): number | null {
-  const match = name.match(/^(\d+)-/);
-  return match ? parseInt(match[1], 10) : null;
-}
-
-// Helper to strip numeric prefix for display (e.g., "01-getting-started" → "Getting Started")
-function stripNumericPrefix(name: string): string {
+// Helper to format name for display (e.g., "01-getting-started" → "Getting Started")
+function formatName(name: string): string {
   return name
     .replace(/^\d+-/, '')
     .replace(/-/g, ' ')
     .replace(/\b\w/g, c => c.toUpperCase());
 }
 
-interface PostListProps {
-  directory: DirectoryEntry;
-  view?: ContentView;
+// Helper to get link path from post
+function getLinkPath(post: PostEntry): string {
+  if (post.file) {
+    // Standalone MDX file
+    return `/${post.file.path}`;
+  } else if (post.slides && !post.readme) {
+    // Folder with only slides
+    return `/${post.slides.path}`;
+  } else if (post.readme) {
+    // Folder with readme
+    return `/${post.readme.path}`;
+  } else {
+    // Fallback to folder path
+    return `/${post.path}`;
+  }
 }
 
-export default function PostList({ directory, view = 'all' }: PostListProps) {
+export function PostList() {
+  const { "*": path = "." } = useParams();
+
+  const { directory, loading, error } = useDirectory(path)
+
+  if (error) {
+    return <ErrorDisplay error={error} path={path} />;
+  }
+
+  if (loading) {
+    return (
+      <Loading />
+    )
+  }
+
+  if (!directory) {
+    return (
+      <div className="py-24 text-center">
+        <p className="text-muted-foreground font-mono text-sm tracking-wide">no entries</p>
+      </div>
+    );
+  }
+
   let posts = directoryToPostEntries(directory);
 
   if (posts.length === 0) {
@@ -45,9 +71,6 @@ export default function PostList({ directory, view = 'all' }: PostListProps) {
   // Filter out hidden and draft posts
   posts = filterVisiblePosts(posts);
 
-  // Apply view filter
-  posts = filterByView(posts, view);
-
   if (posts.length === 0) {
     return (
       <div className="py-24 text-center">
@@ -56,108 +79,28 @@ export default function PostList({ directory, view = 'all' }: PostListProps) {
     );
   }
 
-  // Helper to get date from post
-  const getPostDate = (post: PostEntry): Date | null => {
-    const frontmatter = getFrontmatter(post);
-    return frontmatter?.date ? new Date(frontmatter.date as string) : null;
-  };
-
-  // Smart sorting: numeric prefix → date → alphabetical
-  posts = posts.sort((a, b) => {
-    const aOrder = extractOrder(a.name);
-    const bOrder = extractOrder(b.name);
-    const aDate = getPostDate(a);
-    const bDate = getPostDate(b);
-
-    // Both have numeric prefix → sort by number
-    if (aOrder !== null && bOrder !== null) {
-      return aOrder - bOrder;
-    }
-    // One has prefix, one doesn't → prefixed comes first
-    if (aOrder !== null) return -1;
-    if (bOrder !== null) return 1;
-
-    // Both have dates → sort by date (newest first)
-    if (aDate && bDate) {
-      return bDate.getTime() - aDate.getTime();
-    }
-    // One has date → dated comes first
-    if (aDate) return -1;
-    if (bDate) return 1;
-
-    // Neither → alphabetical by title
-    const aTitle = (getFrontmatter(a)?.title as string) || a.name;
-    const bTitle = (getFrontmatter(b)?.title as string) || b.name;
-    return aTitle.localeCompare(bTitle);
-  });
+  // Alphanumeric sorting by name
+  posts = posts.sort((a, b) => a.name.localeCompare(b.name));
 
   return (
-    <div className="space-y-1">
+    <div className="space-y-1 not-prose">
       {posts.map((post) => {
         const frontmatter = getFrontmatter(post);
-
-        // Title: explicit frontmatter > stripped numeric prefix > raw name
-        const title = (frontmatter?.title as string) || stripNumericPrefix(post.name);
+        const title = (frontmatter?.title as string) || formatName(post.name);
         const description = frontmatter?.description as string | undefined;
-        const date = frontmatter?.date ? new Date(frontmatter.date as string) : null;
-
-        // Determine the link path
-        let linkPath: string;
-        if (post.file) {
-          // Standalone MDX file
-          linkPath = `/${post.file.path}`;
-        } else if (post.slides && !post.readme) {
-          // Folder with only slides
-          linkPath = `/${post.slides.path}`;
-        } else if (post.readme) {
-          // Folder with readme
-          linkPath = `/${post.readme.path}`;
-        } else {
-          // Fallback to folder path
-          linkPath = `/${post.path}`;
-        }
-
+        const date = frontmatter?.date ? new Date(frontmatter.date as string) : undefined;
+        const linkPath = getLinkPath(post);
         const isSlides = linkPath.endsWith('SLIDES.mdx') || linkPath.endsWith('.slides.mdx');
 
         return (
-          <Link
+          <PostListItem
             key={post.path}
-            to={linkPath}
-            className={cn(
-              "group block py-3 px-3 -mx-3 rounded-md",
-              "transition-colors duration-150",
-            )}
-          >
-            <article className="flex items-center gap-4">
-              {/* Main content */}
-              <div className="flex-1 min-w-0">
-                <h3 className={cn(
-                  "text-sm font-medium text-foreground",
-                  "group-hover:underline",
-                  "flex items-center gap-2"
-                )}>
-                  <span>{title}</span>
-                  <ArrowRight className="h-3 w-3 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200 text-primary" />
-                </h3>
-
-                {description && (
-                  <p className="text-sm text-muted-foreground line-clamp-1 mt-0.5">
-                    {description}
-                  </p>
-                )}
-              </div>
-
-              {isSlides && (
-                <Presentation className="h-3 w-3 text-muted-foreground" />
-              )}
-              <time
-                dateTime={date?.toISOString()}
-                className="font-mono text-xs text-muted-foreground tabular-nums w-20 flex-shrink-0"
-              >
-                {date && formatDate(date)}
-              </time>
-            </article>
-          </Link>
+            title={title}
+            description={description}
+            date={date}
+            linkPath={linkPath}
+            isSlides={isSlides}
+          />
         );
       })}
     </div>

package/src/components/welcome.tsx

@@ -1,7 +1,7 @@
-import siteConfig from "virtual:veslx-config";
+import veslxConfig from "virtual:veslx-config";
 
 export function Welcome() {
-  const config = siteConfig;
+  const config = veslxConfig.site;
 
   return (
     <div className="text-muted-foreground">

package/src/hooks/use-mdx-content.ts

@@ -17,9 +17,9 @@ type ModuleLoader = () => Promise<MDXModule>
 type ModuleMap = Record<string, ModuleLoader>
 
 /**
- * Find MDX module by path. Supports:
- * - Full path: "docs/intro.mdx" -> matches exactly
- * - Folder path: "docs" -> matches "docs/index.mdx", "docs/README.mdx", or "docs.mdx"
+ * Find MDX/MD module by path. Supports:
+ * - Full path: "docs/intro.mdx" or "docs/intro.md" -> matches exactly
+ * - Folder path: "docs" -> matches "docs/index.mdx", "docs/README.mdx", or "docs.mdx" (and .md variants)
  */
 function findMdxModule(modules: ModuleMap, path: string): ModuleLoader | null {
   const keys = Object.keys(modules)
@@ -27,8 +27,8 @@ function findMdxModule(modules: ModuleMap, path: string): ModuleLoader | null {
   // Normalize path - remove leading slash if present
   const normalizedPath = path.replace(/^\//, '')
 
-  // If path already ends with .mdx, match exactly
-  if (normalizedPath.endsWith('.mdx')) {
+  // If path already ends with .mdx or .md, match exactly
+  if (normalizedPath.endsWith('.mdx') || normalizedPath.endsWith('.md')) {
     // Try multiple matching strategies for different Vite glob formats
     const matchingKey = keys.find(key => {
       // Strategy 1: Key ends with /path (e.g., @content/docs/foo.mdx matches docs/foo.mdx)
@@ -50,10 +50,14 @@ function findMdxModule(modules: ModuleMap, path: string): ModuleLoader | null {
   // 1. folder/index.mdx (modern convention)
   // 2. folder/README.mdx (current convention)
   // 3. folder.mdx (file alongside folders)
+  // Also try .md variants
   const candidates = [
     `${normalizedPath}/index.mdx`,
+    `${normalizedPath}/index.md`,
     `${normalizedPath}/README.mdx`,
+    `${normalizedPath}/README.md`,
     `${normalizedPath}.mdx`,
+    `${normalizedPath}.md`,
   ]
 
   for (const candidate of candidates) {
@@ -126,8 +130,8 @@ function findSlidesModule(modules: ModuleMap, path: string): ModuleLoader | null
   // Normalize path - remove leading slash if present
   const normalizedPath = path.replace(/^\//, '')
 
-  // If path already ends with .mdx, match exactly
-  if (normalizedPath.endsWith('.mdx')) {
+  // If path already ends with .mdx or .md, match exactly
+  if (normalizedPath.endsWith('.mdx') || normalizedPath.endsWith('.md')) {
     // Try multiple matching strategies for different Vite glob formats
     const matchingKey = keys.find(key => {
       // Strategy 1: Key ends with /path (e.g., @content/docs/foo.slides.mdx matches docs/foo.slides.mdx)
@@ -148,9 +152,12 @@ function findSlidesModule(modules: ModuleMap, path: string): ModuleLoader | null
   // Otherwise, try folder conventions:
   // 1. folder/SLIDES.mdx (current convention)
   // 2. folder/index.slides.mdx (alternative)
+  // Also try .md variants
   const candidates = [
     `${normalizedPath}/SLIDES.mdx`,
+    `${normalizedPath}/SLIDES.md`,
     `${normalizedPath}/index.slides.mdx`,
+    `${normalizedPath}/index.slides.md`,
   ]
 
   for (const candidate of candidates) {
@@ -213,3 +220,85 @@ export function useMDXSlides(path: string) {
 
   return { Content, frontmatter, slideCount, loading, error }
 }
+
+/**
+ * Find only index.mdx or index.md in a directory (not README or other conventions)
+ */
+function findIndexModule(modules: ModuleMap, path: string): ModuleLoader | null {
+  const keys = Object.keys(modules)
+
+  // Normalize path - remove leading slash, handle root
+  const normalizedPath = path.replace(/^\//, '') || '.'
+
+  // Only look for index.mdx or index.md
+  const candidates = normalizedPath === '.'
+    ? ['index.mdx', 'index.md']
+    : [`${normalizedPath}/index.mdx`, `${normalizedPath}/index.md`]
+
+  for (const candidate of candidates) {
+    const matchingKey = keys.find(key => {
+      if (key.endsWith(`/${candidate}`)) return true
+      if (key === `@content/${candidate}`) return true
+      if (key === candidate) return true
+      return false
+    })
+    if (matchingKey) {
+      return modules[matchingKey]
+    }
+  }
+
+  return null
+}
+
+/**
+ * Hook for loading index.mdx/index.md content only.
+ * Returns notFound: true if no index file exists (instead of throwing an error).
+ */
+export function useIndexContent(path: string) {
+  const [Content, setContent] = useState<MDXModule['default'] | null>(null)
+  const [frontmatter, setFrontmatter] = useState<MDXModule['frontmatter']>(undefined)
+  const [loading, setLoading] = useState(true)
+  const [notFound, setNotFound] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    setNotFound(false)
+
+    import('virtual:content-modules')
+      .then(({ modules }) => {
+        const loader = findIndexModule(modules as ModuleMap, path)
+
+        if (!loader) {
+          // No index file - this is not an error, just means fallback to directory listing
+          if (!cancelled) {
+            setNotFound(true)
+            setLoading(false)
+          }
+          return null
+        }
+
+        return loader()
+      })
+      .then((mod) => {
+        if (mod && !cancelled) {
+          setContent(() => mod.default)
+          setFrontmatter(mod.frontmatter)
+          setLoading(false)
+        }
+      })
+      .catch(() => {
+        // Treat load errors as not found
+        if (!cancelled) {
+          setNotFound(true)
+          setLoading(false)
+        }
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [path])
+
+  return { Content, frontmatter, loading, notFound }
+}

package/src/index.css

@@ -292,6 +292,18 @@
   animation: shimmer 1.5s ease-in-out infinite;
 }
 
+/* Scroll snap for slides - enabled by default, configurable via veslx.config */
+.slides-scroll-snap {
+  scroll-snap-type: y mandatory;
+  overflow-y: auto;
+  height: 100vh;
+}
+
+.slides-scroll-snap .slide-section {
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+
 /* Print styles - slides landscape, posts portrait */
 @media print {
   /* Default page is portrait for posts */

package/src/lib/content-classification.ts

@@ -1,4 +1,3 @@
-import type { ContentView } from "../../plugin/src/types";
 import type { DirectoryEntry, FileEntry } from "../../plugin/src/lib";
 import { findReadme, findSlides, findMdxFiles, findStandaloneSlides } from "../../plugin/src/client";
 
@@ -15,27 +14,6 @@ export function getFrontmatter(post: PostEntry) {
   return post.readme?.frontmatter || post.file?.frontmatter || post.slides?.frontmatter;
 }
 
-export function hasDate(post: PostEntry): boolean {
-  const frontmatter = getFrontmatter(post);
-  return frontmatter?.date !== undefined && frontmatter.date !== null && frontmatter.date !== '';
-}
-
-export function filterByView(posts: PostEntry[], view: ContentView): PostEntry[] {
-  if (view === 'all') return posts;
-  if (view === 'posts') return posts.filter(hasDate);
-  if (view === 'docs') return posts.filter(post => !hasDate(post));
-  return posts;
-}
-
-export function getViewCounts(posts: PostEntry[]): { posts: number; docs: number; all: number } {
-  const dated = posts.filter(hasDate).length;
-  return {
-    posts: dated,
-    docs: posts.length - dated,
-    all: posts.length,
-  };
-}
-
 export function directoryToPostEntries(directory: DirectoryEntry): PostEntry[] {
   const folders = directory.children.filter((c): c is DirectoryEntry => c.type === "directory");
   const standaloneFiles = findMdxFiles(directory);
@@ -80,5 +58,3 @@ export function filterVisiblePosts(posts: PostEntry[]): PostEntry[] {
     return frontmatter?.visibility !== "hidden" && frontmatter?.draft !== true;
   });
 }
-
-export type { ContentView };

package/src/pages/content-router.tsx

@@ -2,29 +2,18 @@ import { useParams } from "react-router-dom"
 import { Home } from "./home"
 import { Post } from "./post"
 import { SlidesPage } from "./slides"
+import { IndexPost } from "./index-post"
 
 /**
  * Routes to the appropriate page based on the URL path:
- * - /posts → Home with posts view
- * - /docs → Home with docs view
  * - *.slides.mdx or *SLIDES.mdx → SlidesPage
- * - *.mdx → Post
+ * - *.mdx or *.md → Post
+ * - directory with index.mdx/index.md → IndexPost (renders index file)
  * - everything else → Home (directory listing)
  */
 export function ContentRouter() {
   const { "*": path = "" } = useParams()
 
-  // Check for content view routes
-  if (path === 'posts') {
-    return <Home view="posts" />
-  }
-  if (path === 'docs') {
-    return <Home view="docs" />
-  }
-  if (path === 'all') {
-    return <Home view="all" />
-  }
-
   // Check if this is a slides file
   const filename = path.split('/').pop()?.toLowerCase() || ''
   const isSlides =
@@ -36,11 +25,11 @@ export function ContentRouter() {
     return <SlidesPage />
   }
 
-  // Check if this is any MDX file
+  // Check if this is any MDX/MD file
   if (path.endsWith('.mdx') || path.endsWith('.md')) {
     return <Post />
   }
 
-  // Otherwise show directory listing
-  return <Home />
+  // For directories, try to render index.mdx/index.md, fallback to Home
+  return <IndexPost fallback={<Home />} />
 }

package/src/pages/home.tsx

@@ -1,56 +1,16 @@
 import { useParams } from "react-router-dom"
-import { useDirectory } from "../../plugin/src/client";
-import Loading from "@/components/loading";
-import PostList from "@/components/post-list";
-import { ErrorDisplay } from "@/components/page-error";
-import { RunningBar } from "@/components/running-bar";
+import { PostList } from "@/components/post-list";
 import { Header } from "@/components/header";
-import { ContentTabs } from "@/components/content-tabs";
-import {
-  type ContentView,
-  directoryToPostEntries,
-  filterVisiblePosts,
-  getViewCounts,
-} from "@/lib/content-classification";
-import siteConfig from "virtual:veslx-config";
+import veslxConfig from "virtual:veslx-config";
 
-interface HomeProps {
-  view?: ContentView;
-}
-
-export function Home({ view }: HomeProps) {
+export function Home() {
   const { "*": path = "." } = useParams();
-  const config = siteConfig;
-
-  // Normalize path - "posts", "docs", and "all" are view routes, not directories
-  const isViewRoute = path === "posts" || path === "docs" || path === "all";
-  const directoryPath = isViewRoute ? "." : path;
-
-  const { directory, loading, error } = useDirectory(directoryPath)
-
-  // Use prop view, fallback to config default
-  const activeView = view ?? config.defaultView;
+  const config = veslxConfig.site;
 
-  const isRoot = path === "." || path === "" || isViewRoute;
-
-  // Calculate counts for tabs (only meaningful on root)
-  const counts = directory
-    ? getViewCounts(filterVisiblePosts(directoryToPostEntries(directory)))
-    : { posts: 0, docs: 0, all: 0 };
-
-  if (error) {
-    return <ErrorDisplay error={error} path={path} />;
-  }
-
-  if (loading) {
-    return (
-      <Loading />
-    )
-  }
+  const isRoot = path === "." || path === "";
 
   return (
     <div className="flex min-h-screen flex-col bg-background noise-overlay">
-      <RunningBar />
       <Header />
       <main className="flex-1 mx-auto w-full max-w-[var(--content-width)] px-[var(--page-padding)]">
         <title>{isRoot ? config.name : `${config.name} - ${path}`}</title>
@@ -69,11 +29,9 @@ export function Home({ view }: HomeProps) {
           )}
 
           <div className="flex flex-col gap-2">
-            {directory && (
-              <div className="animate-fade-in">
-                <PostList directory={directory} view={isRoot ? activeView : 'all'} />
-              </div>
-            )}
+            <div className="animate-fade-in">
+              <PostList />
+            </div>
           </div>
         </main>
       </main>

package/src/pages/index-post.tsx

@@ -0,0 +1,59 @@
+import { ReactNode } from "react";
+import { useParams } from "react-router-dom";
+import { isSimulationRunning } from "../../plugin/src/client";
+import Loading from "@/components/loading";
+import { Header } from "@/components/header";
+import { useIndexContent } from "@/hooks/use-mdx-content";
+import { mdxComponents } from "@/components/mdx-components";
+import { FrontmatterProvider } from "@/lib/frontmatter-context";
+
+interface IndexPostProps {
+  fallback: ReactNode;
+}
+
+/**
+ * Attempts to render an index.mdx or index.md file for a directory.
+ * Falls back to the provided component if no index file exists.
+ */
+export function IndexPost({ fallback }: IndexPostProps) {
+  const { "*": rawPath = "." } = useParams();
+
+  // Normalize path for index lookup
+  const dirPath = rawPath || ".";
+
+  const { Content, frontmatter, loading, notFound } = useIndexContent(dirPath);
+  const isRunning = isSimulationRunning();
+
+  if (loading) return <Loading />
+
+  // No index file found - render fallback (usually Home)
+  if (notFound) {
+    return <>{fallback}</>;
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col bg-background noise-overlay">
+      <title>{frontmatter?.title}</title>
+      <Header />
+      <main className="flex-1 w-full overflow-x-clip">
+        {isRunning && (
+          <div className="sticky top-0 z-50 px-[var(--page-padding)] py-2 bg-red-500 text-primary-foreground font-mono text-xs text-center tracking-wide">
+            <span className="inline-flex items-center gap-3">
+              <span className="h-1.5 w-1.5 rounded-full bg-current animate-pulse" />
+              <span className="uppercase tracking-widest">simulation running</span>
+              <span className="text-primary-foreground/60">Page will auto-refresh on completion</span>
+            </span>
+          </div>
+        )}
+
+        {Content && (
+          <FrontmatterProvider frontmatter={frontmatter}>
+            <article className="my-12 mx-auto px-[var(--page-padding)] max-w-[var(--content-width)] animate-fade-in">
+              <Content components={mdxComponents} />
+            </article>
+          </FrontmatterProvider>
+        )}
+      </main>
+    </div>
+  )
+}

package/src/pages/post.tsx

@@ -2,7 +2,6 @@ import { useParams } from "react-router-dom";
 import { findSlides, isSimulationRunning, useDirectory } from "../../plugin/src/client";
 import Loading from "@/components/loading";
 import { FileEntry } from "plugin/src/lib";
-import { RunningBar } from "@/components/running-bar";
 import { Header } from "@/components/header";
 import { useMDXContent } from "@/hooks/use-mdx-content";
 import { mdxComponents } from "@/components/mdx-components";
@@ -41,7 +40,6 @@ export function Post() {
   return (
     <div className="flex min-h-screen flex-col bg-background noise-overlay">
       <title>{frontmatter?.title}</title>
-      <RunningBar />
       <Header />
       <main className="flex-1 w-full overflow-x-clip">
         {isRunning && (
@@ -56,7 +54,7 @@ export function Post() {
 
         {Content && (
           <FrontmatterProvider frontmatter={frontmatter}>
-            <article className="my-12 mx-auto px-[var(--page-padding)] prose dark:prose-invert prose-headings:tracking-tight prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline max-w-[var(--content-width)] animate-fade-in">
+            <article className="mt-12 mb-64 mx-auto px-[var(--page-padding)] max-w-[var(--content-width)] animate-fade-in">
               <Content components={mdxComponents} />
             </article>
           </FrontmatterProvider>

package/src/pages/slides.tsx

@@ -2,11 +2,12 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { FULLSCREEN_DATA_ATTR } from "@/lib/constants";
 import { useParams, useSearchParams } from "react-router-dom"
 import Loading from "@/components/loading";
-import { RunningBar } from "@/components/running-bar";
 import { Header } from "@/components/header";
 import { useMDXSlides } from "@/hooks/use-mdx-content";
 import { slidesMdxComponents } from "@/components/slides-renderer";
 import { FrontmatterProvider } from "@/lib/frontmatter-context";
+import veslxConfig from "virtual:veslx-config";
+import { cn } from "@/lib/utils";
 
 
 export function SlidesPage() {
@@ -121,10 +122,11 @@ export function SlidesPage() {
     );
   }
 
+  const scrollSnap = veslxConfig.slides.scrollSnap;
+
   return (
-    <main className="slides-container">
+    <main className={cn("slides-container", scrollSnap && "slides-scroll-snap")}>
       <title>{frontmatter?.title}</title>
-      <RunningBar />
       <Header
         slideControls={{
           current: currentSlide,