add dynamic OG image generation for blog posts

Uses satori + @resvg/resvg-js to generate unique OG images at build time
for every post. Dark editorial design with Python branding, title, author,
date, and tag pills. Bumps pre-commit large file threshold for bun.lock.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: JacobCoffee

.pre-commit-config.yaml

@@ -9,7 +9,7 @@ repos:
       - id: check-json
       - id: check-merge-conflict
       - id: check-added-large-files
-        args: [--maxkb=200]
+        args: [--maxkb=500]
 
   - repo: https://github.com/crate-ci/typos
     rev: v1.32.0

bun.lock

@@ -18,10 +18,12 @@
     "@astrojs/sitemap": "^3.7.0",
     "@keystatic/astro": "^5.0.6",
     "@keystatic/core": "^0.5.48",
+    "@resvg/resvg-js": "^2.6.2",
     "astro": "^5.17.1",
     "cmdk": "^1.1.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "satori": "^0.19.2",
     "unist-util-visit": "^5.1.0"
   },
   "devDependencies": {

package.json

@@ -43,7 +43,7 @@ const sortedGroups = [...refGroups.entries()]
   .sort((a, b) => (groupMeta[a[0]]?.order ?? 99) - (groupMeta[b[0]]?.order ?? 99));
 ---
 
-<BaseLayout title={`${title} | Python Insider`} description={description ?? undefined}>
+<BaseLayout title={`${title} | Python Insider`} description={description ?? undefined} image={slug ? withBase(`/og/${slug}.png`) : undefined}>
   <div class="relative mx-auto flex max-w-6xl gap-10">
     <article class="prose mx-auto min-w-0 max-w-3xl flex-1">
       <header class="not-prose mb-10 animate-fade-up">