[Docs Site] Only show external link arrow if element has no image children (#20998)

* [Docs Site] Only show external link arrow if element has no image children

* unused import

Author: KianNH

src/plugins/rehype/external-links.ts

@@ -1,9 +1,22 @@
 import rehypeExternalLinks, { type Options } from "rehype-external-links";
+import type { Element } from "hast";
+
+function hasImgChild(node: Element): boolean {
+	return node.children.some(
+		(child) => child.type === "element" && child.tagName === "img",
+	);
+}
+
+export const externalLinkArrow = " ↗";
 
 export const rehypeExternalLinksOptions = {
-	content: {
-		type: "text",
-		value: " ↗",
+	content: (element) => {
+		if (!hasImgChild(element)) {
+			return {
+				type: "text",
+				value: externalLinkArrow,
+			};
+		}
 	},
 	contentProperties: {
 		class: "external-link",

src/plugins/rehype/heading-slugs.ts

@@ -1,7 +1,7 @@
 import { toString } from "hast-util-to-string";
 import { visit } from "unist-util-visit";
 import GithubSlugger from "github-slugger";
-import { rehypeExternalLinksOptions } from "./external-links";
+import { externalLinkArrow } from "./external-links";
 import type { Root } from "hast";
 import type { MdxTextExpression } from "mdast-util-mdx-expression";
 
@@ -34,7 +34,7 @@ export default function () {
 				} else {
 					if (!element.properties.id) {
 						const string = toString(element)
-							.replaceAll(rehypeExternalLinksOptions.content.value, "")
+							.replaceAll(externalLinkArrow, "")
 							.trimEnd();
 
 						element.properties.id = slugs.slug(string);

src/plugins/rehype/index.node.test.ts

@@ -15,7 +15,12 @@ describe("heading-slugs", () => {
 			.data("settings", {
 				fragment: true,
 			})
-			.use([rehypeParse, rehypeHeadingSlugs, rehypeStringify])
+			.use([
+				rehypeParse,
+				rehypeExternalLinks,
+				rehypeHeadingSlugs,
+				rehypeStringify,
+			])
 			.process(html);
 
 		return file.toString();
@@ -32,6 +37,16 @@ describe("heading-slugs", () => {
 
 		expect(text).toMatchInlineSnapshot(`"<h2 id="bar">foo</h2>"`);
 	});
+
+	test("does not add arrow if image children", async () => {
+		const text = await process(
+			'<h2 id="bar"><a href="https://example.com">foo</a></h2>',
+		);
+
+		expect(text).toMatchInlineSnapshot(
+			`"<h2 id="bar"><a href="https://example.com" target="_blank" rel="noopener">foo<span class="external-link"> ↗</span></a></h2>"`,
+		);
+	});
 });
 
 describe("external-links", () => {
@@ -59,6 +74,16 @@ describe("external-links", () => {
 
 		expect(text).toMatchInlineSnapshot(`"<a href="/">foo</a>"`);
 	});
+
+	test("does not add arrow if image children", async () => {
+		const text = await process(
+			'<a href="https://example.com"><img src="/image.jpg" /></a>',
+		);
+
+		expect(text).toMatchInlineSnapshot(
+			`"<a href="https://example.com" target="_blank" rel="noopener"><img src="/image.jpg"></a>"`,
+		);
+	});
 });
 
 describe("autolink-headings", () => {

src/util/props.node.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "vitest";
 import { generateDescription } from "./props";
-import { rehypeExternalLinksOptions } from "~/plugins/rehype/external-links";
+import { externalLinkArrow } from "~/plugins/rehype/external-links";
 
 describe("description", () => {
 	describe("markdown", () => {
@@ -13,10 +13,8 @@ describe("description", () => {
 		});
 
 		test("removes external link icon", async () => {
-			const icon = rehypeExternalLinksOptions.content.value;
-
 			const desc = await generateDescription({
-				markdown: `[links${icon}](/) and **${icon}stuff**`,
+				markdown: `[links${externalLinkArrow}](/) and **${externalLinkArrow}stuff**`,
 			});
 
 			expect(desc).toEqual("links and \\*\\*stuff\\*\\*");

src/util/props.ts

@@ -3,7 +3,7 @@ import { parse } from "node-html-parser";
 import he from "he";
 import { remark } from "remark";
 import strip from "strip-markdown";
-import { rehypeExternalLinksOptions } from "~/plugins/rehype/external-links";
+import { externalLinkArrow } from "~/plugins/rehype/external-links";
 
 type TableOfContentsItems = NonNullable<StarlightRouteData["toc"]>["items"];
 
@@ -84,7 +84,5 @@ export async function generateDescription({
 		if (paragraph) description = he.decode(paragraph.innerText);
 	}
 
-	return description
-		?.replaceAll(rehypeExternalLinksOptions.content.value, "")
-		.trim();
+	return description?.replaceAll(externalLinkArrow, "").trim();
 }

src/util/sidebar.ts

@@ -2,7 +2,7 @@ import type { AstroGlobal } from "astro";
 import type { StarlightRouteData } from "@astrojs/starlight/route-data";
 
 import { getEntry, getCollection } from "astro:content";
-import { rehypeExternalLinksOptions } from "~/plugins/rehype/external-links";
+import { externalLinkArrow } from "~/plugins/rehype/external-links";
 
 type Link = Extract<StarlightRouteData["sidebar"][0], { type: "link" }> & {
 	order?: number;
@@ -280,7 +280,7 @@ async function handleLink(link: Link): Promise<Link> {
 	if (frontmatter.external_link && !frontmatter.sidebar.group?.hideIndex) {
 		return {
 			...link,
-			label: link.label.concat(rehypeExternalLinksOptions.content.value),
+			label: link.label.concat(externalLinkArrow),
 			href: frontmatter.external_link,
 			badge: frontmatter.external_link.startsWith("/api")
 				? {