diff --git a/src/app/components/Octicon.tsx b/src/app/components/Octicon.tsx index 9826e040..bfb568aa 100644 --- a/src/app/components/Octicon.tsx +++ b/src/app/components/Octicon.tsx @@ -28,6 +28,8 @@ export const Octicon = { plus: , plus_circle: , search: , + sort_asc: , + sort_desc: , stack: , sun: , sync: , diff --git a/src/app/pages/Changelog.tsx b/src/app/pages/Changelog.tsx index 69a26b55..60b631d7 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, Octicon, TextInput } from '../components' +import { Ad, Btn, ErrorPanel, Octicon, TextInput } from '../components' import { locale } from '../Locales' import type { VersionId } from '../Schemas' import type { ChangelogEntry, ChangelogVersion } from '../services/Changelogs' @@ -46,18 +46,27 @@ export function Changelog({ lang, changeTitle }: ChangelogProps) { }) }, [changelogs, search, tags]) + const [sort, setSort] = useState(false) + + const sortedChangelogs = useMemo(() => { + return filteredChangelogs.sort((a, b) => sort ? b.order - a.order : a.order - b.order) + }, [changelogs, sort]) + return
{error && setError(null)} />}
- +
+ + setSort(!sort)} /> +
{tags.length > 0 &&
{tags.map(tag => setTags(tags.filter(t => t !== tag))} />)}
}
- {filteredChangelogs.map(change => + {sortedChangelogs.map(change => )}
diff --git a/src/app/services/Changelogs.ts b/src/app/services/Changelogs.ts index 8958f5cc..cfb6dc64 100644 --- a/src/app/services/Changelogs.ts +++ b/src/app/services/Changelogs.ts @@ -5,6 +5,7 @@ const repo = 'https://raw.githubusercontent.com/misode/technical-changes/main' export type ChangelogEntry = { group: ChangelogVersion, version: ChangelogVersion, + order: number, tags: string[], content: string, } @@ -20,24 +21,25 @@ export async function getChangelogs() { if (!Changelogs) { const index = await (await fetch(`${repo}/index.json`)).json() as string[] Changelogs = (await Promise.all( - index.map(group => fetchGroup(parseVersion(group))) + index.map((group, i) => fetchGroup(parseVersion(group), i)) )).flat() } return Changelogs } -async function fetchGroup(group: ChangelogVersion) { +async function fetchGroup(group: ChangelogVersion, groupIndex: number) { const index = await (await fetch(`${repo}/${group.id}/index.json`)).json() as string[] return (await Promise.all( - index.map(version => fetchChangelog(group, parseVersion(version))) + index.map((version, i) => fetchChangelog(group, parseVersion(version), groupIndex, i)) )).flat() } -async function fetchChangelog(group: ChangelogVersion, version: ChangelogVersion) { +async function fetchChangelog(group: ChangelogVersion, version: ChangelogVersion, groupIndex: number, versionIndex: number) { const text = await (await fetch(`${repo}/${group.id}/${version.id}.md`)).text() return parseChangelog(text).map(change => ({ version, group, + order: groupIndex * 1000 + versionIndex, ...change, })) } diff --git a/src/styles/global.css b/src/styles/global.css index a0068905..148980c1 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1091,6 +1091,14 @@ hr { padding: 0 16px; } +.changelog-query { + display: flex; +} + +.changelog-query > *:not(:first-child) { + margin-left: 8px; +} + .changelog-search { flex-basis: 100%; padding: 8px;