feat(design): deploy default OG card (JPG/PNG), complete banner hygiene (E8), modernize CJK typography (E9), align title & hero (A2)

src/components/PostList.astro

@@ -25,7 +25,7 @@ const updatedLabel = isZh ? '更新于' : 'Updated';
 
 const catHref = (cat: string) => `/${isZh ? 'zh/categories' : 'categories'}/${cat}/`;
 
-const og = (post: CollectionEntry<'posts'>) => post.data.ogImage || '/og-default.png';
+const og = (post: CollectionEntry<'posts'>) => post.data.ogImage || '/og-default.jpg';
 
 // Tag pills only link when the tag has its own page (>= TAG_MIN_POSTS in this language).
 const counts = tagCounts((await getCollection('posts', ({ data }) => !data.draft))
@@ -36,7 +36,7 @@ const counts = tagCounts((await getCollection('posts', ({ data }) => !data.draft
 // the same art instead (5.8 KB / 16.1 KB — see scripts/optimize-images.py).
 const hasThumb = (post: CollectionEntry<'posts'>) => {
   const p = og(post);
-  return p.startsWith('/og/') && p !== '/og-default.png';
+  return p.startsWith('/og/') && p !== '/og-default.png' && p !== '/og-default.jpg';
 };
 const thumb = (post: CollectionEntry<'posts'>, w: 400 | 800) =>
   og(post).replace('/og/', '/og/thumb/').replace(/\.png$/, `-${w}.webp`);

src/config.ts

@@ -6,9 +6,9 @@ export const SITE = {
   author: 'Lee Teong Hoe',          // canonical name — same everywhere
   handle: 'Mr Hoelee',
   url: 'https://blog.hoelee.com',
-  title: 'Mr Hoelee — engineering, DevOps & self-hosting',
+  title: 'Mr Hoelee — Full-Stack Developer & DevOps Engineer',
   description:
-    'Personal blog of Lee Teong Hoe (Mr Hoelee) — full-stack engineering, DevOps & self-hosting, AI automation, and Web3 experiments.',
+    'Personal blog of Lee Teong Hoe (Mr Hoelee) — full-stack developer and DevOps engineer. Production systems, self-hosting, and infrastructure.',
   locale: 'en',
   lang: 'en',
   email: '[email protected]',

src/content/posts/scraping-bot-walled-marketplace-warm-browser-session.md

@@ -5,6 +5,7 @@ pubDate: 2026-09-13
 category: engineering
 tags: ["scraping", "cdp", "headless-chrome", "anti-bot", "shopee", "python"]
 ogImage: "/og/scraping-bot-walled-marketplace-warm-browser-session.png"
+banner: "/banners/scraping-bot-walled-marketplace-warm-browser-session.png"
 draft: false
 ---
 

src/content/posts/zh/scraping-bot-walled-marketplace-warm-browser-session.md

@@ -5,6 +5,7 @@ pubDate: 2026-09-13
 category: engineering
 tags: ["scraping", "cdp", "headless-chrome", "anti-bot", "shopee", "python"]
 ogImage: "/og/scraping-bot-walled-marketplace-warm-browser-session.png"
+banner: "/banners/scraping-bot-walled-marketplace-warm-browser-session.png"
 draft: false
 ---
 

src/layouts/BaseLayout.astro

@@ -33,7 +33,7 @@ const {
   title,
   description = SITE.description,
   lang = SITE.lang,
-  ogImage = '/og-default.png',
+  ogImage = '/og-default.jpg',
   type = 'website',
   switchHref,
   altLocaleUrl,

src/pages/posts/[...slug].astro

@@ -62,7 +62,7 @@ const jsonLd = {
   mainEntityOfPage: { '@type': 'WebPage', '@id': postUrl },
   headline: post.data.title,
   description: post.data.description,
-  image: new URL(post.data.ogImage ?? '/og-default.png', SITE.url).href,
+  image: new URL(post.data.ogImage ?? '/og-default.jpg', SITE.url).href,
   inLanguage: lang === 'zh' ? 'zh' : 'en',
   datePublished: post.data.pubDate.toISOString(),
   dateModified: (post.data.updatedDate ?? post.data.pubDate).toISOString(),
@@ -79,7 +79,7 @@ const jsonLd = {
   title={`${post.data.title} — Mr Hoelee`}
   description={post.data.description}
   lang={lang}
-  ogImage={post.data.ogImage ?? '/og-default.png'}
+  ogImage={post.data.ogImage ?? '/og-default.jpg'}
   type="article"
   switchHref={switchHref}
   altLocaleUrl={altLocaleUrl}

src/styles/global.css

@@ -23,8 +23,8 @@
   --bad: #b82105;            /* red (palette13) */
 
   /* Typography */
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, Menlo, Monaco, monospace;
   --fs-base: 17px;
   --lh-body: 1.7;