create-ampless 1.0.0-alpha.126 → 1.0.0-alpha.128

package/dist/templates/_shared/app/(admin)/admin/_actions/render-preview.tsx

@@ -0,0 +1,32 @@
+'use server'
+
+// Phase 7 preview pipeline. <PostForm> / <PostHistoryPanel> calls this
+// server action with the in-flight draft Post; we render the body +
+// page-level scripts on the server (where async ReactNode +
+// `contentFields` plugin renderers can run) and return a complete HTML
+// string that the admin shows in an iframe (sandbox=`allow-scripts`).
+//
+// Server-side is the only place this can live: `ampless.renderBody`
+// returns a Promise<ReactNode>, so client code can't call it inline.
+// The action also has access to the `Ampless` instance via
+// `admin.getAmpless()` which the client never sees.
+
+import { renderToStaticMarkup } from 'react-dom/server'
+import type { Post } from 'ampless'
+import { admin } from '@/lib/admin'
+
+export async function renderPreviewHtml(draft: Post): Promise<string> {
+  const ampless = await admin.getAmpless()
+  // IMPORTANT: include BOTH the body and the page-level scripts so
+  // widgets like x.com's `widgets.js` get a chance to hydrate in the
+  // iframe. Without `publicPostScriptsForPage([draft])` the embed
+  // blockquote would render but never load the widget JS, and authors
+  // wouldn't see what the public page actually looks like.
+  const node = (
+    <>
+      {await ampless.renderBody(draft)}
+      {await ampless.publicPostScriptsForPage([draft])}
+    </>
+  )
+  return renderToStaticMarkup(node)
+}

package/dist/templates/_shared/app/(admin)/admin/_editor-bootstrap.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+// Phase 7 admin-editor extension slot. Templates wire first-party
+// embed plugins' tiptap Node extensions here so the admin's
+// <TiptapEditor> picks them up. Empty by default — uncomment the
+// imports + the registration to enable YouTube / x.com embeds.
+//
+// Wired into the admin layout via:
+//   createAdminLayout(admin, { editorBootstrap: EditorBootstrap })
+
+import { installAdminEditorExtensions } from '@ampless/admin/editor'
+// import { youtubeEditor } from '@ampless/plugin-youtube/editor'
+// import { tweetEditor } from '@ampless/plugin-x-embed/editor'
+
+export function EditorBootstrap({ children }: { children: React.ReactNode }) {
+  installAdminEditorExtensions([
+    // youtubeEditor.extension,
+    // tweetEditor.extension,
+  ])
+  return <>{children}</>
+}

package/dist/templates/_shared/app/(admin)/admin/layout.tsx

@@ -1,4 +1,5 @@
 import { admin } from '@/lib/admin'
 import { createAdminLayout } from '@ampless/admin/pages'
+import { EditorBootstrap } from './_editor-bootstrap'
 
-export default createAdminLayout(admin)
+export default createAdminLayout(admin, { editorBootstrap: EditorBootstrap })

package/dist/templates/_shared/app/(admin)/admin/posts/[postId]/page.tsx

@@ -1,4 +1,5 @@
 import { admin } from '@/lib/admin'
 import { createEditPostPage } from '@ampless/admin/pages'
+import { renderPreviewHtml } from '../../_actions/render-preview'
 
-export default createEditPostPage(admin)
+export default createEditPostPage(admin, { renderPreviewAction: renderPreviewHtml })

package/dist/templates/_shared/app/(admin)/admin/posts/new/page.tsx

@@ -1,4 +1,5 @@
 import { admin } from '@/lib/admin'
 import { createNewPostPage } from '@ampless/admin/pages'
+import { renderPreviewHtml } from '../../_actions/render-preview'
 
-export default createNewPostPage(admin)
+export default createNewPostPage(admin, { renderPreviewAction: renderPreviewHtml })

package/dist/templates/_shared/docs/plugin-author-guide.ja.md

@@ -546,7 +546,7 @@ export default function readingTimePlugin() {
 ```tsx
 {postBody}            {/* publicBodyForPost — JSON-LD */}
 {html.beforeContent}  {/* publicHtmlForPost — beforeContent スロット */}
-<div className="prose" dangerouslySetInnerHTML={{ __html: renderBody(post) }} />
+<div className="prose">{await ampless.renderBody(post)}</div>
 {html.afterContent}   {/* publicHtmlForPost — afterContent スロット */}
 ```
 
@@ -684,6 +684,166 @@ npm 公開のスタンドアロンプラグインの場合は、`package.json#am
 
 ---
 
+## 6b. 投稿本文の差し替え: `contentFields` (Phase 7)
+
+`contentFields` capability は、投稿本文の一部（tiptap ノード、または markdown の単独行 URL）を、プラグインが管理する React サブツリーで差し替える機能。`@ampless/plugin-youtube` / `@ampless/plugin-x-embed` が `https://youtu.be/...` URL を iframe プレーヤーに、`https://x.com/<handle>/status/...` URL を tweet blockquote に展開するために使う。
+
+### 形
+
+```ts
+import { definePlugin, type ContentFieldRenderer } from 'ampless'
+
+definePlugin({
+  // ...
+  capabilities: ['contentFields'],
+  contentFields: [
+    {
+      kind: 'tiptap',
+      nodeType: 'amplessYoutube',
+      render: (node, ctx) => <YouTubeEmbed videoId={String(node.attrs?.videoId)} />,
+    },
+    {
+      kind: 'markdown-url',
+      pattern: /^https:\/\/youtu\.be\/([\w-]{11})$/,
+      render: ({ match }, ctx) => <YouTubeEmbed videoId={match[1]!} />,
+    },
+  ],
+})
+```
+
+各 renderer は `ampless.renderBody(post)` 内で本文を歩く runtime から server-side で呼び出される。戻り値は `ReactNode`。`PluginPublicRenderContext` (`ctx`) は `publicHead` / `publicBodyEnd` と同じものなので、`ctx.setting<T>(key)` も同じように使える。
+
+### 2 種類の kind
+
+- **`tiptap`** — `nodeType` (例: `'amplessYoutube'`) でキー付け。runtime の tiptap walker が `type` 一致のノードを見つけたら renderer を呼ぶ。デフォルトの switch-case レンダリングはバイパスされ、プラグインがサブツリー全体を所有する。
+- **`markdown-url`** — anchored な `RegExp` (`^...$`) でキー付け。runtime は `marked.lexer` で markdown をトークン化し、内容全体が単独 URL の paragraph トークン (autolink / bare URL / `[text](url)`) のみについて pattern を試す。最初にマッチしたものが勝ち。capture group は `match[1]`, `match[2]`, ... でアクセス可能。
+
+### 命名と一意性
+
+- first-party プラグインは `ampless...` の camelCase プレフィックス（`amplessYoutube`, `amplessTweet` 等）を使い、コミュニティ製の `nodeType` と衝突しないようにしている。
+- runtime は同じ `nodeType` / `pattern.source` の重複登録を起動時に throw で拒否する。先勝ち。v1 は multi-instance 非対応。
+
+### markdown URL pattern のルール
+
+- **必ず `^...$` で anchor する**。anchor なしだと段落内の URL が誤マッチし、周辺テキストが壊れる。
+- runtime はマッチ前に前後の whitespace を trim するので、pattern 側で `\s*` を書く必要はない。
+- 段落の唯一のトークンが `[caption](url)` の markdown link なら受理する。`[caption with link](url)` のように前後にテキストが混在するケースは対象外（正しい挙動: prose は本文に残すべきで、video embed にすべきではない）。
+
+---
+
+## 6c. ページレベルスクリプト: `publicPostScript` (Phase 7)
+
+`publicPostScript` capability は、ページ上の投稿が必要とする `<script>` タグをプラグインから出力するためのもの。runtime は安定 `id` で dedupe するので、同一ページ内の複数 embed は 1 つの script タグに集約される。`@ampless/plugin-x-embed` がページに tweet embed がある場合のみ `https://platform.twitter.com/widgets.js` を 1 度だけ注入するのに使われている。
+
+### 形
+
+```ts
+definePlugin({
+  capabilities: ['contentFields', 'publicPostScript'],
+  publicPostScript(post, ctx) {
+    if (!hasTweetIn(post)) return []
+    return [
+      {
+        id: 'amplessTweet:widgets',
+        src: 'https://platform.twitter.com/widgets.js',
+        async: true,
+      },
+    ]
+  },
+})
+```
+
+### テーマからの呼び出し
+
+テーマは投稿本文の出力後に `{await ampless.publicPostScriptsForPage(posts)}` を呼ぶ。first-party テーマは post 詳細ページ / home ページ (featured 表示時) で自動的に呼び出す:
+
+```tsx
+<div>{await ampless.renderBody(post)}</div>
+{await ampless.publicPostScriptsForPage([post])}
+```
+
+runtime は:
+
+1. プラグイン × post 組ごとに `publicPostScript(post, ctx)` を呼ぶ。
+2. `id` が空 / 非 string、`src` が http(s) でない、descriptor がオブジェクトでない、等を drop。
+3. `id` で dedupe（先勝ち）。
+4. `<Fragment>` で `<script src={src} async defer />` を出力。
+
+### CSP の扱い
+
+runtime は `src` のホスト allowlist を強制しない。CSP はサイト側エンジニアの責任（`next.config.ts` / middleware で `script-src` に script ホスト（例: `platform.twitter.com`）を追加）。各プラグインの README に書いてある。
+
+---
+
+## 6d. Admin エディタ拡張の配線 (Phase 7)
+
+admin エディタに tiptap Node 拡張を提供するプラグインは、別途 `./editor` subpath の client-side エントリを出荷する。テンプレート側で `_editor-bootstrap.tsx` から配線する:
+
+```tsx
+// templates/_shared/app/(admin)/admin/_editor-bootstrap.tsx
+'use client'
+import { installAdminEditorExtensions } from '@ampless/admin/editor'
+import { youtubeEditor } from '@ampless/plugin-youtube/editor'
+import { tweetEditor } from '@ampless/plugin-x-embed/editor'
+
+export function EditorBootstrap({ children }: { children: React.ReactNode }) {
+  installAdminEditorExtensions([
+    youtubeEditor.extension,
+    tweetEditor.extension,
+  ])
+  return <>{children}</>
+}
+```
+
+その上で layout に渡す:
+
+```tsx
+// templates/_shared/app/(admin)/admin/layout.tsx
+import { createAdminLayout } from '@ampless/admin/pages'
+import { EditorBootstrap } from './_editor-bootstrap'
+export default createAdminLayout(admin, { editorBootstrap: EditorBootstrap })
+```
+
+`installAdminEditorExtensions` は idempotent で、render 時に client component 内で呼ばれる。admin の `<TiptapEditor>` は毎回 render 時に登録済みリストを built-in extensions の末尾に spread する。
+
+### エディタプレビューのパイプライン
+
+admin の edit / new post フォームは preview ペインを `<iframe sandbox="allow-scripts">` で表示する。`srcDoc` はテンプレート側 server action が返す HTML:
+
+```tsx
+// templates/_shared/app/(admin)/admin/_actions/render-preview.tsx
+'use server'
+import { renderToStaticMarkup } from 'react-dom/server'
+import type { Post } from 'ampless'
+import { admin } from '@/lib/admin'
+
+export async function renderPreviewHtml(draft: Post): Promise<string> {
+  const ampless = await admin.getAmpless()
+  const node = (
+    <>
+      {await ampless.renderBody(draft)}
+      {await ampless.publicPostScriptsForPage([draft])}
+    </>
+  )
+  return renderToStaticMarkup(node)
+}
+```
+
+page factory は `renderPreviewAction` オプションでこの action を thread する:
+
+```tsx
+// templates/_shared/app/(admin)/admin/posts/[postId]/page.tsx
+import { admin } from '@/lib/admin'
+import { createEditPostPage } from '@ampless/admin/pages'
+import { renderPreviewHtml } from '../../_actions/render-preview'
+
+export default createEditPostPage(admin, { renderPreviewAction: renderPreviewHtml })
+```
+
+iframe の `sandbox="allow-scripts"` は `allow-same-origin` を含まないので、preview の中身は opaque origin で動作する → widget script は admin の DOM に触れない。トレードオフ: widget が自身の origin の storage にアクセスできない場合に正しく動かない可能性がある。Phase 7 時点の dogfood では YouTube iframe / x.com widgets.js とも opaque origin で動作することを確認済み。将来 non-opaque origin が必要な widget が出てきた場合、escape hatch は別 subdomain の preview route + 適切な CSP — sandbox flag を緩めるのは取らない。
+
+---
+
 ## 7. 非同期イベントフック
 
 `hooks` は SQS から到着したイベントを trust_level に対応する processor Lambda が受けて実行します。

package/dist/templates/_shared/docs/plugin-author-guide.md

@@ -678,7 +678,7 @@ the slots:
 ```tsx
 {postBody}            {/* publicBodyForPost — JSON-LD */}
 {html.beforeContent}  {/* publicHtmlForPost — beforeContent slot */}
-<div className="prose" dangerouslySetInnerHTML={{ __html: renderBody(post) }} />
+<div className="prose">{await ampless.renderBody(post)}</div>
 {html.afterContent}   {/* publicHtmlForPost — afterContent slot */}
 ```
 
@@ -894,6 +894,218 @@ manifest and the factory return value:
 
 ---
 
+## 6b. In-body content renderers: `contentFields` (Phase 7)
+
+The `contentFields` capability lets a plugin replace specific fragments
+of a post body — tiptap nodes or single-line markdown URLs — with a
+React subtree it controls. Used by the first-party `@ampless/plugin-youtube`
+and `@ampless/plugin-x-embed` packages to expand `https://youtu.be/...`
+URLs into iframe players and `https://x.com/<handle>/status/...` URLs
+into tweet blockquotes.
+
+### Shape
+
+```ts
+import { definePlugin, type ContentFieldRenderer } from 'ampless'
+
+definePlugin({
+  // ...
+  capabilities: ['contentFields'],
+  contentFields: [
+    {
+      kind: 'tiptap',
+      nodeType: 'amplessYoutube',
+      render: (node, ctx) => <YouTubeEmbed videoId={String(node.attrs?.videoId)} />,
+    },
+    {
+      kind: 'markdown-url',
+      pattern: /^https:\/\/youtu\.be\/([\w-]{11})$/,
+      render: ({ match }, ctx) => <YouTubeEmbed videoId={match[1]!} />,
+    },
+  ],
+})
+```
+
+Each renderer is called server-side by the runtime when it walks a post
+body during `ampless.renderBody(post)`. The return value must be a
+`ReactNode`. The plugin's `PluginPublicRenderContext` (`ctx`) is the
+same context handed to `publicHead` / `publicBodyEnd`, so `ctx.setting<T>(key)`
+works exactly the same way.
+
+### The two kinds
+
+- **`tiptap`** — keyed by `nodeType` (a string, e.g. `'amplessYoutube'`).
+  The runtime's tiptap walker calls the renderer whenever it encounters
+  a node whose `type` matches `nodeType`. Default switch-case rendering
+  is bypassed; the plugin owns the subtree.
+- **`markdown-url`** — keyed by an anchored `RegExp` (`^...$`). The
+  runtime tokenizes markdown with `marked.lexer` and, for any
+  `paragraph` token whose entire content is a single URL (autolink,
+  bare URL, or `[text](url)` markdown link), tests the URL against
+  each registered pattern. The first match wins; capture groups are
+  exposed via `match[1]`, `match[2]`, etc.
+
+### Naming and uniqueness
+
+- First-party plugins use the `ampless...` camelCase prefix
+  (`amplessYoutube`, `amplessTweet`) so the namespace stays clear of
+  community-contributed `nodeType`s.
+- The runtime rejects duplicate `nodeType` / `pattern.source` at
+  startup with a thrown error. The first plugin to register a given key
+  wins; the second one fails fast. Multi-instance v1 is not supported.
+
+### Markdown URL pattern rules
+
+- **Always anchor with `^...$`** so the pattern only matches paragraphs
+  whose entire content is a single URL. A pattern without anchors would
+  match URLs embedded mid-paragraph and break the surrounding text.
+- The runtime trims leading/trailing whitespace before matching, so
+  patterns don't need to account for `\s*` around the URL.
+- Inline `[caption](url)` markdown links are accepted when the link is
+  the paragraph's only token. `[caption with link](url)` mixed with
+  surrounding text is NOT matched (correct behaviour: the prose
+  belongs in the post, not a video embed).
+
+---
+
+## 6c. Page-level scripts: `publicPostScript` (Phase 7)
+
+The `publicPostScript` capability lets a plugin emit a `<script>` tag
+that any post on the page needs. The runtime dedupes by stable `id`
+so multiple embeds in one or several posts collapse to one script tag.
+Used by `@ampless/plugin-x-embed` to inject
+`https://platform.twitter.com/widgets.js` once per page that has any
+tweet embed.
+
+### Shape
+
+```ts
+definePlugin({
+  capabilities: ['contentFields', 'publicPostScript'],
+  publicPostScript(post, ctx) {
+    if (!hasTweetIn(post)) return []
+    return [
+      {
+        id: 'amplessTweet:widgets',
+        src: 'https://platform.twitter.com/widgets.js',
+        async: true,
+      },
+    ]
+  },
+})
+```
+
+### Theme integration
+
+Themes call `{await ampless.publicPostScriptsForPage(posts)}` after
+rendering each post body. First-party themes do this automatically in
+their post detail page and home page (when a featured post is shown):
+
+```tsx
+<div>{await ampless.renderBody(post)}</div>
+{await ampless.publicPostScriptsForPage([post])}
+```
+
+The runtime:
+
+1. Calls `publicPostScript(post, ctx)` for each plugin × post pair.
+2. Drops descriptors with empty/non-string `id`, with `src` that fails
+   the http(s) allowlist, or that aren't objects.
+3. Dedupes by `id` (first arrival wins).
+4. Emits a `<Fragment>` of `<script src={src} async defer />` elements.
+
+### CSP considerations
+
+The runtime does **not** enforce a host allowlist on `src`. CSP is the
+site engineer's responsibility — add the script host (e.g.
+`platform.twitter.com`) to `script-src` in `next.config.ts` /
+middleware. This is documented in each plugin's README.
+
+---
+
+## 6d. Admin editor extension wiring (Phase 7)
+
+Plugins that contribute tiptap Node extensions to the admin editor
+ship a separate client-side entry under the `./editor` subpath. The
+template wires it up in `_editor-bootstrap.tsx`:
+
+```tsx
+// templates/_shared/app/(admin)/admin/_editor-bootstrap.tsx
+'use client'
+import { installAdminEditorExtensions } from '@ampless/admin/editor'
+import { youtubeEditor } from '@ampless/plugin-youtube/editor'
+import { tweetEditor } from '@ampless/plugin-x-embed/editor'
+
+export function EditorBootstrap({ children }: { children: React.ReactNode }) {
+  installAdminEditorExtensions([
+    youtubeEditor.extension,
+    tweetEditor.extension,
+  ])
+  return <>{children}</>
+}
+```
+
+Then thread it into the layout:
+
+```tsx
+// templates/_shared/app/(admin)/admin/layout.tsx
+import { createAdminLayout } from '@ampless/admin/pages'
+import { EditorBootstrap } from './_editor-bootstrap'
+export default createAdminLayout(admin, { editorBootstrap: EditorBootstrap })
+```
+
+`installAdminEditorExtensions` is idempotent and runs at render time
+inside a client component. The admin's `<TiptapEditor>` spreads the
+registered list onto its built-in extensions on every render.
+
+### Editor preview pipeline
+
+The admin's edit / new post forms render the preview pane in an
+`<iframe sandbox="allow-scripts">` whose `srcDoc` is the HTML returned
+by the template's server action:
+
+```tsx
+// templates/_shared/app/(admin)/admin/_actions/render-preview.tsx
+'use server'
+import { renderToStaticMarkup } from 'react-dom/server'
+import type { Post } from 'ampless'
+import { admin } from '@/lib/admin'
+
+export async function renderPreviewHtml(draft: Post): Promise<string> {
+  const ampless = await admin.getAmpless()
+  const node = (
+    <>
+      {await ampless.renderBody(draft)}
+      {await ampless.publicPostScriptsForPage([draft])}
+    </>
+  )
+  return renderToStaticMarkup(node)
+}
+```
+
+Page factories thread the action down via the `renderPreviewAction`
+option:
+
+```tsx
+// templates/_shared/app/(admin)/admin/posts/[postId]/page.tsx
+import { admin } from '@/lib/admin'
+import { createEditPostPage } from '@ampless/admin/pages'
+import { renderPreviewHtml } from '../../_actions/render-preview'
+
+export default createEditPostPage(admin, { renderPreviewAction: renderPreviewHtml })
+```
+
+The iframe's `sandbox="allow-scripts"` (without `allow-same-origin`)
+keeps preview content in an opaque origin so widget scripts cannot
+reach the admin's DOM. The trade-off is that some widgets may misbehave
+when they can't access their own origin's storage; the YouTube iframe
+embed and x.com widgets.js both work under these constraints in
+dogfood as of Phase 7. If a future widget needs a non-opaque preview
+origin, the escape hatch is a separate preview route on a different
+subdomain with appropriate CSP — not relaxing the sandbox flag.
+
+---
+
 ## 7. Async event hooks
 
 `hooks` runs inside the trust_level-matched processor Lambda when an

package/dist/templates/_shared/package.json

@@ -25,21 +25,21 @@
     "@tiptap/pm": "^3.23.6",
     "@tiptap/react": "^3.23.6",
     "@tiptap/starter-kit": "^3.23.6",
-    "@ampless/plugin-analytics-ga4": "^0.2.0-alpha.25",
-    "@ampless/plugin-cookie-consent": "^0.1.0-alpha.16",
-    "@ampless/plugin-gtm": "^0.2.0-alpha.24",
-    "@ampless/plugin-og-image": "^0.2.0-alpha.41",
-    "@ampless/plugin-plausible": "^0.2.0-alpha.24",
-    "@ampless/plugin-reading-time": "^0.1.0-alpha.14",
-    "@ampless/plugin-rss": "^0.2.0-alpha.41",
-    "@ampless/plugin-schema-jsonld": "^0.1.1-alpha.20",
-    "@ampless/plugin-seo": "^0.2.0-alpha.41",
-    "@ampless/plugin-webhook": "^0.2.0-alpha.42",
-    "@ampless/admin": "^1.0.0-alpha.74",
-    "@ampless/backend": "^1.0.0-alpha.63",
-    "@ampless/runtime": "^1.0.0-alpha.50",
+    "@ampless/plugin-analytics-ga4": "^0.2.0-alpha.26",
+    "@ampless/plugin-cookie-consent": "^0.1.0-alpha.17",
+    "@ampless/plugin-gtm": "^0.2.0-alpha.25",
+    "@ampless/plugin-og-image": "^0.2.0-alpha.42",
+    "@ampless/plugin-plausible": "^0.2.0-alpha.25",
+    "@ampless/plugin-reading-time": "^0.1.0-alpha.15",
+    "@ampless/plugin-rss": "^0.2.0-alpha.42",
+    "@ampless/plugin-schema-jsonld": "^0.1.1-alpha.21",
+    "@ampless/plugin-seo": "^0.2.0-alpha.42",
+    "@ampless/plugin-webhook": "^0.2.0-alpha.43",
+    "@ampless/admin": "^1.0.0-alpha.75",
+    "@ampless/backend": "^1.0.0-alpha.64",
+    "@ampless/runtime": "^1.0.0-alpha.51",
     "@digital-go-jp/tailwind-theme-plugin": "^0.3.4",
-    "ampless": "^1.0.0-alpha.41",
+    "ampless": "^1.0.0-alpha.42",
     "aws-amplify": "^6.17.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/dist/templates/blog/pages/home.tsx

@@ -1,6 +1,5 @@
 import Link from 'next/link'
 import { formatDate, parseLinkList, type ThemeRouteContext } from 'ampless'
-import { renderBody } from '@ampless/runtime'
 import { ampless } from '@/lib/ampless'
 import { admin } from '@/lib/admin'
 import { TagList } from '@/components/tag-list'
@@ -59,13 +58,14 @@ export default async function BlogHome(_: ThemeRouteContext) {
                 </time>
               )}
             </Link>
-            <div
-              className="prose prose-neutral dark:prose-invert mt-4 max-w-none"
-              dangerouslySetInnerHTML={{ __html: renderBody(featured) }}
-            />
+            <div className="prose prose-neutral dark:prose-invert mt-4 max-w-none">
+              {await ampless.renderBody(featured)}
+            </div>
           </article>
         )}
 
+        {featured && (await ampless.publicPostScriptsForPage([featured]))}
+
         {posts.length === 0 ? (
           !featured && <p className="text-gray-500">{admin.t('public.noPosts')}</p>
         ) : (

package/dist/templates/blog/pages/post.tsx

@@ -2,7 +2,6 @@ import type { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { formatDate, parseLinkList, type ThemeRouteContext } from 'ampless'
-import { renderBody } from '@ampless/runtime'
 import { ampless } from '@/lib/ampless'
 import { admin } from '@/lib/admin'
 import { LightboxBinder } from '@/components/lightbox-content'
@@ -86,11 +85,14 @@ export default async function BlogPost({ params }: PostCtx) {
             id="post-body"
             className="prose prose-neutral dark:prose-invert max-w-none [&_img]:max-w-[var(--ampless-img-max-width)] [&_img]:mx-auto"
             style={proseStyle}
-            dangerouslySetInnerHTML={{ __html: renderBody(post) }}
-          />
+          >
+            {await ampless.renderBody(post)}
+          </div>
 
           {html.afterContent}
 
+          {await ampless.publicPostScriptsForPage([post])}
+
           <TagList tags={post.tags} className="mt-8 border-t pt-6" />
 
           <footer className="mt-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-gray-500">

package/dist/templates/corporate/pages/home.tsx

@@ -1,6 +1,5 @@
 import Link from 'next/link'
 import { formatDate, type ThemeRouteContext } from 'ampless'
-import { renderBody } from '@ampless/runtime'
 import { ampless } from '@/lib/ampless'
 import { SiteHeader } from '@/components/site-chrome/site-header'
 import { SiteFooter } from '@/components/site-chrome/site-footer'
@@ -70,14 +69,15 @@ export default async function CorporateHome(_: ThemeRouteContext) {
                   {formatDate(featured.publishedAt, settings.dateFormat, settings.timezone)}
                 </time>
               )}
-              <div
-                className="prose prose-neutral dark:prose-invert mt-6 max-w-none"
-                dangerouslySetInnerHTML={{ __html: renderBody(featured) }}
-              />
+              <div className="prose prose-neutral dark:prose-invert mt-6 max-w-none">
+                {await ampless.renderBody(featured)}
+              </div>
             </article>
           </section>
         )}
 
+        {featured && (await ampless.publicPostScriptsForPage([featured]))}
+
         {posts.length > 0 && (
           <section className="mx-auto max-w-4xl px-6 py-16">
             <h2 className="mb-8 border-l-4 border-[var(--primary)] pl-4 text-2xl font-bold">

package/dist/templates/corporate/pages/post.tsx

@@ -2,7 +2,6 @@ import type { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { formatDate, type ThemeRouteContext } from 'ampless'
-import { renderBody } from '@ampless/runtime'
 import { ampless } from '@/lib/ampless'
 import { admin } from '@/lib/admin'
 import { LightboxBinder } from '@/components/lightbox-content'
@@ -75,11 +74,14 @@ export default async function CorporatePost({ params }: PostCtx) {
             id="post-body"
             className="prose prose-neutral dark:prose-invert max-w-none [&_img]:max-w-[var(--ampless-img-max-width)] [&_img]:mx-auto"
             style={proseStyle}
-            dangerouslySetInnerHTML={{ __html: renderBody(post) }}
-          />
+          >
+            {await ampless.renderBody(post)}
+          </div>
 
           {html.afterContent}
 
+          {await ampless.publicPostScriptsForPage([post])}
+
           <TagList tags={post.tags} className="mt-8 border-t pt-6" />
         </article>
 

package/dist/templates/dads/pages/home.tsx

@@ -1,6 +1,5 @@
 import Link from 'next/link'
 import { formatDate, type ThemeRouteContext } from 'ampless'
-import { renderBody } from '@ampless/runtime'
 import { ampless } from '@/lib/ampless'
 import { SiteHeader } from '@/components/site-chrome/site-header'
 import { SiteFooter } from '@/components/site-chrome/site-footer'
@@ -63,14 +62,15 @@ export default async function DadsHome(_: ThemeRouteContext) {
                   {featured.title}
                 </Link>
               </h2>
-              <div
-                className="prose prose-neutral dark:prose-invert mt-6 max-w-none"
-                dangerouslySetInnerHTML={{ __html: renderBody(featured) }}
-              />
+              <div className="prose prose-neutral dark:prose-invert mt-6 max-w-none">
+                {await ampless.renderBody(featured)}
+              </div>
             </div>
           </section>
         )}
 
+        {featured && (await ampless.publicPostScriptsForPage([featured]))}
+
         {posts.length > 0 && (
           <section className="px-6 py-12">
             <div className="mx-auto max-w-4xl">

package/dist/templates/dads/pages/post.tsx

@@ -2,7 +2,6 @@ import type { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { formatDate, type ThemeRouteContext } from 'ampless'
-import { renderBody } from '@ampless/runtime'
 import { ampless } from '@/lib/ampless'
 import { admin } from '@/lib/admin'
 import { LightboxBinder } from '@/components/lightbox-content'
@@ -80,11 +79,14 @@ export default async function DadsPost({ params }: PostCtx) {
             id="post-body"
             className="prose prose-neutral dark:prose-invert max-w-none [&_a]:text-[var(--primary)] [&_a]:underline-offset-4 [&_img]:max-w-[var(--ampless-img-max-width)] [&_img]:mx-auto"
             style={proseStyle}
-            dangerouslySetInnerHTML={{ __html: renderBody(post) }}
-          />
+          >
+            {await ampless.renderBody(post)}
+          </div>
 
           {html.afterContent}
 
+          {await ampless.publicPostScriptsForPage([post])}
+
           <TagList tags={post.tags} className="mt-10 border-t pt-6" />
         </article>
 

package/dist/templates/docs/pages/post.tsx

@@ -2,7 +2,6 @@ import type { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { formatDate, type ThemeRouteContext } from 'ampless'
-import { renderBody } from '@ampless/runtime'
 import { ampless } from '@/lib/ampless'
 import { LightboxBinder } from '@/components/lightbox-content'
 import { TagList } from '@/components/tag-list'
@@ -77,11 +76,14 @@ export default async function DocsPost({ params }: PostCtx) {
               id="post-body"
               className="prose prose-neutral dark:prose-invert max-w-none [&_img]:max-w-[var(--ampless-img-max-width)] [&_img]:mx-auto"
               style={proseStyle}
-              dangerouslySetInnerHTML={{ __html: renderBody(post) }}
-            />
+            >
+              {await ampless.renderBody(post)}
+            </div>
 
             {html.afterContent}
 
+            {await ampless.publicPostScriptsForPage([post])}
+
             <TagList tags={post.tags} className="mt-10 border-t pt-6" />
           </article>
         </main>

package/dist/templates/landing/pages/home.tsx

@@ -1,6 +1,5 @@
 import Link from 'next/link'
 import { formatDate, type ThemeRouteContext } from 'ampless'
-import { renderBody } from '@ampless/runtime'
 import { ampless } from '@/lib/ampless'
 import { SiteHeader } from '@/components/site-chrome/site-header'
 import { SiteFooter } from '@/components/site-chrome/site-footer'
@@ -63,14 +62,15 @@ export default async function LandingHome(_: ThemeRouteContext) {
           <section className="mx-auto max-w-3xl px-6 py-16">
             <article>
               <h2 className="text-3xl font-bold tracking-tight">{featured.title}</h2>
-              <div
-                className="prose prose-neutral dark:prose-invert mt-6 max-w-none"
-                dangerouslySetInnerHTML={{ __html: renderBody(featured) }}
-              />
+              <div className="prose prose-neutral dark:prose-invert mt-6 max-w-none">
+                {await ampless.renderBody(featured)}
+              </div>
             </article>
           </section>
         )}
 
+        {featured && (await ampless.publicPostScriptsForPage([featured]))}
+
         {posts.length > 0 && (
           <section className="mx-auto max-w-5xl px-6 py-16">
             <h2 className="mb-8 text-3xl font-bold">Latest</h2>

package/dist/templates/landing/pages/post.tsx

@@ -2,7 +2,6 @@ import type { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { formatDate, type ThemeRouteContext } from 'ampless'
-import { renderBody } from '@ampless/runtime'
 import { ampless } from '@/lib/ampless'
 import { admin } from '@/lib/admin'
 import { LightboxBinder } from '@/components/lightbox-content'
@@ -77,11 +76,14 @@ export default async function LandingPost({ params }: PostCtx) {
             id="post-body"
             className="prose prose-neutral dark:prose-invert max-w-none [&_img]:max-w-[var(--ampless-img-max-width)] [&_img]:mx-auto"
             style={proseStyle}
-            dangerouslySetInnerHTML={{ __html: renderBody(post) }}
-          />
+          >
+            {await ampless.renderBody(post)}
+          </div>
 
           {html.afterContent}
 
+          {await ampless.publicPostScriptsForPage([post])}
+
           <TagList tags={post.tags} className="mt-10 border-t pt-6" />
         </article>
 

package/dist/templates/minimal/pages/post.tsx

@@ -2,7 +2,6 @@ import type { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { formatDate, type ThemeRouteContext } from 'ampless'
-import { renderBody } from '@ampless/runtime'
 import { ampless } from '@/lib/ampless'
 import { admin } from '@/lib/admin'
 import { LightboxBinder } from '@/components/lightbox-content'
@@ -58,11 +57,14 @@ export default async function MinimalPost({ params }: PostCtx) {
           id="post-body"
           className="prose prose-neutral dark:prose-invert max-w-none [&_img]:max-w-[var(--ampless-img-max-width)] [&_img]:mx-auto"
           style={proseStyle}
-          dangerouslySetInnerHTML={{ __html: renderBody(post) }}
-        />
+        >
+          {await ampless.renderBody(post)}
+        </div>
 
         {html.afterContent}
 
+        {await ampless.publicPostScriptsForPage([post])}
+
         <TagList tags={post.tags} className="mt-8 border-t pt-6" />
       </article>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ampless",
-  "version": "1.0.0-alpha.126",
+  "version": "1.0.0-alpha.128",
   "description": "Create a new ampless project",
   "license": "MIT",
   "type": "module",