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

2026-09-09 06:11:13 +08:00
parent ef6b54b2f1
commit 7f25f9ae4d
6 changed files with 286 additions and 68 deletions
@@ -0,0 +1,93 @@
+<!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: 48px; height: 48px; border-radius: 10px;
+    display: flex; align-items: center; justify-content: center;
+    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;
+  }
+  .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: {{TITLE_SIZE}}px;
+    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"><img src="{{LOGO_PATH}}" alt=""></div>
+    <div class="brand">Mr Hoelee <span class="domain">· blog.hoelee.com</span></div>
+  </div>
+
+  <div class="tag"><span class="dot"></span>{{CATEGORY}} · {{KIND}}</div>
+
+  <div class="title">{{TITLE_HTML}}</div>
+
+  <div class="terminal">
+    {{TERMINAL_HTML}}
+  </div>
+
+  <div class="footer">
+    <div class="tags">{{TAGS_HTML}}</div>
+    <div class="url">blog.hoelee.com</div>
+  </div>
+</body>
+</html>