veslx 0.1.5 → 0.1.15

package/src/pages/slides.tsx

@@ -2,60 +2,100 @@ 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 { FrontMatter } from "@/components/front-matter";
 import { RunningBar } from "@/components/running-bar";
 import { Header } from "@/components/header";
 import { useMDXSlides } from "@/hooks/use-mdx-content";
-import { useSlidesFromMDX, SlideContent } from "@/components/slides-renderer";
+import { slidesMdxComponents } from "@/components/slides-renderer";
 
 
 export function SlidesPage() {
-  const { "path": path = "." } = useParams();
+  const { "*": rawPath = "." } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
 
-  // Load the compiled MDX module
-  const { Content, frontmatter, loading, error } = useMDXSlides(path);
+  // The path includes the .mdx extension from the route
+  const mdxPath = rawPath;
 
-  // Split the MDX content into slides by <hr> elements
-  const { slides } = useSlidesFromMDX({ Content, frontmatter });
+  // Load the compiled MDX module (now includes slideCount export)
+  const { Content, frontmatter, slideCount, loading, error } = useMDXSlides(mdxPath);
 
   // 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" });
+  const totalSlides = (slideCount || 0) + 1;
+
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const titleSlideRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Scroll to slide on initial load if query param is set
+  useEffect(() => {
+    const slideParam = parseInt(searchParams.get("slide") || "0", 10);
+    if (slideParam > 0 && contentRef.current) {
+      const slideEl = contentRef.current.querySelector(`[data-slide-index="${slideParam - 1}"]`);
+      if (slideEl) {
+        slideEl.scrollIntoView({ behavior: "auto" });
+      }
+    }
+  }, [searchParams, Content]);
+
+  // Track current slide based on scroll position
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const index = entry.target.getAttribute("data-slide-index");
+            if (index !== null) {
+              const slideNum = index === "title" ? 0 : parseInt(index, 10) + 1;
+              setCurrentSlide(slideNum);
+              setSearchParams(slideNum > 0 ? { slide: String(slideNum) } : {}, { replace: true });
+            }
+          }
+        }
+      },
+      { threshold: 0.5 }
+    );
+
+    // Observe title slide
+    if (titleSlideRef.current) {
+      observer.observe(titleSlideRef.current);
     }
-  }, [totalSlides]);
 
+    // Observe content slides
+    if (contentRef.current) {
+      const slides = contentRef.current.querySelectorAll("[data-slide-index]");
+      slides.forEach((slide) => observer.observe(slide));
+    }
+
+    return () => observer.disconnect();
+  }, [Content, setSearchParams]);
+
+  // Keyboard/scroll navigation helpers
   const goToPrevious = useCallback(() => {
-    goToSlide(currentSlide - 1);
-  }, [currentSlide, goToSlide]);
+    const prev = Math.max(0, currentSlide - 1);
+    if (prev === 0 && titleSlideRef.current) {
+      titleSlideRef.current.scrollIntoView({ behavior: "smooth" });
+    } else if (contentRef.current) {
+      const slideEl = contentRef.current.querySelector(`[data-slide-index="${prev - 1}"]`);
+      slideEl?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [currentSlide]);
 
   const goToNext = useCallback(() => {
-    goToSlide(currentSlide + 1);
-  }, [currentSlide, goToSlide]);
+    const next = Math.min(totalSlides - 1, currentSlide + 1);
+    if (next === 0 && titleSlideRef.current) {
+      titleSlideRef.current.scrollIntoView({ behavior: "smooth" });
+    } else if (contentRef.current) {
+      const slideEl = contentRef.current.querySelector(`[data-slide-index="${next - 1}"]`);
+      slideEl?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [currentSlide, totalSlides]);
 
   // Keyboard navigation
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "ArrowUp" || e.key === "k") {
+      if (e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "k") {
         e.preventDefault();
         goToPrevious();
-      } else if (e.key === "ArrowDown" || e.key === "j") {
+      } else if (e.key === "ArrowDown" || e.key === "ArrowRight" || e.key === "j") {
         e.preventDefault();
         goToNext();
       }
@@ -65,37 +105,6 @@ export function SlidesPage() {
     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 />
   }
@@ -108,7 +117,7 @@ export function SlidesPage() {
     )
   }
 
-  if (slides.length === 0) {
+  if (!Content) {
     return (
       <div className="flex items-center justify-center p-12 text-muted-foreground font-mono text-sm">
         no slides found — use "---" to separate slides
@@ -129,31 +138,9 @@ export function SlidesPage() {
         }}
       />
       <div {...{[FULLSCREEN_DATA_ATTR]: "true"}}>
-        {/* Title slide */}
-        <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"
-        >
-          <FrontMatter
-            title={frontmatter?.title}
-            date={frontmatter?.date}
-            description={frontmatter?.description}
-          />
+        <div ref={contentRef}>
+          <Content components={slidesMdxComponents} />
         </div>
-        <hr className="print:hidden" />
-
-        {/* Content slides */}
-        {slides.map((slideContent, 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"
-            >
-              <SlideContent>{slideContent}</SlideContent>
-            </div>
-            {index < slides.length - 1 && <hr className="print:hidden" />}
-          </div>
-        ))}
       </div>
     </main>
   )

package/src/vite-env.d.ts

@@ -1,21 +1,11 @@
 /// <reference types="vite/client" />
 
-declare module 'virtual:content-modules' {
-  import type { ComponentType } from 'react'
-
-  interface MDXModule {
-    default: ComponentType<{ components?: Record<string, ComponentType> }>
-    frontmatter?: {
-      title?: string
-      description?: string
-      date?: string
-      visibility?: string
-    }
+declare module 'virtual:veslx-config' {
+  interface SiteConfig {
+    name: string;
+    description: string;
+    github: string;
   }
-
-  type ModuleLoader = () => Promise<MDXModule>
-
-  export const modules: Record<string, ModuleLoader>
-  export const slides: Record<string, ModuleLoader>
-  export const index: Record<string, { default: unknown }>
+  const config: SiteConfig;
+  export default config;
 }

package/vite.config.ts

@@ -7,6 +7,7 @@ import rehypeKatex from 'rehype-katex'
 import remarkFrontmatter from 'remark-frontmatter'
 import remarkGfm from 'remark-gfm'
 import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
+import { remarkSlides } from './plugin/src/remark-slides'
 import { fileURLToPath } from 'url'
 import path from 'path'
 import fs from 'fs'
@@ -17,10 +18,19 @@ const distClientPath = path.join(__dirname, 'dist/client')
 const srcPath = path.join(__dirname, 'src')
 const hasPrebuilt = fs.existsSync(path.join(distClientPath, 'main.js'))
 
+// Common remark plugins
+const commonRemarkPlugins = [
+  remarkGfm,
+  remarkMath,
+  remarkFrontmatter,
+  [remarkMdxFrontmatter, { name: 'frontmatter' }],
+]
+
 export default defineConfig(({ command }) => {
   // Only use pre-built files for dev server, not production build
   // Pre-built files have externalized React which breaks production bundles
-  const usePrebuilt = command === 'serve' && hasPrebuilt
+  // VESLX_DEV=1 forces using src for live reload during development
+  const usePrebuilt = command === 'serve' && hasPrebuilt && !process.env.VESLX_DEV
   const clientPath = usePrebuilt ? distClientPath : srcPath
 
   return {
@@ -29,20 +39,29 @@ export default defineConfig(({ command }) => {
   publicDir: path.join(__dirname, 'public'),
   plugins: [
     tailwindcss(),
-    // MDX must run before Vite's default transforms
+    // MDX for slides - splits at --- into <Slide> components
     {
       enforce: 'pre',
       ...mdx({
+        include: /SLIDES\.mdx$/,
         remarkPlugins: [
-          remarkGfm,
-          remarkMath,
-          remarkFrontmatter,
-          [remarkMdxFrontmatter, { name: 'frontmatter' }],
+          ...commonRemarkPlugins,
+          remarkSlides, // Transform --- into <Slide> wrappers
         ],
         rehypePlugins: [rehypeKatex],
         providerImportSource: '@mdx-js/react',
       }),
     },
+    // MDX for regular posts
+    {
+      enforce: 'pre',
+      ...mdx({
+        exclude: /SLIDES\.mdx$/,
+        remarkPlugins: commonRemarkPlugins,
+        rehypePlugins: [rehypeKatex],
+        providerImportSource: '@mdx-js/react',
+      }),
+    },
     react({ include: /\.(jsx|js|mdx|md|tsx|ts)$/ }),
   ],
   resolve: {

package/dist/assets/README-NSyLDlyP.js

@@ -1,7 +0,0 @@
-import{j as t}from"./index-BUMwRZ7d.js";import{u as r}from"./index-C8sJQuOZ.js";function a({data:n=[30,60,45,80,55]}){const e=Math.max(...n);return t.jsx("div",{className:"flex items-end gap-2 h-32 p-4 bg-muted rounded-lg",children:n.map((s,i)=>t.jsx("div",{className:"flex-1 bg-primary rounded-t transition-all hover:bg-primary/80",style:{height:`${s/e*100}%`},title:`Value: ${s}`},i))})}const m={title:"Test Post",description:"This is a test post for testing purposes.",date:"2024-06-15"};function o(n){const e={code:"code",h1:"h1",h2:"h2",p:"p",...r(),...n.components};return t.jsxs(t.Fragment,{children:[t.jsx(e.h1,{children:"Test Post"}),`
-`,t.jsx(e.p,{children:"This post demonstrates local imports in MDX."}),`
-`,t.jsx(e.h2,{children:"Interactive Chart"}),`
-`,t.jsx(e.p,{children:"Here's a chart component imported from a local file:"}),`
-`,t.jsx(a,{data:[25,50,75,40,90]}),`
-`,t.jsx(e.h2,{children:"How it works"}),`
-`,t.jsxs(e.p,{children:["The MDX is compiled at build time by Vite, so ",t.jsx(e.code,{children:"import Chart from './Chart.tsx'"})," works natively. No runtime compilation needed!"]})]})}function h(n={}){const{wrapper:e}={...r(),...n.components};return e?t.jsx(e,{...n,children:t.jsx(o,{...n})}):o(n)}export{h as default,m as frontmatter};

package/dist/assets/SLIDES-C12TOqNU.js

@@ -1,10 +0,0 @@
-import{r as i,j as e}from"./index-BUMwRZ7d.js";import{u as o}from"./index-C8sJQuOZ.js";function c(){const[t,n]=i.useState(0);return e.jsxs("div",{className:"flex flex-col items-center gap-4 p-4 border rounded-lg",children:[e.jsx("p",{className:"text-2xl font-bold",children:t}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx("button",{onClick:()=>n(s=>s-1),className:"px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600",children:"-"}),e.jsx("button",{onClick:()=>n(s=>s+1),className:"px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600",children:"+"})]})]})}const h={title:"Test Slides",description:"These are test slides for testing purposes.",date:"2024-06-15"};function r(t){const n={h1:"h1",hr:"hr",p:"p",...o(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(n.h1,{children:"Slide 1"}),`
-`,e.jsx(n.p,{children:"This is the first slide with some text."}),`
-`,e.jsx(n.hr,{}),`
-`,e.jsx(n.h1,{children:"Slide 2: Interactive Component"}),`
-`,e.jsx(n.p,{children:"Here's an interactive counter component:"}),`
-`,e.jsx(c,{}),`
-`,e.jsx(n.hr,{}),`
-`,e.jsx(n.h1,{children:"Slide 3"}),`
-`,e.jsx(n.p,{children:"This is the final slide."}),`
-`,e.jsx(n.p,{children:"Local imports work in slides now!"})]})}function x(t={}){const{wrapper:n}={...o(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(r,{...t})}):r(t)}export{x as default,h as frontmatter};

package/dist/assets/_virtual_content-modules-DK3Yb9K2.js

@@ -1,2 +0,0 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/README-NSyLDlyP.js","assets/index-BUMwRZ7d.js","assets/index-PspMxLnH.css","assets/index-C8sJQuOZ.js","assets/SLIDES-C12TOqNU.js"])))=>i.map(i=>d[i]);
-import{_ as t}from"./index-BUMwRZ7d.js";const e=Object.assign({"/test-content/test-post/README.mdx":()=>t(()=>import("./README-NSyLDlyP.js"),__vite__mapDeps([0,1,2,3]))}),o=Object.assign({"/test-content/test-slides/SLIDES.mdx":()=>t(()=>import("./SLIDES-C12TOqNU.js"),__vite__mapDeps([4,1,2,3]))});export{e as modules,o as slides};