@opentf/web-docs 0.1.0 → 0.2.0

package/components/Card.jsx

@@ -0,0 +1,21 @@
+// A single tile in a <Cards> grid: a title, an optional description, and a link. An
+// internal `href` uses SPA navigation (<Link>); an `external` href is a plain anchor.
+// `desc` (prop) or children supply the body.
+
+import { Link } from "@opentf/web";
+
+export default function Card(props) {
+  return props.external ? (
+    <a href={props.href} target="_blank" rel="noreferrer" class="otfw-card">
+      <span class="otfw-card-title">{props.title}</span>
+      {props.desc ? <span class="otfw-card-desc">{props.desc}</span> : null}
+      {props.children}
+    </a>
+  ) : (
+    <Link href={props.href} class="otfw-card">
+      <span class="otfw-card-title">{props.title}</span>
+      {props.desc ? <span class="otfw-card-desc">{props.desc}</span> : null}
+      {props.children}
+    </Link>
+  );
+}

package/components/Cards.jsx

@@ -0,0 +1,11 @@
+// A responsive grid of <Card>s. Used on index/landing docs pages (e.g. the API
+// reference overview) to present a set of links as tiles instead of a bullet list.
+//
+//   import { Cards, Card } from "@opentf/web-docs";
+//   <Cards>
+//     <Card title="Core" href="/docs/api/core" desc="Runtime API." />
+//   </Cards>
+
+export default function Cards(props) {
+  return <div class="otfw-cards">{props.children}</div>;
+}

package/components/CodeBlock.jsx

@@ -0,0 +1,39 @@
+// A code block matching the MDX front-end's `.otfw-code` structure (header bar with
+// an optional language/filename label and a copy button, above a `<pre>`). Use it for
+// code that doesn't come from a Markdown fence — e.g. a code panel inside `Tabs`:
+// `{ label, content: <CodeBlock code="…" /> }`. The text is NOT syntax-highlighted —
+// highlighting is a build-time (syntect) pass that only sees literal Markdown fences,
+// not a runtime string prop; runtime highlighting here is deferred future work. The
+// copy button owns its own behavior via `onclick` (see `copyWithFeedback`), so it
+// works in any layout — not just the docs shell. The icon glyphs go through `RawHtml`
+// because inline `<svg>` would be created in the HTML namespace and not render.
+import { RawHtml, copyWithFeedback } from "@opentf/web";
+
+const COPY_SVG =
+  '<svg class="otfw-copy-icon" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+const CHECK_SVG =
+  '<svg class="otfw-check-icon" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>';
+const ICONS = COPY_SVG + CHECK_SVG;
+
+export default function CodeBlock(props) {
+  return (
+    <div class="otfw-code">
+      <div class="otfw-code-head">
+        {props.lang ? <span class="otfw-code-lang">{props.lang}</span> : null}
+        {props.name ? <span class="otfw-code-name">{props.name}</span> : null}
+        <button
+          class="otfw-copy"
+          type="button"
+          aria-label="Copy code"
+          onclick={(e) => copyWithFeedback(e.currentTarget, props.code)}
+        >
+          <RawHtml html={ICONS} />
+          <span class="otfw-copy-label">Copy</span>
+        </button>
+      </div>
+      <pre>
+        <code>{props.code}</code>
+      </pre>
+    </div>
+  );
+}

package/components/DocsLayout.jsx

@@ -1,34 +1,78 @@
 // Top-level documentation frame: navbar + (sidebar · content · TOC) + footer.
 //
 //   import config from "../../otfw.config.js";
-//   import nav from "@opentf/web-docs/nav";
 //   export default function (props) {
-//     return <DocsLayout config={config.docs} nav={nav}>{props.children}</DocsLayout>;
+//     return <DocsLayout config={config.docs}>{props.children}</DocsLayout>;
 //   }
 //
+// That's the whole thing — any folder becomes a documentation section just by giving it
+// a layout that renders `DocsLayout`. The sidebar/breadcrumbs/prev-next come from the
+// generated nav (`@opentf/web-docs/nav`, imported here), and the layout scopes them to
+// the current section by route. So every section shares the same traits, and the docs
+// and api layout files are identical. (Pass a `nav` prop only to override.)
+//
 // `frame` (default true) renders the full chrome (navbar + footer). Pass
 // `frame={false}` when nesting inside an existing site layout that already provides
 // the navbar/footer — only the sidebar · content · TOC grid is rendered.
 
+import { router } from "@opentf/web";
+import navMap from "@opentf/web-docs/nav";
+import updated, { editPaths } from "@opentf/web-docs/updated";
+
 import Navbar from "./Navbar.jsx";
 import Sidebar from "./Sidebar.jsx";
 import Toc from "./Toc.jsx";
 import Footer from "./Footer.jsx";
 import Breadcrumbs from "./Breadcrumbs.jsx";
 import Pagination from "./Pagination.jsx";
+import LastUpdated from "./LastUpdated.jsx";
+
+// Code blocks own their copy behavior now: MDX fences compile to the
+// `web-internal-code-block` built-in and `<CodeBlock>` wires `onclick` directly, so a
+// copy button works in any layout (docs, blog, …) with no delegated listener here.
 
 export default function DocsLayout(props) {
   const config = props.config || {};
-  const nav = props.nav || [];
+  const nav = props.nav || navMap;
   const frame = props.frame !== false;
 
+  // The sidebar/breadcrumbs/prev-next operate on the *current section's* tree. `nav` is
+  // a section map keyed by base path; pick the branch whose base prefixes the route
+  // (longest match wins). A bare array means a single, unscoped section. Each section is
+  // its own layout instance, so resolving once at mount is correct.
+  const sectionNav = pickSection(nav, router.pathname);
+
+  // Last-updated time for the current page, looked up in the build-time map keyed by
+  // route (same exact-path match Pagination uses). `$derived` so it tracks navigation.
+  const lastUpdated = $derived(updated[router.pathname]);
+  // "Edit this page" URL: <repoUrl>/edit/main/<repo-relative file>, when both the repo
+  // is configured and the page's source path is known.
+  const editUrl = $derived(
+    config.repoUrl && editPaths[router.pathname]
+      ? `${config.repoUrl.replace(/\/+$/, "")}/edit/main/${editPaths[router.pathname]}`
+      : null,
+  );
+
   const body = (
     <div class="otfw-docs">
-      <Sidebar nav={nav} config={config} />
+      <Sidebar nav={sectionNav} config={config} />
       <main id="otfw-content" class="otfw-content" data-pagefind-body>
-        <Breadcrumbs nav={nav} />
+        <Breadcrumbs nav={sectionNav} />
         <article class="otfw-prose">{props.children}</article>
-        <Pagination nav={nav} />
+        {lastUpdated || editUrl ? (
+          <div class="otfw-page-meta">
+            {lastUpdated ? <LastUpdated date={lastUpdated} /> : null}
+            {editUrl ? (
+              <a class="otfw-edit-page" href={editUrl} target="_blank" rel="noreferrer">
+                Edit this page
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M7 17 17 7M9 7h8v8" />
+                </svg>
+              </a>
+            ) : null}
+          </div>
+        ) : null}
+        <Pagination nav={sectionNav} />
       </main>
       <Toc />
     </div>
@@ -44,3 +88,19 @@ export default function DocsLayout(props) {
     body
   );
 }
+
+// Resolve the section tree for `pathname` from a `{ [base]: tree }` map. Longest base
+// prefix wins ("/" matches anything). Tolerates a bare array (single section).
+function pickSection(nav, pathname) {
+  if (Array.isArray(nav)) return nav;
+  let best = null;
+  let bestLen = -1;
+  for (const base in nav) {
+    const match = base === "/" ? true : pathname === base || pathname.startsWith(base + "/");
+    if (match && base.length > bestLen) {
+      best = nav[base];
+      bestLen = base.length;
+    }
+  }
+  return best || nav[Object.keys(nav)[0]] || [];
+}

package/components/LastUpdated.jsx

@@ -0,0 +1,22 @@
+// "Last updated on <date>" line. Presentational — pass an ISO-8601 (or any
+// Date-parseable) `date`; renders nothing when it's absent. The date itself comes from
+// the build-time `@opentf/web-docs/updated` map (git commit time or a frontmatter
+// override); layouts look up the current route there and pass it in.
+//
+//   import updated from "@opentf/web-docs/updated";
+//   <LastUpdated date={updated[router.pathname]} />
+import { formatDate } from "./format.js";
+
+export default function LastUpdated(props) {
+  const date = props.date;
+  if (!date) return null;
+  const label = props.label || "Last updated on";
+  return (
+    <div class="otfw-last-updated">
+      {label}{" "}
+      <time class="otfw-last-updated-time" datetime={String(date)}>
+        {formatDate(date)}
+      </time>
+    </div>
+  );
+}

package/components/NavIcon.jsx

@@ -0,0 +1,34 @@
+// Named SVG icons for navbar links and actions. A nav item references an icon by
+// name — `nav: [{ label, href, icon: "book" }]` — so the markup stays in the theme
+// package rather than in the consumer's plain-JS config (which can't hold JSX). Add
+// a case here to extend the set.
+
+export default function NavIcon(props) {
+  const name = props.name;
+
+  return (
+    <span class="otfw-nav-icon" aria-hidden="true">
+      {name === "github" ? (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.2.8-.5v-1.7c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.5 11.5 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.6.8.5a11.5 11.5 0 007.9-10.9C23.5 5.7 18.3.5 12 .5z" />
+        </svg>
+      ) : null}
+      {name === "discord" ? (
+        <svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M20.3 4.4A19.8 19.8 0 0 0 15.4 3l-.2.4a18 18 0 0 1 4.3 1.4 16.6 16.6 0 0 0-14.9 0A18 18 0 0 1 8.8 3.4L8.6 3a19.8 19.8 0 0 0-4.9 1.4C.6 9 0 13.5.3 17.9a19.9 19.9 0 0 0 6 3l.7-1.2a13 13 0 0 1-2-1l.5-.4a14.2 14.2 0 0 0 12 0l.5.4a13 13 0 0 1-2 1l.7 1.2a19.9 19.9 0 0 0 6-3c.4-5.1-.6-9.6-2.6-13.5ZM8.3 15.3c-1.2 0-2.2-1.1-2.2-2.4s1-2.5 2.2-2.5 2.2 1.1 2.2 2.5-1 2.4-2.2 2.4Zm7.4 0c-1.2 0-2.2-1.1-2.2-2.4s1-2.5 2.2-2.5 2.2 1.1 2.2 2.5-1 2.4-2.2 2.4Z" />
+        </svg>
+      ) : null}
+      {name === "book" ? (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M4 4.5A2.5 2.5 0 0 1 6.5 2H20v18H6.5A2.5 2.5 0 0 0 4 22.5z" />
+          <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+        </svg>
+      ) : null}
+      {name === "external" ? (
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M7 17 17 7M9 7h8v8" />
+        </svg>
+      ) : null}
+    </span>
+  );
+}

package/components/Navbar.jsx

@@ -1,9 +1,16 @@
 // Top navigation bar: brand, top-level links, search, GitHub, theme toggle. All
 // content is driven by the `docs` config object passed down from DocsLayout.
+// Top-level links support a per-item `icon` (NavIcon name) and `external` flag, and
+// the active route is underlined (see NavbarLink). The search trigger only renders
+// when a search provider is configured.
 
-import { Link } from "@opentf/web";
 import ThemeToggle from "./ThemeToggle.jsx";
 import SearchTrigger from "./SearchTrigger.jsx";
+import Search from "./Search.jsx";
+import SidebarToggle from "./SidebarToggle.jsx";
+import NavbarLink from "./NavbarLink.jsx";
+import NavIcon from "./NavIcon.jsx";
+import { Link } from "@opentf/web";
 
 export default function Navbar(props) {
   const config = props.config || {};
@@ -12,29 +19,34 @@ export default function Navbar(props) {
   return (
     <header class="otfw-navbar">
       <div class="otfw-navbar-inner">
-        <Link href={config.homeUrl || "/"} class="otfw-navbar-brand">
-          {config.logo ? <img src={config.logo} alt="" class="otfw-navbar-logo" /> : null}
-          <span class="otfw-navbar-title">{config.title || "Docs"}</span>
-        </Link>
+        <div class="otfw-navbar-lead">
+          <SidebarToggle />
+          <Link href={config.homeUrl || "/"} class="otfw-navbar-brand">
+            {config.logo ? <img src={config.logo} alt="" class="otfw-navbar-logo" /> : null}
+            <span class="otfw-navbar-title">{config.title || "Docs"}</span>
+            {config.version ? <span class="otfw-navbar-version">{config.version}</span> : null}
+          </Link>
+        </div>
 
-        <nav class="otfw-navbar-nav">
-          {links.map((l) => (
-            <Link href={l.href} class="otfw-navbar-link">
-              {l.label}
-            </Link>
-          ))}
-        </nav>
+        <div class="otfw-navbar-search">
+          {config.search ? <SearchTrigger /> : null}
+        </div>
 
-        <div class="otfw-navbar-actions">
-          <SearchTrigger />
-          {config.github ? (
-            <a href={config.github} target="_blank" rel="noreferrer" class="otfw-navbar-icon" aria-label="GitHub">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.2.8-.5v-1.7c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.5 11.5 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.6.8.5a11.5 11.5 0 007.9-10.9C23.5 5.7 18.3.5 12 .5z" />
-              </svg>
-            </a>
-          ) : null}
-          <ThemeToggle />
+        <div class="otfw-navbar-right">
+          <nav class="otfw-navbar-nav">
+            {links.map((l) => (
+              <NavbarLink link={l} />
+            ))}
+          </nav>
+          <div class="otfw-navbar-actions">
+            {config.github ? (
+              <a href={config.github} target="_blank" rel="noreferrer" class="otfw-navbar-icon" aria-label="GitHub">
+                <NavIcon name="github" />
+              </a>
+            ) : null}
+            <ThemeToggle />
+          </div>
+          {config.search ? <Search /> : null}
         </div>
       </div>
     </header>

package/components/NavbarLink.jsx

@@ -0,0 +1,33 @@
+// One top-level navbar link. Its own component (like SidebarNode) so the active
+// state is a reactive binding in the element's own build — it updates on SPA
+// navigation without re-rendering the whole navbar. `external` links render as a
+// plain anchor (no SPA nav, no active state); internal links get the accent
+// underline when the current route matches (exactly, or as a section prefix).
+
+import { Link, router } from "@opentf/web";
+import NavIcon from "./NavIcon.jsx";
+
+export default function NavbarLink(props) {
+  const link = props.link || {};
+
+  return link.external ? (
+    <a href={link.href} target="_blank" rel="noreferrer" class="otfw-navbar-link">
+      {link.icon ? <NavIcon name={link.icon} /> : null}
+      {link.label}
+    </a>
+  ) : (
+    <Link
+      href={link.href}
+      class={
+        (link.href === "/"
+          ? router.pathname === "/"
+          : router.pathname === link.href || router.pathname.startsWith(link.href + "/"))
+          ? "otfw-navbar-link otfw-active"
+          : "otfw-navbar-link"
+      }
+    >
+      {link.icon ? <NavIcon name={link.icon} /> : null}
+      {link.label}
+    </Link>
+  );
+}

package/components/Pagination.jsx

@@ -5,41 +5,45 @@ import { Link, router } from "@opentf/web";
 export default function Pagination(props) {
   const nav = props.nav || [];
 
+  const flat = [];
+  const walk = (items) => {
+    for (const it of items) {
+      if (it.path) flat.push(it);
+      if (it.items) walk(it.items);
+    }
+  };
+  walk(nav);
+
+  const adjacent = (path) => {
+    const i = flat.findIndex((x) => x.path === path);
+    return {
+      prev: i > 0 ? flat[i - 1] : null,
+      next: i >= 0 && i < flat.length - 1 ? flat[i + 1] : null,
+    };
+  };
+
+  // A single reactive signal (not a `{() => …}` thunk): `pos` is in scope for the
+  // hoisted branch builders, and recomputes on `router.pathname`.
+  const pos = $derived(adjacent(router.pathname));
+
   return (
     <nav class="otfw-pagination" aria-label="Pagination">
-      {() => {
-        const flat = [];
-        const walk = (items) => {
-          for (const it of items) {
-            if (it.path) flat.push(it);
-            if (it.items) walk(it.items);
-          }
-        };
-        walk(nav);
-        const i = flat.findIndex((x) => x.path === router.pathname);
-        const prev = i > 0 ? flat[i - 1] : null;
-        const next = i >= 0 && i < flat.length - 1 ? flat[i + 1] : null;
-        return (
-          <>
-            {prev ? (
-              <Link href={prev.path} class="otfw-page-link otfw-page-prev">
-                <span class="otfw-page-dir">← Previous</span>
-                <span class="otfw-page-title">{prev.title}</span>
-              </Link>
-            ) : (
-              <span class="otfw-page-spacer" />
-            )}
-            {next ? (
-              <Link href={next.path} class="otfw-page-link otfw-page-next">
-                <span class="otfw-page-dir">Next →</span>
-                <span class="otfw-page-title">{next.title}</span>
-              </Link>
-            ) : (
-              <span class="otfw-page-spacer" />
-            )}
-          </>
-        );
-      }}
+      {pos.prev ? (
+        <Link href={pos.prev?.path} class="otfw-page-link otfw-page-prev">
+          <span class="otfw-page-dir">← Previous</span>
+          <span class="otfw-page-title">{pos.prev?.title}</span>
+        </Link>
+      ) : (
+        <span class="otfw-page-spacer" />
+      )}
+      {pos.next ? (
+        <Link href={pos.next?.path} class="otfw-page-link otfw-page-next">
+          <span class="otfw-page-dir">Next →</span>
+          <span class="otfw-page-title">{pos.next?.title}</span>
+        </Link>
+      ) : (
+        <span class="otfw-page-spacer" />
+      )}
     </nav>
   );
 }

package/components/PostBanner.jsx

@@ -0,0 +1,25 @@
+// A blog post's header: title, optional description, and the metadata row. Rendered
+// by BlogLayout above the post's prose body, driven by the post record so the MDX
+// file stays pure content (no hand-written title/date in the body).
+import PostMeta from "./PostMeta.jsx";
+
+export default function PostBanner(props) {
+  const post = props.post || props;
+  return (
+    <header class="otfw-post-banner">
+      {post.cover ? (
+        <img class="otfw-post-cover" src={post.cover} alt={post.title} />
+      ) : null}
+      <h1 class="otfw-post-title">{post.title}</h1>
+      {post.description ? <p class="otfw-post-desc">{post.description}</p> : null}
+      <PostMeta post={post} />
+      {post.tags && post.tags.length ? (
+        <div class="otfw-post-tags">
+          {post.tags.map((tag) => (
+            <span class="otfw-post-tag">{tag}</span>
+          ))}
+        </div>
+      ) : null}
+    </header>
+  );
+}

package/components/PostCard.jsx

@@ -0,0 +1,19 @@
+// One post in the blog index: a link to the post with its meta + title + excerpt.
+import { Link } from "@opentf/web";
+import PostMeta from "./PostMeta.jsx";
+
+export default function PostCard(props) {
+  const post = props.post;
+  return (
+    <Link href={post.path} class={post.cover ? "otfw-post-card otfw-has-cover" : "otfw-post-card"}>
+      {post.cover ? (
+        <img class="otfw-post-card-cover" src={post.cover} alt={post.title} loading="lazy" />
+      ) : null}
+      <div class="otfw-post-card-body">
+        <PostMeta post={post} />
+        <div class="otfw-post-card-title">{post.title}</div>
+        {post.description ? <p class="otfw-post-card-desc">{post.description}</p> : null}
+      </div>
+    </Link>
+  );
+}

package/components/PostList.jsx

@@ -0,0 +1,17 @@
+// The blog index listing: renders a PostCard per post. Pass the list from
+// `@opentf/web-docs/posts`:
+//
+//   import { posts } from "@opentf/web-docs/posts";
+//   <PostList posts={posts} />
+import PostCard from "./PostCard.jsx";
+
+export default function PostList(props) {
+  const posts = props.posts || [];
+  return (
+    <div class="otfw-post-list">
+      {posts.length
+        ? posts.map((post) => <PostCard post={post} />)
+        : <p class="otfw-post-empty">No posts yet.</p>}
+    </div>
+  );
+}

package/components/PostMeta.jsx

@@ -0,0 +1,28 @@
+// A post's metadata row: date · author · reading time. Pass a post record (from
+// `@opentf/web-docs/posts`) as `post`, or the fields directly. Missing fields are
+// omitted. Used in both the post banner and the index cards.
+import ReadingTime from "./ReadingTime.jsx";
+import { formatDate } from "./format.js";
+
+export default function PostMeta(props) {
+  const post = props.post || props;
+  return (
+    <div class="otfw-post-meta">
+      {post.author ? (
+        <span class="otfw-post-author">
+          {post.authorAvatar ? (
+            <img class="otfw-post-avatar" src={post.authorAvatar} alt={post.author} loading="lazy" />
+          ) : null}
+          <span class="otfw-post-author-name">{post.author}</span>
+          {post.authorRole ? <span class="otfw-post-author-role">{post.authorRole}</span> : null}
+        </span>
+      ) : null}
+      {post.date ? (
+        <time class="otfw-post-date" datetime={String(post.date)}>
+          {formatDate(post.date)}
+        </time>
+      ) : null}
+      {post.readingTime ? <ReadingTime minutes={post.readingTime} /> : null}
+    </div>
+  );
+}

package/components/ReadingTime.jsx

@@ -0,0 +1,6 @@
+// Reading-time label, e.g. "4 min read". `minutes` is precomputed at build time by
+// the blog posts plugin (see build/reading-time.js).
+export default function ReadingTime(props) {
+  const minutes = props.minutes ?? 1;
+  return <span class="otfw-reading-time">{minutes} min read</span>;
+}