通常の公開用URLも使えるようにした

zenn-dev · Sep 13, 2024 · 454eb98 · 454eb98
1 parent da86e1b
commit 454eb98
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git a/packages/zenn-cli/articles/305-example-embed-others.md b/packages/zenn-cli/articles/305-example-embed-others.md
@@ -60,8 +60,6 @@ published: true
 
 @[docswell](https://www.docswell.com/slide/LK7J5V/embed)
 
-### embed用でないdocswell URL
-
 @[docswell](https://www.docswell.com/s/ku-suke/LK7J5V-hello-docswell)
 
 ## jsfiddle

diff --git a/packages/zenn-markdown-html/src/embed.ts b/packages/zenn-markdown-html/src/embed.ts
@@ -18,6 +18,7 @@ import {
   isValidHttpUrl,
   isDocswellUrl,
   extractYoutubeVideoParameters,
+  extractDocswellEmbedUrl,
 } from './utils/url-matcher';
 
 /* 埋め込み要素の種別 */
@@ -80,10 +81,15 @@ export const embedGenerators: Readonly<EmbedGeneratorList> = {
     )}" scrolling="no" allowfullscreen allow="encrypted-media" loading="lazy"></iframe></span>`;
   },
   docswell(str) {
+    const errorMessage = 'DocswellのスライドURLが不正です';
     if (!isDocswellUrl(str)) {
-      return 'Docswellのembed用のURLを指定してください';
+      return errorMessage;
     }
-    return `<span class="embed-block embed-docswell"><iframe src="${str}" allowfullscreen="true" class="docswell-iframe" width="620" height="349" style="border: 1px solid #ccc; display: block; margin: 0px auto; padding: 0px; aspect-ratio: 620/349;"></iframe></span>`;
+    const slideUrl = extractDocswellEmbedUrl(str);
+    if (!slideUrl) {
+      return errorMessage;
+    }
+    return `<span class="embed-block embed-docswell"><iframe src="${slideUrl}" allowfullscreen="true" class="docswell-iframe" width="620" height="349" style="border: 1px solid #ccc; display: block; margin: 0px auto; padding: 0px; aspect-ratio: 620/349;"></iframe></span>`;
   },
   jsfiddle(str) {
     if (!isJsfiddleUrl(str)) {

diff --git a/packages/zenn-markdown-html/src/utils/url-matcher.ts b/packages/zenn-markdown-html/src/utils/url-matcher.ts
@@ -47,8 +47,15 @@ export function isJsfiddleUrl(url: string): boolean {
   return /^(http|https):\/\/jsfiddle\.net\/[a-zA-Z0-9_,/-]+$/.test(url);
 }
 
+const docswellNormalUrlRegex =
+  /^https:\/\/www\.docswell\.com\/s\/[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-]+$/;
+const docswellEmbedUrlRegex =
+  /^https:\/\/www\.docswell\.com\/slide\/[a-zA-Z0-9_-]+\/embed$/;
+
 export function isDocswellUrl(url: string): boolean {
-  return /^https:\/\/www\.docswell\.com\/[a-zA-Z0-9_,/-]+\/embed$/.test(url);
+  return [docswellNormalUrlRegex, docswellEmbedUrlRegex].some((pattern) =>
+    pattern.test(url)
+  );
 }
 
 export function isYoutubeUrl(url: string): boolean {
@@ -84,6 +91,19 @@ export function extractYoutubeVideoParameters(
   return { videoId, start };
 }
 
+export function extractDocswellEmbedUrl(url: string): string | null {
+  // Embed用URLの場合、そのまま返す
+  if (docswellEmbedUrlRegex.test(url)) {
+    return url;
+  }
+  // Embed用URLでない場合 https://www.docswell.com/s/:username/{slideId}-hello-docswell のslideIdを抽出する
+  const slideId = new URL(url).pathname.split('/').at(3)?.split('-').at(0);
+  if (!slideId) {
+    return null;
+  }
+  return `https://www.docswell.com/slide/${slideId}/embed`;
+}
+
 /**
  * 参考: https://blueprintue.com/
  * 生成されるURLをもとに正規表現を定義した