initial: four-collection content pipeline for unique.rzen.dev
A small Astro + MDX blog for delightful, daily-use finds. The architecture separates capture from publication and supports reuse: - find/ captured items, hidden from indexes - finds/ editorial superposts referencing find slugs in a grid - reviews/ full-length writeups; can graduate from a find via fromFind - posts/ regular essays Three project-local skills under .claude/skills/ drive the pipeline: daily-finds (capture-only sweep across sources.json), build-finds (draft a thematic superpost), build-review (graduate a find). sources.json carries 47 curated feeds with per-source fetch strategy (webfetch / curl / skip) so Cloudflare-blocked sites and Reddit JSON endpoints are handled deterministically. /sources renders a 3-column card stream with a "Recent finds" cross-reference per source. Seeds: 17 reviews and one superpost referencing 5 finds.
This commit is contained in:
@@ -0,0 +1,234 @@
|
||||
---
|
||||
import { getCollection, render } from 'astro:content';
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import SourceBadge from '../../components/SourceBadge.astro';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const reviews = await getCollection('reviews');
|
||||
return reviews.map((review) => ({
|
||||
params: { slug: review.id },
|
||||
props: { review },
|
||||
}));
|
||||
}
|
||||
|
||||
const { review } = Astro.props;
|
||||
const { Content } = await render(review);
|
||||
|
||||
const fmt = new Intl.DateTimeFormat('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
|
||||
const linkLabel =
|
||||
review.data.link &&
|
||||
(review.data.linkText ?? new URL(review.data.link).hostname.replace(/^www\./, ''));
|
||||
|
||||
const fromFindItem = review.data.fromFind
|
||||
? (await getCollection('find')).find((f) => f.id === review.data.fromFind)
|
||||
: undefined;
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title={review.data.name}
|
||||
description={review.data.description ?? review.data.subtitle}
|
||||
>
|
||||
<article>
|
||||
{review.data.source && (
|
||||
<p class="source-line"><SourceBadge source={review.data.source} /></p>
|
||||
)}
|
||||
|
||||
<header class="review-header">
|
||||
<h1>{review.data.name}</h1>
|
||||
<p class="subtitle">{review.data.subtitle}</p>
|
||||
<p class="meta">
|
||||
<time datetime={review.data.date.toISOString()}>
|
||||
{fmt.format(review.data.date)}
|
||||
</time>
|
||||
<span class="dot">·</span>
|
||||
<a href={`/categories/${review.data.category}/`} class="category">
|
||||
{review.data.category}
|
||||
</a>
|
||||
{
|
||||
review.data.link && (
|
||||
<>
|
||||
<span class="dot">·</span>
|
||||
<a href={review.data.link} target="_blank" rel="noopener noreferrer">
|
||||
{linkLabel} ↗
|
||||
</a>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{fromFindItem && (
|
||||
<p class="from-find">
|
||||
← First surfaced on{' '}
|
||||
<time datetime={fromFindItem.data.date.toISOString()}>
|
||||
{fmt.format(fromFindItem.data.date)}
|
||||
</time>{' '}
|
||||
as <a href={`/find/${fromFindItem.id}/`}>a find</a>
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div class="body">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
{
|
||||
review.data.tags.length > 0 && (
|
||||
<footer class="tags">
|
||||
{review.data.tags.map((tag) => (
|
||||
<a href={`/tags/${tag}/`} class="tag">#{tag}</a>
|
||||
))}
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
<p class="back"><a href="/">← back</a></p>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.source-line { margin: 0 0 0.5rem; }
|
||||
.from-find {
|
||||
margin: 0 0 1.5rem;
|
||||
padding: 0.6rem 0.85rem;
|
||||
background: var(--rule);
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
.from-find time { color: var(--muted); }
|
||||
.review-header {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
h1 { margin: 0 0 0.35rem; }
|
||||
.subtitle {
|
||||
margin: 0 0 0.75rem;
|
||||
color: var(--muted);
|
||||
font-size: 1.1rem;
|
||||
font-style: italic;
|
||||
}
|
||||
.meta {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.meta .dot { margin: 0 0.4rem; }
|
||||
.meta .category { color: var(--muted); }
|
||||
.meta .category:hover { color: var(--accent); }
|
||||
.body :global(p) { margin: 0 0 1rem; }
|
||||
.body :global(h2) { font-size: 1.3rem; margin: 2rem 0 0.75rem; }
|
||||
.body :global(h3) { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
|
||||
.body :global(ul), .body :global(ol) { padding-left: 1.4rem; }
|
||||
.body :global(li) { margin: 0.25rem 0; }
|
||||
.body :global(img),
|
||||
.body :global(video) {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 1.5rem auto 0.5rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.body :global(p:has(> em:only-child)) {
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: var(--muted);
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
.body :global(.carousel) {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
gap: 0.75rem;
|
||||
margin: 1.5rem 0 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
scrollbar-width: thin;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.body :global(.carousel > figure) {
|
||||
flex: 0 0 calc(100% - 2.5rem);
|
||||
scroll-snap-align: start;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
.body :global(.carousel img),
|
||||
.body :global(.carousel video) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 6px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
.body :global(.carousel figcaption) {
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
margin-top: 0.5rem;
|
||||
font-style: italic;
|
||||
}
|
||||
.body :global(.carousel)::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
.body :global(.carousel)::-webkit-scrollbar-track {
|
||||
background: var(--rule);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.body :global(.carousel)::-webkit-scrollbar-thumb {
|
||||
background: var(--muted);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.body :global(.carousel-nav) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
margin: 0 0 1.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.body :global(.carousel-nav a) {
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
background: var(--rule);
|
||||
padding: 0.3rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
min-width: 1.6rem;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
.body :global(.carousel-nav a:hover) {
|
||||
color: var(--bg);
|
||||
background: var(--accent);
|
||||
}
|
||||
.body :global(.carousel:has(figure:target)) {
|
||||
scroll-snap-type: none;
|
||||
}
|
||||
.body :global(blockquote) {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.5;
|
||||
font-style: normal;
|
||||
border-left: 3px solid var(--accent);
|
||||
padding: 0.15rem 0 0.15rem 1rem;
|
||||
color: var(--fg);
|
||||
margin: 0 0 1.75rem;
|
||||
}
|
||||
.body :global(blockquote p) { margin: 0; }
|
||||
.tags {
|
||||
margin-top: 2.5rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--rule);
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tag { font-size: 0.85rem; color: var(--muted); }
|
||||
.tag:hover { color: var(--accent); }
|
||||
.back { margin-top: 2rem; font-size: 0.9rem; }
|
||||
</style>
|
||||
</BaseLayout>
|
||||
Reference in New Issue
Block a user