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:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user