admin layout redesign
This commit is contained in:
@@ -0,0 +1,117 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import AssetManager from './admin/AssetManager';
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export default function AssetsButton({
|
||||
className = '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',
|
||||
label = 'Assets',
|
||||
}: Props) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') setOpen(false);
|
||||
}
|
||||
window.addEventListener('keydown', onKey);
|
||||
const prev = document.body.style.overflow;
|
||||
document.body.style.overflow = 'hidden';
|
||||
return () => {
|
||||
window.removeEventListener('keydown', onKey);
|
||||
document.body.style.overflow = prev;
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button type="button" onClick={() => setOpen(true)} className={className}>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
{label}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div
|
||||
className="fixed inset-0 z-[200] flex items-center justify-center p-4 md:p-8"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Asset library"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<div className="absolute inset-0 bg-crust/80 backdrop-blur-md" aria-hidden="true" />
|
||||
<div
|
||||
className="relative w-full max-w-5xl max-h-[90vh] bg-mantle border border-surface1 rounded-2xl shadow-2xl overflow-hidden flex flex-col animate-in fade-in slide-in-from-bottom-4 duration-200"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-surface1">
|
||||
<div className="flex items-center gap-3">
|
||||
<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-mauve"
|
||||
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>
|
||||
<h2 className="text-lg font-semibold text-lavender">Asset Library</h2>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(false)}
|
||||
aria-label="Close"
|
||||
className="p-1.5 rounded-md text-subtext0 hover:text-text hover:bg-surface0 transition-colors"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<path d="M18 6 6 18" />
|
||||
<path d="m6 6 12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-5">
|
||||
<AssetManager mode="manage" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { updateConfig } from '../../lib/api';
|
||||
import type { SiteConfig } from '../../lib/types';
|
||||
|
||||
type ConfigKey = keyof SiteConfig;
|
||||
|
||||
interface Props {
|
||||
initial: string;
|
||||
fieldKey: ConfigKey;
|
||||
isAdmin?: boolean;
|
||||
className?: string;
|
||||
multiline?: boolean;
|
||||
ariaLabel?: string;
|
||||
pencilPosition?: 'inline' | 'overlay';
|
||||
}
|
||||
|
||||
export default function EditableText({
|
||||
initial,
|
||||
fieldKey,
|
||||
isAdmin = false,
|
||||
className = '',
|
||||
multiline = false,
|
||||
ariaLabel,
|
||||
pencilPosition = 'inline',
|
||||
}: Props) {
|
||||
const [value, setValue] = useState(initial);
|
||||
const [draft, setDraft] = useState(initial);
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (editing) {
|
||||
requestAnimationFrame(() => {
|
||||
inputRef.current?.focus();
|
||||
if (inputRef.current && 'select' in inputRef.current) inputRef.current.select();
|
||||
});
|
||||
}
|
||||
}, [editing]);
|
||||
|
||||
if (!isAdmin) {
|
||||
return <span className={className}>{value}</span>;
|
||||
}
|
||||
|
||||
function startEdit(e?: React.MouseEvent) {
|
||||
e?.preventDefault();
|
||||
e?.stopPropagation();
|
||||
setDraft(value);
|
||||
setError(null);
|
||||
setEditing(true);
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
setDraft(value);
|
||||
setError(null);
|
||||
setEditing(false);
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (saving) return;
|
||||
const next = draft.trim();
|
||||
if (next === value) {
|
||||
setEditing(false);
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
await updateConfig({ [fieldKey]: next } as Partial<SiteConfig>);
|
||||
setValue(next);
|
||||
setEditing(false);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Save failed');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
function onKey(e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
cancel();
|
||||
} else if (e.key === 'Enter' && !multiline) {
|
||||
e.preventDefault();
|
||||
save();
|
||||
} else if (e.key === 'Enter' && multiline && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault();
|
||||
save();
|
||||
}
|
||||
}
|
||||
|
||||
if (editing) {
|
||||
const sharedClass = `bg-crust border border-mauve/50 rounded px-2 py-0.5 outline-none focus:border-mauve text-text ${className}`;
|
||||
return (
|
||||
<span className="inline-flex items-baseline gap-2 max-w-full">
|
||||
{multiline ? (
|
||||
<textarea
|
||||
ref={el => { inputRef.current = el; }}
|
||||
value={draft}
|
||||
onChange={e => setDraft(e.target.value)}
|
||||
onKeyDown={onKey}
|
||||
onBlur={save}
|
||||
disabled={saving}
|
||||
rows={2}
|
||||
aria-label={ariaLabel}
|
||||
className={`${sharedClass} resize-y w-full max-w-full`}
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
ref={el => { inputRef.current = el; }}
|
||||
type="text"
|
||||
value={draft}
|
||||
onChange={e => setDraft(e.target.value)}
|
||||
onKeyDown={onKey}
|
||||
onBlur={save}
|
||||
disabled={saving}
|
||||
aria-label={ariaLabel}
|
||||
className={`${sharedClass} w-full max-w-full`}
|
||||
/>
|
||||
)}
|
||||
{error && <span className="text-xs text-red">{error}</span>}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const overlay = pencilPosition === 'overlay';
|
||||
|
||||
return (
|
||||
<span className={`relative inline-flex items-baseline gap-1.5 group/edit ${overlay ? 'block' : ''}`}>
|
||||
<span className={className}>{value}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={startEdit}
|
||||
title="Edit"
|
||||
aria-label={ariaLabel ? `Edit ${ariaLabel}` : 'Edit'}
|
||||
className={`text-subtext0 hover:text-mauve transition-colors p-0.5 rounded opacity-0 group-hover/edit:opacity-100 focus:opacity-100 ${
|
||||
overlay ? 'absolute -top-1 -right-5 md:-right-6' : ''
|
||||
}`}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="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>
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
import { useState, useEffect, type ReactElement } from 'react';
|
||||
import { useAuth } from '../../../stores/auth';
|
||||
import { getPosts, deletePost, ApiError } from '../../../lib/api';
|
||||
import type { Post } from '../../../lib/types';
|
||||
|
||||
export default function Dashboard() {
|
||||
const [posts, setPosts] = useState<Post[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const logout = useAuth(s => s.logout);
|
||||
|
||||
async function loadPosts() {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
setPosts(await getPosts());
|
||||
} catch (e) {
|
||||
setError(e instanceof ApiError ? e.message : 'Failed to load posts.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { loadPosts(); }, []);
|
||||
|
||||
async function handleDelete(slug: string) {
|
||||
if (!confirm(`Are you sure you want to delete "${slug}"?`)) return;
|
||||
try {
|
||||
await deletePost(slug);
|
||||
loadPosts();
|
||||
} catch {
|
||||
setError('Failed to delete post.');
|
||||
}
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
logout();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-end mb-4">
|
||||
<button onClick={handleLogout} className="text-red hover:text-maroon transition-colors font-medium">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<QuickLink href="/admin/editor" icon="write" title="Write Post" desc="Create or edit markdown posts." color="mauve" hoverColor="pink" />
|
||||
<QuickLink href="/admin/assets" icon="assets" title="Asset Library" desc="Manage images and uploads." color="teal" hoverColor="green" />
|
||||
<QuickLink href="/admin/settings" icon="settings" title="Settings" desc="Site title and themes." color="blue" hoverColor="sky" />
|
||||
</div>
|
||||
|
||||
{/* Posts List */}
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-mauve mb-6 flex items-center gap-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
||||
Manage Posts
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{loading && (
|
||||
<div className="animate-pulse flex space-x-4 p-8 glass">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-surface1 rounded w-3/4" />
|
||||
<div className="h-4 bg-surface1 rounded w-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{error && <div className="glass p-8 text-center text-red">{error}</div>}
|
||||
{!loading && posts.length === 0 && !error && (
|
||||
<div className="glass p-8 text-center text-subtext0">No posts yet.</div>
|
||||
)}
|
||||
{posts.map(post => (
|
||||
<div key={post.slug} className="glass p-6 flex justify-between items-center group hover:bg-surface0/50 transition-colors">
|
||||
<div>
|
||||
<h3 className="font-bold text-lavender text-lg">{post.title || post.slug}</h3>
|
||||
<p className="text-xs text-subtext0" style={{ color: 'var(--subtext0)' }}>/posts/{post.slug}</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<a href={`/admin/editor?edit=${encodeURIComponent(post.slug)}`} className="p-2 text-blue hover:bg-blue/10 rounded transition-colors" title="Edit">
|
||||
<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="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>
|
||||
<button onClick={() => handleDelete(post.slug)} className="p-2 text-red hover:bg-red/10 rounded transition-colors" title="Delete">
|
||||
<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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const ICONS: Record<string, ReactElement> = {
|
||||
write: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>,
|
||||
assets: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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>,
|
||||
settings: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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>,
|
||||
};
|
||||
|
||||
function QuickLink({ href, icon, title, desc, color, hoverColor }: { href: string; icon: string; title: string; desc: string; color: string; hoverColor: string }) {
|
||||
return (
|
||||
<a href={href} className="group">
|
||||
<div className="bg-surface0/50 p-8 rounded-xl border border-white/5 transition-all hover:bg-surface0 hover:scale-[1.02] h-full flex flex-col items-center text-center gap-4">
|
||||
<div className={`bg-${color}/20 p-4 rounded-full text-${color}`}>
|
||||
{ICONS[icon]}
|
||||
</div>
|
||||
<div>
|
||||
<h2 className={`text-xl font-bold text-lavender group-hover:text-${hoverColor} transition-colors`}>{title}</h2>
|
||||
<p className="text-xs text-subtext0 mt-1">{desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -7,56 +7,32 @@ interface Props {
|
||||
}
|
||||
|
||||
const { title, wide = false } = Astro.props;
|
||||
|
||||
if (Astro.cookies.get('admin_session')?.value !== '1') {
|
||||
return Astro.redirect('/admin/login');
|
||||
}
|
||||
---
|
||||
|
||||
<Layout title={title} wide={wide}>
|
||||
<Fragment slot="head">
|
||||
<script is:inline>
|
||||
(function () {
|
||||
try {
|
||||
var authed = document.cookie.split(';').some(function (c) {
|
||||
return c.trim().indexOf('admin_session=1') === 0;
|
||||
});
|
||||
if (!authed) {
|
||||
window.location.replace('/admin/login');
|
||||
return;
|
||||
}
|
||||
document.documentElement.classList.add('admin-authed');
|
||||
} catch (e) {
|
||||
window.location.replace('/admin/login');
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</Fragment>
|
||||
|
||||
<div class="glass p-6 md:p-12 mb-12" id="admin-content">
|
||||
<header class="mb-8 md:mb-12 border-b border-white/5 pb-8 md:pb-12 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
||||
<div>
|
||||
<a id="back-link" href="/admin" class="text-blue hover:text-sky transition-colors mb-4 md:mb-8 inline-flex items-center gap-2 group text-sm md:text-base">
|
||||
<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
|
||||
<div class="space-y-6 md:space-y-10">
|
||||
<header class="flex flex-col md:flex-row md:items-end justify-between gap-4 pb-6 border-b border-surface1/40">
|
||||
<div class="flex-1 min-w-0">
|
||||
<a href="/" class="inline-flex items-center gap-1.5 text-xs text-subtext0 hover:text-text transition-colors mb-2 group">
|
||||
<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="transition-transform group-hover:-translate-x-0.5" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
|
||||
Back to site
|
||||
</a>
|
||||
<h1 class="text-3xl md:text-4xl font-extrabold text-mauve">
|
||||
<h1 class="text-2xl md:text-4xl font-bold text-mauve tracking-tight">
|
||||
{title}
|
||||
</h1>
|
||||
<slot name="header-subtitle" />
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 w-full md:w-auto">
|
||||
<div class="flex flex-wrap items-center gap-2 shrink-0">
|
||||
<slot name="header-actions" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const backLink = document.getElementById('back-link');
|
||||
if (backLink && document.referrer && document.referrer.includes(window.location.host) && !document.referrer.includes('/admin/login')) {
|
||||
backLink.addEventListener('click', (ev) => {
|
||||
ev.preventDefault();
|
||||
window.history.back();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
@@ -7,6 +7,7 @@ import '@fontsource-variable/jetbrains-mono';
|
||||
import ThemeSwitcher from '../components/react/ThemeSwitcher';
|
||||
import Search from '../components/react/Search';
|
||||
import LogoutButton from '../components/react/LogoutButton';
|
||||
import EditableText from '../components/react/EditableText';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
@@ -80,10 +81,34 @@ const fullTitle = `${title} | ${siteConfig.title}`;
|
||||
<nav class="max-w-6xl mx-auto px-4 md:px-6 py-4 md:py-8">
|
||||
<header class="glass px-4 py-3 md:px-6 md:py-4 flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<div class="w-full md:w-auto text-center md:text-left">
|
||||
{isAdmin ? (
|
||||
<EditableText
|
||||
client:load
|
||||
initial={siteConfig.title}
|
||||
fieldKey="title"
|
||||
isAdmin
|
||||
ariaLabel="site title"
|
||||
className="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-mauve to-blue inline-block"
|
||||
/>
|
||||
) : (
|
||||
<a href="/" class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-mauve to-blue block">
|
||||
{siteConfig.title}
|
||||
</a>
|
||||
)}
|
||||
{isAdmin ? (
|
||||
<div class="text-[8px] md:text-[10px] text-subtext0 uppercase tracking-widest">
|
||||
<EditableText
|
||||
client:load
|
||||
initial={siteConfig.subtitle}
|
||||
fieldKey="subtitle"
|
||||
isAdmin
|
||||
ariaLabel="site subtitle"
|
||||
className="inline"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<p class="text-[8px] md:text-[10px] text-subtext0 uppercase tracking-widest">{siteConfig.subtitle}</p>
|
||||
)}
|
||||
</div>
|
||||
<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 px-2 py-1">Home</a>
|
||||
@@ -91,9 +116,9 @@ const fullTitle = `${title} | ${siteConfig.title}`;
|
||||
{isAdmin && (
|
||||
<div class="flex items-center gap-1 pl-2 ml-1 border-l border-surface1/60">
|
||||
<a
|
||||
href="/admin"
|
||||
href="/"
|
||||
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"
|
||||
title="Signed in as admin"
|
||||
>
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-mauve animate-pulse"></span>
|
||||
Admin
|
||||
@@ -111,7 +136,18 @@ const fullTitle = `${title} | ${siteConfig.title}`;
|
||||
</main>
|
||||
|
||||
<footer class="max-w-6xl mx-auto px-4 md:px-6 py-8 md:py-12 text-center text-xs md:text-sm text-subtext1 border-t border-white/5 mt-8 md:mt-12">
|
||||
<p class="mb-2">{siteConfig.footer}</p>
|
||||
<p class="mb-2">
|
||||
{isAdmin ? (
|
||||
<EditableText
|
||||
client:load
|
||||
initial={siteConfig.footer}
|
||||
fieldKey="footer"
|
||||
isAdmin
|
||||
ariaLabel="footer text"
|
||||
className="inline"
|
||||
/>
|
||||
) : siteConfig.footer}
|
||||
</p>
|
||||
<div class="text-xs text-subtext0 mb-2">
|
||||
<a href="/feed.xml" class="hover:text-mauve transition-colors">RSS</a>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
import AdminLayout from '../../layouts/AdminLayout.astro';
|
||||
import Dashboard from '../../components/react/admin/Dashboard';
|
||||
return Astro.redirect('/', 302);
|
||||
---
|
||||
|
||||
<AdminLayout title="Admin Dashboard">
|
||||
<Dashboard client:only="react" />
|
||||
</AdminLayout>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import PostList from '../components/react/PostList';
|
||||
import EditableText from '../components/react/EditableText';
|
||||
import AssetsButton from '../components/react/AssetsButton';
|
||||
|
||||
const API_URL = process.env.PUBLIC_API_URL || 'http://localhost:3000';
|
||||
|
||||
@@ -48,11 +50,34 @@ const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
|
||||
<Layout title="Home" description={siteConfig.welcome_subtitle}>
|
||||
<div class="space-y-6 md:space-y-8">
|
||||
<section class="text-center py-6 md:py-12">
|
||||
<h1 class="text-3xl md:text-5xl font-extrabold mb-3 md:mb-4 pb-2 md:pb-4 leading-tight bg-clip-text text-transparent bg-gradient-to-r from-mauve via-blue to-teal">
|
||||
<h1 class="text-3xl md:text-5xl font-extrabold mb-3 md:mb-4 pb-2 md:pb-4 leading-tight">
|
||||
{isAdmin ? (
|
||||
<EditableText
|
||||
client:load
|
||||
initial={siteConfig.welcome_title}
|
||||
fieldKey="welcome_title"
|
||||
isAdmin
|
||||
ariaLabel="welcome title"
|
||||
className="bg-clip-text text-transparent bg-gradient-to-r from-mauve via-blue to-teal"
|
||||
/>
|
||||
) : (
|
||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-mauve via-blue to-teal">
|
||||
{siteConfig.welcome_title}
|
||||
</span>
|
||||
)}
|
||||
</h1>
|
||||
<p class="text-subtext1 text-base md:text-lg max-w-2xl mx-auto px-4 md:px-0">
|
||||
{siteConfig.welcome_subtitle}
|
||||
{isAdmin ? (
|
||||
<EditableText
|
||||
client:load
|
||||
initial={siteConfig.welcome_subtitle}
|
||||
fieldKey="welcome_subtitle"
|
||||
isAdmin
|
||||
ariaLabel="welcome subtitle"
|
||||
multiline
|
||||
className="inline"
|
||||
/>
|
||||
) : siteConfig.welcome_subtitle}
|
||||
</p>
|
||||
|
||||
{isAdmin && (
|
||||
@@ -64,13 +89,7 @@ const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
|
||||
<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>
|
||||
<AssetsButton client:load />
|
||||
<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"
|
||||
|
||||
@@ -298,10 +298,6 @@ code, pre, kbd, samp {
|
||||
/* KaTeX inherits prose color */
|
||||
.katex { color: var(--text); }
|
||||
|
||||
/* Admin auth gate — set by inline head script before paint */
|
||||
html:not(.admin-authed) #admin-content { display: none; }
|
||||
.admin-authed #admin-content { display: block; }
|
||||
|
||||
/* Skeleton loader */
|
||||
.skeleton {
|
||||
background: linear-gradient(
|
||||
|
||||
Reference in New Issue
Block a user