Individual blogPosts - Server + page + Layout
This commit is contained in:
parent
74987b8408
commit
8c425f89c8
|
@ -0,0 +1,3 @@
|
||||||
|
<article class="text-token prose prose-slate mx-auto dark:prose-invert lg:prose-lg">
|
||||||
|
<slot />
|
||||||
|
</article>
|
|
@ -1,63 +1,69 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { formatDate } from '$content/utils';
|
import SEO from '$lib/components/SEO/index.svelte';
|
||||||
import '$lib/assets/prism-nord.css';
|
import '$lib/assets/prism-nord.css';
|
||||||
|
import type { Post } from '$lib/types/post';
|
||||||
|
import Tags from '$lib/components/blog/Tags.svelte';
|
||||||
|
|
||||||
export let imagesDirectoryName: string;
|
export let post: Post;
|
||||||
export let excerpt: string = '';
|
|
||||||
export let date: string = '';
|
const {
|
||||||
export let slug: string = '';
|
postTitle,
|
||||||
export let title: string;
|
datePublished,
|
||||||
export let image: string;
|
featuredImage,
|
||||||
export let tags: string[] = [];
|
featuredImageAlt,
|
||||||
export let type: 'blog' | 'projects';
|
lastUpdated,
|
||||||
|
seoMetaDescription: metadescription,
|
||||||
|
slug,
|
||||||
|
timeToRead,
|
||||||
|
ogImage,
|
||||||
|
ogSquareImage,
|
||||||
|
twitterImage
|
||||||
|
} = post || {};
|
||||||
|
|
||||||
|
const breadcrumbs = [
|
||||||
|
{ name: 'Home', slug: '' },
|
||||||
|
{ name: 'type', slug: post.type },
|
||||||
|
{ name: postTitle, slug }
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<SEO
|
||||||
<title>{title}</title>
|
article
|
||||||
<meta name="description" content={excerpt} />
|
{breadcrumbs}
|
||||||
<meta property="og:title" content={title} />
|
{slug}
|
||||||
<meta property="og:type" content="article" />
|
{postTitle}
|
||||||
<meta property="og:description" content={excerpt} />
|
{datePublished}
|
||||||
<meta property="og:url" content="https://mattmor.in/{slug}" />
|
{lastUpdated}
|
||||||
<meta property="og:image" content={image} />
|
{metadescription}
|
||||||
<meta property="og:type" content="article:published_time" />
|
{timeToRead}
|
||||||
<meta property="article:published_time" content={date} />
|
{featuredImage}
|
||||||
{#each tags as tag (tag)}
|
{ogImage}
|
||||||
<meta property="article:tag" content={tag} />
|
{ogSquareImage}
|
||||||
{/each}
|
{twitterImage}
|
||||||
</svelte:head>
|
/>
|
||||||
|
|
||||||
<article class="flex justify-center mt-4 mb-8">
|
<section class="flex justify-center mt-4 mb-8">
|
||||||
<div class=" w-full md:w-[50rem] leading-[177.7%]">
|
<div
|
||||||
|
class=" w-full md:w-[50rem] leading-[177.7%] bg-white/50 dark:bg-black/50 m-2 rounded-t-lg mx-auto"
|
||||||
|
>
|
||||||
<header>
|
<header>
|
||||||
<img
|
<img
|
||||||
src="/images/{imagesDirectoryName}/{slug}/{image}"
|
src={featuredImage}
|
||||||
alt={`${title}`}
|
alt={featuredImageAlt}
|
||||||
class=" bg-black/50 w-full aspect-[21/9] max-h-[540px] rounded-t-lg"
|
class=" w-full aspect-[21/9] max-h-[540px] rounded-t-lg"
|
||||||
/>
|
/>
|
||||||
</header>
|
</header>
|
||||||
<div class="flex-auto flex justify-between items-center py-4 px-2 bg-surface-900">
|
<Tags {post} />
|
||||||
{#if tags && tags.length > 0}
|
<div class="space-y-4 m-8">
|
||||||
<div class="flex mb-2 items-center gap-2">
|
<h2 class="h2" data-toc-ignore>{post.title}</h2>
|
||||||
tags: {#each tags as tag}
|
<div class="max-w-none md:w-[720px]">
|
||||||
<a
|
|
||||||
data-sveltekit-preload-data="hover"
|
|
||||||
href="/blog?{new URLSearchParams({ tag }).toString()}"
|
|
||||||
>
|
|
||||||
<span class="chip variant-ghost-surface">{tag}</span>
|
|
||||||
</a>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<small>On {formatDate(date)}</small>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<h2 class="h2" data-toc-ignore>{title}</h2>
|
|
||||||
<div class="max-w-none text-token">
|
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr class="opacity-50" />
|
<hr class="opacity-50" />
|
||||||
<footer class="p-4 flex justify-start items-center space-x-4" />
|
<footer class="p-4 flex justify-start items-center space-x-4" />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</section>
|
||||||
|
|
||||||
|
<style lang="postcss">
|
||||||
|
</style>
|
||||||
|
|
|
@ -1,16 +1,10 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import BlogContentLayout from '$lib/components/blog/BlogContentLayout.svelte';
|
import PostLayout from '$lib/components/blog/PostLayout.svelte';
|
||||||
import type { PageData } from './$types';
|
import type { PageData } from '../$types';
|
||||||
|
|
||||||
export let data: PageData;
|
export let data: PageData;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- <svelte:head>
|
<PostLayout post={data.meta}>
|
||||||
<title>{data.post.title}</title>
|
<svelte:component this={data.content} />
|
||||||
<meta property="og:type" content="article" />
|
</PostLayout>
|
||||||
<meta property="og:title" content={data.post.title} />
|
|
||||||
</svelte:head> -->
|
|
||||||
|
|
||||||
<BlogContentLayout post={data.post}>
|
|
||||||
<svelte:component this={data.Component} />
|
|
||||||
</BlogContentLayout>
|
|
||||||
|
|
|
@ -1,14 +1,19 @@
|
||||||
import { getPost, listPosts } from '$content/blog';
|
import type { PageServerLoad } from './$types';
|
||||||
import type { PageLoad } from './$types';
|
|
||||||
|
|
||||||
export const entries = async () => {
|
import { error } from '@sveltejs/kit';
|
||||||
const posts = await listPosts();
|
|
||||||
return posts
|
|
||||||
.filter((post) => post.slug !== undefined)
|
|
||||||
.map((post) => ({ slug: post.slug as string }));
|
|
||||||
};
|
|
||||||
|
|
||||||
export const load: PageLoad = async ({ params, parent }) => {
|
export const load: PageServerLoad = async ({ params }) => {
|
||||||
await parent();
|
try {
|
||||||
return await getPost(params.slug);
|
const post = await import(`../../../content/blog/${params.slug}.md`);
|
||||||
|
|
||||||
|
return {
|
||||||
|
content: post.default,
|
||||||
|
meta: post.metadata
|
||||||
|
};
|
||||||
|
} catch (err) {
|
||||||
|
if (err.status === 404) {
|
||||||
|
error(404, `Could not find ${params.slug}`);
|
||||||
|
}
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue