Move banner below title/meta; related posts: og-image cover cards, 2-col desktop / 1-col mobile; doc: one-tap CTA rule

docs/post-guideline.md

@@ -102,7 +102,7 @@ Every post gets a Chinese translation, **every time**, without being asked:
 2. **Keep EN and ZH in sync.** If you edit the English post (add a section, fix a fact, update a link), make the **same edit** to the Chinese version in the same commit. Never let the two versions drift.
 3. **Translate the *frontmatter* too** — title and description go to Chinese, but `category`, `tags`, and `pubDate` stay identical to the English post (they're data, not prose).
 4. **Code/commands stay in English** inside the Chinese post (see §6) — only the prose around them is translated.
-5. **Every case study ends with a hire CTA** (in the post body, not frontmatter): a "Want a bot/this for your business?" section with WhatsApp `+60 12-797 2969`, email `me@hoelee.com`, and `hoelee.com`. This is a business blog — every flagship post doubles as a lead magnet.
+5. **Every case study ends with a hire CTA** (in the post body, not frontmatter): a "Want this for your business?" section. The contact must be **one-tap, not plain text** — a clickable WhatsApp link (`https://wa.me/60127972969`) and a `mailto:` link (`mailto:me@hoelee.com?subject=...`), plus `hoelee.com` — and it should **name the concrete service offered** (e.g. "I build Telegram support bots like this one", "I set up self-hosted monitoring pipelines"), so a reader can tap straight through and ask for that specific thing. This is a business blog — every flagship post doubles as a lead magnet.
 6. **Case studies open with a "why it matters" section** (the business benefit: saves money, 24/7, converts browsers, remembers customers) before the technical architecture.
 
 **Verify after build:** the English page links to `/posts/zh/<slug>/` and the Chinese page links back to `/posts/<slug>/` (the auto language-switch).

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

@@ -62,11 +62,6 @@ const switchHref = translation ? `/posts/${translation}/` : undefined;
   }}
 >
   <article>
-    {post.data.banner && (
-      <figure class="article-banner">
-        <img src={post.data.banner} alt="" loading="lazy" width="1600" height="900" />
-      </figure>
-    )}
     <header class="article-head">
       <h1>{post.data.title}</h1>
       <div class="meta">
@@ -79,6 +74,12 @@ const switchHref = translation ? `/posts/${translation}/` : undefined;
       </div>
     </header>
 
+    {post.data.banner && (
+      <figure class="article-banner">
+        <img src={post.data.banner} alt="" loading="lazy" width="1600" height="900" />
+      </figure>
+    )}
+
     <Content />
 
     <AuthorCard />
@@ -90,8 +91,11 @@ const switchHref = translation ? `/posts/${translation}/` : undefined;
       <div class="related-grid">
         {related.map((p) => (
           <a class="related-card" href={`/posts/${p.slug}/`}>
-            <h3>{p.data.title}</h3>
-            <time datetime={p.data.pubDate.toISOString()}>{fmt(p.data.pubDate)}</time>
+            <img class="related-thumb" src={p.data.ogImage || '/og-default.png'} alt="" loading="lazy" width="1200" height="630" />
+            <div class="related-body">
+              <h3>{p.data.title}</h3>
+              <time datetime={p.data.pubDate.toISOString()}>{fmt(p.data.pubDate)}</time>
+            </div>
           </a>
         ))}
       </div>

src/styles/global.css

@@ -285,8 +285,8 @@ pre code {
 .related { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
 .related-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 0.9rem;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
   margin-top: 1rem;
 }
 .related-card {
@@ -294,11 +294,20 @@ pre code {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 0.9rem 1rem;
+  overflow: hidden;
   color: var(--ink);
   text-decoration: none;
 }
 .related-card:hover { border-color: var(--brand); }
+.related-thumb {
+  width: 100%;
+  height: auto;
+  display: block;
+  aspect-ratio: 1200 / 630;
+  object-fit: cover;
+  border-bottom: 1px solid var(--border);
+}
+.related-body { padding: 0.9rem 1rem; }
 .related-card h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
 .related-card time { font-size: 0.78rem; }