About page and version in the footer

.github/workflows/release.yml

@@ -35,6 +35,7 @@ jobs:
           for svc in api:backend web:frontend; do
             docker buildx build --platform linux/amd64,linux/arm64 -f "${svc#*:}/Dockerfile" \
               --label org.opencontainers.image.source=https://github.com/Wjouter/InTheKnow \
+              --build-arg INTHEKNOW_VERSION="$VERSION" \
               -t "$IMAGE-${svc%%:*}:$VERSION" --push .
           done
       - name: Render the stack definition

frontend/Dockerfile

@@ -5,6 +5,8 @@ WORKDIR /src
 COPY frontend/package.json frontend/package-lock.json ./
 RUN npm ci
 COPY frontend/ ./
+# Shown in the footer; set by the release workflow, "dev" for any other build.
+ARG INTHEKNOW_VERSION=dev
 RUN npm run build
 RUN mkdir /prod && cp package.json package-lock.json /prod/ && npm ci --omit=dev --ignore-scripts --prefix /prod
 

frontend/src/app.d.ts

@@ -1,6 +1,9 @@
 import type { Dict, Lang } from '$lib/i18n';
 
 declare global {
+	/** The release version (vite.config.ts), "dev" outside a release build. */
+	const __VERSION__: string;
+
 	type Me = {
 		email: string;
 		role: 'user' | 'admin';

frontend/src/lib/i18n/en.ts

@@ -692,6 +692,18 @@ export const en = {
 		preferences: 'Preferences',
 		notifications: 'Notifications'
 	},
+	about: {
+		link: 'About',
+		title: 'About InTheKnow',
+		intro: 'Free and open-source software.',
+		version: (v: string) => `Version ${v}`,
+		licenseTitle: 'License',
+		license: 'InTheKnow is licensed under the GNU General Public License, version 3. You may use, study, share and change it under that license.',
+		source: 'Source code',
+		licenseText: 'License text',
+		creditsTitle: 'Built with',
+		credits: 'InTheKnow uses these open-source projects. Thanks to everyone who makes them.'
+	},
 	errors: {
 		generic: 'Something went wrong.',
 		genericBody: 'Try again, or go back to the home page.',

frontend/src/lib/i18n/nl.ts

@@ -696,6 +696,18 @@ export const nl: Dict = {
 		preferences: 'Voorkeuren',
 		notifications: 'Meldingen'
 	},
+	about: {
+		link: 'Over',
+		title: 'Over InTheKnow',
+		intro: 'Vrije en open-source software.',
+		version: (v: string) => `Versie ${v}`,
+		licenseTitle: 'Licentie',
+		license: 'InTheKnow valt onder de GNU General Public License, versie 3. Je mag het onder die licentie gebruiken, bestuderen, delen en aanpassen.',
+		source: 'Broncode',
+		licenseText: 'Licentietekst',
+		creditsTitle: 'Gemaakt met',
+		credits: 'InTheKnow gebruikt deze open-sourceprojecten. Dank aan iedereen die ze maakt.'
+	},
 	errors: {
 		generic: 'Er ging iets mis.',
 		genericBody: 'Probeer het opnieuw, of ga terug naar de startpagina.',

frontend/src/lib/paths.ts

@@ -6,4 +6,5 @@ export const isPublic = (path: string) =>
 	path === '/account' ||
 	path.startsWith('/account/') ||
 	path === '/language' ||
+	path === '/about' ||
 	path.startsWith('/_app/');

frontend/src/routes/+layout.svelte

@@ -18,6 +18,7 @@
 	// Svelte sets document.title from <svelte:head> only when the value changes, and pages set their own. So this reruns
 	// only when the unavailable view comes or goes, not on every navigation.
 	const unavailable = $derived(Boolean(data.unavailable));
+	const release = __VERSION__ === 'dev' ? '' : `/releases/tag/v${__VERSION__}`;
 
 	// A notice handed over by a redirecting action (enhance.svelte.ts). Taken once and cleared from the history entry,
 	// so Back doesn't show it again; a new object each time, so the same text twice shows twice.
@@ -43,6 +44,11 @@
 	{:else}
 		{@render children()}
 	{/if}
+	<footer>
+		<a href="https://github.com/Wjouter/InTheKnow{release}">InTheKnow {__VERSION__}</a>
+		<span aria-hidden="true">·</span>
+		<a href="/about">{t.about.link}</a>
+	</footer>
 </main>
 {#if data.me}<PhoneNav />{/if}
 {#key notice}<Toast message={notice?.text} />{/key}
@@ -54,6 +60,18 @@
 	h1 {
 		font: var(--type-h3);
 	}
+	footer {
+		display: flex;
+		justify-content: center;
+		gap: var(--space-2);
+		padding: var(--space-4);
+		border-top: 1px solid var(--border-subtle);
+		font: var(--type-small);
+		color: var(--text-muted);
+	}
+	footer a {
+		color: inherit;
+	}
 	@media (min-width: 768px) {
 		main.with-phone-nav {
 			padding-bottom: 0;

frontend/src/routes/about/+page.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import PageIntro from '$lib/components/PageIntro.svelte';
+	import { dicts } from '$lib/i18n';
+
+	let { data } = $props();
+	const t = $derived(dicts[data.lang].about);
+	const repo = 'https://github.com/Wjouter/InTheKnow';
+
+	// What ships to users: the web app, the API and the database. Add a runtime dependency here when one is added.
+	const credits = [
+		{ name: 'Svelte and SvelteKit', url: 'https://svelte.dev', license: 'MIT' },
+		{ name: 'Lucide icons', url: 'https://lucide.dev', license: 'ISC' },
+		{ name: 'uqr', url: 'https://github.com/unjs/uqr', license: 'MIT' },
+		{ name: 'Lato', url: 'https://www.latofonts.com', license: 'SIL Open Font License 1.1' },
+		{ name: 'JetBrains Mono', url: 'https://www.jetbrains.com/lp/mono/', license: 'SIL Open Font License 1.1' },
+		{ name: 'Node.js', url: 'https://nodejs.org', license: 'MIT' },
+		{ name: '.NET', url: 'https://dotnet.microsoft.com', license: 'MIT' },
+		{ name: 'Npgsql', url: 'https://www.npgsql.org', license: 'PostgreSQL License' },
+		{ name: 'Ical.Net', url: 'https://github.com/ical-org/ical.net', license: 'MIT' },
+		{ name: 'Otp.NET', url: 'https://github.com/kspearrin/Otp.NET', license: 'MIT' },
+		{ name: 'PostgreSQL', url: 'https://www.postgresql.org', license: 'PostgreSQL License' }
+	];
+</script>
+
+<svelte:head><title>{t.title} · InTheKnow</title></svelte:head>
+
+<PageIntro title={t.title} intro={t.intro} />
+<div class="wrap stack narrow">
+	<p class="muted">{t.version(__VERSION__)}</p>
+	<section class="stack">
+		<h2>{t.licenseTitle}</h2>
+		<p>{t.license}</p>
+		<p class="links">
+			<a href={repo}>{t.source}</a>
+			<a href="{repo}/blob/main/LICENSE">{t.licenseText}</a>
+		</p>
+	</section>
+	<section class="stack">
+		<h2>{t.creditsTitle}</h2>
+		<p>{t.credits}</p>
+		<ul>
+			{#each credits as c (c.name)}
+				<li><a href={c.url}>{c.name}</a> <span class="muted">· {c.license}</span></li>
+			{/each}
+		</ul>
+	</section>
+</div>
+
+<style>
+	.narrow {
+		max-width: 640px;
+	}
+	h2 {
+		font: var(--type-h3);
+	}
+	.muted {
+		color: var(--text-muted);
+	}
+	.links {
+		display: flex;
+		gap: var(--space-4);
+		flex-wrap: wrap;
+	}
+	ul {
+		margin: 0;
+		padding-left: var(--space-5);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+	}
+</style>

frontend/vite.config.ts

@@ -1,10 +1,12 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import { loadEnv } from 'vite';
 import { defineConfig } from 'vitest/config';
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
 	plugins: [sveltekit()],
+	define: { __VERSION__: JSON.stringify(loadEnv(mode, '.', 'INTHEKNOW_').INTHEKNOW_VERSION || 'dev') },
 	test: {
 		environment: 'node',
 		include: ['src/**/*.test.ts']
 	}
-});
+}));