feat: og-image: Refactor OG image generation

Streamlines the OG image generation process, improving reliability and reducing dependencies. Key changes include removing TOML dependency, simplifying color handling, and adding a background image.

Author: neural-loop

assets/images/ONM.png

@@ -4,72 +4,101 @@
   <meta charset="utf-8">
   <title>OG Image</title>
   <style>
-    body {
+    /* Use a wrapper to act as our canvas and positioning context */
+    .canvas {
+      position: relative;
+      width: 1200px;
+      height: 630px;
       margin: 0;
       padding: 0;
+      background-color: #f9fafb;
+      font-family: 'Inter', Arial, sans-serif;
+      overflow: hidden; /* Important to clip anything that goes outside */
+    }
+
+    /* The watermark is now a simple, absolutely positioned image */
+    .watermark {
+      position: absolute;
+      z-index: 1; /* Behind the content */
+      opacity: 0.25;
+      /* Position at bottom-left, partially off-screen */
+      bottom: -50px;
+      left: 370px;
+      /* Set an explicit size */
+      width: 900px;
+      height: auto;
+      transform: rotate(-15deg);
+    }
+
+    /* The main content card, also absolutely positioned */
+    .container {
+      position: absolute;
+      z-index: 2; /* On top of the watermark */
       width: 1200px;
       height: 630px;
-      font-family: 'Inter', Arial, sans-serif;
-      background-color: BACKGROUND_COLOR_PLACEHOLDER; /* e.g., #f8f9fa or your site's light bg */
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      padding: 50px 60px;
       box-sizing: border-box;
+      display: flex; /* Flexbox for internal alignment is fine */
+      flex-direction: column;
     }
 
-    .container {
-      width: 1100px;
-      max-height: 550px;
-      padding: 50px 60px; /* Increased padding for more whitespace */
+    .main-content {
+      width: 100%;
+      height: 100%;
       display: flex;
       flex-direction: column;
-      align-items: flex-start; /* Align content to the left */
-      justify-content: center; /* Try to center content vertically if it's short */
-      box-sizing: border-box;
-      overflow: hidden;
-      border-radius: 12px; /* Optional: slightly rounded corners for the content box */
-      /* background-color: #ffffff; /* Optional: if you want a white card on a colored body bg */
+      justify-content: center;
+    }
+
+    .header {
+      position: relative;
+      width: 100%;
+      height: 80px;
+      margin-bottom: 30px;
     }
 
     .logo {
-      height: 60px; /* Reduced height for better proportion with text */
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 80px;
       width: auto;
-      max-width: 100%; /* Ensure logo doesn't overflow */
-      margin-bottom: 30px;
-      display: block;
     }
     img.logo[src=""] {
       display: none;
     }
 
+    .logo-text {
+      position: absolute;
+      top: 0;
+      left: 110px;
+      height: 80px;
+      line-height: 80px;
+      font-size: 54px;
+      font-weight: 700;
+      color: #1f2937;
+      white-space: nowrap;
+    }
+
     .title {
-      font-size: 60px; /* Larger title for more impact */
-      font-weight: 700; /* Bolder title */
+      font-size: 60px;
+      font-weight: 700;
       line-height: 1.15;
-      color: TITLE_TEXT_COLOR_PLACEHOLDER; /* e.g., #1a202c */
+      color: #1f2937;
       margin: 0 0 20px 0;
       display: -webkit-box;
-      -webkit-line-clamp: 2; /* Limit to 2 lines to keep it punchy */
+      -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
       text-align: left;
     }
 
-    hr {
-      border: 0;
-      height: 2px;
-      background-color: PRIMARY_COLOR_PLACEHOLDER; /* Use primary color for HR */
-      opacity: 0.3;
-      width: 150px; /* Shorter decorative HR */
-      margin: 0 0 25px 0; /* Margin below HR */
-    }
-
     .description {
       font-size: 32px;
       font-weight: 400;
       line-height: 1.45;
-      color: DESCRIPTION_TEXT_COLOR_PLACEHOLDER; /* e.g., #4a5568 */
+      color: #4b5563;
       margin: 0 0 20px 0;
       display: -webkit-box;
       -webkit-line-clamp: 4;
@@ -81,21 +110,32 @@
 
     .site-name {
       font-size: 28px;
-      font-weight: 500; /* Medium weight */
-      color: PRIMARY_COLOR_PLACEHOLDER; /* e.g., #4299e1 or your site's primary */
+      font-weight: 500;
+      color: #667eea;
       margin-top: auto;
       text-align: left;
-      padding-top: 10px; /* Add some space above site name */
+      padding-top: 10px;
     }
   </style>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
-<div class="container">
-  <img src="LOGO_SRC" alt="Site Logo" class="logo">
-  <h1 class="title">PAGE_TITLE</h1>
-  <p class="description">PAGE_DESCRIPTION</p>
-  <div class="site-name">open-neuromorphic.org</div>
+<div class="canvas">
+  <!-- Layer 1: The Watermark Image -->
+  <img src="BACKGROUND_URL" class="watermark" alt=""/>
+
+  <!-- Layer 2: The Content Container -->
+  <div class="container">
+    <div class="main-content">
+      <div class="header">
+        <img src="LOGO_SRC" alt="Site Logo" class="logo">
+        <div class="logo-text">Open Neuromorphic</div>
+      </div>
+      <h1 class="title">PAGE_TITLE</h1>
+      <p class="description">PAGE_DESCRIPTION</p>
+      <div class="site-name">open-neuromorphic.org</div>
+    </div>
+  </div>
 </div>
 </body>
 </html>

assets/og-template/template.html

@@ -19,7 +19,6 @@
     "postcss-cli": "^11.0.1",
     "tailwind-bootstrap-grid": "^5.1.0",
     "tailwindcss": "^3.4.17",
-    "toml": "^3.0.0",
     "mime-types": "^3.0.1"
   }
 }