Getting there now

src/lib/card-collections/LatestPosts.svelte

@@ -17,7 +17,7 @@
 	<EmptyCard><p class="message">Awaiting posts</p></EmptyCard>
 {:then posts}
 	{#each posts as post}
-		<PostCard {post} /><br />
+		<PostCard {post} />
 	{/each}
 {:catch}
 	<EmptyCard><p class="message">Unable to fetch posts</p></EmptyCard>

src/lib/card-collections/Projects.svelte

@@ -4,22 +4,19 @@
 	import ProjectCard from './cards/ProjectCard.svelte';
 
 	async function getProjects() {
-		const res = await fetch('/projects/all')
+		const res = await fetch('/projects/all');
-        const json = await res.json()
+		const json = await res.json();
-        console.log(json)
+		console.log(json);
-        return json
+		return json;
 	}
 </script>
 
 {#await getProjects()}
 	<EmptyCard>
-    <p class="message">
+		<p class="message">Fetching Projects...</p>
-        Fetching Projects...
-    </p>
 	</EmptyCard>
 {:then projects}
 	{#each projects as project}
-
 		<ProjectCard {project} />
 	{/each}
 {:catch}
@@ -30,6 +27,6 @@
 
 <style>
 	.message {
-        color:var(--light-text-color)
+		color: var(--light-text-color);
 	}
 </style>

src/lib/card-collections/cards/EmptyCard.svelte

@@ -4,16 +4,13 @@
 
 <style>
 	.card-container {
-		display: flex;
+		background-color: var(--main-text-color);
-		flex-wrap: wrap;
-		justify-content: center;
-		align-items: baseline;
-		row-gap: 15px;
-		background-color: var(--overlay-color);
 		width: 90%;
 		height: auto;
 		margin: auto;
 		padding: 10px 5px 10px 5px;
 		border-radius: 10px;
+		margin-top: 5px;
+		margin-bottom: 5px;
 	}
 </style>

src/lib/card-collections/cards/PostCard.svelte

@@ -9,12 +9,28 @@
 <a href="/posts/{post.slug}">
 	<EmptyCard>
 		<h1 class="post-title">{post.title}</h1>
-		<h2 class="post-date">{post.date}</h2>
+		<h2 class="post-date">{new Date(post.date).toLocaleDateString()}</h2>
 		<br />
 		<p class="post-summary">{post.summary}</p>
 		<br />
+		<div class="tag-container">
 			{#each post.tags as tag}
 				<PostTag {tag} />
 			{/each}
+		</div>
 	</EmptyCard>
 </a>
+
+<style>
+	a {
+		text-decoration: none;
+		color: var(--dark-text-color);
+	}
+
+	.tag-container {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		align-items: center;
+	}
+</style>

src/lib/card-collections/cards/ProjectCard.svelte

@@ -2,7 +2,7 @@
 	import Logos from '$lib/language-logos/Logos.svelte';
 	import EmptyCard from './EmptyCard.svelte';
 
-	export let project
+	export let project;
 </script>
 
 <a href="/posts/tag/{project.name.toLowerCase()}">
@@ -12,3 +12,10 @@
 		<p>{project.description}</p>
 	</EmptyCard>
 </a>
+
+<style>
+	a {
+		text-decoration: none;
+		color: var(--dark-text-color);
+	}
+</style>

src/lib/card-collections/cards/TagsCard.svelte

@@ -17,6 +17,7 @@
 </script>
 
 <EmptyCard>
+	<div class="tag-box">
 		{#await fetchTags()}
 			<p class="message">Loading Tags...</p>
 		{:then tags}
@@ -28,10 +29,19 @@
 		{:catch}
 			<p class="message">Unable to load tags</p>
 		{/await}
+	</div>
 </EmptyCard>
 
 <style>
 	.message {
 		color: var(--light-text-color);
 	}
+
+	.tag-box {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		align-items: baseline;
+		row-gap: 15px;
+	}
 </style>

src/lib/footer.svelte

@@ -1,20 +1,34 @@
 <script lang="ts">
 	const currentYear: number = new Date().getFullYear();
+
+	const footerLinks = [
+		{
+			img: '/logos/git.svg',
+			link: 'https://git.fjla.uk/explore',
+			alt: 'See my work on Gitea'
+		}
+	];
 </script>
 
 <footer>
 	<p>
 		&copy; Fred Boniface 2022-{currentYear}
 	</p>
+	<p>
+		{#each footerLinks as link}
+			<a href={link.link}>
+				<img class="link-image" src={link.img} alt={link.alt} title={link.alt} /></a
+			>
+		{/each}
+	</p>
 </footer>
 
 <style>
 	footer {
-		position: relative;
+		margin-top: auto;
 		width: 100%;
 		background-color: transparent;
-		height: 30px;
+		height: auto;
-		bottom: 0;
 	}
 	footer p {
 		padding: 0;
@@ -23,16 +37,10 @@
 		margin-top: 9px;
 		text-align: center;
 		font-family: monospace;
+		color: var(--light-text-color);
 	}
-	@media screen and (min-height: 600px) {
+
-		footer {
+	.link-image {
-			position: fixed;
+		height: 20px;
-			bottom: 0;
-			left: 0;
-		}
-		footer p {
-			padding-top: 0px;
-			margin-top: 6px;
-		}
 	}
 </style>

src/lib/header.svelte

@@ -13,7 +13,7 @@
 <style>
 	header {
 		font-family: shadowsintolight;
-		font-size: 30px;
+		font-size: 4.8vw;
 		font-weight: bolder;
 		margin: 0px;
 		padding: 0px;
@@ -31,4 +31,10 @@
 	h2 {
 		margin-top: 0px;
 	}
+
+	@media (min-width: 490px) {
+		header {
+			font-size: 23px;
+		}
+	}
 </style>

src/lib/language-logos/Logos.svelte

@@ -8,14 +8,14 @@
 {#each langs as lang}
 	{#await languageNames.get(lang) then langName}
 		<a href="/posts/tag/{langName}">
-			<img src="/logos/color/{lang}.svg" alt={langName} />
+			<img src="/logos/color/{lang}.svg" alt="{langName} logo" title={langName} />
 		</a>
 	{/await}
 {/each}
 <br />
 {#each plats as plat}
 	<a href="/posts/tag/{plat.toLowerCase()}">
-		<img src="/logos/color/{plat}.svg" alt={plat} />
+		<img src="/logos/color/{plat}.svg" alt="{plat} logo" title={plat} />
 	</a>
 {/each}
 

src/routes/+layout.svelte

@@ -6,15 +6,21 @@
 	import DevBanner from '$lib/DevBanner.svelte';
 </script>
 
+<div id="page-content">
 	{#if dev}
 		<DevBanner />
 	{/if}
 
 	<Navigation />
-
 	<slot />
-
 	<Footer />
+</div>
 
 <style>
+	#page-content {
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+		min-height: 100svh;
+	}
 </style>

src/routes/+page.svelte

@@ -89,9 +89,7 @@
 		margin: auto;
 		margin-top: 10px;
 		border-radius: 100px;
-		border-style: solid;
+		border: none;
-		border-color: var(--accent-color);
-		border-width: 3px;
 		max-height: 150px;
 		height: 30vw;
 	}
@@ -124,10 +122,6 @@
 		img {
 			margin: 0; /* Remove any margin */
 			padding: 0; /* Remove any padding */
-			border-radius: 100px;
-			border-style: solid;
-			border-color: var(--accent-color);
-			border-width: 3px;
 			max-height: 150px;
 			height: 100%; /* Fill the height of the #header-visual container */
 		}

src/routes/posts/+page.svelte

@@ -1 +1,11 @@
-<h1>Posts</h1>
+<script lang="ts">
+	import LatestPosts from '$lib/card-collections/LatestPosts.svelte';
+	import PostCard from '$lib/card-collections/cards/PostCard.svelte';
+	import Header from '$lib/header.svelte';
+
+	const title = "Things I've Written";
+</script>
+
+<Header {title} />
+
+<LatestPosts number={20} />

src/routes/posts/[slug]/+page.svelte

@@ -27,7 +27,8 @@
 					})
 					.catch((error) => {
 						console.error(
-							'Error copying code to clipboard, this may be due to privacy settings in your browser'
+							'Error copying code to clipboard, this may be due to privacy settings in your browser',
+							error
 						);
 					});
 			});
@@ -56,6 +57,8 @@
 	</div>
 
 	<div class="side-column">
+		<h2>Projects</h2>
+
 		<Projects />
 	</div>
 </div>

src/routes/projects/+page.server.ts

@@ -1,5 +0,0 @@
-import type { Project } from '$lib/projects/types';
-
-export async function load({ params }) {
-	// Fetch all projects
-}

src/routes/projects/+page.svelte

@@ -1,45 +1,22 @@
 <script lang="ts">
-	import GitLink from '$lib/GitLink.svelte';
+	import ProjectCard from '$lib/card-collections/cards/ProjectCard.svelte';
-	import FullWidthContent from '$lib/content-boxes/FullWidthContent.svelte';
 	import Header from '$lib/header.svelte';
-	import Logos from '$lib/language-logos/Logos.svelte';
 
 	const title: string = "Stuff I've Done";
+
+	async function getProjects() {
+		return await (await fetch('/projects/all')).json();
+	}
 </script>
 
 <Header {title} />
-<main>
-	<FullWidthContent>
-		<h1><a href="/posts/tag/owlboard">OwlBoard</a></h1>
-		<br />
-		<GitLink url={'https://git.fjla.uk/owlboard'} />
-		<Logos
-			langs={['js', 'ts', 'py', 'go', 'html', 'css']}
-			plats={['svelte', 'express', 'mongo', 'redis']}
-		/>
-		<p>
-			Working full time on the 'iron road', left me wanting a faster way to get the information I
-			needed. OwlBoard evolved from <a href="/articles/athena">Athena</a> and grew to provide more information
-			that frontline rail colleagues need.
-		</p>
-	</FullWidthContent>
-	<FullWidthContent>
-		<h1><a href="/posts/tag/map-dots">map-dots</a></h1>
-		<br />
-		<GitLink url={'https://git.fjla.uk/fred.boniface/map-dots'} />
-		<Logos langs={['go', 'py']} plats={[]} />
-		<p>
-			I like to collect data, I am just not always sure what to do with that data. map-dots takes in
-			location history data and produces imagery. It can also run as a server and the map-dots-fetch
-			script can be used to fetch and save configurable images.
-		</p>
-	</FullWidthContent>
-</main>
 
-<style>
+{#await getProjects()}
-	h1 {
+	<p class="messages">Fetching projects</p>
-		margin-bottom: 8px;
+{:then projects}
-		padding-top: 5px;
+	{#each projects as project}
-		font-family: shadowsintolight;
+		<ProjectCard {project} />
-	}
+	{/each}
-</style>
+{:catch}
+	<p class="messages">Error fetching projects</p>
+{/await}

src/routes/projects/all/+server.ts

@@ -7,6 +7,6 @@ import { mongoConnect } from '$lib/database/mongo.server';
 export async function GET({ url }) {
 	const db = await mongoConnect();
 	const col = db.db('fredboniface').collection('projects');
-	const res = await col.find().toArray()
+	const res = await col.find().toArray();
-    return json(res)
+	return json(res);
 }