{ascii}
lxb@fedora
────────────
{lines.map((l, i) => (
{l.k}
:
{l.v}
))}
colors:
{[0.25, 0.4, 0.55, 0.7, 0.85, 1.0].map((a, i) => (
))}
{caption}
{l.text === "" ? "\u00A0" : (l.text.includes("\n") ?
))}
);
}
function ThemesBlock() {
const cur = getTheme();
return (
{l.text} : l.text)}
available phosphor themes — type `theme <id>` to switch
{THEMES.map(t => (
))}
{t.id}
[{t.year}]
{t.name}
{t.desc}
my works — type `work <id>` for details
{WORKS.map(w => (
))}
{w.id}
{w.title}
{w.description}
{WORKS.length} work{WORKS.length === 1 ? "" : "s"} indexed.
{who.avatar ? (
{ e.currentTarget.style.display = "none"; }}
onLoad={() => {
const term = document.querySelector(".term");
if (term) term.scrollTop = term.scrollHeight;
}}
/>
) : null}
);
}
function BlogsListBlock({ page, totalPages }) {
const start = (page - 1) * BLOGS_PER_PAGE;
const slice = BLOGS.slice(start, start + BLOGS_PER_PAGE);
return (
{who.name}
my blogs — type `blog <id>` to read
{slice.map(b => (
))}
{b.id}
{b.title}
{b.date || ""}
page {page} / {totalPages} ── {BLOGS.length} entr{BLOGS.length === 1 ? "y" : "ies"} indexed
{totalPages > 1 ? ` ── next: \`blogs ${page < totalPages ? page + 1 : 1}\`` : ""}
┌─ {blog.title}
[{blog.id}]
{blog.date ? └─ {blog.date}
: null}
blog: failed to load ({err})
) : md == null ? (
loading…
) : (
)}
┌─ {work.title}
[{work.id}]
└─ {work.description}
{work.image}
{text};
}
return {text === "" ? "\u00A0" : text}
;
}
// ============================================================
// Prompt — old-school bash style: [user@host pwd]$
// ============================================================
function Prompt({ path = "~" }) {
return (
{"["}
lxb@fedora
{path}
{"]$ "}
);
}
// ============================================================
// Main terminal
// ============================================================
function Terminal() {
// history of [{type:'boot'|'cmd'|'output', ...}]
const [items, setItems] = useState([]);
const [input, setInput] = useState("");
const [caret, setCaret] = useState(0);
const [cmdHistory, setCmdHistory] = useState([]);
const [histIdx, setHistIdx] = useState(-1); // -1 means "live input"
const [bootDone, setBootDone] = useState(false);
const [focused, setFocused] = useState(true);
const inputRef = useRef(null);
const termRef = useRef(null);
// Boot sequence
useEffect(() => {
loadWorks();
loadWhoami();
loadBlogs();
const timers = [];
BOOT.forEach((b, i) => {
timers.push(setTimeout(() => {
setItems(prev => [...prev, { type: "boot", text: b.text, cls: b.cls }]);
if (i === BOOT.length - 1) setBootDone(true);
}, b.t));
});
return () => timers.forEach(clearTimeout);
}, []);
// Auto-scroll on new items: long-form outputs (work/blog detail) pin their
// cmd line to the top so markdown can be read from the start; everything
// else snaps to bottom.
const isPinned = (it) =>
it && it.type === "output" && it.payload &&
(it.payload.kind === "work-detail" || it.payload.kind === "blog-detail");
useEffect(() => {
if (!termRef.current) return;
const term = termRef.current;
const last = items[items.length - 1];
if (isPinned(last)) {
const cmds = term.querySelectorAll(".cmd-line");
const cmdEl = cmds[cmds.length - 1];
if (cmdEl) {
const top = cmdEl.getBoundingClientRect().top - term.getBoundingClientRect().top + term.scrollTop;
term.scrollTop = top;
}
return;
}
term.scrollTop = term.scrollHeight;
}, [items]);
// While typing, follow the bottom — but never override a pinned long-form output.
useEffect(() => {
if (!termRef.current) return;
if (isPinned(items[items.length - 1])) return;
termRef.current.scrollTop = termRef.current.scrollHeight;
}, [input]);
// Keep focus
const refocus = useCallback(() => {
if (inputRef.current) inputRef.current.focus();
}, []);
useEffect(() => { refocus(); }, [refocus, bootDone]);
useEffect(() => {
const onClick = () => refocus();
document.addEventListener("click", onClick);
return () => document.removeEventListener("click", onClick);
}, [refocus]);
const submit = (raw) => {
const result = runCommand(raw);
setItems(prev => {
const next = [...prev, { type: "cmd", text: raw }];
if (!result) return next;
if (result.kind === "clear") return [];
return [...next, { type: "output", payload: result }];
});
if (raw.trim()) {
setCmdHistory(prev => [...prev, raw]);
}
setHistIdx(-1);
setInput("");
setCaret(0);
};
const recallHistory = (val) => {
setInput(val);
setCaret(val.length);
};
const onKeyDown = (e) => {
if (e.key === "Enter") {
e.preventDefault();
submit(input);
} else if (e.key === "ArrowUp") {
e.preventDefault();
if (cmdHistory.length === 0) return;
const newIdx = histIdx === -1 ? cmdHistory.length - 1 : Math.max(0, histIdx - 1);
setHistIdx(newIdx);
recallHistory(cmdHistory[newIdx]);
} else if (e.key === "ArrowDown") {
e.preventDefault();
if (histIdx === -1) return;
const newIdx = histIdx + 1;
if (newIdx >= cmdHistory.length) {
setHistIdx(-1);
recallHistory("");
} else {
setHistIdx(newIdx);
recallHistory(cmdHistory[newIdx]);
}
} else if (e.key === "l" && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
setItems([]);
} else if (e.key === "c" && e.ctrlKey) {
e.preventDefault();
setItems(prev => [...prev, { type: "cmd", text: input + "^C" }]);
setInput("");
setCaret(0);
setHistIdx(-1);
}
};
const syncCaret = (e) => {
const pos = e.target.selectionStart;
if (pos != null) setCaret(pos);
};
return (
<>
{items.map((it, i) => {
if (it.type === "boot") {
return
);
}
ReactDOM.createRoot(document.getElementById("root")).render(