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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@berlysia/vertical-writing-slide-system",
-  "version": "0.0.32",
+  "version": "0.1.0",
   "type": "module",
   "bin": {
     "vertical-slides": "./cli.js"
@@ -15,6 +15,20 @@
     "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",
@@ -55,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/slide-metadata.ts

@@ -10,6 +10,8 @@ export interface SlideMetadata {
   author?: string;
   /** 作成日時 */
   date?: string;
+  /** OGP画像のパス（ogp.pngが存在する場合に自動設定） */
+  ogImage?: string;
   /** その他のカスタムフィールド */
   [key: string]: unknown;
 }

package/src/vite-plugin-slides.ts

@@ -94,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;
+}
+
 /**
  * 隣接スクリプト設定ファイルを検索して読み込み
  */
@@ -332,6 +348,12 @@ export default async function slidesPlugin(
         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ファイルを読み込み
@@ -575,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);
+            }
+          }
+        }
       }
     },
 
@@ -609,6 +654,21 @@ export default async function slidesPlugin(
           : "<!-- 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>
@@ -617,6 +677,7 @@ export default async function slidesPlugin(
     <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">
@@ -689,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)),
+            );
+          }
+        }
       }
     },
 
@@ -803,6 +888,51 @@ export default async function slidesPlugin(
         });
       }
 
+      // 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,