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

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

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 (4) hide show

package/package.json +1 -1
package/src/types/slide-metadata.ts +4 -0
package/src/vite-plugin-slides.ts +139 -0
package/vite.config.ts +1 -1

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@berlysia/vertical-writing-slide-system",
-  "version": "0.0.32",
+  "version": "0.1.1",
   "type": "module",
   "bin": {
     "vertical-slides": "./cli.js"

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

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

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

@@ -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,21 @@ export default async function slidesPlugin(
         slideMetadata = parsedFile.metadata;
         const slideContent = parsedFile.content;
+        // OGP画像を検出してメタデータに設定
+        // baseがフルURL（http/https）の場合はフルURLを生成、そうでなければ相対パス
+        const ogpImageFile = checkOgpImage(config.slidesDir, config.collection);
+        if (ogpImageFile) {
+          const ogpPath = `slide-assets/${ogpImageFile}`;
+          if (base.startsWith("http://") || base.startsWith("https://")) {
+            // フルURLの場合: baseの末尾スラッシュを正規化して結合
+            const normalizedBase = base.endsWith("/") ? base : `${base}/`;
+            slideMetadata.ogImage = `${normalizedBase}${ogpPath}`;
+          } else {
+            // 相対パスの場合: そのまま相対パスを設定
+            slideMetadata.ogImage = `${base}${ogpPath}`;
+          }
+        }
         logger.info(`Slide metadata: ${JSON.stringify(slideMetadata)}`);
         // 隣接CSSファイルを読み込み
@@ -575,6 +606,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 +663,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 +686,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 +759,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 +897,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,

package/vite.config.ts CHANGED Viewed

@@ -6,7 +6,7 @@ import slidesPlugin from "./src/vite-plugin-slides";
 export default defineConfig(async () => {
   return {
-    base: "./",
+    base: process.env.BASE_URL || "./",
     resolve: {
       alias: {
         "@components": path.resolve(