npm - @berlysia/vertical-writing-slide-system - Versions diffs - 0.0.30 → 0.0.32 - Mend

@berlysia/vertical-writing-slide-system 0.0.30 → 0.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/package.json +2 -1
package/scripts/build-pages.js +46 -5
package/src/App.tsx +0 -10
package/src/types/gray-matter.d.ts +14 -0
package/src/types/slide-metadata.js +1 -0
package/src/types/slide-metadata.ts +27 -0
package/src/virtual-slides.d.ts +6 -0
package/src/vite-plugin-slides.ts +105 -10
package/tsconfig.app.json +1 -0
package/tsconfig.node.json +9 -2

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@berlysia/vertical-writing-slide-system",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "type": "module",
   "bin": {
     "vertical-slides": "./cli.js"
@@ -21,6 +21,7 @@
     "@mdx-js/react": "^3.1.0",
     "@mdx-js/rollup": "^3.1.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "gray-matter": "^4.0.3",
     "prompts": "^2.4.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/scripts/build-pages.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { existsSync } from "fs";
-import { mkdir, readdir, stat, cp, writeFile, mkdtemp, rm } from "fs/promises";
+import { mkdir, readdir, stat, cp, writeFile, mkdtemp, rm, readFile, } from "fs/promises";
 import { join, resolve } from "path";
 import { build } from "vite";
+import matter from "gray-matter";
 const defaultSlidesDir = resolve(import.meta.dirname, "..", "slides");
 const pagesDir = "pages";
 // Ensure pages directory exists
@@ -22,9 +23,49 @@ async function buildSlide(slideName) {
     await cp(tmpDir, slideOutputDir, { recursive: true });
     await rm(tmpDir, { recursive: true });
 }
-async function createIndexPage(slideNames) {
-    const slides = slideNames
-        .map((name) => `    <li><a href="${name}/">${name}</a></li>`)
+/**
+ * スライドコレクションからメタデータを取得
+ */
+async function getSlideMetadata(slidesDir, slideName) {
+    const mdxPath = join(slidesDir, slideName, "index.mdx");
+    const mdPath = join(slidesDir, slideName, "index.md");
+    let filePath;
+    if (existsSync(mdxPath)) {
+        filePath = mdxPath;
+    }
+    else if (existsSync(mdPath)) {
+        filePath = mdPath;
+    }
+    if (!filePath) {
+        return { title: slideName };
+    }
+    try {
+        const content = await readFile(filePath, "utf-8");
+        const parsed = matter(content);
+        return {
+            title: slideName,
+            ...parsed.data,
+        };
+    }
+    catch (error) {
+        console.warn(`Failed to parse frontmatter for ${slideName}: ${error}`);
+        return { title: slideName };
+    }
+}
+async function createIndexPage(slideNames, slidesDir) {
+    // 各スライドのメタデータを取得
+    const slideMetadataList = await Promise.all(slideNames.map(async (name) => ({
+        name,
+        metadata: await getSlideMetadata(slidesDir, name),
+    })));
+    const slides = slideMetadataList
+        .map(({ name, metadata }) => {
+        const displayTitle = metadata.title || name;
+        const description = metadata.description
+            ? ` - ${metadata.description}`
+            : "";
+        return `    <li><a href="${name}/">${displayTitle}</a>${description}</li>`;
+    })
         .join("\n");
     const html = `<!DOCTYPE html>
 <html>
@@ -56,7 +97,7 @@ export async function buildPages(options = {}) {
     for (const slide of slides) {
         await buildSlide(slide);
     }
-    await createIndexPage(slides);
+    await createIndexPage(slides, resolvedSlidesDir);
 }
 // CLI entry point
 if (import.meta.url === `file://${process.argv[1]}`) {

package/src/App.tsx CHANGED Viewed

@@ -114,20 +114,10 @@ function App() {
         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();
     };

package/src/types/gray-matter.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+declare module "gray-matter" {
+  interface GrayMatterFile {
+    data: any;
+    content: string;
+    excerpt?: string;
+    orig: string | Buffer;
+    language: string;
+    matter: string;
+    stringify(lang?: string): string;
+  }
+  function matter(input: string | Buffer): GrayMatterFile;
+  export = matter;
+}

package/src/types/slide-metadata.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/src/types/slide-metadata.ts ADDED Viewed

@@ -0,0 +1,27 @@
+/**
+ * スライドのメタデータ型定義
+ */
+export interface SlideMetadata {
+  /** スライドのタイトル */
+  title?: string;
+  /** スライドの説明 */
+  description?: string;
+  /** 作成者 */
+  author?: string;
+  /** 作成日時 */
+  date?: string;
+  /** その他のカスタムフィールド */
+  [key: string]: unknown;
+}
+/**
+ * frontmatterをパースした結果
+ */
+export interface ParsedSlideFile {
+  /** パースされたメタデータ */
+  metadata: SlideMetadata;
+  /** メタデータを除いたコンテンツ */
+  content: string;
+  /** 元のファイル内容 */
+  originalContent: string;
+}

package/src/virtual-slides.d.ts CHANGED Viewed

@@ -1,7 +1,13 @@
 /// <reference types="vite/client" />
 declare module "virtual:slides.js" {
+  import type { ParsedScript } from "./script-manager";
+  import type { SlideMetadata } from "./types/slide-metadata";
   type SlideContent = string | (() => JSX.Element) | React.ComponentType;
   const content: SlideContent[];
   export default content;
+  export const slideScripts: ParsedScript;
+  export const slideMetadata: SlideMetadata;
 }

package/src/vite-plugin-slides.ts CHANGED Viewed

@@ -1,4 +1,9 @@
-import type { Plugin, ViteDevServer, ResolvedConfig } from "vite";
+import type {
+  Plugin,
+  ViteDevServer,
+  ResolvedConfig,
+  HtmlTagDescriptor,
+} from "vite";
 import * as fs from "node:fs";
 import * as path from "node:path";
 import { mkdirSync, readdirSync } from "node:fs";
@@ -14,6 +19,8 @@ import { ScriptManager, type ParsedScript } from "./script-manager";
 import { visit } from "unist-util-visit";
 import type { Node } from "unist";
 import type { Element, Text, ElementContent } from "hast";
+import matter from "gray-matter";
+import type { SlideMetadata, ParsedSlideFile } from "./types/slide-metadata";
 /**
  * CSS抽出用のrehypeプラグイン
@@ -124,6 +131,37 @@ function loadAdjacentScripts(
   return result;
 }
+/**
+ * ファイル内容からfrontmatterをパースして、メタデータとコンテンツに分離
+ */
+function parseSlideFile(
+  content: string,
+  collectionName: string,
+): ParsedSlideFile {
+  try {
+    const parsed = matter(content);
+    const metadata: SlideMetadata = {
+      // デフォルトタイトルとしてコレクション名を使用
+      title: collectionName,
+      ...parsed.data,
+    };
+    return {
+      metadata,
+      content: parsed.content,
+      originalContent: content,
+    };
+  } catch (error) {
+    logger.warn(`Failed to parse frontmatter: ${error}`);
+    // パースに失敗した場合はfrontmatterなしとして扱う
+    return {
+      metadata: { title: collectionName },
+      content,
+      originalContent: content,
+    };
+  }
+}
 export interface SlidesPluginOptions {
   /** Directory containing the slides (absolute path) */
   slidesDir?: string;
@@ -231,6 +269,7 @@ export default async function slidesPlugin(
   let resolvedConfig: ResolvedConfig;
   let slideStyles: string[] = [];
   let slideScripts: ParsedScript = { external: [], inline: [] };
+  let slideMetadata: SlideMetadata = { title: config.collection };
   return {
     name: "vite-plugin-slides",
     configResolved(config: ResolvedConfig) {
@@ -288,6 +327,13 @@ export default async function slidesPlugin(
         const content = fs.readFileSync(filePath, "utf-8");
+        // frontmatterをパースしてメタデータとコンテンツを分離
+        const parsedFile = parseSlideFile(content, config.collection);
+        slideMetadata = parsedFile.metadata;
+        const slideContent = parsedFile.content;
+        logger.info(`Slide metadata: ${JSON.stringify(slideMetadata)}`);
         // 隣接CSSファイルを読み込み
         const adjacentStyles = loadAdjacentCSS(
           config.slidesDir,
@@ -306,7 +352,7 @@ export default async function slidesPlugin(
         };
         if (!isMdx) {
-          const slides = content.split(/^\s*(?:---|\*\*\*|___)\s*$/m);
+          const slides = slideContent.split(/^\s*(?:---|\*\*\*|___)\s*$/m);
           const extractedStyles: string[] = [];
           const extractedScripts: ParsedScript = { external: [], inline: [] };
           const processedSlides = await Promise.all(
@@ -349,29 +395,29 @@ export default async function slidesPlugin(
           `;
         }
-        const slides = content.split(/^\s*(?:---|\*\*\*|___)\s*$/m);
+        const slides = slideContent.split(/^\s*(?:---|\*\*\*|___)\s*$/m);
         // MDXにもCSS・スクリプト抽出を適用
         const extractedStyles: string[] = [];
         const extractedScripts: ParsedScript = { external: [], inline: [] };
         const processedSlides = await Promise.all(
-          slides.map(async (slideContent) => {
+          slides.map(async (slide) => {
             // MDX内のstyleタグを手動で抽出（簡易実装）
             const styleRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
             let match;
-            while ((match = styleRegex.exec(slideContent)) !== null) {
+            while ((match = styleRegex.exec(slide)) !== null) {
               if (match[1].trim()) {
                 extractedStyles.push(match[1].trim());
               }
             }
             // MDX内のscriptタグを抽出
-            const parsedScripts = ScriptManager.parseScripts(slideContent);
+            const parsedScripts = ScriptManager.parseScripts(slide);
             extractedScripts.external.push(...parsedScripts.external);
             extractedScripts.inline.push(...parsedScripts.inline);
             // style・scriptタグを削除したコンテンツでMDXコンパイル
-            let cleanedContent = slideContent.replace(styleRegex, "");
+            let cleanedContent = slide.replace(styleRegex, "");
             cleanedContent =
               ScriptManager.removeScriptsFromContent(cleanedContent);
@@ -446,6 +492,9 @@ export default async function slidesPlugin(
             // スライド固有のスクリプトを外部から利用可能にする
             export const slideScripts = ${slideScriptsString};
+            // スライドのメタデータを外部から利用可能にする
+            export const slideMetadata = ${JSON.stringify(slideMetadata)};
             // provide slide components to each slide
             // Wrap SlideN components to provide SlideComponents
             ${compiledSlides
@@ -533,12 +582,15 @@ export default async function slidesPlugin(
       // Generate HTML file if none exists in consumer project
       const consumerIndexHtml = path.resolve(resolvedConfig.root, "index.html");
-      if (!fs.existsSync(consumerIndexHtml)) {
+      // CLIモードでは常にメタデータ付きHTMLを生成
+      const isExternalCLI = process.cwd() !== resolvedConfig.root;
+      if (!fs.existsSync(consumerIndexHtml) || isExternalCLI) {
         // Find the main JS and CSS files in the bundle
         const mainJsFile = Object.keys(bundle).find(
           (fileName) =>
             fileName.startsWith("assets/") &&
-            fileName.includes("main-") &&
+            (fileName.includes("index-") || fileName.includes("main-")) &&
             fileName.endsWith(".js"),
         );
         const mainCssFile = Object.keys(bundle).find(
@@ -548,6 +600,7 @@ export default async function slidesPlugin(
         if (!mainJsFile) {
           logger.error("Could not find main JS file in bundle");
+          logger.error("Available bundle files: " + Object.keys(bundle));
           return;
         }
@@ -555,12 +608,15 @@ export default async function slidesPlugin(
           ? `<link rel="stylesheet" href="./${mainCssFile}">`
           : "<!-- CSS is included in the JS bundle -->";
+        const pageTitle = slideMetadata?.title || "Vertical Writing Slides";
         const virtualIndexHtml = `<!doctype html>
 <html lang="ja">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vertical Writing Slides</title>
+    <title>${pageTitle}</title>
+    ${slideMetadata?.description ? `<meta name="description" content="${slideMetadata.description}" />` : ""}
+    ${slideMetadata?.author ? `<meta name="author" content="${slideMetadata.author}" />` : ""}
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Sans+Mono:wght@100..900&display=swap" rel="stylesheet">
@@ -713,5 +769,44 @@ export default async function slidesPlugin(
         // No additional cleanup needed since we're using Vite's built-in watcher
       };
     },
+    transformIndexHtml(html: string) {
+      // 既存の <title> タグを削除
+      const htmlWithoutTitle = html.replace(/<title>.*?<\/title>/i, "");
+      // メタデータタグを構築
+      const title = slideMetadata?.title || config.collection;
+      const tags: HtmlTagDescriptor[] = [
+        {
+          tag: "title",
+          children: title,
+        },
+      ];
+      if (slideMetadata?.description) {
+        tags.push({
+          tag: "meta",
+          attrs: {
+            name: "description",
+            content: slideMetadata.description,
+          },
+        });
+      }
+      if (slideMetadata?.author) {
+        tags.push({
+          tag: "meta",
+          attrs: {
+            name: "author",
+            content: slideMetadata.author,
+          },
+        });
+      }
+      return {
+        html: htmlWithoutTitle,
+        tags,
+      };
+    },
   };
 }

package/tsconfig.app.json CHANGED Viewed

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
     "useDefineForClassFields": true,

package/tsconfig.node.json CHANGED Viewed

@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
+    "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "ES2022",
-    "lib": ["ES2023"],
+    "lib": ["ES2023", "DOM"],
     "module": "ESNext",
     "skipLibCheck": true,
@@ -20,5 +21,11 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": [
+    "vite.config.ts",
+    "src/vite-plugin-slides.ts",
+    "src/remark-slide-images.ts",
+    "src/script-manager.ts",
+    "src/types/**/*.ts"
+  ]
 }