akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-24 07:37:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add ability to sort changelog

Browse Source
This commit is contained in:
Misode
2021-11-02 02:46:40 +01:00
parent cc20cb7f7a
commit 25351920e4
4 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/Octicon.tsx
View File

@@ -28,6 +28,8 @@ export const Octicon = {
plus: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 2a.75.75 0 01.75.75v4.5h4.5a.75.75 0 010 1.5h-4.5v4.5a.75.75 0 01-1.5 0v-4.5h-4.5a.75.75 0 010-1.5h4.5v-4.5A.75.75 0 018 2z"></path></svg>,
plus_circle: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"></path></svg>,
search: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"></path></svg>,
sort_asc: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M0 4.25a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5H.75A.75.75 0 010 4.25zm0 4a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5H.75A.75.75 0 010 8.25zm0 4a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5H.75a.75.75 0 01-.75-.75zm12.927-9.677a.25.25 0 00-.354 0l-3 3A.25.25 0 009.75 6H12v6.75a.75.75 0 001.5 0V6h2.25a.25.25 0 00.177-.427l-3-3z"></path></svg>,
sort_desc: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M0 4.25a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5H.75A.75.75 0 010 4.25zm0 4a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5H.75A.75.75 0 010 8.25zm0 4a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5H.75a.75.75 0 01-.75-.75z"></path><path d="M13.5 10h2.25a.25.25 0 01.177.427l-3 3a.25.25 0 01-.354 0l-3-3A.25.25 0 019.75 10H12V3.75a.75.75 0 011.5 0V10z"></path></svg>,
stack: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.122.392a1.75 1.75 0 011.756 0l5.003 2.902c.83.481.83 1.68 0 2.162L8.878 8.358a1.75 1.75 0 01-1.756 0L2.119 5.456a1.25 1.25 0 010-2.162L7.122.392zM8.125 1.69a.25.25 0 00-.25 0l-4.63 2.685 4.63 2.685a.25.25 0 00.25 0l4.63-2.685-4.63-2.685zM1.601 7.789a.75.75 0 011.025-.273l5.249 3.044a.25.25 0 00.25 0l5.249-3.044a.75.75 0 01.752 1.298l-5.248 3.044a1.75 1.75 0 01-1.756 0L1.874 8.814A.75.75 0 011.6 7.789zm0 3.5a.75.75 0 011.025-.273l5.249 3.044a.25.25 0 00.25 0l5.249-3.044a.75.75 0 01.752 1.298l-5.248 3.044a1.75 1.75 0 01-1.756 0l-5.248-3.044a.75.75 0 01-.273-1.025z"></path></svg>,
sun: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 10.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM8 12a4 4 0 100-8 4 4 0 000 8zM8 0a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0V.75A.75.75 0 018 0zm0 13a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 018 13zM2.343 2.343a.75.75 0 011.061 0l1.06 1.061a.75.75 0 01-1.06 1.06l-1.06-1.06a.75.75 0 010-1.06zm9.193 9.193a.75.75 0 011.06 0l1.061 1.06a.75.75 0 01-1.06 1.061l-1.061-1.06a.75.75 0 010-1.061zM16 8a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0116 8zM3 8a.75.75 0 01-.75.75H.75a.75.75 0 010-1.5h1.5A.75.75 0 013 8zm10.657-5.657a.75.75 0 010 1.061l-1.061 1.06a.75.75 0 11-1.06-1.06l1.06-1.06a.75.75 0 011.06 0zm-9.193 9.193a.75.75 0 010 1.06l-1.06 1.061a.75.75 0 11-1.061-1.06l1.06-1.061a.75.75 0 011.061 0z"></path></svg>,
sync: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 2.5a5.487 5.487 0 00-4.131 1.869l1.204 1.204A.25.25 0 014.896 6H1.25A.25.25 0 011 5.75V2.104a.25.25 0 01.427-.177l1.38 1.38A7.001 7.001 0 0114.95 7.16a.75.75 0 11-1.49.178A5.501 5.501 0 008 2.5zM1.705 8.005a.75.75 0 01.834.656 5.501 5.501 0 009.592 2.97l-1.204-1.204a.25.25 0 01.177-.427h3.646a.25.25 0 01.25.25v3.646a.25.25 0 01-.427.177l-1.38-1.38A7.001 7.001 0 011.05 8.84a.75.75 0 01.656-.834z"></path></svg>,

17
src/app/pages/Changelog.tsx
View File

@@ -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 <main>
<Ad type="text" id="changelog" />
{error && <ErrorPanel error={error} onDismiss={() => setError(null)} />}
<div class="changelog-controls">
<TextInput class="btn btn-input changelog-search" list="sound-list" placeholder={loc('changelog.search')}
value={search} onChange={setSearch} />
<div class="changelog-query">
<TextInput class="btn btn-input changelog-search" list="sound-list" placeholder={loc('changelog.search')}
value={search} onChange={setSearch} />
<Btn icon={sort ? 'sort_desc' : 'sort_asc'} label={sort ? 'Newest first' : 'Oldest first'} onClick={() => setSort(!sort)} />
</div>
{tags.length > 0 && <div class="changelog-tags">
{tags.map(tag => <Tag label={tag} onClick={() => setTags(tags.filter(t => t !== tag))} />)}
</div>}
</div>
<div class="changelog">
{filteredChangelogs.map(change =>
{sortedChangelogs.map(change =>
<Change change={change} activeTags={tags} toggleTag={toggleTag} />)}
</div>
</main>

10
src/app/services/Changelogs.ts
View File

@@ -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,
}))
}

8
src/styles/global.css
View File

@@ -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;