EuroPython · nikoshell · May 21, 2025 · May 17, 2025 · May 17, 2025 · May 17, 2025
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -89,7 +89,9 @@ export default defineConfig({
     metaTags(),
     pagefind(),
     deleteUnusedImages(),
-    compress(),
+    (await import("astro-compress")).default({
+      SVG: false,
+    }),
   ],
   output: "static",
   build: {

diff --git a/public/social/bg2.png b/public/social/bg2.png
diff --git a/public/social/bg3.png b/public/social/bg3.png
diff --git a/public/social/bg4.png b/public/social/bg4.png
diff --git a/scripts/download_social.cjs b/scripts/download_social.cjs
@@ -6,7 +6,7 @@ const puppeteer = require("puppeteer");
     args: ["--no-sandbox", "--disable-setuid-sandbox"],
   });
   const page = await browser.newPage();
-  await page.goto("http://localhost:4321/media/social_media_cards");
+  await page.goto("http://localhost:4321/media/speakers");
 
   const elements = await page.$$(".social");
 

diff --git a/src/components/SocialMediaSponsorCard.astro b/src/components/SocialMediaSponsorCard.astro
@@ -0,0 +1,114 @@
+---
+import { getEntry } from "astro:content";
+import { sponsorLogos } from "@data/sponsorLogos";
+
+const { sponsor } = Astro.props;
+
+const {
+  name: title,
+  url: website,
+  logo_padding = false,
+} = sponsor.data;
+
+
+const logo = sponsorLogos[sponsor.id];
+// Assuming logo.width and logo.height are known
+const targetWidth = 400;
+const originalWidth = logo.width;
+const originalHeight = logo.height;
+const aspectRatio = originalWidth / originalHeight;
+
+let width = targetWidth;
+let height = width / aspectRatio;
+
+const maxHeight = 220;
+if (height > maxHeight) {
+  height = maxHeight;
+  width = height * aspectRatio ;
+}
+
+const x = 450 - width / 2;
+const y = 650 - height / 2;
+
+---
+<svg width="900" height="900" class="h-full w-full -z-10">
+  <image href="/social/bg4.png" width="900" height="900" />
+</svg>
+    <svg width="900" height="900">
+
+<image
+  class="sponsor_logo"
+  href={logo.src}
+  x={x}
+  y={y}
+  width={width}
+  height={height}
+  style={{
+    padding: logo_padding ? logo_padding : undefined,
+  }}
+  clip-path="url(#curvedCornerClip)"
+  preserveAspectRatio="xMidYMid meet"
+/>
+    </svg>
+
+<p lang="en" class="box2 fit-text">
+{title}
+</p>
+
+
+<style>
+  .box {
+      margin-top:250px;
+      width: 630px;
+      height: 150px;
+      font-size: 100px;
+      color: rgb(239, 215, 123);
+      padding: 1rem;
+      opacity: 0;
+  }
+
+  .box2 {
+      margin-top:320px;
+      margin-left:150px;
+      width: 640px;
+      height: 180px;
+      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;
+    }
+
+  .sponsor_logo {
+    max-height:120px;
+  }
+</style>
diff --git a/src/pages/media/social_media.csv.ts b/src/pages/media/social_media.csv.ts
diff --git a/src/pages/media/card/[slug].astro → src/pages/media/speaker/[slug].astro b/src/pages/media/card/[slug].astro → src/pages/media/speaker/[slug].astro
diff --git a/src/pages/media/social_media_cards.astro → src/pages/media/speakers.astro b/src/pages/media/social_media_cards.astro → src/pages/media/speakers.astro
@@ -20,7 +20,7 @@ type Speaker = CollectionEntry<"speakers">;
   <body class="overflow-auto">
 {
   speakers.map((entry: Speaker) => (
-  <a href=`/media/card/${entry.data.slug}`>
+  <a href=`/media/speaker/${entry.data.slug}`>
   <div class="social relative w-[900px] h-[900px] overflow-hidden" data-slug={entry.data.slug}>
       <SocialMediaCard entry={entry} />
     </div>

diff --git a/src/pages/media/sponsor/[slug].astro b/src/pages/media/sponsor/[slug].astro
@@ -0,0 +1,131 @@
+---
+import { getEntry, getCollection} from "astro:content";
+import SocialMediaSponsorCard from "@components/SocialMediaSponsorCard.astro";
+
+export async function getStaticPaths() {
+  const entries = await getCollection("sponsors");
+  return entries.map((entry) => ({
+    params: { slug: entry.id},
+    props: { entry },
+  }));
+}
+
+const { entry:sponsor } = Astro.props;
+
+---
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>
+  </head>
+  <body class="overflow-auto">
+{
+  sponsor &&
+    <div class="social relative w-[900px] h-[900px] overflow-hidden">
+      <SocialMediaSponsorCard {sponsor} />
+    </div>
+}
+
+  </body>
+</html>
+
+<style is:global>
+
+.social {
+  width: 900px;
+  height: 900px;
+}
+
+.social svg {
+  position: absolute;
+  top:0;
+  left:0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+  body * {
+      font-family: Inter, sans-serif;
+  }
+
+  .avatar {
+    object-position:50% 25%;
+  }
+
+</style>
+
+<script is:inline>
+function fitText(container) {
+  let fontSize = 100; // Start big
+  container.style.fontSize = fontSize + 'px';
+
+  while (
+    (container.scrollWidth > container.clientWidth || container.scrollHeight > container.clientHeight)
+    && fontSize > 5
+  ) {
+    fontSize -= 1;
+    container.style.fontSize = fontSize + 'px';
+  }
+}
+
+function fitAllText() {
+  const boxes = document.querySelectorAll('.fit-text');
+  boxes.forEach(box => fitText(box));
+}
+
+fitAllText();
+
+window.addEventListener('resize', fitAllText);
+</script>
+
+<script is:inline define:vars={{slug: sponsor.id}}>
+  document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.social').forEach((socialDiv, index) => {
+
+  socialDiv.addEventListener('click', () => {
+    const svgs = socialDiv.querySelectorAll('svg');
+
+    if (svgs.length === 0) {
+      alert('No SVGs found!');
+      return;
+    }
+
+    const xmlns = "http://www.w3.org/2000/svg";
+    const combinedSvg = document.createElementNS(xmlns, "svg");
+    combinedSvg.setAttribute("xmlns", xmlns);
+    combinedSvg.setAttribute("width", "900");
+    combinedSvg.setAttribute("height", "900");
+    combinedSvg.setAttribute("viewBox", "0 0 900 900");
+
+    svgs.forEach(svg => {
+      const g = document.createElementNS(xmlns, "g");
+      g.innerHTML = svg.innerHTML;
+      combinedSvg.appendChild(g);
+    });
+
+    const serializer = new XMLSerializer();
+    const svgString = serializer.serializeToString(combinedSvg);
+
+    const blob = new Blob([svgString], {type: "image/svg+xml"});
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = slug ? `social-${slug}.svg` : `social-${index +1}.svg`;
+    a.style.display = "none";
+    document.body.appendChild(a);
+    a.click();
+
+    URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+  });
+    });
+});
+</script>