ドクセル埋め込み対応

zenn-dev · Sep 12, 2024 · 6ed6868 · 6ed6868
1 parent 5502684
commit 6ed6868
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 1 deletion.
diff --git a/packages/zenn-cli/articles/305-example-embed-others.md b/packages/zenn-cli/articles/305-example-embed-others.md
@@ -56,6 +56,14 @@ published: true
 
 @[speakerdeck](4f926da9cb4cd0001f00a1ff)
 
+## docswell
+
+@[docswell](https://www.docswell.com/slide/LK7J5V/embed)
+
+### embed用でないdocswell URL
+
+@[docswell](https://www.docswell.com/s/ku-suke/LK7J5V-hello-docswell)
+
 ## jsfiddle
 
 @[jsfiddle](https://jsfiddle.net/9wkngdue/embedded)

diff --git a/packages/zenn-content-css/src/_embed.scss b/packages/zenn-content-css/src/_embed.scss
@@ -8,6 +8,7 @@ span.embed-block {
 }
 .embed-slideshare,
 .embed-speakerdeck,
+.embed-docswell,
 .embed-codepen,
 .embed-jsfiddle,
 .embed-youtube,

diff --git a/packages/zenn-markdown-html/src/embed.ts b/packages/zenn-markdown-html/src/embed.ts
@@ -1,7 +1,10 @@
 import type { MarkdownOptions } from './types';
 
 import { escapeHtml } from 'markdown-it/lib/common/utils';
-import { extractYoutubeVideoParameters } from './utils/url-matcher';
+import {
+  extractYoutubeVideoParameters,
+  isDocswellUrl,
+} from './utils/url-matcher';
 import {
   sanitizeEmbedToken,
   generateEmbedServerIframe,
@@ -25,6 +28,7 @@ export type EmbedType =
   | 'slideshare'
   | 'speakerdeck'
   | 'jsfiddle'
+  | 'docswell'
   | 'codepen'
   | 'codesandbox'
   | 'stackblitz'
@@ -77,6 +81,12 @@ export const embedGenerators: Readonly<EmbedGeneratorList> = {
       key
     )}" scrolling="no" allowfullscreen allow="encrypted-media" loading="lazy"></iframe></span>`;
   },
+  docswell(str) {
+    if (!isDocswellUrl(str)) {
+      return 'Docswellのembed用のURLを指定してください';
+    }
+    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>`;
+  },
   jsfiddle(str) {
     if (!isJsfiddleUrl(str)) {
       return 'jsfiddleのURLが不正です';

diff --git a/packages/zenn-markdown-html/src/utils/url-matcher.ts b/packages/zenn-markdown-html/src/utils/url-matcher.ts
@@ -47,6 +47,10 @@ export function isJsfiddleUrl(url: string): boolean {
   return /^(http|https):\/\/jsfiddle\.net\/[a-zA-Z0-9_,/-]+$/.test(url);
 }
 
+export function isDocswellUrl(url: string): boolean {
+  return /^https:\/\/www\.docswell\.com\/[a-zA-Z0-9_,/-]+\/embed$/.test(url);
+}
+
 export function isYoutubeUrl(url: string): boolean {
   return [
     /^https?:\/\/youtu\.be\/[\w-]+(?:\?[\w=&-]+)?$/,