132 lines
5.0 KiB
Plaintext
132 lines
5.0 KiB
Plaintext
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
import PostList from '../components/PostList.astro';
|
|
import { getCollection } from 'astro:content';
|
|
import { isEn } from '../lib/lang';
|
|
import { SITE } from '../config';
|
|
import { sortForListing } from '../lib/sort';
|
|
|
|
const posts = sortForListing(await getCollection('posts', isEn));
|
|
|
|
// Featured picks: fixed slugs, not "newest 4", so the front page stays stable after a
|
|
// publish and keeps answering "who is this and what has he actually run" (scale →
|
|
// automation → observability → a delivered business result). Falls back to the newest
|
|
// posts if a slug ever disappears.
|
|
const FEATURED_SLUGS = [
|
|
'running-production-infrastructure-solo',
|
|
'loop-engineering-without-a-coding-agent',
|
|
'one-prometheus-for-unraid-synology-and-a-vps',
|
|
'self-healing-digital-goods-entitlements',
|
|
];
|
|
const bySlug = new Map(posts.map((p) => [p.slug, p]));
|
|
const featured = FEATURED_SLUGS.map((s) => bySlug.get(s)).filter(Boolean);
|
|
const featuredPosts = featured.length === 4 ? featured : posts.slice(0, 4);
|
|
|
|
const featuredMetrics: Record<string, string> = {
|
|
'running-production-infrastructure-solo': '3 Hosts · 162 Containers',
|
|
'loop-engineering-without-a-coding-agent': '11 Cron Jobs · 8 Pure Loops',
|
|
'one-prometheus-for-unraid-synology-and-a-vps': '3 Hosts · 1 Prometheus',
|
|
'self-healing-digital-goods-entitlements': 'NocoDB + n8n + AList',
|
|
};
|
|
---
|
|
|
|
<BaseLayout title={SITE.title} description={SITE.description} altLocaleUrl={`${SITE.url}/zh/`}>
|
|
<section class="hero">
|
|
<div class="hero-content">
|
|
<div class="hero-id">
|
|
<picture>
|
|
<source srcset={SITE.photo.smallWebp} type="image/webp" />
|
|
<img
|
|
class="hero-photo"
|
|
src={SITE.photo.small}
|
|
alt={`${SITE.author} (${SITE.handle})`}
|
|
width="72"
|
|
height="72"
|
|
decoding="async"
|
|
/>
|
|
</picture>
|
|
<h1>{SITE.author} — full-stack developer & DevOps engineer</h1>
|
|
</div>
|
|
<p class="hero-sub">
|
|
I build and operate production web systems — from the code down to the servers.
|
|
<strong>162 containers across three self-managed hosts</strong> run client sites, a mail
|
|
platform, CI/CD, workflow automation and this blog. I write up what broke, what the
|
|
evidence said, and how I fixed it.
|
|
</p>
|
|
<p class="hero-cta">
|
|
<a class="btn btn-primary" href="#featured">Read the engineering case studies ↓</a>
|
|
<a class="btn" href="/about/">Hiring? Profile & stack →</a>
|
|
<a class="btn" href={SITE.website} target="_blank" rel="noopener">Malaysian SME? How I work ↗</a>
|
|
</p>
|
|
<p class="hero-note">
|
|
{posts.length} posts in English and 中文 · <a href="/rss.xml">RSS</a>
|
|
</p>
|
|
</div>
|
|
<div class="hero-banner-card">
|
|
<picture>
|
|
<source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 900px) 100vw, 480px" type="image/webp" />
|
|
<img
|
|
class="hero-banner-img"
|
|
src="/images/hero-banner.jpg"
|
|
alt="From Code to Production — Systems Architecture & DevOps Infrastructure Ecosystem"
|
|
width="1024"
|
|
height="572"
|
|
loading="eager"
|
|
fetchpriority="high"
|
|
decoding="async"
|
|
/>
|
|
</picture>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="featured">
|
|
<h2>Featured</h2>
|
|
<div class="featured-bento-grid">
|
|
{featuredPosts.map((post, idx) => {
|
|
const cleanSlug = post.slug.replace(/^zh\//, '');
|
|
const metric = featuredMetrics[cleanSlug] ?? post.data.category;
|
|
return (
|
|
<a class={`bento-card bento-item-${idx + 1}`} href={`/posts/${post.slug}/`}>
|
|
<div class="bento-visual" aria-hidden="true">
|
|
<img
|
|
src={`/og/thumb/${cleanSlug}-800.webp`}
|
|
srcset={`/og/thumb/${cleanSlug}-400.webp 400w, /og/thumb/${cleanSlug}-800.webp 800w`}
|
|
sizes="(max-width: 640px) 60vw, 341px"
|
|
alt=""
|
|
loading="lazy"
|
|
decoding="async"
|
|
width="400"
|
|
height="210"
|
|
onerror="this.style.display='none'"
|
|
/>
|
|
<div class="bento-visual-scrim"></div>
|
|
</div>
|
|
<div class="bento-content">
|
|
<div class="bento-top-meta">
|
|
<span class="featured-badge">{post.data.category}</span>
|
|
<span class="bento-metric-pill">
|
|
<span class="pulse-dot"></span>
|
|
{metric}
|
|
</span>
|
|
</div>
|
|
<h3>{post.data.title}</h3>
|
|
<p>{post.data.description}</p>
|
|
<span class="bento-cta">Read case study →</span>
|
|
</div>
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Latest posts</h2>
|
|
{posts.length === 0 ? (
|
|
<p><em>No posts yet — check back soon.</em></p>
|
|
) : (
|
|
<PostList posts={posts} limit={6} />
|
|
)}
|
|
<p class="archive-meta"><a href="/posts/">All {posts.length} posts</a> · <a href="/tags/docker/">tag pages</a></p>
|
|
</section>
|
|
</BaseLayout>
|