@berlysia/vertical-writing-slide-system 0.1.2 → 0.1.3

package/package.json

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

package/src/remark-slide-images.ts

@@ -4,12 +4,30 @@ import type { Root, Image } from "mdast";
 
 interface RemarkSlideImagesOptions {
   base: string;
+  collection?: string; // フルURL時のみ使用（複数スライドホスティング対応）
+}
+
+/**
+ * baseとcollectionから画像パスのプレフィックスを生成
+ * - フルURL（http/https）の場合: collection名を含める
+ * - 相対パスの場合: collection名なし（ローカル開発用）
+ */
+function buildImagePathPrefix(base: string, collection?: string): string {
+  if (
+    collection &&
+    (base.startsWith("http://") || base.startsWith("https://"))
+  ) {
+    const normalizedBase = base.endsWith("/") ? base : `${base}/`;
+    return `${normalizedBase}${collection}/slide-assets/images/`;
+  }
+  return `${base}slide-assets/images/`;
 }
 
 const remarkSlideImages: Plugin<[RemarkSlideImagesOptions], Root> = (
   options,
 ) => {
-  const { base } = options;
+  const { base, collection } = options;
+  const imagePathPrefix = buildImagePathPrefix(base, collection);
 
   return (tree) => {
     visit(tree, (node) => {
@@ -17,7 +35,7 @@ const remarkSlideImages: Plugin<[RemarkSlideImagesOptions], Root> = (
       if (node.type === "image") {
         const imageNode = node as Image;
         if (imageNode.url.startsWith("@slide/")) {
-          imageNode.url = `${base}slide-assets/images/${imageNode.url.slice(7)}`;
+          imageNode.url = `${imagePathPrefix}${imageNode.url.slice(7)}`;
         }
       }
 
@@ -35,7 +53,7 @@ const remarkSlideImages: Plugin<[RemarkSlideImagesOptions], Root> = (
           typeof src.value === "string" &&
           src.value.startsWith("@slide/")
         ) {
-          src.value = `${base}slide-assets/images/${src.value.slice(7)}`;
+          src.value = `${imagePathPrefix}${src.value.slice(7)}`;
         }
       }
 
@@ -50,7 +68,7 @@ const remarkSlideImages: Plugin<[RemarkSlideImagesOptions], Root> = (
             (_, attributes, src) => {
               return `<img ${attributes.replace(
                 src,
-                `${base}slide-assets/images/${src.slice(7)}`,
+                `${imagePathPrefix}${src.slice(7)}`,
               )}>`;
             },
           );

package/src/vite-plugin-slides.ts

@@ -54,6 +54,7 @@ function rehypeExtractStyles(extractedStyles: string[]) {
 async function processMarkdown(
   markdown: string,
   base: string,
+  collection: string,
   extractedStyles: string[],
   extractedScripts: ParsedScript,
 ) {
@@ -65,7 +66,7 @@ async function processMarkdown(
 
   return await unified()
     .use(remarkParse)
-    .use(remarkSlideImages, { base })
+    .use(remarkSlideImages, { base, collection })
     .use(remarkRehype, { allowDangerousHtml: true })
     .use(rehypeExtractStyles(extractedStyles))
     .use(rehypeStringify, { allowDangerousHtml: true })
@@ -388,7 +389,13 @@ export default async function slidesPlugin(
           const extractedScripts: ParsedScript = { external: [], inline: [] };
           const processedSlides = await Promise.all(
             slides.map((slide) =>
-              processMarkdown(slide, base, extractedStyles, extractedScripts),
+              processMarkdown(
+                slide,
+                base,
+                config.collection,
+                extractedStyles,
+                extractedScripts,
+              ),
             ),
           );
 
@@ -457,7 +464,9 @@ export default async function slidesPlugin(
               development: false,
               jsxImportSource: "react",
               jsxRuntime: "automatic",
-              remarkPlugins: [[remarkSlideImages, { base }]],
+              remarkPlugins: [
+                [remarkSlideImages, { base, collection: config.collection }],
+              ],
             });
             return result.value as string;
           }),