feat: updates
This commit is contained in:
Jonathan
parent
76c7dfa985
commit
d300e4a76e
3 changed files with 455 additions and 0 deletions
243
src/pages/updates/[slug].astro
Normal file
243
src/pages/updates/[slug].astro
Normal file
|
|
@ -0,0 +1,243 @@
|
||||||
|
---
|
||||||
|
import { getCollection, getEntry } from 'astro:content';
|
||||||
|
import AppLayout from '../../layouts/AppLayout.astro';
|
||||||
|
import { fmtDate } from '../../lib/markdown';
|
||||||
|
|
||||||
|
const user = Astro.locals.user;
|
||||||
|
const { slug } = Astro.params;
|
||||||
|
|
||||||
|
const update = await getEntry('updates', slug as string);
|
||||||
|
if (!update) return Astro.redirect('/updates');
|
||||||
|
|
||||||
|
const { Content } = await update.render();
|
||||||
|
|
||||||
|
const allUpdates = await getCollection('updates');
|
||||||
|
const sorted = allUpdates.sort(
|
||||||
|
(a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
|
||||||
|
);
|
||||||
|
const currentIndex = sorted.findIndex((u) => u.slug === update.slug);
|
||||||
|
const prev = sorted[currentIndex + 1] ?? null;
|
||||||
|
const next = sorted[currentIndex - 1] ?? null;
|
||||||
|
---
|
||||||
|
<AppLayout title={update.data.title} user={user}>
|
||||||
|
<div class="page">
|
||||||
|
|
||||||
|
<nav class="breadcrumb" aria-label="Breadcrumb">
|
||||||
|
<a href="/updates" class="crumb label-sm">Updates</a>
|
||||||
|
<span class="crumb-sep" aria-hidden="true">›</span>
|
||||||
|
<span class="crumb label-sm crumb-current">{update.data.title}</span>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<article class="article">
|
||||||
|
<header class="article-header">
|
||||||
|
<time class="label-sm post-date" datetime={String(update.data.date)}>
|
||||||
|
{fmtDate(String(update.data.date))}
|
||||||
|
</time>
|
||||||
|
<h1 class="display-md article-title">{update.data.title}</h1>
|
||||||
|
<p class="lead article-summary">{update.data.summary}</p>
|
||||||
|
<p class="label-sm article-author">
|
||||||
|
<span class="author-name">{update.data.author}</span>
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="prose">
|
||||||
|
<Content />
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<nav class="post-nav" aria-label="Post navigation">
|
||||||
|
{prev && (
|
||||||
|
<a href={`/updates/${prev.slug}`} class="post-nav-link post-nav-prev">
|
||||||
|
<span class="label-sm nav-dir">Earlier</span>
|
||||||
|
<span class="nav-title body-md">{prev.data.title}</span>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{next && (
|
||||||
|
<a href={`/updates/${next.slug}`} class="post-nav-link post-nav-next">
|
||||||
|
<span class="label-sm nav-dir">Later</span>
|
||||||
|
<span class="nav-title body-md">{next.data.title}</span>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</AppLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page {
|
||||||
|
padding: var(--space-10) var(--space-20) var(--space-16);
|
||||||
|
max-width: var(--content-max);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Breadcrumb ──────────────────────────────────────────────────── */
|
||||||
|
.breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
margin-bottom: var(--space-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.crumb {
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: none;
|
||||||
|
transition: color var(--duration-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
a.crumb:hover {
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.crumb-sep {
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
}
|
||||||
|
.crumb-current {
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Article ─────────────────────────────────────────────────────── */
|
||||||
|
.article {
|
||||||
|
max-width: var(--reading-max);
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-header {
|
||||||
|
margin-bottom: var(--space-10);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-date {
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-title {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-summary {
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-author {
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-name {
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Prose content ───────────────────────────────────────────────── */
|
||||||
|
.prose :global(p) {
|
||||||
|
margin: 0 0 var(--space-5);
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
line-height: var(--leading-relaxed);
|
||||||
|
font-size: var(--text-body-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose :global(h2) {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: var(--text-headline-md);
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: var(--tracking-snug);
|
||||||
|
color: var(--on-surface);
|
||||||
|
margin: var(--space-10) 0 var(--space-4);
|
||||||
|
line-height: var(--leading-snug);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose :global(h3) {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: var(--text-headline-sm);
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: var(--tracking-snug);
|
||||||
|
color: var(--on-surface);
|
||||||
|
margin: var(--space-8) 0 var(--space-3);
|
||||||
|
line-height: var(--leading-snug);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose :global(ul),
|
||||||
|
.prose :global(ol) {
|
||||||
|
padding-left: var(--space-6);
|
||||||
|
margin: 0 0 var(--space-5);
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
line-height: var(--leading-relaxed);
|
||||||
|
font-size: var(--text-body-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose :global(li) {
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose :global(strong) {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--on-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose :global(em) {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose :global(code) {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.875em;
|
||||||
|
background: var(--surface-container);
|
||||||
|
padding: 0.15em 0.4em;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
color: var(--on-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose :global(hr) {
|
||||||
|
border: none;
|
||||||
|
border-top: var(--ghost-border);
|
||||||
|
margin: var(--space-8) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Post nav ────────────────────────────────────────────────────── */
|
||||||
|
.post-nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--space-6);
|
||||||
|
margin-top: var(--space-12);
|
||||||
|
padding-top: var(--space-8);
|
||||||
|
border-top: var(--ghost-border);
|
||||||
|
max-width: var(--reading-max);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-nav-link {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-2);
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: none;
|
||||||
|
max-width: 48%;
|
||||||
|
}
|
||||||
|
.post-nav-link:hover {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.post-nav-next {
|
||||||
|
margin-left: auto;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-dir {
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
transition: color var(--duration-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.post-nav-link:hover .nav-title {
|
||||||
|
color: var(--on-surface);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
41
src/pages/updates/feed.xml.ts
Normal file
41
src/pages/updates/feed.xml.ts
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
import type { APIRoute } from 'astro';
|
||||||
|
import { getCollection } from 'astro:content';
|
||||||
|
|
||||||
|
export const GET: APIRoute = async ({ site }) => {
|
||||||
|
const updates = await getCollection('updates');
|
||||||
|
const sorted = updates.sort(
|
||||||
|
(a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
|
||||||
|
);
|
||||||
|
|
||||||
|
const base = 'https://bifrost.fenja.ai';
|
||||||
|
|
||||||
|
const items = sorted.map((u) => {
|
||||||
|
const url = `${base}/updates/${u.slug}`;
|
||||||
|
const date = new Date(u.data.date).toUTCString();
|
||||||
|
return `
|
||||||
|
<item>
|
||||||
|
<title><![CDATA[${u.data.title}]]></title>
|
||||||
|
<description><![CDATA[${u.data.summary}]]></description>
|
||||||
|
<link>${url}</link>
|
||||||
|
<guid isPermaLink="true">${url}</guid>
|
||||||
|
<pubDate>${date}</pubDate>
|
||||||
|
<author>${u.data.author}</author>
|
||||||
|
</item>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
const xml = `<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||||
|
<channel>
|
||||||
|
<title>Project Bifrost — Updates</title>
|
||||||
|
<description>Progress notes from Fenja AI during the Bifrost pilot.</description>
|
||||||
|
<link>${base}/updates</link>
|
||||||
|
<atom:link href="${base}/updates/feed.xml" rel="self" type="application/rss+xml"/>
|
||||||
|
<language>en</language>
|
||||||
|
${items.join('')}
|
||||||
|
</channel>
|
||||||
|
</rss>`;
|
||||||
|
|
||||||
|
return new Response(xml, {
|
||||||
|
headers: { 'Content-Type': 'application/rss+xml; charset=utf-8' },
|
||||||
|
});
|
||||||
|
};
|
||||||
171
src/pages/updates/index.astro
Normal file
171
src/pages/updates/index.astro
Normal file
|
|
@ -0,0 +1,171 @@
|
||||||
|
---
|
||||||
|
import { getCollection } from 'astro:content';
|
||||||
|
import AppLayout from '../../layouts/AppLayout.astro';
|
||||||
|
import { fmtDate } from '../../lib/markdown';
|
||||||
|
|
||||||
|
const user = Astro.locals.user;
|
||||||
|
|
||||||
|
const allUpdates = await getCollection('updates');
|
||||||
|
const updates = allUpdates.sort(
|
||||||
|
(a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
|
||||||
|
);
|
||||||
|
---
|
||||||
|
<AppLayout title="Updates" user={user}>
|
||||||
|
<div class="page">
|
||||||
|
|
||||||
|
<header class="page-header">
|
||||||
|
<p class="label-sm eyebrow">Updates</p>
|
||||||
|
<h1 class="display-md page-title">What we have built.</h1>
|
||||||
|
<p class="lead subtitle">
|
||||||
|
Progress notes from Fenja — what shipped, what shifted, what is next.
|
||||||
|
Posted after each sprint.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<ol class="update-list" reversed>
|
||||||
|
{updates.map((update) => (
|
||||||
|
<li class="update-item">
|
||||||
|
<time class="label-sm update-date" datetime={String(update.data.date)}>
|
||||||
|
{fmtDate(String(update.data.date))}
|
||||||
|
</time>
|
||||||
|
<div class="update-content">
|
||||||
|
<a href={`/updates/${update.slug}`} class="update-link">
|
||||||
|
<h2 class="headline-md update-title">{update.data.title}</h2>
|
||||||
|
</a>
|
||||||
|
<p class="body-md update-summary">{update.data.summary}</p>
|
||||||
|
<a href={`/updates/${update.slug}`} class="read-more label-sm">
|
||||||
|
Read update ↗
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<footer class="feed-footer">
|
||||||
|
<a href="/updates/feed.xml" class="rss-link label-sm">RSS feed</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</AppLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page {
|
||||||
|
padding: var(--space-12) var(--space-20) var(--space-16);
|
||||||
|
max-width: var(--content-max);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Header ──────────────────────────────────────────────────────── */
|
||||||
|
.page-header {
|
||||||
|
max-width: 44rem;
|
||||||
|
margin-bottom: var(--space-12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
letter-spacing: var(--tracking-wider);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
margin-bottom: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
margin-bottom: var(--space-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
max-width: var(--reading-max);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── List ────────────────────────────────────────────────────────── */
|
||||||
|
.update-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
max-width: 52rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.update-item {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 9rem 1fr;
|
||||||
|
gap: var(--space-6);
|
||||||
|
padding: var(--space-8) 0;
|
||||||
|
border-top: var(--ghost-border);
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
.update-item:last-child {
|
||||||
|
border-bottom: var(--ghost-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.update-date {
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.update-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.update-link {
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: none;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.update-link:hover .update-title {
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
.update-link:hover {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.update-title {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: var(--tracking-snug);
|
||||||
|
margin: 0;
|
||||||
|
color: var(--on-surface);
|
||||||
|
transition: color var(--duration-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
|
||||||
|
.update-summary {
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
margin: 0;
|
||||||
|
line-height: var(--leading-relaxed);
|
||||||
|
max-width: var(--reading-max);
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-more {
|
||||||
|
color: var(--secondary);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: none;
|
||||||
|
transition: color var(--duration-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.read-more:hover {
|
||||||
|
color: var(--secondary-dim);
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Footer ──────────────────────────────────────────────────────── */
|
||||||
|
.feed-footer {
|
||||||
|
margin-top: var(--space-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rss-link {
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.rss-link:hover {
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Add table
Reference in a new issue