// =========================================================== // Article card — featured + standard variants // =========================================================== const useBookmark = (id) => { const [marked, setMarked] = React.useState(() => { try { return JSON.parse(localStorage.getItem("bm") || "{}")[id] || false; } catch { return false; } }); const toggle = (e) => { e.preventDefault(); e.stopPropagation(); const next = !marked; setMarked(next); try { const map = JSON.parse(localStorage.getItem("bm") || "{}"); map[id] = next; localStorage.setItem("bm", JSON.stringify(map)); } catch {} }; return [marked, toggle]; }; const BookmarkBtn = ({ id }) => { const [marked, toggle] = useBookmark(id); return ( ); }; const ArticleCard = ({ article, variant = "standard" }) => { if (variant === "featured") { return (
編集部のおすすめ

{article.title}

{article.excerpt}

{article.tags.map(t => #{t})}
続きを読む
); } return (
{article.date}

{article.title}

{article.excerpt}

{article.read}分 {article.views.toLocaleString()} 読む
); }; // =========================================================== // Article list — filter bar + sort + pagination // =========================================================== const ArticleList = ({ articles, activeCat, setActiveCat, sort, setSort, page, setPage }) => { const cats = ["すべて", ...Object.keys(CATEGORY_STYLE)]; const featured = articles.find(a => a.featured); const rest = articles.filter(a => !a.featured); return (

記事一覧

あなたの状況に合わせて、ゆっくり読み進めてください。

並び順
{cats.map(c => ( ))}
{featured && activeCat === "すべて" && }
{rest.map(a => )}
{[1,2,3,4,5].map(p => ( ))} …
); }; // =========================================================== // Sidebar // =========================================================== const Sidebar = ({ activeCat, setActiveCat, query, setQuery }) => ( ); Object.assign(window, { ArticleCard, ArticleList, Sidebar });