feat: automate OpenGraph meta tag syncing and update share card styling and layout

Author: pixelead0

scripts/update_metrics.py

@@ -498,6 +498,31 @@ def run(self) -> None:
             logger.critical("Failed writing output file '%s': %s", self.config.output_json, exc)
             raise TelemetryError(f"Could not write destination file: {self.config.output_json}") from exc
 
+        self._sync_index_html_meta(self.config.target)
+
+    def _sync_index_html_meta(self, target: str) -> None:
+        """Keep static OpenGraph meta tags in index.html in sync with the detected target user."""
+        index_html_path = Path(__file__).resolve().parent.parent / "index.html"
+        if not index_html_path.is_file():
+            return
+        try:
+            content = index_html_path.read_text(encoding="utf-8")
+            import re
+            content = re.sub(
+                r'<meta property="og:title" content="[^"]*" id="og-title" />',
+                f'<meta property="og:title" content="Estadísticas de @{target} en GitHub 📊 ¡Crea tu dashboard gratis!" id="og-title" />',
+                content
+            )
+            content = re.sub(
+                r'<meta name="twitter:title" content="[^"]*" id="twitter-title" />',
+                f'<meta name="twitter:title" content="Estadísticas de @{target} en GitHub 📊 ¡Crea tu dashboard gratis!" id="twitter-title" />',
+                content
+            )
+            index_html_path.write_text(content, encoding="utf-8")
+            logger.info("✔ Synced OpenGraph meta tags in index.html for target '@%s'", target)
+        except OSError as exc:
+            logger.warning("Could not sync index.html meta tags: %s", exc)
+
 
 def main() -> None:
     """CLI entrypoint with graceful exit codes."""

templates/share.html

@@ -92,19 +92,19 @@
       <div class="flex items-start justify-between border-b border-zinc-200 pb-4 pt-1">
         <div class="flex items-center gap-4">
           <!-- Avatar a la izquierda -->
-          <img id="cardAvatar" src="https://github.com/shellaquiles.png?size=128" alt="Avatar" class="w-14 h-14 rounded-full border border-zinc-300 bg-zinc-100 object-cover" />
+          <img id="cardAvatar" src="https://github.com/shellaquiles.png?size=128" alt="Avatar" class="w-14 h-14 rounded-full border border-zinc-300 bg-zinc-100 object-cover shrink-0" />
 
           <div class="space-y-0.5">
             <div class="flex items-center gap-3">
-              <span class="font-mono text-2xl font-bold tracking-tight">
-                <span style="color:#71717a;font-weight:400;">{{</span><span style="color:#22c55e;font-weight:700;">shell</span><span style="color:#09090b;font-weight:700;">aquiles</span><span style="color:#f43f5e;font-weight:700;">.org</span><span style="color:#71717a;font-weight:400;">}}</span>
-              </span>
+              <span class="font-mono text-2xl font-black tracking-tight text-zinc-950" id="cardUserHandle">@shellaquiles</span>
               <span class="px-2 py-0.5 bg-zinc-100 text-zinc-800 font-mono text-xs font-bold border border-zinc-300" id="cardVersion">v1.0.0</span>
             </div>
             <div class="font-mono text-xs text-zinc-500 flex items-center gap-2 pt-0.5">
               <span>HUELLA DIGITAL & PROYECTOS OPEN SOURCE</span>
               <span class="text-zinc-300">•</span>
-              <span id="cardUserHandle" class="text-zinc-900 font-bold">@shellaquiles</span>
+              <span class="text-zinc-700 font-bold">
+                by <span style="color:#71717a;font-weight:400;">{{</span><span style="color:#22c55e;font-weight:700;">shell</span><span style="color:#09090b;font-weight:700;">aquiles</span><span style="color:#f43f5e;font-weight:700;">.org</span><span style="color:#71717a;font-weight:400;">}}</span>
+              </span>
             </div>
           </div>
         </div>