@berlysia/vertical-writing-slide-system 0.0.1

package/README.md

@@ -0,0 +1,73 @@
+# Slides Application
+
+A React-based slides application built with Vite that supports markdown-based presentations with vertical and horizontal writing modes. Features hot module reloading and comprehensive browser compatibility testing.
+
+## Features
+
+- Support for both vertical and horizontal writing modes (縦書き・横書き)
+- MDX-based slide creation
+- Print mode support
+- Browser compatibility across Chrome, Firefox, and Safari
+
+## Usage
+
+```bash
+vertical-slides <command> [options]
+```
+
+### Commands
+
+- `dev` - Start development server
+- `buildAll` - Build all pages
+- `build` - Build current page
+
+### Options
+
+- `--dir, -d <path>` - Specify custom slides directory (required unless --debug)
+- `--name, -n <name>` - Specify custom slide name in directory
+- `--debug` - Enable debug mode
+
+### Examples
+
+```bash
+# Start development server for slides in './my-slides' directory
+vertical-slides dev --dir ./my-slides
+
+# Build all slides from specified directory
+vertical-slides buildAll --dir ./my-slides
+
+# Build specific slides with custom name
+vertical-slides build --dir ./my-slides --name custom-presentation
+```
+
+For development documentation, see [DEVELOPMENT.md](DEVELOPMENT.md).
+
+## Writing Modes
+
+The application supports both vertical and horizontal writing modes:
+
+- Vertical (日本語縦書き): Traditional Japanese vertical writing mode
+- Horizontal: Standard left-to-right horizontal writing mode
+
+Writing modes can be switched dynamically during presentation.
+
+## Browser Compatibility
+
+The application is tested and supported across:
+
+- Chrome/Chromium
+- Firefox
+- Safari
+
+Visual regression tests ensure consistent rendering across browsers, with special attention to writing mode implementations.
+
+## Known Limitations
+
+### Print Mode
+
+Print behavior may be unstable across different browsers and scenarios. Users should test print output in their target browser before final use.
+
+### Browser-Specific Issues
+
+- Firefox: Container Style Queries are not yet supported, which may affect some layout features
+  - https://webstatus.dev/features/container-style-queries

package/cli.js

@@ -0,0 +1,118 @@
+#!/usr/bin/env node
+
+import { resolve } from "path";
+import { execSync } from "child_process";
+import { parseArgs } from "node:util";
+
+async function runDev() {
+  const { createServer } = await import("vite");
+  const server = await createServer({
+    configFile: resolve(import.meta.dirname, "vite.config.ts"),
+    root: import.meta.dirname,
+    mode: "development",
+  });
+
+  await server.listen();
+  console.log(`Development server running at ${server.resolvedUrls?.local[0]}`);
+  console.log("Press Ctrl+C to exit");
+}
+
+async function runBuildAll() {
+  const buildPagesPath = resolve(
+    import.meta.dirname,
+    "scripts",
+    "build-pages.ts",
+  );
+  const command = `node ${buildPagesPath}`;
+
+  try {
+    execSync(command, { stdio: "inherit" });
+  } catch (error) {
+    console.error("Error during build:", error);
+    process.exit(1);
+  }
+  console.log("Build completed successfully");
+}
+
+async function runBuild() {
+  try {
+    execSync("pnpm run build", { stdio: "inherit" });
+  } catch (error) {
+    console.error("Error during build:", error);
+    process.exit(1);
+  }
+  console.log("Build completed successfully");
+}
+
+const commands = {
+  dev: runDev,
+  buildAll: runBuildAll,
+  build: runBuild,
+};
+
+function printUsage() {
+  console.error("Usage: vertical-slides <command> [options]");
+  console.error("Commands:");
+  console.error("  dev         - Start development server");
+  console.error("  buildAll    - Build all pages");
+  console.error("  build       - Build current page");
+  console.error("");
+  console.error("Options:");
+  console.error(
+    "  --dir, -d <path>   - Specify custom slides directory (required unless --debug)",
+  );
+  console.error(
+    "  --name, -n <name>  - Specify custom slide name in directory",
+  );
+  console.error("  --debug            - Enable debug mode");
+}
+
+async function main() {
+  const { values, positionals } = parseArgs({
+    args: process.argv.slice(2),
+    options: {
+      dir: {
+        type: "string",
+        short: "d",
+      },
+      name: {
+        type: "string",
+        short: "n",
+      },
+      debug: {
+        type: "boolean",
+        default: false,
+      },
+    },
+    allowPositionals: true,
+  });
+
+  const [command] = positionals;
+
+  if (!command || !commands[command]) {
+    printUsage();
+    process.exit(1);
+  }
+
+  if (!values.dir && !values.debug) {
+    console.error("Error: --dir option is required (unless --debug is used)");
+    printUsage();
+    process.exit(1);
+  }
+
+  if (values.dir) {
+    process.env.SLIDES_DIR = values.dir;
+  }
+  if (values.name) {
+    process.env.SLIDE_NAME = values.name;
+  }
+
+  try {
+    await commands[command]();
+  } catch (error) {
+    console.error(`Error during ${command}:`, error);
+    process.exit(1);
+  }
+}
+
+main();

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@berlysia/vertical-writing-slide-system",
+  "version": "0.0.1",
+  "type": "module",
+  "bin": {
+    ".": "./cli.js",
+    "vertical-slides": "./cli.js"
+  },
+  "files": [
+    "cli.js",
+    "scripts",
+    "src"
+  ],
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@mdx-js/react": "^3.1.0",
+    "@mdx-js/rollup": "^3.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rehype-react": "^8.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.1",
+    "unified": "^11.0.5",
+    "vfile": "^6.0.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@mdx-js/mdx": "^3.1.0",
+    "@playwright/experimental-ct-react": "^1.51.0",
+    "@playwright/test": "^1.51.0",
+    "@types/mdast": "^4.0.4",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^22.13.9",
+    "@types/prompts": "^2.4.9",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^16.0.0",
+    "playwright-core": "^1.51.0",
+    "prettier": "^3.5.3",
+    "prompts": "^2.4.2",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "^8.26.0",
+    "unist-util-visit": "^5.0.0",
+    "vite": "^6.2.1"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "build:pages": "node scripts/build-pages.ts",
+    "test:vrt": "playwright test",
+    "test:vrt:clear": "rm -rf tests/__snapshots__",
+    "test:vrt:update": "playwright test --update-snapshots",
+    "ai:test:vrt": "AI=1 playwright test",
+    "ai:test:vrt:update": "AI=1 playwright test --update-snapshots"
+  }
+}

package/scripts/build-pages.ts

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+
+import { execSync } from "child_process";
+import { existsSync } from "fs";
+import { mkdir, readdir, stat, cp, writeFile } from "fs/promises";
+import { join, resolve } from "path";
+
+const defaultSlidesDir = resolve(import.meta.dirname, "..", "slides");
+const slidesDir = process.env.SLIDES_DIR;
+const pagesDir = "pages";
+
+// Ensure pages directory exists
+await mkdir(pagesDir, { recursive: true });
+
+async function buildSlide(slideName: string) {
+  console.log(`Building ${slideName}...`);
+  process.env.SLIDE_NAME = slideName;
+  execSync("pnpm run build", { stdio: "inherit" });
+
+  const slideOutputDir = join(pagesDir, slideName);
+  await mkdir(slideOutputDir, { recursive: true });
+  await cp("dist", slideOutputDir, { recursive: true });
+}
+
+async function createIndexPage(slideNames: string[]) {
+  const slides = slideNames
+    .map((name) => `    <li><a href="${name}/">${name}</a></li>`)
+    .join("\n");
+
+  const html = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Slides Index</title>
+</head>
+<body>
+  <h1>Available Slides</h1>
+  <ul>
+${slides}
+  </ul>
+</body>
+</html>`;
+
+  await writeFile(join(pagesDir, "index.html"), html);
+}
+
+async function main() {
+  const resolvedSlidesDir = slidesDir ?? defaultSlidesDir;
+  // Build all slides
+  if (!existsSync(resolvedSlidesDir)) {
+    throw new Error(`Slides directory not found (tried: ${resolvedSlidesDir})`);
+  }
+  const slideNames = await readdir(resolvedSlidesDir);
+  const slideStats = await Promise.all(
+    slideNames.map((item) => stat(join(resolvedSlidesDir, item))),
+  );
+  const slides = slideNames.filter((_, index) =>
+    slideStats[index].isDirectory(),
+  );
+
+  if (slides.length === 0) {
+    throw new Error("No slides found");
+  }
+
+  for (const slide of slides) {
+    await buildSlide(slide);
+  }
+  await createIndexPage(slides);
+}
+
+await main();

package/src/App.tsx

@@ -0,0 +1,186 @@
+import { useState, useRef, useEffect } from "react";
+import slidesContent from "virtual:slides.js";
+
+function App() {
+  const [writingMode, setWritingMode] = useState("vertical-rl");
+  const isVertical = writingMode !== "horizontal-tb";
+  const slidesRef = useRef<HTMLDivElement>(null);
+
+  const [fontSize, setFontSize] = useState(42);
+  const [withAbsoluteFontSize, setWithAbsoluteFontSize] = useState(false);
+
+  // ロード時にハッシュが入ってたらそのページにスクロール
+  useEffect(() => {
+    const hash = location.hash;
+    if (hash) {
+      const target = document.querySelector(hash);
+      if (target) {
+        target.scrollIntoView();
+      }
+    }
+  }, [writingMode]);
+
+  // IntersectionObserverでスクロール位置に応じてページ番号を変更
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const id = entry.target.id;
+            const index = parseInt(id.replace("page-", ""));
+            history.replaceState(null, "", `#page-${index}`);
+          }
+        });
+      },
+      { threshold: 0.5 },
+    );
+    if (slidesRef.current) {
+      slidesRef.current.querySelectorAll(".slide").forEach((slide) => {
+        observer.observe(slide);
+      });
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  function gotoNextSlide(forward = true) {
+    const currentHash = location.hash;
+    const currentIndex = parseInt(currentHash.replace("#page-", ""));
+    const nextIndex = forward ? currentIndex + 1 : currentIndex - 1;
+    if (nextIndex < 0 || nextIndex >= slidesContent.length) {
+      return;
+    }
+    location.hash = `#page-${nextIndex}`;
+  }
+
+  // keydownイベントでページ送り
+  useEffect(() => {
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (
+        event.key === "ArrowLeft" ||
+        event.key === "ArrowDown" ||
+        (event.key === " " && !event.shiftKey)
+      ) {
+        event.preventDefault();
+        gotoNextSlide();
+      } else if (
+        event.key === "ArrowRight" ||
+        event.key === "ArrowUp" ||
+        (event.key === " " && event.shiftKey)
+      ) {
+        event.preventDefault();
+        gotoNextSlide(false);
+      }
+    };
+    const handleWheel = (event: WheelEvent) => {
+      if (event.deltaY > 0) {
+        gotoNextSlide();
+      } else if (event.deltaY < 0) {
+        gotoNextSlide(false);
+      }
+    };
+    const controller = new AbortController();
+    window.addEventListener("keydown", handleKeydown, {
+      signal: controller.signal,
+    });
+    window.addEventListener("wheel", handleWheel, {
+      signal: controller.signal,
+    });
+    return () => {
+      controller.abort();
+    };
+  }, [gotoNextSlide]);
+
+  return (
+    <div
+      className="slides-container"
+      style={{ "--slide-writing-mode": writingMode }}
+    >
+      <div className="slides" ref={slidesRef}>
+        {slidesContent.map((content, index) => {
+          if (typeof content === "string") {
+            return (
+              <div className="slide" id={`page-${index}`} key={index}>
+                <div
+                  className="slide-content"
+                  style={
+                    withAbsoluteFontSize ? { fontSize: `${fontSize}px` } : {}
+                  }
+                  dangerouslySetInnerHTML={{
+                    __html: content,
+                  }}
+                />
+              </div>
+            );
+          } else {
+            const SlideComponent = content;
+            return (
+              <div className="slide" id={`page-${index}`} key={index}>
+                <div
+                  className="slide-content"
+                  style={
+                    withAbsoluteFontSize ? { fontSize: `${fontSize}px` } : {}
+                  }
+                >
+                  <SlideComponent />
+                </div>
+              </div>
+            );
+          }
+        })}
+      </div>
+      <div className="controls">
+        <div>
+          <button type="button" onClick={() => gotoNextSlide()}>
+            次
+          </button>
+          <button
+            type="button"
+            onClick={() =>
+              setWritingMode(isVertical ? "horizontal-tb" : "vertical-rl")
+            }
+          >
+            {isVertical ? "横書きにする" : "縦書きにする"}
+          </button>
+          <button type="button" onClick={() => gotoNextSlide(false)}>
+            前
+          </button>
+        </div>
+        <div>
+          <label>
+            フォントサイズを指定する
+            <input
+              type="checkbox"
+              checked={withAbsoluteFontSize}
+              onChange={(e) => setWithAbsoluteFontSize(e.target.checked)}
+            />
+          </label>
+          <label>
+            <input
+              type="number"
+              min="10"
+              step="1"
+              value={fontSize}
+              onChange={(e) => {
+                const t = Number(e.target.value);
+                setFontSize(Number.isNaN(t) || t < 4 ? 4 : t);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+                  e.stopPropagation();
+                }
+              }}
+              style={{
+                inlineSize: `${fontSize.toString(10).length / 2 + 2}em`,
+              }}
+            />
+            px
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;

package/src/global.d.ts

@@ -0,0 +1,7 @@
+import "react";
+
+declare module "react" {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number;
+  }
+}

package/src/index.css

@@ -0,0 +1,101 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family:
+    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP",
+    sans-serif;
+  font-weight: 600;
+  font-style: normal;
+
+  /* Prevent text size adjustments */
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+
+  text-rendering: geometricPrecision;
+}
+
+code {
+  font-family: "Noto Sans Mono", monospace;
+  font-optical-sizing: auto;
+  font-variation-settings: "wdth" 100;
+}
+
+@property --slide-writing-mode {
+  syntax: "horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr";
+  inherits: true;
+  initial-value: horizontal-tb;
+}
+
+.slide-content {
+  width: 100%;
+  height: 100%;
+
+  position: relative;
+
+  .wrapper {
+    width: 100%;
+    height: 100%;
+    padding: 1.2em 1.2em;
+
+    position: relative;
+
+    &.center {
+      display: block flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .header-and-content {
+    display: block flex;
+    flex-direction: column;
+    max-block-size: 100%;
+    max-inline-size: 100%;
+    overflow: hidden;
+  }
+
+  h1 {
+    font-size: 1.4em;
+    font-weight: bold;
+    margin: 0;
+    margin-block-end: 0.2em;
+  }
+  ul,
+  ol {
+    list-style-position: outside;
+    margin: 0;
+    margin-block-end: 1em;
+  }
+  ul ul,
+  ol ol {
+    margin-block-end: 1em;
+  }
+  ul ul ul,
+  ol ol ol {
+    margin-block-end: 0;
+  }
+  p {
+    margin: 0;
+    margin-block-end: 0.5em;
+  }
+
+  .wm-toggle {
+    @container style(--slide-writing-mode: vertical-rl) {
+      /* !importantがないと上書きできない。詳細度？ */
+      writing-mode: horizontal-tb !important;
+    }
+    @container style(--slide-writing-mode: horizontal-tb) or style(--slide-writing-mode: unset) {
+      writing-mode: vertical-rl;
+    }
+  }
+
+  .wm-horizontal {
+    writing-mode: horizontal-tb;
+  }
+
+  .wm-vertical {
+    writing-mode: vertical-rl;
+  }
+}

package/src/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/src/print.css

@@ -0,0 +1,103 @@
+@property --print-slide-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --print-slide-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+:root {
+  --print-page-width: 1920px;
+  --print-page-height: 1080px;
+  --print-slide-width: calc(var(--print-page-width) - 0px);
+  --print-slide-height: calc(var(--print-page-height) - 0px);
+  --print-slide-font-size: calc(var(--print-slide-height) / 20);
+}
+
+@page {
+  /* Base page size for all browsers */
+  size: var(--print-page-width) var(--print-page-height);
+  margin: 0;
+}
+
+html,
+body,
+#root {
+  width: 100% !important;
+  height: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: visible !important;
+}
+
+body {
+  /* Ensure print colors are accurate */
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+  /* Prevent any scaling */
+  transform: none !important;
+
+  font-size: var(--print-slide-font-size);
+}
+
+/* Hide controls in print */
+.controls {
+  display: none !important;
+}
+
+/* Slides wrapper adjustments */
+.slides {
+  position: relative;
+}
+
+.slide {
+  /* Size and position */
+  width: 100%;
+  height: 100%;
+
+  /* Writing mode handling */
+  writing-mode: var(--slide-writing-mode);
+
+  /* Force page breaks */
+  page-break-after: always;
+  break-after: page;
+  page-break-inside: avoid;
+  break-inside: avoid;
+
+  /* Print layout */
+  position: relative;
+  overflow: hidden;
+  /* Ensure text remains crisp in print */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /* Maintain font settings */
+}
+
+/* Writing mode toggle specific styles */
+.wm-toggle {
+  writing-mode: inherit !important;
+}
+
+.debug {
+  background-color: orange;
+
+  #root {
+    background-color: yellow;
+  }
+
+  .slides-container {
+    background-color: green;
+  }
+
+  .slide {
+    background-color: red;
+  }
+
+  .slide-content {
+    background-color: pink;
+  }
+}

package/src/remark-slide-images.ts

@@ -0,0 +1,56 @@
+import type { Plugin } from "unified";
+import { visit } from "unist-util-visit";
+import type { Root } from "mdast";
+
+interface RemarkSlideImagesOptions {
+  base: string;
+}
+
+const remarkSlideImages: Plugin<[RemarkSlideImagesOptions], Root> = (
+  options,
+) => {
+  const { base } = options;
+
+  return (tree) => {
+    visit(tree, (node: any) => {
+      // Handle Markdown image syntax
+      if (node.type === "image" && typeof node.url === "string") {
+        if (node.url.startsWith("@slide/")) {
+          node.url = `${base}slide-assets/images/${node.url.slice(7)}`;
+        }
+      }
+
+      // Handle MDX JSX img elements
+      if (node.type === "mdxJsxFlowElement" && node.name === "img") {
+        const src = node.attributes?.find(
+          (attr: any) => attr.type === "mdxJsxAttribute" && attr.name === "src",
+        );
+        if (
+          src &&
+          typeof src.value === "string" &&
+          src.value.startsWith("@slide/")
+        ) {
+          src.value = `${base}slide-assets/images/${src.value.slice(7)}`;
+        }
+      }
+
+      // Handle HTML img tags in Markdown
+      if (node.type === "html") {
+        const value = node.value as string;
+        if (value.startsWith("<img")) {
+          node.value = value.replace(
+            /<img\s+([^>]*src="(@slide\/[^"]+)"[^>]*)>/g,
+            (_, attributes, src) => {
+              return `<img ${attributes.replace(
+                src,
+                `${base}slide-assets/images/${src.slice(7)}`,
+              )}>`;
+            },
+          );
+        }
+      }
+    });
+  };
+};
+
+export default remarkSlideImages;

package/src/screen.css

@@ -0,0 +1,101 @@
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.slides-container {
+  container-name: slide-container;
+  container-type: size;
+
+  width: 100dvw;
+  height: calc(max(90dvh, 100dvw * 9 / 16) + 0px);
+
+  position: relative;
+
+  overflow: hidden;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  border: 1px solid #ccc;
+  background-color: #eee;
+}
+
+.slides {
+  /* コンテナーの中を最大に占める16/9の寸法 */
+  width: 100cqw;
+  height: 100cqh;
+  /* Fix container query precision issues */
+  max-width: calc(100cqh * 16 / 9 - 0.01px);
+  max-height: calc(100cqw * 9 / 16 - 0.01px);
+
+  scroll-snap-type: both mandatory;
+  writing-mode: var(--slide-writing-mode);
+
+  overflow: hidden;
+
+  @container style(--slide-writing-mode: vertical-rl) or style(--slide-writing-mode: vertical-lr) or style(--slide-writing-mode: sideways-rl) or style(--slide-writing-mode: sideways-lr) {
+    overflow-x: scroll;
+  }
+  @container style(--slide-writing-mode: horizontal-tb) or style(--slide-writing-mode: unset) {
+    overflow-y: scroll;
+  }
+}
+
+/* 各スライドのスタイル */
+.slide {
+  width: 100cqw;
+  height: 100cqh;
+  /* Fix container query precision issues */
+  max-width: calc(100cqh * 16 / 9 - 0.01px);
+  max-height: calc(100cqw * 9 / 16 - 0.01px);
+
+  container-name: slide-container;
+  container-type: size;
+
+  background-color: white;
+
+  scroll-snap-align: center;
+  /* Safari and Firefox need this for consistent scroll snapping */
+  scroll-snap-stop: always;
+
+  overflow: hidden;
+
+  /* Support for older versions of Firefox */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  /* Support for older versions of Safari */
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Hide scrollbars consistently across browsers */
+.slide::-webkit-scrollbar {
+  display: none;
+}
+
+.controls {
+  position: fixed;
+  left: 40px;
+  bottom: 40px;
+  background-color: rgba(255, 255, 255, 0.9);
+  opacity: 0.3;
+  padding: 1rem;
+  border-radius: 8px;
+  transition: opacity 0.2s ease-out;
+}
+
+.controls:hover,
+.controls:focus-within {
+  opacity: 1;
+}
+
+.slide-content {
+  font-size: 5cqh;
+}

package/src/slide-components/Layout.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from "react";
+
+export function Layout({ children }: PropsWithChildren) {
+  return <div className="wrapper">{children}</div>;
+}
+
+export function Center({ children }: PropsWithChildren) {
+  return <div className="wrapper center">{children}</div>;
+}
+
+export function HeaderAndContent({ children }: PropsWithChildren) {
+  return <div className="wrapper header-and-content">{children}</div>;
+}

package/src/slide-components/Slide.tsx

@@ -0,0 +1,12 @@
+import { type PropsWithChildren, type JSX } from "react";
+
+type SlideProps = PropsWithChildren<{
+  children: (() => JSX.Element) | JSX.Element;
+}>;
+
+export function Slide({ children }: SlideProps) {
+  if (typeof children === "function") {
+    return children();
+  }
+  return children;
+}

package/src/virtual-slides.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "virtual:slides.js" {
+  type SlideContent = string | (() => JSX.Element) | React.ComponentType;
+  const content: SlideContent[];
+  export default content;
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/vite-plugin-slides.ts

@@ -0,0 +1,353 @@
+import type { Plugin, ViteDevServer, ResolvedConfig } from "vite";
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { mkdirSync, copyFileSync, readdirSync } from "node:fs";
+import prompts from "prompts";
+import { compile } from "@mdx-js/mdx";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import remarkSlideImages from "./remark-slide-images";
+
+async function processMarkdown(markdown: string, base: string) {
+  return await unified()
+    .use(remarkParse)
+    .use(remarkSlideImages, { base })
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypeStringify, { allowDangerousHtml: true })
+    .process(markdown);
+}
+
+export interface SlidesPluginOptions {
+  /** Directory containing the slides (absolute path) */
+  slidesDir?: string;
+  /** Name of the slides collection */
+  collection?: string;
+}
+
+/**
+ * Logger for slides functionality
+ */
+const logger = {
+  info: (message: string) => console.log(`[Slides] ${message}`),
+  error: (message: string, error?: Error) => {
+    console.error(`[Slides] ${message}`);
+    if (error) {
+      console.error(error);
+    }
+  },
+  warn: (message: string) => console.warn(`[Slides] ${message}`),
+};
+
+/**
+ * Validates slides directory
+ * @throws {Error} If directory is invalid or inaccessible
+ */
+function validateSlidesDir(dir: string): void {
+  if (!fs.existsSync(dir)) {
+    throw new Error(`External slides directory not found: ${dir}`);
+  }
+  try {
+    fs.accessSync(dir, fs.constants.R_OK);
+  } catch (err) {
+    throw new Error(`No read permission for external slides directory: ${dir}`);
+  }
+}
+
+/**
+ * Sets up file watcher for slides directory
+ */
+function watchSlidesDir(dir: string, server: ViteDevServer): () => void {
+  logger.info(`Watching slides directory: ${dir}`);
+
+  const watcher = fs.watch(dir, { recursive: true }, (_eventType, filename) => {
+    if (filename) {
+      server.ws.send({
+        type: "full-reload",
+        path: "*",
+      });
+      logger.info(`File changed: ${filename}`);
+    }
+  });
+
+  watcher.on("error", (error) => {
+    logger.error(`Watch error:`, error);
+  });
+
+  return () => {
+    watcher.close();
+    logger.info("Stopped watching slides directory");
+  };
+}
+
+const defaultOptions: Required<SlidesPluginOptions> = {
+  slidesDir: path.resolve(process.cwd(), "slides"),
+  collection: "",
+};
+
+async function selectSlideCollection(slidesDir: string): Promise<string> {
+  const slidesPath = path.resolve(slidesDir);
+
+  if (!fs.existsSync(slidesPath)) {
+    throw new Error(`Slides directory not found: ${slidesPath}`);
+  }
+
+  const collections = readdirSync(slidesPath, { withFileTypes: true })
+    .filter((dirent) => dirent.isDirectory())
+    .map((dirent) => dirent.name);
+
+  if (collections.length === 0) {
+    throw new Error(`No slide collections found in ${slidesPath}`);
+  }
+
+  const response = await prompts({
+    type: "select",
+    name: "collection",
+    message: "Select a slide collection:",
+    choices: collections.map((name) => ({ title: name, value: name })),
+  });
+
+  if (!response.collection) {
+    throw new Error("No slide collection selected");
+  }
+
+  return response.collection;
+}
+
+const virtualFileId = "virtual:slides.js";
+
+function virtualFilePageId(index: number) {
+  return `virtual:slides-page-${index}.js`;
+}
+const virtualFilePageIdPattern = /^virtual:slides-page-(\d+)\.js$/;
+const nullPrefixedVirtualFilePageIdPattern =
+  /^\0virtual:slides-page-(\d+)\.js$/;
+
+export default async function slidesPlugin(
+  options: SlidesPluginOptions = {},
+): Promise<Plugin> {
+  const mergedOptions = { ...defaultOptions, ...options };
+
+  // Validate slides directory
+  try {
+    validateSlidesDir(mergedOptions.slidesDir);
+    logger.info(`Using slides directory: ${mergedOptions.slidesDir}`);
+  } catch (error) {
+    if (error instanceof Error) {
+      logger.error("Failed to validate slides directory", error);
+    }
+    throw error;
+  }
+
+  const config = {
+    ...mergedOptions,
+    collection:
+      mergedOptions.collection ||
+      (await selectSlideCollection(mergedOptions.slidesDir)),
+  };
+  let base: string;
+  let compiledSlides: string[] = [];
+  return {
+    name: "vite-plugin-slides",
+    configResolved(config: ResolvedConfig) {
+      base = config.base;
+    },
+    enforce: "pre",
+    resolveId(id: string) {
+      if (id === virtualFileId) {
+        return "\0" + virtualFileId;
+      }
+      if (virtualFilePageIdPattern.test(id)) {
+        return "\0" + id;
+      }
+    },
+    transform(code, id) {
+      if (
+        id === "\0" + virtualFileId ||
+        nullPrefixedVirtualFilePageIdPattern.test(id)
+      ) {
+        return {
+          code: `import React from 'react';\n${code}`,
+          map: null,
+        };
+      }
+    },
+    async load(id: string) {
+      if (id === "\0" + virtualFileId) {
+        // Look for slides in the configured directory
+        const mdxPath = path.resolve(
+          config.slidesDir,
+          config.collection,
+          "index.mdx",
+        );
+        const mdPath = path.resolve(
+          config.slidesDir,
+          config.collection,
+          "index.md",
+        );
+
+        let filePath: string | undefined;
+        let isMdx = false;
+
+        if (fs.existsSync(mdxPath)) {
+          filePath = mdxPath;
+          isMdx = true;
+          logger.info("Using MDX slides");
+        } else if (fs.existsSync(mdPath)) {
+          filePath = mdPath;
+          logger.info("Using MD slides");
+        } else {
+          logger.warn("No slide files found");
+          return "export default []";
+        }
+
+        const content = fs.readFileSync(filePath, "utf-8");
+
+        if (!isMdx) {
+          const slides = content.split(/^\s*(?:---|\*\*\*|___)\s*$/m);
+          const processedSlides = await Promise.all(
+            slides.map((slide) => processMarkdown(slide, base)),
+          );
+          return `export default ${JSON.stringify(processedSlides.map((p) => p.value))}`;
+        }
+
+        const slides = content.split(/^\s*(?:---|\*\*\*|___)\s*$/m);
+
+        const processedSlides = await Promise.all(
+          slides.map(async (slideContent) => {
+            const result = await compile(slideContent, {
+              outputFormat: "program",
+              development: false,
+              remarkPlugins: [[remarkSlideImages, { base }]],
+            });
+            return result.value as string;
+          }),
+        );
+
+        compiledSlides = processedSlides;
+
+        const numberOfSlides = slides.length;
+        function formatSlideIndex(index: number) {
+          return index
+            .toString()
+            .padStart(numberOfSlides.toString(10).length, "0");
+        }
+
+        // read src/slide-components directory
+        const slideComponentsDir = path.resolve(
+          import.meta.dirname,
+          `slide-components`,
+        );
+        const slideComponentsFilenames = fs.existsSync(slideComponentsDir)
+          ? readdirSync(slideComponentsDir)
+          : [];
+        function filenameToComponentName(filename: string) {
+          return filename.replace(/\.[jt]sx?$/, "");
+        }
+
+        // Return as a module
+        return `
+            ${slideComponentsFilenames.map((filename) => `import * as ${filenameToComponentName(filename)} from '@components/${filename}';`).join("\n")}
+
+            const SlideComponents = {${slideComponentsFilenames.map((filename) => `...${filenameToComponentName(filename)}`).join(", ")}};
+
+            ${compiledSlides.map((_, index) => `import Slide${formatSlideIndex(index)} from '${virtualFilePageId(index)}';`).join("\n")}
+
+            // provide slide components to each slide
+            // Wrap SlideN components to provide SlideComponents
+            ${compiledSlides
+              .map(
+                (_, index) => `
+              const Slide${formatSlideIndex(index)}WithComponents = (props) => {
+                return React.createElement(Slide${formatSlideIndex(index)}, {
+                  ...props,
+                  components: SlideComponents
+                });
+              };
+            `,
+              )
+              .join("\n")}
+            export default [${compiledSlides.map((_, i) => `Slide${formatSlideIndex(i)}WithComponents`).join(", ")}];
+          `;
+      }
+
+      if (nullPrefixedVirtualFilePageIdPattern.test(id)) {
+        const match = id.match(nullPrefixedVirtualFilePageIdPattern);
+        if (match) {
+          const index = parseInt(match[1], 10);
+          return compiledSlides[index];
+        }
+      }
+    },
+    async buildStart() {
+      const targetImagesDir = path.resolve(
+        process.cwd(),
+        "public/slide-assets/images",
+      );
+      const sourceImagesDir = path.resolve(
+        config.slidesDir,
+        config.collection,
+        "images",
+      );
+
+      // Copy images from slides directory
+      if (fs.existsSync(sourceImagesDir)) {
+        try {
+          // Create target directory if it doesn't exist
+          mkdirSync(targetImagesDir, { recursive: true });
+
+          // Copy all files from source to target
+          const imageFiles = readdirSync(sourceImagesDir);
+          for (const file of imageFiles) {
+            const sourcePath = path.join(sourceImagesDir, file);
+            const targetPath = path.join(targetImagesDir, file);
+            copyFileSync(sourcePath, targetPath);
+          }
+          logger.info("Copied slide images successfully");
+        } catch (error) {
+          if (error instanceof Error) {
+            logger.error("Failed to copy slide images", error);
+          }
+          throw error;
+        }
+      }
+    },
+
+    configureServer(server: ViteDevServer) {
+      // Watch slides directory
+      const watcher = watchSlidesDir(config.slidesDir, server);
+
+      const reloadModule = () => {
+        const mod = server.moduleGraph.getModuleById("\0" + virtualFileId);
+        const pageMods = compiledSlides.map((_, i) =>
+          server.moduleGraph.getModuleById(virtualFilePageId(i)),
+        );
+        if (mod) {
+          server.moduleGraph.invalidateModule(mod);
+        }
+        for (const pageMod of pageMods) {
+          if (pageMod) {
+            server.moduleGraph.invalidateModule(pageMod);
+          }
+        }
+        server.ws.send({
+          type: "full-reload",
+          path: "*",
+        });
+      };
+
+      server.watcher.on("change", (path: string) => {
+        if (path.includes(config.slidesDir) && /\.(?:md|mdx)$/.test(path)) {
+          logger.info(`Slide file changed: ${path}`);
+          reloadModule();
+        }
+      });
+
+      // Cleanup on server shutdown
+      return () => {
+        watcher();
+      };
+    },
+  };
+}