✨ Improve changelog dialog

Author: SnaveSutit

src/components/changelogDialog.svelte

@@ -4,8 +4,6 @@
 
 	const ISSUES_URL = 'https://api.github.com/repos/animated-java/animated-java/issues/'
 
-	const FORMATTED_CHANGELOG_CACHE = new Map<string, string>()
-
 	const formatDateFull = (date: string) => {
 		// @ts-expect-error No types for getDateDisplay
 		return getDateDisplay(date).full
@@ -15,44 +13,37 @@
 		return getDateDisplay(date).short
 	}
 
-	const formatMarkdown = async (text: string) => {
-		const issues: Record<number, { title: string; url: string }> = {}
-		text = text.replace('[BREAKING]', '<span class="breaking">BREAKING</span>')
-		text = text.replace(/\[([^\]]+?)\]\(([^)]+?)\)/gm, (match, title, url) => {
-			const issueMatch = url.match(/issues\/(\d+)/)
-			if (issueMatch) {
-				const issueNumber = parseInt(issueMatch[1])
-				issues[issueNumber] = { title, url }
-				return `$$$ISSUE${issueNumber}$$$`
-			}
-			return `<a href="${url}" target="_blank">${title}</a>`
-		})
-		for (const [issueNumber, { url }] of Object.entries(issues)) {
-			const data = await fetch(ISSUES_URL + issueNumber)
-				.then(response => response.json())
-				.catch(() => undefined)
-			text = text.replace(
-				`$$$ISSUE${issueNumber}$$$`,
-				`<a href="${url}" target="_blank">#${issueNumber}${data ? ' - ' + data.title : ''}</a>`
-			)
-		}
-		// inline code blocks
-		text = text.replace(/`([^`]+?)`/g, '<code>$1</code>')
-		return text
+	interface GithubIssue {
+		number: number
+		title: string
+		html_url: string
 	}
 
-	const getChangelog = async (item: string) => {
-		if (FORMATTED_CHANGELOG_CACHE.has(item)) {
-			return FORMATTED_CHANGELOG_CACHE.get(item)
-		}
-		const formatted = await formatMarkdown(item)
-		FORMATTED_CHANGELOG_CACHE.set(item, formatted)
-		return formatted
+	const ISSUES = new Map<string, GithubIssue>()
+
+	const fetchIssue = async (issueId: string): Promise<GithubIssue | undefined> => {
+		if (ISSUES.has(issueId)) return ISSUES.get(issueId)
+
+		const issue = await fetch(ISSUES_URL + issueId)
+			.then(async response => {
+				const json = await response.json()
+				if (!response.ok)
+					throw new Error(
+						`Failed to fetch issue ${issueId}: ` + (json.message ?? response.statusText)
+					)
+				return json
+			})
+			.catch(e => {
+				console.error(`Failed to fetch issue ${issueId}`, e)
+				return undefined
+			})
+		if (issue) ISSUES.set(issueId, issue)
+		return issue
 	}
 </script>
 
 <div class="content plugin_browser_tabbed_page" id="plugin_browser_changelog">
-	{#each Object.values(changelog).reverse() as versions}
+	{#each Object.values(changelog).reverse().slice(0, 4) as versions}
 		<div class="title-container">
 			<img src={AnimatedJavaIcon} alt="" />
 			<h3>
@@ -70,21 +61,72 @@
 		<ul>
 			{#each versions.categories as category}
 				<li>
-					<h4>{category.title}</h4>
+					<h4>
+						{category.title}
+					</h4>
 					<ul class="plugin_changelog_features">
 						{#each category.list as item}
-							<li>
-								{#await getChangelog(item) then data}
-									{@html data}
+							{@const issueMatch = /^Fixed \[#(\d+)\]\(.+?\)$/.exec(item)}
+							{#if issueMatch}
+								{#await fetchIssue(issueMatch[1])}
+									<li>
+										<p>
+											<i class="material-icons icon spinner"
+												>progress_activity</i
+											>
+											<!-- svelte-ignore missing-declaration -->
+											{@html pureMarked(item)}
+										</p>
+									</li>
+								{:then issue}
+									<li>
+										<p>
+											{'Fixed '}
+											{#if issue}
+												<a href={issue.html_url} target="_blank">
+													{'#' + issue.number}
+												</a>
+												{' - '}
+												<!-- svelte-ignore missing-declaration -->
+												{@html pureMarked(issue.title)}
+											{:else}
+												<a
+													href="${ISSUES_URL + issueMatch[1]}"
+													target="_blank"
+												>
+													{'#' + issueMatch[1]}
+												</a>
+											{/if}
+										</p>
+									</li>
+								{:catch}
+									<li>
+										<!-- svelte-ignore missing-declaration -->
+										{@html pureMarked(item)}
+									</li>
 								{/await}
-							</li>
+							{:else if item.startsWith('[BREAKING]')}
+								<li>
+									<p>
+										<span class="breaking">BREAKING</span>
+										<!-- svelte-ignore missing-declaration -->
+										{@html pureMarked(item.replace('[BREAKING]', '').trim())}
+									</p>
+								</li>
+							{:else}
+								<li>
+									<!-- svelte-ignore missing-declaration -->
+									{@html pureMarked(item)}
+								</li>
+							{/if}
 						{/each}
 					</ul>
 				</li>
 			{/each}
 		</ul>
 		<hr />
 	{/each}
+	<p class="disclaimer">To see the full changelog, open Animated Java in the plugin list.</p>
 </div>
 
 <style>
@@ -105,7 +147,7 @@
 		border-radius: 3px;
 		font-size: 0.9em;
 		font-weight: bold;
-		margin-right: 0.25rem;
+		height: min-content;
 	}
 	img {
 		border-radius: 4px;
@@ -128,4 +170,28 @@
 	hr {
 		margin: 2rem 0;
 	}
+	.disclaimer {
+		font-size: 0.9em;
+		color: var(--color-text-secondary);
+		font-style: italic;
+		text-align: center;
+		margin-top: 1rem;
+	}
+	li > p {
+		display: flex;
+		flex-direction: row;
+		gap: 0.5rem;
+		align-items: flex-start;
+	}
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+	.spinner {
+		animation: spin 1s linear infinite;
+	}
 </style>