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/GuideCard.tsx

@@ -1,25 +1,25 @@
-import { ChangelogTag } from './index.js'
+import { useMemo } from 'preact/hooks'
+import { getGuide } from '../services/Guides.js'
+import { Card } from './Card.jsx'
+import { Badge } from './index.js'
 
 interface Props {
-	title: string,
-	link: string,
-	versions: string[],
-	tags: string[],
+	id: string,
 	activeTags?: string[],
 	toggleTag?: (tag: string) => unknown,
 }
-export function GuideCard({ title, link, versions, tags, activeTags, toggleTag }: Props) {
+export function GuideCard({ id, activeTags, toggleTag }: Props) {
+	const { title, versions, tags } = useMemo(() => getGuide(id), [id])
+
 	const onToggleTag = (tag: string) => (e: MouseEvent) => {
 		if (toggleTag) toggleTag(tag)
 		e.preventDefault()
 		e.stopImmediatePropagation()
 	}
 
-	return <a class="guide-card" href={link} >
-		<span class="guide-versions">{versions.join(' • ')}</span>
-		<h3>{title}</h3>
-		<div class="guide-tags">
-			{tags.sort().map(tag => <ChangelogTag label={tag} onClick={onToggleTag(tag)} active={activeTags?.includes(tag)} />)}
+	return <Card title={title} overlay={versions?.join(' • ')} link={`/guides/${id}/`}>
+		<div class="badges-list">
+			{tags?.sort().map(tag => <Badge label={tag} onClick={onToggleTag(tag)} active={activeTags?.includes(tag)} />)}
 		</div>
-	</a>
+	</Card>
 }