enh: create isActive function to share the logic

Author: marco-souza

src/components/Header.astro

@@ -2,7 +2,7 @@
 import { getRelativeLocaleUrl } from 'astro:i18n';
 import Logo from '@/components/Logo.astro';
 import MobileMenu from '@/components/MobileMenu.astro';
-import { getLangFromUrl, useTranslations } from '@/i18n/utils';
+import { getLangFromUrl, isActive, useTranslations } from '@/i18n/utils';
 
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
@@ -51,15 +51,13 @@ const ctaLinks = {
         <ul class="menu menu-horizontal flex flex-1 flex-wrap gap-0 px-0 lg:gap-1">
           {
             navigationLinks.map((link) => {
-              const hrefStr = String(link.href);
-              const linkPathname = new URL(hrefStr).pathname.replace(/\/$/, '') || '/';
-              const isActive = linkPathname === pathname;
+              const isActiveLink = isActive(link.href, pathname);
               return (
                 <li>
                   <a
                     class:list={[
                       'btn btn-xs btn-ghost',
-                      isActive && 'btn-outline btn-primary',
+                      isActiveLink && 'btn-outline btn-primary',
                     ]}
                     href={link.href}
                   >

src/components/MobileMenu.astro

@@ -1,7 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
 import Logo from '@/components/Logo.astro';
-import { getLangFromUrl, useTranslations } from '@/i18n/utils';
+import { getLangFromUrl, isActive, useTranslations } from '@/i18n/utils';
 
 interface Props {
   navigationLinks: Array<{ href: string; label: string }>;
@@ -15,7 +15,6 @@ interface Props {
 const { navigationLinks, ctaLinks, pathname } = Astro.props;
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
-const pathnameNormalized = pathname.replace(/\/$/, '') || '/';
 ---
 
 <div class="drawer drawer-start lg:hidden">
@@ -48,15 +47,13 @@ const pathnameNormalized = pathname.replace(/\/$/, '') || '/';
         <ul class="menu w-full gap-1 p-0">
 {
             navigationLinks.map((link) => {
-              const hrefStr = String(link.href);
-              const linkPathname = new URL(hrefStr).pathname.replace(/\/$/, '') || '/';
-              const isActive = linkPathname === pathnameNormalized;
+              const isActiveLink = isActive(link.href, pathname);
               return (
                 <li>
                   <a
                     class:list={[
                       'btn btn-ghost btn-sm w-full justify-start',
-                      isActive && 'btn-outline btn-primary',
+                      isActiveLink && 'btn-outline btn-primary',
                     ]}
                     href={link.href}
                   >

src/components/ui/HeroSection.astro

@@ -12,7 +12,7 @@ interface Props {
   eyebrow?: string;
   title: string;
   subtitle?: string;
-  stats?: Stat[];
+  stats: Stat[];
   class?: string;
 }
 
@@ -45,7 +45,7 @@ const { eyebrow, title, subtitle, stats, class: className = '' } = Astro.props;
       </p>
     )}
 
-    {stats && stats.length > 0 && (
+    {stats.length > 0 && (
       <div class="flex flex-wrap gap-6 mt-10">
         {stats.map((stat) => {
           const colorClasses = {

src/i18n/ui.ts

@@ -194,6 +194,12 @@ export const ui = {
     'contributing.hero.title': 'Como posso ajudar?',
     'contributing.hero.subtitle':
       'Como organização sem fins lucrativos, a PodCodar depende de pessoas e organizações que acreditam na democratização da educação em tecnologia. Você pode apoiar com recursos, tempo ou parcerias estratégicas.',
+    'contributing.hero.stats.volunteers.value': '50+',
+    'contributing.hero.stats.volunteers.label': 'Voluntários',
+    'contributing.hero.stats.projects.value': '20+',
+    'contributing.hero.stats.projects.label': 'Projetos',
+    'contributing.hero.stats.years.value': '5+',
+    'contributing.hero.stats.years.label': 'Anos',
     'contributing.donations.title': 'Doações',
     'contributing.donations.subtitle':
       'Doações de pessoas físicas e patrocínios ajudam a financiar sustentabilidade, impacto e crescimento — plataforma de ensino, oficinas e fortalecimento do time.',

src/i18n/utils.ts

@@ -17,3 +17,9 @@ export function useTranslations(lang?: Lang) {
     );
   };
 }
+
+export function isActive(linkPath: string, currentPath: string): boolean {
+  const normalizedLink = linkPath.replace(/\/$/, '') || '/';
+  const normalizedCurrent = currentPath.replace(/\/$/, '') || '/';
+  return normalizedLink === normalizedCurrent;
+}

src/pages/contributing.astro

@@ -18,6 +18,26 @@ const description = t('contributing.hero.subtitle');
     eyebrow={t('contributing.hero.eyebrow')}
     title={t('contributing.hero.title')}
     subtitle={t('contributing.hero.subtitle')}
+    stats={[
+      {
+        icon: 'lucide:users',
+        value: t('contributing.hero.stats.volunteers.value'),
+        label: t('contributing.hero.stats.volunteers.label'),
+        color: 'violet',
+      },
+      {
+        icon: 'lucide:folder-code',
+        value: t('contributing.hero.stats.projects.value'),
+        label: t('contributing.hero.stats.projects.label'),
+        color: 'emerald',
+      },
+      {
+        icon: 'lucide:calendar',
+        value: t('contributing.hero.stats.years.value'),
+        label: t('contributing.hero.stats.years.label'),
+        color: 'blue',
+      },
+    ]}
   >
     <Icon name="lucide:heart" slot="eyebrow-icon" class="w-4 h-4" />
   </HeroSection>