veslx 0.1.14 → 0.1.16

package/src/components/mdx-components.tsx

@@ -1,7 +1,62 @@
-
+import { Link, useLocation } from 'react-router-dom'
 import Gallery from '@/components/gallery'
 import { ParameterTable } from '@/components/parameter-table'
 import { ParameterBadge } from '@/components/parameter-badge'
+import { FrontMatter } from './front-matter'
+
+/**
+ * Smart link component that uses React Router for internal links
+ * and regular anchor tags for external links.
+ */
+function SmartLink({ href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  const location = useLocation()
+
+  // External links: absolute URLs, mailto, tel, etc.
+  const isExternal = href?.startsWith('http') || href?.startsWith('mailto:') || href?.startsWith('tel:')
+
+  // Hash-only links stay as anchors for in-page navigation
+  const isHashOnly = href?.startsWith('#')
+
+  if (isExternal || isHashOnly || !href) {
+    return (
+      <a
+        href={href}
+        className="text-primary hover:underline underline-offset-2"
+        {...(isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+        {...props}
+      >
+        {children}
+      </a>
+    )
+  }
+
+  // Resolve relative paths (./foo.mdx, ../bar.mdx) against current location
+  let resolvedHref = href
+  if (href.startsWith('./') || href.startsWith('../')) {
+    // Get current directory from pathname
+    const currentPath = location.pathname
+    const currentDir = currentPath.replace(/\/[^/]+\.mdx$/, '') || currentPath.replace(/\/[^/]*$/, '') || '/'
+
+    // Simple relative path resolution
+    if (href.startsWith('./')) {
+      resolvedHref = `${currentDir}/${href.slice(2)}`.replace(/\/+/g, '/')
+    } else if (href.startsWith('../')) {
+      const parentDir = currentDir.replace(/\/[^/]+$/, '') || '/'
+      resolvedHref = `${parentDir}/${href.slice(3)}`.replace(/\/+/g, '/')
+    }
+  }
+
+  // Internal link - use React Router Link
+  return (
+    <Link
+      to={resolvedHref}
+      className="text-primary hover:underline underline-offset-2"
+      {...props}
+    >
+      {children}
+    </Link>
+  )
+}
 
 function generateId(children: unknown): string {
   return children
@@ -13,6 +68,9 @@ function generateId(children: unknown): string {
 
 // Shared MDX components - lab notebook / coder aesthetic
 export const mdxComponents = {
+
+  FrontMatter,
+
   Gallery,
 
   ParameterTable,
@@ -110,13 +168,8 @@ export const mdxComponents = {
     <li className="mt-1.5" {...props} />
   ),
 
-  // Links
-  a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
-    <a
-      className="text-primary hover:underline underline-offset-2"
-      {...props}
-    />
-  ),
+  // Links - uses React Router for internal navigation
+  a: SmartLink,
 
   // Tables
   table: (props: React.TableHTMLAttributes<HTMLTableElement>) => (

package/src/components/post-list.tsx

@@ -1,14 +1,64 @@
 import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
-import { DirectoryEntry } from "../../plugin/src/lib";
-import { findReadme, findSlides } from "../../plugin/src/client";
+import { DirectoryEntry, FileEntry } from "../../plugin/src/lib";
+import { findReadme, findSlides, findMdxFiles } from "../../plugin/src/client";
 import { formatDate } from "@/lib/format-date";
 import { ArrowRight } from "lucide-react";
 
+type PostEntry = {
+  type: 'folder' | 'file';
+  name: string;
+  path: string;
+  readme: FileEntry | null;
+  slides: FileEntry | null;
+  file: FileEntry | null; // For standalone MDX files
+};
+
+// 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 {
+  return name
+    .replace(/^\d+-/, '')
+    .replace(/-/g, ' ')
+    .replace(/\b\w/g, c => c.toUpperCase());
+}
+
 export default function PostList({ directory }: { directory: DirectoryEntry }) {
   const folders = directory.children.filter((c): c is DirectoryEntry => c.type === "directory");
+  const standaloneFiles = findMdxFiles(directory);
+
+  // Convert folders to post entries
+  const folderPosts: PostEntry[] = folders.map((folder) => {
+    const readme = findReadme(folder);
+    const slides = findSlides(folder);
+    return {
+      type: 'folder' as const,
+      name: folder.name,
+      path: folder.path,
+      readme,
+      slides,
+      file: null,
+    };
+  });
 
-  if (folders.length === 0) {
+  // Convert standalone MDX files to post entries
+  const filePosts: PostEntry[] = standaloneFiles.map((file) => ({
+    type: 'file' as const,
+    name: file.name.replace(/\.mdx?$/, ''),
+    path: file.path,
+    readme: null,
+    slides: null,
+    file,
+  }));
+
+  let posts: PostEntry[] = [...folderPosts, ...filePosts];
+
+  if (posts.length === 0) {
     return (
       <div className="py-24 text-center">
         <p className="text-muted-foreground font-mono text-sm tracking-wide">no entries</p>
@@ -16,133 +66,117 @@ export default function PostList({ directory }: { directory: DirectoryEntry }) {
     );
   }
 
-  let posts = folders.map((folder) => {
-    const readme = findReadme(folder);
-    const slides = findSlides(folder);
-    return {
-      ...folder,
-      readme,
-      slides,
-    }
-  })
-
+  // Filter out hidden and draft posts
   posts = posts.filter((post) => {
-    return post.readme?.frontmatter?.visibility !== "hidden";
+    const frontmatter = post.readme?.frontmatter || post.file?.frontmatter;
+    return frontmatter?.visibility !== "hidden" && frontmatter?.draft !== true;
   });
 
+  // Helper to get frontmatter from post
+  const getFrontmatter = (post: PostEntry) => {
+    return post.readme?.frontmatter || post.file?.frontmatter || post.slides?.frontmatter;
+  };
+
+  // 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) => {
-    let aDate = a.readme?.frontmatter?.date ? new Date(a.readme.frontmatter.date as string) : null;
-    let bDate = b.readme?.frontmatter?.date ? new Date(b.readme.frontmatter.date as string) : null;
+    const aOrder = extractOrder(a.name);
+    const bOrder = extractOrder(b.name);
+    const aDate = getPostDate(a);
+    const bDate = getPostDate(b);
 
-    if (!aDate && a.slides) {
-      aDate = a.slides.frontmatter?.date ? new Date(a.slides.frontmatter.date as string) : null;
-    }
-    if (!bDate && b.slides) {
-      bDate = b.slides.frontmatter?.date ? new Date(b.slides.frontmatter.date as string) : null;
+    // 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();
-    } else if (aDate) {
-      return -1;
-    } else if (bDate) {
-      return 1;
-    } else {
-      return a.name.localeCompare(b.name);
     }
-  });
+    // One has date → dated comes first
+    if (aDate) return -1;
+    if (bDate) return 1;
 
-  const postsGroupedByMonthAndYear: { [key: string]: typeof posts } = {};
-  posts.forEach((post) => {
-    let date = post.readme?.frontmatter?.date ? new Date(post.readme.frontmatter.date as string) : null;
-    if (!date && post.slides) {
-      date = post.slides.frontmatter?.date ? new Date(post.slides.frontmatter.date as string) : null;
-    }
-    const monthYear = date ? `${date.getFullYear()}-${date.getMonth() + 1}` : "unknown";
-    if (!postsGroupedByMonthAndYear[monthYear]) {
-      postsGroupedByMonthAndYear[monthYear] = [];
-    }
-    postsGroupedByMonthAndYear[monthYear].push(post);
+    // 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);
   });
 
   return (
-    <div className="space-y-8">
-      {Object.entries(postsGroupedByMonthAndYear)
-        .sort(([a], [b]) => {
-          if (a === "unknown") return 1;
-          if (b === "unknown") return -1;
-          return b.localeCompare(a);
-        })
-        .map(([monthYear, monthPosts]) => {
-          const [year, month] = monthYear.split("-");
-          const displayDate = monthYear === "unknown" 
-            ? "Unknown Date" 
-            : new Date(parseInt(year), parseInt(month) - 1).toLocaleDateString("en-US", { 
-                year: "numeric", 
-                month: "long" 
-              });
-
-          return (
-            <div key={monthYear}>
-              <h2 className="text-xs font-mono uppercase tracking-wider text-muted-foreground mb-3">
-                {displayDate}
-              </h2>
-              <div className="space-y-1">
-                {monthPosts.map((post) => {
-                  let frontmatter = post.readme?.frontmatter;
-
-                  if (!post.readme && post.slides) {
-                    frontmatter = post.slides.frontmatter;
-                  }
-
-                  const title = (frontmatter?.title as string) || post.name;
-                  const description = frontmatter?.description as string | undefined;
-                  const date = frontmatter?.date ? new Date(frontmatter.date as string) : null;
-
-                  return (
-                    <Link
-                      key={post.path}
-                      to={(post.slides && !post.readme) ? `/${post.slides.path}` : `/${post.readme.path}`}
-                      className={cn(
-                        "group block py-3 px-3 -mx-3 rounded-md",
-                        "transition-colors duration-150",
-                        // "hover:bg-accent"
-                      )}
-                    >
-                      <article className="flex items-start gap-4">
-                        {/* Date - left side, fixed width */}
-                        <time
-                          dateTime={date?.toISOString()}
-                          className="font-mono text-xs text-muted-foreground tabular-nums w-20 flex-shrink-0 pt-0.5"
-                        >
-                          {date ? formatDate(date) : <span className="text-muted-foreground/30">—</span>}
-                        </time>
-
-                        {/* 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>
-                      </article>
-                    </Link>
-                  );
-                })}
+    <div className="space-y-1">
+      {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 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}`;
+        }
+
+        return (
+          <Link
+            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-start gap-4">
+              {/* Date - left side, fixed width */}
+              <time
+                dateTime={date?.toISOString()}
+                className="font-mono text-xs text-muted-foreground tabular-nums w-20 flex-shrink-0 pt-0.5"
+              >
+                {date ? formatDate(date) : <span className="text-muted-foreground/30">—</span>}
+              </time>
+
+              {/* 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>
-            </div>
-          );
-        })}
+            </article>
+          </Link>
+        );
+      })}
     </div>
   );
 }

package/src/components/running-bar.tsx

@@ -8,7 +8,7 @@ export function RunningBar() {
     <>
       {isRunning && (
         // this should stay red not another color
-        <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">
+        <div className="running-bar 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>

package/src/components/slide.tsx

@@ -1,11 +1,28 @@
+import { ReactNode } from 'react'
 
+interface SlideProps {
+  index: number
+  children: ReactNode
+}
 
-export function Slide({ children }: { children: React.ReactNode }) {
+/**
+ * Slide component - wraps slide content for stacked scrollable display.
+ * Each slide takes full viewport height.
+ */
+export function Slide({ index, children }: SlideProps) {
   return (
-    <div className="w-screen h-screen bg-red-500 flex items-center justify-center p-8">
-      <div className="max-w-5xl w-full h-full">
-        {children}
+    <>
+      {index > 0 && (
+        <hr className="border-t border-border w-full" />
+      )}
+      <div
+        className="slide-section min-h-screen flex items-center justify-center py-8 sm:py-12 md:py-16 px-4"
+        data-slide-index={index}
+      >
+        <div className="slide-content prose dark:prose-invert prose-headings:tracking-tight prose-p:leading-relaxed max-w-[var(--content-width)] w-full">
+          {children}
+        </div>
       </div>
-    </div>
+    </>
   )
 }

package/src/components/slides-renderer.tsx

@@ -1,127 +1,19 @@
-import React, { Children, isValidElement, ReactNode, useMemo } from 'react'
+import { ReactNode } from 'react'
 import { mdxComponents } from '@/components/mdx-components'
-
-interface SlidesRendererProps {
-  Content: React.ComponentType<{ components?: Record<string, React.ComponentType> }> | null
-  frontmatter?: {
-    title?: string
-    description?: string
-    date?: string
-  }
-}
-
-/**
- * Splits MDX content into slides by <hr> elements.
- * The MDX is compiled at build time, so imports work.
- * Slide boundaries are marked with --- in MDX (which becomes <hr>).
- */
-export function useSlidesFromMDX({ Content, frontmatter }: SlidesRendererProps) {
-  const slides = useMemo(() => {
-    // Handle null Content (loading state)
-    if (!Content) {
-      return []
-    }
-
-    // Create a custom hr component that we can detect
-    const SlideBreak = () => <hr data-slide-break="true" />
-
-    // Render the MDX with our custom hr
-    const componentsWithBreak = {
-      ...mdxComponents,
-      hr: SlideBreak,
-    }
-
-    // Render to get the element tree
-    const rendered = <Content components={componentsWithBreak} />
-
-    // Split children by hr elements
-    return splitByHr(rendered)
-  }, [Content])
-
-  return { slides, frontmatter }
-}
+import { Slide } from '@/components/slide'
 
 /**
- * Recursively traverses React element tree and splits by <hr> elements
+ * MDX components for slides - includes the Slide component
  */
-function splitByHr(element: ReactNode): ReactNode[][] {
-  const slides: ReactNode[][] = [[]]
-
-  function traverse(node: ReactNode) {
-    if (!node) return
-
-    if (Array.isArray(node)) {
-      node.forEach(traverse)
-      return
-    }
-
-    if (isValidElement(node)) {
-      // Check if this is our slide break marker
-      if (node.type === 'hr' || (node.props && node.props['data-slide-break'] === 'true')) {
-        // Start a new slide
-        slides.push([])
-        return
-      }
-
-      // Check if it's an hr component from mdxComponents
-      const nodeType = node.type as any
-      if (typeof nodeType === 'function' && nodeType.name === 'SlideBreak') {
-        slides.push([])
-        return
-      }
-
-      // For fragments or elements with children, we need to check children
-      if (node.props?.children) {
-        const children = Children.toArray(node.props.children)
-
-        // Check if any child is an hr - if so, we need to split this element
-        const hasHrChild = children.some(child =>
-          isValidElement(child) && (
-            child.type === 'hr' ||
-            (child.props && child.props['data-slide-break'] === 'true')
-          )
-        )
-
-        if (hasHrChild) {
-          // Split the children
-          children.forEach(child => {
-            if (isValidElement(child) && (
-              child.type === 'hr' ||
-              (child.props && child.props['data-slide-break'] === 'true')
-            )) {
-              slides.push([])
-            } else {
-              slides[slides.length - 1].push(child)
-            }
-          })
-        } else {
-          // No hr children, add the whole element
-          slides[slides.length - 1].push(node)
-        }
-        return
-      }
-    }
-
-    // Add to current slide
-    slides[slides.length - 1].push(node)
-  }
-
-  // Get the children of the rendered element
-  if (isValidElement(element) && element.props?.children) {
-    const children = Children.toArray(element.props.children)
-    children.forEach(traverse)
-  } else {
-    traverse(element)
-  }
-
-  // Filter out empty slides
-  return slides.filter(slide => slide.length > 0)
+export const slidesMdxComponents = {
+  ...mdxComponents,
+  Slide,
 }
 
 /**
  * Renders a single slide's content
  */
-export function SlideContent({ children }: { children: ReactNode[] }) {
+export function SlideContent({ children }: { children: ReactNode }) {
   return (
     <div className="slide-content prose dark:prose-invert prose-headings:tracking-tight prose-p:leading-relaxed max-w-xl">
       {children}

package/src/components/welcome.tsx

@@ -1,21 +1,18 @@
+import siteConfig from "virtual:veslx-config";
 
 export function Welcome() {
+  const config = siteConfig;
+
   return (
     <div className="text-muted-foreground">
-      <pre 
-        className="not-prose text-xs md:text-sm rounded"
-      >
-        {/* Rubifont on figlet */}
-{`
-▗▄▄▖▗▄▄▄▖▗▖  ▗▖ ▗▄▄▖▗▖    ▗▄▖ ▗▄▄▖ 
-▐▌ ▐▌ █  ▐▛▚▖▐▌▐▌   ▐▌   ▐▌ ▐▌▐▌ ▐▌
-▐▛▀▘  █  ▐▌ ▝▜▌▐▌▝▜▌▐▌   ▐▛▀▜▌▐▛▀▚▖
-▐▌  ▗▄█▄▖▐▌  ▐▌▝▚▄▞▘▐▙▄▄▖▐▌ ▐▌▐▙▄▞▘                                                                    
-`}
-      </pre>
-      <div className="text-xs mt-2 font-mono">
-        PingLab is a repository for running experiments on PING Spiking Neural Networks.
-      </div>
+      <h1 className="text-xl md:text-2xl font-semibold tracking-tight text-foreground mb-2">
+        {config.name}
+      </h1>
+      {config.description && (
+        <p className="text-sm text-muted-foreground/80 font-mono">
+          {config.description}
+        </p>
+      )}
     </div>
   )
 }