init elas atelier
This commit is contained in:
@@ -6,6 +6,7 @@ import { renderMarkdown } from '../../lib/markdown';
|
||||
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 CoverImage { url: string; alt: string }
|
||||
interface PostDetail {
|
||||
slug: string;
|
||||
date: string;
|
||||
@@ -15,28 +16,29 @@ interface PostDetail {
|
||||
tags: string[];
|
||||
draft: boolean;
|
||||
reading_time: number;
|
||||
cover_image?: CoverImage;
|
||||
image_count: number;
|
||||
}
|
||||
interface PostInfo {
|
||||
slug: string;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
function formatDate(d: string) {
|
||||
return new Date(d).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
|
||||
}
|
||||
|
||||
let post: PostDetail | null = null;
|
||||
let html = '';
|
||||
let error = '';
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_URL}/api/posts/${encodeURIComponent(slug ?? '')}`);
|
||||
if (response.ok) {
|
||||
post = await response.json();
|
||||
html = renderMarkdown(post!.content);
|
||||
} else {
|
||||
error = 'Post not found';
|
||||
function toRoman(n: number): string {
|
||||
const map: [number, string][] = [
|
||||
[1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
|
||||
[100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
|
||||
[10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I'],
|
||||
];
|
||||
let out = '';
|
||||
for (const [val, sym] of map) {
|
||||
while (n >= val) { out += sym; n -= val; }
|
||||
}
|
||||
} 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);
|
||||
return out;
|
||||
}
|
||||
|
||||
function formatSlug(s: string) {
|
||||
@@ -44,52 +46,74 @@ function formatSlug(s: string) {
|
||||
return s.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
||||
}
|
||||
|
||||
let post: PostDetail | null = null;
|
||||
let html = '';
|
||||
let error = '';
|
||||
let neighbors: { prev?: PostInfo; next?: PostInfo; index: number; total: number } = { index: -1, total: 0 };
|
||||
|
||||
try {
|
||||
const [postRes, listRes] = await Promise.all([
|
||||
fetch(`${API_URL}/api/posts/${encodeURIComponent(slug ?? '')}`),
|
||||
fetch(`${API_URL}/api/posts`),
|
||||
]);
|
||||
if (postRes.ok) {
|
||||
post = await postRes.json();
|
||||
html = renderMarkdown(post!.content);
|
||||
} else {
|
||||
error = 'Work not found in the catalogue';
|
||||
}
|
||||
if (listRes.ok) {
|
||||
const list: PostInfo[] = await listRes.json();
|
||||
const i = list.findIndex(p => p.slug === slug);
|
||||
if (i >= 0) {
|
||||
neighbors = {
|
||||
index: i,
|
||||
total: list.length,
|
||||
prev: i > 0 ? list[i - 1] : undefined,
|
||||
next: i < list.length - 1 ? list[i + 1] : undefined,
|
||||
};
|
||||
}
|
||||
}
|
||||
} 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);
|
||||
}
|
||||
|
||||
const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
|
||||
const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Post';
|
||||
const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
|
||||
const exhibitNumber = neighbors.index >= 0 ? toRoman(neighbors.index + 1) : '';
|
||||
---
|
||||
|
||||
<Layout
|
||||
title={displayTitle}
|
||||
description={post?.summary}
|
||||
image={post?.cover_image?.url}
|
||||
type="article"
|
||||
>
|
||||
{/* Reading progress bar */}
|
||||
<div
|
||||
id="reading-progress"
|
||||
class="fixed top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-mauve via-blue to-teal z-[150] origin-left"
|
||||
style="transform: scaleX(0); transition: transform 80ms linear;"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
<div id="reading-progress" class="reading-progress" aria-hidden="true"></div>
|
||||
|
||||
{error && (
|
||||
<div class="max-w-2xl mx-auto py-16 md:py-24 text-center">
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-red mb-4">{error}</h2>
|
||||
<a href="/" class="inline-flex items-center gap-2 text-blue hover:text-sky transition-colors">
|
||||
<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" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
|
||||
Back home
|
||||
</a>
|
||||
<div class="max-w-2xl mx-auto py-20 md:py-32 text-center">
|
||||
<div class="font-display italic text-[var(--subtext0)] text-sm tracking-[0.3em] uppercase mb-4">Pardon —</div>
|
||||
<h2 class="font-display italic text-3xl md:text-5xl text-[var(--mauve)] mb-6 leading-tight">{error}</h2>
|
||||
<a href="/" class="btn-ghost">← Return to the catalogue</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{post && (
|
||||
<article class="animate-in fade-in slide-in-from-bottom-2 duration-500">
|
||||
{/* Toolbar: Back to list + admin actions */}
|
||||
<div class="flex items-center justify-between gap-3 mb-8 md:mb-12">
|
||||
<a
|
||||
href="/"
|
||||
class="inline-flex items-center gap-2 text-subtext0 hover:text-text transition-colors text-sm group"
|
||||
>
|
||||
<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="transition-transform group-hover:-translate-x-1" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
|
||||
Back to list
|
||||
<article class="plate-enter">
|
||||
{/* Toolbar — exhibit nav */}
|
||||
<div class="flex items-center justify-between gap-3 mb-10 md:mb-14 font-display italic text-sm text-[var(--subtext0)]">
|
||||
<a href="/" class="inline-flex items-center gap-2 hover:text-[var(--mauve)] transition-colors group">
|
||||
<span class="transition-transform group-hover:-translate-x-1">←</span>
|
||||
Back to catalogue
|
||||
</a>
|
||||
|
||||
{isAdmin && (
|
||||
<div class="flex items-center gap-2">
|
||||
<a
|
||||
href={`/admin/editor?edit=${encodeURIComponent(post.slug)}`}
|
||||
class="inline-flex items-center gap-2 bg-surface0 hover:bg-blue/15 text-subtext1 hover:text-blue px-3 py-1.5 md:px-4 md:py-2 rounded-md border border-surface1 hover:border-blue/30 transition-colors text-sm"
|
||||
>
|
||||
<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" aria-hidden="true"><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>
|
||||
<a href={`/admin/editor?edit=${encodeURIComponent(post.slug)}`} class="btn-ghost">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
<DeletePostButton slug={post.slug} title={displayTitle} client:load />
|
||||
@@ -97,50 +121,90 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Post';
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Hero header — centered title + meta */}
|
||||
<header class="max-w-3xl mx-auto text-center mb-10 md:mb-16">
|
||||
<div class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 mb-4 text-xs md:text-sm text-subtext0">
|
||||
<time datetime={post.date}>{formatDate(post.date)}</time>
|
||||
<span class="opacity-50">·</span>
|
||||
<span>{post.reading_time} min read</span>
|
||||
{post.draft && (
|
||||
<>
|
||||
<span class="opacity-50">·</span>
|
||||
<span class="text-peach uppercase tracking-wide font-semibold">Draft</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<h1 class="text-3xl md:text-5xl lg:text-6xl font-extrabold text-mauve leading-[1.1] mb-6 md:mb-8 tracking-tight">
|
||||
{/* Plaque header */}
|
||||
<header class="max-w-3xl mx-auto text-center mb-12 md:mb-16">
|
||||
{exhibitNumber && (
|
||||
<div class="font-display italic text-[var(--mauve)] tracking-[0.3em] text-sm mb-5">
|
||||
№ {exhibitNumber} <span class="text-[var(--subtext0)] not-italic">/ {neighbors.total}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h1 class="font-display italic font-semibold text-[var(--text)] text-4xl md:text-6xl lg:text-7xl leading-[0.95] tracking-tight mb-6">
|
||||
{displayTitle}
|
||||
</h1>
|
||||
|
||||
<div class="section-rule max-w-md mx-auto mb-6">
|
||||
<span class="ornament">✦</span>
|
||||
<span>{formatDate(post.date)}</span>
|
||||
<span class="ornament">·</span>
|
||||
<span>{post.reading_time} min</span>
|
||||
{post.image_count > 0 && (
|
||||
<>
|
||||
<span class="ornament">·</span>
|
||||
<span>{post.image_count} {post.image_count === 1 ? 'plate' : 'plates'}</span>
|
||||
</>
|
||||
)}
|
||||
<span class="ornament">✦</span>
|
||||
</div>
|
||||
|
||||
{post.summary && (
|
||||
<p class="text-base md:text-xl text-subtext1 leading-relaxed max-w-2xl mx-auto">
|
||||
<p class="font-display italic text-[var(--subtext1)] text-lg md:text-xl leading-relaxed max-w-2xl mx-auto">
|
||||
{post.summary}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{post.draft && (
|
||||
<div class="mt-6 inline-block">
|
||||
<span class="chip" style="background: var(--peach); color: var(--crust); border-color: var(--peach);">
|
||||
Sketch · unpublished
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{post.tags?.length > 0 && (
|
||||
<div class="flex flex-wrap justify-center gap-2 mt-6">
|
||||
{post.tags.map(tag => (
|
||||
<span class="text-[10px] uppercase tracking-wider px-2.5 py-1 rounded-full bg-surface0 text-subtext0 border border-surface1">{tag}</span>
|
||||
))}
|
||||
{post.tags.map(tag => <span class="chip">{tag}</span>)}
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<div class="w-full max-w-3xl mx-auto h-px bg-gradient-to-r from-transparent via-surface2 to-transparent mb-10 md:mb-16"></div>
|
||||
{/* Body — works on paper */}
|
||||
<div id="post-content" class="prose" set:html={html} />
|
||||
|
||||
{/* Body */}
|
||||
<div id="post-content" class="prose px-1" set:html={html} />
|
||||
{/* Closing — continue the room */}
|
||||
<div class="max-w-3xl mx-auto mt-20 md:mt-28">
|
||||
<div class="section-rule mb-10">
|
||||
<span class="ornament">✦</span>
|
||||
<span>continue the gallery</span>
|
||||
<span class="ornament">✦</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{neighbors.prev && (
|
||||
<a href={`/posts/${encodeURIComponent(neighbors.prev.slug)}`} class="group glass p-6 hover:border-[var(--mauve)] transition-colors text-left">
|
||||
<div class="font-sans text-xs tracking-[0.22em] uppercase text-[var(--subtext0)] mb-2">← Previously hung</div>
|
||||
<div class="font-display italic text-xl text-[var(--text)] group-hover:text-[var(--mauve)] transition-colors leading-snug">
|
||||
{neighbors.prev.title || formatSlug(neighbors.prev.slug)}
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
{neighbors.next && (
|
||||
<a href={`/posts/${encodeURIComponent(neighbors.next.slug)}`} class="group glass p-6 hover:border-[var(--mauve)] transition-colors text-right md:col-start-2">
|
||||
<div class="font-sans text-xs tracking-[0.22em] uppercase text-[var(--subtext0)] mb-2">Next on the wall →</div>
|
||||
<div class="font-display italic text-xl text-[var(--text)] group-hover:text-[var(--mauve)] transition-colors leading-snug">
|
||||
{neighbors.next.title || formatSlug(neighbors.next.slug)}
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
{!neighbors.prev && !neighbors.next && (
|
||||
<div class="md:col-span-2 text-center font-display italic text-[var(--subtext0)]">
|
||||
This is the sole work currently on view.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer separator + back link */}
|
||||
<div class="max-w-3xl mx-auto mt-16 md:mt-24 pt-8 md:pt-12 border-t border-surface1/60 text-center">
|
||||
<a
|
||||
href="/"
|
||||
class="inline-flex items-center gap-2 text-subtext0 hover:text-mauve transition-colors text-sm group"
|
||||
>
|
||||
<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="transition-transform group-hover:-translate-x-1" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
|
||||
Back to all posts
|
||||
</a>
|
||||
<div class="mt-12 text-center">
|
||||
<a href="/" class="btn-ghost">↶ Return to catalogue</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user