@berlysia/vertical-writing-slide-system 0.0.31 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@berlysia/vertical-writing-slide-system",
-  "version": "0.0.31",
+  "version": "0.1.0",
   "type": "module",
   "bin": {
     "vertical-slides": "./cli.js"
@@ -15,12 +15,27 @@
     "src",
     "index.html"
   ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:cli": "tsc --project tsconfig.cli.json",
+    "preversion": "pnpm build:cli",
+    "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"
+  },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@mdx-js/mdx": "^3.1.0",
     "@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",
@@ -54,19 +69,5 @@
     "typescript": "~5.8.2",
     "typescript-eslint": "^8.26.0",
     "unist-util-visit": "^5.0.0"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "build:cli": "tsc --project tsconfig.cli.json",
-    "preversion": "pnpm build:cli",
-    "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/src/types/gray-matter.d.ts

@@ -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

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

package/src/types/slide-metadata.ts

@@ -0,0 +1,29 @@
+/**
+ * スライドのメタデータ型定義
+ */
+export interface SlideMetadata {
+  /** スライドのタイトル */
+  title?: string;
+  /** スライドの説明 */
+  description?: string;
+  /** 作成者 */
+  author?: string;
+  /** 作成日時 */
+  date?: string;
+  /** OGP画像のパス（ogp.pngが存在する場合に自動設定） */
+  ogImage?: string;
+  /** その他のカスタムフィールド */
+  [key: string]: unknown;
+}
+
+/**
+ * frontmatterをパースした結果
+ */
+export interface ParsedSlideFile {
+  /** パースされたメタデータ */
+  metadata: SlideMetadata;
+  /** メタデータを除いたコンテンツ */
+  content: string;
+  /** 元のファイル内容 */
+  originalContent: string;
+}

package/src/virtual-slides.d.ts

@@ -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

@@ -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プラグイン
@@ -87,6 +94,22 @@ function loadAdjacentCSS(slidesDir: string, collection: string): string[] {
   return [];
 }
 
+/**
+ * OGP画像ファイル（ogp.png）が存在するか確認
+ * 存在する場合はファイル名を返す
+ */
+function checkOgpImage(slidesDir: string, collection: string): string | null {
+  const collectionDir = path.resolve(slidesDir, collection);
+  const ogpPath = path.resolve(collectionDir, "ogp.png");
+
+  if (fs.existsSync(ogpPath)) {
+    logger.info("Found OGP image: ogp.png");
+    return "ogp.png";
+  }
+
+  return null;
+}
+
 /**
  * 隣接スクリプト設定ファイルを検索して読み込み
  */
@@ -124,6 +147,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 +285,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 +343,19 @@ 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;
+
+        // OGP画像を検出してメタデータに設定
+        const ogpImageFile = checkOgpImage(config.slidesDir, config.collection);
+        if (ogpImageFile) {
+          slideMetadata.ogImage = `${base}slide-assets/${ogpImageFile}`;
+        }
+
+        logger.info(`Slide metadata: ${JSON.stringify(slideMetadata)}`);
+
         // 隣接CSSファイルを読み込み
         const adjacentStyles = loadAdjacentCSS(
           config.slidesDir,
@@ -306,7 +374,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 +417,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 +514,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
@@ -526,6 +597,29 @@ export default async function slidesPlugin(
         } else {
           logger.info(`No images directory found at: ${sourceImagesDir}`);
         }
+
+        // OGP画像をコピー
+        const targetAssetsDir = isExternalCLI
+          ? path.resolve(process.cwd(), "public/slide-assets")
+          : path.resolve(resolvedConfig.root, "public/slide-assets");
+        const sourceOgpPath = path.resolve(
+          config.slidesDir,
+          config.collection,
+          "ogp.png",
+        );
+
+        if (fs.existsSync(sourceOgpPath)) {
+          try {
+            mkdirSync(targetAssetsDir, { recursive: true });
+            const targetOgpPath = path.join(targetAssetsDir, "ogp.png");
+            await copyFile(sourceOgpPath, targetOgpPath);
+            logger.info("Copied OGP image: ogp.png");
+          } catch (error) {
+            if (error instanceof Error) {
+              logger.error("Failed to copy OGP image", error);
+            }
+          }
+        }
       }
     },
 
@@ -533,12 +627,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 +645,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 +653,31 @@ export default async function slidesPlugin(
           ? `<link rel="stylesheet" href="./${mainCssFile}">`
           : "<!-- CSS is included in the JS bundle -->";
 
+        const pageTitle = slideMetadata?.title || "Vertical Writing Slides";
+
+        // OGPメタタグを生成
+        const ogpTags: string[] = [];
+        if (slideMetadata?.title) {
+          ogpTags.push(`<meta property="og:title" content="${slideMetadata.title}" />`);
+        }
+        if (slideMetadata?.description) {
+          ogpTags.push(`<meta property="og:description" content="${slideMetadata.description}" />`);
+        }
+        if (slideMetadata?.ogImage) {
+          ogpTags.push(`<meta property="og:image" content="${slideMetadata.ogImage}" />`);
+          ogpTags.push(`<meta name="twitter:card" content="summary_large_image" />`);
+          ogpTags.push(`<meta name="twitter:image" content="${slideMetadata.ogImage}" />`);
+        }
+
         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}" />` : ""}
+    ${ogpTags.join("\n    ")}
     <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">
@@ -633,6 +750,30 @@ export default async function slidesPlugin(
         } else {
           logger.warn(`No images directory found at: ${sourceImagesDir}`);
         }
+
+        // OGP画像をバンドルに追加
+        const sourceOgpPath = path.resolve(
+          config.slidesDir,
+          config.collection,
+          "ogp.png",
+        );
+
+        if (fs.existsSync(sourceOgpPath)) {
+          try {
+            const ogpContent = fs.readFileSync(sourceOgpPath);
+            this.emitFile({
+              type: "asset",
+              fileName: "slide-assets/ogp.png",
+              source: ogpContent,
+            });
+            logger.info("Added OGP image to bundle: ogp.png");
+          } catch (error) {
+            logger.error(
+              "Failed to add OGP image to bundle",
+              error instanceof Error ? error : new Error(String(error)),
+            );
+          }
+        }
       }
     },
 
@@ -713,5 +854,89 @@ 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,
+          },
+        });
+      }
+
+      // OGPメタタグを追加
+      if (slideMetadata?.title) {
+        tags.push({
+          tag: "meta",
+          attrs: {
+            property: "og:title",
+            content: slideMetadata.title,
+          },
+        });
+      }
+
+      if (slideMetadata?.description) {
+        tags.push({
+          tag: "meta",
+          attrs: {
+            property: "og:description",
+            content: slideMetadata.description,
+          },
+        });
+      }
+
+      if (slideMetadata?.ogImage) {
+        tags.push({
+          tag: "meta",
+          attrs: {
+            property: "og:image",
+            content: slideMetadata.ogImage,
+          },
+        });
+        tags.push({
+          tag: "meta",
+          attrs: {
+            name: "twitter:card",
+            content: "summary_large_image",
+          },
+        });
+        tags.push({
+          tag: "meta",
+          attrs: {
+            name: "twitter:image",
+            content: slideMetadata.ogImage,
+          },
+        });
+      }
+
+      return {
+        html: htmlWithoutTitle,
+        tags,
+      };
+    },
   };
 }

package/tsconfig.app.json

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

package/tsconfig.node.json

@@ -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"
+  ]
 }