fix(docs): re-root relative image paths in rendered docs

[raifdmueller]

Problem

The workflow diagram is missing on the Spec-Driven Development pages (EN + DE):
https://llm-coding.github.io/Semantic-Anchors/spec-driven-development/docs/workflow-diagram.svg → 404.

The AsciiDoc source uses a relative image path (image::docs/workflow-diagram.svg[...]), which renders to <img src="docs/workflow-diagram.svg">. Doc pages are served under clean URLs (/spec-driven-development/), so the browser resolves the relative path against the route → /spec-driven-development/docs/... → 404. The asset actually lives at /Semantic-Anchors/docs/workflow-diagram.svg (HTTP 200).

Fix

In doc-page.js, after injecting the rendered HTML, prefix relative <img> sources with the site base (import.meta.env.BASE_URL), matching the existing link/details post-processing. Absolute, http(s):, data: and # sources are left untouched. This fixes every doc-page image, not just this one.

Tests

New unit test: relative docs/workflow-diagram.svg is re-rooted to ${BASE_URL}docs/workflow-diagram.svg, while an external https://… src is left unchanged. All doc-page tests pass; lint + prettier clean.

Verification (preview build)

Spec-Driven Development page: the diagram <img> now has src="/Semantic-Anchors/docs/workflow-diagram.svg", naturalWidth 1100, fetch HTTP 200 — renders correctly.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes

  • Relative Bildpfade in geladenen Dokumenten werden nun korrekt mit der Basis-URL versehen, während absolute/externe und root-/Fragment‑Referenzen unverändert bleiben.

• Tests

  • Neuer Test zur Verifikation, dass relative Bilder umgerootet werden und externe/absolute Bild-URLs nicht verändert werden.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: bab0ab55-ef71-49e3-829f-8f3bf96c41cc

📥 Commits

Reviewing files that changed from the base of the PR and between 507dba6 and 2451c46.

📒 Files selected for processing (2)

• website/src/components/doc-page.js
• website/src/components/doc-page.test.js

✅ Files skipped from review due to trivial changes (1)

• website/src/components/doc-page.test.js

🚧 Files skipped from review as they are similar to previous changes (1)

• website/src/components/doc-page.js

---

Walkthrough

Das PR aktualisiert loadDocContent in der Doc-Seite, um relative <img>-Quellen mit import.meta.env.BASE_URL neu zu verankern. Absolute Pfade, Daten-URIs, Root-relative Pfade und Fragment-Referenzen werden übersprungen. Ein neuer Vitest-Test validiert das Verhalten.

Changes

Relative Bildpfad-Umwurzelung

Layer / File(s)	Zusammenfassung
Bildpfad-Verarbeitung in loadDocContent website/src/components/doc-page.js	loadDocContent scannt das gerenderte HTML nach <img>-Elementen und prefixiert relative src-Werte mit import.meta.env.BASE_URL. Absolute URLs (http/https), data:-URIs, Root-relative Pfade (/) und Fragment-Referenzen (#) bleiben unverändert.
Test für Bildpfad-Umwurzelung website/src/components/doc-page.test.js	Neuer Vitest-Testfall mockt ein geladenes Dokument mit einem relativen und einem externen <img> und verifiziert, dass das relative Bild auf import.meta.env.BASE_URL umgerootet wird, während das externe Bild unverändert bleibt.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• LLM-Coding/Semantic-Anchors#190: Beide PRs bearbeiten das Umschreiben relativer Bild-src-Pfade; dieses PR fügt Re-Rooting in loadDocContent hinzu, PR #190 ändert scripts/render-docs.js für SPA-Kontext.
• LLM-Coding/Semantic-Anchors#410: Bezieht sich auf Bildpfade in AsciiDoc-Inhalten; beide PRs korrigieren relative Bildpfade für gerenderte Dokumente.
• LLM-Coding/Semantic-Anchors#113: Fügt eine Seite hinzu, die loadDocContent verwendet; Änderungen an loadDocContent zur Umwurzelung relativer Bildpfade betreffen die Darstellung dieser Seite.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	Der Titel beschreibt präzise die Hauptänderung: Das Umwurzeln von relativen Bildpfaden in gerenderten Dokumenten. Dies ist vollständig korrekt und spiegelt den Kern der Änderungen wider.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}