59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import { createSignal, For, Show } from "solid-js";
|
|
import {
|
|
cache,
|
|
createAsync,
|
|
A,
|
|
type RouteDefinition,
|
|
useParams,
|
|
} from "@solidjs/router";
|
|
|
|
const getPost = cache(async (slug) => {
|
|
"use server";
|
|
return await fetch(`https://content.dd-ix.net/news/en/${slug}`).then((data) =>
|
|
data.json()
|
|
);
|
|
}, "news-post");
|
|
|
|
export const route = {
|
|
load: ({ params }) => {
|
|
getPost(params.slug);
|
|
},
|
|
} satisfies RouteDefinition;
|
|
|
|
export default () => {
|
|
const params = useParams();
|
|
const post = createAsync(() => getPost(params.slug));
|
|
|
|
return (
|
|
<main>
|
|
<div class="relative">
|
|
<img
|
|
src={`https://content.dd-ix.net/news/assets/${post()?.image}`}
|
|
alt={post()?.title}
|
|
class="min-h-[30vh] max-h-[70vh] w-full object-cover"
|
|
/>
|
|
{/* <h1 class="absolute bottom-0 left-0 p-4 backdrop-blur text-white drop-shadow-md bg-gray-800/40">{post()?.title}</h1> */}
|
|
</div>
|
|
<div class="container mx-auto p-4">
|
|
<article>
|
|
<h1>{post()?.title}</h1>
|
|
<div class="flex gap-2">
|
|
<For each={post()?.keywords}>
|
|
{(tag) => <div class="badge badge-secondary">{tag}</div>}
|
|
</For>
|
|
</div>
|
|
<p>
|
|
{new Date(post()?.published).toLocaleDateString("us-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})}{" "}
|
|
by {post()?.authors.join(", ")}
|
|
</p>
|
|
<div innerHTML={post()?.body} />
|
|
</article>
|
|
</div>
|
|
</main>
|
|
);
|
|
};
|