Add og-gen script: reusable per-post OG image generator

.og/gen/why-telegram-bot-notifications-die.html

@@ -15,90 +15,56 @@
     position: relative;
   }
 
-  /* 顶部品牌条 */
   .topbar {
-    display: flex;
-    align-items: center;
-    gap: 14px;
+    display: flex; align-items: center; gap: 14px;
     padding: 34px 48px 0;
   }
   .avatar {
-    width: 48px; height: 48px;
-    border-radius: 10px;
+    width: 48px; height: 48px; border-radius: 10px;
     display: flex; align-items: center; justify-content: center;
-    background: #ffffff;
-    padding: 4px;
+    background: #ffffff; padding: 4px;
   }
   .avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
   .brand {
     font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
-    font-weight: 700;
-    font-size: 22px;
-    color: #ffffff;
-    letter-spacing: 0.3px;
+    font-weight: 700; font-size: 22px; color: #ffffff; letter-spacing: 0.3px;
   }
   .brand .domain { color: #6b7c99; font-weight: 500; font-size: 19px; }
 
-  /* 中间：分类徽章 */
   .tag {
     margin: 40px 48px 0;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    width: fit-content;
-    padding: 7px 16px;
-    border-radius: 6px;
+    display: inline-flex; align-items: center; gap: 8px;
+    width: fit-content; padding: 7px 16px; border-radius: 6px;
     background: rgba(41, 92, 255, 0.16);
     border: 1px solid rgba(41, 92, 255, 0.5);
-    color: #7599ff;
-    font-size: 16px;
-    letter-spacing: 0.8px;
-    text-transform: uppercase;
+    color: #7599ff; font-size: 16px; letter-spacing: 0.8px; text-transform: uppercase;
   }
   .tag .dot { width: 8px; height: 8px; border-radius: 50%; background: #295cff; }
 
-  /* 标题 */
   .title {
     margin: 30px 48px 0;
     font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
-    font-weight: 700;
-    font-size: 52px;
-    line-height: 1.15;
-    color: #ffffff;
-    max-width: 1000px;
+    font-weight: 700; font-size: 40px;
+    line-height: 1.15; color: #ffffff; max-width: 1000px;
   }
   .title .accent { color: #ff5c5c; }
 
-  /* 终端窗口 */
   .terminal {
     margin: 34px 48px 0;
-    background: #161e2e;
-    border: 1px solid #2a3550;
-    border-radius: 10px;
+    background: #161e2e; border: 1px solid #2a3550; border-radius: 10px;
     padding: 22px 28px;
     font-family: "JetBrains Mono", "Fira Code", Menlo, monospace;
-    font-size: 21px;
-    line-height: 1.6;
-    max-width: 1040px;
+    font-size: 21px; line-height: 1.6; max-width: 1040px;
   }
   .terminal .line { display: flex; gap: 12px; }
   .terminal .prompt { color: #7599ff; }
   .terminal .cmd { color: #e6edf3; }
-  .terminal .err {
-    color: #ff5c5c;
-    background: rgba(255, 92, 92, 0.10);
-    padding: 1px 8px;
-    border-radius: 4px;
-  }
+  .terminal .err { color: #ff5c5c; background: rgba(255, 92, 92, 0.10); padding: 1px 8px; border-radius: 4px; }
   .terminal .fix { color: #3fb950; }
 
-  /* 底部 */
   .footer {
-    margin-top: auto;
-    padding: 0 48px 34px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    margin-top: auto; padding: 0 48px 34px;
+    display: flex; align-items: center; justify-content: space-between;
   }
   .footer .tags { color: #6b7c99; font-size: 17px; }
   .footer .tags span { margin-right: 18px; color: #7599ff; }
@@ -111,32 +77,19 @@
     <div class="brand">Mr Hoelee <span class="domain">· blog.hoelee.com</span></div>
   </div>
 
-  <div class="tag"><span class="dot"></span>DevOps · Debugging</div>
+  <div class="tag"><span class="dot"></span>devops · DevOps</div>
 
-  <div class="title">
-    Telegram Bot Notifications<br>That <span class="accent">Died at 400</span>
-  </div>
+  <div class="title">Why Telegram Bot Notifications Die: IPv6, DNS,<br>and a 400 That Took a Day</div>
 
   <div class="terminal">
-    <div class="line">
-      <span class="prompt">$</span>
-      <span class="cmd">docker exec monitor python check_notify.py</span>
-    </div>
-    <div class="line">
-      <span class="prompt">&nbsp;</span>
-      <span class="err">telegram sendPhoto failed: 400 nginx/1.30.1</span>
-    </div>
-    <div class="line">
-      <span class="prompt">$</span>
-      <span class="cmd">fix = IPv6 · DNS · multipart</span>
-      <span class="fix">→ delivered ✓</span>
-    </div>
+    
+    <div class="line"><span class="prompt">$</span><span class="cmd">docker exec monitor python check_notify.py</span></div>
+    <div class="line"><span class="prompt">&nbsp;</span><span class="err">telegram sendPhoto failed: 400 nginx/1.30.1</span></div>
+    <div class="line"><span class="prompt">$</span><span class="cmd">fix = IPv6 · DNS · multipart</span><span class="fix">→ delivered ✓</span></div>
   </div>
 
   <div class="footer">
-    <div class="tags">
-      <span>#docker</span><span>#telegram</span><span>#ipv6</span><span>#dns</span>
-    </div>
+    <div class="tags"><span>#docker</span><span>#telegram</span><span>#python</span><span>#dns</span><span>#ipv6</span><span>#debugging</span><span>#portainer</span></div>
     <div class="url">blog.hoelee.com</div>
   </div>
 </body>