feat: read sponsors from disk and render them

Author: francescarpi

src/components/home/SectionSponsors.astro

@@ -2,16 +2,40 @@
 import { texts } from '../../i18n/home'
 import SectionTitle from '../SectionTitle.astro'
 import TextBox from '../TextBox.astro'
+import type { ISponsor } from '../../types/sponsors'
+import SponsorsGroup from './sponsors/SponsorsGroup.astro'
+
+const sponsors = Object.values(import.meta.glob('../../data/sponsors/*.md', { eager: true })) as {
+  frontmatter: ISponsor
+}[]
 
 interface Props {
   lang: string
 }
 
 const { lang } = Astro.props
 const t = texts[lang as keyof typeof texts]
+
+function filterSponsorsByTier(tier: string): ISponsor[] {
+  return sponsors.filter((s) => s.frontmatter.tier === tier).map((s) => s.frontmatter)
+}
+
+const bronze = filterSponsorsByTier('bronze')
+const silver = filterSponsorsByTier('silver')
+const gold = filterSponsorsByTier('gold')
+const platinum = filterSponsorsByTier('platinum')
+const main = filterSponsorsByTier('main')
 ---
 
 <div class="flex flex-col items-center gap-4">
   <SectionTitle title={t['sponsors.title']} />
   <TextBox text={t['sponsors.description']} />
+
+  <div class="flex flex-col w-full gap-8">
+    <SponsorsGroup lang={lang} title={t['sponsors.main']} sponsors={main} />
+    <SponsorsGroup lang={lang} title={t['sponsors.platinum']} sponsors={platinum} />
+    <SponsorsGroup lang={lang} title={t['sponsors.gold']} sponsors={gold} />
+    <SponsorsGroup lang={lang} title={t['sponsors.silver']} sponsors={silver} />
+    <SponsorsGroup lang={lang} title={t['sponsors.bronze']} sponsors={bronze} />
+  </div>
 </div>

src/components/home/sponsors/SponsorsGroup.astro

@@ -0,0 +1,43 @@
+---
+import type { ISponsor, TSponsorTier } from '../../../types/sponsors'
+import { texts } from '../../../i18n/home'
+
+interface Props {
+  lang: string
+  title: string
+  sponsors: ISponsor[]
+}
+
+const { title, sponsors, lang } = Astro.props
+const t = texts[lang as keyof typeof texts]
+
+const IMG_WITH_BY_TIER: Record<TSponsorTier, number> = {
+  main: 200,
+  platinum: 150,
+  gold: 120,
+  silver: 100,
+  bronze: 80,
+}
+---
+
+<div>
+  <h4>{title}</h4>
+  {
+    sponsors.length > 0 ? (
+      <div class="flex flex-wrap gap-4 mt-4">
+        {sponsors.map((sponsor) => (
+          <a
+            href={sponsor.website}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center justify-center p-4 border rounded-lg hover:shadow-lg transition-shadow duration-300"
+          >
+            <img src={sponsor.logo} alt={sponsor.name} width={IMG_WITH_BY_TIER[sponsor.tier]} />
+          </a>
+        ))}
+      </div>
+    ) : (
+      <p class="text-gray-500 mt-2">{t['sponsors.none']}</p>
+    )
+  }
+</div>

src/data/sponsors/sponsor1.md

@@ -0,0 +1,6 @@
+---
+name: 'Sponsor 1'
+website: 'https://sponsor1.com'
+tier: 'bronze'
+logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNSAyMXEtLjgyNSAwLTEuNDEyLS41ODdUMyAxOVY1cTAtLjgyNS41ODgtMS40MTJUNSAzaDE0cS44MjUgMCAxLjQxMy41ODhUMjEgNXYxNHEwIC44MjUtLjU4NyAxLjQxM1QxOSAyMXptMC0yaDE0VjVINXptMCAwVjV6bTItMmgxMHEuMyAwIC40NS0uMjc1dC0uMDUtLjUyNWwtMi43NS0zLjY3NXEtLjE1LS4yLS40LS4ydC0uNC4yTDExLjI1IDE2TDkuNCAxMy41MjVxLS4xNS0uMi0uNC0uMnQtLjQuMmwtMiAyLjY3NXEtLjIuMjUtLjA1LjUyNVQ3IDE3bTIuNTYzLTcuNDM4UTEwIDkuMTI1IDEwIDguNXQtLjQzNy0xLjA2MlQ4LjUgN3QtMS4wNjIuNDM4VDcgOC41dC40MzggMS4wNjNUOC41IDEwdDEuMDYzLS40MzciLz48L3N2Zz4='
+---

src/data/sponsors/sponsor2.md

@@ -0,0 +1,6 @@
+---
+name: 'Sponsor 1'
+website: 'https://sponsor1.com'
+tier: 'platinum'
+logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNSAyMXEtLjgyNSAwLTEuNDEyLS41ODdUMyAxOVY1cTAtLjgyNS41ODgtMS40MTJUNSAzaDE0cS44MjUgMCAxLjQxMy41ODhUMjEgNXYxNHEwIC44MjUtLjU4NyAxLjQxM1QxOSAyMXptMC0yaDE0VjVINXptMCAwVjV6bTItMmgxMHEuMyAwIC40NS0uMjc1dC0uMDUtLjUyNWwtMi43NS0zLjY3NXEtLjE1LS4yLS40LS4ydC0uNC4yTDExLjI1IDE2TDkuNCAxMy41MjVxLS4xNS0uMi0uNC0uMnQtLjQuMmwtMiAyLjY3NXEtLjIuMjUtLjA1LjUyNVQ3IDE3bTIuNTYzLTcuNDM4UTEwIDkuMTI1IDEwIDguNXQtLjQzNy0xLjA2MlQ4LjUgN3QtMS4wNjIuNDM4VDcgOC41dC40MzggMS4wNjNUOC41IDEwdDEuMDYzLS40MzciLz48L3N2Zz4='
+---

src/i18n/home.ts

@@ -7,6 +7,12 @@ export const texts = {
     'sponsors.title': 'Patrocinios',
     'sponsors.description':
       'Gracias a las empresas que colaboran con la PyConES podemos ofrecer el mejor evento y experiencia posible. Somos una conferencia con un bajo coste de entrada capaz de ofrecer una experiencia de 3 días incluyendo regalos, almuerzos, comidas y meriendas. Además contamos con servicio de guardería, becas y traducción en directo a lenguaje de signos para que nadie se quede fuera. Con la ayuda de estas empresas conseguimos hacer un evento diverso e inclusivo enfocado en cuidar la comunidad de Python.',
+    'sponsors.main': 'Patrocinador Principal',
+    'sponsors.platinum': 'Patrocinador Platino',
+    'sponsors.gold': 'Patrocinador Oro',
+    'sponsors.silver': 'Patrocinador Plata',
+    'sponsors.bronze': 'Patrocinador Bronce',
+    'sponsors.none': 'No hay patrocinadores en este nivel',
   },
   en: {
     'index.initializing': 'Initialising system...',
@@ -16,6 +22,12 @@ export const texts = {
     'sponsors.title': 'Sponsorships',
     'sponsors.description':
       'Thanks to the companies that collaborate with PyConES, we can offer the best possible event and experience. We are a conference with a low entry cost capable of offering a 3-day experience including gifts, lunches, meals, and snacks. Additionally, we have childcare services, scholarships, and live sign language translation to ensure that no one is left out. With the help of these companies, we manage to create a diverse and inclusive event focused on caring for the Python community.',
+    'sponsors.main': 'Main Sponsor',
+    'sponsors.platinum': 'Platinum Sponsor',
+    'sponsors.gold': 'Gold Sponsor',
+    'sponsors.silver': 'Silver Sponsor',
+    'sponsors.bronze': 'Bronze Sponsor',
+    'sponsors.none': 'No sponsors in this tier',
   },
   ca: {
     'index.initializing': 'Inicialitzant sistema...',
@@ -25,5 +37,11 @@ export const texts = {
     'sponsors.title': 'Patrocinis',
     'sponsors.description':
       'Gràcies a les empreses que col·laboren amb la PyConES podem oferir el millor esdeveniment i experiència possible. Som una conferència amb un baix cost d’entrada capaç d’oferir una experiència de 3 dies incloent regals, àpats, menjars i berenars. A més comptem amb servei de guarderia, beques i traducció en directe a llenguatge de signes perquè ningú es quedi fora. Amb l’ajuda d’aquestes empreses aconseguim fer un esdeveniment divers i inclusiu enfocat en cuidar la comunitat de Python.',
+    'sponsors.main': 'Patrocinador Principal',
+    'sponsors.platinum': 'Patrocinador Platí',
+    'sponsors.gold': 'Patrocinador Or',
+    'sponsors.silver': 'Patrocinador Plata',
+    'sponsors.bronze': 'Patrocinador Bronze',
+    'sponsors.none': 'No hi ha patrocinadors en aquest nivell',
   },
 } as const

src/types/sponsors.ts

@@ -0,0 +1,8 @@
+export type TSponsorTier = 'bronze' | 'silver' | 'gold' | 'platinum' | 'main'
+
+export interface ISponsor {
+  name: string
+  website: string
+  tier: TSponsorTier
+  logo: string
+}