docs(changelog): show contributor avatars with proper size and styling (#9956)

docs/app/changelog/changelog-content.tsx

@@ -123,7 +123,7 @@ function MarkdownContent({ content }: { content: string }) {
 						target="_blank"
 						rel="noopener noreferrer"
 						className={cn(
-							"font-medium text-neutral-600 dark:text-neutral-300 underline decoration-dashed underline-offset-4 hover:text-neutral-900 dark:hover:text-white transition-colors",
+							"font-medium text-neutral-600 dark:text-neutral-300 underline decoration-dashed underline-offset-4 hover:text-neutral-900 dark:hover:text-white transition-colors has-[img]:inline-flex has-[img]:align-middle has-[img]:no-underline",
 							className,
 						)}
 						{...props}
@@ -147,7 +147,7 @@ function MarkdownContent({ content }: { content: string }) {
 				hr: () => null,
 				img: (props) => (
 					<img
-						className="inline-block w-5 h-5 rounded-full border opacity-80 mx-0.5 align-text-bottom"
+						className="inline-block size-6 rounded-full border border-foreground/10 bg-background opacity-90 mx-0.5 align-middle shadow-sm"
 						{...props}
 						style={{ maxWidth: "100%" }}
 						alt={props.alt || ""}

docs/app/changelog/page.tsx

@@ -16,29 +16,54 @@ interface GitHubRelease {
 	published_at: string;
 }
 
+const GITHUB_USERNAME_REGEX =
+	/@([A-Za-z0-9](?:[A-Za-z0-9-]{0,37}[A-Za-z0-9])?)/g;
+
+function getMentionUsernames(line: string) {
+	return Array.from(
+		new Set(
+			Array.from(line.matchAll(GITHUB_USERNAME_REGEX), (match) => match[1]),
+		),
+	);
+}
+
+function getContributorAvatarLinks(usernames: string[]) {
+	return usernames
+		.map((username) => {
+			const avatarUrl = `https://github.com/${username}.png?size=48`;
+			return `[![${username}](${avatarUrl})](https://github.com/${username})`;
+		})
+		.join("");
+}
+
 function getContent(content: string) {
 	const lines = content.split("\n");
+	let inContributorsSection = false;
 	const newContext = lines.map((line) => {
 		if (line.trim().startsWith("## ") || line.trim().startsWith("### ")) {
-			return line.split("date=")[0].trim();
+			const heading = line.split("date=")[0].trim();
+			if (heading.startsWith("## ")) {
+				inContributorsSection = heading.toLowerCase().includes("contributors");
+			}
+			return heading;
+		}
+		if (inContributorsSection) {
+			const usernames = getMentionUsernames(line);
+			if (usernames.length > 0) {
+				return getContributorAvatarLinks(usernames);
+			}
 		}
 		if (line.trim().startsWith("- ")) {
 			const mainContent = line.split(";")[0];
 			const context = line.split(";")[2];
-			const mentionMatches =
-				(context ?? line)?.match(/@([A-Za-z0-9-]+)/g) ?? [];
-			if (mentionMatches.length === 0) {
+			const usernames = getMentionUsernames(context ?? line);
+			if (usernames.length === 0) {
 				return (mainContent || line).replace(/&nbsp/g, "");
 			}
-			const mentions = mentionMatches.map((match) => {
-				const username = match.slice(1);
-				const avatarUrl = `https://github.com/${username}.png`;
-				return `[![${match}](${avatarUrl})](https://github.com/${username})`;
-			});
 			return (
 				(mainContent || line).replace(/&nbsp/g, "") +
 				" \u2013 " +
-				mentions.join(" ")
+				getContributorAvatarLinks(usernames)
 			);
 		}
 		return line;