Sponsors.astro

---
/**
 * Component for displaying GitHub sponsors, used on the homepage
 * and Support DDEV page.
 *
 * Featured sponsors can optionally be included.
 */

import { getSponsors } from "../lib/api"
import { Image } from 'astro:assets';
import featuredSponsors from "../featured-sponsors.json"

export interface Props {
  size?: "normal" | "large"
  align?: string
  includeFeatured?: boolean
}

export interface Sponsor {
  title: string
  url: string
  imageUrl: string
  imageAlt: string
}

const { size = "normal", align = "left", includeFeatured = false } = Astro.props

let sponsors: Sponsor[] = []
let gitHubHandles = []
// Fetch GitHub sponsors
const gitHubSponsors = await getSponsors()

if (includeFeatured) {
  /**
   * Pull featured sponsors into the front of the list
   * and make sure they’re not duplicated
   */
  featuredSponsors.forEach((featuredSponsor) => {
    sponsors.push({
      title: featuredSponsor.name,
      url: featuredSponsor.url,
      imageUrl: featuredSponsor.squareLogo,
      imageAlt: `${featuredSponsor.name} logo`,
    })

    if (featuredSponsor.github) {
      gitHubHandles.push(featuredSponsor.github.toLowerCase())
    }
  })
}

gitHubSponsors.forEach((gitHubSponsor) => {
  if (gitHubHandles.includes(gitHubSponsor.login.toLowerCase())) {
    // Don’t duplicate listings
    return
  }

  sponsors.push({
    title: gitHubSponsor.login,
    url: gitHubSponsor.url,
    imageUrl: gitHubSponsor.avatarUrl,
    imageAlt: `${gitHubSponsor.login} GitHub avatar`,
  })
})
---

<div class="relative">
  <div
    class={`flex flex-wrap -mx-1` +
      (align == "center" ? " justify-center" : "")}
  >
    {
      sponsors.map((sponsor) => (
        <a
          class={
            `block rounded-full relative overflow-hidden m-1 shadow-md ` +
            (size == "large" ? `w-12 h-12` : `w-8 h-8`)
          }
          title={sponsor.title}
          href={sponsor.url}
          target="_blank"
        >
          {sponsor.imageUrl.includes(".svg") && (
            <img
              src={sponsor.imageUrl}
              alt={sponsor.imageAlt}
              width={100}
              height={100}
              class={`block w-full h-full dark:bg-white`}
            />
          )}
          {!sponsor.imageUrl.includes(".svg") && (
            <Image
              src={sponsor.imageUrl}
              alt={sponsor.imageAlt}
              width={100}
              height={100}
              class="block w-full h-full dark:bg-white"
            />
          )}
        </a>
      ))
    }
  </div>
</div>