@riebeckite/plugin-related-posts 0.0.15 → 0.0.17

package/README.md

@@ -1,8 +1,8 @@
 # @riebeckite/plugin-related-posts
 
 Build-time "related notes" navigation. For every published entry, the plugin
-ranks the other entries in the content manifest and appends a related-posts
-section to the rendered HTML. No client-side JavaScript is required.
+ranks the other entries in the content manifest and contributes a related-posts
+section to the `article.footer` Slot. No client-side JavaScript is required.
 
 [日本語](./README_ja.md)
 
@@ -21,9 +21,9 @@ Candidates are sorted by score (descending), then by title, then by slug, and
 clamped to `limit`. Entries that score below `minScore` are dropped. When no
 candidate qualifies, the entry's HTML is left untouched.
 
-The plugin appends the section to the manifest entry's HTML. Core synchronizes
-that HTML with the content the route renders, so the section appears on generated
-pages and in feeds.
+The plugin contributes the section to each manifest entry's `article.footer`
+Slot. The Site decides where to render that Slot, so the section appears on
+generated pages and in feeds when the standard article footer is used.
 
 ## Usage
 
@@ -37,6 +37,22 @@ export default defineConfig({
 });
 ```
 
+## Component
+
+In addition to the automatic `article.footer` Slot contribution, the navigation
+is available as a server-rendered Hono JSX Component for placement in a Site
+layout. Build the entries with the existing helper and pass resolved options:
+
+```tsx
+import RelatedPosts from "@riebeckite/plugin-related-posts/components";
+
+<RelatedPosts entries={related} options={resolvedOptions} />;
+```
+
+`related` is the result of `buildRelatedPosts()` and `resolvedOptions` is the
+result of `resolveRelatedPostsOptions()`. Import `style.css` when the Plugin is
+not registered.
+
 ## Options
 
 | Option | Type | Default | Description |
@@ -85,6 +101,7 @@ import "@riebeckite/plugin-related-posts/style.css";
 - `resolveRelatedPostsOptions(options?)` — apply option defaults
 - `buildRelatedPosts({ manifest, entry, options, config? })` — rank related entries
 - `renderRelatedPosts(entries, options)` — render the navigation HTML
+- `RelatedPosts` and `@riebeckite/plugin-related-posts/components` — Hono JSX Component
 - Types: `RelatedPostsOptions`, `ResolvedRelatedPostsOptions`, `RelatedPostsEntry`
 
 ## Limitations
@@ -96,4 +113,3 @@ import "@riebeckite/plugin-related-posts/style.css";
 ## See also
 
 - [Plugin guide](../../../docs/en/docs/reference/plugin-api.md)
-

package/README_ja.md

@@ -2,7 +2,7 @@
 
 ビルド時に「関連ノート」ナビゲーションを生成するプラグインです。公開対象の
 各エントリについて、コンテンツマニフェスト上の他のエントリをスコア順に並べ、
-関連ノートのセクションを HTML に追記します。クライアント側 JavaScript は
+関連ノートのセクションを `article.footer` Slot に追加します。クライアント側 JavaScript は
 不要です。
 
 [English](./README.md)
@@ -22,8 +22,8 @@
 `limit` 件に絞ります。`minScore` 未満の候補は除外します。条件を満たす候補が
 1 件もない場合、そのエントリの HTML は変更しません。
 
-マニフェストエントリの HTML にセクションを追記します。Core がその HTML を
-コンテンツルートの描画 HTML と同期するため、生成ページとフィードの両方に
+各マニフェストエントリの `article.footer` Slot にセクションを追加します。標準の
+記事フッターでこの Slot を描画している場合、生成ページとフィードの両方に
 セクションが反映されます。
 
 ## 使い方
@@ -38,6 +38,22 @@ export default defineConfig({
 });
 ```
 
+## Component として使う
+
+自動の `article.footer` Slot への追加に加え、Site のレイアウト内で任意の位置に
+配置できる、サーバー描画の Hono JSX Component も公開しています。既存の helper
+で entries を計算し、解決済みの options を渡してください。
+
+```tsx
+import RelatedPosts from "@riebeckite/plugin-related-posts/components";
+
+<RelatedPosts entries={related} options={resolvedOptions} />;
+```
+
+`related` には `buildRelatedPosts()` の戻り値を、`resolvedOptions` には
+`resolveRelatedPostsOptions()` の戻り値を渡します。Plugin を登録しない場合は
+`style.css` も読み込んでください。
+
 ## オプション
 
 | オプション | 型 | 既定値 | 説明 |
@@ -86,6 +102,7 @@ import "@riebeckite/plugin-related-posts/style.css";
 - `resolveRelatedPostsOptions(options?)` — オプションの既定値を適用する
 - `buildRelatedPosts({ manifest, entry, options, config? })` — 関連エントリを採点・整列する
 - `renderRelatedPosts(entries, options)` — ナビゲーション HTML を生成する
+- `RelatedPosts` と `@riebeckite/plugin-related-posts/components` — Hono JSX Component
 - 型: `RelatedPostsOptions`, `ResolvedRelatedPostsOptions`, `RelatedPostsEntry`
 
 ## 制約
@@ -94,7 +111,6 @@ import "@riebeckite/plugin-related-posts/style.css";
 - 判定材料はタグ・直接リンク・共引用のみです。読了時間や新しさ、フォルダは
   順位を決定的に保つため意図的に使いません。
 
-## ????
-
-- [?????????](../../../docs/ja/docs/reference/plugin-api.md)
+## 関連リンク
 
+- [プラグイン API](../../../docs/ja/docs/reference/plugin-api.md)

package/dist/components/related-posts.d.ts

@@ -0,0 +1,7 @@
+import type { RelatedPostsEntry, ResolvedRelatedPostsOptions } from "../src/types.js";
+type Props = {
+    entries: readonly RelatedPostsEntry[];
+    options: ResolvedRelatedPostsOptions;
+};
+export default function RelatedPosts(props: Props): import("hono/jsx/jsx-dev-runtime").JSX.Element;
+export {};

package/dist/components/related-posts.js

@@ -0,0 +1,21 @@
+// components/related-posts.tsx
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+function RelatedPosts(props) {
+  if (props.entries.length === 0) return null;
+  const { className, heading, headingText } = props.options;
+  return /* @__PURE__ */ jsxs("nav", { class: className, "data-related-posts": "", children: [
+    heading ? /* @__PURE__ */ jsx("h2", { class: `${className}__heading`, children: headingText }) : null,
+    /* @__PURE__ */ jsx("ul", { children: props.entries.map((entry) => /* @__PURE__ */ jsx("li", { class: `${className}__item`, children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        class: `${className}__link`,
+        href: entry.permalink,
+        "data-related-score": entry.score,
+        children: entry.title
+      }
+    ) }, entry.slug)) })
+  ] });
+}
+export {
+  RelatedPosts as default
+};

package/dist/index.d.ts

@@ -1,16 +1,10 @@
 import type { RelatedPostsOptions } from "./src/types.js";
+export { default as RelatedPosts } from "./components/related-posts.js";
 export { resolveRelatedPostsOptions } from "./src/options.js";
 export { buildRelatedPosts, CO_CITATION_WEIGHT, DIRECT_LINK_WEIGHT, isEligibleRelatedEntry, SHARED_TAG_WEIGHT, } from "./src/related.js";
 export { RELATED_POSTS_ATTRIBUTE, renderRelatedPosts, } from "./src/render.js";
 export type { RelatedPostsEntry, RelatedPostsOptions, ResolvedRelatedPostsOptions, } from "./src/types.js";
 export declare const RELATED_POSTS_PLUGIN_NAME = "related-posts";
-/**
- * Build-time "related notes" navigation.
- *
- * For every published entry it ranks the other entries in the manifest, then
- * appends a `<nav>` section to the manifest entry HTML, which is the final
- * rendering source. No client runtime is required.
- */
 export declare function relatedPosts(options?: RelatedPostsOptions): import("@riebeckite/core").RiebeckitePlugin<RelatedPostsOptions>;
 /** Alias matching the `*Plugin` suffix used by other plugin factories. */
 export declare const relatedPostsPlugin: typeof relatedPosts;

package/dist/index.js

@@ -1,8 +1,29 @@
 // index.ts
 import {
+  appendContentBodySlot,
   createStyleAsset,
   definePlugin
 } from "@riebeckite/core";
+import { renderToString as renderToString2 } from "hono/jsx/dom/server";
+
+// components/related-posts.tsx
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+function RelatedPosts(props) {
+  if (props.entries.length === 0) return null;
+  const { className, heading, headingText } = props.options;
+  return /* @__PURE__ */ jsxs("nav", { class: className, "data-related-posts": "", children: [
+    heading ? /* @__PURE__ */ jsx("h2", { class: `${className}__heading`, children: headingText }) : null,
+    /* @__PURE__ */ jsx("ul", { children: props.entries.map((entry) => /* @__PURE__ */ jsx("li", { class: `${className}__item`, children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        class: `${className}__link`,
+        href: entry.permalink,
+        "data-related-score": entry.score,
+        children: entry.title
+      }
+    ) }, entry.slug)) })
+  ] });
+}
 
 // src/options.ts
 var DEFAULT_RELATED_POSTS_LIMIT = 5;
@@ -100,18 +121,10 @@ function addScore(scores, slug, weight) {
 }
 
 // src/render.ts
-import { escapeHtml, escapeHtmlAttribute } from "@riebeckite/core";
+import { renderToString } from "hono/jsx/dom/server";
 var RELATED_POSTS_ATTRIBUTE = "data-related-posts";
 function renderRelatedPosts(entries, options) {
-  if (entries.length === 0) return "";
-  const className = escapeHtmlAttribute(options.className);
-  const heading = options.heading ? `<h2 class="${className}__heading">${escapeHtml(options.headingText)}</h2>` : "";
-  const items = entries.map(
-    (entry) => `<li class="${className}__item"><a class="${className}__link" href="${escapeHtmlAttribute(
-      entry.permalink
-    )}" data-related-score="${entry.score}">${escapeHtml(entry.title)}</a></li>`
-  ).join("");
-  return `<nav class="${className}" ${RELATED_POSTS_ATTRIBUTE}>${heading}<ul>${items}</ul></nav>`;
+  return renderToString(RelatedPosts({ entries, options }));
 }
 
 // index.ts
@@ -120,6 +133,7 @@ function relatedPosts(options = {}) {
   const resolved = resolveRelatedPostsOptions(options);
   return definePlugin({
     name: RELATED_POSTS_PLUGIN_NAME,
+    order: 100,
     processedContentCache: {
       version: "related-posts-v1",
       dependencyMode: "none"
@@ -130,7 +144,6 @@ function relatedPosts(options = {}) {
     onManifestCreated: (context) => {
       const { manifest } = context;
       for (const entry of manifest.discoverableEntries) {
-        if (entry.html.includes(RELATED_POSTS_ATTRIBUTE)) continue;
         if (!isEligibleRelatedEntry(entry, manifest, context.config)) continue;
         const related = buildRelatedPosts({
           manifest,
@@ -139,7 +152,11 @@ function relatedPosts(options = {}) {
           config: context.config
         });
         if (related.length === 0) continue;
-        entry.html = `${entry.html}${renderRelatedPosts(related, resolved)}`;
+        appendContentBodySlot(
+          entry,
+          "article.footer",
+          renderToString2(RelatedPosts({ entries: related, options: resolved }))
+        );
       }
     },
     assets: [createStyleAsset(RELATED_POSTS_PLUGIN_NAME)]
@@ -183,6 +200,7 @@ export {
   DIRECT_LINK_WEIGHT,
   RELATED_POSTS_ATTRIBUTE,
   RELATED_POSTS_PLUGIN_NAME,
+  RelatedPosts,
   SHARED_TAG_WEIGHT,
   buildRelatedPosts,
   isEligibleRelatedEntry,

package/dist/src/render.d.ts

@@ -1,8 +1,4 @@
 import type { RelatedPostsEntry, ResolvedRelatedPostsOptions } from "./types.js";
 /** Boolean attribute that marks the generated navigation for tests and styling. */
 export declare const RELATED_POSTS_ATTRIBUTE = "data-related-posts";
-/**
- * Renders the related-posts navigation. Returns an empty string when there is
- * nothing to show, so callers can leave an entry's HTML untouched.
- */
 export declare function renderRelatedPosts(entries: readonly RelatedPostsEntry[], options: ResolvedRelatedPostsOptions): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-related-posts",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -12,14 +12,21 @@
       "source": "./index.ts",
       "default": "./dist/index.js"
     },
+    "./components": {
+      "types": "./dist/components/related-posts.d.ts",
+      "import": "./dist/components/related-posts.js",
+      "source": "./components/related-posts.tsx",
+      "default": "./dist/components/related-posts.js"
+    },
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.15"
+    "hono": "^4.12.25",
+    "@riebeckite/core": "0.0.17"
   },
   "devDependencies": {
     "tsx": "^4.22.4",
-    "@riebeckite/test": "0.0.15"
+    "@riebeckite/test": "0.0.17"
   },
   "publishConfig": {
     "access": "public"

package/style.css

@@ -7,7 +7,7 @@
     transparent
   );
 
-  margin-top: 3rem;
+  margin-block-start: var(--rb-space-6, 3rem);
   padding-top: 1.5rem;
   border-top: 1px solid var(--rb-related-posts-rule);
   color: var(--rb-related-posts-ink);
@@ -44,8 +44,3 @@
 .rb-related-posts__link:focus-visible {
   text-decoration-color: var(--rb-related-posts-muted);
 }
-
-html[data-theme="dark"] .rb-related-posts,
-html.dark .rb-related-posts {
-  --rb-related-posts-ink: var(--rb-color-paper, #ffffff);
-}