159 lines
5.2 KiB
Plaintext
159 lines
5.2 KiB
Plaintext
---
|
|
import '../styles/global.css';
|
|
import 'katex/dist/katex.min.css';
|
|
import 'highlight.js/styles/atom-one-dark.css';
|
|
import '@fontsource-variable/fraunces';
|
|
import '@fontsource-variable/eb-garamond';
|
|
import '@fontsource/caveat';
|
|
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;
|
|
wide?: boolean;
|
|
description?: string;
|
|
image?: string;
|
|
type?: 'website' | 'article';
|
|
}
|
|
|
|
const { title, wide = false, description, image, type = 'website' } = Astro.props;
|
|
|
|
const API_URL = process.env.PUBLIC_API_URL || 'http://backend:3000';
|
|
const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
|
|
|
|
let siteConfig = {
|
|
title: "Ela's Atelier",
|
|
subtitle: "Works on paper, canvas, and elsewhere",
|
|
footer: "Hand-arranged with care",
|
|
favicon: "/favicon.svg",
|
|
theme: "salon",
|
|
custom_css: ""
|
|
};
|
|
|
|
try {
|
|
const res = await fetch(`${API_URL}/api/config`);
|
|
if (res.ok) {
|
|
siteConfig = await res.json();
|
|
}
|
|
} catch (e) {
|
|
console.error("Failed to fetch config:", e);
|
|
}
|
|
|
|
const fullTitle = `${title} · ${siteConfig.title}`;
|
|
const year = new Date().getFullYear();
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<link rel="icon" href={siteConfig.favicon} />
|
|
<meta name="generator" content={Astro.generator} />
|
|
<title>{fullTitle}</title>
|
|
{description && <meta name="description" content={description} />}
|
|
<meta property="og:title" content={fullTitle} />
|
|
{description && <meta property="og:description" content={description} />}
|
|
<meta property="og:type" content={type} />
|
|
<meta property="og:site_name" content={siteConfig.title} />
|
|
<meta property="og:url" content={Astro.url.href} />
|
|
{image && <meta property="og:image" content={image} />}
|
|
<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} />
|
|
<meta name="twitter:title" content={fullTitle} />
|
|
{description && <meta name="twitter:description" content={description} />}
|
|
{image && <meta name="twitter:image" content={image} />}
|
|
<link rel="alternate" type="application/rss+xml" title={siteConfig.title} href="/feed.xml" />
|
|
{siteConfig.custom_css && <style set:html={siteConfig.custom_css} />}
|
|
<script is:inline define:vars={{ defaultTheme: siteConfig.theme }}>
|
|
const savedTheme = localStorage.getItem('user-theme') || defaultTheme || 'salon';
|
|
document.documentElement.classList.add(savedTheme);
|
|
</script>
|
|
<slot name="head" />
|
|
</head>
|
|
<body class="text-text">
|
|
<div class="salon-atmosphere" aria-hidden="true"></div>
|
|
|
|
<header class="border-b border-[var(--surface2)]/60">
|
|
<div class="max-w-6xl mx-auto px-6 md:px-10 py-5 md:py-7 flex flex-col md:flex-row md:items-end gap-4 md:gap-6">
|
|
<a href="/" class="nameplate group" aria-label="Home">
|
|
{isAdmin ? (
|
|
<EditableText
|
|
client:load
|
|
initial={siteConfig.title}
|
|
fieldKey="title"
|
|
isAdmin
|
|
ariaLabel="site title"
|
|
className="nameplate-title"
|
|
/>
|
|
) : (
|
|
<span class="nameplate-title group-hover:text-[var(--mauve)] transition-colors">{siteConfig.title}</span>
|
|
)}
|
|
{isAdmin ? (
|
|
<EditableText
|
|
client:load
|
|
initial={siteConfig.subtitle}
|
|
fieldKey="subtitle"
|
|
isAdmin
|
|
ariaLabel="site subtitle"
|
|
className="nameplate-subtitle"
|
|
/>
|
|
) : (
|
|
<span class="nameplate-subtitle">{siteConfig.subtitle}</span>
|
|
)}
|
|
</a>
|
|
|
|
<div class="flex flex-wrap items-center gap-3 justify-start md:justify-end">
|
|
<Search client:load />
|
|
{isAdmin && (
|
|
<div class="flex items-center gap-1 pl-3 ml-1 border-l border-[var(--surface2)]/60">
|
|
<a
|
|
href="/admin"
|
|
class="chip chip-accent uppercase"
|
|
title="Signed in as artist"
|
|
>
|
|
<span class="w-1.5 h-1.5 rounded-full bg-[var(--rosewater)] animate-pulse"></span>
|
|
Artist
|
|
</a>
|
|
<LogoutButton client:load />
|
|
</div>
|
|
)}
|
|
<ThemeSwitcher client:only="react" defaultTheme={siteConfig.theme} />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class={`mx-auto px-6 md:px-10 py-10 md:py-16 ${wide ? 'max-w-[95vw]' : 'max-w-6xl'}`}>
|
|
<slot />
|
|
</main>
|
|
|
|
<footer class="max-w-6xl mx-auto px-6 md:px-10 py-12 md:py-16 text-center border-t border-[var(--surface2)]/40 mt-12">
|
|
<div class="section-rule mb-6">
|
|
<span class="ornament">✦</span>
|
|
<span class="font-display italic text-[var(--subtext0)] text-sm">end of catalogue</span>
|
|
<span class="ornament">✦</span>
|
|
</div>
|
|
<p class="font-display italic text-base text-[var(--subtext1)] 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-[var(--subtext0)] tracking-[0.2em] uppercase mb-3">
|
|
<a href="/feed.xml" class="hover:text-[var(--mauve)] transition-colors">RSS Feed</a>
|
|
</div>
|
|
<div class="text-[var(--overlay0)] text-xs italic">
|
|
© {year} · {siteConfig.title}
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|