Merge branch 'ep2025' into fix-commit-hash-preview

Author: egeakman

package.json

@@ -48,6 +48,7 @@
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",
     "tsx": "^4.19.3",
+    "puppeteer": "^24.7.2",
     "typescript": "^5.8.3"
   },
   "prettier": {

pnpm-lock.yaml

@@ -0,0 +1,26 @@
+const puppeteer = require("puppeteer");
+
+(async () => {
+  const browser = await puppeteer.launch({
+    executablePath: process.env.CHROME_BIN,
+    args: ["--no-sandbox", "--disable-setuid-sandbox"],
+  });
+  const page = await browser.newPage();
+  await page.goto("http://localhost:4321/media/social_media_cards");
+
+  const elements = await page.$$(".social");
+
+  for (let i = 0; i < elements.length; i++) {
+    const el = elements[i];
+
+    // Get the slug from the element
+    const slug = await page.evaluate((el) => el.getAttribute("data-slug"), el);
+
+    // Fallback if slug is missing
+    const filename = slug ? `social-${slug}.png` : `social-${i}.png`;
+
+    await el.screenshot({ path: filename });
+  }
+
+  await browser.close();
+})();

public/53140703878_8d29805478_h.jpg

@@ -0,0 +1,110 @@
+---
+import { getCollection, getEntries, type CollectionEntry } from "astro:content";
+import { Image } from "astro:assets";
+
+const { entry } = Astro.props;
+
+const sessions = await getEntries(entry.data.submissions);
+---
+<svg width="900" height="900" class="h-full w-full -z-10">
+  <image href="http://localhost:4321/social/bg.png" width="900" height="900" />
+</svg>
+{
+  entry.data.avatar ? (
+    <svg width="900" height="900">
+      <defs>
+        <clipPath id="curvedCornerClip">
+          <path
+            d="
+               m 885 885 l -240 0 a 240 240 0 0 1 -240 -240 a 240 240 0 0 1 240 -240 a 240 240 0 0 1 240 240 z
+               "
+          />
+        </clipPath>
+      </defs>
+      <image
+        href={entry.data.avatar}
+        x="400"
+        y="400"
+        width="500"
+        height="560"
+        clip-path="url(#curvedCornerClip)"
+        preserveAspectRatio="xMidYMid slice"
+      />
+    </svg>
+<p
+  class="box fit-text"
+>
+{sessions.map((session) => <>{session.data.title} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</>)}
+</p>
+
+<p lang="en" class="box2 fit-text">
+  {entry.data.name}
+</p>
+
+):(
+
+<p
+  class="box3 fit-text"
+>
+{sessions.map((session) => <>{session.data.title} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</>)}
+</p>
+
+<p lang="en" class="box4 fit-text">
+  {entry.data.name}
+</p>
+
+)
+}
+
+
+
+<style>
+  .box {
+      margin-top:240px;
+      width: 430px;
+      height: 300px;
+      font-size: 100px;
+      color: rgb(239, 215, 123);
+      padding: 1rem;
+  }
+
+  .box2 {
+
+      width: 420px;
+      height: 200px;
+      font-size: 70px;
+      color:white;
+      padding: 2rem;
+  }
+
+  .box3 {
+      margin-top:280px;
+      width: 800px;
+      height: 300px;
+      font-size: 100px;
+      color: rgb(239, 215, 123);
+      padding: 1rem;
+  }
+
+  .box4 {
+
+      width: 580px;
+      height: 200px;
+      font-size: 70px;
+      color:white;
+      padding: 2rem;
+  }
+
+
+  .box, .box2, .box3, .box4 {
+      box-sizing: border-box;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      font-family: Inter, sans-serif !important;
+      font-weight: bold;
+      line-height: 1em;
+    }
+</style>