@acms-subir/core 0.2.0 → 0.3.1

package/src/pages/admin/calendar/calendars.astro

@@ -0,0 +1,265 @@
+---
+import Admin from '../../../layouts/Admin.astro';
+import Modal from '../../../components/Modal.astro';
+import { getRepo } from '../../../lib/repo';
+import { slugify, type CalendarVisibility } from '../../../lib/schema';
+import { CALENDAR, calendarFeedUrl, calendarPageUrl } from '../../../lib/calendar/config';
+import { safeColor } from '../../../lib/calendar/events';
+import { normalizeCalendarSrc } from '../../../lib/calendar/src';
+import { loadFeed } from '../../../lib/calendar/ics';
+import { siteOrigin } from '../../../lib/seo';
+
+// Calendars: create/edit native calendars and live feed subscriptions, set
+// who can see each one, and copy the subscribe links people paste into
+// Google Calendar, Apple Calendar or Outlook.
+if (!CALENDAR.enabled) return new Response(null, { status: 404, statusText: 'Not found' });
+
+const repo = await getRepo(Astro.locals);
+const settings = await repo.getSettings();
+const origin = siteOrigin(settings, Astro.url);
+const back = (notice?: string) => Astro.redirect(`/admin/calendar/calendars${notice ? `?notice=${encodeURIComponent(notice)}` : ''}`);
+const VIS: CalendarVisibility[] = ['public', 'unlisted', 'private'];
+const token = () => {
+  const bytes = crypto.getRandomValues(new Uint8Array(18));
+  return btoa(String.fromCharCode(...bytes)).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+};
+async function freeSlug(raw: string, selfId?: string) {
+  const base = slugify(raw);
+  let slug = base;
+  for (let n = 2; ; n++) {
+    const hit = await repo.getCalendarBySlug(slug);
+    if (!hit || hit.id === selfId) return slug;
+    slug = `${base}-${n}`;
+  }
+}
+
+if (Astro.request.method === 'POST') {
+  const form = await Astro.request.formData();
+  // the edit modal's Delete button overrides the hidden op (it comes later
+  // in the form, so it's the last value)
+  const ops = form.getAll('op');
+  const op = String(ops[ops.length - 1]);
+  const id = String(form.get('id') || '');
+  const name = String(form.get('name') || '').trim().slice(0, 120);
+  const visibility = VIS.find((v) => v === form.get('visibility')) ?? 'public';
+  const color = safeColor(String(form.get('color') || '#4f46e5'));
+  const description = String(form.get('description') || '').slice(0, 1000);
+
+  if (op === 'create' || op === 'subscribe') {
+    if (!name) return back('Give the calendar a name.');
+    let feedUrl = '';
+    if (op === 'subscribe') {
+      feedUrl = normalizeCalendarSrc(String(form.get('feedUrl') || '')) ?? '';
+      if (!feedUrl) return back('Paste a Google Calendar link, a calendar ID, or an .ics feed URL.');
+      try { await loadFeed(feedUrl, Date.now()); } catch (err) { return back(err instanceof Error ? err.message : 'Couldn’t load that feed.'); }
+    }
+    await repo.createCalendar({ name, slug: await freeSlug(String(form.get('slug') || name)), color, description, visibility, kind: op === 'subscribe' ? 'feed' : 'native', feedUrl });
+    return back(`Created “${name}”.`);
+  }
+  const cal = id ? await repo.getCalendar(id) : null;
+  if (!cal) return back('That calendar no longer exists.');
+  if (op === 'update') {
+    let feedUrl = cal.feedUrl;
+    if (cal.kind === 'feed' && form.has('feedUrl') && String(form.get('feedUrl')) !== cal.feedUrl) {
+      feedUrl = normalizeCalendarSrc(String(form.get('feedUrl'))) ?? '';
+      if (!feedUrl) return back('Paste a Google Calendar link, a calendar ID, or an .ics feed URL.');
+    }
+    await repo.updateCalendar(cal.id, {
+      name: name || cal.name, slug: await freeSlug(String(form.get('slug') || name || cal.slug), cal.id),
+      color, description, visibility, feedUrl,
+    });
+    return back(`Saved “${name || cal.name}”.`);
+  }
+  if (op === 'rotate') {
+    await repo.updateCalendar(cal.id, { feedToken: token() });
+    return back('New private link created — the old one stopped working.');
+  }
+  if (op === 'move') {
+    const ids = (await repo.listCalendars()).map((c) => c.id);
+    const i = ids.indexOf(cal.id);
+    const j = form.get('dir') === 'up' ? i - 1 : i + 1;
+    if (j >= 0 && j < ids.length) [ids[i], ids[j]] = [ids[j], ids[i]];
+    await repo.reorderCalendars(ids);
+    return back();
+  }
+  if (op === 'delete') {
+    await repo.deleteCalendar(cal.id);
+    return back(`Deleted “${cal.name}”. Its events are still there, just unfiled.`);
+  }
+}
+
+const [calendars, events] = await Promise.all([repo.listCalendars(), repo.listEvents()]);
+const counts = new Map<string, number>();
+for (const e of events) for (const id of e.calendarIds) counts.set(id, (counts.get(id) ?? 0) + 1);
+const notice = Astro.url.searchParams.get('notice') ?? '';
+const feedFor = (c: (typeof calendars)[number]) =>
+  origin + calendarFeedUrl(c.slug) + (c.visibility === 'private' ? `?t=${encodeURIComponent(c.feedToken)}` : '');
+const hostOf = (u: string) => { try { return new URL(u).hostname.replace(/^www\./, ''); } catch { return u; } };
+const VIS_LABEL: Record<CalendarVisibility, string> = {
+  public: 'Public — listed on the calendar page',
+  unlisted: 'Unlisted — event pages and feed work, not listed',
+  private: 'Private — admins and the secret feed link only',
+};
+const I = {
+  up: 'M6 15l6-6 6 6', down: 'M6 9l6 6 6-6', copy: 'M9 9h10v10H9zM5 15V5h10',
+  ext: 'M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5',
+};
+---
+
+<Admin title="Calendars" section="calendar:calendars">
+  <div class="page-head">
+    <div>
+      <h1>Calendars</h1>
+      <p class="sub">Group events, choose who sees them, and share subscribe links for Google, Apple and Outlook.</p>
+    </div>
+    <div class="page-actions">
+      <button class="btn" type="button" data-modal="cal-subscribe">Subscribe to a feed</button>
+      <button class="btn primary" type="button" data-modal="cal-new">New calendar</button>
+    </div>
+  </div>
+
+  {notice && <p class="notice" role="status">{notice}</p>}
+
+  <section class="card cal-allfeed">
+    <div>
+      <b>Everything public</b>
+      <small>One link with every public calendar — paste it into any calendar app.</small>
+    </div>
+    <div class="cal-feed">
+      <input type="text" class="mono" readonly value={origin + calendarFeedUrl()} aria-label="Subscribe link for all public calendars" />
+      <button class="btn sm" type="button" data-copy={origin + calendarFeedUrl()}>Copy</button>
+    </div>
+  </section>
+
+  {calendars.length === 0 ? (
+    <div class="empty-state">
+      <b>No calendars yet</b>
+      <p>Events work without calendars. Add some to color-code events, filter the calendar page, and give each group its own subscribe link.</p>
+      <div class="empty-actions">
+        <button class="btn" type="button" data-modal="cal-subscribe">Subscribe to a feed</button>
+        <button class="btn primary" type="button" data-modal="cal-new">New calendar</button>
+      </div>
+    </div>
+  ) : (
+    <div class="cal-list">
+      {calendars.map((c, i) => (
+        <article class="cal-row" id={`cal-${c.id}`}>
+          <i class="cal-dot lg" style={`background:${safeColor(c.color)}`} aria-hidden="true" />
+          <div class="cal-main">
+            <div class="cal-title">
+              <b>{c.name}</b>
+              {c.kind === 'feed' && <span class="pill lang">Feed · {hostOf(c.feedUrl)}</span>}
+              <span class={`cal-vis is-${c.visibility}`}>{c.visibility[0].toUpperCase() + c.visibility.slice(1)}</span>
+            </div>
+            <small>
+              {c.kind === 'feed' ? 'Live mirror, refreshed every few minutes · read-only' : `${counts.get(c.id) ?? 0} event${counts.get(c.id) === 1 ? '' : 's'}`}
+              {c.description && ` · ${c.description}`}
+            </small>
+            {c.visibility !== 'private' || c.feedToken ? (
+              <div class="cal-feed">
+                <input type="text" class="mono" readonly value={feedFor(c)} aria-label={`Subscribe link for ${c.name}`} />
+                <button class="btn sm" type="button" data-copy={feedFor(c)}>Copy</button>
+                {c.visibility === 'private' && (
+                  <form method="post">
+                    <input type="hidden" name="op" value="rotate" /><input type="hidden" name="id" value={c.id} />
+                    <button class="btn sm ghost" type="submit" data-confirm="Make a new private link? Anyone subscribed with the old one stops getting updates.">New link</button>
+                  </form>
+                )}
+              </div>
+            ) : null}
+          </div>
+          <div class="cal-actions">
+            {c.visibility !== 'private' && (
+              <a class="icon-btn" href={calendarPageUrl(c.slug)} target="_blank" rel="noopener" title="View on site" aria-label="View on site">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={I.ext} /></svg>
+              </a>
+            )}
+            <form method="post" class="cal-move">
+              <input type="hidden" name="op" value="move" /><input type="hidden" name="id" value={c.id} />
+              <button class="icon-btn" name="dir" value="up" disabled={i === 0} title="Move up" aria-label="Move up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d={I.up} /></svg></button>
+              <button class="icon-btn" name="dir" value="down" disabled={i === calendars.length - 1} title="Move down" aria-label="Move down"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d={I.down} /></svg></button>
+            </form>
+            <button class="btn sm" type="button" data-modal={`cal-edit-${c.id}`}>Edit</button>
+          </div>
+          <Modal id={`cal-edit-${c.id}`} title={`Edit ${c.name}`}>
+            <form method="post">
+              <input type="hidden" name="op" value="update" /><input type="hidden" name="id" value={c.id} />
+              <div class="field-row">
+                <label class="field"><span>Name</span><input type="text" name="name" value={c.name} required /></label>
+                <label class="field"><span>Color</span><input type="color" name="color" value={safeColor(c.color)} /></label>
+              </div>
+              <label class="field"><span>URL name</span><input class="mono" type="text" name="slug" value={c.slug} /></label>
+              {c.kind === 'feed' && <label class="field"><span>Feed link</span><input class="mono" type="text" name="feedUrl" value={c.feedUrl} /></label>}
+              <label class="field"><span>Description</span><input type="text" name="description" value={c.description} placeholder="Shown on the calendar page filter" /></label>
+              <label class="field">
+                <span>Who can see it</span>
+                <select name="visibility">
+                  {VIS.map((v) => <option value={v} selected={c.visibility === v}>{VIS_LABEL[v]}</option>)}
+                </select>
+              </label>
+              <div class="modal-foot">
+                <button class="btn danger ghost" type="submit" name="op" value="delete" formnovalidate data-confirm={`Delete “${c.name}”? Events stay, they just lose this calendar.`}>Delete</button>
+                <span class="spacer" />
+                <button class="btn ghost" type="button" data-close>Cancel</button>
+                <button class="btn primary" type="submit">Save</button>
+              </div>
+            </form>
+          </Modal>
+        </article>
+      ))}
+    </div>
+  )}
+
+  <Modal id="cal-new" title="New calendar">
+    <form method="post">
+      <input type="hidden" name="op" value="create" />
+      <div class="field-row">
+        <label class="field"><span>Name</span><input type="text" name="name" placeholder="Youth" required autofocus /></label>
+        <label class="field"><span>Color</span><input type="color" name="color" value="#4f46e5" /></label>
+      </div>
+      <label class="field"><span>Description</span><input type="text" name="description" placeholder="Optional" /></label>
+      <label class="field">
+        <span>Who can see it</span>
+        <select name="visibility">{VIS.map((v) => <option value={v}>{VIS_LABEL[v]}</option>)}</select>
+      </label>
+      <div class="modal-foot">
+        <button class="btn ghost" type="button" data-close>Cancel</button>
+        <button class="btn primary" type="submit">Create calendar</button>
+      </div>
+    </form>
+  </Modal>
+
+  <Modal id="cal-subscribe" title="Subscribe to a feed">
+    <form method="post">
+      <input type="hidden" name="op" value="subscribe" />
+      <p class="hint">Mirror a Google, Apple or Outlook calendar. Its events show up read-only and stay in sync.</p>
+      <div class="field-row">
+        <label class="field"><span>Name</span><input type="text" name="name" placeholder="Staff calendar" required /></label>
+        <label class="field"><span>Color</span><input type="color" name="color" value="#2f9e6e" /></label>
+      </div>
+      <label class="field"><span>Calendar link</span><input class="mono" type="text" name="feedUrl" placeholder="Google Calendar link, calendar ID, or .ics URL" required /></label>
+      <label class="field">
+        <span>Who can see it</span>
+        <select name="visibility">{VIS.map((v) => <option value={v}>{VIS_LABEL[v]}</option>)}</select>
+      </label>
+      <div class="modal-foot">
+        <button class="btn ghost" type="button" data-close>Cancel</button>
+        <button class="btn primary" type="submit">Subscribe</button>
+      </div>
+    </form>
+  </Modal>
+</Admin>
+
+<script>
+  document.addEventListener('click', async (e) => {
+    const b = e.target instanceof Element ? e.target.closest<HTMLButtonElement>('[data-copy]') : null;
+    if (b) {
+      await navigator.clipboard.writeText(b.dataset.copy ?? '');
+      const label = b.textContent;
+      b.textContent = 'Copied';
+      setTimeout(() => (b.textContent = label), 1200);
+    }
+    const c = e.target instanceof Element ? e.target.closest<HTMLElement>('[data-confirm]') : null;
+    if (c && !confirm(c.dataset.confirm)) e.preventDefault();
+  });
+</script>

package/src/pages/admin/calendar/events/[id].astro

@@ -0,0 +1,56 @@
+---
+import { getRepo } from '../../../../lib/repo';
+import { createPreviewToken } from '../../../../lib/preview';
+import { env } from '../../../../lib/env';
+import { BRAND } from '../../../../lib/brand';
+import { CALENDAR, eventUrl } from '../../../../lib/calendar/config';
+import { mergeEventDraft } from '../../../../lib/drafts';
+import { safeColor } from '../../../../lib/calendar/events';
+import ThemeScript from '../../../../components/ThemeScript.astro';
+import PostEditor from '../../../../components/editor/PostEditor';
+import '../../../../styles/admin.css';
+import '../../../../styles/editor.css';
+
+// The shared writing surface in event mode: same cards, autosave, preview and
+// publish flow as posts, plus the When / Repeats / Where / Button / Calendars
+// sidebar. Live events stage edits until Update, like posts.
+if (!CALENDAR.enabled) return new Response(null, { status: 404, statusText: 'Not found' });
+
+const repo = await getRepo(Astro.locals);
+const event = await repo.getEvent(Astro.params.id!);
+if (!event) return new Response(null, { status: 404, statusText: 'Not found' });
+
+const editable = mergeEventDraft(event);
+const [settings, calendars] = await Promise.all([repo.getSettings(), repo.listCalendars()]);
+const previewPath = `/preview/event/${event.id}`;
+const sharePath = `${previewPath}?token=${createPreviewToken('event', event.id)}`;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-visual" />
+    <ThemeScript />
+    <meta name="robots" content="noindex" />
+    <title>{event.title || 'Untitled event'} · {BRAND.name} editor</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <PostEditor
+      client:only="react"
+      kind="event"
+      event={editable}
+      initialHTML={editable.bodyHtml}
+      unsplashEnabled={Boolean(env('UNSPLASH_ACCESS_KEY'))}
+      previewPath={previewPath}
+      sharePath={sharePath}
+      livePath={eventUrl(event.slug)}
+      calendars={calendars.filter((c) => c.kind === 'native').map((c) => ({ id: c.id, name: c.name, color: safeColor(c.color) }))}
+      eventFields={CALENDAR.eventFields}
+      siteTimezone={settings.timezone}
+      site={{ title: settings.siteTitle, url: settings.siteUrl }}
+    />
+  </body>
+</html>