@dogsbay/ui 0.2.0-beta.24 → 0.2.0-beta.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/ui",
-  "version": "0.2.0-beta.24",
+  "version": "0.2.0-beta.25",
   "description": "Accessible UI components for Astro, inspired by Base UI and shadcn",
   "type": "module",
   "exports": {
@@ -11,9 +11,9 @@
   },
   "peerDependencies": {
     "astro": "^5.0.0 || ^6.0.0",
-    "@dogsbay/primitives": "0.2.0-beta.24",
-    "@dogsbay/elements": "0.2.0-beta.24",
-    "@dogsbay/icons": "0.2.0-beta.24"
+    "@dogsbay/primitives": "0.2.0-beta.25",
+    "@dogsbay/elements": "0.2.0-beta.25",
+    "@dogsbay/icons": "0.2.0-beta.25"
   },
   "optionalDependencies": {
     "shiki": "^4.0.0",

package/src/content-renderer/ContentRenderer.astro

@@ -126,7 +126,7 @@ function inlineToHtml(nodes: InlineNode[]): string {
       case "code": return `<code>${n.text || ""}</code>`;
       case "highlight": return `<mark>${inlineToHtml((n.children || []) as InlineNode[])}</mark>`;
       case "link": return `<a href="${n.href || ""}">${inlineToHtml((n.children || []) as InlineNode[])}</a>`;
-      case "image": return `<img src="${n.src || ""}" alt="${n.alt || ""}">`;
+      case "image": return `<img src="${withBaseUrl(n.src as string | undefined)}" alt="${n.alt || ""}">`;
       case "kbd": return (n.keys as string[] || []).map((k: string) => `<kbd>${k}</kbd>`).join("+");
       case "html-inline": return String(n.html || "");
       case "break": return "<br>";
@@ -142,6 +142,26 @@ function resolveImage(src: string): ImageMetadata | undefined {
   const clean = normalized.replace(/#.*$/, "");
   return images[clean];
 }
+
+/**
+ * Prefix Astro's `base` config (= urlBase from site.url's path)
+ * onto absolute image paths so they resolve on subpath-mounted
+ * deploys. Skip for external / data: / already-prefixed URLs.
+ * See plans/content-assets-folder.md.
+ */
+function withBaseUrl(src: string | undefined): string {
+  if (!src) return "";
+  const baseUrl = import.meta.env.BASE_URL.replace(/\/$/, "");
+  if (
+    !baseUrl ||
+    !src.startsWith("/") ||
+    src.startsWith(`${baseUrl}/`) ||
+    /^(?:[a-z]+:|\/\/)/i.test(src)
+  ) {
+    return src;
+  }
+  return `${baseUrl}${src}`;
+}
 ---
 
 {/* ── Prose ──────────────────────────────────────────────── */}
@@ -296,11 +316,14 @@ function resolveImage(src: string): ImageMetadata | undefined {
 {node.type === "hr" && <hr class="my-8 border-border" />}
 {node.type === "html" && (() => {
   let html = node.html || "";
-  if (html.includes("<img") && Object.keys(images).length > 0) {
+  if (html.includes("<img")) {
     html = html.replace(/src="([^"]+)"/g, (_match: string, src: string) => {
       const resolved = resolveImage(src);
       if (resolved) return `src="${resolved.src}" width="${resolved.width}" height="${resolved.height}"`;
-      return _match;
+      // Not in the glob (SVG / PDF / build-without-optimization) —
+      // prefix BASE_URL so absolute paths resolve on subpath deploys.
+      const prefixed = withBaseUrl(src);
+      return prefixed === src ? _match : `src="${prefixed}"`;
     });
   }
   return <Fragment set:html={html} />;

package/src/content-renderer/InlineRenderer.astro

@@ -47,6 +47,24 @@ function resolveImage(src: string): ImageMetadata | undefined {
 
 const resolvedImg = node.type === "image" ? resolveImage(node.src as string || "") : undefined;
 
+// When the image isn't in the glob map (SVG, PDF, or built with
+// imageOptimization: false), the `<img src={node.src}>` fallback
+// fires below. Prefix Astro's `base` for absolute paths so they
+// resolve on subpath-mounted deploys. See plans/content-assets-folder.md.
+function withBaseUrl(src: string | undefined): string {
+  if (!src) return "";
+  const baseUrl = import.meta.env.BASE_URL.replace(/\/$/, "");
+  if (
+    !baseUrl ||
+    !src.startsWith("/") ||
+    src.startsWith(`${baseUrl}/`) ||
+    /^(?:[a-z]+:|\/\/)/i.test(src)
+  ) {
+    return src;
+  }
+  return `${baseUrl}${src}`;
+}
+
 // Icon resolution
 const iconSvg = node.type === "icon" && icons
   ? icons.resolve(node.library || "emoji", node.name, node.variant, node.size) as string | null
@@ -90,7 +108,7 @@ const isEmojiIcon = node.type === "icon" && (node.library === "emoji" || (iconSv
 )}
 {node.type === "image" && !resolvedImg && (
   <img
-    src={node.src}
+    src={withBaseUrl(node.src as string | undefined)}
     alt={node.alt || ""}
     title={node.title}
     width={node.width}

package/src/image/Image.astro

@@ -47,6 +47,27 @@ const captionText = caption || title;
 const w = width || (imageData ? imageData.width : undefined);
 const h = height || (imageData ? imageData.height : undefined);
 
+// When `imageData` is unavailable (image not in import.meta.glob —
+// e.g. SVG, PDF, or build-time `imageOptimization: false`), the
+// `<img src={src}>` fallback fires with the raw markdown src. For
+// absolute paths like `/_assets/foo.png`, we need to prefix with
+// Astro's `base` so the URL resolves on subpath-mounted deploys
+// (GH Pages project pages, multi-mount Cloudflare).
+//
+// `<AstroImage>` does this automatically; raw `<img>` does not.
+//
+// Skip prefixing for: external URLs (http/https), data: URIs,
+// and paths that already start with `import.meta.env.BASE_URL`
+// (defensive; shouldn't normally happen).
+const baseUrl = import.meta.env.BASE_URL.replace(/\/$/, "");
+const resolvedSrc =
+  baseUrl &&
+  src.startsWith("/") &&
+  !src.startsWith(`${baseUrl}/`) &&
+  !/^(?:[a-z]+:|\/\/)/i.test(src)
+    ? `${baseUrl}${src}`
+    : src;
+
 const alignClass = align === "left"
   ? "float-left mr-4 mb-2"
   : align === "right"
@@ -71,7 +92,7 @@ const alignClass = align === "left"
       />
     ) : (
       <img
-        src={src}
+        src={resolvedSrc}
         alt={alt}
         title={title}
         width={w}