fix: render platform logos in navigation

This commit is contained in:
dadachann
2026-09-04 14:36:47 +00:00
parent 0ae55aecbc
commit c317ca6ea7
2 changed files with 54 additions and 1 deletions
+31 -1
View File
@@ -22,6 +22,32 @@ function nodeName(node: PageTreeNode) {
return typeof node.name === "string" ? node.name : "";
}
function renderNavigationIcon(icon: PageTreeNode["icon"]) {
if (typeof icon !== "string" || !icon.startsWith("/")) return icon;
return (
<img
src={icon}
alt=""
aria-hidden="true"
className="size-4 shrink-0 object-contain"
/>
);
}
function renderNavigationIcons(node: PageTreeNode): PageTreeNode {
if (node.type === "folder") {
return {
...node,
icon: renderNavigationIcon(node.icon),
index: node.index
? { ...node.index, icon: renderNavigationIcon(node.index.icon) }
: undefined,
children: node.children.map(renderNavigationIcons),
};
}
return { ...node, icon: renderNavigationIcon(node.icon) };
}
const openApiTagOrder = Object.fromEntries(LOCALES.map((locale) => {
const spec = JSON.parse(readFileSync(`openapi/service-api-${locale}.json`, "utf8"));
const tags: string[] = [];
@@ -329,7 +355,11 @@ export default defineConfig({
sourceTree = (await context.getLoader()).getPageTree(page.locale);
sourceTrees.set(locale, sourceTree);
}
props.layoutProps.tree = sectionizeMintlifyTree(props.layoutProps.tree, sourceTree, locale);
props.layoutProps.tree = {
...props.layoutProps.tree,
children: sectionizeMintlifyTree(props.layoutProps.tree, sourceTree, locale)
.children.map(renderNavigationIcons),
};
return props;
});
}
+23
View File
@@ -96,6 +96,29 @@ test("representative localized guides and canonical host are emitted", async ()
assert.doesNotMatch(robots, /https:\/\/docs\.langbot\.app\//);
});
test("platform navigation renders logo assets instead of icon path text", async () => {
for (const locale of ["en", "zh", "ja"]) {
const html = await readFile(
path.join(publicRoot, locale, "usage/platforms/discord/index.html"),
"utf8",
);
const asideStart = html.indexOf('<aside id="nd-sidebar"');
const asideEnd = html.indexOf("</aside>", asideStart);
const sidebar = html.slice(asideStart, asideEnd);
assert.match(
sidebar,
/<img[^>]+src="\/images\/platforms\/discord\.svg"[^>]*>/,
`${locale} sidebar is missing the Discord logo`,
);
assert.match(sidebar, />Discord</, `${locale} sidebar is missing the platform title`);
assert.doesNotMatch(
sidebar,
/>\/images\/platforms\/discord\.svg(?:<!-- -->)?Discord</,
`${locale} sidebar exposes the icon path as text`,
);
}
});
test("all locales emit the OpenAPI surface with endpoint semantics", async () => {
const representatives = {
en: ["system/get-system-information", "Get system information", "GET", "/api/v1/system/info"],