65 lines
1.9 KiB
Plaintext
65 lines
1.9 KiB
Plaintext
---
|
|
import Layout from '../../layouts/Layout.astro';
|
|
import { marked } from 'marked';
|
|
|
|
const { slug } = Astro.params;
|
|
const API_URL = (typeof process !== 'undefined' ? process.env.PUBLIC_API_URL : import.meta.env.PUBLIC_API_URL) || 'http://localhost:3000';
|
|
|
|
interface PostDetail {
|
|
slug: string;
|
|
content: string;
|
|
}
|
|
|
|
let post: PostDetail | null = null;
|
|
let html = '';
|
|
let error = '';
|
|
|
|
try {
|
|
const response = await fetch(`${API_URL}/api/posts/${slug}`);
|
|
if (response.ok) {
|
|
post = await response.json();
|
|
if (post) {
|
|
html = await marked.parse(post.content);
|
|
}
|
|
} else {
|
|
error = 'Post not found';
|
|
}
|
|
} catch (e) {
|
|
error = 'Could not connect to backend';
|
|
}
|
|
|
|
function formatSlug(slug: string) {
|
|
return slug
|
|
.split('-')
|
|
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
|
.join(' ');
|
|
}
|
|
---
|
|
|
|
<Layout title={post ? formatSlug(post.slug) : 'Post'}>
|
|
<article class="glass p-12 mb-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
|
<header class="mb-12 border-b border-white/5 pb-12">
|
|
<a href="/" class="text-blue hover:text-sky transition-colors mb-8 inline-flex items-center gap-2 group">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:-translate-x-1"><path d="m15 18-6-6 6-6"/></svg>
|
|
Back to list
|
|
</a>
|
|
{post && (
|
|
<h1 class="text-5xl font-extrabold text-mauve mt-4">
|
|
{formatSlug(post.slug)}
|
|
</h1>
|
|
)}
|
|
</header>
|
|
|
|
{error && (
|
|
<div class="text-red text-center py-12">
|
|
<h2 class="text-2xl font-bold mb-4">{error}</h2>
|
|
<a href="/" class="text-blue underline">Return home</a>
|
|
</div>
|
|
)}
|
|
|
|
{post && (
|
|
<div class="prose prose-invert max-w-none" set:html={html} />
|
|
)}
|
|
</article>
|
|
</Layout>
|