ferst-core 0.1.0

package/components/LatestPostList.astro

@@ -0,0 +1,64 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import Card from './Card.astro';
+import PostCard from './PostCard.astro';
+
+interface Props {
+  posts: CollectionEntry<'posts'>[];
+}
+
+const { posts } = Astro.props;
+---
+
+<ul class="latest-list">
+  {
+    posts.map((post) => (
+      <li class="latest-list__item">
+        <Card padding="0" class="latest-list__card">
+          <PostCard post={post} withImage />
+        </Card>
+      </li>
+    ))
+  }
+</ul>
+
+<style>
+  .latest-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  @media (min-width: 48em) {
+    .latest-list {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1.25rem;
+    }
+  }
+
+  @media (min-width: 64em) {
+    .latest-list {
+      grid-template-columns: repeat(3, 1fr);
+      gap: 1.5rem;
+    }
+  }
+
+  /* display: grid (not flex/block) so this reliably stretches its one child
+     (.latest-list__card) to the full row height — a plain block wrapper
+     doesn't pass a grid-stretched height down to a nested child the same
+     way. Kept as a separate element from the Card itself so the
+     reveal-on-scroll transform/opacity (armReveal, applied in
+     [...page].astro) doesn't collide with Card's own hover transition on
+     the same element. */
+  .latest-list__item {
+    display: grid;
+  }
+
+  .latest-list__card :global(.post-card) {
+    border-bottom: none;
+    padding: 0;
+  }
+</style>

package/components/PaginationNav.astro

@@ -0,0 +1,81 @@
+---
+import Button from './Button.astro';
+
+interface Props {
+  currentPage: number;
+  lastPage: number;
+  prevUrl: string | undefined;
+  nextUrl: string | undefined;
+}
+
+const { currentPage, lastPage, prevUrl, nextUrl } = Astro.props;
+---
+
+<nav class="pagination-nav" aria-label="Pagination navigation">
+  <div class="pagination-nav__controls">
+    {prevUrl ? (
+      <Button href={prevUrl} variant="primary" size="sm" rel="prev" class="pagination-nav__btn" style="border-radius: 8px;">
+        ← Prev
+      </Button>
+    ) : (
+      <Button variant="primary" size="sm" disabled aria-disabled="true" class="pagination-nav__btn" style="border-radius: 8px;">
+        ← Prev
+      </Button>
+    )}
+
+    <span class="pagination-nav__info">
+      Page {currentPage} of {lastPage}
+    </span>
+
+    {nextUrl ? (
+      <Button href={nextUrl} variant="primary" size="sm" rel="next" class="pagination-nav__btn" style="border-radius: 8px;">
+        Next →
+      </Button>
+    ) : (
+      <Button variant="primary" size="sm" disabled aria-disabled="true" class="pagination-nav__btn" style="border-radius: 8px;">
+        Next →
+      </Button>
+    )}
+  </div>
+</nav>
+
+<style>
+  .pagination-nav {
+    display: flex;
+    justify-content: center;
+  }
+
+  .pagination-nav__controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: clamp(1.5rem, 3vw, 2.5rem);
+    flex-wrap: wrap;
+  }
+
+  .pagination-nav__info {
+    font-family: 'Inter', sans-serif;
+    font-size: clamp(0.875rem, 1.5vw, 1rem);
+    line-height: 1.4;
+    color: var(--muted);
+    white-space: nowrap;
+  }
+
+  :global([data-theme='dark']) .pagination-nav__info {
+    color: var(--text-light);
+  }
+
+  /* Mobile: tighter spacing */
+  @media (max-width: 47.9375em) {
+    .pagination-nav__controls {
+      gap: 0.75rem;
+    }
+
+    .pagination-nav__info {
+      font-size: 0.8rem;
+      order: 3;
+      width: 100%;
+      text-align: center;
+    }
+  }
+</style>

package/components/PostCard.astro

@@ -0,0 +1,262 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import { opensAttachmentDirectly } from '../content/filters';
+import { plainTextExcerpt } from '../utils/excerpt';
+import { isFreshPost } from '../utils/freshness';
+import { formatDate } from '../utils/formatDate';
+
+interface Props {
+  post: CollectionEntry<'posts'>;
+  withImage?: boolean;
+  showExcerpt?: boolean;
+  /** Whole-tile click (stretched-link on the title, no separate "Read" link) —
+      used by /posts/. */
+  linkWholeCard?: boolean;
+}
+
+const { post, withImage = false, showExcerpt = true, linkWholeCard = true } = Astro.props;
+// A body-less post with an attachment (the typical newsletter shape) has
+// nothing to show on its detail page, so the tile opens the attachment
+// directly instead — same interaction as before the newsletters collection
+// existed. Any post with a body still opens /posts/<slug>/ normally, even if
+// it also carries an attachment (offered there as a separate link).
+const directAttachment = opensAttachmentDirectly(post);
+const href = directAttachment ? post.data.attachment! : `/posts/${post.slug}`;
+const linkTarget = directAttachment ? '_blank' : undefined;
+const linkRel = directAttachment ? 'noopener noreferrer' : undefined;
+const displayTags = post.data.tags;
+const isFresh = isFreshPost(post.data.date);
+const dateLabel = formatDate(post.data.date);
+const hasImage = Boolean(post.data.image);
+const excerpt = showExcerpt ? plainTextExcerpt(post.body ?? '', withImage ? 400 : 280) : '';
+---
+
+<article class="post-card" class:list={{ 'post-card--with-image': withImage }}>
+  {isFresh && (
+    <span class="new-flag" data-fresh-since={post.data.date.toISOString()}>New</span>
+  )}
+  {withImage && (
+    hasImage ? (
+      <img
+        src={post.data.image}
+        alt={post.data.title}
+        class="post-card__img"
+        loading="lazy"
+        decoding="async"
+      />
+    ) : (
+      <div class="post-card__placeholder" aria-hidden="true"></div>
+    )
+  )}
+  <div class="post-content">
+    {displayTags.length > 0 && (
+      <div class="post-tags" aria-label="Post tags">
+        {displayTags.map((tag) => (
+          <span class="post-tag">{tag}</span>
+        ))}
+      </div>
+    )}
+
+    <h3>{linkWholeCard ? <a href={href} target={linkTarget} rel={linkRel}>{post.data.title}</a> : post.data.title}</h3>
+
+    {excerpt ? <p>{excerpt}</p> : null}
+
+    <div class="post-card__footer">
+      <time datetime={post.data.date.toISOString()}>{dateLabel}</time>
+      {linkWholeCard ? (
+        <svg class="post-card__chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <polyline points="9 6 15 12 9 18"/>
+        </svg>
+      ) : (
+        <a href={href} target={linkTarget} rel={linkRel} aria-label={`Read ${post.data.title}`}>
+          <svg class="post-card__chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polyline points="9 6 15 12 9 18"/>
+          </svg>
+        </a>
+      )}
+    </div>
+  </div>
+</article>
+
+<style>
+  .post-card {
+    position: relative;
+    padding: 0;
+    border-bottom: none;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .post-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    gap: 0.75rem;
+    padding: clamp(0.875rem, 2.2vw, 1.25rem);
+    color: var(--news-card-body);
+  }
+
+  .post-tags {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 0.35rem;
+    margin: 0;
+    width: 100%;
+  }
+
+  .post-tag {
+    display: inline-flex;
+    align-items: center;
+    font-family: 'Poppins', sans-serif;
+    font-size: 0.65rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--brown);
+    background: rgba(180, 145, 70, 0.22);
+    border-radius: 4px;
+    padding: 0.15rem 0.45rem;
+    line-height: 1.2;
+  }
+  :global(html[data-theme="dark"]) .post-tag {
+    color: var(--text-light);
+    background: rgba(255, 255, 255, 0.12);
+  }
+
+  .post-content h3 {
+    /* Full title, never truncated — the admin's exact wording is shown
+       in full, however many lines it takes. */
+    margin-block: 0;
+  }
+
+  /* Stretched-link pattern: the title anchor's ::after is expanded to cover
+     the whole card (positioned against .post-card, the nearest positioned
+     ancestor), so clicking anywhere on the tile opens the post — no JS
+     needed. The footer "Read" link sits above it via z-index so it stays
+     independently clickable/focusable. */
+  .post-card h3 a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .post-card h3 a::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+  }
+
+  .new-flag {
+    position: absolute;
+    top: clamp(0.5rem, 1.6vw, 0.75rem);
+    left: clamp(0.5rem, 1.6vw, 0.75rem);
+    z-index: 2;
+    display: inline-block;
+    font-family: 'Poppins', sans-serif;
+    font-size: 0.6875rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #fff;
+    background: var(--accent);
+    border-radius: 4px;
+    padding: 0.22rem 0.55rem;
+    line-height: 1.2;
+    transform: rotate(-4deg);
+    transform-origin: top left;
+    box-shadow:
+      0 2px 6px rgba(0, 0, 0, 0.18),
+      0 1px 2px rgba(0, 0, 0, 0.08);
+    pointer-events: none;
+  }
+  :global(html[data-theme="dark"]) .new-flag {
+    background: var(--gold);
+    color: #2A1F12;
+  }
+
+  .post-content > p {
+    font-size: clamp(0.8125rem, 0.7rem + 0.5vw, 0.9375rem);
+    line-height: 1.55;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  /* Date on the left, chevron on the right — chevron keeps the same
+     slide-right-on-hover language as the homepage's Latest from the
+     Notice rows (.notice-row / .notice-chevron). */
+  .post-card__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.4rem;
+    margin-top: auto;
+  }
+
+  .post-card__footer time {
+    flex-shrink: 0;
+  }
+
+  .post-card__footer a {
+    position: relative;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .post-card__chevron {
+    flex-shrink: 0;
+    color: var(--muted);
+    transition: transform 0.15s ease, color 0.15s ease;
+  }
+
+  /* Decorative in linkWholeCard mode (the real link is the title's
+     stretched-link), so it reacts to hover on the whole card. */
+  .post-card:hover .post-card__chevron {
+    transform: translateX(3px);
+    color: var(--gold);
+  }
+
+  /* With-image variant: opt-in via the `withImage` prop, used by the
+     /posts/ listing. Image always sits above the text, at every screen
+     size. */
+  .post-card--with-image .post-card__img,
+  .post-card--with-image .post-card__placeholder {
+    display: block;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    border-radius: 10px 10px 0 0;
+    margin: 0;
+  }
+
+  .post-card--with-image .post-card__img {
+    object-fit: cover;
+    object-position: center;
+  }
+
+  .post-card--with-image .post-card__placeholder {
+    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  }
+
+  :global(html[data-theme="dark"]) .post-card--with-image .post-card__placeholder {
+    background: linear-gradient(135deg, #4A6741 0%, #2C3B2A 100%);
+  }
+
+  .post-card--with-image .post-content > p {
+    -webkit-line-clamp: 5;
+  }
+
+  .post-card--with-image .post-tags {
+    justify-content: flex-start;
+  }
+
+  .post-card--with-image .post-content {
+    padding-top: clamp(1.5rem, 3.5vw, 2rem);
+  }
+</style>

package/components/PostsToolbar.astro

@@ -0,0 +1,83 @@
+---
+interface Props {
+  availableTags: string[];
+  activeTag?: string;
+  tagCounts: Record<string, number>;
+  totalCount: number;
+}
+
+const { availableTags, activeTag = '', tagCounts, totalCount } = Astro.props;
+---
+
+<div class="tag-filters" role="group" aria-label="Filter posts by category">
+  <a
+    href="/posts/"
+    class:list={['tag-filter', { active: !activeTag }]}
+    aria-current={!activeTag ? 'true' : undefined}
+  >
+    All Posts ({totalCount})
+  </a>
+
+  {availableTags.map((tag) => (
+    <a
+      href={`/posts/tag/${tag}/`}
+      class:list={['tag-filter', { active: activeTag === tag }]}
+      aria-current={activeTag === tag ? 'true' : undefined}
+    >
+      {tag} ({tagCounts[tag] ?? 0})
+    </a>
+  ))}
+</div>
+
+<style>
+  .tag-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.55rem;
+  }
+
+  .tag-filter {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+    font-size: 0.75rem;
+    letter-spacing: 0.03em;
+    padding: 0.5rem 1rem;
+    border-radius: 999px;
+    background: rgba(200, 151, 58, 0.1);
+    color: var(--fg);
+    border: 1px solid transparent;
+    text-decoration: none;
+    text-transform: capitalize;
+    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  }
+
+  .tag-filter:hover {
+    border-color: var(--gold);
+    color: var(--gold);
+  }
+
+  .tag-filter:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+  }
+
+  .tag-filter.active {
+    background: var(--gold);
+    color: #2A1F12;
+  }
+
+  :global([data-theme='dark']) .tag-filter {
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--text-light);
+  }
+
+  :global([data-theme='dark']) .tag-filter:hover {
+    border-color: var(--gold);
+    color: var(--gold);
+  }
+
+  :global([data-theme='dark']) .tag-filter.active {
+    background: var(--gold);
+    color: #2A1F12;
+  }
+</style>

package/components/SecondaryLogo.astro

@@ -0,0 +1,63 @@
+---
+/** Secondary/footer logo: theme-aware variants and the link it wraps come
+ *  from CMS-backed `siteSettings` and are passed in from `Base.astro`. When
+ *  missing the component falls back to the local `public/uploads` assets so
+ *  legacy JSON still renders a logo.
+ */
+interface Props {
+  logoLight?: string;
+  logoDark?: string;
+  link?: { name: string; url: string };
+}
+
+const { logoLight: propLogoLight, logoDark: propLogoDark, link } = Astro.props as Props;
+const linkName = link?.name ?? '';
+const linkUrl = link?.url ?? '';
+const label = linkName ? `${linkName} (opens in new tab)` : '';
+
+const srcLight = propLogoLight ?? propLogoDark ?? '';
+const srcDark = propLogoDark ?? propLogoLight ?? '';
+---
+
+<div class="secondary-logo">
+  <a href={linkUrl} target="_blank" rel="noopener noreferrer" aria-label={label}>
+    <img
+      id="secondary-logo-img"
+      class="secondary-logo__img"
+      src={srcLight}
+      data-src-light={srcLight}
+      data-src-dark={srcDark}
+      alt=""
+      width="150"
+      height="82"
+      loading="lazy"
+      decoding="async"
+      aria-hidden="true"
+    />
+  </a>
+</div>
+
+<script is:inline define:vars={{ srcLight, srcDark }}>
+  (function () {
+    var html = document.documentElement;
+    var img = document.getElementById('secondary-logo-img');
+    if (!img) return;
+
+    function sync() {
+      var t = html.dataset.theme === 'dark' ? 'dark' : 'light';
+      var dataLight = img.getAttribute('data-src-light');
+      var dataDark = img.getAttribute('data-src-dark');
+      if (t === 'dark') {
+        img.src = dataDark || dataLight || srcDark;
+      } else {
+        img.src = dataLight || dataDark || srcLight;
+      }
+    }
+
+    sync();
+    var colorSchemeMq = window.matchMedia('(prefers-color-scheme: dark)');
+    colorSchemeMq.addEventListener('change', sync);
+    var observer = new MutationObserver(function () { sync(); });
+    observer.observe(html, { attributes: true, attributeFilter: ['data-theme'] });
+  })();
+</script>