Fix svg urls and style in social media cards

src/components/SocialMediaCard.astro

@@ -5,12 +5,12 @@ const { entry } = Astro.props;
 
 const sessions: CollectionEntry<"sessions">[]= await getEntries(entry.data.submissions);
 ---
-<svg width="900" height="900" class="h-full w-full -z-10">
+<svg class="bg" width="900" height="900" class="h-full w-full -z-10">
   <image href="/social/bg.png" width="900" height="900" />
 </svg>
 {
   entry.data.avatar ? (
-    <svg width="900" height="900">
+    <svg class="avatar" width="900" height="900">
       <defs>
         <clipPath id="curvedCornerClip">
           <path
@@ -65,6 +65,7 @@ const sessions: CollectionEntry<"sessions">[]= await getEntries(entry.data.submi
       font-size: 100px;
       color: rgb(239, 215, 123);
       padding: 1rem;
+      position:relative;
   }
 
   .box2 {
@@ -74,6 +75,7 @@ const sessions: CollectionEntry<"sessions">[]= await getEntries(entry.data.submi
       font-size: 70px;
       color:white;
       padding: 2rem;
+      position:relative;
   }
 
   .box3 {
@@ -83,6 +85,7 @@ const sessions: CollectionEntry<"sessions">[]= await getEntries(entry.data.submi
       font-size: 100px;
       color: rgb(239, 215, 123);
       padding: 1rem;
+      position:relative;
   }
 
   .box4 {
@@ -92,6 +95,7 @@ const sessions: CollectionEntry<"sessions">[]= await getEntries(entry.data.submi
       font-size: 70px;
       color:white;
       padding: 2rem;
+      position:relative;
   }
 
 

src/components/SocialMediaSponsorCard.astro

@@ -2,52 +2,84 @@
 import { sponsorLogos } from "@data/sponsorLogos";
 
 const { sponsor } = Astro.props;
-
 const {
   name: title,
   logo_padding = false,
 } = sponsor.data;
 
-
 const logo = sponsorLogos[sponsor.id];
-// Assuming logo.width and logo.height are known
+
+// Function to parse CSS padding values
+function parsePadding(paddingStr: string) {
+  if (!paddingStr || paddingStr === "0") {
+    return { top: 0, right: 0, bottom: 0, left: 0 };
+  }
+
+  // Remove 'px' and split by spaces
+  const values = paddingStr.replace(/px/g, '').split(/\s+/).map(v => parseFloat(v) || 0);
+
+  switch (values.length) {
+    case 1:
+      // "10px" -> all sides
+      return { top: values[0], right: values[0], bottom: values[0], left: values[0] };
+    case 2:
+      // "15px 20px" -> top/bottom, left/right
+      return { top: values[0], right: values[1], bottom: values[0], left: values[1] };
+    case 3:
+      // "10px 15px 20px" -> top, left/right, bottom
+      return { top: values[0], right: values[1], bottom: values[2], left: values[1] };
+    case 4:
+      // "10px 15px 20px 25px" -> top, right, bottom, left
+      return { top: values[0], right: values[1], bottom: values[2], left: values[3] };
+    default:
+      return { top: 0, right: 0, bottom: 0, left: 0 };
+  }
+}
+
+// Parse padding
+const padding = parsePadding(logo_padding);
+
+// Calculate dimensions with padding
 const targetWidth = 400;
 const originalWidth = logo.width;
 const originalHeight = logo.height;
 const aspectRatio = originalWidth / originalHeight;
 
-let width = targetWidth;
+// Available space after padding
+const availableWidth = targetWidth - padding.left - padding.right;
+const maxHeight = 220;
+const availableHeight = maxHeight - padding.top - padding.bottom;
+
+let width = availableWidth;
 let height = width / aspectRatio;
 
-const maxHeight = 220;
-if (height > maxHeight) {
-  height = maxHeight;
-  width = height * aspectRatio ;
+// Check if height exceeds available space
+if (height > availableHeight) {
+  height = availableHeight;
+  width = height * aspectRatio;
 }
 
-const x = 450 - width / 2;
-const y = 650 - height / 2;
-
+// Calculate position with padding offset
+const x = 450 - (width + padding.left + padding.right) / 2 + padding.left;
+const y = 650 - (height + padding.top + padding.bottom) / 2 + padding.top;
 ---
-<svg width="900" height="900" class="h-full w-full -z-10">
+
+<svg class="bg" 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>
+
+<svg class="sponsor-logo" width="900" height="900">
+  <image
+    class="sponsor_logo"
+    href={logo.src}
+    x={x}
+    y={y}
+    width={width}
+    height={height}
+    clip-path="url(#curvedCornerClip)"
+    preserveAspectRatio="xMidYMid meet"
+  />
+</svg>
 
 <p lang="en" class="box2 fit-text">
 {title}

src/components/ticket-tiers/ticket-tiers.astro

@@ -14,6 +14,7 @@ interface TicketTierProps {
   title: string;
   educationPrice?: number | string;
   personalPrice: number | string;
+  subtitle?: string;
   businessPrice: number | string;
   lateBusinessPrice?: number | string;
   latePersonalPrice?: number | string;

src/components/ui/Markdown.astro

@@ -4,7 +4,7 @@ import { replaceYouTubeLinks } from "@utils/markdown";
 
 interface Props {
   content: string;
-  class: string;
+  class?: string;
 }
 
 const { content, class: className } = Astro.props;

src/pages/media/speakers.astro

@@ -36,6 +36,8 @@ type Speaker = CollectionEntry<"speakers">;
 .social {
   width: 900px;
   height: 900px;
+  position: relative;
+  overflow: hidden;
 }
 
 .social svg {
@@ -47,6 +49,15 @@ type Speaker = CollectionEntry<"speakers">;
   object-fit: contain;
 }
 
+.social svg.bg {
+  z-index:0;
+}
+
+.social svg.avatar {
+  z-index:10000;
+}
+
+
   body * {
       font-family: Inter, sans-serif;
   }

src/pages/media/sponsor/[slug].astro

@@ -87,45 +87,57 @@ window.addEventListener('resize', fitAllText);
 
 <script is:inline define:vars={{slug: sponsor.id}}>
   document.addEventListener('DOMContentLoaded', () => {
-    document.querySelectorAll('.social').forEach((socialDiv, index) => {
+    // Get base URL from document
+    const baseUrl = document.baseURI || document.location.origin;
 
-  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);
+    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");
+          // Clone the SVG content and resolve relative URLs
+          const clonedContent = svg.innerHTML;
+          // Replace relative URLs with absolute URLs
+          const resolvedContent = clonedContent.replace(
+            /href="([^"]*(?:\.png|\.jpg|\.jpeg|\.gif|\.svg|\.webp)[^"]*)"/gi,
+            (match, url) => {
+              // If URL is already absolute, keep it as is
+              if (url.startsWith('http') || url.startsWith('//')) {
+                return match;
+              }
+              // Convert relative URL to absolute
+              const absoluteUrl = new URL(url, baseUrl).href;
+              return `href="${absoluteUrl}"`;
+            }
+          );
+          g.innerHTML = resolvedContent;
+          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);
+      });
     });
-
-    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>

src/pages/media/sponsors.astro

@@ -36,6 +36,8 @@ type Sponsor = CollectionEntry<"sponsors">;
 .social {
   width: 900px;
   height: 900px;
+  position: relative;
+  overflow: hidden;
 }
 
 .social svg {
@@ -47,6 +49,15 @@ type Sponsor = CollectionEntry<"sponsors">;
   object-fit: contain;
 }
 
+.social svg.bg {
+  z-index:0;
+}
+
+.social svg.sponsor-logo{
+  z-index:10000;
+}
+
+
   body * {
       font-family: Inter, sans-serif;
   }