// bauhaus-page-ideas.jsx — IdeasPage, PostPage, BlogGroup.
(function() {
window.BlogGroup = function BlogGroup({ name, posts, nav }) {
return (
{name}
{posts.length} {posts.length === 1 ? 'post' : 'posts'}
);
};
window.IdeasPage = function IdeasPage({ nav }) {
// Group POSTS by flair, preserving first-seen order.
const order = [];
const groups = {};
(window.POSTS || []).forEach(p => {
const g = p.flair || 'Posts';
if (!groups[g]) {
groups[g] = { name: g, posts: [] };
order.push(g);
}
groups[g].posts.push(p);
});
const grouped = order.map(g => groups[g]);
const talks = window.TALKS || [];
const reading = window.READING || [];
return (
Ideas
Reading, writing & talks.
On AI systems, agentic tooling, and engineering reflections.
Read on{' '}
HYPERSCALE ↗
{' '}on Substack.
Reading
{reading.length === 0 ? (
◇ Bookmark in progress.
) : (
{reading.map((it, i) => (
{it.kind || '◇'}
{it.url ? (
{it.title}
) : (
it.title
)}
{it.by && (
by {it.by}
)}
{typeof it.progress === 'number' && (
{Array.from({ length: 10 }).map((_, n) => (
))}
{it.progress}%
)}
))}
)}
Writing
{grouped.length === 0 ? (
) : (
grouped.map(g => (
))
)}
Talks
{talks.length === 0 ? (
) : (
{talks.map((t, i) => (
{t.date}
{t.venue}
{t.title}
{t.loc}
))}
)}
);
};
window.PostPage = function PostPage({ slug, nav }) {
const post = POSTS.find(p => p.slug === slug) || POSTS[0];
const idx = POSTS.indexOf(post);
const prev = POSTS[idx - 1], next = POSTS[idx + 1];
return (
{e.preventDefault(); nav('/blog');}}
className="hover-line lbl-mono" style={{ color: 'var(--ink)' }}>
← back to writing
{post.date} · {post.read}
{post.title}
{post.blurb}
Post body lives in /posts/{post.slug}.md{' '}
and is rendered by your build step. The shell, navigation, and styling are the same on every page.
Use j/k to scroll, [/] to move between posts,
or g w for the index.
);
};
})();