Post tags working

src/hook.server.ts

@@ -1,5 +0,0 @@
-import { initMongo } from "$lib/database";
-
-initMongo().then(() => {
-	console.log('Mongo started');
-}).catch(e => {console.error(e)})

src/lib/articles/latest.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-	export let numbers: number = 4;
-
-	const articles = ['one', 'two', 'three', 'four'];
-</script>
-
-{#each articles as article}
-	<div class="article">
-		<h1>This is Title {article}</h1>
-		<p>This is blurb {article}</p>
-	</div>
-{/each}
-
-<style>
-	.article {
-		background-color: blueviolet;
-		height: 100px;
-		width: 95%;
-		margin: auto;
-	}
-</style>

src/lib/content-boxes/FullWidthContent.svelte

@@ -10,6 +10,7 @@
 		background-color: var(--main-text-color);
 		color: rgb(46, 46, 46);
 		margin: 0;
+		margin-bottom: 10px;
 		padding: 0;
 	}
 	div {

src/lib/database.ts

@@ -1,12 +0,0 @@
-import { MongoClient } from "mongodb";
-
-const MongoUri = ""
-const MongoDatabase = ""
-
-const Client = new MongoClient(MongoUri)
-
-export async function initMongo() {
-    Client.connect()
-}
-
-export default Client.db(MongoDatabase)

src/lib/database/mongo.ts

@@ -0,0 +1,12 @@
+import { MongoClient } from 'mongodb';
+
+const MongoUri = 'mongodb://owl:twittwoo@localhost:27017/';
+
+let dbClient: MongoClient | null = null;
+
+export async function mongoConnect() {
+	if (!dbClient) {
+		dbClient = await MongoClient.connect(MongoUri)
+	}
+	return dbClient
+}

src/lib/language-logos/Logos.svelte

@@ -26,4 +26,8 @@
 		padding-left: 5px;
 		padding-right: 5px;
 	}
+
+	a {
+		text-decoration: none;
+	}
 </style>

src/lib/posts/PostsSummary.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { ArticleSummary } from "./types";
+	import FullWidthContent from "$lib/content-boxes/FullWidthContent.svelte";
+
+	export let article: ArticleSummary
+</script>
+
+<FullWidthContent>
+	<a href="/posts/{article.slug}">
+<article>
+	<h1>{article.title}</h1>
+	<p>{article.summary}</p>
+</article>
+</a>
+</FullWidthContent>
+
+<style>
+	a {
+		text-decoration: none;
+		color: black;
+	}
+	article {
+		height: auto;
+		width: 100%;
+		margin: auto;
+		padding-top: 1px;
+		padding-bottom: 5px;
+	}
+
+	h1 {
+		margin-left: 10px;
+		margin-right: 10px;
+		font-family: shadowsintolight;
+	}
+
+	p {
+		margin-left: 10px;
+		margin-right: 10px;
+	}
+</style>

src/lib/posts/types.ts

@@ -0,0 +1,20 @@
+export interface ArticleSummary {
+    title: string;
+    author: string;
+    tags: string[];
+    pusblished: boolean;
+    date: Date;
+    summary: string;
+    slug: string;
+}
+
+export interface Article {
+    title: string;
+    author: string;
+    tags: string[];
+    pusblished: boolean;
+    date: Date;
+    summary: string;
+    slug: string;
+    content: string;
+}

src/lib/projects/ProjectSummary.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { Project } from "./types";
+    import Logos from "$lib/language-logos/Logos.svelte";
+
+	export let project: Project
+</script>
+
+<article>
+	<a href="/posts/tag/{project.tag}"><h1>{project.name}</h1></a>
+    <Logos langs={project.lang || []} plats={project.plat || []} />
+	<p>{project.summary}</p>
+</article>
+
+<style>
+	article {
+		height: auto;
+		width: 100%;
+		margin: auto;
+	}
+
+	h1 {
+		margin-left: 10px;
+		margin-right: 10px;
+	}
+
+	p {
+		margin-left: 10px;
+		margin-right: 10px;
+	}
+</style>

src/lib/projects/fetch.ts

@@ -1,10 +0,0 @@
-import type { Project } from './types';
-
-export async function fetchProjects(number: number | string): Promise<Project[]> {
-	if (number === 'all') {
-		// Fetch All Projects
-	} else if (typeof number === 'number') {
-		// Fetch {number} random projects
-	}
-	return [];
-}

src/lib/projects/types.ts

@@ -3,4 +3,6 @@ export interface Project {
 	tag: string;
 	imagePath: string;
 	summary: string;
+	lang: string[];
+	plat: string[];
 }

src/routes/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import Latest from '$lib/articles/latest.svelte';
+	import Latest from '$lib/posts/PostsSummary.svelte';
 	import Header from '$lib/header.svelte';
 	import Emphasis from '$lib/highlights/emphasis.svelte';
-	import Layout from './+layout.svelte';
+	import LatestPosts from '$lib/posts/PostsSummary.svelte';
 
 	const title: string = "Hi, I'm Fred";
 	const subtitle: string = 'Crafting Digital';
@@ -35,15 +35,15 @@
 <section id="meta-links">
 	<div id="projects" class="col">
 		<h1>Projects</h1>
-		<Latest numbers={1} />
+		
 	</div>
 	<div id="posts" class="col">
 		<h1>Posts</h1>
-		<Latest />
+		
 	</div>
 	<div id="tags" class="col">
 		<h1>Tags</h1>
-		<Latest />
+		
 	</div>
 </section>
 

src/routes/posts/[slug]/+page.server.ts

@@ -0,0 +1,14 @@
+import { mongoConnect } from "$lib/database/mongo";
+
+export async function load({ params }) {
+	const slug = params.slug;
+	const db = await mongoConnect()
+	const query = {
+		 slug: slug
+		}
+	const col = db.db('fredboniface').collection('posts')
+	const res = col.findOne(query)
+	const posts = await res
+
+	return {data: JSON.stringify(posts)}	   
+}

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

@@ -1,11 +1,23 @@
 <script lang="ts">
-	export let data;
-	const { title, date, author, Content } = data;
+	import Header from "$lib/header.svelte";
+import type { Article } from "$lib/posts/types";
+
+	export let data: any;
+
+	const post: Article = JSON.parse(data.data)
 </script>
 
 <article>
-	<h1>{title}</h1>
-	<p>Published: {date}</p>
-	<p>Author: {author}</p>
-	<Content />
+<Header title={post.title} />
+	<p>{#each post.tags as tag}
+	<span>{tag}</span>
+	{/each}<br>
+	{post.date}<br>
+	{post.author}</p>
 </article>
+
+<style>
+	span {
+		padding: 5px;
+	}
+</style>

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

@@ -1,27 +0,0 @@
-interface PostData {
-	Content: ConstructorOfATypedSvelteComponent;
-	title: string;
-	date: string;
-	author: string;
-}
-
-const defaultSlug = 'notFound';
-
-export async function load({ params }) {
-	let post;
-	try {
-		post = await import(`../markdown/${params.slug}.md`);
-	} catch {
-		post = await import(`../markdown/${defaultSlug}.md`);
-	}
-	const { title, date, author } = post.metadata;
-	const Content = post.default;
-
-	const postData: PostData = {
-		Content,
-		title,
-		date,
-		author
-	};
-	return postData;
-}

src/routes/posts/tag/[tag]/+page.server.ts

@@ -0,0 +1,19 @@
+import { mongoConnect } from "$lib/database/mongo";
+
+
+export async function load({ params }) {
+	const tag = params.tag;
+	const db = await mongoConnect()
+	const query = {
+		 tags: {
+		  $in: [
+		   tag
+		  ]
+		 }
+		}
+	const col = db.db('fredboniface').collection('posts')
+	const res = col.find(query)
+	const posts = await res.toArray()
+
+	return {data: JSON.stringify(posts)}	   
+}

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import PostsSummary from "$lib/posts/PostsSummary.svelte";
+	import type { ArticleSummary } from "$lib/posts/types.js";
+
+	export let data;
+	const posts: ArticleSummary[] = JSON.parse(data.data)
+
+    console.log("Posts:", posts)
+</script>
+
+<h1>Testing</h1>
+
+{#each posts as article}
+    <PostsSummary {article} />
+{/each}

src/routes/posts/tags/[slug]/+page.server.ts

@@ -1,27 +0,0 @@
-interface PostData {
-	Content: ConstructorOfATypedSvelteComponent;
-	title: string;
-	date: string;
-	author: string;
-}
-
-const defaultSlug = 'notFound';
-
-export async function load({ params }) {
-	let post;
-	try {
-		post = await import(`../markdown/${params.slug}.md`);
-	} catch {
-		post = await import(`../markdown/${defaultSlug}.md`);
-	}
-	const { title, date, author } = post.metadata;
-	const Content = post.default;
-
-	const postData: PostData = {
-		Content,
-		title,
-		date,
-		author
-	};
-	return postData;
-}

src/routes/projects/+page.svelte

@@ -10,7 +10,7 @@
 <Header {title} />
 <main>
 	<FullWidthContent>
-		<h1><a href="/articles/owlboard">OwlBoard</a></h1>
+		<h1><a href="/posts/tag/owlboard">OwlBoard</a></h1>
 		<br />
 		<GitLink url={'https://git.fjla.uk/owlboard'} />
 		<Logos
@@ -20,12 +20,13 @@
 		<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. <a href="">Read more...</a>
+			information that frontline rail colleagues need.
 		</p>
 	</FullWidthContent>
 	<FullWidthContent>
-		<h1><a href="/articles/map-dots">map-dots</a></h1>
+		<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