Improve homepage (#245)

* Improve how generators are listed on home

* Add some icons for generators

* Remove debug

* Refactor cachedFetch and use generated changelogs

* Add limit to how many changes are shown by default

* Add more generator icons

* Refactor cards

* Fix generator icons for light theme

* Add more worldgen icons

* Add remaining generator icons

* Refactor navigation and badges style

* Group on homepage for guides and tools

* Fix header button style

* Add versions and technical changelog to homepage

* Make it clear that not all changes could be documented

src/app/components/generator/GeneratorCard.tsx

@@ -0,0 +1,51 @@
+import { useMemo } from 'preact/hooks'
+import type { ConfigGenerator } from '../../Config.js'
+import config from '../../Config.js'
+import { useLocale } from '../../contexts/Locale.jsx'
+import type { VersionId } from '../../services/Schemas.js'
+import { checkVersion } from '../../services/Schemas.js'
+import { cleanUrl } from '../../Utils.js'
+import { Badge, Card, Icons, ToolCard } from '../index.js'
+
+interface Props {
+	id: string,
+	minimal?: boolean,
+}
+export function GeneratorCard({ id, minimal }: Props) {
+	const { locale } = useLocale()
+
+	const gen = useMemo<ConfigGenerator>(() => {
+		const gen = config.generators.find(g => g.id === id)
+		if (gen === undefined) {
+			return { id, schema: id, url: id }
+		}
+		return gen
+	}, [id])
+
+	const title = locale(gen.partner ? `partner.${gen.partner}.${gen.id}` : gen.id)
+
+	const icon = Object.keys(Icons).includes(id) ? id as keyof typeof Icons : undefined
+
+	if (minimal) {
+		return <ToolCard title={title} link={cleanUrl(gen.url)} titleIcon={icon} />
+	}
+
+	const versions = useMemo(() => {
+		if (!gen) return []
+		return config.versions
+			.filter(v => checkVersion(v.id, gen.minVersion, gen.maxVersion))
+			.map(v => v.id as VersionId)
+	}, [gen])
+
+	const tags = useMemo(() => {
+		if (gen.tags?.includes('assets')) return ['resource-pack']
+		return []
+	}, [gen])
+
+	return <Card title={<>{title}{icon && Icons[icon]}</>} overlay={gen.partner ? locale(`partner.${gen.partner}`) : versions.join(' • ')} link={cleanUrl(gen.url)}>
+		{!gen.noPath && <p class="card-subtitle">/{gen.path ?? gen.id}</p>}
+		{tags.length > 0 && <div class="badges-list">
+			{tags.sort().map(tag => <Badge label={tag} />)}
+		</div>}
+	</Card>
+}

src/app/components/generator/GeneratorList.tsx

@@ -0,0 +1,54 @@
+import { useMemo, useState } from 'preact/hooks'
+import type { ConfigGenerator } from '../../Config.js'
+import config from '../../Config.js'
+import { useLocale, useVersion } from '../../contexts/index.js'
+import { checkVersion } from '../../services/Schemas.js'
+import { GeneratorCard, TextInput, VersionSwitcher } from '../index.js'
+
+interface Props {
+	path?: string,
+	predicate?: (gen: ConfigGenerator) => boolean | undefined,
+}
+export function GeneratorList({ predicate }: Props) {
+	const { locale } = useLocale()
+	const { version, changeVersion } = useVersion()
+
+	const [search, setSearch] = useState('')
+
+	const [versionFilter, setVersionFiler] = useState(true)
+
+	const versionedGenerators = useMemo(() => {
+		return config.generators.filter(gen => {
+			if (predicate === undefined || !predicate(gen)) return false
+			if (versionFilter === false) return true
+			return checkVersion(version, gen.minVersion, gen.maxVersion)
+		})
+	}, [version, versionFilter])
+
+	const filteredGenerators = useMemo(() => {
+		const query = search.split(' ').map(q => q.trim().toLowerCase()).filter(q => q.length > 0)
+		return versionedGenerators.filter(gen => {
+			const content = `${gen.id} ${gen.tags?.join(' ') ?? ''} ${gen.path ?? ''} ${gen.partner ?? ''} ${locale(gen.id).toLowerCase()}`
+			return query.every(q => {
+				if (q.startsWith('!')) {
+					return q.length === 1 || !content.includes(q.slice(1))
+				}
+				return content.includes(q)
+			})
+		})
+	}, [versionedGenerators, search, locale])
+
+	return <div class="generator-list">
+		<div class="navigation">
+			<TextInput class="btn btn-input query-search" placeholder={locale('generators.search')} value={search} onChange={setSearch} />
+			<VersionSwitcher value={versionFilter ? version : undefined} onChange={v => {changeVersion(v); setVersionFiler(true)}} hasAny onAny={() => setVersionFiler(false)} />
+		</div>
+		{filteredGenerators.length === 0 ? <>
+			<span class="note">{locale('generators.no_results')}</span>
+		</> : <div class="result-list">
+			{filteredGenerators.map(gen =>
+				<GeneratorCard id={gen.id} />
+			)}
+		</div>}
+	</div>
+}

src/app/components/generator/index.ts

@@ -1,5 +1,7 @@
 export * from './FileCreation.js'
 export * from './FileRenaming.js'
+export * from './GeneratorCard.jsx'
+export * from './GeneratorList.jsx'
 export * from './PreviewPanel.js'
 export * from './ProjectCreation.js'
 export * from './ProjectDeletion.js'