diff --git a/src/app/pages/Changelog.tsx b/src/app/pages/Changelog.tsx index aec33bda..5e80d2de 100644 --- a/src/app/pages/Changelog.tsx +++ b/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 => addTag(tag)} active={activeTags.includes(tag)} />)} {change.version} -
+
} @@ -82,6 +82,9 @@ type TagProps = { onClick?: () => unknown, } function Tag({ label, active, onClick }: TagProps) { - const color = hashString(label) % 360 - return
{label}
+ const color = label === 'breaking' ? 5 : hashString(label) % 360 + return
+ {label === 'breaking' && Octicon.alert} + {label} +
} diff --git a/src/app/services/Changelogs.ts b/src/app/services/Changelogs.ts index 01456747..e3a2f79b 100644 --- a/src/app/services/Changelogs.ts +++ b/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'), } }) } diff --git a/src/styles/global.css b/src/styles/global.css index 3e951e23..d064b6fe 100644 --- a/src/styles/global.css +++ b/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;