feat: implement icon directive with relative path fallback

Refactor icon rendering to use a custom `marked-directive` instead of
a global icon prefix. This allows icons to use a CSS-based fallback
chain (searching up to 10 directory levels for an `assets/` folder),
making icon paths more robust and removing the need to pass path
prefixes through the component tree.
This commit is contained in:
2026-07-08 16:24:09 +08:00
parent 749b1a6a4b
commit 2dba19e1f8
5 changed files with 69 additions and 93 deletions
+2 -8
View File
@@ -1,5 +1,5 @@
import { customElement, noShadowDOM } from "solid-element";
import { createResource, Show, createMemo, createEffect } from "solid-js";
import { createResource, Show, createEffect } from "solid-js";
import { getIndexedData } from "../data-loader/file-index";
import { extractSection } from "../data-loader";
import { parseMarkdown } from "../markdown";
@@ -27,9 +27,6 @@ customElement("md-embed", { headingBase: 0 }, (props, { element }) => {
const articlePath = articleEl?.getAttribute("data-src") || "";
const resolvedPath = resolvePath(articlePath, filePath);
// 计算嵌入文件的 iconPrefix,用 createMemo 包装避免每个 embed 都重新计算
const iconPrefix = createMemo(() => resolvePath(resolvedPath, "./assets"));
const [content] = createResource(
() => ({ path: resolvedPath, section }),
async ({ path, section }) => {
@@ -56,10 +53,7 @@ customElement("md-embed", { headingBase: 0 }, (props, { element }) => {
</Show>
<Show when={!content.loading && !content.error && content()}>
{/* biome-ignore lint/security/noDangerouslySetInnerHtml: markdown render */}
<div
class="prose"
innerHTML={parseMarkdown(content()!, iconPrefix())}
/>
<div class="prose" innerHTML={parseMarkdown(content()!)} />
</Show>
</div>
);