From 54b80494889659268502ec9263f6f98614664c31 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Mon, 5 May 2025 12:32:28 -0400 Subject: [PATCH] add blog to app --- src/lib/components/BlogCard.svelte | 48 ++++++++++++++ src/routes/+layout.svelte | 4 +- src/routes/blog/+page.server.ts | 90 ++++++++++++++++++++++++++ src/routes/blog/+page.svelte | 27 +++++++- src/routes/blog/[slug]/+page.server.ts | 24 +++++++ src/routes/blog/[slug]/+page.svelte | 29 +++++++++ 6 files changed, 217 insertions(+), 5 deletions(-) create mode 100644 src/lib/components/BlogCard.svelte create mode 100644 src/routes/blog/+page.server.ts create mode 100644 src/routes/blog/[slug]/+page.server.ts create mode 100644 src/routes/blog/[slug]/+page.svelte diff --git a/src/lib/components/BlogCard.svelte b/src/lib/components/BlogCard.svelte new file mode 100644 index 0000000..2375d5c --- /dev/null +++ b/src/lib/components/BlogCard.svelte @@ -0,0 +1,48 @@ + + +
+
+
+ {#each topics as topic (topic.id)} +
{topic.Topic}
+ {/each} +
+
+ +
+ + + +
+
+
+
+

+ Published {dayjs(published).format('DD MMMM YYYY')} +

+

{title}

+
+ Read Now +
+
+
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index b1b29b6..2b4aea0 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -34,7 +34,7 @@
@@ -66,7 +66,7 @@
-
+
    diff --git a/src/routes/blog/+page.server.ts b/src/routes/blog/+page.server.ts new file mode 100644 index 0000000..8102c24 --- /dev/null +++ b/src/routes/blog/+page.server.ts @@ -0,0 +1,90 @@ +import { env } from "$env/dynamic/private"; +import type { PageServerLoad } from "./$types"; + +type Dates = { + createdAt: string; + updateAt: string; + publishedAt: string; +}; + +interface BlogPost extends Dates { + id: number; + documentId: string; + Title: string; + Header: Image; + Body: string; + Topics: Topic[]; +} + +interface Topic { + id: number; + Topic: string; +} + +interface ImageFormat { + ext: string; + url: string; + hash: string; + mime: string; + name: string; + path: unknown; + size: number; + width: number; + height: number; + sizeInBytes: number; +} + +interface Image extends Dates { + id: number; + documentId: string; + name: string; + alternativeText: string | null; + caption: string | null; + width: string; + height: string; + formats: { + large: ImageFormat; + medium: ImageFormat; + small: ImageFormat; + thumbnail: ImageFormat; + }; + hash: string; + ext: string; + mime: string; + size: number; + url: string; + previewUrl: string | null; + provider: string; + provider_metadata: unknown | null; +} + +interface Meta { + pagingation: { + page: number; + pageSize: number; + pageCount: number; + total: number; + }; +} + +export const load: PageServerLoad = async () => { + const response = await fetch( + `http://${env.STRAPI_HOST}:${env.STRAPI_PORT}/api/blogs?populate=Header&populate=Topics`, + { + method: "GET", + headers: { + Authorization: `bearer ${env.STRAPI_TOKEN}`, + }, + }, + ); + + const { data, meta }: { data: BlogPost[]; meta: Meta } = + await response.json(); + + console.log(JSON.stringify(data, null, 2)); + + return { + posts: data, + meta, + }; +}; diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte index fa5b5fa..a6deb81 100644 --- a/src/routes/blog/+page.svelte +++ b/src/routes/blog/+page.svelte @@ -1,5 +1,26 @@ - - +{#if posts.length === 0} +

    Looks like I haven't posted anything yet!

    +{/if} + +
    + {#each posts as post (post.id)} + + {/each} +
    diff --git a/src/routes/blog/[slug]/+page.server.ts b/src/routes/blog/[slug]/+page.server.ts new file mode 100644 index 0000000..1cd068b --- /dev/null +++ b/src/routes/blog/[slug]/+page.server.ts @@ -0,0 +1,24 @@ +import { env } from "$env/dynamic/private"; +import type { PageServerLoad } from "./$types"; + +export const load: PageServerLoad = async ({ params }) => { + const { slug } = params; + const response = await fetch( + `http://${env.STRAPI_HOST}:${env.STRAPI_PORT}/api/blogs/${slug}?populate=Header&populate=Topics`, + { + method: "GET", + headers: { + Authorization: `bearer ${env.STRAPI_TOKEN}`, + }, + }, + ); + + const { data, meta } = await response.json(); + + console.log(JSON.stringify(data, null, 2)); + + return { + post: data, + meta, + }; +}; diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte new file mode 100644 index 0000000..e7cef36 --- /dev/null +++ b/src/routes/blog/[slug]/+page.svelte @@ -0,0 +1,29 @@ + + +
    +
    +

    {dayjs(post.createdAt).format('DD MMMM YYYY')}

    +

    {post.Title}

    +
    + {post.Header.alternativeText} +
    + {#await compile(post.Body)} +
    + {:then content} + {@html content?.code} + {/await} +
    +