veslx 0.1.22 → 0.1.24

package/src/components/post-list.tsx

@@ -2,7 +2,7 @@ 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 } from "lucide-react";
+import { ArrowRight, Presentation } from "lucide-react";
 import {
   type ContentView,
   type PostEntry,
@@ -117,6 +117,8 @@ export default function PostList({ directory, view = 'all' }: PostListProps) {
           linkPath = `/${post.path}`;
         }
 
+        const isSlides = linkPath.endsWith('SLIDES.mdx');
+
         return (
           <Link
             key={post.path}
@@ -126,15 +128,7 @@ export default function PostList({ directory, view = 'all' }: PostListProps) {
               "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>
-
+            <article className="flex items-center gap-4">
               {/* Main content */}
               <div className="flex-1 min-w-0">
                 <h3 className={cn(
@@ -152,6 +146,16 @@ export default function PostList({ directory, view = 'all' }: PostListProps) {
                   </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>
         );

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

@@ -0,0 +1,16 @@
+
+
+export function FigureSlide({
+  title,
+  src,
+}: {
+  title: string;
+  src: string;
+}) {
+  return (
+    <div className="figure-slide">
+      <h2>{title}</h2>
+      <img src={src} alt={title} />
+    </div>
+  );
+}

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

@@ -0,0 +1,34 @@
+
+export function HeroSlide({
+  title,
+  subtitle,
+  author,
+  date,
+}: {
+  title: string;
+  subtitle?: string;
+  author?: string;
+  date?: string;
+}) {
+  return (
+    <div>
+      <h1 className="text-[clamp(2.5rem,6vw,5rem)] font-semibold leading-[1.1] tracking-[-0.02em] text-foreground text-balance">
+        {title}
+      </h1>
+
+      {subtitle && (
+        <p className="text-[clamp(1rem,2vw,1.5rem)] text-muted-foreground max-w-[50ch] leading-relaxed">
+          {subtitle}
+        </p>
+      )}
+
+      {(author || date) && (
+        <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground mt-4">
+          {author && <span>{author}</span>}
+          {author && date && <span className="text-border">·</span>}
+          {date && <span>{date}</span>}
+        </div>
+      )}
+    </div>
+  );
+}

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/index.css

@@ -435,3 +435,8 @@
     break-inside: avoid !important;
   }
 }
+
+/* FOUC prevention: CSS loaded, reveal content */
+body {
+  visibility: visible;
+}

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/slides.tsx

@@ -19,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);
@@ -30,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" });
       }
@@ -45,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 });
             }
@@ -72,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]);

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;"}