From 3c10d4a005a329683794b08f7d999ef16ac9484f Mon Sep 17 00:00:00 2001 From: Niko Date: Sat, 17 May 2025 16:51:13 +0200 Subject: [PATCH 1/8] Draft design of sponsor social card. --- src/components/SocialMediaSponsorCard.astro | 133 ++++++++++++++++++ .../media/social_media_sponsor_cards.astro | 82 +++++++++++ src/pages/media/sponsor/[slug].astro | 133 ++++++++++++++++++ 3 files changed, 348 insertions(+) create mode 100644 src/components/SocialMediaSponsorCard.astro create mode 100644 src/pages/media/social_media_sponsor_cards.astro create mode 100644 src/pages/media/sponsor/[slug].astro diff --git a/src/components/SocialMediaSponsorCard.astro b/src/components/SocialMediaSponsorCard.astro new file mode 100644 index 000000000..49c1cece8 --- /dev/null +++ b/src/components/SocialMediaSponsorCard.astro @@ -0,0 +1,133 @@ +--- +import { getEntry } from "astro:content"; +import SponsorLogo from "@components/SponsorLogo.astro"; +import { Image } from "astro:assets"; +import { sponsorLogos } from "@data/sponsorLogos"; +import { ta } from "date-fns/locale"; + +const { slug:sponsorId } = Astro.props; + +const sponsor = await getEntry("sponsors", sponsorId); + +if (!sponsor) { + throw new Error(`Sponsor with ID "${sponsorId}" not found`); +} + +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 aspectRatio = logo.width / logo.height; +const targetHeight = targetWidth / aspectRatio; +const maxHeight = 240; +const realHeight = targetHeight < maxHeight? targetHeight : maxHeight; + +const x = 650 - targetWidth/ 2; +const y = 650 - realHeight / 2; +--- + + + + + + + + + + + + + + +

+Thank you to our sponsor +

+ +

+{title} +

+ + + diff --git a/src/pages/media/social_media_sponsor_cards.astro b/src/pages/media/social_media_sponsor_cards.astro new file mode 100644 index 000000000..dfefeab66 --- /dev/null +++ b/src/pages/media/social_media_sponsor_cards.astro @@ -0,0 +1,82 @@ +--- +import { getCollection, type CollectionEntry } from "astro:content"; +import SocialMediaSponsorCard from "@components/SocialMediaSponsorCard.astro"; + + +const sponsors = await getCollection("sponsors"); +type Sponsor = CollectionEntry<"sponsors">; +--- + + + + + + + + + + + + +{ + sponsors.map((entry: Sponsor) => ( + + + + )) +} + + + + + + + diff --git a/src/pages/media/sponsor/[slug].astro b/src/pages/media/sponsor/[slug].astro new file mode 100644 index 000000000..815750435 --- /dev/null +++ b/src/pages/media/sponsor/[slug].astro @@ -0,0 +1,133 @@ +--- +import { getCollection} from "astro:content"; +import SocialMediaSponsorCard from "@components/SocialMediaSponsorCard.astro"; +import { slugify } from "@utils/content"; + + + +export async function getStaticPaths() { + const entries = await getCollection("sponsors"); + return entries.map((entry) => ({ + params: { slug: slugify(entry.data.name)}, + props: { entry }, + })); +} + +const { entry } = Astro.props; +--- + + + + + + + + + + + + +{ + entry && +
+ +
+} + + + + + + + + + From 8d9118cb62ac90191b924aad4d582ff52765ca89 Mon Sep 17 00:00:00 2001 From: Niko Date: Sat, 17 May 2025 17:36:51 +0200 Subject: [PATCH 2/8] Fix paths. --- src/components/SocialMediaSponsorCard.astro | 15 ++++----------- src/pages/media/social_media_sponsor_cards.astro | 9 +++++---- src/pages/media/sponsor/[slug].astro | 16 +++++++--------- 3 files changed, 16 insertions(+), 24 deletions(-) diff --git a/src/components/SocialMediaSponsorCard.astro b/src/components/SocialMediaSponsorCard.astro index 49c1cece8..7e7a943a2 100644 --- a/src/components/SocialMediaSponsorCard.astro +++ b/src/components/SocialMediaSponsorCard.astro @@ -1,17 +1,8 @@ --- import { getEntry } from "astro:content"; -import SponsorLogo from "@components/SponsorLogo.astro"; -import { Image } from "astro:assets"; import { sponsorLogos } from "@data/sponsorLogos"; -import { ta } from "date-fns/locale"; -const { slug:sponsorId } = Astro.props; - -const sponsor = await getEntry("sponsors", sponsorId); - -if (!sponsor) { - throw new Error(`Sponsor with ID "${sponsorId}" not found`); -} +const { sponsor } = Astro.props; const { name: title, @@ -25,7 +16,7 @@ const logo = sponsorLogos[sponsor.id]; const targetWidth = 400; const aspectRatio = logo.width / logo.height; const targetHeight = targetWidth / aspectRatio; -const maxHeight = 240; +const maxHeight = 220; const realHeight = targetHeight < maxHeight? targetHeight : maxHeight; const x = 650 - targetWidth/ 2; @@ -50,6 +41,8 @@ const y = 650 - realHeight / 2; 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 " fill="white" + stroke="#F5B91A" + stroke-width="8" /> ; { - sponsors.map((entry: Sponsor) => ( - -