More functional work

src/lib/card-collections/LatestPosts.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { ArticleSummary } from '$lib/posts/types';
+	import EmptyCard from './cards/EmptyCard.svelte';
+	import PostCard from './cards/PostCard.svelte';
+
+	export let length: number = 6; // Number of posts to return
+
+	async function getPosts(length: number): Promise<ArticleSummary[]> {
+		const res = await fetch('/posts/latest');
+		const json = await res.json();
+		console.log(json);
+		return json;
+	}
+</script>
+
+{#await getPosts(length)}
+	<EmptyCard><p class="message">Awaiting posts</p></EmptyCard>
+{:then posts}
+	{#each posts as post}
+		<PostCard {post} /><br />
+	{/each}
+{:catch}
+	<EmptyCard><p class="message">Unable to fetch posts</p></EmptyCard>
+{/await}
+
+<style>
+	.message {
+		color: var(--light-text-color);
+	}
+</style>

src/lib/card-collections/Projects.svelte

@@ -0,0 +1,35 @@
+<script>
+	import Logos from '$lib/language-logos/Logos.svelte';
+	import EmptyCard from './cards/EmptyCard.svelte';
+	import ProjectCard from './cards/ProjectCard.svelte';
+
+	async function getProjects() {
+		const res = await fetch('/projects/all')
+        const json = await res.json()
+        console.log(json)
+        return json
+    }
+</script>
+
+{#await getProjects()}
+<EmptyCard>
+    <p class="message">
+        Fetching Projects...
+    </p>
+</EmptyCard>
+{:then projects}
+{#each projects as project}
+
+<ProjectCard {project} />
+{/each}
+{:catch}
+<EmptyCard>
+    <p class="message">Unable to fetch projects</p>
+</EmptyCard>
+{/await}
+
+<style>
+    .message{
+        color:var(--light-text-color)
+    }
+</style>

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

@@ -1,7 +1,20 @@
-<script>
+<script lang="ts">
-	import EmptyCard from "./EmptyCard.svelte";
+	import type { ArticleSummary } from '$lib/posts/types';
+	import EmptyCard from './EmptyCard.svelte';
+	import PostTag from '$lib/posts/PostTag.svelte';
 
+	export let post: ArticleSummary;
 </script>
-<EmptyCard>
 
-</EmptyCard>
+<a href="/posts/{post.slug}">
+	<EmptyCard>
+		<h1 class="post-title">{post.title}</h1>
+		<h2 class="post-date">{post.date}</h2>
+		<br />
+		<p class="post-summary">{post.summary}</p>
+		<br />
+		{#each post.tags as tag}
+			<PostTag {tag} />
+		{/each}
+	</EmptyCard>
+</a>

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

@@ -1,7 +1,14 @@
-<script>
+<script lang="ts">
-	import EmptyCard from "./EmptyCard.svelte";
+	import Logos from '$lib/language-logos/Logos.svelte';
+	import EmptyCard from './EmptyCard.svelte';
 
+	export let project
 </script>
-<EmptyCard>
 
+<a href="/posts/tag/{project.name.toLowerCase()}">
+<EmptyCard>
+		<h1>{project.name}</h1>
+		<Logos langs={project.langs} plats={project.plats} />
+		<p>{project.description}</p>
 </EmptyCard>
+</a>

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

@@ -18,7 +18,7 @@
 
 <EmptyCard>
 	{#await fetchTags()}
-        <p>Loading Tags...</p>
+		<p class="message">Loading Tags...</p>
 	{:then tags}
 		{#each tags as tag}
 			<div class="tag-link">
@@ -26,6 +26,12 @@
 			</div>
 		{/each}
 	{:catch}
-        <p>Unable to load tags</p>
+		<p class="message">Unable to load tags</p>
 	{/await}
 </EmptyCard>
+
+<style>
+	.message {
+		color: var(--light-text-color);
+	}
+</style>

src/routes/+page.svelte

@@ -2,10 +2,12 @@
 	import Latest from '$lib/posts/PostsSummary.svelte';
 	import Header from '$lib/header.svelte';
 	import Emphasis from '$lib/highlights/emphasis.svelte';
-	import LatestPosts from '$lib/posts/PostsSummary.svelte';
+	import LatestPosts from '$lib/card-collections/LatestPosts.svelte';
 	import TagsCard from '$lib/card-collections/cards/TagsCard.svelte';
+	import Projects from '$lib/card-collections/Projects.svelte';
 
 	const title: string = "Hi, I'm Fred";
+	const columnLength = 7;
 </script>
 
 <Header {title} />
@@ -34,9 +36,11 @@
 <section id="meta-links">
 	<div id="projects" class="col">
 		<h1>Projects</h1>
+		<Projects />
 	</div>
 	<div id="posts" class="col">
 		<h1>Posts</h1>
+		<LatestPosts length={columnLength} />
 	</div>
 	<div id="tags" class="col">
 		<h1>Tags</h1>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Projects from '$lib/card-collections/Projects.svelte';
 	import Header from '$lib/header.svelte';
 	import PostTag from '$lib/posts/PostTag.svelte';
 	import type { Article } from '$lib/posts/types';
@@ -53,8 +54,9 @@
 			</content>
 		</article>
 	</div>
+
 	<div class="side-column">
-		<p>HELLO FROM COLUMN 2</p>
+		<Projects />
 	</div>
 </div>
 
@@ -65,6 +67,11 @@
 		gap: 20px;
 	}
 
+	.main-column {
+		margin-left: 10px;
+		margin-right: 10px;
+	}
+
 	@media (min-width: 768px) {
 		.column-container {
 			flex-direction: row; /* Switch to row layout for larger screens */
@@ -74,13 +81,10 @@
 		}
 		.side-column {
 			flex: 1; /* Take up 1/3 of the available width */
+			padding-top: 70px;
 		}
 	}
 
-	span {
-		padding: 5px;
-	}
-
 	:global(article pre) {
 		position: relative;
 		text-align: left;

src/routes/posts/latest/+server.ts

@@ -0,0 +1,15 @@
+import { json } from '@sveltejs/kit';
+import { mongoConnect } from '$lib/database/mongo.server';
+
+import type { ArticleSummary } from '$lib/posts/types';
+
+const length = 8; // Number of posts to return
+
+export async function GET({ url }) {
+	const db = await mongoConnect();
+	const col = db.db('fredboniface').collection('posts');
+	const res = await col.find().sort({ _id: -1 }).limit(2).toArray();
+	return json(res);
+}
+
+// The CONTENT field should be ommitted from the DB response

src/routes/posts/tag/all/+server.ts

@@ -1,7 +1,5 @@
 // Fetches all tags and returns a JSON Array of the tags ordered in their frequency of use
 
-import { error } from '@sveltejs/kit';
-import type { RequestHandler } from '@sveltejs/kit';
 import { json } from '@sveltejs/kit';
 
 import { mongoConnect } from '$lib/database/mongo.server';
@@ -11,6 +9,23 @@ export async function GET({ url }) {
 	const col = db.db('fredboniface').collection('posts');
 	// Fetch all possible array values for 'tags' and creata a local `tags` array to return
 	// For now, a static array is used.
-	const tags = ['svelte', 'sveltekit', 'misc', 'model-rail', 'typescript', 'waffle'];
 	return json(tags);
 }
+
+const tags: string[] = [
+	'svelte',
+	'sveltekit',
+	'python',
+	'bash',
+	'misc',
+	'javascript',
+	'typescript',
+	'go',
+	'node',
+	'express',
+	'mongodb',
+	'redis',
+	'html',
+	'css',
+	'git'
+];

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

@@ -0,0 +1,12 @@
+// Fetches all tags and returns a JSON Array of the tags ordered in their frequency of use
+
+import { json } from '@sveltejs/kit';
+
+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()
+    return json(res)
+}