ferst-core 0.7.2 → 0.7.5

package/lib/video.ts

@@ -1,75 +1,101 @@
-/**
- * Video links → a privacy-friendly embed. Accepts what an editor would paste — a
- * YouTube watch / share / shorts / live link, a channel's live page, or a Vimeo link —
- * and returns the embed URL (youtube-nocookie / Vimeo `dnt=1`) plus a link to watch it
- * on the provider. Anything else → null (the block shows a plain link instead).
- */
-export interface VideoEmbed {
-  provider: 'YouTube' | 'Vimeo';
-  embedUrl: string;
-  watchUrl: string;
-}
-
-const YT_ID = /^[A-Za-z0-9_-]{11}$/;
-const YT_CHANNEL = /^UC[A-Za-z0-9_-]{22}$/;
-
-export function videoEmbed(input: string | undefined | null): VideoEmbed | null {
-  if (!input) return null;
-  let u: URL;
-  try {
-    u = new URL(input.trim());
-  } catch {
-    return null;
-  }
-  if (u.protocol !== 'https:') return null;
-  const host = u.hostname.replace(/^(www\.|m\.)/, '');
-  const parts = u.pathname.split('/').filter(Boolean);
-  const watchUrl = u.toString();
-
-  if (host === 'youtu.be' && YT_ID.test(parts[0] ?? '')) return yt(parts[0], watchUrl);
-  if (host === 'youtube.com' || host === 'youtube-nocookie.com') {
-    const v = u.searchParams.get('v');
-    if (parts[0] === 'watch' && v && YT_ID.test(v)) return yt(v, watchUrl);
-    if (['embed', 'shorts', 'live', 'v'].includes(parts[0]) && YT_ID.test(parts[1] ?? '')) return yt(parts[1], watchUrl);
-    // A channel's live stream: /channel/<UC…>/live, or an embed of live_stream?channel=…
-    const channel = parts[0] === 'channel' && parts[2] === 'live' ? parts[1] : u.searchParams.get('channel');
-    if (channel && YT_CHANNEL.test(channel)) {
-      return {
-        provider: 'YouTube',
-        embedUrl: `https://www.youtube.com/embed/live_stream?channel=${channel}`,
-        watchUrl: `https://www.youtube.com/channel/${channel}/live`,
-      };
-    }
-    return null;
-  }
-  if (host === 'vimeo.com' && /^\d+$/.test(parts[0] ?? '')) {
-    return { provider: 'Vimeo', embedUrl: `https://player.vimeo.com/video/${parts[0]}?dnt=1`, watchUrl };
-  }
-  if (host === 'player.vimeo.com' && parts[0] === 'video' && /^\d+$/.test(parts[1] ?? '')) {
-    return { provider: 'Vimeo', embedUrl: `https://player.vimeo.com/video/${parts[1]}?dnt=1`, watchUrl: `https://vimeo.com/${parts[1]}` };
-  }
-  return null;
-}
-
-/**
- * The same links as a header BACKGROUND: muted, autoplaying, looping and chromeless.
- * YouTube loops a single video only with `playlist=<id>`; `enablejsapi=1` lets the
- * hero's pause button send play/pause commands (postMessage, no API script). Vimeo
- * has a dedicated `background=1` mode. Live streams and hosted files → null (a file
- * plays in a native <video>).
- */
-export function backgroundEmbed(input: string | undefined | null): VideoEmbed | null {
-  const v = videoEmbed(input);
-  if (!v || v.embedUrl.includes('live_stream')) return null;
-  if (v.provider === 'Vimeo') return { ...v, embedUrl: v.embedUrl.replace('?dnt=1', '?background=1&dnt=1') };
-  const id = new URL(v.embedUrl).pathname.split('/').pop()!;
-  const q = new URLSearchParams({
-    autoplay: '1', mute: '1', loop: '1', playlist: id, controls: '0', playsinline: '1',
-    rel: '0', disablekb: '1', iv_load_policy: '3', enablejsapi: '1',
-  });
-  return { ...v, embedUrl: `https://www.youtube-nocookie.com/embed/${id}?${q}` };
-}
-
-function yt(id: string, watchUrl: string): VideoEmbed {
-  return { provider: 'YouTube', embedUrl: `https://www.youtube-nocookie.com/embed/${id}?rel=0`, watchUrl };
-}
+/**
+ * Video links → a privacy-friendly embed. Accepts what an editor would paste — a
+ * YouTube watch / share / shorts / live link, a channel's live page, or a Vimeo link —
+ * and returns the embed URL (youtube-nocookie / Vimeo `dnt=1`) plus a link to watch it
+ * on the provider. Anything else → null (the block shows a plain link instead).
+ */
+export interface VideoEmbed {
+  provider: 'YouTube' | 'Vimeo';
+  embedUrl: string;
+  watchUrl: string;
+  /** A channel's live stream: often off air, so it loads only when the visitor asks. */
+  live?: boolean;
+}
+
+const YT_ID = /^[A-Za-z0-9_-]{11}$/;
+const YT_CHANNEL = /^UC[A-Za-z0-9_-]{22}$/;
+
+export function videoEmbed(input: string | undefined | null): VideoEmbed | null {
+  if (!input) return null;
+  let u: URL;
+  try {
+    u = new URL(input.trim());
+  } catch {
+    return null;
+  }
+  if (u.protocol !== 'https:') return null;
+  const host = u.hostname.replace(/^(www\.|m\.)/, '');
+  const parts = u.pathname.split('/').filter(Boolean);
+  const watchUrl = u.toString();
+
+  if (host === 'youtu.be' && YT_ID.test(parts[0] ?? '')) return yt(parts[0], watchUrl);
+  if (host === 'youtube.com' || host === 'youtube-nocookie.com') {
+    const v = u.searchParams.get('v');
+    if (parts[0] === 'watch' && v && YT_ID.test(v)) return yt(v, watchUrl);
+    if (['embed', 'shorts', 'live', 'v'].includes(parts[0]) && YT_ID.test(parts[1] ?? '')) return yt(parts[1], watchUrl);
+    // A channel's live stream: /channel/<UC…>/live, or an embed of live_stream?channel=…
+    const channel = parts[0] === 'channel' && parts[2] === 'live' ? parts[1] : u.searchParams.get('channel');
+    if (channel && YT_CHANNEL.test(channel)) {
+      return {
+        provider: 'YouTube',
+        embedUrl: `https://www.youtube.com/embed/live_stream?channel=${channel}`,
+        // The streams tab always has something (upcoming and past streams); /live is
+        // empty whenever the channel is off air.
+        watchUrl: `https://www.youtube.com/channel/${channel}/streams`,
+        live: true,
+      };
+    }
+    return null;
+  }
+  if (host === 'vimeo.com' && /^\d+$/.test(parts[0] ?? '')) {
+    return { provider: 'Vimeo', embedUrl: `https://player.vimeo.com/video/${parts[0]}?dnt=1`, watchUrl };
+  }
+  if (host === 'player.vimeo.com' && parts[0] === 'video' && /^\d+$/.test(parts[1] ?? '')) {
+    return { provider: 'Vimeo', embedUrl: `https://player.vimeo.com/video/${parts[1]}?dnt=1`, watchUrl: `https://vimeo.com/${parts[1]}` };
+  }
+  return null;
+}
+
+/**
+ * The same links as a header BACKGROUND: muted, autoplaying, looping and chromeless.
+ * YouTube loops a single video only with `playlist=<id>`; `enablejsapi=1` lets the
+ * hero's pause button send play/pause commands (postMessage, no API script). Vimeo
+ * has a dedicated `background=1` mode. Live streams and hosted files → null (a file
+ * plays in a native <video>).
+ */
+export function backgroundEmbed(input: string | undefined | null): VideoEmbed | null {
+  const v = videoEmbed(input);
+  if (!v || v.embedUrl.includes('live_stream')) return null;
+  if (v.provider === 'Vimeo') return { ...v, embedUrl: v.embedUrl.replace('?dnt=1', '?background=1&dnt=1') };
+  const id = new URL(v.embedUrl).pathname.split('/').pop()!;
+  const q = new URLSearchParams({
+    autoplay: '1', mute: '1', loop: '1', playlist: id, controls: '0', playsinline: '1',
+    rel: '0', disablekb: '1', iv_load_policy: '3', enablejsapi: '1',
+  });
+  return { ...v, embedUrl: `https://www.youtube-nocookie.com/embed/${id}?${q}` };
+}
+
+/**
+ * Has an embedded background player actually started playing? Read from the messages the
+ * player posts back (YouTube with `enablejsapi=1` after a `listening` handshake; Vimeo
+ * after `addEventListener: play`). Used to keep the poster up until the video is moving,
+ * then cross-fade, rather than flashing a black, loading player.
+ */
+export function playerStarted(provider: string, data: unknown): boolean {
+  let msg: Record<string, unknown> | null = null;
+  try {
+    msg = typeof data === 'string' ? JSON.parse(data) : (data as Record<string, unknown> | null);
+  } catch {
+    return false;
+  }
+  if (!msg || typeof msg !== 'object') return false;
+  if (provider === 'Vimeo') return msg.event === 'play' || msg.event === 'playProgress';
+  const info = msg.info as unknown;
+  if (msg.event === 'onStateChange') return info === 1;
+  if (msg.event === 'infoDelivery' && info && typeof info === 'object') return (info as { playerState?: number }).playerState === 1;
+  return false;
+}
+
+function yt(id: string, watchUrl: string): VideoEmbed {
+  return { provider: 'YouTube', embedUrl: `https://www.youtube-nocookie.com/embed/${id}?rel=0`, watchUrl };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.7.2",
+  "version": "0.7.5",
   "type": "module",
   "description": "Ferst Core — the shared, brand-agnostic client-site system: Astro components, layouts, content schemas, the layered config resolver, and a neutral styling architecture that every client overrides.",
   "license": "BUSL-1.1",

package/routes/cookie-policy.astro

@@ -0,0 +1,27 @@
+---
+/**
+ * The cookie policy (`/cookie-policy`) — INJECTED by the ferst() integration, so the
+ * cookie banner's link always resolves. Generated from what this site actually uses:
+ * every block type on its pages (third-party embeds such as maps or video) and whether a
+ * calendar is configured. A site with its own `src/pages/cookie-policy.astro` keeps it
+ * (the integration skips this route then).
+ */
+import Base from '../layouts/Base.astro';
+import CookiePolicy from '../components/CookiePolicy.astro';
+import { getPageEntries } from '../lib/pages';
+import { getCalendarSettings } from '../lib/calendar';
+import { blockTypesIn, scanCookieUses } from '../content/cookies';
+import { pageSchema } from '../content/blocks';
+
+const blockTypes = new Set<string>();
+for (const entry of await getPageEntries()) {
+  const page = pageSchema.safeParse(entry.data);
+  if (page.success) blockTypesIn(page.data.blocks as Array<{ type: string; blocks?: unknown }>, blockTypes);
+}
+const cal = await getCalendarSettings();
+const model = scanCookieUses({ blockTypes, calendarConfigured: Boolean(cal.embedUrl) });
+---
+
+<Base title="Cookie Policy" description="What this site stores on your device, and the third-party content it can show.">
+  <CookiePolicy model={model} />
+</Base>

package/routes/posts/index.astro

@@ -1,31 +1,36 @@
----
-/**
- * Posts index (`/posts`) — INJECTED by the ferst() integration (blog option).
- * The news / notices listing. Excludes any tag in postsSettings.excludeFromIndex
- * (e.g. a newsletter series that has its own tag page). Content, not code — a
- * client carries the post markdown + tag data; this route ships from core.
- */
-import Base from '../../layouts/Base.astro';
-import NewsList from '../../components/NewsList.astro';
-import PostsFilter from '../../components/PostsFilter.astro';
-import { getIndexPosts, getPostsSettings, getUsedTags } from '../../lib/posts';
-
-const [posts, settings, tags] = await Promise.all([getIndexPosts(), getPostsSettings(), getUsedTags()]);
----
-
-<Base title={settings.title} description={settings.intro || undefined}>
-  <section class="posts">
-    <header class="posts__head">
-      <h1>{settings.title}</h1>
-      {settings.intro && <p class="t-lead">{settings.intro}</p>}
-    </header>
-    <PostsFilter tags={tags} />
-    <NewsList posts={posts} empty="No posts yet." />
-  </section>
-</Base>
-
-<style>
-  .posts { display: flex; flex-direction: column; gap: 2rem; }
-  .posts__head { display: flex; flex-direction: column; gap: 0.5rem; }
-  .posts__head .t-lead { color: var(--muted); }
-</style>
+---
+/**
+ * Posts index (`/posts`) — INJECTED by the ferst() integration (blog option).
+ * The news / notices listing. Excludes any tag in postsSettings.excludeFromIndex
+ * (e.g. a newsletter series that has its own tag page). Content, not code — a
+ * client carries the post markdown + tag data; this route ships from core.
+ */
+import Base from '../../layouts/Base.astro';
+import NewsList from '../../components/NewsList.astro';
+import PostsFilter from '../../components/PostsFilter.astro';
+import Pagination from '../../components/Pagination.astro';
+import { getIndexPosts, getPostsSettings, getUsedTags } from '../../lib/posts';
+import { pageCount, pageSlice } from '../../lib/paginate';
+
+const [all, settings, tags] = await Promise.all([getIndexPosts(), getPostsSettings(), getUsedTags()]);
+const pages = pageCount(all.length, settings.perPage);
+const posts = pageSlice(all, 1, settings.perPage);
+---
+
+<Base title={settings.title} description={settings.intro || undefined}>
+  <section class="posts">
+    <header class="posts__head">
+      <h1>{settings.title}</h1>
+      {settings.intro && <p class="t-lead">{settings.intro}</p>}
+    </header>
+    <PostsFilter tags={tags} />
+    <NewsList posts={posts} empty="No posts yet." />
+    <Pagination base="/posts" page={1} pages={pages} />
+  </section>
+</Base>
+
+<style>
+  .posts { display: flex; flex-direction: column; gap: 2rem; }
+  .posts__head { display: flex; flex-direction: column; gap: 0.5rem; }
+  .posts__head .t-lead { color: var(--muted); }
+</style>

package/routes/posts/page/[page].astro

@@ -0,0 +1,36 @@
+---
+/**
+ * Posts index, page 2 onwards (`/posts/page/<n>`) — INJECTED by the ferst() integration
+ * (blog option). Page 1 is `/posts`. Pages are `postsSettings.perPage` posts long.
+ */
+import Base from '../../../layouts/Base.astro';
+import NewsList from '../../../components/NewsList.astro';
+import PostsFilter from '../../../components/PostsFilter.astro';
+import Pagination from '../../../components/Pagination.astro';
+import { getIndexPageRoutes, getIndexPosts, getPostsSettings, getUsedTags } from '../../../lib/posts';
+import { pageSlice } from '../../../lib/paginate';
+
+export const getStaticPaths = getIndexPageRoutes;
+
+const { page, pages } = Astro.props as { page: number; pages: number };
+const [all, settings, tags] = await Promise.all([getIndexPosts(), getPostsSettings(), getUsedTags()]);
+const posts = pageSlice(all, page, settings.perPage);
+---
+
+<Base title={`${settings.title} — page ${page}`} description={settings.intro || undefined}>
+  <section class="posts">
+    <header class="posts__head">
+      <h1>{settings.title}</h1>
+      <p class="posts__page">Page {page} of {pages}</p>
+    </header>
+    <PostsFilter tags={tags} />
+    <NewsList posts={posts} />
+    <Pagination base="/posts" page={page} pages={pages} />
+  </section>
+</Base>
+
+<style>
+  .posts { display: flex; flex-direction: column; gap: 2rem; }
+  .posts__head { display: flex; flex-direction: column; gap: 0.5rem; }
+  .posts__page { margin: 0; color: var(--muted); }
+</style>

package/routes/posts/tag/[...tag].astro

@@ -1,37 +1,41 @@
----
-/**
- * A tag page (`/posts/tag/<slug>`) — INJECTED by the ferst() integration (blog
- * option). All posts carrying one tag. This is also how an excluded-from-index
- * series (e.g. a newsletter) gets its own page.
- */
-import Base from '../../../layouts/Base.astro';
-import NewsList from '../../../components/NewsList.astro';
-import PostsFilter from '../../../components/PostsFilter.astro';
-import { getTagRoutes, getPostsByTag, getUsedTags } from '../../../lib/posts';
-
-export const getStaticPaths = getTagRoutes;
-
-const { tag } = Astro.props;
-const [posts, tags] = await Promise.all([getPostsByTag(tag.slug), getUsedTags()]);
----
-
-<Base title={tag.label} description={tag.description || undefined}>
-  <section class="posts">
-    <header class="posts__head">
-      <p class="posts__eyebrow">Tag</p>
-      <h1>{tag.label}</h1>
-      {tag.description && <p class="t-lead">{tag.description}</p>}
-    </header>
-    <PostsFilter tags={tags} active={tag.slug} />
-    <NewsList posts={posts} />
-    <a class="posts__back" href="/posts">&larr; All posts</a>
-  </section>
-</Base>
-
-<style>
-  .posts { display: flex; flex-direction: column; gap: 2rem; }
-  .posts__head { display: flex; flex-direction: column; gap: 0.35rem; }
-  .posts__eyebrow { margin: 0; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
-  .posts__head .t-lead { color: var(--muted); }
-  .posts__back { font-weight: 600; color: var(--gold); }
-</style>
+---
+/**
+ * A tag page (`/posts/tag/<slug>`) — INJECTED by the ferst() integration (blog
+ * option). All posts carrying one tag. This is also how an excluded-from-index
+ * series (e.g. a newsletter) gets its own page.
+ */
+import Base from '../../../layouts/Base.astro';
+import NewsList from '../../../components/NewsList.astro';
+import PostsFilter from '../../../components/PostsFilter.astro';
+import Pagination from '../../../components/Pagination.astro';
+import { getTagRoutes, getPostsByTag, getPostsSettings, getUsedTags } from '../../../lib/posts';
+import { pageSlice } from '../../../lib/paginate';
+
+export const getStaticPaths = getTagRoutes;
+
+const { tag, page = 1, pages = 1 } = Astro.props;
+const [all, tags, settings] = await Promise.all([getPostsByTag(tag.slug), getUsedTags(), getPostsSettings()]);
+const posts = pageSlice(all, page, settings.perPage);
+---
+
+<Base title={page > 1 ? `${tag.label} — page ${page}` : tag.label} description={tag.description || undefined}>
+  <section class="posts">
+    <header class="posts__head">
+      <p class="posts__eyebrow">Tag</p>
+      <h1>{tag.label}</h1>
+      {tag.description && <p class="t-lead">{tag.description}</p>}
+    </header>
+    <PostsFilter tags={tags} active={tag.slug} />
+    <NewsList posts={posts} />
+    <Pagination base={`/posts/tag/${tag.slug}`} page={page} pages={pages} />
+    <a class="posts__back" href="/posts">&larr; All posts</a>
+  </section>
+</Base>
+
+<style>
+  .posts { display: flex; flex-direction: column; gap: 2rem; }
+  .posts__head { display: flex; flex-direction: column; gap: 0.35rem; }
+  .posts__eyebrow { margin: 0; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
+  .posts__head .t-lead { color: var(--muted); }
+  .posts__back { font-weight: 600; color: var(--gold); }
+</style>