Post tags working

This commit is contained in:
Fred Boniface 2023-08-17 22:18:50 +01:00
parent f430b3d532
commit 14b1bc3736
21 changed files with 184 additions and 116 deletions

View File

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

View File

@ -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>

View File

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

View File

@ -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)

12
src/lib/database/mongo.ts Normal file
View File

@ -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
}

View File

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

View File

@ -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>

20
src/lib/posts/types.ts Normal file
View File

@ -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;
}

View File

@ -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>

View File

@ -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 [];
}

View File

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

View File

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

View File

@ -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)}
}

View File

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

View File

@ -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;
}

View File

@ -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)}
}

View File

@ -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}

View File

@ -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;
}

View File

@ -10,7 +10,7 @@
<Header {title} /> <Header {title} />
<main> <main>
<FullWidthContent> <FullWidthContent>
<h1><a href="/articles/owlboard">OwlBoard</a></h1> <h1><a href="/posts/tag/owlboard">OwlBoard</a></h1>
<br /> <br />
<GitLink url={'https://git.fjla.uk/owlboard'} /> <GitLink url={'https://git.fjla.uk/owlboard'} />
<Logos <Logos
@ -20,12 +20,13 @@
<p> <p>
Working full time on the 'iron road', left me wanting a faster way to get the information I 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 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> </p>
</FullWidthContent> </FullWidthContent>
<FullWidthContent> <FullWidthContent>
<h1><a href="/articles/map-dots">map-dots</a></h1> <h1><a href="/posts/tag/map-dots">map-dots</a></h1>
<br /> <br />
<GitLink url={"https://git.fjla.uk/fred.boniface/map-dots"} />
<Logos langs={['go', 'py']} plats={[]} /> <Logos langs={['go', 'py']} plats={[]} />
<p> <p>
I like to collect data, I am just not always sure what to do with that data. map-dots takes in I like to collect data, I am just not always sure what to do with that data. map-dots takes in