feat(components): add a component for the footer

kingsdigitallab · Jan 29, 2025 · ed63c7c · ed63c7c
1 parent 22353e7
commit ed63c7c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 20 deletions.
diff --git a/frontend/src/lib/components/Footer.svelte b/frontend/src/lib/components/Footer.svelte
@@ -0,0 +1,27 @@
+<script>
+	import * as config from '$lib/config';
+	import BaseLink from '$lib/components/BaseLink.svelte';
+
+	const version = import.meta.env.APP_VERSION;
+</script>
+
+<footer>
+	<BaseLink href="/">{config.title}</BaseLink>
+
+	<a href="https://github.com/kingsdigitallab/corpus-building/blob/v{version}/CHANGELOG.md"
+		>v{version}</a
+	>
+</footer>
+
+<style>
+	footer {
+		border-top: var(--border-size-1) solid var(--gray-2);
+		display: flex;
+		justify-content: space-between;
+		padding-block: var(--size-4);
+	}
+
+	.version {
+		font-size: var(--font-size-0);
+	}
+</style>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { page } from '$app/stores';
-	import BaseLink from '$lib/components/BaseLink.svelte';
+	import Footer from '$lib/components/Footer.svelte';
 	import Header from '$lib/components/PageHeader.svelte';
 	import Transition from '$lib/components/PageTransition.svelte';
 	import * as config from '$lib/config';
@@ -45,14 +45,8 @@
 		</Transition>
 	</main>
 
-	<footer>
-		<BaseLink href="/">{config.title}</BaseLink>
-		<code class="version">
-			<a href="https://github.com/kingsdigitallab/corpus-building/blob/v{version}/CHANGELOG.md"
-				>v{version}</a
-			>
-		</code>
-	</footer>
+
+	<Footer />
 </div>
 
 <style>
@@ -73,17 +67,6 @@
 		padding-block: var(--size-4);
 	}
 
-	footer {
-		border-top: var(--border-size-1) solid var(--gray-2);
-		display: flex;
-		justify-content: space-between;
-		padding-block: var(--size-4);
-	}
-
-	.version {
-		font-size: var(--font-size-0);
-	}
-
 	@media (max-width: 1279px) {
 		.layout {
 			padding-inline: var(--size-2);