@ampless/plugin-youtube 1.0.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ampless contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.ja.md

@@ -0,0 +1,53 @@
+# @ampless/plugin-youtube
+
+> English: [README.md](./README.md)
+
+ampless の投稿に YouTube 埋め込みをインラインで表示するプラグイン。`https://youtu.be/<id>` および `https://www.youtube.com/watch?v=<id>` 形式の URL を、プライバシー強化された `youtube-nocookie.com` 上の `<iframe>` 要素として描画する（再生開始まで cookie を設定しない）。
+
+## インストール
+
+```sh
+npm i @ampless/plugin-youtube
+```
+
+## 配線
+
+`cms.config.ts`:
+
+```ts
+import { defineConfig } from 'ampless'
+import youtubePlugin from '@ampless/plugin-youtube'
+
+export default defineConfig({
+  plugins: [youtubePlugin()],
+})
+```
+
+tiptap エディタ側は `templates/_shared/app/(admin)/admin/_editor-bootstrap.tsx` で Node を登録する:
+
+```tsx
+'use client'
+import { installAdminEditorExtensions } from '@ampless/admin/editor'
+import { youtubeEditor } from '@ampless/plugin-youtube/editor'
+
+export function EditorBootstrap({ children }: { children: React.ReactNode }) {
+  installAdminEditorExtensions([youtubeEditor.extension])
+  return <>{children}</>
+}
+```
+
+その上で `createAdminLayout(admin, { editorBootstrap: EditorBootstrap })` に渡す。
+
+## 動作
+
+- `amplessYoutube` 型の tiptap ノード（エディタのペーストルールまたは `setYoutube({ videoId })` コマンドで挿入）は YouTube の iframe としてレンダリングされる。
+- markdown 投稿で単独行が YouTube URL の段落（例: 段落の中身が `https://youtu.be/dQw4w9WgXcQ` だけ）も iframe としてレンダリングされる。
+- 段落内インラインの URL はそのまま残る。単独行の URL のみ置換対象。
+
+## CSP
+
+本プラグインは `<iframe src="https://www.youtube-nocookie.com/...">` を出力する。サイト側の CSP（`next.config.ts` / middleware で設定）の `frame-src` に `youtube-nocookie.com` を含める必要がある。
+
+## License
+
+MIT

package/README.md

@@ -0,0 +1,53 @@
+# @ampless/plugin-youtube
+
+> 日本語版: [README.ja.md](./README.ja.md)
+
+Inline YouTube embeds for ampless posts. Renders `https://youtu.be/<id>` and `https://www.youtube.com/watch?v=<id>` URLs as `<iframe>` elements pointing at `youtube-nocookie.com` (the privacy-enhanced embed host that does not set cookies before playback starts).
+
+## Install
+
+```sh
+npm i @ampless/plugin-youtube
+```
+
+## Wire up
+
+`cms.config.ts`:
+
+```ts
+import { defineConfig } from 'ampless'
+import youtubePlugin from '@ampless/plugin-youtube'
+
+export default defineConfig({
+  plugins: [youtubePlugin()],
+})
+```
+
+For the tiptap editor side, register the Node in `templates/_shared/app/(admin)/admin/_editor-bootstrap.tsx`:
+
+```tsx
+'use client'
+import { installAdminEditorExtensions } from '@ampless/admin/editor'
+import { youtubeEditor } from '@ampless/plugin-youtube/editor'
+
+export function EditorBootstrap({ children }: { children: React.ReactNode }) {
+  installAdminEditorExtensions([youtubeEditor.extension])
+  return <>{children}</>
+}
+```
+
+Then thread it into `createAdminLayout(admin, { editorBootstrap: EditorBootstrap })`.
+
+## Behaviour
+
+- Tiptap nodes typed `amplessYoutube` (inserted via the editor's paste rule or the `setYoutube({ videoId })` command) render as a YouTube iframe.
+- Markdown posts with a single-line YouTube URL (e.g. a paragraph whose entire content is `https://youtu.be/dQw4w9WgXcQ`) also render as an iframe.
+- Inline URLs in the middle of a paragraph are left as-is — only single-line URLs convert.
+
+## CSP
+
+The plugin emits `<iframe src="https://www.youtube-nocookie.com/...">`. Your site's CSP (configured in `next.config.ts` / middleware) needs to include `youtube-nocookie.com` in `frame-src` for the embed to load.
+
+## License
+
+MIT

package/dist/chunk-67ETNQMN.js

@@ -0,0 +1,39 @@
+// src/shared.tsx
+import { jsx } from "react/jsx-runtime";
+var YOUTUBE_URL = /^https:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=([\w-]{11})|youtu\.be\/([\w-]{11}))(?:[?&#]\S*)?$/;
+var VIDEO_ID = /^[\w-]{11}$/;
+function YouTubeEmbed({
+  videoId,
+  start,
+  title
+}) {
+  if (typeof videoId !== "string" || !VIDEO_ID.test(videoId)) return null;
+  const query = typeof start === "number" && Number.isFinite(start) && start > 0 ? `?start=${Math.floor(start)}` : "";
+  const src = `https://www.youtube-nocookie.com/embed/${videoId}${query}`;
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      src,
+      title: title ?? `YouTube video ${videoId}`,
+      loading: "lazy",
+      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+      referrerPolicy: "strict-origin-when-cross-origin",
+      allowFullScreen: true,
+      width: 560,
+      height: 315,
+      style: { width: "100%", aspectRatio: "16 / 9", height: "auto", border: 0 }
+    }
+  );
+}
+function parseYoutubeUrl(url) {
+  const trimmed = url.trim();
+  const m = trimmed.match(YOUTUBE_URL);
+  if (!m) return null;
+  return m[1] ?? m[2] ?? null;
+}
+
+export {
+  YOUTUBE_URL,
+  YouTubeEmbed,
+  parseYoutubeUrl
+};

package/dist/editor.d.ts

@@ -0,0 +1,30 @@
+import { Node } from '@tiptap/core';
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        amplessYoutube: {
+            /** Insert a YouTube embed node with the given video id (+ optional start). */
+            setYoutube: (opts: {
+                videoId: string;
+                start?: number;
+            }) => ReturnType;
+            /**
+             * Insert a YouTube embed from a URL. Returns false (and does
+             * nothing) if the URL doesn't match the canonical / short form.
+             */
+            insertYoutubeFromUrl: (url: string) => ReturnType;
+        };
+    }
+}
+declare const AmplessYoutubeNode: Node<any, any>;
+/**
+ * Named export consumed by templates' `_editor-bootstrap.tsx`. The
+ * `.extension` field is the tiptap Node — the wrapper object exists so
+ * future per-instance configuration can be added without breaking the
+ * call site.
+ */
+declare const youtubeEditor: {
+    extension: Node<any, any>;
+};
+
+export { AmplessYoutubeNode, youtubeEditor };

package/dist/editor.js

@@ -0,0 +1,93 @@
+"use client";
+import {
+  YOUTUBE_URL,
+  parseYoutubeUrl
+} from "./chunk-67ETNQMN.js";
+
+// src/editor.tsx
+import { Node, mergeAttributes } from "@tiptap/core";
+var AmplessYoutubeNode = Node.create({
+  name: "amplessYoutube",
+  group: "block",
+  atom: true,
+  selectable: true,
+  draggable: true,
+  addAttributes() {
+    return {
+      videoId: {
+        default: "",
+        parseHTML: (el) => el.getAttribute("data-video-id") ?? "",
+        renderHTML: (attrs) => ({
+          "data-video-id": String(attrs.videoId ?? "")
+        })
+      },
+      start: {
+        default: null,
+        parseHTML: (el) => {
+          const v = el.getAttribute("data-start");
+          if (v === null) return null;
+          const n = Number(v);
+          return Number.isFinite(n) ? n : null;
+        },
+        renderHTML: (attrs) => attrs.start != null ? { "data-start": String(attrs.start) } : {}
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-ampless-youtube]"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, {
+        "data-ampless-youtube": "",
+        class: "ampless-youtube-placeholder"
+      }),
+      ["span", {}, `YouTube: ${HTMLAttributes["data-video-id"] ?? ""}`]
+    ];
+  },
+  addCommands() {
+    return {
+      setYoutube: (opts) => ({ commands }) => commands.insertContent({
+        type: this.name,
+        attrs: { videoId: opts.videoId, start: opts.start ?? null }
+      }),
+      insertYoutubeFromUrl: (url) => ({ commands }) => {
+        const videoId = parseYoutubeUrl(url);
+        if (!videoId) return false;
+        return commands.insertContent({
+          type: this.name,
+          attrs: { videoId, start: null }
+        });
+      }
+    };
+  },
+  addPasteRules() {
+    return [
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      {
+        find: YOUTUBE_URL,
+        handler: ({ range, match, commands }) => {
+          const videoId = match[1] ?? match[2];
+          if (!videoId) return;
+          commands.deleteRange(range);
+          commands.insertContent({
+            type: this.name,
+            attrs: { videoId, start: null }
+          });
+        }
+      }
+    ];
+  }
+});
+var youtubeEditor = {
+  extension: AmplessYoutubeNode
+};
+export {
+  AmplessYoutubeNode,
+  youtubeEditor
+};

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+import { AmplessPlugin } from 'ampless';
+import { ReactElement } from 'react';
+
+/**
+ * YouTube canonical / short URL pattern. Anchored with `^...$` so the
+ * markdown walker only intercepts paragraphs whose entire content is a
+ * single YouTube URL.
+ *
+ * Captures:
+ *   - Group 1: video id for `youtube.com/watch?v=<id>`
+ *   - Group 2: video id for `youtu.be/<id>`
+ *
+ * The id grammar `[\w-]{11}` matches the canonical 11-character
+ * YouTube video id format. Anything else fails the regex.
+ */
+declare const YOUTUBE_URL: RegExp;
+interface YouTubeEmbedProps {
+    videoId: string;
+    /** Start position in seconds. Forwarded to the embed URL as `?start=`. */
+    start?: number;
+    /** Embed title for screen readers / iframe `title`. */
+    title?: string;
+}
+/**
+ * Render a YouTube embed as a single `<iframe>` pointing at
+ * youtube-nocookie.com (the privacy-enhanced embed host that does NOT
+ * set cookies until the user starts playback). Defensive: an invalid
+ * `videoId` (not matching the 11-char pattern) renders nothing.
+ */
+declare function YouTubeEmbed({ videoId, start, title, }: YouTubeEmbedProps): ReactElement | null;
+/**
+ * Extract the 11-char video id from a URL string. Returns `null` if the
+ * URL doesn't match the canonical / short form. Used by the tiptap
+ * editor's paste rule + the `contentFields` markdown walker.
+ */
+declare function parseYoutubeUrl(url: string): string | null;
+
+interface YoutubePluginOptions {
+    /**
+     * Override the plugin's `name` (and therefore admin-side namespace).
+     * Useful if a site wants to install two instances or rename the
+     * default — though multi-instance is not currently supported by the
+     * contentFields registry.
+     */
+    name?: string;
+}
+declare function youtubePlugin(opts?: YoutubePluginOptions): AmplessPlugin;
+
+export { YOUTUBE_URL, YouTubeEmbed, type YoutubePluginOptions, youtubePlugin as default, parseYoutubeUrl };

package/dist/index.js

@@ -0,0 +1,45 @@
+import {
+  YOUTUBE_URL,
+  YouTubeEmbed,
+  parseYoutubeUrl
+} from "./chunk-67ETNQMN.js";
+
+// src/index.tsx
+import { definePlugin } from "ampless";
+import { jsx } from "react/jsx-runtime";
+function youtubePlugin(opts = {}) {
+  return definePlugin({
+    name: opts.name ?? "@ampless/plugin-youtube",
+    apiVersion: 1,
+    packageName: "@ampless/plugin-youtube",
+    trust_level: "trusted",
+    capabilities: ["contentFields"],
+    displayName: { en: "YouTube embeds", ja: "YouTube \u57CB\u3081\u8FBC\u307F" },
+    contentFields: [
+      {
+        kind: "tiptap",
+        nodeType: "amplessYoutube",
+        render: (node) => {
+          const videoId = String(node.attrs?.videoId ?? "");
+          const startRaw = node.attrs?.start;
+          const start = typeof startRaw === "number" && Number.isFinite(startRaw) ? startRaw : void 0;
+          return /* @__PURE__ */ jsx(YouTubeEmbed, { videoId, start });
+        }
+      },
+      {
+        kind: "markdown-url",
+        pattern: YOUTUBE_URL,
+        render: ({ match }) => {
+          const videoId = match[1] ?? match[2] ?? "";
+          return /* @__PURE__ */ jsx(YouTubeEmbed, { videoId });
+        }
+      }
+    ]
+  });
+}
+export {
+  YOUTUBE_URL,
+  YouTubeEmbed,
+  youtubePlugin as default,
+  parseYoutubeUrl
+};

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@ampless/plugin-youtube",
+  "version": "1.0.0-alpha.1",
+  "description": "YouTube embed plugin for ampless — renders youtube.com / youtu.be URLs inline as iframes in tiptap + markdown posts",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./editor": {
+      "import": "./dist/editor.js",
+      "types": "./dist/editor.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/heavymoons/ampless.git",
+    "directory": "packages/plugin-youtube"
+  },
+  "homepage": "https://github.com/heavymoons/ampless/tree/main/packages/plugin-youtube#readme",
+  "bugs": "https://github.com/heavymoons/ampless/issues",
+  "peerDependencies": {
+    "@tiptap/core": "^3",
+    "react": "^18 || ^19",
+    "ampless": "1.0.0-alpha.42"
+  },
+  "devDependencies": {
+    "@tiptap/core": "^3.23.6",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  },
+  "keywords": [
+    "ampless",
+    "plugin",
+    "ampless-plugin",
+    "youtube",
+    "embed",
+    "cms"
+  ],
+  "amplessPlugin": {
+    "apiVersion": 1,
+    "name": "@ampless/plugin-youtube",
+    "trustLevel": "trusted",
+    "capabilities": [
+      "contentFields"
+    ],
+    "displayName": {
+      "en": "YouTube embeds",
+      "ja": "YouTube 埋め込み"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests"
+  }
+}