Getting there now
This commit is contained in:
parent
c2d3d9006e
commit
f728b54b02
@ -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>
|
||||
|
||||
@ -4,32 +4,29 @@
|
||||
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>
|
||||
</EmptyCard>
|
||||
<EmptyCard>
|
||||
<p class="message">Fetching Projects...</p>
|
||||
</EmptyCard>
|
||||
{:then projects}
|
||||
{#each projects as project}
|
||||
|
||||
<ProjectCard {project} />
|
||||
{/each}
|
||||
{#each projects as project}
|
||||
<ProjectCard {project} />
|
||||
{/each}
|
||||
{:catch}
|
||||
<EmptyCard>
|
||||
<p class="message">Unable to fetch projects</p>
|
||||
</EmptyCard>
|
||||
<EmptyCard>
|
||||
<p class="message">Unable to fetch projects</p>
|
||||
</EmptyCard>
|
||||
{/await}
|
||||
|
||||
<style>
|
||||
.message{
|
||||
color:var(--light-text-color)
|
||||
}
|
||||
.message {
|
||||
color: var(--light-text-color);
|
||||
}
|
||||
</style>
|
||||
@ -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>
|
||||
|
||||
@ -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 />
|
||||
{#each post.tags as tag}
|
||||
<PostTag {tag} />
|
||||
{/each}
|
||||
<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>
|
||||
|
||||
@ -2,13 +2,20 @@
|
||||
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()}">
|
||||
<EmptyCard>
|
||||
<EmptyCard>
|
||||
<h1>{project.name}</h1>
|
||||
<Logos langs={project.langs} plats={project.plats} />
|
||||
<p>{project.description}</p>
|
||||
</EmptyCard>
|
||||
</EmptyCard>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--dark-text-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,21 +17,31 @@
|
||||
</script>
|
||||
|
||||
<EmptyCard>
|
||||
{#await fetchTags()}
|
||||
<p class="message">Loading Tags...</p>
|
||||
{:then tags}
|
||||
{#each tags as tag}
|
||||
<div class="tag-link">
|
||||
<PostTag {tag} />
|
||||
</div>
|
||||
{/each}
|
||||
{:catch}
|
||||
<p class="message">Unable to load tags</p>
|
||||
{/await}
|
||||
<div class="tag-box">
|
||||
{#await fetchTags()}
|
||||
<p class="message">Loading Tags...</p>
|
||||
{:then tags}
|
||||
{#each tags as tag}
|
||||
<div class="tag-link">
|
||||
<PostTag {tag} />
|
||||
</div>
|
||||
{/each}
|
||||
{: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>
|
||||
|
||||
@ -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>
|
||||
© 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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
|
||||
|
||||
@ -6,15 +6,21 @@
|
||||
import DevBanner from '$lib/DevBanner.svelte';
|
||||
</script>
|
||||
|
||||
{#if dev}
|
||||
<DevBanner />
|
||||
{/if}
|
||||
<div id="page-content">
|
||||
{#if dev}
|
||||
<DevBanner />
|
||||
{/if}
|
||||
|
||||
<Navigation />
|
||||
|
||||
<slot />
|
||||
|
||||
<Footer />
|
||||
<Navigation />
|
||||
<slot />
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#page-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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 */
|
||||
}
|
||||
|
||||
@ -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} />
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
import type { Project } from '$lib/projects/types';
|
||||
|
||||
export async function load({ params }) {
|
||||
// Fetch all projects
|
||||
}
|
||||
@ -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}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user