From 08e739440eb2f6141cd85ad6079dc191fae94fe9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= <andre.jaenisch@posteo.de>
Date: Wed, 13 Mar 2024 14:31:33 +0100
Subject: [PATCH] feat: new projects page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is the page that will be reached after a new project was added or
imported unless there have been projects before already.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
---
 .../components/molecules/MoreFilters.svelte   |  31 +++++
 .../components/molecules/Pagination.svelte    |  50 ++++++++
 src/lib/components/molecules/Projects.svelte  |  31 +++++
 src/lib/components/molecules/Search.svelte    |  41 +++++++
 src/lib/components/molecules/Starred.svelte   |  31 +++++
 src/lib/components/organisms/FileTable.svelte | 108 ++++++++++++++++++
 src/lib/components/pages/Projects.svelte      |  25 ++++
 src/lib/components/templates/Profile.svelte   |   7 ++
 src/lib/components/templates/Projects.svelte  |  76 ++++++++++++
 src/lib/i18n/locales/de.json                  |  32 ++++++
 src/lib/i18n/locales/en.json                  |  32 ++++++
 src/lib/i18n/locales/he.json                  |  32 ++++++
 src/routes/projects/+page.server.js           |  92 +++++++++++++++
 src/routes/projects/+page.svelte              |  14 +++
 14 files changed, 602 insertions(+)
 create mode 100644 src/lib/components/molecules/MoreFilters.svelte
 create mode 100644 src/lib/components/molecules/Pagination.svelte
 create mode 100644 src/lib/components/molecules/Projects.svelte
 create mode 100644 src/lib/components/molecules/Search.svelte
 create mode 100644 src/lib/components/molecules/Starred.svelte
 create mode 100644 src/lib/components/organisms/FileTable.svelte
 create mode 100644 src/lib/components/pages/Projects.svelte
 create mode 100644 src/lib/components/templates/Projects.svelte
 create mode 100644 src/routes/projects/+page.server.js
 create mode 100644 src/routes/projects/+page.svelte

diff --git a/src/lib/components/molecules/MoreFilters.svelte b/src/lib/components/molecules/MoreFilters.svelte
new file mode 100644
index 0000000..1251c4b
--- /dev/null
+++ b/src/lib/components/molecules/MoreFilters.svelte
@@ -0,0 +1,31 @@
+<!--
+Form to select more filters.
+Copyright (C) 2024 André Jaenisch
+SPDX-FileCopyrightText: 2024 André Jaenisch
+SPDX-License-Identifier: AGPL-3.0-or-later
+
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<script>
+	import { TriangleDown24 } from 'svelte-octicons';
+	import { _ } from 'svelte-i18n';
+
+	/**
+	 * Translation keys.
+	 */
+	export let i18n = {
+		submit: ''
+	};
+</script>
+
+<form class="bg-surface-100 h-8 flex flex-col justify-center px-4">
+	<button type="submit" class="flex submit text-surface-400">
+		{$_(i18n.submit)}
+		<TriangleDown24 fill="currentColor" class="ms-4 self-center" />
+	</button>
+</form>
diff --git a/src/lib/components/molecules/Pagination.svelte b/src/lib/components/molecules/Pagination.svelte
new file mode 100644
index 0000000..d3a2bff
--- /dev/null
+++ b/src/lib/components/molecules/Pagination.svelte
@@ -0,0 +1,50 @@
+<!--
+Pagination for a page.
+Copyright (C) 2024 André Jaenisch
+SPDX-FileCopyrightText: 2024 André Jaenisch
+SPDX-License-Identifier: AGPL-3.0-or-later
+
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<script>
+	import { ChevronLeft24, ChevronRight24 } from 'svelte-octicons';
+	import { _ } from 'svelte-i18n';
+
+	/**
+	 * Translation keys.
+	 */
+	export let i18n = {
+		next: '',
+		previous: ''
+	};
+</script>
+
+<nav class="flex gap-4 items-center justify-center">
+	<a href="?page=-1" class="flex gap-2 text-primary-500">
+		<ChevronLeft24 fill="currentColor" />
+		{$_(i18n.previous)}
+	</a>
+	<a href="?page=1" class="text-surface-500">1</a>
+	<a href="?page=2" class="text-surface-500">2</a>
+	<a href="?page=3" class="text-surface-500">3</a>
+	<a
+		href="?page=4"
+		class="bg-primary-500 text-white rounded h-8 w-8 flex justify-center items-center"
+	>
+		4
+	</a>
+	<a href="?page=5" class="text-surface-500">5</a>
+	<a href="?page=6" class="text-surface-500">6</a>
+	<span>…</span>
+	<a href="?page=17" class="text-surface-500">17</a>
+	<a href="?page=18" class="text-surface-500">18</a>
+	<a href="?page=+1" class="flex gap-2 text-primary-500">
+		{$_(i18n.next)}
+		<ChevronRight24 fill="currentColor" />
+	</a>
+</nav>
diff --git a/src/lib/components/molecules/Projects.svelte b/src/lib/components/molecules/Projects.svelte
new file mode 100644
index 0000000..a13f1ad
--- /dev/null
+++ b/src/lib/components/molecules/Projects.svelte
@@ -0,0 +1,31 @@
+<!--
+Filter for more projects.
+Copyright (C) 2024 André Jaenisch
+SPDX-FileCopyrightText: 2024 André Jaenisch
+SPDX-License-Identifier: AGPL-3.0-or-later
+
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<script>
+	import { Filter24 } from 'svelte-octicons';
+	import { _ } from 'svelte-i18n';
+
+	/**
+	 * Translation keys.
+	 */
+	export let i18n = {
+		submit: ''
+	};
+</script>
+
+<form>
+	<button type="submit" class="flex submit text-surface-400">
+		<Filter24 fill="currentColor" class="ms-4 self-center" />
+		{$_(i18n.submit)}
+	</button>
+</form>
diff --git a/src/lib/components/molecules/Search.svelte b/src/lib/components/molecules/Search.svelte
new file mode 100644
index 0000000..158e357
--- /dev/null
+++ b/src/lib/components/molecules/Search.svelte
@@ -0,0 +1,41 @@
+<!--
+Form for searching a project.
+Copyright (C) 2024 André Jaenisch
+SPDX-FileCopyrightText: 2024 André Jaenisch
+SPDX-License-Identifier: AGPL-3.0-or-later
+
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<script>
+	import { Search24 } from 'svelte-octicons';
+	import { _ } from 'svelte-i18n';
+
+	/**
+	 * Translation keys.
+	 */
+	export let i18n = {
+		placeholder: '',
+		submit: ''
+	};
+</script>
+
+<form class="w-96">
+	<div class="flex input">
+		<Search24 fill="currentColor" class="ms-4 self-center" />
+		<input
+			id="search"
+			name="search"
+			type="search"
+			class="bg-surface-200 border-none"
+			placeholder={$_(i18n.placeholder)}
+		/>
+		<button type="submit" class="submit bg-surface-400 text-white w-40">
+			{$_(i18n.submit)}
+		</button>
+	</div>
+</form>
diff --git a/src/lib/components/molecules/Starred.svelte b/src/lib/components/molecules/Starred.svelte
new file mode 100644
index 0000000..cd66666
--- /dev/null
+++ b/src/lib/components/molecules/Starred.svelte
@@ -0,0 +1,31 @@
+<!--
+Filter for more favourites.
+Copyright (C) 2024 André Jaenisch
+SPDX-FileCopyrightText: 2024 André Jaenisch
+SPDX-License-Identifier: AGPL-3.0-or-later
+
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<script>
+	import { Filter24 } from 'svelte-octicons';
+	import { _ } from 'svelte-i18n';
+
+	/**
+	 * Translation keys.
+	 */
+	export let i18n = {
+		submit: ''
+	};
+</script>
+
+<form>
+	<button type="submit" class="flex submit text-surface-400">
+		<Filter24 fill="currentColor" class="ms-4 self-center" />
+		{$_(i18n.submit)}
+	</button>
+</form>
diff --git a/src/lib/components/organisms/FileTable.svelte b/src/lib/components/organisms/FileTable.svelte
new file mode 100644
index 0000000..b625919
--- /dev/null
+++ b/src/lib/components/organisms/FileTable.svelte
@@ -0,0 +1,108 @@
+<!--
+FileTable organism.
+Copyright (C) 2024 André Jaenisch
+SPDX-FileCopyrightText: 2024 André Jaenisch
+SPDX-License-Identifier: AGPL-3.0-or-later
+
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<script>
+	import {
+		EyeClosed16,
+		RepoForked16,
+		Repo24,
+		Star16,
+		TriangleDown16,
+		TriangleDown24
+	} from 'svelte-octicons';
+	import { _ } from 'svelte-i18n';
+
+	/**
+	 * Translation keys.
+	 */
+	export let i18n = {
+		heading: {
+			lastUpdated: '',
+			name: ''
+		},
+		table: {
+			updated: ''
+		}
+	};
+
+	/**
+	 * Available projects.
+	 */
+	export let projects = [];
+</script>
+
+<table class="w-4/5 min-w-96 px-4 mx-auto">
+	<thead>
+		<tr class="flex justify-between gap-4 bg-surface-100 h-8">
+			<th class="flex text-surface-400 mx-4">
+				{$_(i18n.heading.name)}
+				<TriangleDown24 fill="currentColor" />
+			</th>
+			<th class="text-surface-400 mx-4">
+				{$_(i18n.heading.lastUpdated)}
+			</th>
+		</tr>
+	</thead>
+	<tbody>
+		{#each projects as project}
+			<tr class="flex justify-between gap-4 bg-white border">
+				<td class="flex mx-4 gap-4">
+					<Repo24 fill="currentColor" />
+					<div class="flex flex-col">
+						<div class="flex">
+							<span class="text-primary-500">{project.name}</span>
+							{#each project.members as member}
+								<a href="/people/{member.slug}">
+									<img src={member.avatar} alt={member.name} />
+								</a>
+							{/each}
+						</div>
+						<div class="text-surface-400">
+							{project.description}
+						</div>
+						<div class="flex gap-2">
+							{#each project.tags as tag}
+								<a href={tag.link} class="bg-primary-100 text-primary-500 rounded-full px-2">
+									{tag.name}
+								</a>
+							{/each}
+						</div>
+					</div>
+				</td>
+				<td>
+					<div class="flex flex-col px-4 py-4">
+						<div class="flex justify-between gap-4">
+							<button type="submit" class="bg-white text-surface-200 rounded border px-4 py-2">
+								<RepoForked16 fill="currentColor" />
+							</button>
+							<button type="submit" class="bg-white text-surface-200 rounded border px-4 py-2">
+								<Star16 fill="currentColor" />
+							</button>
+							<button type="submit" class="bg-white text-surface-200 rounded border px-4 py-2 flex">
+								<EyeClosed16 fill="currentColor" />
+								<TriangleDown16 fill="currentColor" />
+							</button>
+						</div>
+						<div class="text-surface-400">
+							{$_(i18n.table.updated, {
+								values: {
+									relativeTime: project.lastUpdated.toISOString()
+								}
+							})}
+						</div>
+					</div>
+				</td>
+			</tr>
+		{/each}
+	</tbody>
+</table>
diff --git a/src/lib/components/pages/Projects.svelte b/src/lib/components/pages/Projects.svelte
new file mode 100644
index 0000000..6fa6de7
--- /dev/null
+++ b/src/lib/components/pages/Projects.svelte
@@ -0,0 +1,25 @@
+<!--
+Projects page.
+Copyright (C) 2024 André Jaenisch
+SPDX-FileCopyrightText: 2024 André Jaenisch
+SPDX-License-Identifier: AGPL-3.0-or-later
+
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<script>
+	import ProjectsTemplate from '../templates/Projects.svelte';
+
+	/**
+	 * Data populated by SvelteKit
+	 */
+	export let data = {
+		projects: []
+	};
+</script>
+
+<ProjectsTemplate {data} />
diff --git a/src/lib/components/templates/Profile.svelte b/src/lib/components/templates/Profile.svelte
index dfcfa48..5657f09 100644
--- a/src/lib/components/templates/Profile.svelte
+++ b/src/lib/components/templates/Profile.svelte
@@ -20,6 +20,13 @@ You should have received a copy of the GNU Affero General Public License along w
 	import Created from '../atoms/Created.svelte';
 	import DisplayName from '../atoms/DisplayName.svelte';
 
+	/**
+	 * Translation keys.
+	 */
+	const i18n = {
+		heading: 'page.profile.heading'
+	};
+
 	/**
 	 * Required context for populating the template.
 	 */
diff --git a/src/lib/components/templates/Projects.svelte b/src/lib/components/templates/Projects.svelte
new file mode 100644
index 0000000..1358f29
--- /dev/null
+++ b/src/lib/components/templates/Projects.svelte
@@ -0,0 +1,76 @@
+<!--
+Projects template.
+Copyright (C) 2024 André Jaenisch
+SPDX-FileCopyrightText: 2024 André Jaenisch
+SPDX-License-Identifier: AGPL-3.0-or-later
+
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<script>
+	import { AlertFill16, Info16, Repo24, Upload16 } from 'svelte-octicons';
+	import { _ } from 'svelte-i18n';
+
+	import MoreFilters from '$lib/components/molecules/MoreFilters.svelte';
+	import Pagination from '$lib/components/molecules/Pagination.svelte';
+	import Projects from '$lib/components/molecules/Projects.svelte';
+	import Search from '$lib/components/molecules/Search.svelte';
+	import Starred from '$lib/components/molecules/Starred.svelte';
+	import FileTable from '$lib/components/organisms/FileTable.svelte';
+
+	/**
+	 * Translation keys.
+	 */
+	const i18n = {
+		fileTable: {
+			heading: {
+				lastUpdated: 'page.projects.table.heading.last_updated',
+				name: 'page.projects.table.heading.name'
+			},
+			table: {
+				updated: 'page.projects.file_table.updated'
+			}
+		},
+		moreFilters: {
+			submit: 'page.projects.form.fields.more_filters.submit'
+		},
+		pagination: {
+			next: 'page.projects.nav.next',
+			previous: 'page.projects.nav.previous'
+		},
+		projects: {
+			submit: 'page.projects.form.fields.projects.submit'
+		},
+		search: {
+			placeholder: 'page.projects.form.fields.search.placeholder',
+			submit: 'page.projects.form.fields.search.submit'
+		},
+		starred: {
+			submit: 'page.projects.form.fields.starred.submit'
+		}
+	};
+
+	/**
+	 * Required context for populating the template.
+	 */
+	export let data = {
+		projects: []
+	};
+</script>
+
+<section class="w-full flex flex-col gap-8 bg-white">
+	<div class="flex mx-auto w-full items-center justify-center">
+		<Search i18n={i18n.search} />
+		<Projects i18n={i18n.projects} />
+		<Starred i18n={i18n.starred} />
+		<MoreFilters i18n={i18n.moreFilters} />
+	</div>
+
+	<FileTable i18n={i18n.fileTable} projects={data.projects} />
+
+	<Pagination i18n={i18n.pagination} />
+</section>
diff --git a/src/lib/i18n/locales/de.json b/src/lib/i18n/locales/de.json
index 417e113..ac729e1 100644
--- a/src/lib/i18n/locales/de.json
+++ b/src/lib/i18n/locales/de.json
@@ -79,6 +79,38 @@
 				"heading": "Projekte"
 			}
 		},
+		"projects": {
+			"file_table": {
+				"updated": ""
+			},
+			"form": {
+				"fields": {
+					"more_filters": {
+						"submit": ""
+					},
+					"projects": {
+						"submit": ""
+					},
+					"search": {
+						"placeholder": "",
+						"submit": ""
+					},
+					"starred": {
+						"submit": ""
+					}
+				}
+			},
+			"nav": {
+				"next": "",
+				"previous": ""
+			},
+			"table": {
+				"heading": {
+					"last_updated": "",
+					"name": ""
+				}
+			}
+		},
 		"welcome": "Willkommen bei Anvil!"
 	}
 }
diff --git a/src/lib/i18n/locales/en.json b/src/lib/i18n/locales/en.json
index 2ae8919..a4c0bf3 100644
--- a/src/lib/i18n/locales/en.json
+++ b/src/lib/i18n/locales/en.json
@@ -79,6 +79,38 @@
 				"heading": "Projects"
 			}
 		},
+		"projects": {
+			"file_table": {
+				"updated": "Updated {relativeTime}"
+			},
+			"form": {
+				"fields": {
+					"more_filters": {
+						"submit": "More Filters"
+					},
+					"projects": {
+						"submit": "My projects"
+					},
+					"search": {
+						"placeholder": "Search or filter",
+						"submit": "Submit"
+					},
+					"starred": {
+						"submit": "Starred"
+					}
+				}
+			},
+			"nav": {
+				"next": "Next",
+				"previous": "Previous"
+			},
+			"table": {
+				"heading": {
+					"last_updated": "Last updated",
+					"name": "Name"
+				}
+			}
+		},
 		"welcome": "Welcome to Anvil!"
 	}
 }
diff --git a/src/lib/i18n/locales/he.json b/src/lib/i18n/locales/he.json
index 4463811..36013e5 100644
--- a/src/lib/i18n/locales/he.json
+++ b/src/lib/i18n/locales/he.json
@@ -79,6 +79,38 @@
 				"heading": "פרויקטים"
 			}
 		},
+		"projects": {
+			"file_table": {
+				"updated": ""
+			},
+			"form": {
+				"fields": {
+					"more_filters": {
+						"submit": ""
+					},
+					"projects": {
+						"submit": ""
+					},
+					"search": {
+						"placeholder": "",
+						"submit": ""
+					},
+					"starred": {
+						"submit": ""
+					}
+				}
+			},
+			"nav": {
+				"next": "",
+				"previous": ""
+			},
+			"table": {
+				"heading": {
+					"last_updated": "",
+					"name": ""
+				}
+			}
+		},
 		"welcome": ""
 	}
 }
diff --git a/src/routes/projects/+page.server.js b/src/routes/projects/+page.server.js
new file mode 100644
index 0000000..13ff6ea
--- /dev/null
+++ b/src/routes/projects/+page.server.js
@@ -0,0 +1,92 @@
+/* Providing context for ImportProject page.
+ * Copyright (C) 2024 André Jaenisch
+ * SPDX-FileCopyrightText: 2024 André Jaenisch
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ params }) {
+	return {
+		projects: [
+			{
+				name: 'Project A',
+				description:
+					'This software project is a web-based application that will allow users to book appointments online.',
+				avatar: 'https://example.com',
+				// Date back three months
+				lastUpdated: new Date(Date.now() - 3 * 30 * 24 * 60 * 60 * 1000),
+				members: [
+					{
+						name: 'Person A',
+						avatar: 'https://example.com',
+						slug: 'a'
+					},
+					{
+						name: 'Person B',
+						avatar: 'https://example.com',
+						slug: 'b'
+					},
+					{
+						name: 'Person C',
+						avatar: 'https://example.com',
+						slug: 'c'
+					}
+				],
+				tags: [
+					{
+						name: 'ActivityPub',
+						link: '/tag/ActivityPub'
+					},
+					{
+						name: 'css',
+						link: '/tag/css'
+					},
+					{
+						name: 'guile',
+						link: '/tag/guile'
+					}
+				]
+			},
+			{
+				name: 'Project B',
+				description:
+					'This software project is a web-based application that will allow users to book appointments online.',
+				avatar: 'https://example.com',
+				// Date back three months
+				lastUpdated: new Date(Date.now() - 3 * 30 * 24 * 60 * 60 * 1000),
+				members: [
+					{
+						name: 'Person A',
+						avatar: 'https://example.com',
+						slug: 'a'
+					},
+					{
+						name: 'Person B',
+						avatar: 'https://example.com',
+						slug: 'b'
+					}
+				],
+				tags: [
+					{
+						name: 'ActivityPub',
+						link: '/tag/ActivityPub'
+					},
+					{
+						name: 'css',
+						link: '/tag/css'
+					},
+					{
+						name: 'guile',
+						link: '/tag/guile'
+					}
+				]
+			}
+		]
+	};
+}
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
new file mode 100644
index 0000000..eaa2a98
--- /dev/null
+++ b/src/routes/projects/+page.svelte
@@ -0,0 +1,14 @@
+<!--
+SPDX-FileCopyrightText: 2024 André Jaenisch
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script>
+	import Projects from '$lib/components/pages/Projects.svelte';
+
+	/** @type {import('./types').PageData} */
+	export let data;
+</script>
+
+<Projects {data} />