fred.boniface/fredboniface.co.uk-svelte
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Getting there now

Browse Source
This commit is contained in:
Fred Boniface 2023-08-21 23:08:13 +01:00
parent c2d3d9006e
commit f728b54b02
16 changed files with 150 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/card-collections/LatestPosts.svelte
View File

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

15
src/lib/card-collections/Projects.svelte
View File

@ -4,22 +4,19 @@
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
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>
<p class="message">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>

9
src/lib/card-collections/cards/EmptyCard.svelte
View File

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

18
src/lib/card-collections/cards/PostCard.svelte
View File

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

9
src/lib/card-collections/cards/ProjectCard.svelte
View File

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

10
src/lib/card-collections/cards/TagsCard.svelte
View File

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

34
src/lib/footer.svelte
View File

@ -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;
bottom: 0;
height: auto;
}
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 {
position: fixed;
bottom: 0;
left: 0;
}
footer p {
padding-top: 0px;
margin-top: 6px;
}
.link-image {
height: 20px;
}
</style>

8
src/lib/header.svelte
View File

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

4
src/lib/language-logos/Logos.svelte
View File

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

10
src/routes/+layout.svelte
View File

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

8
src/routes/+page.svelte
View File

@ -89,9 +89,7 @@
margin: auto;
margin-top: 10px;
border-radius: 100px;
border-style: solid;
border-color: var(--accent-color);
border-width: 3px;
border: none;
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 */
}

12
src/routes/posts/+page.svelte
View File

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

5
src/routes/posts/[slug]/+page.svelte
View File

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

5
src/routes/projects/+page.server.ts
View File

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

51
src/routes/projects/+page.svelte
View File

@ -1,45 +1,22 @@
<script lang="ts">
import GitLink from '$lib/GitLink.svelte';
import FullWidthContent from '$lib/content-boxes/FullWidthContent.svelte';
import ProjectCard from '$lib/card-collections/cards/ProjectCard.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>
h1 {
margin-bottom: 8px;
padding-top: 5px;
font-family: shadowsintolight;
}
</style>
{#await getProjects()}
<p class="messages">Fetching projects</p>
{:then projects}
{#each projects as project}
<ProjectCard {project} />
{/each}
{:catch}
<p class="messages">Error fetching projects</p>
{/await}

4
src/routes/projects/all/+server.ts
View File

@ -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()
return json(res)
const res = await col.find().toArray();
return json(res);
}