blog (#4)
Co-authored-by: Benjamin Palko <benjaminpalko@hotmail.com> Reviewed-on: #4
This commit is contained in:
parent
b2844e8d76
commit
14fe55bb31
18 changed files with 3164 additions and 30 deletions
48
src/lib/components/BlogCard.svelte
Normal file
48
src/lib/components/BlogCard.svelte
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<script lang="ts">
|
||||
import dayjs from 'dayjs';
|
||||
import { Link } from 'lucide-svelte';
|
||||
|
||||
interface Props {
|
||||
documentId: string;
|
||||
img: string;
|
||||
'img-alt': string | null;
|
||||
title: string;
|
||||
published: string;
|
||||
topics: { id: number; Topic: string }[];
|
||||
}
|
||||
|
||||
let { documentId, img, 'img-alt': alt, title, published, topics }: Props = $props();
|
||||
|
||||
let blogLink = $derived(`/blog/${documentId}`);
|
||||
</script>
|
||||
|
||||
<div class="card">
|
||||
<figure class="rounded-box group">
|
||||
<div class="absolute top-4 left-4 z-10 flex gap-2">
|
||||
{#each topics as topic (topic.id)}
|
||||
<div class="badge badge-soft badge-info">{topic.Topic}</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="absolute z-10 opacity-0 transition-opacity group-hover:opacity-75">
|
||||
<Link size={32} />
|
||||
</div>
|
||||
<a href={blogLink}>
|
||||
<img
|
||||
class="z-0 aspect-4/2 w-full object-cover transition-transform group-hover:scale-110 group-hover:blur-xs"
|
||||
src={img}
|
||||
{alt}
|
||||
/>
|
||||
</a>
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<div class="card-actions justify-between">
|
||||
<div>
|
||||
<p class="text-xs font-light text-gray-500">
|
||||
Published {dayjs(published).format('DD MMMM YYYY')}
|
||||
</p>
|
||||
<h2 class="card-title text-xl">{title}</h2>
|
||||
</div>
|
||||
<a href={blogLink} class="btn btn-primary">Read Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
<div class="drawer-content h-screen w-screen lg:p-12">
|
||||
<div
|
||||
class="bg-base-200 grid min-h-full grid-rows-[max-content_max-content_auto_max-content] overflow-hidden lg:gap-4 lg:rounded-4xl"
|
||||
class="bg-base-200 mx-auto grid min-h-full max-w-7xl grid-rows-[max-content_max-content_auto_max-content] overflow-hidden shadow-md lg:gap-4 lg:rounded-4xl"
|
||||
>
|
||||
<header class="lg:p-6">
|
||||
<Navbar drawerId="navigation-drawer" title="Benjamin Palko" {pages} route={page.route} />
|
||||
|
|
@ -66,14 +66,14 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="drawer-side">
|
||||
<div class="drawer-side z-50">
|
||||
<label for="navigation-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
|
||||
<div class="menu bg-base-200 flex min-h-full w-full flex-col justify-between p-4">
|
||||
<ul class="flex flex-col gap-4">
|
||||
{#each pages as page (page.slug)}
|
||||
<li>
|
||||
<button
|
||||
class="btn btn-primary btn-soft btn-lg"
|
||||
class="btn btn-primary btn-outline btn-lg"
|
||||
onclick={() => {
|
||||
goto(page.slug);
|
||||
drawerOpen = false;
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
<span class="text-base-content font-semibold">Benjamin</span>
|
||||
Palko
|
||||
</h2>
|
||||
<label for="navigation-drawer" class="btn btn-error btn-soft btn-lg">Close</label>
|
||||
<label for="navigation-drawer" class="btn btn-accent btn-outline btn-lg">Close</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
89
src/routes/blog/+page.server.ts
Normal file
89
src/routes/blog/+page.server.ts
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
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
|
||||
};
|
||||
};
|
||||
|
|
@ -1,5 +1,26 @@
|
|||
<script>
|
||||
import Wip from '$lib/components/WIP.svelte';
|
||||
<script lang="ts">
|
||||
import { env } from '$env/dynamic/public';
|
||||
import BlogCard from '$lib/components/BlogCard.svelte';
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
let { data }: PageProps = $props();
|
||||
|
||||
let posts = $derived(data.posts);
|
||||
</script>
|
||||
|
||||
<Wip />
|
||||
{#if posts.length === 0}
|
||||
<h3 class="text-center text-lg font-semibold">Looks like I haven't posted anything yet!</h3>
|
||||
{/if}
|
||||
|
||||
<div class="mx-auto grid gap-8 px-3 py-3 sm:px-8 sm:py-4 lg:grid-cols-2">
|
||||
{#each posts as post (post.id)}
|
||||
<BlogCard
|
||||
documentId={post.documentId}
|
||||
img={`${env.PUBLIC_STRAPI_HOST}${post.Header.formats.medium.url}`}
|
||||
img-alt={post.Header.alternativeText}
|
||||
title={post.Title}
|
||||
published={post.publishedAt}
|
||||
topics={post.Topics}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
24
src/routes/blog/[slug]/+page.server.ts
Normal file
24
src/routes/blog/[slug]/+page.server.ts
Normal file
|
|
@ -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
|
||||
};
|
||||
};
|
||||
30
src/routes/blog/[slug]/+page.svelte
Normal file
30
src/routes/blog/[slug]/+page.svelte
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<script lang="ts">
|
||||
import dayjs from 'dayjs';
|
||||
import type { PageProps } from './$types';
|
||||
import { compile } from 'mdsvex';
|
||||
import { env } from '$env/dynamic/public';
|
||||
|
||||
let { data }: PageProps = $props();
|
||||
|
||||
let post = $derived(data.post);
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<div class="w-full max-w-5xl px-4">
|
||||
<p class="text-gray-500">{dayjs(post.createdAt).format('DD MMMM YYYY')}</p>
|
||||
<h1 class="text-4xl font-light">{post.Title}</h1>
|
||||
</div>
|
||||
<img
|
||||
class="aspect-4/2 w-full object-cover"
|
||||
src={`${env.PUBLIC_STRAPI_HOST}${post.Header.formats.medium.url}`}
|
||||
alt={post.Header.alternativeText}
|
||||
/>
|
||||
<div class="w-full max-w-5xl px-4">
|
||||
{#await compile(post.Body)}
|
||||
<div class="skeleton h-48 w-full"></div>
|
||||
{:then content}
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
{@html content?.code}
|
||||
{/await}
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue