Neutral sponsor component (#77)

* Neutral sponsor component

* Apply suggestions from code review

* Delete NetlifyCallout.astro

---------

Co-authored-by: Ciarán Ainsworth <[email protected]>

astro.config.mjs

@@ -64,7 +64,7 @@ export default defineConfig({
             "TabItem",
           ],
         },
-        "src/components/NetlifyCallout.astro"
+        "src/components/SponsorCallout.astro"
       ],
     }),
   ],

src/components/SponsorCallout.astro

@@ -0,0 +1,44 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+  title: string;
+  logo: ImageMetadata;
+  sponsorName: string;
+  website: string;
+}
+
+const { title, sponsorName, logo, website } = Astro.props;
+
+---
+
+<article class="sl-flex" aria-labelledby=`about-${sponsorName}-heading`}>
+  <small id=`about-${sponsorName}-heading`}>
+    {title}
+    <span class="sr-only">{ sponsorName }</span>
+  </small>
+  <a href={website} target="_blank" rel="noreferrer"><Image src={logo} alt=`${sponsorName} logo`></a>
+  <slot />
+</article>
+
+<style>
+  article {
+    max-width: 40rem;
+    margin-inline: auto;
+    padding-block: 5rem;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 0.5rem;
+  }
+  article > :global(*) {
+    max-width: 50ch;
+    margin-top: 0 !important;
+  }
+  small {
+    color: var(--sl-color-gray-3);
+  }
+  img {
+    max-width: 15rem;
+  }
+</style>

src/content/docs/index.mdx

@@ -17,6 +17,8 @@ hero:
       variant: secondary
 ---
 
+import netlifyLogo from "@assets/sponsor-contributor logos/logo-netlify-small-fullcolor-dynamicmode.svg";
+
 The Open Podcast API is an initiative aiming to provide a feature-complete synchronization API specification for podcast (web) apps and user-focused servers.
 
 ## Our goals
@@ -46,10 +48,13 @@ We invite all projects and individuals to join us in developing these specificat
   <LinkCard title="Add our monthly meeting to your calendar" href="https://github.com/orgs/OpenPodcastAPI/discussions/15" />
 </CardGrid>
 
-<NetlifyCallout title="Powered by">
-
-Netlify is the essential platform for the delivery of exceptional and dynamic web experiences, without limitations.
+<SponsorCallout
+  title="Website powered by"
+  sponsorName="Netlify"
+  logo={netlifyLogo}
+  website="https://www.netlify.com"
+  >
 
-[Learn about Netlify](https://www.netlify.com/)
+Netlify is the most popular way to build, deploy and scale modern web applications.
 
-</NetlifyCallout>
+</SponsorCallout>