/* global React, I18N, BOOKING_URL */
// Shared blog components — Nav, Footer, theme/lang state hooks.
// In production these are EJS partials rendered by Express. For the static
// prototype we re-implement them in JSX so blog pages share the same look as
// the main site without re-running React state through tweaks-panel.
const { useState, useEffect } = React;
/* ---------- Persisted theme / lang / typography ---------- */
function applyPersistedAppearance() {
// Read tweak state that the main app already persists to localStorage
const theme = localStorage.getItem("cs_theme") || "dark";
const bg = localStorage.getItem("cs_bg") || "mist";
const display = localStorage.getItem("cs_display") || "apple";
document.documentElement.setAttribute("data-theme", theme);
document.documentElement.setAttribute("data-bg", bg);
document.documentElement.setAttribute("data-display", display);
}
applyPersistedAppearance();
function useAppearance() {
const [theme, setTheme] = useState(() => localStorage.getItem("cs_theme") || "dark");
const [lang, setLang] = useState(() => localStorage.getItem("cs_lang") || "en");
useEffect(() => {
document.documentElement.setAttribute("data-theme", theme);
localStorage.setItem("cs_theme", theme);
}, [theme]);
useEffect(() => {
document.documentElement.lang = lang;
localStorage.setItem("cs_lang", lang);
}, [lang]);
return { theme, setTheme, lang, setLang };
}
/* ---------- Icons ---------- */
const BIcon = {
arrow: () => ,
back: () => ,
external: () => ,
};
function ThemeToggle({ theme, setTheme }) {
const isDark = theme === "dark";
return (
);
}
function BlogNav({ lang, setLang, theme, setTheme }) {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const on = () => setScrolled(window.scrollY > 4);
window.addEventListener("scroll", on, { passive: true });
on();
return () => window.removeEventListener("scroll", on);
}, []);
const t = window.I18N[lang];
return (
);
}
function BlogFooter({ lang }) {
const t = window.I18N[lang];
return (
);
}
/* ---------- Cover art (abstract patterns per category) ---------- */
function CoverArt({ color, pattern }) {
const Patterns = {
burst: (
{Array.from({ length: 12 }).map((_, i) => {
const a = (i / 12) * Math.PI * 2;
const x1 = 200 + Math.cos(a) * 55;
const y1 = 120 + Math.sin(a) * 55;
const x2 = 200 + Math.cos(a) * 105;
const y2 = 120 + Math.sin(a) * 105;
return ;
})}
),
alert: (
CVE
),
grid: (
),
nodes: (
{[
[120, 80], [280, 80], [200, 130], [120, 180], [280, 180],
].map(([x, y], i) => )}
),
k8s: (
),
};
return (
);
}
/* ---------- Article card ---------- */
function ArticleCard({ a, featured }) {
const lang = localStorage.getItem("cs_lang") || "en";
const dateLabel = new Date(a.published_at).toLocaleDateString(lang === "es" ? "es-ES" : "en-US", { day: "numeric", month: "short", year: "numeric" });
const minLabel = lang === "es" ? `${a.reading_time_min} min` : `${a.reading_time_min} min read`;
return (
{a.language.toUpperCase()}
{a.tags.map((t) => {t})}
{a.title}
{a.excerpt}
{dateLabel}
·
{minLabel}
);
}
Object.assign(window, {
BlogNav, BlogFooter, ArticleCard, CoverArt, useAppearance, BIcon,
});
