Add per-post OG image for Telegram debugging post

2026-09-09 05:52:01 +08:00
parent a9554212a1
commit 2c86da97c7
5 changed files with 146 additions and 0 deletions
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body { width: 1200px; height: 630px; overflow: hidden; }
+
+  body {
+    font-family: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;
+    background: #0d1220;
+    color: #e6edf3;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
+  /* 顶部品牌条 */
+  .topbar {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 34px 48px 0;
+  }
+  .avatar {
+    width: 44px; height: 44px; border-radius: 50%;
+    background: #295cff;
+    color: #ffffff;
+    font-weight: 700;
+    font-size: 22px;
+    display: flex; align-items: center; justify-content: center;
+    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
+  }
+  .brand {
+    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
+    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;
+    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;
+  }
+  .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;
+  }
+  .title .accent { color: #ff5c5c; }
+
+  /* 终端窗口 */
+  .terminal {
+    margin: 34px 48px 0;
+    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;
+  }
+  .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 .fix { color: #3fb950; }
+
+  /* 底部 */
+  .footer {
+    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; }
+  .footer .url { color: #6b7c99; font-size: 17px; }
+</style>
+</head>
+<body>
+  <div class="topbar">
+    <div class="avatar">M</div>
+    <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="title">
+    Telegram Bot Notifications<br>That <span class="accent">Died at 400</span>
+  </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>
+
+  <div class="footer">
+    <div class="tags">
+      <span>#docker</span><span>#telegram</span><span>#ipv6</span><span>#dns</span>
+    </div>
+    <div class="url">blog.hoelee.com</div>
+  </div>
+</body>
+</html>