@odla-ai/blog 0.0.1

package/src/templates/helpers.js

@@ -0,0 +1,55 @@
+// Shared template helpers. Templates are plain JS functions that return
+// HTML strings — no template language, no JSX.
+export { escapeHtml } from "../markdown.js";
+import { slugify, escapeHtml } from "../markdown.js";
+
+const dateFormat = new Intl.DateTimeFormat("en-US", {
+  dateStyle: "long",
+  timeZone: "UTC",
+});
+
+export function formatDate(date) {
+  return dateFormat.format(date);
+}
+
+export function isoDate(date) {
+  return date.toISOString().slice(0, 10);
+}
+
+// Tag URLs are slugified (lowercase) so "Podcast" and "podcast" share one
+// page — mixed-case tag directories silently collide on case-insensitive
+// filesystems (macOS) and split into duplicates on case-sensitive deploys.
+export function tagUrl(base, tag) {
+  return `${base}tags/${slugify(tag)}/`;
+}
+
+export function tagList(base, tags) {
+  if (!tags.length) return "";
+  const links = tags
+    .map((t) => `<a class="post-tag" href="${tagUrl(base, t)}">${escapeHtml(t)}</a>`)
+    .join(", ");
+  return `<span class="post-tags">${links}</span>`;
+}
+
+// Post list with content excerpts — shared by the home page and any page
+// with a `listTag` (e.g. a "Sea Stories" page listing posts by tag).
+export function postList({ config, posts, excerpts }) {
+  const base = config.basePath ?? "/";
+  const items = posts
+    .map(
+      (post) => `<article class="post-item">
+<header class="post-header">
+<a class="post-title" href="${base}${post.url}">${escapeHtml(post.title)}</a>
+</header>
+<div class="prose post-excerpt">
+${excerpts?.get(post.slug) ?? (post.description ? `<p>${escapeHtml(post.description)}</p>` : "")}
+</div>
+<div class="post-meta">
+<time class="post-date" datetime="${isoDate(post.date)}">${formatDate(post.date)}</time>
+${tagList(base, post.tags)}
+</div>
+</article>`
+    )
+    .join("\n");
+  return `<section class="post-list">\n${items}\n</section>`;
+}

package/src/templates/index.js

@@ -0,0 +1,9 @@
+// Home page: recent posts with content excerpts, newest first.
+// config.indexLimit caps how many (default 20; 0 = all).
+import { postList } from "./helpers.js";
+
+export function index({ config, posts, excerpts }) {
+  const limit = config.indexLimit ?? 20;
+  const shown = limit > 0 ? posts.slice(0, limit) : posts;
+  return postList({ config, posts: shown, excerpts });
+}

package/src/templates/page.js

@@ -0,0 +1,20 @@
+// A standalone markdown page (about, etc.). A page with `listTag` in its
+// frontmatter appends the excerpted list of posts carrying that tag — the
+// pattern for curated collections like "How I..." or "Sea Stories".
+import { escapeHtml, postList } from "./helpers.js";
+import { slugify } from "../markdown.js";
+
+export function page({ config, page, html, posts = [], excerpts }) {
+  let list = "";
+  if (page.listTag) {
+    const wanted = slugify(page.listTag);
+    const tagged = posts.filter((p) => p.tags.some((t) => slugify(t) === wanted));
+    list = `\n${postList({ config, posts: tagged, excerpts })}`;
+  }
+  return `<article class="page">
+<h1 class="page-title">${escapeHtml(page.title)}</h1>
+<div class="prose">
+${html}
+</div>
+</article>${list}`;
+}

package/src/templates/post.js

@@ -0,0 +1,18 @@
+// A single post page: title, content, then meta (date + tags) at the base.
+import { escapeHtml, formatDate, isoDate, tagList } from "./helpers.js";
+
+export function post({ config, post, html }) {
+  const base = config.basePath ?? "/";
+  return `<article class="post">
+<header class="post-header">
+<h1 class="post-title">${escapeHtml(post.title)}</h1>
+</header>
+<div class="prose">
+${html}
+</div>
+<div class="post-meta">
+<time class="post-date" datetime="${isoDate(post.date)}">${formatDate(post.date)}</time>
+${tagList(base, post.tags)}
+</div>
+</article>`;
+}

package/src/templates/tags.js

@@ -0,0 +1,39 @@
+// Tag index (all tags with counts) and per-tag post lists.
+import { escapeHtml, formatDate, isoDate, tagUrl } from "./helpers.js";
+
+export function tagIndex({ config, posts }) {
+  const base = config.basePath ?? "/";
+  // Group by URL (slugified) so case variants of a tag merge, matching the
+  // per-tag pages the build emits.
+  const groups = new Map();
+  for (const post of posts) {
+    for (const tag of post.tags) {
+      const url = tagUrl(base, tag);
+      if (!groups.has(url)) groups.set(url, { label: tag, count: 0 });
+      groups.get(url).count++;
+    }
+  }
+  const tags = [...groups.entries()].sort(
+    (a, b) => b[1].count - a[1].count || a[1].label.localeCompare(b[1].label)
+  );
+  const items = tags
+    .map(
+      ([url, { label, count }]) =>
+        `<li><a class="post-tag" href="${url}">${escapeHtml(label)}</a> <span class="tag-count">${count}</span></li>`
+    )
+    .join("\n");
+  return `<h1 class="page-title">Tags</h1>\n<ul class="tag-cloud">\n${items}\n</ul>`;
+}
+
+export function tagPage({ config, tag, posts }) {
+  const base = config.basePath ?? "/";
+  const items = posts
+    .map(
+      (p) => `<li class="archive-item">
+<time datetime="${isoDate(p.date)}">${formatDate(p.date)}</time>
+<a href="${base}${p.url}">${escapeHtml(p.title)}</a>
+</li>`
+    )
+    .join("\n");
+  return `<h1 class="page-title">${escapeHtml(tag)}</h1>\n<ul class="archive-list">\n${items}\n</ul>`;
+}