Skip to content

Commit 0aa02f9

Browse files
committed
Fix svg urls
1 parent c97624b commit 0aa02f9

File tree

7 files changed

+140
-69
lines changed

7 files changed

+140
-69
lines changed

src/components/SocialMediaCard.astro

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ const { entry } = Astro.props;
55
66
const sessions: CollectionEntry<"sessions">[]= await getEntries(entry.data.submissions);
77
---
8-
<svg width="900" height="900" class="h-full w-full -z-10">
8+
<svg class="bg" width="900" height="900" class="h-full w-full -z-10">
99
<image href="/social/bg.png" width="900" height="900" />
1010
</svg>
1111
{
1212
entry.data.avatar ? (
13-
<svg width="900" height="900">
13+
<svg class="avatar" width="900" height="900">
1414
<defs>
1515
<clipPath id="curvedCornerClip">
1616
<path
@@ -65,6 +65,7 @@ const sessions: CollectionEntry<"sessions">[]= await getEntries(entry.data.submi
6565
font-size: 100px;
6666
color: rgb(239, 215, 123);
6767
padding: 1rem;
68+
position:relative;
6869
}
6970

7071
.box2 {
@@ -74,6 +75,7 @@ const sessions: CollectionEntry<"sessions">[]= await getEntries(entry.data.submi
7475
font-size: 70px;
7576
color:white;
7677
padding: 2rem;
78+
position:relative;
7779
}
7880

7981
.box3 {
@@ -83,6 +85,7 @@ const sessions: CollectionEntry<"sessions">[]= await getEntries(entry.data.submi
8385
font-size: 100px;
8486
color: rgb(239, 215, 123);
8587
padding: 1rem;
88+
position:relative;
8689
}
8790

8891
.box4 {
@@ -92,6 +95,7 @@ const sessions: CollectionEntry<"sessions">[]= await getEntries(entry.data.submi
9295
font-size: 70px;
9396
color:white;
9497
padding: 2rem;
98+
position:relative;
9599
}
96100

97101

src/components/SocialMediaSponsorCard.astro

Lines changed: 60 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,52 +2,84 @@
22
import { sponsorLogos } from "@data/sponsorLogos";
33
44
const { sponsor } = Astro.props;
5-
65
const {
76
name: title,
87
logo_padding = false,
98
} = sponsor.data;
109
11-
1210
const logo = sponsorLogos[sponsor.id];
13-
// Assuming logo.width and logo.height are known
11+
12+
// Function to parse CSS padding values
13+
function parsePadding(paddingStr: string) {
14+
if (!paddingStr || paddingStr === "0") {
15+
return { top: 0, right: 0, bottom: 0, left: 0 };
16+
}
17+
18+
// Remove 'px' and split by spaces
19+
const values = paddingStr.replace(/px/g, '').split(/\s+/).map(v => parseFloat(v) || 0);
20+
21+
switch (values.length) {
22+
case 1:
23+
// "10px" -> all sides
24+
return { top: values[0], right: values[0], bottom: values[0], left: values[0] };
25+
case 2:
26+
// "15px 20px" -> top/bottom, left/right
27+
return { top: values[0], right: values[1], bottom: values[0], left: values[1] };
28+
case 3:
29+
// "10px 15px 20px" -> top, left/right, bottom
30+
return { top: values[0], right: values[1], bottom: values[2], left: values[1] };
31+
case 4:
32+
// "10px 15px 20px 25px" -> top, right, bottom, left
33+
return { top: values[0], right: values[1], bottom: values[2], left: values[3] };
34+
default:
35+
return { top: 0, right: 0, bottom: 0, left: 0 };
36+
}
37+
}
38+
39+
// Parse padding
40+
const padding = parsePadding(logo_padding);
41+
42+
// Calculate dimensions with padding
1443
const targetWidth = 400;
1544
const originalWidth = logo.width;
1645
const originalHeight = logo.height;
1746
const aspectRatio = originalWidth / originalHeight;
1847
19-
let width = targetWidth;
48+
// Available space after padding
49+
const availableWidth = targetWidth - padding.left - padding.right;
50+
const maxHeight = 220;
51+
const availableHeight = maxHeight - padding.top - padding.bottom;
52+
53+
let width = availableWidth;
2054
let height = width / aspectRatio;
2155
22-
const maxHeight = 220;
23-
if (height > maxHeight) {
24-
height = maxHeight;
25-
width = height * aspectRatio ;
56+
// Check if height exceeds available space
57+
if (height > availableHeight) {
58+
height = availableHeight;
59+
width = height * aspectRatio;
2660
}
2761
28-
const x = 450 - width / 2;
29-
const y = 650 - height / 2;
30-
62+
// Calculate position with padding offset
63+
const x = 450 - (width + padding.left + padding.right) / 2 + padding.left;
64+
const y = 650 - (height + padding.top + padding.bottom) / 2 + padding.top;
3165
---
32-
<svg width="900" height="900" class="h-full w-full -z-10">
66+
67+
<svg class="bg" width="900" height="900" class="h-full w-full -z-10">
3368
<image href="/social/bg4.png" width="900" height="900" />
3469
</svg>
35-
<svg width="900" height="900">
36-
37-
<image
38-
class="sponsor_logo"
39-
href={logo.src}
40-
x={x}
41-
y={y}
42-
width={width}
43-
height={height}
44-
style={{
45-
padding: logo_padding ? logo_padding : undefined,
46-
}}
47-
clip-path="url(#curvedCornerClip)"
48-
preserveAspectRatio="xMidYMid meet"
49-
/>
50-
</svg>
70+
71+
<svg class="sponsor-logo" width="900" height="900">
72+
<image
73+
class="sponsor_logo"
74+
href={logo.src}
75+
x={x}
76+
y={y}
77+
width={width}
78+
height={height}
79+
clip-path="url(#curvedCornerClip)"
80+
preserveAspectRatio="xMidYMid meet"
81+
/>
82+
</svg>
5183

5284
<p lang="en" class="box2 fit-text">
5385
{title}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ interface TicketTierProps {
1414
title: string;
1515
educationPrice?: number | string;
1616
personalPrice: number | string;
17+
subtitle?: string;
1718
businessPrice: number | string;
1819
lateBusinessPrice?: number | string;
1920
latePersonalPrice?: number | string;

src/components/ui/Markdown.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { replaceYouTubeLinks } from "@utils/markdown";
44
55
interface Props {
66
content: string;
7-
class: string;
7+
class?: string;
88
}
99
1010
const { content, class: className } = Astro.props;

src/pages/media/speakers.astro

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ type Speaker = CollectionEntry<"speakers">;
3636
.social {
3737
width: 900px;
3838
height: 900px;
39+
position: relative;
40+
overflow: hidden;
3941
}
4042

4143
.social svg {
@@ -47,6 +49,15 @@ type Speaker = CollectionEntry<"speakers">;
4749
object-fit: contain;
4850
}
4951

52+
.social svg.bg {
53+
z-index:0;
54+
}
55+
56+
.social svg.avatar {
57+
z-index:10000;
58+
}
59+
60+
5061
body * {
5162
font-family: Inter, sans-serif;
5263
}

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

Lines changed: 50 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -87,45 +87,57 @@ window.addEventListener('resize', fitAllText);
8787

8888
<script is:inline define:vars={{slug: sponsor.id}}>
8989
document.addEventListener('DOMContentLoaded', () => {
90-
document.querySelectorAll('.social').forEach((socialDiv, index) => {
90+
// Get base URL from document
91+
const baseUrl = document.baseURI || document.location.origin;
9192

92-
socialDiv.addEventListener('click', () => {
93-
const svgs = socialDiv.querySelectorAll('svg');
94-
95-
if (svgs.length === 0) {
96-
alert('No SVGs found!');
97-
return;
98-
}
99-
100-
const xmlns = "http://www.w3.org/2000/svg";
101-
const combinedSvg = document.createElementNS(xmlns, "svg");
102-
combinedSvg.setAttribute("xmlns", xmlns);
103-
combinedSvg.setAttribute("width", "900");
104-
combinedSvg.setAttribute("height", "900");
105-
combinedSvg.setAttribute("viewBox", "0 0 900 900");
106-
107-
svgs.forEach(svg => {
108-
const g = document.createElementNS(xmlns, "g");
109-
g.innerHTML = svg.innerHTML;
110-
combinedSvg.appendChild(g);
93+
document.querySelectorAll('.social').forEach((socialDiv, index) => {
94+
socialDiv.addEventListener('click', () => {
95+
const svgs = socialDiv.querySelectorAll('svg');
96+
if (svgs.length === 0) {
97+
alert('No SVGs found!');
98+
return;
99+
}
100+
const xmlns = "http://www.w3.org/2000/svg";
101+
const combinedSvg = document.createElementNS(xmlns, "svg");
102+
combinedSvg.setAttribute("xmlns", xmlns);
103+
combinedSvg.setAttribute("width", "900");
104+
combinedSvg.setAttribute("height", "900");
105+
combinedSvg.setAttribute("viewBox", "0 0 900 900");
106+
107+
svgs.forEach(svg => {
108+
const g = document.createElementNS(xmlns, "g");
109+
// Clone the SVG content and resolve relative URLs
110+
const clonedContent = svg.innerHTML;
111+
// Replace relative URLs with absolute URLs
112+
const resolvedContent = clonedContent.replace(
113+
/href="([^"]*(?:\.png|\.jpg|\.jpeg|\.gif|\.svg|\.webp)[^"]*)"/gi,
114+
(match, url) => {
115+
// If URL is already absolute, keep it as is
116+
if (url.startsWith('http') || url.startsWith('//')) {
117+
return match;
118+
}
119+
// Convert relative URL to absolute
120+
const absoluteUrl = new URL(url, baseUrl).href;
121+
return `href="${absoluteUrl}"`;
122+
}
123+
);
124+
g.innerHTML = resolvedContent;
125+
combinedSvg.appendChild(g);
126+
});
127+
128+
const serializer = new XMLSerializer();
129+
const svgString = serializer.serializeToString(combinedSvg);
130+
const blob = new Blob([svgString], {type: "image/svg+xml"});
131+
const url = URL.createObjectURL(blob);
132+
const a = document.createElement('a');
133+
a.href = url;
134+
a.download = slug ? `social-${slug}.svg` : `social-${index + 1}.svg`;
135+
a.style.display = "none";
136+
document.body.appendChild(a);
137+
a.click();
138+
URL.revokeObjectURL(url);
139+
document.body.removeChild(a);
140+
});
111141
});
112-
113-
const serializer = new XMLSerializer();
114-
const svgString = serializer.serializeToString(combinedSvg);
115-
116-
const blob = new Blob([svgString], {type: "image/svg+xml"});
117-
const url = URL.createObjectURL(blob);
118-
119-
const a = document.createElement('a');
120-
a.href = url;
121-
a.download = slug ? `social-${slug}.svg` : `social-${index +1}.svg`;
122-
a.style.display = "none";
123-
document.body.appendChild(a);
124-
a.click();
125-
126-
URL.revokeObjectURL(url);
127-
document.body.removeChild(a);
128142
});
129-
});
130-
});
131143
</script>

src/pages/media/sponsors.astro

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ type Sponsor = CollectionEntry<"sponsors">;
3636
.social {
3737
width: 900px;
3838
height: 900px;
39+
position: relative;
40+
overflow: hidden;
3941
}
4042

4143
.social svg {
@@ -47,6 +49,15 @@ type Sponsor = CollectionEntry<"sponsors">;
4749
object-fit: contain;
4850
}
4951

52+
.social svg.bg {
53+
z-index:0;
54+
}
55+
56+
.social svg.sponsor-logo{
57+
z-index:10000;
58+
}
59+
60+
5061
body * {
5162
font-family: Inter, sans-serif;
5263
}

0 commit comments

Comments
 (0)