added contact page

2026-05-14 17:06:27 +02:00
parent b0f2634346
commit 0102c89d81
6 changed files with 290 additions and 5 deletions
@@ -1,6 +1,15 @@
 import { useState, useEffect } from 'react';
 import { getConfig, updateConfig, ApiError } from '../../../lib/api';
-import type { SiteConfig } from '../../../lib/types';
+import type { SiteConfig, ContactLink } from '../../../lib/types';
+
+const CONTACT_KINDS: { value: string; label: string; placeholder: string }[] = [
+  { value: 'email', label: 'Email', placeholder: 'you@example.com' },
+  { value: 'mastodon', label: 'Mastodon', placeholder: 'https://mastodon.social/@you' },
+  { value: 'bluesky', label: 'Bluesky', placeholder: 'https://bsky.app/profile/you.bsky.social' },
+  { value: 'github', label: 'GitHub', placeholder: 'https://github.com/you' },
+  { value: 'instagram', label: 'Instagram', placeholder: 'https://instagram.com/you' },
+  { value: 'url', label: 'Other link', placeholder: 'https://…' },
+];

 export default function Settings() {
  const [config, setConfig] = useState<Partial<SiteConfig>>({});
@@ -17,10 +26,30 @@ export default function Settings() {
    setTimeout(() => setAlert(null), 5000);
  }

-  function update(key: keyof SiteConfig, value: string) {
+  function update<K extends keyof SiteConfig>(key: K, value: SiteConfig[K]) {
    setConfig(prev => ({ ...prev, [key]: value }));
  }

+  const contactLinks: ContactLink[] = config.contact_links ?? [];
+
+  function updateContactLink(index: number, patch: Partial<ContactLink>) {
+    const next = contactLinks.map((row, i) => (i === index ? { ...row, ...patch } : row));
+    update('contact_links', next);
+  }
+  function addContactLink() {
+    update('contact_links', [...contactLinks, { kind: 'email', label: 'Email', value: '' }]);
+  }
+  function removeContactLink(index: number) {
+    update('contact_links', contactLinks.filter((_, i) => i !== index));
+  }
+  function moveContactLink(index: number, dir: -1 | 1) {
+    const target = index + dir;
+    if (target < 0 || target >= contactLinks.length) return;
+    const next = [...contactLinks];
+    [next[index], next[target]] = [next[target], next[index]];
+    update('contact_links', next);
+  }
+
  async function handleSubmit(e: React.SyntheticEvent) {
    e.preventDefault();
    try {
@@ -85,6 +114,101 @@ export default function Settings() {
        </div>
      </section>

+      <section className="space-y-6">
+        <h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--peach)] pl-4">Contact</h2>
+        <div>
+          <label className="field-label">Intro text (shown above links)</label>
+          <textarea
+            value={config.contact_intro || ''}
+            onChange={e => update('contact_intro', e.target.value)}
+            rows={3}
+            className="field-input"
+            placeholder="A short note for visitors who want to reach out."
+          />
+        </div>
+
+        <div className="space-y-4">
+          <label className="field-label">Contact links</label>
+          {contactLinks.length === 0 && (
+            <p className="text-[11px] font-display italic text-[var(--subtext0)] tracking-wider">
+              No links yet. Add one below to populate the contact page.
+            </p>
+          )}
+          {contactLinks.map((row, i) => (
+            <div
+              key={i}
+              className="grid md:grid-cols-[160px_1fr_1fr_auto] gap-3 items-end p-3 border border-[var(--surface2)]/60"
+              style={{ borderRadius: 1 }}
+            >
+              <div>
+                <label className="field-label">Kind</label>
+                <select
+                  value={row.kind}
+                  onChange={e => updateContactLink(i, { kind: e.target.value })}
+                  className="field-input font-display italic"
+                >
+                  {CONTACT_KINDS.map(k => (
+                    <option key={k.value} value={k.value}>{k.label}</option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="field-label">Label</label>
+                <input
+                  type="text"
+                  value={row.label}
+                  onChange={e => updateContactLink(i, { label: e.target.value })}
+                  className="field-input"
+                  placeholder="Displayed name"
+                />
+              </div>
+              <div>
+                <label className="field-label">{row.kind === 'email' ? 'Address' : 'URL'}</label>
+                <input
+                  type="text"
+                  value={row.value}
+                  onChange={e => updateContactLink(i, { value: e.target.value })}
+                  className="field-input"
+                  placeholder={CONTACT_KINDS.find(k => k.value === row.kind)?.placeholder ?? ''}
+                />
+              </div>
+              <div className="flex gap-1 items-center pb-1">
+                <button
+                  type="button"
+                  onClick={() => moveContactLink(i, -1)}
+                  disabled={i === 0}
+                  className="chip disabled:opacity-30"
+                  aria-label="Move up"
+                  title="Move up"
+                >↑</button>
+                <button
+                  type="button"
+                  onClick={() => moveContactLink(i, 1)}
+                  disabled={i === contactLinks.length - 1}
+                  className="chip disabled:opacity-30"
+                  aria-label="Move down"
+                  title="Move down"
+                >↓</button>
+                <button
+                  type="button"
+                  onClick={() => removeContactLink(i)}
+                  className="chip text-[var(--red)]"
+                  aria-label="Remove link"
+                  title="Remove"
+                >✕</button>
+              </div>
+            </div>
+          ))}
+          <button
+            type="button"
+            onClick={addContactLink}
+            className="chip chip-accent uppercase"
+          >
+            + Add contact link
+          </button>
+        </div>
+      </section>
+
      <section className="space-y-6">
        <h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--teal)] pl-4">Footer</h2>
        <Field label="Footer text" value={config.footer || ''} onChange={v => update('footer', v)} />
@@ -24,13 +24,22 @@ const { title, wide = false, description, image, type = 'website' } = Astro.prop
 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: string;
+	subtitle: string;
+	footer: string;
+	favicon: string;
+	theme: string;
+	custom_css: string;
+	contact_links?: { kind: string; label: string; value: string }[];
+} = {
 	title: "Ela's Atelier",
 	subtitle: "Works on paper, canvas, and elsewhere",
 	footer: "Hand-arranged with care",
 	favicon: "/favicon.svg",
 	theme: "salon",
-	custom_css: ""
+	custom_css: "",
+	contact_links: []
 };

 try {
@@ -44,6 +53,7 @@ try {

 const fullTitle = `${title} · ${siteConfig.title}`;
 const year = new Date().getFullYear();
+const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 ---

 <!doctype html>
@@ -147,8 +157,14 @@ const year = new Date().getFullYear();
 					/>
 				) : siteConfig.footer}
 			</p>
-			<div class="text-xs text-[var(--subtext0)] tracking-[0.2em] uppercase mb-3">
+			<div class="text-xs text-[var(--subtext0)] tracking-[0.2em] uppercase mb-3 flex items-center justify-center gap-3">
 				<a href="/feed.xml" class="hover:text-[var(--mauve)] transition-colors">RSS Feed</a>
+				{hasContact && (
+					<>
+						<span class="text-[var(--overlay0)]" aria-hidden="true">·</span>
+						<a href="/contact" class="hover:text-[var(--mauve)] transition-colors">Contact</a>
+					</>
+				)}
 			</div>
 			<div class="text-[var(--overlay0)] text-xs italic">
 				&copy; {year} · {siteConfig.title}
@@ -10,6 +10,14 @@ export interface Post {
  reading_time: number;
 }

+export type ContactKind = 'email' | 'mastodon' | 'github' | 'bluesky' | 'instagram' | 'url';
+
+export interface ContactLink {
+  kind: ContactKind | string;
+  label: string;
+  value: string;
+}
+
 export interface SiteConfig {
  title: string;
  subtitle: string;
@@ -19,6 +27,8 @@ export interface SiteConfig {
  favicon: string;
  theme: string;
  custom_css: string;
+  contact_intro: string;
+  contact_links: ContactLink[];
 }

 export interface Asset {
@@ -0,0 +1,116 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+interface ContactLink {
+	kind: string;
+	label: string;
+	value: string;
+}
+
+interface SiteConfig {
+	contact_intro?: string;
+	contact_links?: ContactLink[];
+}
+
+const API_URL = process.env.PUBLIC_API_URL || 'http://localhost:3000';
+
+let siteConfig: SiteConfig = {};
+let error = '';
+
+try {
+	const res = await fetch(`${API_URL}/api/config`);
+	if (res.ok) {
+		siteConfig = await res.json();
+	} else {
+		error = 'Failed to load contact details.';
+	}
+} catch (e) {
+	error = `Could not connect to backend: ${e instanceof Error ? e.message : String(e)}`;
+	console.error(error);
+}
+
+const links: ContactLink[] = siteConfig.contact_links ?? [];
+const intro = siteConfig.contact_intro ?? '';
+
+function hrefFor(link: ContactLink): string {
+	const v = link.value.trim();
+	if (link.kind === 'email') {
+		return v.startsWith('mailto:') ? v : `mailto:${v}`;
+	}
+	return v;
+}
+
+function isExternal(link: ContactLink): boolean {
+	return link.kind !== 'email';
+}
+
+const KIND_LABEL: Record<string, string> = {
+	email: 'Email',
+	mastodon: 'Mastodon',
+	bluesky: 'Bluesky',
+	github: 'GitHub',
+	instagram: 'Instagram',
+	url: 'Link',
+};
+---
+
+<Layout title="Contact" description="Get in touch.">
+	<section class="max-w-2xl mx-auto">
+		<div class="mb-10 md:mb-14">
+			<div class="font-display italic text-[var(--subtext0)] text-xs tracking-[0.3em] uppercase mb-4">Correspondence</div>
+			<h1 class="font-display italic font-semibold text-[var(--text)] text-5xl md:text-6xl leading-[0.95] tracking-tight mb-6">
+				Get in touch
+			</h1>
+			{intro && (
+				<p class="font-sans text-lg text-[var(--subtext1)] leading-relaxed whitespace-pre-line">
+					{intro}
+				</p>
+			)}
+		</div>
+
+		{error && (
+			<div class="glass p-6 text-center mb-8 border-[var(--red)]/40">
+				<p class="font-display italic text-[var(--red)]">{error}</p>
+			</div>
+		)}
+
+		{links.length === 0 && !error && (
+			<div class="glass p-10 text-center">
+				<p class="font-display italic text-[var(--subtext0)] text-lg">
+					No contact channels listed yet.
+				</p>
+			</div>
+		)}
+
+		{links.length > 0 && (
+			<ul class="space-y-3">
+				{links.map((link) => (
+					<li>
+						<a
+							href={hrefFor(link)}
+							{...(isExternal(link) ? { target: '_blank', rel: 'noopener noreferrer me' } : {})}
+							class="group flex items-baseline justify-between gap-4 px-5 py-4 border border-[var(--surface2)]/60 hover:border-[var(--mauve)]/60 transition-colors"
+							style="border-radius: 1px"
+						>
+							<div class="min-w-0">
+								<div class="font-display italic text-xs uppercase tracking-[0.25em] text-[var(--subtext0)] mb-1">
+									{KIND_LABEL[link.kind] ?? link.kind}
+								</div>
+								<div class="font-display italic text-xl md:text-2xl text-[var(--text)] group-hover:text-[var(--mauve)] transition-colors truncate">
+									{link.label}
+								</div>
+							</div>
+							<div class="font-mono text-xs text-[var(--subtext0)] hidden md:block truncate max-w-[40%]" title={link.value}>
+								{link.value}
+							</div>
+						</a>
+					</li>
+				))}
+			</ul>
+		)}
+
+		<div class="section-rule mt-16">
+			<span class="ornament">✦</span>
+		</div>
+	</section>
+</Layout>