ferst-core 0.1.0 → 0.2.0

package/components/CalendarEmbed.astro

@@ -0,0 +1,188 @@
+---
+/**
+ * CalendarEmbed — a consent-gated external calendar embed (e.g. Google Calendar).
+ * Nothing loads from the provider until the visitor clicks "Load calendar", so no
+ * third-party request fires on page load (privacy-first, matching the site's
+ * cookie stance). Consent is remembered per visitor (localStorage), so it
+ * auto-loads on later visits. White-room, token-driven.
+ *
+ * The embed URL is required to be https (isSafeEmbedUrl) before it can reach the
+ * iframe; an unset or unsafe URL degrades to a friendly note + optional link.
+ */
+import { isSafeEmbedUrl } from '../content/calendar';
+
+interface Props {
+  title?: string;
+  intro?: string;
+  embedUrl?: string;
+  publicUrl?: string;
+  height?: number;
+  provider?: string;
+}
+const {
+  title = 'Calendar',
+  intro = '',
+  embedUrl = '',
+  publicUrl = '',
+  height = 600,
+  provider = 'Google Calendar',
+} = Astro.props;
+
+const safe = isSafeEmbedUrl(embedUrl);
+---
+
+<section class="b-calendar">
+  {title && <h2 class="b-calendar__title">{title}</h2>}
+  {intro && <p class="b-calendar__intro">{intro}</p>}
+
+  {!embedUrl ? (
+    <p class="b-calendar__note">The calendar isn't set up yet.</p>
+  ) : !safe ? (
+    <p class="b-calendar__note">
+      This calendar can't be displayed here.
+      {publicUrl && (
+        <> <a href={publicUrl} target="_blank" rel="noopener">Open it in a new tab</a>.</>
+      )}
+    </p>
+  ) : (
+    <div
+      class="b-calendar__embed"
+      data-embed-url={embedUrl}
+      data-height={String(height)}
+      data-title={title}
+    >
+      <div class="b-calendar__consent">
+        <p class="b-calendar__consent-text">
+          This calendar is provided by <strong>{provider}</strong>. Loading it shares your
+          device's data (such as your IP address) with {provider}.
+        </p>
+        <div class="b-calendar__actions">
+          <button type="button" class="b-calendar__load">Load calendar</button>
+          {publicUrl && (
+            <a class="b-calendar__link" href={publicUrl} target="_blank" rel="noopener">
+              Open in a new tab instead
+            </a>
+          )}
+        </div>
+      </div>
+      <div class="b-calendar__frame"></div>
+    </div>
+  )}
+</section>
+
+<script>
+  // Bundled (not is:inline), so it runs once even with multiple calendars on a
+  // page. Wires each embed's consent gate; auto-loads where consent was given.
+  const CONSENT_KEY = 'ferst-calendar-consent';
+  document.querySelectorAll<HTMLElement>('.b-calendar__embed').forEach((el) => {
+    const url = el.dataset.embedUrl;
+    if (!url) return;
+    const height = el.dataset.height || '600';
+    const title = el.dataset.title || 'Calendar';
+    const frameSlot = el.querySelector<HTMLElement>('.b-calendar__frame');
+    const consent = el.querySelector<HTMLElement>('.b-calendar__consent');
+    const btn = el.querySelector<HTMLButtonElement>('.b-calendar__load');
+
+    function load() {
+      if (el.dataset.loaded === 'true' || !frameSlot) return;
+      const frame = document.createElement('iframe');
+      frame.src = url as string;
+      frame.title = title;
+      frame.loading = 'lazy';
+      frame.style.width = '100%';
+      frame.style.height = height + 'px';
+      frame.style.border = '0';
+      frameSlot.replaceChildren(frame);
+      el.dataset.loaded = 'true';
+      if (consent) consent.hidden = true;
+    }
+
+    try {
+      if (localStorage.getItem(CONSENT_KEY) === '1') load();
+    } catch (_) {}
+
+    btn?.addEventListener('click', () => {
+      try {
+        localStorage.setItem(CONSENT_KEY, '1');
+      } catch (_) {}
+      load();
+    });
+  });
+</script>
+
+<style>
+  .b-calendar {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .b-calendar__title {
+    margin: 0;
+  }
+  .b-calendar__intro,
+  .b-calendar__note {
+    margin: 0;
+    color: var(--muted);
+  }
+  .b-calendar__note a,
+  .b-calendar__link {
+    color: var(--gold);
+    font-weight: 600;
+  }
+  /* The frame slot is empty (0 height) until the iframe is injected on consent, so
+     the consent card below defines the height until then — no empty reserved box. */
+  .b-calendar__frame :global(iframe) {
+    display: block;
+    border: var(--card-border);
+    border-radius: var(--radius);
+    background: var(--bg-surface);
+  }
+  /* Consent card stands in for the calendar until the visitor opts in. */
+  .b-calendar__consent {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 2.5rem 1.5rem;
+    border: var(--card-border);
+    border-radius: var(--radius);
+    background: var(--bg-section);
+    text-align: center;
+    align-items: center;
+  }
+  .b-calendar__consent-text {
+    margin: 0;
+    max-width: 46ch;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-calendar__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem 1.25rem;
+    align-items: center;
+    justify-content: center;
+  }
+  .b-calendar__load {
+    font: inherit;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    padding: 0.6rem 1.4rem;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: var(--gold);
+    color: var(--text-light);
+    cursor: pointer;
+    transition: filter 0.15s ease;
+  }
+  .b-calendar__load:hover {
+    filter: brightness(0.94);
+  }
+  .b-calendar__load:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+  }
+  /* When JS has loaded the frame, the consent card is hidden via [hidden]. */
+  .b-calendar__consent[hidden] {
+    display: none;
+  }
+</style>

package/components/Card.astro

@@ -15,13 +15,14 @@ const { as: Tag = 'div', hover = true, padding = '1.25rem 1.5rem', overflow = 'h
 </Tag>
 
 <style>
+  /* Token-driven so the global surface "knobs" (--radius / --card-border /
+     --shadow-*) restyle every card at once, in both themes. */
   .card {
     position: relative;
-    border-radius: 10px;
-    background: rgba(200, 151, 58, 0.1);
-    box-shadow:
-      0 6px 22px rgba(44, 59, 42, 0.09),
-      0 2px 8px rgba(160, 120, 50, 0.06);
+    border-radius: var(--radius);
+    background: var(--bg-surface);
+    border: var(--card-border);
+    box-shadow: var(--shadow-md);
     overflow: var(--card-overflow, hidden);
     padding: var(--card-padding);
     display: flex;
@@ -34,9 +35,7 @@ const { as: Tag = 'div', hover = true, padding = '1.25rem 1.5rem', overflow = 'h
 
   .card--hover:hover {
     transform: translateY(-4px);
-    box-shadow:
-      0 12px 32px rgba(44, 59, 42, 0.15),
-      0 4px 12px rgba(160, 120, 50, 0.1);
+    box-shadow: var(--shadow-lg);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -47,13 +46,4 @@ const { as: Tag = 'div', hover = true, padding = '1.25rem 1.5rem', overflow = 'h
       transform: none;
     }
   }
-
-  :global([data-theme='dark']) .card {
-    background: rgba(255, 255, 255, 0.04);
-    box-shadow: none;
-  }
-
-  :global([data-theme='dark']) .card--hover:hover {
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
-  }
 </style>

package/components/Icon.astro

@@ -0,0 +1,35 @@
+---
+/**
+ * Renders one shape from `lib/icons.ts` as an inline SVG. `stroke` defaults to
+ * `currentColor` so the icon's colour follows the caller's CSS `color` (and so
+ * switches with the site's light/dark theme automatically). The single intended
+ * consumer of the icon registry.
+ */
+import { ICONS, type IconKey } from '../lib/icons';
+
+interface Props {
+  name: IconKey;
+  size?: number;
+  strokeWidth?: number;
+  class?: string;
+}
+
+const { name, size = 24, strokeWidth = 1.6, class: className } = Astro.props;
+const shape = ICONS[name];
+---
+
+{shape && (
+  <svg
+    class={className}
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width={strokeWidth}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    set:html={shape}
+  />
+)}

package/components/PostArticle.astro

@@ -0,0 +1,133 @@
+---
+/**
+ * PostArticle — the individual post layout: a header (title, date, tags) + optional
+ * hero image, then a <slot /> for the rendered markdown body. The route calls
+ * `entry.render()` and drops `<Content />` into the slot. Body typography (measure,
+ * images, headings) is handled by Base's global `article` styles; this owns only
+ * the post header. White-room (no CTK code).
+ */
+interface Props {
+  title: string;
+  date: Date | string;
+  heroImage?: string;
+  /** Optional downloadable file (e.g. a PDF newsletter) shown as a download link. */
+  attachment?: string;
+  /** Resolved tags for display + linking. */
+  tags?: Array<{ slug: string; label: string }>;
+  /** Base path for tag links (default `/tags`). */
+  tagBase?: string;
+  /** Optional "back to the index" link. */
+  backHref?: string;
+  backLabel?: string;
+}
+const { title, date, heroImage, attachment, tags = [], tagBase = '/tags', backHref, backLabel = 'Back to news' } = Astro.props;
+// A human label for the download link, hinting the file type from its extension.
+const attachmentExt = attachment ? attachment.split('.').pop()?.toUpperCase() : undefined;
+const attachmentLabel = attachmentExt && attachmentExt.length <= 4 ? `Download (${attachmentExt})` : 'Download attachment';
+const d = date instanceof Date ? date : new Date(date);
+const iso = Number.isNaN(d.valueOf()) ? undefined : d.toISOString().slice(0, 10);
+const display = Number.isNaN(d.valueOf())
+  ? ''
+  : d.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' });
+---
+
+<article class="b-post">
+  <header class="b-post__header">
+    {backHref && (
+      <a class="b-post__back" href={backHref}>&larr; {backLabel}</a>
+    )}
+    <h1 class="b-post__title">{title}</h1>
+    <div class="b-post__meta">
+      {display && <time datetime={iso}>{display}</time>}
+      {tags.length > 0 && (
+        <ul class="b-post__tags">
+          {tags.map((t) => (
+            <li><a href={`${tagBase}/${t.slug}`}>{t.label}</a></li>
+          ))}
+        </ul>
+      )}
+    </div>
+    {heroImage && <img class="b-post__hero" src={heroImage} alt="" />}
+  </header>
+  <div class="b-post__body">
+    <slot />
+  </div>
+  {attachment && (
+    <p class="b-post__attachment">
+      <a href={attachment} target="_blank" rel="noopener">{attachmentLabel}</a>
+    </p>
+  )}
+</article>
+
+<style>
+  .b-post {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    width: 100%;
+  }
+  .b-post__header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .b-post__back {
+    font-family: var(--font-heading);
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--gold);
+  }
+  .b-post__title {
+    max-width: 22ch;
+  }
+  .b-post__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem 1rem;
+  }
+  .b-post__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .b-post__tags a {
+    display: inline-block;
+    padding: 0.15rem 0.6rem;
+    border: var(--card-border);
+    border-radius: var(--radius-pill);
+    background: var(--bg-tag);
+    color: var(--accent);
+    font-size: 0.78rem;
+    font-weight: 600;
+  }
+  .b-post__tags a:hover {
+    border-color: var(--gold);
+    color: var(--gold);
+  }
+  .b-post__hero {
+    width: 100%;
+    border-radius: var(--radius);
+    margin-top: 0.5rem;
+  }
+  .b-post__attachment {
+    margin: 0;
+  }
+  .b-post__attachment a {
+    display: inline-block;
+    padding: 0.55rem 1.1rem;
+    border: var(--card-border);
+    border-radius: var(--radius-sm);
+    background: var(--bg-section);
+    color: var(--accent);
+    font-family: var(--font-heading);
+    font-weight: 600;
+  }
+  .b-post__attachment a:hover {
+    border-color: var(--gold);
+    color: var(--gold);
+  }
+</style>