nextjs-slides 0.5.2 → 0.5.3

package/README.md

@@ -175,7 +175,7 @@ Keyboard events are ignored inside `<SlideDemo>`, inputs, and textareas so you c
 
 ## Speaker Notes
 
-Write notes in a markdown file — one section per slide, separated by `---`. Empty sections mean no notes for that slide:
+Write notes in a markdown file — one section per slide, separated by `---` on its own line. Sections are matched to slides by **position**: the first section = slide 1, the second = slide 2, and so on. Empty sections mean no notes for that slide.
 
 ```md
 Welcome everyone. This is the opening slide.
@@ -191,7 +191,15 @@ Talk about the base container here.
 Slide 4 notes. Slide 3 had none.
 ```
 
-Parse the file and pass it to `SlideDeck`:
+**Keep the number of sections in sync with your slides** — if you have 12 slides, you need 12 sections (empty is fine). Don't start the file with `---`; the first block of text (before any `---`) is for slide 1.
+
+**Leading document title:** If the file starts with `# My Title` (a single heading line), use `stripLeadingTitle: true` so that block isn't treated as slide 1:
+
+```ts
+parseSpeakerNotes(markdown, { stripLeadingTitle: true })
+```
+
+Parse the file and pass it to `SlideDeck`. Include `syncEndpoint` so the phone can follow along:
 
 ```tsx
 // app/slides/layout.tsx
@@ -217,10 +225,14 @@ export default function SlidesLayout({
 }
 ```
 
+Without `syncEndpoint`, the deck won't broadcast slide changes and the phone will stay on the first note.
+
 ### Phone sync (presenter notes on your phone)
 
 Open `/notes` on your phone while presenting on your laptop. The phone shows the current slide's notes and follows along as you navigate with the keyboard.
 
+**How sync works:** When you navigate with arrow keys or spacebar, the deck POSTs `{ slide, total }` to the sync endpoint. The notes page polls that endpoint every 500ms and displays `notes[slide - 1]` — so the notes array index must match slide order. Use the same `notes.md` file in both the layout and the notes page.
+
 **1. Create the sync API route:**
 
 ```ts
@@ -228,7 +240,7 @@ Open `/notes` on your phone while presenting on your laptop. The phone shows the
 export { GET, POST } from "nextjs-slides/sync";
 ```
 
-**2. Create the notes page:**
+**2. Create the notes page** (same `notes.md`, same `parseSpeakerNotes` — indices must match slides):
 
 ```tsx
 // app/notes/page.tsx
@@ -245,7 +257,7 @@ export default function NotesPage() {
 }
 ```
 
-Open your phone on `http://<your-ip>:3000/notes` (same network). The deck POSTs the current slide to the sync endpoint on every navigation; the notes view polls it every 500ms.
+Open your phone on `http://<your-ip>:3000/notes` (same network).
 
 ### Demo notes (extra sections after the slides)
 
@@ -340,6 +352,10 @@ Slide transitions use the React 19 `<ViewTransition>` component with `addTransit
 
 **Exit animation (deck-unveil) not running** — Ensure `SlideDeck` is the direct child of the layout. Wrapping it in a `<div>` can prevent the ViewTransition exit from firing. Use the `className` prop for scoped styling instead.
 
+**Notes out of sync** — Ensure `syncEndpoint` is set and both layout and notes page use the same `notes.md`. On serverless (Vercel), in-memory sync can hit different instances; use a shared store for production.
+
+**Notes show a document title instead of slide 1** — If the file starts with `# My Title` before the first `---`, use `parseSpeakerNotes(markdown, { stripLeadingTitle: true })`.
+
 ## For maintainers
 
 See [DEPLOYMENT.md](DEPLOYMENT.md) for Vercel deployment and release workflow.

package/dist/parse-speaker-notes.d.ts

@@ -2,8 +2,12 @@
  * Parse speaker notes from a markdown string.
  *
  * Format: one section per slide, separated by `---` on its own line.
+ * Sections map to slides by position: notes[0] = slide 1, notes[1] = slide 2, etc.
  * Empty sections produce `null` (no notes for that slide).
  *
+ * @param stripLeadingTitle - If true, removes a leading section that is a single
+ *   markdown heading (# Title). Use when the file starts with a document title.
+ *
  * @example
  * ```md
  * Welcome everyone. This is the opening slide.
@@ -21,21 +25,11 @@
  *
  * @example
  * ```tsx
- * // slides/layout.tsx (server component — can use fs)
- * import fs from 'fs';
- * import path from 'path';
- * import { SlideDeck, parseSpeakerNotes } from 'nextjs-slides';
- * import { slides } from './slides';
- *
- * const notes = parseSpeakerNotes(
- *   fs.readFileSync(path.join(process.cwd(), 'app/slides/notes.md'), 'utf-8'),
- * );
- *
- * export default function SlidesLayout({ children }: { children: React.ReactNode }) {
- *   return <SlideDeck slides={slides} speakerNotes={notes}>{children}</SlideDeck>;
- * }
+ * const notes = parseSpeakerNotes(markdown, { stripLeadingTitle: true });
  * ```
  */
-declare function parseSpeakerNotes(markdown: string): (string | null)[];
+declare function parseSpeakerNotes(markdown: string, options?: {
+    stripLeadingTitle?: boolean;
+}): (string | null)[];
 
 export { parseSpeakerNotes };

package/dist/parse-speaker-notes.js

@@ -1,8 +1,12 @@
-function parseSpeakerNotes(markdown) {
-  return markdown.split(/^---$/m).map((section) => {
+function parseSpeakerNotes(markdown, options) {
+  let sections = markdown.split(/^---$/m).map((section) => {
     const trimmed = section.trim();
     return trimmed.length > 0 ? trimmed : null;
   });
+  if (options?.stripLeadingTitle && sections[0] && /^#+\s+.+$/.test(sections[0].replace(/\n.*/s, ""))) {
+    sections = sections.slice(1);
+  }
+  return sections;
 }
 export {
   parseSpeakerNotes

package/dist/parse-speaker-notes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/parse-speaker-notes.ts"],"sourcesContent":["/**\n * Parse speaker notes from a markdown string.\n *\n * Format: one section per slide, separated by `---` on its own line.\n * Empty sections produce `null` (no notes for that slide).\n *\n * @example\n * ```md\n * Welcome everyone. This is the opening slide.\n *\n * ---\n *\n * Talk about the base container here.\n *\n * ---\n *\n * ---\n *\n * Slide 4 notes. Slide 3 had none.\n * ```\n *\n * @example\n * ```tsx\n * // slides/layout.tsx (server component — can use fs)\n * import fs from 'fs';\n * import path from 'path';\n * import { SlideDeck, parseSpeakerNotes } from 'nextjs-slides';\n * import { slides } from './slides';\n *\n * const notes = parseSpeakerNotes(\n *   fs.readFileSync(path.join(process.cwd(), 'app/slides/notes.md'), 'utf-8'),\n * );\n *\n * export default function SlidesLayout({ children }: { children: React.ReactNode }) {\n *   return <SlideDeck slides={slides} speakerNotes={notes}>{children}</SlideDeck>;\n * }\n * ```\n */\nexport function parseSpeakerNotes(markdown: string): (string | null)[] {\n  return markdown.split(/^---$/m).map((section) => {\n    const trimmed = section.trim();\n    return trimmed.length > 0 ? trimmed : null;\n  });\n}\n"],"mappings":"AAsCO,SAAS,kBAAkB,UAAqC;AACrE,SAAO,SAAS,MAAM,QAAQ,EAAE,IAAI,CAAC,YAAY;AAC/C,UAAM,UAAU,QAAQ,KAAK;AAC7B,WAAO,QAAQ,SAAS,IAAI,UAAU;AAAA,EACxC,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../src/parse-speaker-notes.ts"],"sourcesContent":["/**\n * Parse speaker notes from a markdown string.\n *\n * Format: one section per slide, separated by `---` on its own line.\n * Sections map to slides by position: notes[0] = slide 1, notes[1] = slide 2, etc.\n * Empty sections produce `null` (no notes for that slide).\n *\n * @param stripLeadingTitle - If true, removes a leading section that is a single\n *   markdown heading (# Title). Use when the file starts with a document title.\n *\n * @example\n * ```md\n * Welcome everyone. This is the opening slide.\n *\n * ---\n *\n * Talk about the base container here.\n *\n * ---\n *\n * ---\n *\n * Slide 4 notes. Slide 3 had none.\n * ```\n *\n * @example\n * ```tsx\n * const notes = parseSpeakerNotes(markdown, { stripLeadingTitle: true });\n * ```\n */\nexport function parseSpeakerNotes(\n  markdown: string,\n  options?: { stripLeadingTitle?: boolean },\n): (string | null)[] {\n  let sections = markdown.split(/^---$/m).map((section) => {\n    const trimmed = section.trim();\n    return trimmed.length > 0 ? trimmed : null;\n  });\n\n  if (options?.stripLeadingTitle && sections[0] && /^#+\\s+.+$/.test(sections[0].replace(/\\n.*/s, ''))) {\n    sections = sections.slice(1);\n  }\n\n  return sections;\n}\n"],"mappings":"AA8BO,SAAS,kBACd,UACA,SACmB;AACnB,MAAI,WAAW,SAAS,MAAM,QAAQ,EAAE,IAAI,CAAC,YAAY;AACvD,UAAM,UAAU,QAAQ,KAAK;AAC7B,WAAO,QAAQ,SAAS,IAAI,UAAU;AAAA,EACxC,CAAC;AAED,MAAI,SAAS,qBAAqB,SAAS,CAAC,KAAK,YAAY,KAAK,SAAS,CAAC,EAAE,QAAQ,SAAS,EAAE,CAAC,GAAG;AACnG,eAAW,SAAS,MAAM,CAAC;AAAA,EAC7B;AAEA,SAAO;AACT;","names":[]}

package/dist/slide-deck.js

@@ -28,12 +28,21 @@ function SlideDeck({
     (index) => {
       const clamped = Math.max(0, Math.min(index, total - 1));
       if (clamped === current) return;
+      const targetSlide = clamped + 1;
+      if (syncEndpoint) {
+        fetch(syncEndpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ slide: targetSlide, total })
+        }).catch(() => {
+        });
+      }
       startTransition(() => {
         addTransitionType(clamped > current ? "slide-forward" : "slide-back");
-        router.push(`${basePath}/${clamped + 1}`);
+        router.push(`${basePath}/${targetSlide}`);
       });
     },
-    [basePath, current, router, startTransition, total]
+    [basePath, current, router, startTransition, syncEndpoint, total]
   );
   useEffect(() => {
     if (!isSlideRoute) return;
@@ -66,14 +75,14 @@ function SlideDeck({
     };
   }, []);
   useEffect(() => {
-    if (!syncEndpoint || !isSlideRoute) return;
+    if (!syncEndpoint || !isSlideRoute || isPending) return;
     fetch(syncEndpoint, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ slide: current + 1, total })
     }).catch(() => {
     });
-  }, [syncEndpoint, current, total, isSlideRoute]);
+  }, [syncEndpoint, current, total, isSlideRoute, isPending]);
   return /* @__PURE__ */ jsx(ViewTransition, { default: "none", exit: "deck-unveil", children: /* @__PURE__ */ jsxs(
     "div",
     {

package/dist/slide-deck.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/slide-deck.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport { usePathname, useRouter } from 'next/navigation';\nimport { addTransitionType, useCallback, useEffect, useTransition, ViewTransition } from 'react';\nimport { cn } from './cn';\nimport type { SlideDeckConfig } from './types';\n\nexport function SlideDeck({\n  children,\n  slides,\n  basePath = '/slides',\n  exitUrl,\n  showProgress = true,\n  showCounter = true,\n  syncEndpoint,\n  className,\n}: SlideDeckConfig & { children: React.ReactNode }) {\n  const router = useRouter();\n  const pathname = usePathname();\n  const [isPending, startTransition] = useTransition();\n\n  const total = slides.length;\n  const slideRoutePattern = new RegExp(`^${basePath}/(\\\\d+)$`);\n  const isSlideRoute = slideRoutePattern.test(pathname);\n  const current = (() => {\n    const match = pathname.match(slideRoutePattern);\n    return match ? Number(match[1]) - 1 : 0;\n  })();\n\n  const goTo = useCallback(\n    (index: number) => {\n      const clamped = Math.max(0, Math.min(index, total - 1));\n      if (clamped === current) return;\n      startTransition(() => {\n        addTransitionType(clamped > current ? 'slide-forward' : 'slide-back');\n        router.push(`${basePath}/${clamped + 1}`);\n      });\n    },\n    [basePath, current, router, startTransition, total],\n  );\n\n  useEffect(() => {\n    if (!isSlideRoute) return;\n    if (current > 0) router.prefetch(`${basePath}/${current}`);\n    if (current < total - 1) router.prefetch(`${basePath}/${current + 2}`);\n  }, [basePath, current, isSlideRoute, router, total]);\n\n  useEffect(() => {\n    if (!isSlideRoute) return;\n    function onKeyDown(e: KeyboardEvent) {\n      const target = e.target as HTMLElement;\n      if (\n        target.closest('[data-slide-interactive]') ||\n        target.matches('input, textarea, select, [contenteditable=\"true\"]')\n      ) {\n        return;\n      }\n      if (e.key === 'ArrowRight' || e.key === ' ') {\n        e.preventDefault();\n        goTo(current + 1);\n      } else if (e.key === 'ArrowLeft') {\n        e.preventDefault();\n        goTo(current - 1);\n      }\n    }\n    window.addEventListener('keydown', onKeyDown);\n    return () => window.removeEventListener('keydown', onKeyDown);\n  }, [current, goTo, isSlideRoute]);\n\n  useEffect(() => {\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!syncEndpoint || !isSlideRoute) return;\n    fetch(syncEndpoint, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ slide: current + 1, total }),\n    }).catch(() => {});\n  }, [syncEndpoint, current, total, isSlideRoute]);\n\n  return (\n    <ViewTransition default=\"none\" exit=\"deck-unveil\">\n      <div\n        id=\"slide-deck\"\n        className={cn(\n          'bg-background text-foreground fixed inset-0 z-50 flex flex-col overflow-hidden font-sans select-none',\n          className,\n        )}\n        data-pending={isPending ? '' : undefined}\n      >\n        <div className=\"flex-1 overflow-hidden\">\n        <ViewTransition\n          key={pathname}\n          default=\"none\"\n          enter={{\n            default: 'slide-from-right',\n            'slide-back': 'slide-from-left',\n            'slide-forward': 'slide-from-right',\n          }}\n          exit={{\n            default: 'slide-to-left',\n            'slide-back': 'slide-to-right',\n            'slide-forward': 'slide-to-left',\n          }}\n        >\n          <div>{children}</div>\n        </ViewTransition>\n        </div>\n\n        {isSlideRoute && showProgress && (\n          <div\n            className=\"fixed bottom-8 left-1/2 z-50 flex -translate-x-1/2 items-center gap-1.5\"\n            aria-label=\"Slide progress\"\n          >\n            {Array.from({ length: total }).map((_, i) => (\n              <div\n                key={i}\n                className={cn(\n                  'h-1 transition-all duration-300',\n                  i === current ? 'bg-foreground w-6' : 'bg-foreground/20 w-1',\n                )}\n              />\n            ))}\n          </div>\n        )}\n\n        {isSlideRoute && showCounter && (\n          <div className=\"text-foreground/30 fixed right-8 bottom-8 z-50 font-mono text-xs tracking-wider\">\n            {current + 1} / {total}\n          </div>\n        )}\n\n        {isSlideRoute && exitUrl && (\n          <Link\n            href={exitUrl}\n            className=\"text-foreground/50 hover:text-foreground fixed top-6 right-8 z-50 flex h-10 w-10 items-center justify-center rounded-md transition-colors hover:bg-foreground/10\"\n            aria-label=\"Exit presentation\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <path d=\"M18 6 6 18\" />\n              <path d=\"m6 6 12 12\" />\n            </svg>\n          </Link>\n        )}\n      </div>\n    </ViewTransition>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/slide-deck.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport { usePathname, useRouter } from 'next/navigation';\nimport { addTransitionType, useCallback, useEffect, useTransition, ViewTransition } from 'react';\nimport { cn } from './cn';\nimport type { SlideDeckConfig } from './types';\n\nexport function SlideDeck({\n  children,\n  slides,\n  basePath = '/slides',\n  exitUrl,\n  showProgress = true,\n  showCounter = true,\n  syncEndpoint,\n  className,\n}: SlideDeckConfig & { children: React.ReactNode }) {\n  const router = useRouter();\n  const pathname = usePathname();\n  const [isPending, startTransition] = useTransition();\n\n  const total = slides.length;\n  const slideRoutePattern = new RegExp(`^${basePath}/(\\\\d+)$`);\n  const isSlideRoute = slideRoutePattern.test(pathname);\n  const current = (() => {\n    const match = pathname.match(slideRoutePattern);\n    return match ? Number(match[1]) - 1 : 0;\n  })();\n\n  const goTo = useCallback(\n    (index: number) => {\n      const clamped = Math.max(0, Math.min(index, total - 1));\n      if (clamped === current) return;\n      const targetSlide = clamped + 1; // 1-based for sync API\n      if (syncEndpoint) {\n        fetch(syncEndpoint, {\n          method: 'POST',\n          headers: { 'Content-Type': 'application/json' },\n          body: JSON.stringify({ slide: targetSlide, total }),\n        }).catch(() => {});\n      }\n      startTransition(() => {\n        addTransitionType(clamped > current ? 'slide-forward' : 'slide-back');\n        router.push(`${basePath}/${targetSlide}`);\n      });\n    },\n    [basePath, current, router, startTransition, syncEndpoint, total],\n  );\n\n  useEffect(() => {\n    if (!isSlideRoute) return;\n    if (current > 0) router.prefetch(`${basePath}/${current}`);\n    if (current < total - 1) router.prefetch(`${basePath}/${current + 2}`);\n  }, [basePath, current, isSlideRoute, router, total]);\n\n  useEffect(() => {\n    if (!isSlideRoute) return;\n    function onKeyDown(e: KeyboardEvent) {\n      const target = e.target as HTMLElement;\n      if (\n        target.closest('[data-slide-interactive]') ||\n        target.matches('input, textarea, select, [contenteditable=\"true\"]')\n      ) {\n        return;\n      }\n      if (e.key === 'ArrowRight' || e.key === ' ') {\n        e.preventDefault();\n        goTo(current + 1);\n      } else if (e.key === 'ArrowLeft') {\n        e.preventDefault();\n        goTo(current - 1);\n      }\n    }\n    window.addEventListener('keydown', onKeyDown);\n    return () => window.removeEventListener('keydown', onKeyDown);\n  }, [current, goTo, isSlideRoute]);\n\n  useEffect(() => {\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!syncEndpoint || !isSlideRoute || isPending) return;\n    fetch(syncEndpoint, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ slide: current + 1, total }),\n    }).catch(() => {});\n  }, [syncEndpoint, current, total, isSlideRoute, isPending]);\n\n  return (\n    <ViewTransition default=\"none\" exit=\"deck-unveil\">\n      <div\n        id=\"slide-deck\"\n        className={cn(\n          'bg-background text-foreground fixed inset-0 z-50 flex flex-col overflow-hidden font-sans select-none',\n          className,\n        )}\n        data-pending={isPending ? '' : undefined}\n      >\n        <div className=\"flex-1 overflow-hidden\">\n        <ViewTransition\n          key={pathname}\n          default=\"none\"\n          enter={{\n            default: 'slide-from-right',\n            'slide-back': 'slide-from-left',\n            'slide-forward': 'slide-from-right',\n          }}\n          exit={{\n            default: 'slide-to-left',\n            'slide-back': 'slide-to-right',\n            'slide-forward': 'slide-to-left',\n          }}\n        >\n          <div>{children}</div>\n        </ViewTransition>\n        </div>\n\n        {isSlideRoute && showProgress && (\n          <div\n            className=\"fixed bottom-8 left-1/2 z-50 flex -translate-x-1/2 items-center gap-1.5\"\n            aria-label=\"Slide progress\"\n          >\n            {Array.from({ length: total }).map((_, i) => (\n              <div\n                key={i}\n                className={cn(\n                  'h-1 transition-all duration-300',\n                  i === current ? 'bg-foreground w-6' : 'bg-foreground/20 w-1',\n                )}\n              />\n            ))}\n          </div>\n        )}\n\n        {isSlideRoute && showCounter && (\n          <div className=\"text-foreground/30 fixed right-8 bottom-8 z-50 font-mono text-xs tracking-wider\">\n            {current + 1} / {total}\n          </div>\n        )}\n\n        {isSlideRoute && exitUrl && (\n          <Link\n            href={exitUrl}\n            className=\"text-foreground/50 hover:text-foreground fixed top-6 right-8 z-50 flex h-10 w-10 items-center justify-center rounded-md transition-colors hover:bg-foreground/10\"\n            aria-label=\"Exit presentation\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <path d=\"M18 6 6 18\" />\n              <path d=\"m6 6 12 12\" />\n            </svg>\n          </Link>\n        )}\n      </div>\n    </ViewTransition>\n  );\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-slides",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Composable slide deck primitives for Next.js — powered by React 19 ViewTransitions, Tailwind CSS, and highlight.js syntax highlighting.",
   "license": "MIT",
   "type": "module",