layout redesign
This commit is contained in:
@@ -0,0 +1,86 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { deletePost } from '../../lib/api';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
slug: string;
|
||||||
|
title: string;
|
||||||
|
variant?: 'icon' | 'full';
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DeletePostButton({ slug, title, variant = 'full' }: Props) {
|
||||||
|
const [busy, setBusy] = useState(false);
|
||||||
|
|
||||||
|
async function handleClick() {
|
||||||
|
if (busy) return;
|
||||||
|
if (!window.confirm(`Delete "${title}"? This cannot be undone.`)) return;
|
||||||
|
setBusy(true);
|
||||||
|
try {
|
||||||
|
await deletePost(slug);
|
||||||
|
window.location.href = '/';
|
||||||
|
} catch (e) {
|
||||||
|
window.alert(`Failed to delete: ${e instanceof Error ? e.message : 'unknown error'}`);
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (variant === 'icon') {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleClick}
|
||||||
|
disabled={busy}
|
||||||
|
title="Delete post"
|
||||||
|
aria-label="Delete post"
|
||||||
|
className="p-2 rounded-md bg-surface0/80 hover:bg-red/20 text-subtext0 hover:text-red border border-surface1 transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="14"
|
||||||
|
height="14"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path d="M3 6h18" />
|
||||||
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
|
||||||
|
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
||||||
|
<line x1="10" x2="10" y1="11" y2="17" />
|
||||||
|
<line x1="14" x2="14" y1="11" y2="17" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleClick}
|
||||||
|
disabled={busy}
|
||||||
|
className="inline-flex items-center gap-2 bg-surface0 hover:bg-red/15 text-subtext1 hover:text-red px-3 py-1.5 md:px-4 md:py-2 rounded-md border border-surface1 hover:border-red/30 transition-colors text-sm disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="14"
|
||||||
|
height="14"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path d="M3 6h18" />
|
||||||
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
|
||||||
|
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
||||||
|
<line x1="10" x2="10" y1="11" y2="17" />
|
||||||
|
<line x1="14" x2="14" y1="11" y2="17" />
|
||||||
|
</svg>
|
||||||
|
{busy ? 'Deleting…' : 'Delete'}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { logout as apiLogout } from '../../lib/api';
|
||||||
|
|
||||||
|
export default function LogoutButton() {
|
||||||
|
const [busy, setBusy] = useState(false);
|
||||||
|
|
||||||
|
async function handleClick() {
|
||||||
|
if (busy) return;
|
||||||
|
setBusy(true);
|
||||||
|
try {
|
||||||
|
await apiLogout();
|
||||||
|
} catch {
|
||||||
|
/* clear UI anyway */
|
||||||
|
}
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleClick}
|
||||||
|
disabled={busy}
|
||||||
|
title="Sign out"
|
||||||
|
aria-label="Sign out"
|
||||||
|
className="text-subtext0 hover:text-red transition-colors p-1.5 rounded-md hover:bg-surface0/60 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
|
||||||
|
<polyline points="16 17 21 12 16 7" />
|
||||||
|
<line x1="21" x2="9" y1="12" y2="12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,4 +1,5 @@
|
|||||||
import { useMemo, useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
import { deletePost } from '../../lib/api';
|
||||||
|
|
||||||
interface Post {
|
interface Post {
|
||||||
slug: string;
|
slug: string;
|
||||||
@@ -12,6 +13,7 @@ interface Post {
|
|||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
posts: Post[];
|
posts: Post[];
|
||||||
|
isAdmin?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatSlug(slug: string) {
|
function formatSlug(slug: string) {
|
||||||
@@ -30,178 +32,154 @@ function formatDate(date: string) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function PostList({ posts }: Props) {
|
export default function PostList({ posts: initialPosts, isAdmin = false }: Props) {
|
||||||
const [query, setQuery] = useState('');
|
const [posts, setPosts] = useState(initialPosts);
|
||||||
const [activeTags, setActiveTags] = useState<Set<string>>(new Set());
|
const [deleting, setDeleting] = useState<string | null>(null);
|
||||||
|
|
||||||
const allTags = useMemo(() => {
|
async function handleDelete(slug: string, title: string) {
|
||||||
const set = new Set<string>();
|
if (deleting) return;
|
||||||
for (const p of posts) for (const t of p.tags || []) set.add(t);
|
if (!window.confirm(`Delete "${title}"? This cannot be undone.`)) return;
|
||||||
return Array.from(set).sort((a, b) => a.localeCompare(b));
|
setDeleting(slug);
|
||||||
}, [posts]);
|
try {
|
||||||
|
await deletePost(slug);
|
||||||
|
setPosts(p => p.filter(x => x.slug !== slug));
|
||||||
|
} catch (e) {
|
||||||
|
window.alert(`Failed to delete: ${e instanceof Error ? e.message : 'unknown error'}`);
|
||||||
|
} finally {
|
||||||
|
setDeleting(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const filtered = useMemo(() => {
|
if (posts.length === 0) {
|
||||||
const q = query.trim().toLowerCase();
|
return (
|
||||||
return posts.filter(p => {
|
<div className="glass p-8 md:p-12 text-center text-sm md:text-base text-subtext1">
|
||||||
if (activeTags.size > 0) {
|
No posts yet.
|
||||||
for (const t of activeTags) if (!p.tags?.includes(t)) return false;
|
</div>
|
||||||
}
|
);
|
||||||
if (!q) return true;
|
|
||||||
const hay = `${p.title || formatSlug(p.slug)} ${p.excerpt || ''}`.toLowerCase();
|
|
||||||
return hay.includes(q);
|
|
||||||
});
|
|
||||||
}, [posts, query, activeTags]);
|
|
||||||
|
|
||||||
function toggleTag(tag: string) {
|
|
||||||
setActiveTags(prev => {
|
|
||||||
const next = new Set(prev);
|
|
||||||
if (next.has(tag)) next.delete(tag);
|
|
||||||
else next.add(tag);
|
|
||||||
return next;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="flex flex-col space-y-6">
|
||||||
<div className="glass px-4 py-3 md:px-5 md:py-4 flex flex-col gap-3 md:gap-4">
|
{posts.map(post => {
|
||||||
<div className="relative">
|
const displayTitle = post.title || formatSlug(post.slug);
|
||||||
<svg
|
const isDeleting = deleting === post.slug;
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
return (
|
||||||
width="16"
|
<article
|
||||||
height="16"
|
key={post.slug}
|
||||||
viewBox="0 0 24 24"
|
className={`glass p-5 md:p-8 transition-all hover:bg-surface0/80 group relative ${
|
||||||
fill="none"
|
isDeleting ? 'opacity-50 pointer-events-none' : ''
|
||||||
stroke="currentColor"
|
}`}
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
className="absolute left-3 top-1/2 -translate-y-1/2 text-subtext0 pointer-events-none"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
>
|
||||||
<circle cx="11" cy="11" r="8" />
|
<a href={`/posts/${encodeURIComponent(post.slug)}`} className="block">
|
||||||
<path d="m21 21-4.3-4.3" />
|
<div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-6">
|
||||||
</svg>
|
<div className="flex-1 min-w-0">
|
||||||
<input
|
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 mb-2 text-xs text-subtext0">
|
||||||
type="search"
|
<time dateTime={post.date}>{formatDate(post.date)}</time>
|
||||||
value={query}
|
<span className="opacity-50">·</span>
|
||||||
onChange={e => setQuery(e.target.value)}
|
<span>{post.reading_time} min read</span>
|
||||||
placeholder="Search posts…"
|
{post.draft && (
|
||||||
aria-label="Search posts"
|
<>
|
||||||
className="w-full bg-crust border border-surface1 rounded-lg pl-9 pr-3 py-2 text-sm md:text-base text-text placeholder:text-subtext0 focus:outline-none focus:border-mauve transition-colors"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{allTags.length > 0 && (
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{allTags.map(tag => {
|
|
||||||
const active = activeTags.has(tag);
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={tag}
|
|
||||||
type="button"
|
|
||||||
onClick={() => toggleTag(tag)}
|
|
||||||
className={`text-[10px] uppercase tracking-wider px-2.5 py-1 rounded-full border transition-colors ${
|
|
||||||
active
|
|
||||||
? 'bg-mauve/20 text-mauve border-mauve/30'
|
|
||||||
: 'bg-surface0 text-subtext0 border-surface1 hover:text-text'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{tag}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{activeTags.size > 0 && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setActiveTags(new Set())}
|
|
||||||
className="text-[10px] uppercase tracking-wider px-2.5 py-1 rounded-full border border-transparent text-subtext0 hover:text-red transition-colors"
|
|
||||||
>
|
|
||||||
Clear
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{filtered.length === 0 ? (
|
|
||||||
<div className="glass p-8 md:p-12 text-center text-sm md:text-base text-subtext1">
|
|
||||||
No posts match.
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex flex-col space-y-6">
|
|
||||||
{filtered.map(post => {
|
|
||||||
const displayTitle = post.title || formatSlug(post.slug);
|
|
||||||
return (
|
|
||||||
<article
|
|
||||||
key={post.slug}
|
|
||||||
className="glass p-5 md:p-8 transition-colors hover:bg-surface0/80 group"
|
|
||||||
>
|
|
||||||
<a href={`/posts/${encodeURIComponent(post.slug)}`} className="block">
|
|
||||||
<div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-6">
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 mb-2 text-xs text-subtext0">
|
|
||||||
<time dateTime={post.date}>{formatDate(post.date)}</time>
|
|
||||||
<span className="opacity-50">·</span>
|
<span className="opacity-50">·</span>
|
||||||
<span>{post.reading_time} min read</span>
|
<span className="text-peach uppercase tracking-wide font-semibold">
|
||||||
{post.draft && (
|
Draft
|
||||||
<>
|
</span>
|
||||||
<span className="opacity-50">·</span>
|
</>
|
||||||
<span className="text-peach uppercase tracking-wide font-semibold">
|
)}
|
||||||
Draft
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<h2 className="text-xl md:text-2xl font-semibold text-lavender group-hover:text-mauve transition-colors mb-2">
|
|
||||||
{displayTitle}
|
|
||||||
</h2>
|
|
||||||
<p className="text-subtext1 text-sm md:text-base leading-relaxed line-clamp-2">
|
|
||||||
{post.excerpt || `Read more about ${displayTitle}...`}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-mauve opacity-0 group-hover:opacity-100 transition-opacity self-end md:self-auto shrink-0 hidden md:block">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
>
|
|
||||||
<path d="M5 12h14" />
|
|
||||||
<path d="m12 5 7 7-7 7" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h2 className="text-xl md:text-2xl font-semibold text-lavender group-hover:text-mauve transition-colors mb-2 pr-20">
|
||||||
|
{displayTitle}
|
||||||
|
</h2>
|
||||||
|
<p className="text-subtext1 text-sm md:text-base leading-relaxed line-clamp-2">
|
||||||
|
{post.excerpt || `Read more about ${displayTitle}...`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-mauve opacity-0 group-hover:opacity-100 transition-opacity self-end md:self-auto shrink-0 hidden md:block">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
>
|
||||||
|
<path d="M5 12h14" />
|
||||||
|
<path d="m12 5 7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{post.tags && post.tags.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-2 mt-3">
|
||||||
|
{post.tags.map(tag => (
|
||||||
|
<span
|
||||||
|
key={tag}
|
||||||
|
className="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full bg-surface0 text-subtext0 border border-surface1"
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isAdmin && (
|
||||||
|
<div className="absolute top-4 right-4 md:top-5 md:right-5 flex items-center gap-1.5">
|
||||||
|
<a
|
||||||
|
href={`/admin/editor?edit=${encodeURIComponent(post.slug)}`}
|
||||||
|
onClick={e => e.stopPropagation()}
|
||||||
|
title="Edit post"
|
||||||
|
aria-label={`Edit ${displayTitle}`}
|
||||||
|
className="p-1.5 rounded-md bg-surface0/80 hover:bg-blue/20 text-subtext0 hover:text-blue border border-surface1 transition-colors"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="14"
|
||||||
|
height="14"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="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>
|
||||||
</a>
|
</a>
|
||||||
{post.tags && post.tags.length > 0 && (
|
<button
|
||||||
<div className="flex flex-wrap gap-2 mt-3">
|
type="button"
|
||||||
{post.tags.map(tag => {
|
onClick={e => { e.preventDefault(); e.stopPropagation(); handleDelete(post.slug, displayTitle); }}
|
||||||
const active = activeTags.has(tag);
|
disabled={isDeleting}
|
||||||
return (
|
title="Delete post"
|
||||||
<button
|
aria-label={`Delete ${displayTitle}`}
|
||||||
key={tag}
|
className="p-1.5 rounded-md bg-surface0/80 hover:bg-red/20 text-subtext0 hover:text-red border border-surface1 transition-colors disabled:opacity-50"
|
||||||
type="button"
|
>
|
||||||
onClick={() => toggleTag(tag)}
|
<svg
|
||||||
className={`text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border transition-colors ${
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
active
|
width="14"
|
||||||
? 'bg-mauve/20 text-mauve border-mauve/30'
|
height="14"
|
||||||
: 'bg-surface0 text-subtext0 border-surface1 hover:text-text'
|
viewBox="0 0 24 24"
|
||||||
}`}
|
fill="none"
|
||||||
>
|
stroke="currentColor"
|
||||||
{tag}
|
strokeWidth="2"
|
||||||
</button>
|
strokeLinecap="round"
|
||||||
);
|
strokeLinejoin="round"
|
||||||
})}
|
>
|
||||||
</div>
|
<path d="M3 6h18" />
|
||||||
)}
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
|
||||||
</article>
|
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
||||||
);
|
<line x1="10" x2="10" y1="11" y2="17" />
|
||||||
})}
|
<line x1="14" x2="14" y1="11" y2="17" />
|
||||||
</div>
|
</svg>
|
||||||
)}
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,263 @@
|
|||||||
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
import { getPosts } from '../../lib/api';
|
||||||
|
|
||||||
|
interface Post {
|
||||||
|
slug: string;
|
||||||
|
date: string;
|
||||||
|
title?: string;
|
||||||
|
excerpt?: string;
|
||||||
|
tags: string[];
|
||||||
|
draft: boolean;
|
||||||
|
reading_time: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatSlug(slug: string) {
|
||||||
|
if (!slug) return '';
|
||||||
|
return slug
|
||||||
|
.split('-')
|
||||||
|
.map(w => w.charAt(0).toUpperCase() + w.slice(1))
|
||||||
|
.join(' ');
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(date: string) {
|
||||||
|
return new Date(date).toLocaleDateString('en-US', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Search() {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [query, setQuery] = useState('');
|
||||||
|
const [posts, setPosts] = useState<Post[] | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [activeIdx, setActiveIdx] = useState(0);
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const listRef = useRef<HTMLUListElement>(null);
|
||||||
|
|
||||||
|
// Global Cmd/Ctrl+K + Esc listener
|
||||||
|
useEffect(() => {
|
||||||
|
function onKey(e: KeyboardEvent) {
|
||||||
|
const isMac = navigator.platform.toLowerCase().includes('mac');
|
||||||
|
const mod = isMac ? e.metaKey : e.ctrlKey;
|
||||||
|
if (mod && e.key.toLowerCase() === 'k') {
|
||||||
|
e.preventDefault();
|
||||||
|
setOpen(o => !o);
|
||||||
|
} else if (e.key === 'Escape' && open) {
|
||||||
|
setOpen(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.addEventListener('keydown', onKey);
|
||||||
|
return () => window.removeEventListener('keydown', onKey);
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
// Lazy fetch posts on first open
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open || posts !== null || loading) return;
|
||||||
|
setLoading(true);
|
||||||
|
getPosts()
|
||||||
|
.then(p => setPosts(p as Post[]))
|
||||||
|
.catch(e => setError(e instanceof Error ? e.message : 'Failed to load'))
|
||||||
|
.finally(() => setLoading(false));
|
||||||
|
}, [open, posts, loading]);
|
||||||
|
|
||||||
|
// Focus input on open
|
||||||
|
useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
setQuery('');
|
||||||
|
setActiveIdx(0);
|
||||||
|
requestAnimationFrame(() => inputRef.current?.focus());
|
||||||
|
}
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
// Lock body scroll when open
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) return;
|
||||||
|
const prev = document.body.style.overflow;
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
return () => { document.body.style.overflow = prev; };
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
const results = useMemo(() => {
|
||||||
|
if (!posts) return [];
|
||||||
|
const q = query.trim().toLowerCase();
|
||||||
|
if (!q) return posts;
|
||||||
|
return posts.filter(p => {
|
||||||
|
const hay = `${p.title || formatSlug(p.slug)} ${p.excerpt || ''} ${p.tags?.join(' ') || ''}`.toLowerCase();
|
||||||
|
return hay.includes(q);
|
||||||
|
});
|
||||||
|
}, [posts, query]);
|
||||||
|
|
||||||
|
// Reset active index when results change
|
||||||
|
useEffect(() => {
|
||||||
|
setActiveIdx(0);
|
||||||
|
}, [query, posts]);
|
||||||
|
|
||||||
|
function navigate(slug: string) {
|
||||||
|
window.location.href = `/posts/${encodeURIComponent(slug)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onInputKey(e: React.KeyboardEvent<HTMLInputElement>) {
|
||||||
|
if (e.key === 'ArrowDown') {
|
||||||
|
e.preventDefault();
|
||||||
|
setActiveIdx(i => Math.min(i + 1, Math.max(0, results.length - 1)));
|
||||||
|
} else if (e.key === 'ArrowUp') {
|
||||||
|
e.preventDefault();
|
||||||
|
setActiveIdx(i => Math.max(i - 1, 0));
|
||||||
|
} else if (e.key === 'Enter' && results[activeIdx]) {
|
||||||
|
e.preventDefault();
|
||||||
|
navigate(results[activeIdx].slug);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scroll active result into view
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open || !listRef.current) return;
|
||||||
|
const el = listRef.current.children[activeIdx] as HTMLElement | undefined;
|
||||||
|
el?.scrollIntoView({ block: 'nearest' });
|
||||||
|
}, [activeIdx, open]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setOpen(true)}
|
||||||
|
aria-label="Search posts (Ctrl+K)"
|
||||||
|
title="Search (Ctrl+K)"
|
||||||
|
className="text-subtext0 hover:text-text transition-colors flex items-center gap-2 px-2 py-1 rounded-md hover:bg-surface0/60"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="18"
|
||||||
|
height="18"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<circle cx="11" cy="11" r="8" />
|
||||||
|
<path d="m21 21-4.3-4.3" />
|
||||||
|
</svg>
|
||||||
|
<kbd className="hidden md:inline-flex items-center gap-0.5 text-[10px] font-mono text-subtext0 px-1.5 py-0.5 rounded border border-surface1 bg-surface0/60">
|
||||||
|
<span>⌘</span><span>K</span>
|
||||||
|
</kbd>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{open && (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 z-[200] flex items-start justify-center pt-[10vh] md:pt-[15vh] px-4"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-label="Search posts"
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-crust/70 backdrop-blur-md"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="relative w-full max-w-xl bg-mantle border border-surface1 rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[70vh] animate-in fade-in slide-in-from-top-4 duration-200"
|
||||||
|
onClick={e => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3 px-4 py-3 border-b border-surface1">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="18"
|
||||||
|
height="18"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
className="text-subtext0 shrink-0"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<circle cx="11" cy="11" r="8" />
|
||||||
|
<path d="m21 21-4.3-4.3" />
|
||||||
|
</svg>
|
||||||
|
<input
|
||||||
|
ref={inputRef}
|
||||||
|
type="search"
|
||||||
|
value={query}
|
||||||
|
onChange={e => setQuery(e.target.value)}
|
||||||
|
onKeyDown={onInputKey}
|
||||||
|
placeholder="Search posts…"
|
||||||
|
aria-label="Search query"
|
||||||
|
className="flex-1 bg-transparent outline-none text-base text-text placeholder:text-subtext0"
|
||||||
|
/>
|
||||||
|
<kbd className="text-[10px] font-mono text-subtext0 px-1.5 py-0.5 rounded border border-surface1 bg-surface0/60">
|
||||||
|
Esc
|
||||||
|
</kbd>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
{loading && (
|
||||||
|
<div className="px-4 py-8 text-center text-sm text-subtext0">Loading…</div>
|
||||||
|
)}
|
||||||
|
{error && (
|
||||||
|
<div className="px-4 py-8 text-center text-sm text-red">{error}</div>
|
||||||
|
)}
|
||||||
|
{!loading && !error && posts && results.length === 0 && (
|
||||||
|
<div className="px-4 py-8 text-center text-sm text-subtext0">
|
||||||
|
{query ? 'No posts match.' : 'No posts.'}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!loading && !error && results.length > 0 && (
|
||||||
|
<ul ref={listRef} className="py-1">
|
||||||
|
{results.map((p, i) => {
|
||||||
|
const title = p.title || formatSlug(p.slug);
|
||||||
|
const active = i === activeIdx;
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
key={p.slug}
|
||||||
|
onMouseEnter={() => setActiveIdx(i)}
|
||||||
|
onClick={() => navigate(p.slug)}
|
||||||
|
className={`px-4 py-3 cursor-pointer border-l-2 transition-colors ${
|
||||||
|
active
|
||||||
|
? 'bg-surface0 border-mauve'
|
||||||
|
: 'border-transparent hover:bg-surface0/60'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-baseline justify-between gap-3">
|
||||||
|
<div className={`font-medium truncate ${active ? 'text-mauve' : 'text-lavender'}`}>
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
<time className="text-[10px] text-subtext0 shrink-0" dateTime={p.date}>
|
||||||
|
{formatDate(p.date)}
|
||||||
|
</time>
|
||||||
|
</div>
|
||||||
|
{p.excerpt && (
|
||||||
|
<div className="text-xs text-subtext1 line-clamp-1 mt-0.5">{p.excerpt}</div>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between px-4 py-2 border-t border-surface1 text-[10px] text-subtext0 bg-crust/40">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<kbd className="font-mono px-1 rounded border border-surface1 bg-surface0/60">↑↓</kbd>
|
||||||
|
navigate
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<kbd className="font-mono px-1 rounded border border-surface1 bg-surface0/60">↵</kbd>
|
||||||
|
open
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span>{results.length} {results.length === 1 ? 'result' : 'results'}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -5,6 +5,8 @@ import 'highlight.js/styles/atom-one-dark.css';
|
|||||||
import '@fontsource-variable/inter';
|
import '@fontsource-variable/inter';
|
||||||
import '@fontsource-variable/jetbrains-mono';
|
import '@fontsource-variable/jetbrains-mono';
|
||||||
import ThemeSwitcher from '../components/react/ThemeSwitcher';
|
import ThemeSwitcher from '../components/react/ThemeSwitcher';
|
||||||
|
import Search from '../components/react/Search';
|
||||||
|
import LogoutButton from '../components/react/LogoutButton';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -17,6 +19,7 @@ interface Props {
|
|||||||
const { title, wide = false, description, image, type = 'website' } = Astro.props;
|
const { title, wide = false, description, image, type = 'website' } = Astro.props;
|
||||||
|
|
||||||
const API_URL = process.env.PUBLIC_API_URL || 'http://backend:3000';
|
const API_URL = process.env.PUBLIC_API_URL || 'http://backend:3000';
|
||||||
|
const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
|
||||||
|
|
||||||
let siteConfig = {
|
let siteConfig = {
|
||||||
title: "Narlblog",
|
title: "Narlblog",
|
||||||
@@ -82,8 +85,22 @@ const fullTitle = `${title} | ${siteConfig.title}`;
|
|||||||
</a>
|
</a>
|
||||||
<p class="text-[8px] md:text-[10px] text-subtext0 uppercase tracking-widest">{siteConfig.subtitle}</p>
|
<p class="text-[8px] md:text-[10px] text-subtext0 uppercase tracking-widest">{siteConfig.subtitle}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex gap-3 md:gap-4 items-center text-sm md:text-base w-full md:w-auto justify-center md:justify-end">
|
<div class="flex gap-2 md:gap-3 items-center text-sm md:text-base w-full md:w-auto justify-center md:justify-end">
|
||||||
<a href="/" class="text-subtext0 hover:text-text transition-colors">Home</a>
|
<a href="/" class="text-subtext0 hover:text-text transition-colors px-2 py-1">Home</a>
|
||||||
|
<Search client:load />
|
||||||
|
{isAdmin && (
|
||||||
|
<div class="flex items-center gap-1 pl-2 ml-1 border-l border-surface1/60">
|
||||||
|
<a
|
||||||
|
href="/admin"
|
||||||
|
class="inline-flex items-center gap-1.5 text-xs uppercase tracking-wider px-2.5 py-1 rounded-full bg-mauve/15 text-mauve border border-mauve/30 hover:bg-mauve/25 transition-colors"
|
||||||
|
title="Admin dashboard"
|
||||||
|
>
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-mauve animate-pulse"></span>
|
||||||
|
Admin
|
||||||
|
</a>
|
||||||
|
<LogoutButton client:load />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<ThemeSwitcher client:only="react" defaultTheme={siteConfig.theme} />
|
<ThemeSwitcher client:only="react" defaultTheme={siteConfig.theme} />
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@@ -41,6 +41,8 @@ try {
|
|||||||
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)) + ')' : ''}`;
|
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);
|
console.error(error);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Home" description={siteConfig.welcome_subtitle}>
|
<Layout title="Home" description={siteConfig.welcome_subtitle}>
|
||||||
@@ -52,6 +54,32 @@ try {
|
|||||||
<p class="text-subtext1 text-base md:text-lg max-w-2xl mx-auto px-4 md:px-0">
|
<p class="text-subtext1 text-base md:text-lg max-w-2xl mx-auto px-4 md:px-0">
|
||||||
{siteConfig.welcome_subtitle}
|
{siteConfig.welcome_subtitle}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
{isAdmin && (
|
||||||
|
<div class="mt-6 md:mt-8 flex flex-wrap items-center justify-center gap-2 md:gap-3">
|
||||||
|
<a
|
||||||
|
href="/admin/editor"
|
||||||
|
class="inline-flex items-center gap-2 bg-mauve text-crust font-semibold px-4 py-2 rounded-lg hover:bg-pink transition-colors text-sm shadow-lg shadow-mauve/20"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
|
||||||
|
New Post
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/admin/assets"
|
||||||
|
class="inline-flex items-center gap-2 bg-surface0 hover:bg-surface1 text-subtext1 hover:text-text px-3 py-2 rounded-lg border border-surface1 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"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
|
||||||
|
Assets
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/admin/settings"
|
||||||
|
class="inline-flex items-center gap-2 bg-surface0 hover:bg-surface1 text-subtext1 hover:text-text px-3 py-2 rounded-lg border border-surface1 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="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="flex flex-col space-y-6">
|
<div class="flex flex-col space-y-6">
|
||||||
@@ -60,14 +88,24 @@ try {
|
|||||||
{error}
|
{error}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{posts.length === 0 && !error && (
|
{posts.length === 0 && !error && !isAdmin && (
|
||||||
<div class="glass p-8 md:p-12 text-center text-sm md:text-base" style="color: var(--text) !important;">
|
<div class="glass p-8 md:p-12 text-center text-sm md:text-base text-subtext1">
|
||||||
<p>No posts found yet. Add some .md files to the data/posts directory!</p>
|
<p>No posts yet — check back soon.</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{posts.length > 0 && <PostList posts={posts} client:load />}
|
{posts.length === 0 && !error && isAdmin && (
|
||||||
|
<div class="glass p-8 md:p-12 text-center text-sm md:text-base">
|
||||||
|
<p class="text-subtext1 mb-4">No posts yet. Write your first one.</p>
|
||||||
|
<a href="/admin/editor" class="inline-flex items-center gap-2 bg-mauve text-crust font-semibold px-4 py-2 rounded-lg hover:bg-pink transition-colors text-sm">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
|
||||||
|
New Post
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{posts.length > 0 && <PostList posts={posts} isAdmin={isAdmin} client:load />}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
import Layout from '../../layouts/Layout.astro';
|
import Layout from '../../layouts/Layout.astro';
|
||||||
|
import DeletePostButton from '../../components/react/DeletePostButton';
|
||||||
import { renderMarkdown } from '../../lib/markdown';
|
import { renderMarkdown } from '../../lib/markdown';
|
||||||
|
|
||||||
const { slug } = Astro.params;
|
const { slug } = Astro.params;
|
||||||
@@ -44,72 +45,120 @@ function formatSlug(s: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
|
const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
|
||||||
|
const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Post';
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout
|
<Layout
|
||||||
title={post ? (post.title || formatSlug(post.slug)) : 'Post'}
|
title={displayTitle}
|
||||||
description={post?.summary}
|
description={post?.summary}
|
||||||
type="article"
|
type="article"
|
||||||
>
|
>
|
||||||
<article class="glass p-6 md:p-12 mb-8 md:mb-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
{/* Reading progress bar */}
|
||||||
{error && (
|
<div
|
||||||
<div class="text-red text-center py-12">
|
id="reading-progress"
|
||||||
<h2 class="text-2xl font-bold mb-4">{error}</h2>
|
class="fixed top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-mauve via-blue to-teal z-[150] origin-left"
|
||||||
<a href="/" class="text-blue underline">Return home</a>
|
style="transform: scaleX(0); transition: transform 80ms linear;"
|
||||||
</div>
|
aria-hidden="true"
|
||||||
)}
|
></div>
|
||||||
|
|
||||||
{post && (
|
{error && (
|
||||||
<>
|
<div class="max-w-2xl mx-auto py-16 md:py-24 text-center">
|
||||||
<header class="mb-8 md:mb-12 border-b border-white/5 pb-8 md:pb-12">
|
<h2 class="text-2xl md:text-3xl font-bold text-red mb-4">{error}</h2>
|
||||||
<a
|
<a href="/" class="inline-flex items-center gap-2 text-blue hover:text-sky transition-colors">
|
||||||
href="/"
|
<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>
|
||||||
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"
|
Back home
|
||||||
style="color: var(--blue);"
|
</a>
|
||||||
>
|
</div>
|
||||||
<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>
|
{post && (
|
||||||
<div class="flex flex-col md:flex-row md:justify-between md:items-start mt-2 md:mt-4 gap-4">
|
<article class="animate-in fade-in slide-in-from-bottom-2 duration-500">
|
||||||
<div class="flex-1 min-w-0">
|
{/* Toolbar: Back to list + admin actions */}
|
||||||
<h1 class="text-3xl md:text-5xl font-extrabold text-mauve mb-3">
|
<div class="flex items-center justify-between gap-3 mb-8 md:mb-12">
|
||||||
{post.title || formatSlug(post.slug)}
|
<a
|
||||||
</h1>
|
href="/"
|
||||||
<div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-subtext0">
|
class="inline-flex items-center gap-2 text-subtext0 hover:text-text transition-colors text-sm group"
|
||||||
<time datetime={post.date}>{formatDate(post.date)}</time>
|
>
|
||||||
<span class="opacity-50">·</span>
|
<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>
|
||||||
<span>{post.reading_time} min read</span>
|
Back to list
|
||||||
{post.draft && (
|
</a>
|
||||||
<>
|
|
||||||
<span class="opacity-50">·</span>
|
{isAdmin && (
|
||||||
<span class="text-peach uppercase tracking-wide font-semibold">Draft</span>
|
<div class="flex items-center gap-2">
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{post.tags?.length > 0 && (
|
|
||||||
<>
|
|
||||||
<span class="opacity-50">·</span>
|
|
||||||
<div class="flex flex-wrap gap-1.5">
|
|
||||||
{post.tags.map(tag => (
|
|
||||||
<span class="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full bg-surface0 text-subtext0 border border-surface1">{tag}</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a
|
<a
|
||||||
id="edit-link"
|
|
||||||
href={`/admin/editor?edit=${encodeURIComponent(post.slug)}`}
|
href={`/admin/editor?edit=${encodeURIComponent(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 ${isAdmin ? '' : 'hidden'}`}
|
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" 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>
|
<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>
|
||||||
Edit
|
Edit
|
||||||
</a>
|
</a>
|
||||||
|
<DeletePostButton slug={post.slug} title={displayTitle} client:load />
|
||||||
</div>
|
</div>
|
||||||
</header>
|
)}
|
||||||
<div id="post-content" class="prose" set:html={html} />
|
</div>
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</article>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
|
{/* 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">
|
||||||
|
{displayTitle}
|
||||||
|
</h1>
|
||||||
|
{post.summary && (
|
||||||
|
<p class="text-base md:text-xl text-subtext1 leading-relaxed max-w-2xl mx-auto">
|
||||||
|
{post.summary}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{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>
|
||||||
|
))}
|
||||||
|
</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 */}
|
||||||
|
<div id="post-content" class="prose px-1" set:html={html} />
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
</article>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<script is:inline>
|
||||||
|
(function () {
|
||||||
|
const bar = document.getElementById('reading-progress');
|
||||||
|
const article = document.getElementById('post-content');
|
||||||
|
if (!bar || !article) return;
|
||||||
|
function update() {
|
||||||
|
const startY = article.offsetTop;
|
||||||
|
const distance = Math.max(1, article.offsetHeight - window.innerHeight);
|
||||||
|
const pct = Math.max(0, Math.min(1, (window.scrollY - startY) / distance));
|
||||||
|
bar.style.transform = 'scaleX(' + pct + ')';
|
||||||
|
}
|
||||||
|
update();
|
||||||
|
window.addEventListener('scroll', update, { passive: true });
|
||||||
|
window.addEventListener('resize', update);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</Layout>
|
||||||
|
|||||||
@@ -117,9 +117,16 @@ code, pre, kbd, samp {
|
|||||||
/* Prose — readable column, calm hierarchy */
|
/* Prose — readable column, calm hierarchy */
|
||||||
.prose {
|
.prose {
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
max-width: 70ch;
|
max-width: 72ch;
|
||||||
line-height: 1.7;
|
margin-left: auto;
|
||||||
font-size: 1rem;
|
margin-right: auto;
|
||||||
|
line-height: 1.75;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.prose {
|
||||||
|
font-size: 1.0625rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.prose h1 {
|
.prose h1 {
|
||||||
font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
|
font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
|
||||||
|
|||||||
Reference in New Issue
Block a user