88 lines
3.4 KiB
Plaintext
88 lines
3.4 KiB
Plaintext
---
|
|
import Layout from '../../layouts/Layout.astro';
|
|
import PostEnhancer from '../../components/react/PostEnhancer';
|
|
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();
|
|
html = await marked.parse(post!.content);
|
|
} else {
|
|
error = 'Post not found';
|
|
}
|
|
} catch (e) {
|
|
const cause = (e as any)?.cause;
|
|
error = `Could not connect to backend at ${API_URL}: ${e instanceof Error ? e.message : String(e)}${cause ? ' (Cause: ' + (cause.message || cause.code || JSON.stringify(cause)) + ')' : ''}`;
|
|
console.error(error);
|
|
}
|
|
|
|
function formatSlug(s: string) {
|
|
if (!s) return '';
|
|
return s.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
|
}
|
|
|
|
const isAdmin = Astro.cookies.has('admin_token');
|
|
---
|
|
|
|
<Layout title={post ? formatSlug(post.slug) : 'Post'}>
|
|
<article class="glass p-6 md:p-12 mb-8 md:mb-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
|
{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 && (
|
|
<>
|
|
<header class="mb-8 md:mb-12 border-b border-white/5 pb-8 md:pb-12">
|
|
<a
|
|
href="/"
|
|
class="text-blue hover:text-sky transition-colors mb-6 md:mb-8 inline-flex items-center gap-2 group text-sm md:text-base"
|
|
style="color: var(--blue);"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="md:w-5 md:h-5 transition-transform group-hover:-translate-x-1"><path d="m15 18-6-6 6-6"/></svg>
|
|
Back to list
|
|
</a>
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-start mt-2 md:mt-4 gap-4">
|
|
<h1 class="text-3xl md:text-5xl font-extrabold text-mauve">
|
|
{formatSlug(post.slug)}
|
|
</h1>
|
|
<a
|
|
id="edit-link"
|
|
href={`/admin/editor?edit=${post.slug}`}
|
|
class="bg-surface0 hover:bg-surface1 text-blue px-3 py-1.5 md:px-4 md:py-2 rounded border border-surface1 transition-colors inline-flex items-center gap-2 text-sm md:text-base self-start hidden"
|
|
style="color: var(--blue);"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="md:w-4 md:h-4"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
|
|
Edit
|
|
</a>
|
|
</div>
|
|
</header>
|
|
<div id="post-content" class="prose max-w-none" set:html={html} />
|
|
<PostEnhancer client:load containerId="post-content" />
|
|
</>
|
|
)}
|
|
</article>
|
|
</Layout>
|
|
|
|
<script>
|
|
if (localStorage.getItem('admin_token')) {
|
|
const el = document.getElementById('edit-link');
|
|
if (el) el.classList.remove('hidden');
|
|
}
|
|
</script>
|