ferst-core 0.1.0 → 0.2.1

package/components/PostCard.astro

@@ -1,262 +1,130 @@
 ---
-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';
-
+/**
+ * PostCard — a post preview for the news index and tag pages. Token-driven (radius,
+ * border, shadow, colours all from the theme), equal-height in a grid, with the
+ * whole card clickable via a stretched title link. White-room (no CTK code).
+ */
 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;
+  href: string;
+  title: string;
+  date: Date | string;
+  summary?: string;
+  heroImage?: string;
+  /** Optional tag labels shown as a small eyebrow. */
+  tagLabels?: string[];
 }
-
-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) : '';
+const { href, title, date, summary, heroImage, tagLabels = [] } = Astro.props;
+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="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>
-    )
+<article class="b-post-card">
+  {heroImage && (
+    <a class="b-post-card__media" href={href} tabindex="-1" aria-hidden="true">
+      <img src={heroImage} alt="" loading="lazy" />
+    </a>
   )}
-  <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 class="b-post-card__body">
+    <div class="b-post-card__meta">
+      {tagLabels.length > 0 && <span class="b-post-card__eyebrow">{tagLabels[0]}</span>}
+      {display && <time datetime={iso}>{display}</time>}
     </div>
+    <h3 class="b-post-card__title">
+      <a href={href}>{title}</a>
+    </h3>
+    {summary && <p class="b-post-card__summary">{summary}</p>}
+    <span class="b-post-card__more" aria-hidden="true">Read more</span>
   </div>
 </article>
 
 <style>
-  .post-card {
-    position: relative;
-    padding: 0;
-    border-bottom: none;
-    overflow: hidden;
+  .b-post-card {
     display: flex;
     flex-direction: column;
-    flex: 1;
+    background: var(--bg-surface);
+    border: var(--card-border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-sm);
+    overflow: hidden;
+    position: relative;
+    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
   }
-
-  .post-content {
+  .b-post-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--gold);
+  }
+  .b-post-card__media {
+    display: block;
+    position: relative;
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+    background: var(--bg-section);
+  }
+  /* Absolutely-positioned + object-fit:cover so ANY source ratio is cropped to a
+     uniform 16:9 tile — never stretched, never overflowing into the text. The
+     compound selector (and inset/size) also out-specifies the global
+     `img { height:auto }` in Base, which otherwise lets tall images blow the box. */
+  .b-post-card .b-post-card__media img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .b-post-card__body {
     display: flex;
     flex-direction: column;
+    gap: 0.5rem;
+    padding: 1.1rem 1.2rem 1.3rem;
     flex: 1;
-    min-height: 0;
-    gap: 0.75rem;
-    padding: clamp(0.875rem, 2.2vw, 1.25rem);
-    color: var(--news-card-body);
   }
-
-  .post-tags {
+  .b-post-card__meta {
     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;
+    gap: 0.5rem 0.75rem;
+  }
+  .b-post-card__eyebrow {
+    font-family: var(--font-heading);
+    font-size: 0.7rem;
     font-weight: 600;
+    letter-spacing: 0.08em;
     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;
+    color: var(--gold);
   }
-
-  /* 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;
+  .b-post-card__title {
+    margin: 0;
   }
-
-  .post-card h3 a::after {
+  /* Stretch the title link over the whole card so the card is clickable, while
+     the meta/summary stay selectable. */
+  .b-post-card__title 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;
+  .b-post-card__title a {
+    color: var(--fg);
   }
-  :global(html[data-theme="dark"]) .new-flag {
-    background: var(--gold);
-    color: #2A1F12;
+  .b-post-card:hover .b-post-card__title a {
+    color: var(--gold);
   }
-
-  .post-content > p {
-    font-size: clamp(0.8125rem, 0.7rem + 0.5vw, 0.9375rem);
+  .b-post-card__summary {
+    margin: 0;
+    color: var(--muted);
+    font-size: 0.95rem;
     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;
+  .b-post-card__more {
     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);
+    padding-top: 0.4rem;
+    font-family: var(--font-heading);
+    font-size: 0.85rem;
+    font-weight: 600;
     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/SiteFooter.astro

@@ -131,7 +131,7 @@ const year = new Date().getFullYear();
   }
   .site-footer .footer-brand {
     margin: 0;
-    font-family: 'Poppins', sans-serif;
+    font-family: var(--font-heading);
     font-weight: 700;
     font-size: 1.15rem;
     line-height: 1.3;
@@ -217,7 +217,7 @@ const year = new Date().getFullYear();
   }
   .site-footer .footer-copy {
     margin: 0;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-body);
     font-size: 0.68rem;
     font-weight: 400;
     color: var(--muted);