Visual improvements to technical changelog

src/app/pages/Changelog.tsx

@@ -1,6 +1,6 @@
 import marked from 'marked'
 import { useEffect, useMemo, useState } from 'preact/hooks'
-import { Ad, ErrorPanel, TextInput } from '../components'
+import { Ad, ErrorPanel, Octicon, TextInput } from '../components'
 import { locale } from '../Locales'
 import type { VersionId } from '../Schemas'
 import type { ChangelogEntry } from '../services/Changelogs'
@@ -72,7 +72,7 @@ function Change({ change, activeTags, addTag }: ChangeProps) {
 			{change.tags.map(tag => <Tag label={tag} onClick={() => addTag(tag)} active={activeTags.includes(tag)} />)}
 			<a class="changelog-version" href={`https://www.minecraft.net/en-us/article/minecraft-snapshot-${change.version}`}>{change.version}</a>
 		</div>
-		<div dangerouslySetInnerHTML={{ __html: marked(change.content) }} />
+		<div class="changelog-content" dangerouslySetInnerHTML={{ __html: marked(change.content) }} />
 	</div>
 }
 
@@ -82,6 +82,9 @@ type TagProps = {
 	onClick?: () => unknown,
 }
 function Tag({ label, active, onClick }: TagProps) {
-	const color = hashString(label) % 360
-	return <div class={`changelog-tag${active ? ' active' : ''}${onClick ? ' clickable' : ''}`} style={`--tint: ${color}`} onClick={onClick}>{label}</div>
+	const color = label === 'breaking' ? 5 : hashString(label) % 360
+	return <div class={`changelog-tag${active ? ' active' : ''}${onClick ? ' clickable' : ''}`} style={`--tint: ${color}`} onClick={onClick}>
+		{label === 'breaking' && Octicon.alert}
+		{label}
+	</div>
 }

src/app/services/Changelogs.ts

@@ -41,7 +41,9 @@ function parseChangelog(text: string) {
 			const i = entry.indexOf('|')
 			return {
 				tags: entry.substring(0, i).trim().split(' '),
-				content: entry.slice(i + 1).trim(),
+				content: entry.slice(i + 1).trim()
+					.replaceAll('->', '→')
+					.replaceAll('\n...\n', '\n\n'),
 			}
 		})
 }

src/styles/global.css

@@ -1009,18 +1009,27 @@ hr {
 
 .changelog-tag {
 	--color: hsl(var(--tint, 0), var(--text-saturation), var(--text-lightness));
+	display: flex;
+	align-items: center;
 	margin-right: 8px;
 	border: 1.5px solid var(--color);
 	height: 24px;
 	border-radius: 12px;
 	padding: 0 8px;
 	color: var(--color);
+	fill: var(--color);
 	user-select: none;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
 }
 
+.changelog-tag svg {
+	margin-right: 4px;
+	width: 20px;
+	height: 20px;
+}
+
 .changelog-tag.clickable {
 	cursor: pointer;
 }
@@ -1028,6 +1037,7 @@ hr {
 .changelog-tag.active {
 	background-color: var(--color);
 	color: var(--background-2);
+	fill: var(--background-2);
 }
 
 .changelog-version {
@@ -1041,6 +1051,10 @@ hr {
 	text-decoration: underline;
 }
 
+.changelog-content ul {
+	padding-left: 24px;
+}
+
 .changelog-entry code {
 	background-color: var(--background-5);
 	padding: 1px 4px;