feat: implement multilingual navigation header and add new news content for August 2024

This commit is contained in:
Esteban 2026-05-08 15:11:07 -05:00
parent e483034805
commit 50e460b46e
5 changed files with 52 additions and 31 deletions

View File

@ -2,9 +2,30 @@
import Button from "./ui/Button.astro"; import Button from "./ui/Button.astro";
import { Icon } from "astro-icon/components"; import { Icon } from "astro-icon/components";
import { createTranslator } from "../i18n/index.ts"; import { createTranslator, routeTranslations } from "../i18n/index.ts";
const tl = createTranslator(Astro.currentLocale); const tl = createTranslator(Astro.currentLocale);
const currentLocale = Astro.currentLocale; const currentLocale = Astro.currentLocale;
const currentPath = Astro.url.pathname;
function translatePath(newLocale: string) {
const segments = currentPath.split('/').filter(Boolean);
if (segments.length === 0) return `/${newLocale}`;
const remainingSegments = segments.slice(1);
const translatedSegments = remainingSegments.map(segment => {
for (const key in routeTranslations) {
const translations = routeTranslations[key as keyof typeof routeTranslations];
if (Object.values(translations).includes(segment)) {
return translations[newLocale as keyof typeof translations] || segment;
}
}
return segment;
});
return `/${[newLocale, ...translatedSegments].join('/')}`;
}
const { locale } = Astro.params; const { locale } = Astro.params;
@ -21,11 +42,11 @@ const { locale } = Astro.params;
class="flex justify-evenly gap-10 items-center uppercase text-md text-white" class="flex justify-evenly gap-10 items-center uppercase text-md text-white"
> >
<div class="hidden md:flex gap-8 font-primary font-bold"> <div class="hidden md:flex gap-8 font-primary font-bold">
<a class="hover:text-colorPrimary transition" href=`/${currentLocale}#somos`>{tl("nav.about")}</a> <a class="hover:text-colorPrimary transition" href={`/${currentLocale}#somos`}>{tl("nav.about")}</a>
<a class="hover:text-colorPrimary transition" href=`/${currentLocale}#programs`>{tl("nav.programs")}</a> <a class="hover:text-colorPrimary transition" href={`/${currentLocale}#programs`}>{tl("nav.programs")}</a>
<a class="hover:text-colorPrimary transition" href=`/${currentLocale}#news`>{tl("nav.news")}</a> <a class="hover:text-colorPrimary transition" href={`/${currentLocale}#news`}>{tl("nav.news")}</a>
<!-- <a class="hover:text-colorPrimary transition" href=`/${currentLocale}/archive`>{tl("nav.archive")}</a> <!-- <a class="hover:text-colorPrimary transition" href={`/${currentLocale}/archive`}>{tl("nav.archive")}</a>
<a class="hover:text-colorPrimary transition" href=`/${currentLocale}/nations`>{tl("nav.nations")}</a> --> <a class="hover:text-colorPrimary transition" href={`/${currentLocale}/nations`}>{tl("nav.nations")}</a> -->
</div> </div>
<div class="drawer lg:hidden"> <div class="drawer lg:hidden">
<input id="my-drawer-1" type="checkbox" class="drawer-toggle" /> <input id="my-drawer-1" type="checkbox" class="drawer-toggle" />
@ -45,24 +66,24 @@ const { locale } = Astro.params;
</div> </div>
<div class="font-primary font-bold flex flex-col gap-1 text-lg p-0"> <ul class="font-primary font-bold flex flex-col gap-1 text-lg p-0">
<li><a><a class="hover:text-colorPrimary transition" href="#somos">{tl("nav.about")}</a></a></li> <li><a class="hover:text-colorPrimary transition" href="#somos">{tl("nav.about")}</a></li>
<li><a><a class="hover:text-colorPrimary transition" href="#programs">{tl("nav.programs")}</a></a></li> <li><a class="hover:text-colorPrimary transition" href="#programs">{tl("nav.programs")}</a></li>
<li><a><a class="hover:text-colorPrimary transition" href="#news">{tl("nav.news")}</a></a></li> <li><a class="hover:text-colorPrimary transition" href="#news">{tl("nav.news")}</a></li>
</div> </ul>
<div class="w-50"> <div class="w-50">
<Button class="px-8 py-2 uppercase text-lg mt-8" title={tl("nav.contact")} url="#contact" variant="primary" /> <Button class="px-8 py-2 uppercase text-lg mt-8" title={tl("nav.contact")} url="#contact" variant="primary" />
</div> </div>
<div class="dropdown mt-10"> <div class="dropdown mt-10">
<div tabindex="0" role="button" class="btn-ghost m-1 cursor-pointer"><Icon name="ph:translate" class="text-2xl" /></div> <div tabindex="0" role="button" class="btn-ghost m-1 cursor-pointer"><Icon name="ph:translate" class="text-2xl" /></div>
<ul tabindex="-1" class="dropdown-content text-tertiary text-lg bg-colorPrimary menu z-1 w-52 p-2 shadow-sm"> <ul tabindex="-1" class="dropdown-content text-tertiary text-lg bg-colorPrimary menu z-1 w-52 p-2 shadow-sm">
<li><a href="/es"><Icon name="icon_flag_es" /> Español</a></li> <li><a href={translatePath("es")}><Icon name="icon_flag_es" /> Español</a></li>
<li><a href="/en"><Icon name="icon_flag_uk" /> English</a></li> <li><a href={translatePath("en")}><Icon name="icon_flag_uk" /> English</a></li>
<li><a href="/he"><Icon name="flagpack--il" /> עברית</a></li> <li><a href={translatePath("he")}><Icon name="flagpack--il" /> עברית</a></li>
<li><a href="/pt"><Icon name="flagpack--br" /> Português</a></li> <li><a href={translatePath("pt")}><Icon name="flagpack--br" /> Português</a></li>
<li><a href="/fr"><Icon name="flagpack--fr" /> Français</a></li> <li><a href={translatePath("fr")}><Icon name="flagpack--fr" /> Français</a></li>
<li><a href="/ru"><Icon name="flagpack--ru" /> Русский</a></li> <li><a href={translatePath("ru")}><Icon name="flagpack--ru" /> Русский</a></li>
<li><a href="/rw"><Icon name="flagpack--rw" /> Kinyarwanda</a></li> <li><a href={translatePath("rw")}><Icon name="flagpack--rw" /> Kinyarwanda</a></li>
</ul> </ul>
</div> </div>
</ul> </ul>
@ -74,13 +95,13 @@ const { locale } = Astro.params;
<div class="dropdown dropdown-end lg:block hidden"> <div class="dropdown dropdown-end lg:block hidden">
<div tabindex="0" role="button" class="btn-ghost m-1 cursor-pointer"><Icon name="ph:translate" class="text-2xl" /></div> <div tabindex="0" role="button" class="btn-ghost m-1 cursor-pointer"><Icon name="ph:translate" class="text-2xl" /></div>
<ul tabindex="-1" class="dropdown-content text-tertiary text-lg bg-colorPrimary menu z-1 w-52 p-2 shadow-sm"> <ul tabindex="-1" class="dropdown-content text-tertiary text-lg bg-colorPrimary menu z-1 w-52 p-2 shadow-sm">
<li><a href="/es"><Icon name="icon_flag_es" /> Español</a></li> <li><a href={translatePath("es")}><Icon name="icon_flag_es" /> Español</a></li>
<li><a href="/en"><Icon name="icon_flag_uk" /> English</a></li> <li><a href={translatePath("en")}><Icon name="icon_flag_uk" /> English</a></li>
<li><a href="/he"><Icon name="flagpack--il" /> עברית</a></li> <li><a href={translatePath("he")}><Icon name="flagpack--il" /> עברית</a></li>
<li><a href="/pt"><Icon name="flagpack--br" /> Português</a></li> <li><a href={translatePath("pt")}><Icon name="flagpack--br" /> Português</a></li>
<li><a href="/fr"><Icon name="flagpack--fr" /> Français</a></li> <li><a href={translatePath("fr")}><Icon name="flagpack--fr" /> Français</a></li>
<li><a href="/ru"><Icon name="flagpack--ru" /> Русский</a></li> <li><a href={translatePath("ru")}><Icon name="flagpack--ru" /> Русский</a></li>
<li><a href="/rw"><Icon name="flagpack--rw" /> Kinyarwanda</a></li> <li><a href={translatePath("rw")}><Icon name="flagpack--rw" /> Kinyarwanda</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>

View File

@ -6,11 +6,11 @@ slug: 2024-08-03-el-llamado-internacional-por-israel-y-venezuela-fe-libertad-y-a
place: '' place: ''
country: 'PR' country: 'PR'
city: 'Cayey' city: 'Cayey'
thumbnail: 'https://ik.imagekit.io/crpy/tr:w-1280/comunicado-1.webp' thumbnail: 'https://ik.imagekit.io/crpy/tr:w-1280/photo_2026-05-08_14-49-46.jpg'
tags: [Venezuela, Puerto Rico] tags: [Venezuela, Puerto Rico]
gallery: [ gallery: [
{ {
image: 'https://ik.imagekit.io/crpy/tr:w-1280,h-900,cm-pad_resize,bg-blurred/comunicado-1.webp', image: 'https://ik.imagekit.io/crpy/tr:w-1280,h-900,cm-pad_resize,bg-blurred/photo_2026-05-08_14-49-46.jpg',
}, },
] ]
--- ---

View File

@ -6,11 +6,11 @@ slug: 2024-08-03-chamado-internacional-por-israel-e-venezuela-fe-liberdade-e-adv
place: '' place: ''
country: 'PR' country: 'PR'
city: 'Cayey' city: 'Cayey'
thumbnail: 'https://ik.imagekit.io/crpy/tr:w-1280/comunicado-1.webp' thumbnail: 'https://ik.imagekit.io/crpy/tr:w-1280/photo_2026-05-08_14-49-46.jpg'
tags: [Venezuela, Porto Rico] tags: [Venezuela, Porto Rico]
gallery: [ gallery: [
{ {
image: 'https://ik.imagekit.io/crpy/tr:w-1280,h-900,cm-pad_resize,bg-blurred/comunicado-1.webp', image: 'https://ik.imagekit.io/crpy/tr:w-1280,h-900,cm-pad_resize,bg-blurred/photo_2026-05-08_14-49-46.jpg',
}, },
] ]
--- ---

View File

@ -1 +1 @@
{"version":{"fullVersion":"2.2.3","major":"2","minor":"2","patch":"3"},"meta":{"flags":["experimentalData"]},"collections":[{"name":"news","label":"News","path":"src/content/news","format":"md","fields":[{"type":"string","name":"locale","label":"Language","options":[{"label":"Español","value":"es"},{"label":"English","value":"en"},{"label":"Português","value":"pt"},{"label":"Kinyarwanda","value":"rw"},{"label":"Frances","value":"fr"}],"namespace":["news","locale"],"searchable":true,"uid":false},{"type":"string","name":"title","label":"Title","isTitle":true,"required":true,"namespace":["news","title"],"searchable":true,"uid":false},{"type":"datetime","name":"date","label":"Date","required":true,"namespace":["news","date"],"searchable":true,"uid":false},{"type":"string","name":"slug","label":"Slug","namespace":["news","slug"],"searchable":true,"uid":false},{"type":"string","name":"place","label":"Place","namespace":["news","place"],"searchable":true,"uid":false},{"type":"string","name":"thumbnail","label":"Thumbnail URL","namespace":["news","thumbnail"],"searchable":true,"uid":false},{"type":"string","name":"thumbnail_square","label":"Thumbnail Square URL","namespace":["news","thumbnail_square"],"searchable":true,"uid":false},{"type":"string","name":"youtube","label":"YouTube ID","namespace":["news","youtube"],"searchable":true,"uid":false},{"type":"string","name":"tags","label":"Tags (comma separated)","namespace":["news","tags"],"searchable":true,"uid":false},{"type":"boolean","name":"draft","label":"Draft","namespace":["news","draft"],"searchable":true,"uid":false},{"type":"rich-text","name":"body","label":"Content","isBody":true,"namespace":["news","body"],"searchable":true,"parser":{"type":"markdown"},"uid":false}],"namespace":["news"]},{"name":"documentaries","label":"Documentaries","path":"src/content/documentaries","format":"md","fields":[{"type":"string","name":"locale","label":"Language","options":[{"label":"Español","value":"es"},{"label":"English","value":"en"},{"label":"Português","value":"pt"},{"label":"Kinyarwanda","value":"rw"}],"namespace":["documentaries","locale"],"searchable":true,"uid":false},{"type":"string","name":"title","label":"Title","isTitle":true,"required":true,"namespace":["documentaries","title"],"searchable":true,"uid":false},{"type":"string","name":"video_yt","label":"YouTube ID","namespace":["documentaries","video_yt"],"searchable":true,"uid":false},{"type":"datetime","name":"date","label":"Date","required":true,"namespace":["documentaries","date"],"searchable":true,"uid":false}],"namespace":["documentaries"]}],"config":{"media":{"tina":{"publicFolder":"public","mediaRoot":"public/images"}}}} {"version":{"fullVersion":"2.2.5","major":"2","minor":"2","patch":"5"},"meta":{"flags":["experimentalData"]},"collections":[{"name":"news","label":"News","path":"src/content/news","format":"md","fields":[{"type":"string","name":"locale","label":"Language","options":[{"label":"Español","value":"es"},{"label":"English","value":"en"},{"label":"Português","value":"pt"},{"label":"Kinyarwanda","value":"rw"},{"label":"Frances","value":"fr"}],"namespace":["news","locale"],"searchable":true,"uid":false},{"type":"string","name":"title","label":"Title","isTitle":true,"required":true,"namespace":["news","title"],"searchable":true,"uid":false},{"type":"datetime","name":"date","label":"Date","required":true,"namespace":["news","date"],"searchable":true,"uid":false},{"type":"string","name":"slug","label":"Slug","namespace":["news","slug"],"searchable":true,"uid":false},{"type":"string","name":"place","label":"Place","namespace":["news","place"],"searchable":true,"uid":false},{"type":"string","name":"thumbnail","label":"Thumbnail URL","namespace":["news","thumbnail"],"searchable":true,"uid":false},{"type":"string","name":"thumbnail_square","label":"Thumbnail Square URL","namespace":["news","thumbnail_square"],"searchable":true,"uid":false},{"type":"string","name":"youtube","label":"YouTube ID","namespace":["news","youtube"],"searchable":true,"uid":false},{"type":"string","name":"tags","label":"Tags (comma separated)","namespace":["news","tags"],"searchable":true,"uid":false},{"type":"boolean","name":"draft","label":"Draft","namespace":["news","draft"],"searchable":true,"uid":false},{"type":"rich-text","name":"body","label":"Content","isBody":true,"namespace":["news","body"],"searchable":true,"parser":{"type":"markdown"},"uid":false}],"namespace":["news"]},{"name":"documentaries","label":"Documentaries","path":"src/content/documentaries","format":"md","fields":[{"type":"string","name":"locale","label":"Language","options":[{"label":"Español","value":"es"},{"label":"English","value":"en"},{"label":"Português","value":"pt"},{"label":"Kinyarwanda","value":"rw"}],"namespace":["documentaries","locale"],"searchable":true,"uid":false},{"type":"string","name":"title","label":"Title","isTitle":true,"required":true,"namespace":["documentaries","title"],"searchable":true,"uid":false},{"type":"string","name":"video_yt","label":"YouTube ID","namespace":["documentaries","video_yt"],"searchable":true,"uid":false},{"type":"datetime","name":"date","label":"Date","required":true,"namespace":["documentaries","date"],"searchable":true,"uid":false}],"namespace":["documentaries"]}],"config":{"media":{"tina":{"publicFolder":"public","mediaRoot":"public/images"}}}}

File diff suppressed because one or more lines are too long