More functional work

This commit is contained in:
Fred Boniface 2023-08-21 21:38:13 +01:00
parent f0d042910e
commit c2d3d9006e
10 changed files with 163 additions and 22 deletions

View File

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

View File

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

View File

@ -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> </script>
<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> </EmptyCard>
</a>

View File

@ -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> </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> </EmptyCard>
</a>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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