{/* topic filter — clickable, functional */}
// topic
{TOPICS.map((topic) => {
const active = activeTopic === topic.id;
const disabled = counts[topic.id] === 0;
return (
);
})}
{/* current filter label */}
{activeTopic === 'all'
? <>showing {filtered.length} posts
: <>showing {filtered.length} in {activeTopic} · {TOPICS.find((t) => t.id === activeTopic).zh}
}
{/* posts table */}
{filtered.map((post, i) => (
setRoute({ section: 'writing', slug: post.slug })}
style={{
padding: `${itemGap + 4}px 0`,
borderTop: `1px solid ${T.rule}`,
cursor: 'pointer',
display: 'grid', gridTemplateColumns: '100px 100px 1fr 70px', gap: 24, alignItems: 'baseline',
}}
onMouseEnter={(e) => { e.currentTarget.querySelector('[data-title]').style.color = A; }}
onMouseLeave={(e) => { e.currentTarget.querySelector('[data-title]').style.color = T.ink; }}
>
{post.date}
{post.topic}
{post.title_en}
{post.title_zh}
{post.tags.map((tag) => (
#{tag}
))}
{post.reading} min
))}
{filtered.length === 0 && (
// no posts in this topic yet
)}
{/* RSS / archive */}
// subscribe via
rss
email
atom
);
}
function PostPage(p) {
const { T, A, monoF, serif, fs, pad, sectGap, route, setRoute, isEN, t } = p;
const post = POSTS.find((x) => x.slug === route.slug) || POSTS[0];
const title = isEN ? post.title_en : post.title_zh;
const body = isEN ? post.body_en : post.body_zh;
const prevIdx = POSTS.findIndex((x) => x.slug === post.slug) - 1;
const nextIdx = POSTS.findIndex((x) => x.slug === post.slug) + 1;
const prev = prevIdx >= 0 ? POSTS[prevIdx] : null;
const next = nextIdx < POSTS.length ? POSTS[nextIdx] : null;
return (
<>
{/* back */}
setRoute({ section: 'writing', slug: null })}
style={{ fontFamily: monoF, fontSize: fs - 1, color: T.dim, cursor: 'pointer', marginBottom: 20 }}
onMouseEnter={(e) => { e.currentTarget.style.color = A; }}
onMouseLeave={(e) => { e.currentTarget.style.color = T.dim; }}
>
{t.backToWriting}
{/* metadata */}
{post.date}
·
{post.topic}
·
{t.by} {post.author}
·
{t.readingTime(post.reading)}
{post.tags && post.tags.length > 0 && ·}
{post.tags && post.tags.map((tag) => (
#{tag}
))}
{/* title */}
{title}
{/* markdown body */}
{typeof Markdown !== 'undefined'
?
:
{body}
}
{/* prev / next */}
{(prev || next) && (
prev && setRoute({ section: 'writing', slug: prev.slug })}
style={{ cursor: prev ? 'pointer' : 'default', opacity: prev ? 1 : 0.35 }}
>
{t.newer}
{prev ? (isEN ? prev.title_en : prev.title_zh) : '—'}
next && setRoute({ section: 'writing', slug: next.slug })}
style={{ cursor: next ? 'pointer' : 'default', opacity: next ? 1 : 0.35, textAlign: 'right' }}
>
{t.older}
{next ? (isEN ? next.title_en : next.title_zh) : '—'}
)}
{!hasItems && (
)}
{hasItems && (
{PROTOTYPES.map((proto) => {
const card = (
<>
{/* mock screen */}
{/* meta */}
{proto.name}
{proto.tag}
{isEN ? proto.desc_en : proto.desc_zh}
{isEN ? 'open demo →' : '打开 demo →'}
);
const cardStyle = {
background: T.panel, padding: '24px 22px 26px',
minHeight: 220, display: 'flex', flexDirection: 'column', gap: 14,
textDecoration: 'none', color: 'inherit',
};
return proto.url ? (
{card}
) : (
{card}
);
})}
)}
);
}
function ProjectsPage(p) {
const { T, A, monoF, serif, fs, pad, itemGap, isEN, t } = p;
// Live fetch from the GitHub API. Cached per session so navigating away
// and back doesn't re-hit the rate limit.
const [state, setState] = React.useState(
() => window.__projectsCache || { status: 'loading', repos: [], error: null }
);
React.useEffect(() => {
if (state.status !== 'loading') return;
const user = (META.github.match(/github\.com\/([^/?#]+)/) || [, 'xuanx-ai'])[1];
fetch(`https://api.github.com/users/${user}/repos?per_page=100&sort=updated`)
.then((r) => {
if (r.status === 404) throw new Error('User not found yet');
if (!r.ok) throw new Error(`GitHub API: ${r.status}`);
return r.json();
})
.then((repos) => {
const filtered = repos
.filter((r) => !r.fork && !r.archived)
.sort((a, b) => (b.stargazers_count - a.stargazers_count) ||
(new Date(b.pushed_at) - new Date(a.pushed_at)));
const next = { status: 'ok', repos: filtered, error: null };
window.__projectsCache = next;
setState(next);
})
.catch((err) => {
const next = { status: 'error', repos: [], error: err.message || String(err) };
window.__projectsCache = next;
setState(next);
});
}, []);
const fmtDate = (iso) => {
if (!iso) return '';
const d = new Date(iso);
const days = Math.round((Date.now() - d) / 86400000);
if (isEN) {
if (days < 1) return 'today';
if (days < 2) return 'yesterday';
if (days < 30) return `${days}d ago`;
if (days < 365) return `${Math.round(days / 30)}mo ago`;
return `${Math.round(days / 365)}y ago`;
}
if (days < 1) return '今天';
if (days < 2) return '昨天';
if (days < 30) return `${days} 天前`;
if (days < 365) return `${Math.round(days / 30)} 个月前`;
return `${Math.round(days / 365)} 年前`;
};
return (
<>