@moku-labs/web 0.5.4 → 0.5.6

package/dist/browser.mjs

@@ -3303,11 +3303,10 @@ function createSpaKernel(state, config, emit, deps) {
 			const region = document.querySelector(resolved.swapSelector);
 			if (!region) return false;
 			handleStart(pathname);
-			const { renderVNode } = await import("./render-BL9Fv6G6.mjs");
+			const { renderVNode } = await import("./render-BNe0s7fr.mjs");
 			syncDataHead(hit.route, routeContext);
 			unmountPageSpecific(state, emit);
 			runSwap(() => {
-				region.replaceChildren();
 				renderVNode(vnode, region);
 				scanAndMount(state, emit, resolved.swapSelector);
 				notifyNavEnd(state);

package/dist/index.cjs

@@ -1335,6 +1335,23 @@ function calculateReadingTime(text) {
 function articleToUrl(locale, slug) {
 	return `/${locale}/${slug}/`;
 }
+/** Matches an `<img>` `src` that points at the co-located `images/` dir (relative or root-relative). */
+const RELATIVE_IMAGE_SRC = /(<img\b[^>]*?\bsrc=")(?:\.?\/)?images\//g;
+/**
+* Rewrite relative co-located image URLs (`./images/x.webp`) in rendered article HTML to the shared
+* absolute path the build copies them to (`/<slug>/images/...`), so they resolve from any locale page.
+*
+* @param html - The rendered article HTML.
+* @param slug - Article directory name.
+* @returns The HTML with image `src`s rewritten to absolute paths.
+* @example
+* ```ts
+* rewriteImageUrls('<img src="./images/a.webp">', "post"); // '<img src="/post/images/a.webp">'
+* ```
+*/
+function rewriteImageUrls(html, slug) {
+	return html.replaceAll(RELATIVE_IMAGE_SRC, `$1/${slug}/images/`);
+}
 /**
 * Build the canonical "article not found" error for {@link createContentApi.load}.
 * Centralised so the null-resolve path and the production draft-suppression path
@@ -1450,7 +1467,7 @@ async function readArticle(ctx, slug, fileLocale, outLocale, isFallback) {
 	ctx.state.dirtyPaths.delete(filePath);
 	const { frontmatter, body } = parseFrontmatter(raw, ctx.config);
 	const processor = ensureProcessor(ctx.state, ctx.config);
-	const html = String(await processor.process(body));
+	const html = rewriteImageUrls(String(await processor.process(body)), slug);
 	const { readingTime, wordCount } = calculateReadingTime(body);
 	return {
 		frontmatter,
@@ -1662,6 +1679,18 @@ function createContentApi(ctx) {
 		*/
 		articleToCard(article) {
 			return toCard(article);
+		},
+		/**
+		* The configured content source directory (e.g. `"./content"`).
+		*
+		* @returns The content directory path from config.
+		* @example
+		* ```ts
+		* api.contentDir(); // "./content"
+		* ```
+		*/
+		contentDir() {
+			return ctx.config.contentDir;
 		}
 	};
 }
@@ -3445,6 +3474,52 @@ function readCachedContent(ctx) {
 	return cached instanceof Map ? cached : /* @__PURE__ */ new Map();
 }
 //#endregion
+//#region src/plugins/build/phases/content-images.ts
+/**
+* @file build phase — content-images. Copies each article's co-located image directory
+* (`<contentDir>/<slug>/images/`) to a single shared output dir (`<outDir>/<slug>/images/`) reused by
+* every locale, matching the absolute `/<slug>/images/...` URLs the content renderer emits. Gated by
+* `config.images`.
+*/
+/** Conventional per-article image subdirectory name (alongside `<slug>/<locale>.md`). */
+const ARTICLE_IMAGE_DIR = "images";
+/**
+* Copy every article's co-located `images/` directory to `<outDir>/<slug>/images/`. No-op when
+* `config.images` is false or the content directory does not exist.
+*
+* @param ctx - Plugin context (provides `config`, `log`, `require`).
+* @returns The number of directories copied (one per article that has an `images/` dir).
+* @example
+* ```ts
+* const copied = await copyContentImages(ctx);
+* ```
+*/
+async function copyContentImages(ctx) {
+	if (!ctx.config.images) {
+		ctx.log.debug("build:content-images", { skipped: true });
+		return 0;
+	}
+	const contentDir = ctx.require(contentPlugin).contentDir();
+	if (!(0, node_fs.existsSync)(contentDir)) {
+		ctx.log.debug("build:content-images", {
+			skipped: true,
+			reason: "no content dir"
+		});
+		return 0;
+	}
+	const entries = await (0, node_fs_promises.readdir)(contentDir, { withFileTypes: true });
+	let copied = 0;
+	for (const entry of entries) {
+		if (!entry.isDirectory()) continue;
+		const source = node_path$1.default.join(contentDir, entry.name, ARTICLE_IMAGE_DIR);
+		if (!(0, node_fs.existsSync)(source)) continue;
+		await (0, node_fs_promises.cp)(source, node_path$1.default.join(ctx.config.outDir, entry.name, ARTICLE_IMAGE_DIR), { recursive: true });
+		copied += 1;
+	}
+	ctx.log.debug("build:content-images", { copied });
+	return copied;
+}
+//#endregion
 //#region src/plugins/build/phases/feeds.ts
 /**
 * @file build phase 4 — feeds. Generates RSS/Atom/JSON from cached content plus
@@ -4690,6 +4765,7 @@ const PHASE_ORDER = [
 	"content",
 	"images",
 	"pages",
+	"content-images",
 	"feeds",
 	"sitemap",
 	"og-images",
@@ -4796,6 +4872,7 @@ async function runPipeline(ctx, options) {
 	await withPhase(phaseContext, "bundle", () => bundle(phaseContext));
 	await Promise.all([withPhase(phaseContext, "content", () => loadContent(phaseContext)), withPhase(phaseContext, "images", () => processImages(phaseContext))]);
 	const pages = await withPhase(phaseContext, "pages", () => renderPages(phaseContext));
+	await withPhase(phaseContext, "content-images", () => copyContentImages(phaseContext));
 	await runOutputs(phaseContext);
 	await withPhase(phaseContext, "root-index", async () => {
 		if (pages.rootHtml !== null) await (0, node_fs_promises.writeFile)(node_path$1.default.join(outDir, "index.html"), pages.rootHtml, "utf8");
@@ -6701,11 +6778,10 @@ function createSpaKernel(state, config, emit, deps) {
 			const region = document.querySelector(resolved.swapSelector);
 			if (!region) return false;
 			handleStart(pathname);
-			const { renderVNode } = await Promise.resolve().then(() => require("./render-BSTM0Akv.cjs"));
+			const { renderVNode } = await Promise.resolve().then(() => require("./render-DLZEOe4M.cjs"));
 			syncDataHead(hit.route, routeContext);
 			unmountPageSpecific(state, emit);
 			runSwap(() => {
-				region.replaceChildren();
 				renderVNode(vnode, region);
 				scanAndMount(state, emit, resolved.swapSelector);
 				notifyNavEnd(state);

package/dist/index.d.cts

@@ -1575,7 +1575,7 @@ interface State$2 {
  * const phase: PhaseName = "bundle";
  * ```
  */
-type PhaseName = "bundle" | "content" | "images" | "pages" | "feeds" | "sitemap" | "og-images" | "public" | "not-found" | "locale-redirects" | "root-index";
+type PhaseName = "bundle" | "content" | "images" | "pages" | "content-images" | "feeds" | "sitemap" | "og-images" | "public" | "not-found" | "locale-redirects" | "root-index";
 /**
  * Result of a completed build run.
  *
@@ -1849,6 +1849,12 @@ type Api$1 = {
    * @param article - The source article.
    */
   articleToCard(article: Article): ArticleCard;
+  /**
+   * The configured content source directory (e.g. `"./content"`). Lets the build copy each
+   * article's co-located assets (`<contentDir>/<slug>/images/`) into the output so the absolute
+   * image URLs the renderer emits resolve.
+   */
+  contentDir(): string;
 };
 //#endregion
 //#region src/plugins/content/index.d.ts

package/dist/index.d.mts

@@ -1575,7 +1575,7 @@ interface State$2 {
  * const phase: PhaseName = "bundle";
  * ```
  */
-type PhaseName = "bundle" | "content" | "images" | "pages" | "feeds" | "sitemap" | "og-images" | "public" | "not-found" | "locale-redirects" | "root-index";
+type PhaseName = "bundle" | "content" | "images" | "pages" | "content-images" | "feeds" | "sitemap" | "og-images" | "public" | "not-found" | "locale-redirects" | "root-index";
 /**
  * Result of a completed build run.
  *
@@ -1849,6 +1849,12 @@ type Api$1 = {
    * @param article - The source article.
    */
   articleToCard(article: Article): ArticleCard;
+  /**
+   * The configured content source directory (e.g. `"./content"`). Lets the build copy each
+   * article's co-located assets (`<contentDir>/<slug>/images/`) into the output so the absolute
+   * image URLs the renderer emits resolve.
+   */
+  contentDir(): string;
 };
 //#endregion
 //#region src/plugins/content/index.d.ts

package/dist/index.mjs

@@ -1322,6 +1322,23 @@ function calculateReadingTime(text) {
 function articleToUrl(locale, slug) {
 	return `/${locale}/${slug}/`;
 }
+/** Matches an `<img>` `src` that points at the co-located `images/` dir (relative or root-relative). */
+const RELATIVE_IMAGE_SRC = /(<img\b[^>]*?\bsrc=")(?:\.?\/)?images\//g;
+/**
+* Rewrite relative co-located image URLs (`./images/x.webp`) in rendered article HTML to the shared
+* absolute path the build copies them to (`/<slug>/images/...`), so they resolve from any locale page.
+*
+* @param html - The rendered article HTML.
+* @param slug - Article directory name.
+* @returns The HTML with image `src`s rewritten to absolute paths.
+* @example
+* ```ts
+* rewriteImageUrls('<img src="./images/a.webp">', "post"); // '<img src="/post/images/a.webp">'
+* ```
+*/
+function rewriteImageUrls(html, slug) {
+	return html.replaceAll(RELATIVE_IMAGE_SRC, `$1/${slug}/images/`);
+}
 /**
 * Build the canonical "article not found" error for {@link createContentApi.load}.
 * Centralised so the null-resolve path and the production draft-suppression path
@@ -1437,7 +1454,7 @@ async function readArticle(ctx, slug, fileLocale, outLocale, isFallback) {
 	ctx.state.dirtyPaths.delete(filePath);
 	const { frontmatter, body } = parseFrontmatter(raw, ctx.config);
 	const processor = ensureProcessor(ctx.state, ctx.config);
-	const html = String(await processor.process(body));
+	const html = rewriteImageUrls(String(await processor.process(body)), slug);
 	const { readingTime, wordCount } = calculateReadingTime(body);
 	return {
 		frontmatter,
@@ -1649,6 +1666,18 @@ function createContentApi(ctx) {
 		*/
 		articleToCard(article) {
 			return toCard(article);
+		},
+		/**
+		* The configured content source directory (e.g. `"./content"`).
+		*
+		* @returns The content directory path from config.
+		* @example
+		* ```ts
+		* api.contentDir(); // "./content"
+		* ```
+		*/
+		contentDir() {
+			return ctx.config.contentDir;
 		}
 	};
 }
@@ -3432,6 +3461,52 @@ function readCachedContent(ctx) {
 	return cached instanceof Map ? cached : /* @__PURE__ */ new Map();
 }
 //#endregion
+//#region src/plugins/build/phases/content-images.ts
+/**
+* @file build phase — content-images. Copies each article's co-located image directory
+* (`<contentDir>/<slug>/images/`) to a single shared output dir (`<outDir>/<slug>/images/`) reused by
+* every locale, matching the absolute `/<slug>/images/...` URLs the content renderer emits. Gated by
+* `config.images`.
+*/
+/** Conventional per-article image subdirectory name (alongside `<slug>/<locale>.md`). */
+const ARTICLE_IMAGE_DIR = "images";
+/**
+* Copy every article's co-located `images/` directory to `<outDir>/<slug>/images/`. No-op when
+* `config.images` is false or the content directory does not exist.
+*
+* @param ctx - Plugin context (provides `config`, `log`, `require`).
+* @returns The number of directories copied (one per article that has an `images/` dir).
+* @example
+* ```ts
+* const copied = await copyContentImages(ctx);
+* ```
+*/
+async function copyContentImages(ctx) {
+	if (!ctx.config.images) {
+		ctx.log.debug("build:content-images", { skipped: true });
+		return 0;
+	}
+	const contentDir = ctx.require(contentPlugin).contentDir();
+	if (!existsSync(contentDir)) {
+		ctx.log.debug("build:content-images", {
+			skipped: true,
+			reason: "no content dir"
+		});
+		return 0;
+	}
+	const entries = await readdir(contentDir, { withFileTypes: true });
+	let copied = 0;
+	for (const entry of entries) {
+		if (!entry.isDirectory()) continue;
+		const source = path.join(contentDir, entry.name, ARTICLE_IMAGE_DIR);
+		if (!existsSync(source)) continue;
+		await cp(source, path.join(ctx.config.outDir, entry.name, ARTICLE_IMAGE_DIR), { recursive: true });
+		copied += 1;
+	}
+	ctx.log.debug("build:content-images", { copied });
+	return copied;
+}
+//#endregion
 //#region src/plugins/build/phases/feeds.ts
 /**
 * @file build phase 4 — feeds. Generates RSS/Atom/JSON from cached content plus
@@ -4677,6 +4752,7 @@ const PHASE_ORDER = [
 	"content",
 	"images",
 	"pages",
+	"content-images",
 	"feeds",
 	"sitemap",
 	"og-images",
@@ -4783,6 +4859,7 @@ async function runPipeline(ctx, options) {
 	await withPhase(phaseContext, "bundle", () => bundle(phaseContext));
 	await Promise.all([withPhase(phaseContext, "content", () => loadContent(phaseContext)), withPhase(phaseContext, "images", () => processImages(phaseContext))]);
 	const pages = await withPhase(phaseContext, "pages", () => renderPages(phaseContext));
+	await withPhase(phaseContext, "content-images", () => copyContentImages(phaseContext));
 	await runOutputs(phaseContext);
 	await withPhase(phaseContext, "root-index", async () => {
 		if (pages.rootHtml !== null) await writeFile(path.join(outDir, "index.html"), pages.rootHtml, "utf8");
@@ -6688,11 +6765,10 @@ function createSpaKernel(state, config, emit, deps) {
 			const region = document.querySelector(resolved.swapSelector);
 			if (!region) return false;
 			handleStart(pathname);
-			const { renderVNode } = await import("./render-BL9Fv6G6.mjs");
+			const { renderVNode } = await import("./render-BNe0s7fr.mjs");
 			syncDataHead(hit.route, routeContext);
 			unmountPageSpecific(state, emit);
 			runSwap(() => {
-				region.replaceChildren();
 				renderVNode(vnode, region);
 				scanAndMount(state, emit, resolved.swapSelector);
 				notifyNavEnd(state);

package/dist/render-BNe0s7fr.mjs

@@ -0,0 +1,32 @@
+import { render } from "preact";
+//#region src/plugins/spa/render.ts
+/**
+* Render a route's `VNode` into the live swap region, starting from a clean slate
+* each time. Preact keeps the previous vdom tree on the container and diffs the
+* next render against it — but the kernel clears the region between navs to drop
+* the static SSR markup. A raw `replaceChildren()` would delete the live DOM out
+* from under Preact's retained vdom, so the next diff patches detached nodes → an
+* empty region (the bug where a SECOND consecutive client nav went blank).
+*
+* To stay correct without tracking element identity, first `render(null, region)`
+* — this unmounts any Preact tree Preact owns AND resets its retained vdom pointer
+* (a no-op the first time, when the region still holds raw SSR/HTML). Then clear
+* whatever static children remain, then mount the new VNode fresh. Reuses the
+* build's component output verbatim (same `route.render`), so the client paint
+* matches the SSG paint.
+*
+* @param vnode - The VNode produced by the matched route's `.render(ctx)`.
+* @param region - The swap-region element to render into.
+* @example
+* ```ts
+* const { renderVNode } = await import("./render");
+* renderVNode(route._handlers.render(ctx), document.querySelector("main > section"));
+* ```
+*/
+function renderVNode(vnode, region) {
+	render(null, region);
+	region.replaceChildren();
+	render(vnode, region);
+}
+//#endregion
+export { renderVNode };

package/dist/render-DLZEOe4M.cjs

@@ -0,0 +1,32 @@
+let preact = require("preact");
+//#region src/plugins/spa/render.ts
+/**
+* Render a route's `VNode` into the live swap region, starting from a clean slate
+* each time. Preact keeps the previous vdom tree on the container and diffs the
+* next render against it — but the kernel clears the region between navs to drop
+* the static SSR markup. A raw `replaceChildren()` would delete the live DOM out
+* from under Preact's retained vdom, so the next diff patches detached nodes → an
+* empty region (the bug where a SECOND consecutive client nav went blank).
+*
+* To stay correct without tracking element identity, first `render(null, region)`
+* — this unmounts any Preact tree Preact owns AND resets its retained vdom pointer
+* (a no-op the first time, when the region still holds raw SSR/HTML). Then clear
+* whatever static children remain, then mount the new VNode fresh. Reuses the
+* build's component output verbatim (same `route.render`), so the client paint
+* matches the SSG paint.
+*
+* @param vnode - The VNode produced by the matched route's `.render(ctx)`.
+* @param region - The swap-region element to render into.
+* @example
+* ```ts
+* const { renderVNode } = await import("./render");
+* renderVNode(route._handlers.render(ctx), document.querySelector("main > section"));
+* ```
+*/
+function renderVNode(vnode, region) {
+	(0, preact.render)(null, region);
+	region.replaceChildren();
+	(0, preact.render)(vnode, region);
+}
+//#endregion
+exports.renderVNode = renderVNode;

package/package.json

@@ -112,5 +112,5 @@
     "test:integration": "vitest run --project integration",
     "test:coverage": "vitest run --project unit --project integration --coverage"
   },
-  "version": "0.5.4"
+  "version": "0.5.6"
 }

package/dist/render-BL9Fv6G6.mjs

@@ -1,20 +0,0 @@
-import { render } from "preact";
-//#region src/plugins/spa/render.ts
-/**
-* Render a route's `VNode` into the live swap region, replacing its contents.
-* Reuses the build's component output verbatim (same `route.render`), so the
-* client paint matches the SSG paint.
-*
-* @param vnode - The VNode produced by the matched route's `.render(ctx)`.
-* @param region - The swap-region element to render into.
-* @example
-* ```ts
-* const { renderVNode } = await import("./render");
-* renderVNode(route._handlers.render(ctx), document.querySelector("main > section"));
-* ```
-*/
-function renderVNode(vnode, region) {
-	render(vnode, region);
-}
-//#endregion
-export { renderVNode };

package/dist/render-BSTM0Akv.cjs

@@ -1,20 +0,0 @@
-let preact = require("preact");
-//#region src/plugins/spa/render.ts
-/**
-* Render a route's `VNode` into the live swap region, replacing its contents.
-* Reuses the build's component output verbatim (same `route.render`), so the
-* client paint matches the SSG paint.
-*
-* @param vnode - The VNode produced by the matched route's `.render(ctx)`.
-* @param region - The swap-region element to render into.
-* @example
-* ```ts
-* const { renderVNode } = await import("./render");
-* renderVNode(route._handlers.render(ctx), document.querySelector("main > section"));
-* ```
-*/
-function renderVNode(vnode, region) {
-	(0, preact.render)(vnode, region);
-}
-//#endregion
-exports.renderVNode = renderVNode;