Add LinkedImage component with usage in PyLadies page

src/components/SponsorCard.astro

@@ -67,7 +67,7 @@ const logo = sponsorLogos[sponsor.id];
     description && (
       <div class="flex-1">
         <h2 id=`sponsor-${sponsorId}` class="sponsor text-2xl font-bold mb-2 ">
-          { !isSponsorPage && tier !== 'Partners' && ["Diamond", "Platinum"].includes(tier) ?
+          { !isSponsorPage && tier !== 'Partners' && (tier === "Diamond" || tier === "Platinum" || sponsor.data.page) ?
             <a href={`/sponsor/${sponsor.id}`}>
             {title}
             </a> :
@@ -103,7 +103,7 @@ const logo = sponsorLogos[sponsor.id];
         {website && (
           <div class="website-btn-container flex flex-col sm:flex-row justify-center gap-2 mt-4">
 
-            { !isSponsorPage && sponsor.body && tier && ["Diamond", "Platinum"].includes(tier) &&
+            { !isSponsorPage && sponsor.body && tier && (tier === "Diamond" || tier === "Platinum" || sponsor.data.page) &&
             <a href={`/sponsor/${sponsor.id}`} class="website-btn-outline">
               About {title}
             </a>

src/components/SponsorLogo.astro

@@ -22,9 +22,15 @@ const {
 } = sponsor.data;
 
 const logo = sponsorLogos[sponsor.id];
-const slug = tier==="Partners"? `/community-partners#sponsor-${sponsorId}`
-: tier==="Platinum" ? `/sponsor/${sponsorId}`
-: tier==="Media Partners" ? `/media-partners#sponsor-${sponsorId}` : tier==="Startups" ? `/startups#sponsor-${sponsorId}` : `/sponsors#sponsor-${sponsorId}`
+const slug = (tier === "Diamond" || tier === "Platinum" || sponsor.data.page)
+  ? `/sponsor/${sponsorId}`
+  : tier === "Partners"
+    ? `/community-partners#sponsor-${sponsorId}`
+    : tier === "Media Partners"
+      ? `/media-partners#sponsor-${sponsorId}`
+      : tier === "Startups"
+        ? `/startups#sponsor-${sponsorId}`
+        : `/sponsors#sponsor-${sponsorId}`
 
 ---
 

src/components/markdown/LinkedImage.astro

@@ -0,0 +1,105 @@
+---
+import type { ImageMetadata } from "astro";
+
+export interface Props {
+  src?: string;
+  image?: ImageMetadata;
+  alt?: string;
+  url?: string;
+  mode?: "button" | "imageLink" | "image";
+  class?: string;
+  maxWidth?: string;
+  maxHeight?: string;
+  padding?: string;
+}
+
+const {
+  src,
+  image: img,
+  alt = "",
+  url,
+  mode,
+  class: className = "",
+  maxWidth = "300px",
+  maxHeight = "200px",
+  padding,
+} = Astro.props;
+
+const hasDefaultSlot = Astro.slots.has("default");
+
+const resolvedMode =
+  mode ?? (url ? (hasDefaultSlot ? "button" : "imageLink") : "image");
+
+const isLinked = url !== undefined;
+const isImageLink = resolvedMode === "imageLink";
+const isButton = resolvedMode === "button";
+const isExternal = url?.startsWith("http");
+
+const cardClasses = `max-w-80 mx-auto flex flex-col items-center ${className}${isLinked ? " hover:-translate-y-1 transition-all duration-300" : ""}`;
+
+const imgSrc = img ? img.src : src;
+
+const imgStyle: Record<string, string> = {
+  maxHeight,
+  objectFit: "contain",
+};
+if (padding) {
+  imgStyle.padding = padding;
+}
+if (maxWidth) {
+  imgStyle.maxWidth = maxWidth;
+}
+---
+
+{isImageLink && url ? (
+  <a
+    href={url}
+    target={isExternal ? "_blank" : undefined}
+    rel={isExternal ? "noopener noreferrer" : undefined}
+    class={cardClasses}
+    aria-label={alt || "Linked image"}
+  >
+    <img
+      src={imgSrc}
+      alt={alt}
+      class="max-w-full bg-white border-4 border-white rounded-lg shadow-lg"
+      style={imgStyle}
+    />
+  </a>
+) : (
+  <div class={cardClasses}>
+    {url ? (
+      <a
+        href={url}
+        target={isExternal ? "_blank" : undefined}
+        rel={isExternal ? "noopener noreferrer" : undefined}
+        aria-label={alt || "Linked image"}
+      >
+        <img
+          src={imgSrc}
+          alt={alt}
+          class="max-w-full bg-white border-4 border-white rounded-lg shadow-lg"
+          style={imgStyle}
+        />
+      </a>
+    ) : (
+      <img
+        src={imgSrc}
+        alt={alt}
+        class="max-w-full bg-white border-4 border-white rounded-lg shadow-lg"
+        style={imgStyle}
+      />
+    )}
+
+    {isButton && url && (
+      <a
+        href={url}
+        target={isExternal ? "_blank" : undefined}
+        rel={isExternal ? "noopener noreferrer" : undefined}
+        class="button-link font-bold text-base px-8 py-3 rounded-sm inline-flex items-center justify-center leading-6 transition-colors duration-200 not-prose border bg-button text-button-text hover:bg-button-hover border-0"
+      >
+        <slot />
+      </a>
+    )}
+  </div>
+)}

src/components/markdown/LinkedSponsor.astro

@@ -0,0 +1,49 @@
+---
+import { getEntry } from "astro:content";
+import { sponsorLogos } from "@data/sponsorLogos";
+import LinkedImage from "@components/markdown/LinkedImage.astro";
+
+export interface Props {
+  sponsor: string;
+  alt?: string;
+  mode?: "button" | "imageLink" | "image";
+  class?: string;
+}
+
+const {
+  sponsor: sponsorId,
+  alt,
+  mode = "imageLink",
+  class: className = "",
+} = Astro.props;
+
+const sponsor = await getEntry("sponsors", sponsorId);
+if (!sponsor) {
+  throw new Error(`Sponsor "${sponsorId}" not found`);
+}
+
+const { name, tier } = sponsor.data;
+const logo = sponsorLogos[sponsor.id];
+
+const url =
+  tier === "Diamond" || tier === "Platinum" || sponsor.data.page
+    ? `/sponsor/${sponsorId}`
+    : tier === "Partners"
+      ? `/community-partners#sponsor-${sponsorId}`
+      : tier === "Media Partners"
+        ? `/media-partners#sponsor-${sponsorId}`
+        : tier === "Startups"
+          ? `/startups#sponsor-${sponsorId}`
+          : `/sponsors#sponsor-${sponsorId}`;
+---
+
+<LinkedImage
+  image={logo}
+  alt={alt || `${name} logo`}
+  url={url}
+  mode={mode}
+  padding="1.5rem"
+  class={className}
+>
+  <slot />
+</LinkedImage>

src/content.config.ts

@@ -355,6 +355,7 @@ const sponsors = defineCollection({
     logo_padding: z.string().optional(),
     logo_max_width: z.string().optional(),
     draft: z.boolean().optional().default(false),
+    page: z.boolean().optional().default(false),
     jobs: z.array(reference("jobs")).optional().default([]),
   }),
 });

src/content/pages/pyladies/index.mdx

@@ -4,6 +4,8 @@ url: /pyladies
 subtitle: Booth, Workshops, Lunch & Networking
 ---
 
+import armLogo from "./arm-logo.svg"
+
 # PyLadies Activities
 
 We’re excited to announce a range of events for underrepresented groups in
@@ -71,6 +73,10 @@ in tech. Enjoy meaningful conversations and networking opportunities.
 - **Location:** Red Carpet (Second Floor)
 - **Time:** Thursday 16th of July at 13:20
 
+### Big thanks to our PyLadies Lunch Sponsor!
+
+<LinkedSponsor sponsor="arm" mode="button">Visit our sponsor Arm</LinkedSponsor>
+
 ## PyLadies Organizer Open Space
 
 During this one-hour PyLadies Open Space session, we invite PyLadies organizers

src/content/sponsors/arm/index.md

@@ -20,4 +20,7 @@ socials:
 tier: Gold
 event_name: PyLadies Lunch | Women at Python 5K Run | Open Space
 logo_padding: 35px
+page: true
 ---
+
+# About Arm

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

@@ -15,8 +15,11 @@ import Icon from "@ui/Icon.astro";
 import IconLabel from "@components/markdown/IconLabel.astro";
 import Center from "@components/markdown/Center.astro";
 import EPSLogo from "@components/markdown/EPSLogo.astro";
+import LinkedImage from "@components/markdown/LinkedImage.astro";
+import LinkedSponsor from "@components/markdown/LinkedSponsor.astro";
 import ProfileCard from "@components/profile/ProfileCard.astro";
 import SpeakerCard from "@components/profile/SpeakerCard.astro";
+import SponsorLogo from "@components/SponsorLogo.astro";
 import GoogleCalendar from '@components/GoogleCalendar.astro';
 import ThreeCol from "@ui/ThreeCol.astro";
 import FinaidTimeline from "@ui/FinaidTimeline.astro";
@@ -93,6 +96,9 @@ const description = post.data.subtitle;
         IconLabel,
         Center,
         EPSLogo,
+        LinkedImage,
+        LinkedSponsor,
+        SponsorLogo,
         Map,
         YouTube,
         HighlightCard,

src/pages/sponsor/[sponsor]/index.astro

@@ -14,7 +14,7 @@ export async function getStaticPaths() {
   const isProduction = import.meta.env.MODE === "production";
 
   const sponsors = await getCollection("sponsors", ({ data }) =>
-  data.tier && ["Diamond", "Platinum"].includes(data.tier) && (isProduction ? data.draft !== true : true)
+  (data.tier && ["Diamond", "Platinum"].includes(data.tier)) || data.page === true && (isProduction ? data.draft !== true : true)
   );
 
   return sponsors.map((sponsor: any) => ({