1 files changed, 46 insertions, 4 deletions
diff --git a/src/pages/og/[slug].png.ts b/src/pages/og/[slug].png.ts
index 3c695f0..543fe46 100644
--- a/src/pages/og/[slug].png.ts
+++ b/src/pages/og/[slug].png.ts
@@ -30,6 +30,46 @@ const fontBuffer = readFileSync("node_modules/.noto-sans-jp.otf");
 const faceiconBuffer = readFileSync("public/img/faceicon.jpg");
 const faceiconBase64 = `data:image/jpeg;base64,${faceiconBuffer.toString("base64")}`;
 
+// Generate star elements for space-like background
+const stars = [
+  { x: 80, y: 40, r: 2, o: 0.8 },
+  { x: 200, y: 90, r: 1.5, o: 0.6 },
+  { x: 350, y: 30, r: 2.5, o: 0.9 },
+  { x: 500, y: 80, r: 1, o: 0.5 },
+  { x: 650, y: 50, r: 2, o: 0.7 },
+  { x: 800, y: 100, r: 1.5, o: 0.6 },
+  { x: 950, y: 40, r: 3, o: 0.85 },
+  { x: 1100, y: 70, r: 1, o: 0.5 },
+  { x: 1150, y: 120, r: 2, o: 0.7 },
+  { x: 150, y: 160, r: 1, o: 0.4 },
+  { x: 450, y: 140, r: 2, o: 0.5 },
+  { x: 700, y: 160, r: 1.5, o: 0.45 },
+  { x: 1000, y: 150, r: 2.5, o: 0.55 },
+  { x: 50, y: 500, r: 1.5, o: 0.4 },
+  { x: 300, y: 550, r: 2, o: 0.5 },
+  { x: 600, y: 520, r: 1, o: 0.35 },
+  { x: 850, y: 570, r: 2.5, o: 0.5 },
+  { x: 1050, y: 540, r: 1, o: 0.4 },
+  { x: 1150, y: 580, r: 1.5, o: 0.45 },
+  { x: 120, y: 300, r: 1, o: 0.3 },
+  { x: 1080, y: 280, r: 1.5, o: 0.35 },
+].map((s, i) => ({
+  type: "div" as const,
+  props: {
+    key: `star-${i}`,
+    style: {
+      position: "absolute" as const,
+      left: `${s.x}px`,
+      top: `${s.y}px`,
+      width: `${s.r * 2}px`,
+      height: `${s.r * 2}px`,
+      borderRadius: "50%",
+      background: `rgba(255,255,255,${s.o})`,
+      boxShadow: `0 0 ${s.r * 3}px rgba(255,255,255,${s.o * 0.4})`,
+    },
+  },
+}));
+
 export async function GET({ params }: { params: { slug: string } }) {
   const slug = params.slug;
   const title = pages[slug] ?? "小平市議 安竹洋平 公式サイト";
@@ -43,14 +83,17 @@ export async function GET({ params }: { params: { slug: string } }) {
           width: "1200px",
           height: "630px",
           background:
-            "linear-gradient(135deg, #1e1b4b 0%, #3730a3 50%, #4f46e5 100%)",
+            "linear-gradient(135deg, #0f0d2e 0%, #1e1b4b 30%, #3730a3 60%, #4f46e5 100%)",
           color: "#ffffff",
           fontFamily: "sans-serif",
           padding: "64px 80px",
           alignItems: "center",
           gap: "56px",
+          position: "relative",
+          overflow: "hidden",
         },
         children: [
+          ...stars,
           {
             type: "img",
             props: {
@@ -61,6 +104,7 @@ export async function GET({ params }: { params: { slug: string } }) {
                 borderRadius: "50%",
                 border: "3px solid rgba(255,255,255,0.25)",
                 flexShrink: "0",
+                position: "relative",
               },
             },
           },
@@ -72,9 +116,9 @@ export async function GET({ params }: { params: { slug: string } }) {
                 flexDirection: "column",
                 gap: "20px",
                 flex: "1",
+                position: "relative",
               },
               children: [
-                // Page title as the main element
                 {
                   type: "div",
                   props: {
@@ -87,7 +131,6 @@ export async function GET({ params }: { params: { slug: string } }) {
                     children: title,
                   },
                 },
-                // 3-line slogan (inline, smaller)
                 {
                   type: "div",
                   props: {
@@ -117,7 +160,6 @@ export async function GET({ params }: { params: { slug: string } }) {
                     ],
                   },
                 },
-                // Name + domain
                 {
                   type: "div",
                   props: {