veslx 0.1.21 → 0.1.23

package/src/components/slides/slide-outline.tsx

@@ -0,0 +1,38 @@
+
+
+export function SlideOutline({
+  children,
+  className,
+  size="md"
+}: {
+  children?: React.ReactNode;
+  className?: string;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
+}) {
+
+  const wClasses: Record<string, string> = {
+    sm: "max-w-lg",
+    md: "max-w-2xl",
+    lg: "max-w-5xl",
+    xl: "max-w-7xl",
+    full: "max-w-full",
+  };
+
+  const wClassName = `${wClasses[size]} ${className ?? ""}`;
+
+  const hClasses: Record<string, string> = {
+    sm: "min-h-[300px]",
+    md: "min-h-[400px]",
+    lg: "min-h-[500px]",
+    xl: "min-h-[600px]",
+    full: "min-h-[600px]",
+  };
+
+  const hClassName = `${hClasses[size]} ${className ?? ""}`;
+
+  return (
+    <div className={`border rounded relative left-1/2 -translate-x-1/2 w-screen ${wClassName} ${hClassName} ${className}`}>
+      {children}
+    </div>
+  );
+}

package/src/components/slides/text-slide.tsx

@@ -0,0 +1,35 @@
+
+export function TextSlide({
+  title,
+  subtitle,
+  children,
+}: {
+  title?: string;
+  subtitle?: string;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div>
+      {(title || subtitle) && (
+        <header className="flex flex-col gap-2">
+          {title && (
+            <h2 className="text-[clamp(1.75rem,4vw,3rem)] font-semibold leading-tight tracking-[-0.02em] text-foreground">
+              {title}
+            </h2>
+          )}
+          {subtitle && (
+            <p className="text-[clamp(0.95rem,1.5vw,1.25rem)] text-muted-foreground">
+              {subtitle}
+            </p>
+          )}
+        </header>
+      )}
+
+      {children && (
+        <div className="text-[clamp(1rem,1.8vw,1.35rem)] leading-[1.6] text-foreground/90 space-y-4 [&>ul]:space-y-2 [&>ul]:list-disc [&>ul]:pl-6 [&>ol]:space-y-2 [&>ol]:list-decimal [&>ol]:pl-6">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/slides-renderer.tsx

@@ -15,7 +15,7 @@ export const slidesMdxComponents = {
  */
 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">
+    <div className="slide-content prose dark:prose-invert prose-headings:tracking-tight prose-p:leading-relaxed">
       {children}
     </div>
   )

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

@@ -123,9 +123,25 @@ export function useMDXContent(path: string) {
 function findSlidesModule(modules: ModuleMap, path: string): ModuleLoader | null {
   const keys = Object.keys(modules)
 
+  // Normalize path - remove leading slash if present
+  const normalizedPath = path.replace(/^\//, '')
+
   // If path already ends with .mdx, match exactly
-  if (path.endsWith('.mdx')) {
-    const matchingKey = keys.find(key => key.endsWith(`/${path}`))
+  if (normalizedPath.endsWith('.mdx')) {
+    // 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)
+      if (key.endsWith(`/${normalizedPath}`)) return true
+      // Strategy 2: Key equals @content/path (alias form)
+      if (key === `@content/${normalizedPath}`) return true
+      // Strategy 3: Key equals /@content/path (with leading slash)
+      if (key === `/@content/${normalizedPath}`) return true
+      // Strategy 4: Key equals path directly
+      if (key === normalizedPath) return true
+      // Strategy 5: Key equals /path (with leading slash)
+      if (key === `/${normalizedPath}`) return true
+      return false
+    })
     return matchingKey ? modules[matchingKey] : null
   }
 
@@ -133,12 +149,17 @@ function findSlidesModule(modules: ModuleMap, path: string): ModuleLoader | null
   // 1. folder/SLIDES.mdx (current convention)
   // 2. folder/index.slides.mdx (alternative)
   const candidates = [
-    `/${path}/SLIDES.mdx`,
-    `/${path}/index.slides.mdx`,
+    `${normalizedPath}/SLIDES.mdx`,
+    `${normalizedPath}/index.slides.mdx`,
   ]
 
-  for (const suffix of candidates) {
-    const matchingKey = keys.find(key => key.endsWith(suffix))
+  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]
     }

package/src/index.css

@@ -325,8 +325,7 @@
   .slides-container > .running-bar,
   .slides-container hr,
   .slides-container > title,
-  header.print\\:hidden,
-  [class*="print:hidden"] {
+  body > header {
     display: none !important;
     height: 0 !important;
     width: 0 !important;

package/src/lib/content-classification.ts

@@ -1,6 +1,6 @@
 import type { ContentView } from "../../plugin/src/types";
 import type { DirectoryEntry, FileEntry } from "../../plugin/src/lib";
-import { findReadme, findSlides, findMdxFiles } from "../../plugin/src/client";
+import { findReadme, findSlides, findMdxFiles, findStandaloneSlides } from "../../plugin/src/client";
 
 export type PostEntry = {
   type: 'folder' | 'file';
@@ -39,6 +39,7 @@ export function getViewCounts(posts: PostEntry[]): { posts: number; docs: number
 export function directoryToPostEntries(directory: DirectoryEntry): PostEntry[] {
   const folders = directory.children.filter((c): c is DirectoryEntry => c.type === "directory");
   const standaloneFiles = findMdxFiles(directory);
+  const standaloneSlidesFiles = findStandaloneSlides(directory);
 
   const folderPosts: PostEntry[] = folders
     .map((folder) => ({
@@ -60,7 +61,17 @@ export function directoryToPostEntries(directory: DirectoryEntry): PostEntry[] {
     file,
   }));
 
-  return [...folderPosts, ...filePosts];
+  // Standalone slides files (e.g., getting-started.slides.mdx)
+  const slidesPosts: PostEntry[] = standaloneSlidesFiles.map((file) => ({
+    type: 'file' as const,
+    name: file.name.replace(/\.slides\.mdx?$/, ''),
+    path: file.path,
+    readme: null,
+    slides: file,
+    file: null,
+  }));
+
+  return [...folderPosts, ...filePosts, ...slidesPosts];
 }
 
 export function filterVisiblePosts(posts: PostEntry[]): PostEntry[] {

package/src/lib/frontmatter-context.tsx

@@ -0,0 +1,29 @@
+import { createContext, useContext, ReactNode } from 'react';
+
+export interface Frontmatter {
+  title?: string;
+  description?: string;
+  date?: string;
+  visibility?: string;
+  draft?: boolean;
+}
+
+const FrontmatterContext = createContext<Frontmatter | undefined>(undefined);
+
+export function FrontmatterProvider({
+  frontmatter,
+  children
+}: {
+  frontmatter: Frontmatter | undefined;
+  children: ReactNode
+}) {
+  return (
+    <FrontmatterContext.Provider value={frontmatter}>
+      {children}
+    </FrontmatterContext.Provider>
+  );
+}
+
+export function useFrontmatter() {
+  return useContext(FrontmatterContext);
+}

package/src/pages/content-router.tsx

@@ -26,7 +26,13 @@ export function ContentRouter() {
   }
 
   // Check if this is a slides file
-  if (path.endsWith('.slides.mdx') || path.endsWith('SLIDES.mdx')) {
+  const filename = path.split('/').pop()?.toLowerCase() || ''
+  const isSlides =
+    path.endsWith('.slides.mdx') ||
+    path.endsWith('.slides.md') ||
+    filename === 'slides.mdx' ||
+    filename === 'slides.md'
+  if (isSlides) {
     return <SlidesPage />
   }
 

package/src/pages/home.tsx

@@ -68,12 +68,12 @@ export function Home({ view }: HomeProps) {
             </div>
           )}
 
-          <div className="">
-            {isRoot && directory && (
+          <div className="flex flex-col gap-2">
+            {/* {isRoot && directory && (
               <div className="animate-fade-in">
                 <ContentTabs value={activeView} counts={counts} />
               </div>
-            )}
+            )} */}
             {directory && (
               <div className="animate-fade-in">
                 <PostList directory={directory} view={isRoot ? activeView : 'all'} />

package/src/pages/post.tsx

@@ -6,7 +6,7 @@ import { RunningBar } from "@/components/running-bar";
 import { Header } from "@/components/header";
 import { useMDXContent } from "@/hooks/use-mdx-content";
 import { mdxComponents } from "@/components/mdx-components";
-import { formatDate } from "@/lib/format-date";
+import { FrontmatterProvider } from "@/lib/frontmatter-context";
 
 export function Post() {
   const { "*": rawPath = "." } = useParams();
@@ -55,29 +55,11 @@ export function Post() {
         )}
 
         {Content && (
-          <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">
-            {/* Render frontmatter header */}
-            {frontmatter?.title && (
-              <header className="not-prose flex flex-col gap-2 mb-8 pt-4">
-                <h1 className="text-2xl md:text-3xl font-semibold tracking-tight text-foreground mb-3">
-                  {frontmatter.title}
-                </h1>
-                {frontmatter?.date && (
-                  <div className="flex flex-wrap items-center gap-3 text-muted-foreground">
-                    <time className="font-mono text-xs bg-muted px-2 py-0.5 rounded">
-                      {formatDate(new Date(frontmatter.date as string))}
-                    </time>
-                  </div>
-                )}
-                {frontmatter?.description && (
-                  <div className="flex flex-wrap text-sm items-center gap-3 text-muted-foreground">
-                    {frontmatter.description}
-                  </div>
-                )}
-              </header>
-            )}
-            <Content components={mdxComponents} />
-          </article>
+          <FrontmatterProvider frontmatter={frontmatter}>
+            <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">
+              <Content components={mdxComponents} />
+            </article>
+          </FrontmatterProvider>
         )}
       </main>
     </div>

package/src/pages/slides.tsx

@@ -6,6 +6,7 @@ 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";
 
 
 export function SlidesPage() {
@@ -18,8 +19,7 @@ export function SlidesPage() {
   // 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 = (slideCount || 0) + 1;
+  const totalSlides = slideCount || 0;
 
   const [currentSlide, setCurrentSlide] = useState(0);
   const titleSlideRef = useRef<HTMLDivElement>(null);
@@ -29,7 +29,7 @@ export function SlidesPage() {
   useEffect(() => {
     const slideParam = parseInt(searchParams.get("slide") || "0", 10);
     if (slideParam > 0 && contentRef.current) {
-      const slideEl = contentRef.current.querySelector(`[data-slide-index="${slideParam - 1}"]`);
+      const slideEl = contentRef.current.querySelector(`[data-slide-index="${slideParam}"]`);
       if (slideEl) {
         slideEl.scrollIntoView({ behavior: "auto" });
       }
@@ -44,7 +44,7 @@ export function SlidesPage() {
           if (entry.isIntersecting) {
             const index = entry.target.getAttribute("data-slide-index");
             if (index !== null) {
-              const slideNum = index === "title" ? 0 : parseInt(index, 10) + 1;
+              const slideNum = index === "title" ? 0 : parseInt(index, 10);
               setCurrentSlide(slideNum);
               setSearchParams(slideNum > 0 ? { slide: String(slideNum) } : {}, { replace: true });
             }
@@ -71,20 +71,16 @@ export function SlidesPage() {
   // Keyboard/scroll navigation helpers
   const goToPrevious = useCallback(() => {
     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}"]`);
+    if (contentRef.current) {
+      const slideEl = contentRef.current.querySelector(`[data-slide-index="${prev}"]`);
       slideEl?.scrollIntoView({ behavior: "smooth" });
     }
   }, [currentSlide]);
 
   const goToNext = useCallback(() => {
     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}"]`);
+    if (contentRef.current) {
+      const slideEl = contentRef.current.querySelector(`[data-slide-index="${next}"]`);
       slideEl?.scrollIntoView({ behavior: "smooth" });
     }
   }, [currentSlide, totalSlides]);
@@ -137,11 +133,13 @@ export function SlidesPage() {
           onNext: goToNext,
         }}
       />
-      <div {...{[FULLSCREEN_DATA_ATTR]: "true"}}>
-        <div ref={contentRef}>
-          <Content components={slidesMdxComponents} />
+      <FrontmatterProvider frontmatter={frontmatter}>
+        <div {...{[FULLSCREEN_DATA_ATTR]: "true"}}>
+          <div ref={contentRef}>
+            <Content components={slidesMdxComponents} />
+          </div>
         </div>
-      </div>
+      </FrontmatterProvider>
     </main>
   )
 }

package/vite.config.ts

@@ -80,10 +80,11 @@ export default defineConfig(({ command }) => {
     reactResolverPlugin(),
     tailwindcss(),
     // MDX for slides - splits at --- into <Slide> components
+    // Matches: SLIDES.mdx, slides.mdx, *.slides.mdx
     {
       enforce: 'pre',
       ...mdx({
-        include: /SLIDES\.mdx$/,
+        include: /SLIDES\.mdx$|slides\.mdx$/i,
         remarkPlugins: [
           ...commonRemarkPlugins,
           remarkSlides, // Transform --- into <Slide> wrappers
@@ -92,11 +93,11 @@ export default defineConfig(({ command }) => {
         providerImportSource: '@mdx-js/react',
       }),
     },
-    // MDX for regular posts
+    // MDX for regular posts (excludes all slides files)
     {
       enforce: 'pre',
       ...mdx({
-        exclude: /SLIDES\.mdx$/,
+        exclude: /SLIDES\.mdx$|slides\.mdx$/i,
         remarkPlugins: commonRemarkPlugins,
         rehypePlugins: [rehypeKatex],
         providerImportSource: '@mdx-js/react',

package/dist/client/components/content-tabs.js

@@ -1,50 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Link } from "react-router-dom";
-import { cn } from "../lib/utils.js";
-const views = [
-  { key: "posts", label: "posts", path: "/posts" },
-  { key: "docs", label: "docs", path: "/docs" },
-  { key: "all", label: "all", path: "/all" }
-];
-function ContentTabs({ value, counts }) {
-  const hasOnlyPosts = counts.posts > 0 && counts.docs === 0;
-  const hasOnlyDocs = counts.docs > 0 && counts.posts === 0;
-  if (hasOnlyPosts || hasOnlyDocs) {
-    return null;
-  }
-  const isDisabled = (key) => {
-    if (key === "posts") return counts.posts === 0;
-    if (key === "docs") return counts.docs === 0;
-    return false;
-  };
-  return /* @__PURE__ */ jsx("nav", { className: "flex justify-end items-center gap-3 font-mono font-medium text-xs text-muted-foreground", children: views.map((view) => {
-    const disabled = isDisabled(view.key);
-    if (disabled) {
-      return /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "opacity-30 cursor-not-allowed",
-          children: view.label
-        },
-        view.key
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      Link,
-      {
-        to: view.path,
-        className: cn(
-          "transition-colors duration-150",
-          "hover:text-foreground hover:underline hover:underline-offset-4 hover:decoration-primary/60",
-          value === view.key ? "text-foreground underline-offset-4 decoration-primary/60" : ""
-        ),
-        children: view.label
-      },
-      view.key
-    );
-  }) });
-}
-export {
-  ContentTabs
-};
-//# sourceMappingURL=content-tabs.js.map

package/dist/client/components/content-tabs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"content-tabs.js","sources":["../../../src/components/content-tabs.tsx"],"sourcesContent":["import { Link } from \"react-router-dom\";\nimport { cn } from \"@/lib/utils\";\nimport type { ContentView } from \"@/lib/content-classification\";\n\ninterface ContentTabsProps {\n  value: ContentView;\n  counts: { posts: number; docs: number; all: number };\n}\n\nconst views: { key: ContentView; label: string; path: string }[] = [\n  { key: \"posts\", label: \"posts\", path: \"/posts\" },\n  { key: \"docs\", label: \"docs\", path: \"/docs\" },\n  { key: \"all\", label: \"all\", path: \"/all\" },\n];\n\nexport function ContentTabs({ value, counts }: ContentTabsProps) {\n  const hasOnlyPosts = counts.posts > 0 && counts.docs === 0;\n  const hasOnlyDocs = counts.docs > 0 && counts.posts === 0;\n\n  if (hasOnlyPosts || hasOnlyDocs) {\n    return null;\n  }\n\n  const isDisabled = (key: ContentView) => {\n    if (key === \"posts\") return counts.posts === 0;\n    if (key === \"docs\") return counts.docs === 0;\n    return false;\n  };\n\n  return (\n    <nav className=\"flex justify-end items-center gap-3 font-mono font-medium text-xs text-muted-foreground\">\n      {views.map((view) => {\n        const disabled = isDisabled(view.key);\n\n        if (disabled) {\n          return (\n            <span\n              key={view.key}\n              className=\"opacity-30 cursor-not-allowed\"\n            >\n              {view.label}\n            </span>\n          );\n        }\n\n        return (\n          <Link\n            key={view.key}\n            to={view.path}\n            className={cn(\n              \"transition-colors duration-150\",\n              \"hover:text-foreground hover:underline hover:underline-offset-4 hover:decoration-primary/60\",\n              value === view.key\n                ? \"text-foreground underline-offset-4 decoration-primary/60\"\n                : \"\"\n            )}\n          >\n            {view.label}\n          </Link>\n        );\n      })}\n    </nav>\n  );\n}\n"],"names":[],"mappings":";;;AASA,MAAM,QAA6D;AAAA,EACjE,EAAE,KAAK,SAAS,OAAO,SAAS,MAAM,SAAA;AAAA,EACtC,EAAE,KAAK,QAAQ,OAAO,QAAQ,MAAM,QAAA;AAAA,EACpC,EAAE,KAAK,OAAO,OAAO,OAAO,MAAM,OAAA;AACpC;AAEO,SAAS,YAAY,EAAE,OAAO,UAA4B;AAC/D,QAAM,eAAe,OAAO,QAAQ,KAAK,OAAO,SAAS;AACzD,QAAM,cAAc,OAAO,OAAO,KAAK,OAAO,UAAU;AAExD,MAAI,gBAAgB,aAAa;AAC/B,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,CAAC,QAAqB;AACvC,QAAI,QAAQ,QAAS,QAAO,OAAO,UAAU;AAC7C,QAAI,QAAQ,OAAQ,QAAO,OAAO,SAAS;AAC3C,WAAO;AAAA,EACT;AAEA,6BACG,OAAA,EAAI,WAAU,2FACZ,UAAA,MAAM,IAAI,CAAC,SAAS;AACnB,UAAM,WAAW,WAAW,KAAK,GAAG;AAEpC,QAAI,UAAU;AACZ,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAET,UAAA,KAAK;AAAA,QAAA;AAAA,QAHD,KAAK;AAAA,MAAA;AAAA,IAMhB;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,IAAI,KAAK;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,UAAU,KAAK,MACX,6DACA;AAAA,QAAA;AAAA,QAGL,UAAA,KAAK;AAAA,MAAA;AAAA,MAVD,KAAK;AAAA,IAAA;AAAA,EAahB,CAAC,EAAA,CACH;AAEJ;"}