/* DevLog — single combined section (section 03).
*
* Replaces the old "git history" + "blog cards" split. Left panel is a
* terminal that types out one post at a time (date + tag header, title,
* excerpt, "read full post →" link), then cycles to the next. Right panel
* lists every post as a quick link, plus the current tool stack below.
*
* Source: `assets/data/blog-posts.json`, baked by
* `scripts/bake-blog-posts.cjs` from the RTD site's `content/blog/` folder.
*/
const POSTS_FALLBACK = [
{
slug: "fallback",
date: "—",
title: "blog posts not yet baked",
tag: "craft",
excerpt: "run scripts/bake-blog-posts.cjs to pull posts from the RTD site folder.",
url: "#",
read: "—",
},
];
const TOOLS = ["Godot 4.4", "Aseprite", "GitHub", "Notion", "Cursor", "Claude Code"];
const POST_TAG_COLOR = {
design: "var(--ss-mint)",
craft: "var(--ss-pink)",
personal: "var(--ss-pink)",
};
function composeBlock(post) {
const tag = (post.tag || "log").toLowerCase();
const date = post.date || "—";
// Lowercase title in the terminal, brand voice. Excerpt as-authored.
return [
`─ ${date} · ${tag}`,
"",
`> ${(post.title || "").toLowerCase()}`,
"",
post.excerpt || "",
].join("\n");
}
function DevLog({ speed = 26 }) {
const [posts, setPosts] = React.useState(POSTS_FALLBACK);
const [cursor, setCursor] = React.useState(0);
const [typed, setTyped] = React.useState("");
const [phase, setPhase] = React.useState("type"); // type | done
const [cursorOn, setCursorOn] = React.useState(true);
// Load real posts
React.useEffect(() => {
fetch("assets/data/blog-posts.json")
.then(r => r.ok ? r.json() : null)
.then(data => {
if (data && Array.isArray(data.posts) && data.posts.length) {
setPosts(data.posts);
setCursor(0);
}
})
.catch(() => {});
}, []);
// Type out the active post, then pause + advance
React.useEffect(() => {
if (!posts.length) return;
const post = posts[cursor];
if (!post) return;
const full = composeBlock(post);
let alive = true;
let charIdx = 0;
let advanceTimer;
setPhase("type");
setTyped("");
const tickInterval = setInterval(() => {
if (!alive) return;
charIdx += 2;
if (charIdx >= full.length) {
setTyped(full);
setPhase("done");
clearInterval(tickInterval);
advanceTimer = setTimeout(() => {
if (alive) setCursor(c => (c + 1) % posts.length);
}, 5500);
} else {
setTyped(full.slice(0, charIdx));
}
}, 1000 / speed);
return () => {
alive = false;
clearInterval(tickInterval);
clearTimeout(advanceTimer);
};
}, [cursor, posts, speed]);
// Blinking cursor
React.useEffect(() => {
const id = setInterval(() => setCursorOn(c => !c), 500);
return () => clearInterval(id);
}, []);
const currentPost = posts[cursor] || posts[0];
return (
03
dev log
writing from the workshop
);
}
function PostLink({ post, active }) {
const [hover, setHover] = React.useState(false);
const tagColor = POST_TAG_COLOR[post.tag] || "var(--ss-mulberry)";
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
className="pixel-text"
style={{
display: "block",
textDecoration: "none",
color: "var(--ss-navy)",
fontFamily: "basis33, monospace",
fontSize: 15,
lineHeight: 1.25,
}}>
{post.date}
{(post.tag || "").toLowerCase()}
{(post.title || "").toLowerCase()}
);
}
function ToolList() {
return (
{TOOLS.map(t => (
{t}
))}
);
}
window.DevLog = DevLog;