Añadir tier 'Comunidades Patrocinadoras' para sponsors (#196)

Author: francescarpi

src/components/home/SectionSponsors.astro

@@ -2,7 +2,7 @@
 import { texts } from '../../i18n/home'
 import SectionTitle from '../SectionTitle.astro'
 import CenteredPanel from '../CenteredPanel.astro'
-import type { ISponsor } from '../../types/sponsors'
+import type { ISponsor, TSponsorTier } from '../../types/sponsors'
 import SponsorsGroup from './sponsors/SponsorsGroup.astro'
 
 const sponsors = Object.values(import.meta.glob('../../data/sponsors/*.md', { eager: true })) as {
@@ -16,59 +16,38 @@ interface Props {
 const { lang } = Astro.props
 const t = texts[lang as keyof typeof texts]
 
-function filterSponsorsByTier(tier: string): ISponsor[] {
+function filterSponsorsByTier(tier: TSponsorTier): ISponsor[] {
   return sponsors
     .filter((s) => s.frontmatter.tier === tier)
     .map((s) => s.frontmatter)
     .sort((a, b) => a.name.localeCompare(b.name))
 }
 
-const bronze = filterSponsorsByTier('bronze')
-const silver = filterSponsorsByTier('silver')
-const gold = filterSponsorsByTier('gold')
-const platinum = filterSponsorsByTier('platinum')
-const main = filterSponsorsByTier('main')
+const tierDefs: Array<{ key: TSponsorTier; size: number; color: string }> = [
+  { key: 'main', size: 280, color: 'text-tier-main' },
+  { key: 'platinum', size: 170, color: 'text-tier-platinum' },
+  { key: 'gold', size: 140, color: 'text-tier-gold' },
+  { key: 'silver', size: 110, color: 'text-tier-silver' },
+  { key: 'bronze', size: 90, color: 'text-tier-bronze' },
+  { key: 'community', size: 140, color: 'text-tier-community' },
+]
 ---
 
 <div class="flex flex-col items-center gap-6">
   <SectionTitle title={t['sponsors.title']} />
   <CenteredPanel text={t['sponsors.description']} />
 
   <div class="w-full flex flex-col gap-10 mt-4">
-    <SponsorsGroup
-      lang={lang}
-      title={t['sponsors.main']}
-      sponsors={main}
-      tierColor="text-tier-main"
-      size={280}
-    />
-    <SponsorsGroup
-      lang={lang}
-      title={t['sponsors.platinum']}
-      sponsors={platinum}
-      tierColor="text-tier-platinum"
-      size={170}
-    />
-    <SponsorsGroup
-      lang={lang}
-      title={t['sponsors.gold']}
-      sponsors={gold}
-      tierColor="text-tier-gold"
-      size={140}
-    />
-    <SponsorsGroup
-      lang={lang}
-      title={t['sponsors.silver']}
-      sponsors={silver}
-      tierColor="text-tier-silver"
-      size={110}
-    />
-    <SponsorsGroup
-      lang={lang}
-      title={t['sponsors.bronze']}
-      sponsors={bronze}
-      tierColor="text-tier-bronze"
-      size={90}
-    />
+    {
+      tierDefs.map((tier) => (
+        <SponsorsGroup
+          lang={lang}
+          title={t[`sponsors.${tier.key}`]}
+          sponsors={filterSponsorsByTier(tier.key)}
+          tierColor={tier.color}
+          size={tier.size}
+        />
+      ))
+    }
   </div>
 </div>

src/data/sponsors/eps.md

@@ -1,7 +1,7 @@
 ---
 name: 'EuroPython Society'
 website: 'https://www.europython-society.org/'
-tier: 'gold'
+tier: 'community'
 logobg: '#ffffff'
 logo: '/collaborators/europython.png'
 ---

src/i18n/home.ts

@@ -12,6 +12,7 @@ export const texts = {
     'sponsors.gold': 'Patrocinador Oro',
     'sponsors.silver': 'Patrocinador Plata',
     'sponsors.bronze': 'Patrocinador Bronce',
+    'sponsors.community': 'Comunidades Patrocinadoras',
     'sponsors.none': 'No hay patrocinadores en este nivel',
     'sponsors.altlogo': 'Logo de {name}',
     'cfp.title': 'Llamada a Propuestas',
@@ -37,6 +38,7 @@ export const texts = {
     'sponsors.gold': 'Gold Sponsor',
     'sponsors.silver': 'Silver Sponsor',
     'sponsors.bronze': 'Bronze Sponsor',
+    'sponsors.community': 'Sponsoring Communities',
     'sponsors.none': 'No sponsors in this tier',
     'sponsors.altlogo': '{name} logo',
     'cfp.title': 'Call for Proposals',
@@ -63,6 +65,7 @@ export const texts = {
     'sponsors.gold': 'Patrocinador Or',
     'sponsors.silver': 'Patrocinador Plata',
     'sponsors.bronze': 'Patrocinador Bronze',
+    'sponsors.community': 'Comunitats Patrocinadores',
     'sponsors.none': 'No hi ha patrocinadors en aquest nivell',
     'sponsors.altlogo': 'Logo de {name}',
     'cfp.title': 'Crida a Propostes',

src/style/global.css

@@ -96,6 +96,9 @@ html {
 
   --color-tier-bronze: var(--color-pycon-gray);
   --color-contrast-tier-bronze: #ffffff;
+
+  --color-tier-community: #4a6fa5;
+  --color-contrast-tier-community: #ffffff;
 }
 
 @layer base {

src/types/sponsors.ts

@@ -1,4 +1,4 @@
-export type TSponsorTier = 'bronze' | 'silver' | 'gold' | 'platinum' | 'main'
+export type TSponsorTier = 'bronze' | 'silver' | 'gold' | 'platinum' | 'main' | 'community'
 
 export interface ISponsor {
   name: string