veslx 0.0.1

package/src/pages/post.tsx

@@ -0,0 +1,65 @@
+
+import { useParams } from "react-router-dom";
+import { findSlides, isSimulationRunning, useDirectory, useFileContent } from "../../plugin/src/client";
+import Loading from "@/components/loading";
+import { FileEntry } from "plugin/src/lib";
+import { FrontMatter } from "@/components/front-matter";
+import { RunningBar } from "@/components/running-bar";
+import { Header } from "@/components/header";
+import { RuntimeMDX } from "@/components/runtime-mdx";
+
+
+export function Post() {
+  const { "path": path = "." } = useParams();
+  const filePath = `${path}/README.mdx`
+  const { directory, file, loading, error } = useDirectory(filePath)
+  const { content } = useFileContent(filePath);
+  const isRunning = isSimulationRunning();
+
+  let slides: FileEntry | null = null;
+  if (directory) {
+    slides = findSlides(directory);
+  }
+
+  if (loading) return <Loading />
+
+  if (error) {
+    return (
+      <main className="min-h-screen bg-background container mx-auto max-w-4xl py-12">
+        <p className="text-center text-red-600">{error.message}</p>
+      </main>
+    )
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col bg-background noise-overlay">
+      <title>{file?.frontmatter?.title}</title>
+      <RunningBar />
+      <Header />
+      <main className="flex-1 mx-auto w-full max-w-[var(--content-width)] px-[var(--page-padding)]">
+        
+        {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>
+        )}
+
+        {file && (
+          <article className="my-24 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(--prose-width)] animate-fade-in">
+            <FrontMatter
+              title={file.frontmatter?.title}
+              date={file.frontmatter?.date}
+              description={file.frontmatter?.description}
+              slides={slides}
+            />
+            {content && <RuntimeMDX content={content} />}
+          </article>
+        )}
+      </main>
+    </div>    
+  )
+}

package/src/pages/slides.tsx

@@ -0,0 +1,173 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { FULLSCREEN_DATA_ATTR } from "@/lib/constants";
+import { useDirectory, useFileContent } from "../../plugin/src/client";
+import { useParams, useSearchParams } from "react-router-dom"
+import Loading from "@/components/loading";
+import { FrontMatter } from "@/components/front-matter";
+import { RuntimeMDX } from "@/components/runtime-mdx";
+import { RunningBar } from "@/components/running-bar";
+import { Header } from "@/components/header";
+
+export function parseSlideContent(content: string): string[] {
+  // Strip frontmatter if present (starts with --- and ends with ---)
+  let processedContent = content;
+  const frontmatterMatch = content.match(/^---\n[\s\S]*?\n---\n/);
+  if (frontmatterMatch) {
+    processedContent = content.slice(frontmatterMatch[0].length);
+  }
+
+  return processedContent
+    .split(/^---$/m)
+    .map((slide) => slide.trim())
+    .filter((slide) => slide.length > 0);
+}
+
+
+export function SlidesPage() {
+  const { "path": path = "." } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const filePath = `${path}/SLIDES.mdx`
+  const { file } = useDirectory(filePath)
+  const { content, loading, error } = useFileContent(filePath);
+  const slides = content ? parseSlideContent(content) : [];
+
+  // Total slides = 1 (title) + content slides
+  const totalSlides = slides.length + 1;
+
+  // Get initial slide from query param
+  const initialSlide = Math.max(0, Math.min(
+    parseInt(searchParams.get("slide") || "0", 10),
+    totalSlides - 1
+  ));
+
+  const [currentSlide, setCurrentSlide] = useState(initialSlide);
+  const slideRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  // Scroll to slide and update query param
+  const goToSlide = useCallback((index: number) => {
+    const clampedIndex = Math.max(0, Math.min(index, totalSlides - 1));
+    const target = slideRefs.current[clampedIndex];
+    if (target) {
+      const targetTop = target.getBoundingClientRect().top + window.scrollY;
+      window.scrollTo({ top: targetTop, behavior: "smooth" });
+    }
+  }, [totalSlides]);
+
+  const goToPrevious = useCallback(() => {
+    goToSlide(currentSlide - 1);
+  }, [currentSlide, goToSlide]);
+
+  const goToNext = useCallback(() => {
+    goToSlide(currentSlide + 1);
+  }, [currentSlide, goToSlide]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "ArrowUp" || e.key === "k") {
+        e.preventDefault();
+        goToPrevious();
+      } else if (e.key === "ArrowDown" || e.key === "j") {
+        e.preventDefault();
+        goToNext();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [goToPrevious, goToNext]);
+
+  // Update query param on scroll (delayed to avoid interference on load)
+  useEffect(() => {
+    let observer: IntersectionObserver | null = null;
+
+    const timeoutId = setTimeout(() => {
+      observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting) {
+              const index = slideRefs.current.findIndex((ref) => ref === entry.target);
+              if (index !== -1) {
+                setCurrentSlide(index);
+                setSearchParams(index > 0 ? { slide: String(index) } : {}, { replace: true });
+              }
+            }
+          }
+        },
+        { threshold: 0.5 }
+      );
+
+      slideRefs.current.forEach((ref) => {
+        if (ref) observer!.observe(ref);
+      });
+    }, 100);
+
+    return () => {
+      clearTimeout(timeoutId);
+      observer?.disconnect();
+    };
+  }, [slides.length, setSearchParams]);
+
+  if (loading) {
+    return (
+      <Loading />
+    )
+  }
+
+  if (error) {
+    return (
+      <main className="min-h-screen bg-background container mx-auto max-w-4xl py-12">
+        <p className="text-center text-red-600">{error}</p>
+      </main>
+    )
+  }
+
+  if (slides.length === 0) {
+    return (
+      <div className="flex items-center justify-center p-12 text-muted-foreground font-mono text-sm">
+        no slides found — use "---" to separate slides
+      </div>
+    );
+  }
+
+  return (
+    <main className="slides-container">
+      <title>{file?.frontmatter?.title}</title>
+      <RunningBar />
+      <Header
+        slideControls={{
+          current: currentSlide,
+          total: totalSlides,
+          onPrevious: goToPrevious,
+          onNext: goToNext,
+        }}
+      />
+      <div {...{[FULLSCREEN_DATA_ATTR]: "true"}}>
+        <div
+          ref={(el) => { slideRefs.current[0] = el; }}
+          className="slide-page max-w-xl min-h-[50vh] sm:min-h-[70vh] md:min-h-screen flex items-center justify-center py-8 sm:py-12 md:py-16 px-4 mx-auto"
+        >
+          {file && (
+            <FrontMatter
+              title={file.frontmatter?.title}
+              date={file.frontmatter?.date}
+              description={file.frontmatter?.description}
+            />
+          )}
+        </div>
+        <hr className="print:hidden" />
+        {slides.map((content, index) => (
+          <div key={index}>
+            <div
+              ref={(el) => { slideRefs.current[index + 1] = el; }}
+              className="slide-page min-h-[50vh] sm:min-h-[70vh] md:min-h-screen flex items-center justify-center py-8 sm:py-12 md:py-16 px-4 mx-auto"
+            >
+              {content && <RuntimeMDX content={content} size="md" />}
+            </div>
+            {index < slides.length - 1 && <hr className="print:hidden" />}
+          </div>
+        ))}
+      </div>
+    </main>
+  )
+}

package/tailwind.config.js

@@ -0,0 +1,136 @@
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    path.join(__dirname, "../biblio/**/*.mdx"),
+    path.join(__dirname, "../biblio/**/*.md"),
+  ],
+  theme: {
+  	extend: {
+  		fontFamily: {
+  			// Clean sans-serif for everything
+  			sans: ['Inter', 'system-ui', 'sans-serif'],
+  			// Monospace for code, data, technical elements
+  			mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
+  		},
+  		fontSize: {
+  			// Refined type scale
+  			'xs': ['0.75rem', { lineHeight: '1.5' }],
+  			'sm': ['0.875rem', { lineHeight: '1.6' }],
+  			'base': ['1rem', { lineHeight: '1.75' }],
+  			'lg': ['1.125rem', { lineHeight: '1.7' }],
+  			'xl': ['1.25rem', { lineHeight: '1.5' }],
+  			'2xl': ['1.5rem', { lineHeight: '1.35' }],
+  			'3xl': ['1.875rem', { lineHeight: '1.25' }],
+  			'4xl': ['2.25rem', { lineHeight: '1.2' }],
+  			'5xl': ['3rem', { lineHeight: '1.15' }],
+  			'6xl': ['3.75rem', { lineHeight: '1.1' }],
+  		},
+  		letterSpacing: {
+  			'tightest': '-0.04em',
+  			'tighter': '-0.02em',
+  			'tight': '-0.01em',
+  			'normal': '0',
+  			'wide': '0.01em',
+  			'wider': '0.02em',
+  			'widest': '0.05em',
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		colors: {
+  			// Ministry of Unsanctioned Computation
+  			ministry: {
+  				parchment: '#F5F0E6',
+  				cream: '#FAF7F0',
+  				crimson: '#8B1538',
+  				gold: '#B8860B',
+  				brown: '#5C4033',
+  				ink: '#2C1810',
+  			},
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			},
+  			sidebar: {
+  				DEFAULT: 'hsl(var(--sidebar-background))',
+  				foreground: 'hsl(var(--sidebar-foreground))',
+  				primary: 'hsl(var(--sidebar-primary))',
+  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+  				accent: 'hsl(var(--sidebar-accent))',
+  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+  				border: 'hsl(var(--sidebar-border))',
+  				ring: 'hsl(var(--sidebar-ring))'
+  			}
+  		},
+  		animation: {
+  			'fade-in': 'fade-in 0.4s ease-out forwards',
+  			'fade-in-slow': 'fade-in-slow 0.6s ease-out forwards',
+  			'slide-up': 'slide-up 0.5s ease-out forwards',
+  		},
+  		keyframes: {
+  			'fade-in': {
+  				from: { opacity: '0', transform: 'translateY(8px)' },
+  				to: { opacity: '1', transform: 'translateY(0)' },
+  			},
+  			'fade-in-slow': {
+  				from: { opacity: '0' },
+  				to: { opacity: '1' },
+  			},
+  			'slide-up': {
+  				from: { opacity: '0', transform: 'translateY(20px)' },
+  				to: { opacity: '1', transform: 'translateY(0)' },
+  			},
+  		},
+  		transitionTimingFunction: {
+  			'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
+  		},
+  	}
+  },
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+}

package/test-content/.vesl.json

@@ -0,0 +1,49 @@
+{
+  "type": "directory",
+  "name": "test-content",
+  "path": ".",
+  "children": [
+    {
+      "type": "file",
+      "name": "README.md",
+      "path": "README.md",
+      "size": 472
+    },
+    {
+      "type": "directory",
+      "name": "test-slides",
+      "path": "test-slides",
+      "children": [
+        {
+          "type": "file",
+          "name": "SLIDES.mdx",
+          "path": "test-slides/SLIDES.mdx",
+          "size": 122,
+          "frontmatter": {
+            "title": "Test Slides",
+            "description": "These are test slides for testing purposes.",
+            "date": "2024-06-15"
+          }
+        }
+      ]
+    },
+    {
+      "type": "directory",
+      "name": "test-post",
+      "path": "test-post",
+      "children": [
+        {
+          "type": "file",
+          "name": "README.mdx",
+          "path": "test-post/README.mdx",
+          "size": 115,
+          "frontmatter": {
+            "title": "Test Post",
+            "description": "This is a test post for testing purposes.",
+            "date": "2024-06-15"
+          }
+        }
+      ]
+    }
+  ]
+}

package/test-content/README.md

@@ -0,0 +1,33 @@
+
+## Getting Started
+
+### Installation
+
+First install [Task](https://taskfile.dev/docs/installation), then:
+
+```bash
+git clone https://github.com/eoinmurray/pinglab
+task install
+```
+
+### Simulate
+
+Then you can run experiments like:
+
+```bash
+task execute -- content/dynamical-regimes/experiment.py
+# or
+task execute:all
+```
+
+which will generate data in the appropriate folder.
+
+### Present
+
+Start the UI server with
+
+```bash
+task dev
+# or
+task bg # starts in background
+```

package/test-content/test-post/README.mdx

@@ -0,0 +1,7 @@
+---
+title: "Test Post"
+description: "This is a test post for testing purposes."
+date: "2024-06-15"
+---
+
+# Test Post

package/test-content/test-slides/SLIDES.mdx

@@ -0,0 +1,8 @@
+---
+title: "Test Slides"
+description: "These are test slides for testing purposes."
+date: "2024-06-15"
+---
+
+
+# Test Slides

package/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client", "node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src", "../biblio/**/*.tsx"]
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  }
+}

package/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts", "plugin/src/plugin.ts"]
+}

package/vesl.config.ts

@@ -0,0 +1,4 @@
+
+export default {
+  dir: 'test-content',
+}

package/vite.config.ts

@@ -0,0 +1,54 @@
+
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import mdx from '@mdx-js/rollup'
+import remarkMath from 'remark-math'
+import rehypeKatex from 'rehype-katex'
+import remarkFrontmatter from 'remark-frontmatter'
+import remarkGfm from 'remark-gfm'
+import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
+import path from 'path'
+
+export default defineConfig({
+  clearScreen: false,
+  publicDir: './public',
+  plugins: [
+    tailwindcss(),
+    // MDX must run before Vite's default transforms
+    {
+      enforce: 'pre',
+      ...mdx({
+        remarkPlugins: [
+          remarkGfm,
+          remarkMath,
+          remarkFrontmatter,
+          [remarkMdxFrontmatter, { name: 'frontmatter' }],
+        ],
+        rehypePlugins: [rehypeKatex],
+        providerImportSource: '@mdx-js/react',
+      }),
+    },
+    react({ include: /\.(jsx|js|mdx|md|tsx|ts)$/ }),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      'react': path.resolve(__dirname, './node_modules/react'),
+      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
+      '@mdx-js/react': path.resolve(__dirname, './node_modules/@mdx-js/react'),
+    },
+  },
+  server: {
+    host: '0.0.0.0',
+    port: process.env.PORT ? parseInt(process.env.PORT, 10) : 3000,
+    strictPort: true,
+    fs: {
+      allow: ['..', '../..'],
+    },
+    allowedHosts: true,
+  },
+  preview: {
+    allowedHosts: true,
+  },
+})