Add what's new page

src/app/pages/Home.tsx

@@ -1,12 +1,12 @@
 import { useMemo } from 'preact/hooks'
 import contributors from '../../contributors.json'
-import { ChangelogEntry, Footer, GeneratorCard, Giscus, GuideCard, ToolCard, ToolGroup } from '../components/index.js'
+import { Store } from '../Store.js'
+import { shuffle } from '../Utils.js'
+import { Card, ChangelogEntry, Footer, GeneratorCard, Giscus, GuideCard, ToolCard, ToolGroup } from '../components/index.js'
 import { useLocale, useTitle } from '../contexts/index.js'
 import { useAsync } from '../hooks/useAsync.js'
 import { useMediaQuery } from '../hooks/useMediaQuery.js'
-import { fetchChangelogs, fetchVersions } from '../services/DataFetcher.js'
-import { Store } from '../Store.js'
-import { shuffle } from '../Utils.js'
+import { fetchChangelogs, fetchVersions, fetchWhatsNew } from '../services/DataFetcher.js'
 
 const MIN_FAVORITES = 2
 const MAX_FAVORITES = 5
@@ -30,6 +30,7 @@ export function Home({}: Props) {
 					{smallScreen && <Guides />}
 					<Versions />
 					{smallScreen && <Tools />}
+					<WhatsNew />
 				</div>
 				{!smallScreen && <div class="card-column">
 					<FavoriteGenerators />
@@ -135,7 +136,15 @@ function Changelog() {
 	</ToolGroup>
 }
 
+function WhatsNew() {
+	const { locale } = useLocale()
 
+	const { value: items } = useAsync(fetchWhatsNew)
+
+	return <ToolGroup title={locale('whats_new')} link="/whats-new/" titleIcon="megaphone">
+		{items?.slice(0, 3).map(item => <Card overlay={Intl.DateTimeFormat(undefined, { day: 'numeric',month: 'long', year: 'numeric' }).format(new Date(item.createdAt))}>{item.title}</Card>)}
+	</ToolGroup>
+}
 
 function Contributors() {
 	const supporters = useMemo(() => {

src/app/pages/WhatsNew.tsx

@@ -0,0 +1,38 @@
+import { marked } from 'marked'
+import { ErrorPanel, Footer } from '../components/index.js'
+import { useLocale, useTitle } from '../contexts/index.js'
+import { useAsync } from '../hooks/useAsync.js'
+import type { WhatsNewItem } from '../services/DataFetcher.js'
+import { fetchWhatsNew } from '../services/DataFetcher.js'
+
+interface Props {
+	path?: string,
+}
+export function WhatsNew({}: Props) {
+	const { locale } = useLocale()
+	useTitle(locale('title.whats_new'))
+
+	const { value: items, error } = useAsync(fetchWhatsNew)
+
+	return <main>
+		<div class="container whats-new">
+			<p>{locale('whats_new.description')}</p>
+			{error && <ErrorPanel error={error} />}
+			{items?.map(item => <WhatsNewEntry item={item} />)}
+		</div>
+		<Footer />
+	</main>
+}
+
+interface EntryProps {
+	item: WhatsNewItem,
+}
+function WhatsNewEntry({ item }: EntryProps) {
+	return <article class="whats-new-entry">
+		<a href={item.url} target="_blank">
+			<time dateTime={item.createdAt} title={Intl.DateTimeFormat(undefined, { dateStyle: 'full', timeStyle: 'long' }).format(new Date(item.createdAt))}>{Intl.DateTimeFormat(undefined, { day: 'numeric',month: 'long', year: 'numeric' }).format(new Date(item.createdAt))}</time>
+			<h2>{item.title}</h2>
+		</a>
+		<div class="guide-content" dangerouslySetInnerHTML={{ __html: marked(item.body) }} />
+	</article>
+}

src/app/pages/index.ts

@@ -9,4 +9,5 @@ export * from './Partners.js'
 export * from './Sounds.js'
 export * from './Transformation.jsx'
 export * from './Versions.js'
+export * from './WhatsNew.jsx'
 export * from './Worldgen.jsx'