ferst-core 0.7.0 → 0.7.4

package/components/BlockRenderer.astro

@@ -46,6 +46,9 @@ import ContactCard from './recipes/ContactCard.astro';
 import Locations from './recipes/Locations.astro';
 import Video from './recipes/Video.astro';
 import Documents from './recipes/Documents.astro';
+import LinkRow from './recipes/LinkRow.astro';
+import DocumentRecipe from './recipes/Document.astro';
+import Timetable from './recipes/Timetable.astro';
 
 interface Props {
   blocks: Block[];
@@ -94,6 +97,9 @@ const registry: Record<BlockType, any> = {
   locations: Locations,
   video: Video,
   documents: Documents,
+  linkRow: LinkRow,
+  document: DocumentRecipe,
+  timetable: Timetable,
 };
 ---
 

package/components/Pagination.astro

@@ -0,0 +1,51 @@
+---
+/**
+ * Pagination for a post listing: "Newer" / "Older" links (rel prev/next) around
+ * "Page 2 of 8". Renders nothing when there's only one page.
+ */
+import { pagerLinks } from '../lib/paginate';
+
+interface Props {
+  base: string;
+  page: number;
+  pages: number;
+}
+const { base, page, pages } = Astro.props;
+const { prev, next } = pagerLinks(base, page, pages);
+---
+
+{pages > 1 && (
+  <nav class="pager" aria-label="Pages">
+    {prev ? <a class="pager__link" href={prev} rel="prev">&larr; Newer</a> : <span class="pager__link is-off" aria-hidden="true">&larr; Newer</span>}
+    <span class="pager__status">Page {page} of {pages}</span>
+    {next ? <a class="pager__link" href={next} rel="next">Older &rarr;</a> : <span class="pager__link is-off" aria-hidden="true">Older &rarr;</span>}
+  </nav>
+)}
+
+<style>
+  .pager {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding-top: 1rem;
+    border-top: var(--card-border);
+  }
+  .pager__link {
+    font-weight: 600;
+    color: var(--gold);
+    text-decoration: none;
+  }
+  .pager__link:hover {
+    text-decoration: underline;
+  }
+  .pager__link.is-off {
+    color: var(--muted);
+    opacity: 0.5;
+  }
+  .pager__status {
+    color: var(--muted);
+    font-size: 0.9375rem;
+    font-variant-numeric: tabular-nums;
+  }
+</style>

package/components/blocks/Heading.astro

@@ -1,46 +1,47 @@
----
-interface Props {
-  text: string;
-  level?: number;
-  align?: 'start' | 'center' | 'end';
-  gradient?: boolean;
-}
-const { text, level = 2, align, gradient = false } = Astro.props;
-const Tag = `h${level}` as unknown as keyof HTMLElementTagNameMap;
----
-
-<Tag class="b-heading" data-align={align} data-gradient={gradient ? 'true' : 'false'}>{text}</Tag>
-
-<style>
-  /* By default a heading INHERITS the page/section content alignment (the
-     `--content-align` cascade set on `.site-main` / a `section`), so a whole
-     template stays coherent. An explicit `align` prop overrides it for this one
-     heading. (`text-align` inherits, and inheritance carries the resolved
-     alignment; the `[data-align]` rules win over it when set.) */
-  .b-heading {
-    color: var(--fg);
-    margin: 0;
-    text-wrap: balance;
-    line-height: 1.2;
-    text-align: inherit;
-  }
-  .b-heading[data-align='start'] {
-    text-align: start;
-  }
-  .b-heading[data-align='center'] {
-    text-align: center;
-  }
-  .b-heading[data-align='end'] {
-    text-align: end;
-  }
-  /* Gradient text — only clip to text where supported, so it never renders as
-     invisible/transparent on older browsers (it stays solid ink there). */
-  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
-    .b-heading[data-gradient='true'] {
-      background-image: linear-gradient(120deg, var(--gold), var(--accent-2, var(--gold)));
-      -webkit-background-clip: text;
-      background-clip: text;
-      color: transparent;
-    }
-  }
-</style>
+---
+interface Props {
+  text: string;
+  level?: number;
+  align?: 'start' | 'center' | 'end';
+  gradient?: boolean;
+}
+const { text, level = 2, align, gradient = false } = Astro.props;
+const Tag = `h${level}` as unknown as keyof HTMLElementTagNameMap;
+---
+
+<Tag class="b-heading" data-align={align} data-gradient={gradient ? 'true' : 'false'}>{text}</Tag>
+
+<style>
+  /* By default a heading INHERITS the page/section content alignment (the
+     `--content-align` cascade set on `.site-main` / a `section`), so a whole
+     template stays coherent. An explicit `align` prop overrides it for this one
+     heading. (`text-align` inherits, and inheritance carries the resolved
+     alignment; the `[data-align]` rules win over it when set.) */
+  .b-heading {
+    color: var(--fg);
+    margin: 0;
+    text-wrap: balance;
+    white-space: pre-line; /* a title typed over several lines keeps its breaks */
+    line-height: 1.2;
+    text-align: inherit;
+  }
+  .b-heading[data-align='start'] {
+    text-align: start;
+  }
+  .b-heading[data-align='center'] {
+    text-align: center;
+  }
+  .b-heading[data-align='end'] {
+    text-align: end;
+  }
+  /* Gradient text — only clip to text where supported, so it never renders as
+     invisible/transparent on older browsers (it stays solid ink there). */
+  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
+    .b-heading[data-gradient='true'] {
+      background-image: linear-gradient(120deg, var(--gold), var(--accent-2, var(--gold)));
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+  }
+</style>

package/components/blocks/Prose.astro

@@ -2,14 +2,15 @@
 import { proseParts } from '../../lib/prose';
 interface Props {
   text: string;
+  variant?: 'body' | 'lead';
 }
-const { text } = Astro.props;
+const { text, variant = 'body' } = Astro.props;
 // Blank lines separate paragraphs; `- ` / `1. ` lines make lists; links, bold and
 // italic are rendered safely (lib/prose.ts → inlineMarkdown).
 const parts = proseParts(text);
 ---
 
-<div class="b-prose">
+<div class="b-prose" data-variant={variant === 'lead' ? 'lead' : undefined}>
   {parts.map((part) =>
     part.kind === 'p' ? <p set:html={part.html} />
     : part.kind === 'ul' ? <ul>{part.items.map((i) => <li set:html={i} />)}</ul>
@@ -38,6 +39,13 @@ const parts = proseParts(text);
   .b-prose > :last-child {
     margin-bottom: 0;
   }
+  /* The page's introduction: larger, quieter, a narrower measure. */
+  .b-prose[data-variant='lead'] p {
+    font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
+    line-height: 1.6;
+    color: var(--muted);
+    max-width: 40em;
+  }
   .b-prose :global(a) {
     color: var(--accent);
     text-decoration: underline;

package/components/blocks/Quote.astro

@@ -1,38 +1,40 @@
----
-interface Props {
-  text: string;
-  cite?: string;
-}
-const { text, cite } = Astro.props;
----
-
-<figure class="b-quote">
-  <blockquote>{text}</blockquote>
-  {cite && <figcaption>— {cite}</figcaption>}
-</figure>
-
-<style>
-  .b-quote {
-    margin: 0;
-    border-inline-start: 3px solid var(--gold);
-    padding-inline-start: 1rem;
-  }
-  /* On a centred page/section the left rule reads as off-axis — drop it so the
-     quote centres cleanly. (Inherits text-align from the content-align cascade.) */
-  :global([data-content-align='center']) .b-quote {
-    border-inline-start: none;
-    padding-inline-start: 0;
-  }
-  .b-quote blockquote {
-    margin: 0;
-    color: var(--fg);
-    font-style: italic;
-    font-size: 1.125rem;
-    line-height: 1.6;
-  }
-  .b-quote figcaption {
-    color: var(--muted);
-    margin-top: 0.5rem;
-    font-size: 0.9375rem;
-  }
-</style>
+---
+import { inlineMarkdown } from '../../lib/inline-markdown';
+interface Props {
+  text: string;
+  cite?: string;
+}
+const { text, cite } = Astro.props;
+---
+
+<figure class="b-quote">
+  <blockquote set:html={inlineMarkdown(text)} />
+  {cite && <figcaption>— {cite}</figcaption>}
+</figure>
+
+<style>
+  /* inline markdown already turns single newlines into <br>: a prayer or verse keeps its lines. */
+  .b-quote {
+    margin: 0;
+    border-inline-start: 3px solid var(--gold);
+    padding-inline-start: 1rem;
+  }
+  /* On a centred page/section the left rule reads as off-axis — drop it so the
+     quote centres cleanly. (Inherits text-align from the content-align cascade.) */
+  :global([data-content-align='center']) .b-quote {
+    border-inline-start: none;
+    padding-inline-start: 0;
+  }
+  .b-quote blockquote {
+    margin: 0;
+    color: var(--fg);
+    font-style: italic;
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+  .b-quote figcaption {
+    color: var(--muted);
+    margin-top: 0.5rem;
+    font-size: 0.9375rem;
+  }
+</style>

package/components/recipes/Accordion.astro

@@ -1,84 +1,91 @@
----
-/** Accordion — a Level-2 recipe: an optional heading over expand/collapse rows
- *  (title + body). Generic sibling of FAQ (which is question/answer-flavoured).
- *  Native <details>/<summary> — accessible, interactive, zero JavaScript. */
-import Heading from '../blocks/Heading.astro';
-
-interface Props {
-  title?: string;
-  items?: { heading: string; body: string }[];
-}
-const { title, items = [] } = Astro.props;
----
-
-<section class="b-accordion">
-  {title && <Heading text={title} level={2} align="center" />}
-  <div class="b-accordion__list">
-    {items.map((item) => (
-      <details class="b-accordion__item">
-        <summary class="b-accordion__head">{item.heading}</summary>
-        <div class="b-accordion__body"><p>{item.body}</p></div>
-      </details>
-    ))}
-  </div>
-</section>
-
-<style>
-  .b-accordion {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    padding-inline: 1rem;
-  }
-  .b-accordion__list {
-    max-width: var(--max);
-    margin-inline: auto;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-  .b-accordion__item {
-    border: var(--card-border);
-    border-radius: var(--radius-sm);
-    padding: 0.25rem 1rem;
-    background: var(--bg-surface);
-  }
-  .b-accordion__head {
-    cursor: pointer;
-    font-weight: 600;
-    color: var(--fg);
-    padding: 0.85rem 0;
-    list-style: none;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.75rem;
-  }
-  .b-accordion__head::-webkit-details-marker {
-    display: none;
-  }
-  .b-accordion__head::after {
-    content: '+';
-    color: var(--gold);
-    font-weight: 700;
-    font-size: 1.25rem;
-    line-height: 1;
-    transition: transform 0.2s ease;
-  }
-  .b-accordion__item[open] .b-accordion__head::after {
-    content: '\2013'; /* en dash */
-  }
-  .b-accordion__head:focus-visible {
-    outline: 2px solid var(--gold);
-    outline-offset: 2px;
-  }
-  .b-accordion__body {
-    padding: 0 0 0.9rem;
-    color: var(--muted);
-    line-height: 1.6;
-  }
-  .b-accordion__body p {
-    margin: 0;
-  }
-</style>
+---
+/** Accordion — a Level-2 recipe: an optional heading over expand/collapse rows
+ *  (title + body). Generic sibling of FAQ (which is question/answer-flavoured).
+ *  Native <details>/<summary> — accessible, interactive, zero JavaScript. */
+import Heading from '../blocks/Heading.astro';
+
+import { proseParts } from '../../lib/prose';
+interface Props {
+  title?: string;
+  items?: { heading: string; body: string }[];
+}
+const { title, items = [] } = Astro.props;
+---
+
+<section class="b-accordion">
+  {title && <Heading text={title} level={2} align="center" />}
+  <div class="b-accordion__list">
+    {items.map((item) => (
+      <details class="b-accordion__item">
+        <summary class="b-accordion__head">{item.heading}</summary>
+        <div class="b-accordion__body">
+          {proseParts(item.body).map((part) =>
+            part.kind === 'p' ? <p set:html={part.html} />
+            : part.kind === 'ul' ? <ul>{part.items.map((x) => <li set:html={x} />)}</ul>
+            : <ol>{part.items.map((x) => <li set:html={x} />)}</ol>
+          )}
+        </div>
+      </details>
+    ))}
+  </div>
+</section>
+
+<style>
+  .b-accordion {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    padding-inline: 1rem;
+  }
+  .b-accordion__list {
+    max-width: var(--max);
+    margin-inline: auto;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .b-accordion__item {
+    border: var(--card-border);
+    border-radius: var(--radius-sm);
+    padding: 0.25rem 1rem;
+    background: var(--bg-surface);
+  }
+  .b-accordion__head {
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--fg);
+    padding: 0.85rem 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+  .b-accordion__head::-webkit-details-marker {
+    display: none;
+  }
+  .b-accordion__head::after {
+    content: '+';
+    color: var(--gold);
+    font-weight: 700;
+    font-size: 1.25rem;
+    line-height: 1;
+    transition: transform 0.2s ease;
+  }
+  .b-accordion__item[open] .b-accordion__head::after {
+    content: '\2013'; /* en dash */
+  }
+  .b-accordion__head:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+  }
+  .b-accordion__body {
+    padding: 0 0 0.9rem;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-accordion__body p {
+    margin: 0;
+  }
+</style>