Further changes

This commit is contained in:
Fred Boniface 2023-08-19 21:56:03 +01:00
parent bff88838d3
commit f0d042910e
18 changed files with 180 additions and 51 deletions

View File

@ -0,0 +1,19 @@
<div class="card-container">
<slot />
</div>
<style>
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
row-gap: 15px;
background-color: var(--overlay-color);
width: 90%;
height: auto;
margin: auto;
padding: 10px 5px 10px 5px;
border-radius: 10px;
}
</style>

View File

@ -0,0 +1,7 @@
<script>
import EmptyCard from "./EmptyCard.svelte";
</script>
<EmptyCard>
</EmptyCard>

View File

@ -0,0 +1,7 @@
<script>
import EmptyCard from "./EmptyCard.svelte";
</script>
<EmptyCard>
</EmptyCard>

View File

@ -0,0 +1,31 @@
<script lang="ts">
import PostTag from '$lib/posts/PostTag.svelte';
import EmptyCard from './EmptyCard.svelte';
async function fetchTags() {
const tags: string[] = [];
const endpoint = '/posts/tag/all';
const res = await fetch(endpoint);
const json = await res.json();
if (Array.isArray(json)) {
for (const item of json) {
tags.push(item);
}
}
return tags;
}
</script>
<EmptyCard>
{#await fetchTags()}
<p>Loading Tags...</p>
{:then tags}
{#each tags as tag}
<div class="tag-link">
<PostTag {tag} />
</div>
{/each}
{:catch}
<p>Unable to load tags</p>
{/await}
</EmptyCard>

View File

@ -1,8 +1,11 @@
:root {
--main-bg-color: lightslategrey;
--accent-color: darkslategrey;
--accent-color: rgb(234, 255, 97);
--accent-rollover: yellow;
--overlay-color: #2f4f4fb8;
--main-text-color: azure;
--light-text-color: azure;
--dark-text-color: rgb(56, 56, 7);
--link-color: cyan;
--link-visited-color: rgb(189, 0, 189);
}
@ -16,6 +19,15 @@
font-style: normal;
}
@font-face {
font-family: 'caprasimo';
src: url('/font/caprasimo-regular.woff2') format('woff2'),
url('/font/caprasimo-regular.woff') format('woff'),
url('/font/caprasimo-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
html {
background-color: var(--main-bg-color);
text-align: center;

View File

@ -13,13 +13,19 @@
<style>
header {
font-family: shadowsintolight;
font-size: 30px;
font-weight: bolder;
margin: 0px;
padding: 0px;
padding-bottom: 5px;
text-align: center;
background-color: var(--accent-color);
}
h1 {
margin-bottom: 0px;
margin: 0;
padding: 0;
padding-top: 5px;
}
h2 {

View File

@ -36,29 +36,31 @@
top: 0;
left: 0;
width: 100%;
height: 30px;
background-color: transparent;
height: 42px;
margin: 0;
padding: 0;
background-color: var(--accent-color);
}
nav a {
float: left;
display: block;
color: rgb(46, 46, 46);
color: var(--dark-text-color);
text-align: center;
padding: 10px 15px;
margin-right: 1px;
text-decoration: none;
font-size: 18px;
font-family: shadowsintolight;
font-family: caprasimo;
font-weight: bolder;
}
nav a:hover {
background-color: slategray;
color: white;
background-color: var(--main-bg-color);
color: var(--light-text-color);
}
nav a:active {
color: slategray;
color: var(--main-bg-color);
}
</style>

View File

@ -0,0 +1,23 @@
<script lang="ts">
export let tag: string;
</script>
<a class="tag-link" href="/posts/tag/{tag}">
{tag}
</a>
<style>
.tag-link {
text-decoration: none;
color: var(--dark-text-color);
padding: 3px 5px 3px 5px;
margin: 10px;
background-color: var(--accent-color);
border-radius: 5px;
}
.tag-link:hover,
.tag-link:active {
background-color: var(--accent-rollover);
}
</style>

View File

@ -3,19 +3,18 @@
import Header from '$lib/header.svelte';
import Emphasis from '$lib/highlights/emphasis.svelte';
import LatestPosts from '$lib/posts/PostsSummary.svelte';
import TagsCard from '$lib/card-collections/cards/TagsCard.svelte';
const title: string = "Hi, I'm Fred";
const subtitle: string = 'Crafting Digital';
</script>
<Header {title} {subtitle} />
<Header {title} />
<section id="welcome">
<div id="header-text">
<div id="text-content">
<p>
Alongside the railway's iron path, I earn my living and fuel my passions. By day, I'm woven
into the rail's story. By night, I craft, design and build tools that work for people. My
canvas? The web, and beyond.
into the rail's story. By night, I craft, design and build tools that work for people.
</p>
<p>
With a family close to heart, I capture life's moments through photography and dabble in
@ -41,6 +40,7 @@
</div>
<div id="tags" class="col">
<h1>Tags</h1>
<TagsCard />
</div>
</section>
@ -138,10 +138,14 @@
#meta-links {
flex-direction: row;
justify-content: space-between;
align-items: center;
align-items: start;
}
.col {
width: 30%;
}
}
h1 {
font-family: caprasimo;
}
</style>

View File

@ -1,4 +1,4 @@
import { mongoConnect } from '$lib/database/mongo';
import { mongoConnect } from '$lib/database/mongo.server';
import { marked } from 'marked';
import * as path from 'path';
import sanitizeHtml from 'sanitize-html';
@ -44,14 +44,14 @@ export async function load({ params }) {
function renderMarkdown(md: string, renderer: _Renderer): string {
const rawHtml = marked(md, { renderer });
console.log(rawHtml)
console.log(rawHtml);
const sanitizedHtml = sanitizeHtml(rawHtml, {
allowedTags: ['a', 'br', 'code', 'figcaption', 'figure', 'img', 'p', 'pre'],
allowedAttributes: {
'a': ['href'],
'img': ['alt', 'class', 'src', 'title']
a: ['href'],
img: ['alt', 'class', 'src', 'title']
}
});
console.log(sanitizedHtml)
return sanitizedHtml
console.log(sanitizedHtml);
return sanitizedHtml;
}

View File

@ -1,5 +1,6 @@
<script lang="ts">
import Header from '$lib/header.svelte';
import PostTag from '$lib/posts/PostTag.svelte';
import type { Article } from '$lib/posts/types';
import { afterUpdate } from 'svelte';
@ -38,23 +39,23 @@
<Header title={post.title} />
<div class="column-container">
<div class="main-column">
<article>
<p>
{#each post.tags as tag}
<span>{tag}</span>
{/each}<br />
{post.date.toLocaleDateString()}<br />
Written by: {post.author}
</p>
<content>
{@html post.content}
</content>
</article>
</div>
<div class="side-column">
<p>HELLO FROM COLUMN 2</p>
</div>
<div class="main-column">
<article>
<p>
{#each post.tags as tag}
<PostTag {tag} />
{/each}<br /><br />
Published: {post.date.toLocaleDateString()}<br />
Author: {post.author}
</p>
<content>
{@html post.content}
</content>
</article>
</div>
<div class="side-column">
<p>HELLO FROM COLUMN 2</p>
</div>
</div>
<style>
@ -65,16 +66,16 @@
}
@media (min-width: 768px) {
.column-container {
flex-direction: row; /* Switch to row layout for larger screens */
}
.main-column {
flex: 2; /* Take up 2/3 of the available width */
}
.side-column {
flex: 1; /* Take up 1/3 of the available width */
}
}
.column-container {
flex-direction: row; /* Switch to row layout for larger screens */
}
.main-column {
flex: 2; /* Take up 2/3 of the available width */
}
.side-column {
flex: 1; /* Take up 1/3 of the available width */
}
}
span {
padding: 5px;

View File

@ -1,4 +1,4 @@
import { mongoConnect } from '$lib/database/mongo';
import { mongoConnect } from '$lib/database/mongo.server';
export async function load({ params }) {
const tag = params.tag;
@ -12,5 +12,5 @@ export async function load({ params }) {
const res = col.find(query);
const posts = await res.toArray();
return { data: JSON.stringify(posts) };
return { data: JSON.stringify(posts), tag: tag };
}

View File

@ -1,14 +1,15 @@
<script lang="ts">
import Header from '$lib/header.svelte';
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);
const title = `tag: ${data.tag}`;
</script>
<h1>Testing</h1>
<Header {title} />
{#each posts as article}
<PostsSummary {article} />

View File

@ -0,0 +1,16 @@
// 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 { mongoConnect } from '$lib/database/mongo.server';
export async function GET({ url }) {
const db = await mongoConnect();
const col = db.db('fredboniface').collection('posts');
// Fetch all possible array values for 'tags' and creata a local `tags` array to return
// For now, a static array is used.
const tags = ['svelte', 'sveltekit', 'misc', 'model-rail', 'typescript', 'waffle'];
return json(tags);
}

Binary file not shown.

Binary file not shown.

Binary file not shown.