@berlysia/vertical-writing-slide-system 0.0.3 → 0.0.4

package/README.md

@@ -12,7 +12,7 @@ A React-based slides application built with Vite that supports markdown-based pr
 ## Usage
 
 ```bash
-vertical-slides <command> [options]
+npx @berlysia/vertical-writing-slide-system <command> [options]
 ```
 
 ### Commands
@@ -31,15 +31,36 @@ vertical-slides <command> [options]
 
 ```bash
 # Start development server for slides in './my-slides' directory
-vertical-slides dev --dir ./my-slides
+npx @berlysia/vertical-writing-slide-system dev --dir ./my-slides
 
 # Build all slides from specified directory
-vertical-slides buildAll --dir ./my-slides
+npx @berlysia/vertical-writing-slide-system buildAll --dir ./my-slides
 
 # Build specific slides with custom name
-vertical-slides build --dir ./my-slides --name custom-presentation
+npx @berlysia/vertical-writing-slide-system build --dir ./my-slides --name custom-presentation
 ```
 
+## Slides Directory Structure
+
+Your slides directory should follow this structure:
+
+```
+slides/
+  ├── presentation-name/     # Directory for each presentation
+  │   ├── index.mdx         # Main presentation content
+  │   └── images/           # (Optional) Images used in the presentation
+  │       └── example.png
+  └── another-presentation/
+      ├── index.mdx
+      └── images/
+          └── slide-image.png
+```
+
+Each presentation should be in its own directory containing:
+
+- `index.mdx`: The main presentation file with your MDX content. \*.md is also fine
+- `images/`: (Optional) Directory containing images used in the presentation
+
 For development documentation, see [DEVELOPMENT.md](DEVELOPMENT.md).
 
 ## Writing Modes

package/cli.js

@@ -1,42 +1,31 @@
 #!/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");
+  try {
+    execSync("npx vite", { stdio: "inherit" });
+  } catch (error) {
+    console.error("Error during build:", error);
+    process.exit(1);
+  }
 }
 
 async function runBuildAll() {
-  const buildPagesPath = resolve(
-    import.meta.dirname,
-    "scripts",
-    "build-pages.ts",
-  );
-  const command = `npx tsx ${buildPagesPath}`;
-
+  const { buildPages } = await import("./scripts/build-pages.js");
   try {
-    execSync(command, { stdio: "inherit" });
+    await buildPages({ slidesDir: process.env.SLIDES_DIR });
+    console.log("Build completed successfully");
   } 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" });
+    execSync("npx vite build", { stdio: "inherit" });
   } catch (error) {
     console.error("Error during build:", error);
     process.exit(1);

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@berlysia/vertical-writing-slide-system",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "bin": {
     "vertical-slides": "./cli.js"
   },
   "files": [
+    "package.json",
+    "vite.config.ts",
+    "tsconfig.json",
+    "tsconfig.*.json",
     "cli.js",
-    "scripts",
+    "scripts/build-pages.js",
     "src"
   ],
   "dependencies": {
@@ -51,6 +55,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
+    "build:cli": "tsc --project tsconfig.cli.json",
     "lint": "eslint .",
     "preview": "vite preview",
     "build:pages": "node scripts/build-pages.ts",

package/scripts/{build-pages.ts → build-pages.js}

@@ -1,32 +1,23 @@
-#!/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) {
+async function buildSlide(slideName) {
   console.log(`Building ${slideName}...`);
   process.env.SLIDE_NAME = slideName;
-  execSync("pnpm run build", { stdio: "inherit" });
-
+  execSync("npx vite build", { stdio: "inherit" });
   const slideOutputDir = join(pagesDir, slideName);
   await mkdir(slideOutputDir, { recursive: true });
   await cp("dist", slideOutputDir, { recursive: true });
 }
-
-async function createIndexPage(slideNames: string[]) {
+async function createIndexPage(slideNames) {
   const slides = slideNames
     .map((name) => `    <li><a href="${name}/">${name}</a></li>`)
     .join("\n");
-
   const html = `<!DOCTYPE html>
 <html>
 <head>
@@ -40,12 +31,10 @@ ${slides}
   </ul>
 </body>
 </html>`;
-
   await writeFile(join(pagesDir, "index.html"), html);
 }
-
-async function main() {
-  const resolvedSlidesDir = slidesDir ?? defaultSlidesDir;
+export async function buildPages(options = {}) {
+  const resolvedSlidesDir = options.slidesDir ?? defaultSlidesDir;
   // Build all slides
   if (!existsSync(resolvedSlidesDir)) {
     throw new Error(`Slides directory not found (tried: ${resolvedSlidesDir})`);
@@ -57,15 +46,18 @@ async function main() {
   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();
+// CLI entry point
+if (import.meta.url === `file://${process.argv[1]}`) {
+  buildPages({ slidesDir: process.env.SLIDES_DIR }).catch((error) => {
+    console.error(error);
+    process.exit(1);
+  });
+}

package/src/vite-plugin-slides.ts

@@ -127,12 +127,12 @@ const nullPrefixedVirtualFilePageIdPattern =
 export default async function slidesPlugin(
   options: SlidesPluginOptions = {},
 ): Promise<Plugin> {
-  const mergedOptions = { ...defaultOptions, ...options };
+  const config = { ...defaultOptions, ...options };
 
   // Validate slides directory
   try {
-    validateSlidesDir(mergedOptions.slidesDir);
-    logger.info(`Using slides directory: ${mergedOptions.slidesDir}`);
+    validateSlidesDir(config.slidesDir);
+    logger.info(`Using slides directory: ${config.slidesDir}`);
   } catch (error) {
     if (error instanceof Error) {
       logger.error("Failed to validate slides directory", error);
@@ -140,12 +140,13 @@ export default async function slidesPlugin(
     throw error;
   }
 
-  const config = {
-    ...mergedOptions,
-    collection:
-      mergedOptions.collection ||
-      (await selectSlideCollection(mergedOptions.slidesDir)),
-  };
+  if (config.collection) {
+    logger.info(`Using slide: ${config.collection}`);
+  } else {
+    logger.info("No slide collection specified, prompting for selection");
+    config.collection = await selectSlideCollection(config.slidesDir);
+  }
+
   let base: string;
   let compiledSlides: string[] = [];
   return {

package/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.cli.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "rewriteRelativeImportExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["scripts/**/*.ts"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import mdx from "@mdx-js/rollup";
+import * as path from "node:path";
+import slidesPlugin from "./src/vite-plugin-slides";
+
+export default defineConfig(async () => {
+  return {
+    base: "./",
+    resolve: {
+      alias: {
+        "@components": "/src/slide-components",
+      },
+    },
+    plugins: [
+      await slidesPlugin({
+        slidesDir:
+          process.env.SLIDES_DIR || path.resolve(import.meta.dirname, "slides"),
+        collection:
+          process.env.SLIDE_NAME || (process.env.isAI ? "vrt-test" : undefined),
+      }),
+      mdx({
+        jsx: true,
+        jsxImportSource: "react",
+        providerImportSource: "@mdx-js/react",
+      }),
+      react(),
+    ],
+    optimizeDeps: {
+      // Add virtual module to optimization
+      // include: ["virtual:slides.js", "virtual:slides-page-*.js"],
+    },
+  };
+});