use strapi client, use locals for strapi url
All checks were successful
Deployment / Deploy website (push) Successful in 2m56s
Deployment / Deploy strapi (push) Successful in 3m21s

This commit is contained in:
Benjamin Palko 2025-05-06 11:53:45 -04:00
parent 817c3a78ac
commit 0e94cb95ca
11 changed files with 144 additions and 110 deletions

View file

@ -1,24 +1,37 @@
import { env } from '$env/dynamic/private';
import { strapi } from '@strapi/client';
import type { PageServerLoad } from './$types';
export const load: PageServerLoad = async ({ params }) => {
export const load: PageServerLoad = async ({ locals, 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 { Strapi } = locals;
const { data, meta } = await response.json();
const client = strapi({
baseURL: Strapi.url,
auth: env.STRAPI_TOKEN
});
console.log(JSON.stringify(data, null, 2));
const blogs = client.collection('blogs');
const { data: post, meta } = await blogs.findOne(slug, {
populate: ['Header', 'Topics']
});
return {
post: data,
post: {
id: post.documentId,
image: {
url: `${Strapi.url}${post.Header.url}`,
alt: post.Header.alternativeText
},
title: post.Title,
body: post.Body,
topics: post.Topics.map((topic: { id: string; Topic: string }) => ({
id: topic.id,
name: topic.Topic
})),
published: post.publishedAt
},
meta
};
};

View file

@ -11,16 +11,16 @@
<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>
<p class="text-gray-500">{dayjs(post.published).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}
src={`${env.PUBLIC_STRAPI_HOST}${post.image.url}`}
alt={post.image.alt}
/>
<div class="w-full max-w-5xl px-4">
{#await compile(post.Body)}
{#await compile(post.body)}
<div class="skeleton h-48 w-full"></div>
{:then content}
<!-- eslint-disable-next-line svelte/no-at-html-tags -->