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

@@ -1,27 +1,32 @@
-import type { ComponentChildren } from 'preact'
 import { Icons } from './Icons.js'
+import { Octicon } from './Octicon.jsx'
 
-type ToolCardProps = {
+interface Props {
 	title: string,
-	desc?: string,
-	link?: string,
+	titleIcon?: keyof typeof Octicon | keyof typeof Icons,
+	link: string,
 	icon?: keyof typeof Icons,
-	children?: ComponentChildren,
+	desc?: string,
 }
-export function ToolCard({ title, desc, link, icon, children }: ToolCardProps) {
-	const content = <>
-		<div class="tool-head">
+export function ToolCard({ title, desc, link, icon, titleIcon }: Props) {
+	if (icon || desc) {
+		return <a class="tool-card" href={link}>
 			{icon && Icons[icon]}
 			<div>
-				<h3>{title}</h3>
+				<ToolHead title={title} titleIcon={titleIcon} />
 				<p>{desc}</p>
 			</div>
-		</div>
-		{children && <div class="tool-body">
-			{children}
-		</div>}
-	</>
-	return link
-		? <a class="tool-card" href={link}>{content}</a>
-		: <div class="tool-card">{content}</div>
+		</a>
+	}
+
+	return <a class="tool-card" href={link}>
+		<ToolHead title={title} titleIcon={titleIcon} />
+	</a>
+}
+
+function ToolHead({ title, titleIcon }: Pick<Props, 'title' | 'titleIcon'>) {
+	return <h3>
+		{title}
+		{titleIcon && (titleIcon in Octicon ? (Octicon as any)[titleIcon] : (Icons as any)[titleIcon])}
+	</h3>
 }