Added initial json files for translations - Adding example nav translations - Modified header to use translations.
This commit is contained in:
Julio Ruiz
parent
ea16b61dfc
commit
dc0d66d283
|
|
@ -1,22 +1,25 @@
|
|||
---
|
||||
import Button from "./ui/Button.astro";
|
||||
import { Icon } from "astro-icon/components";
|
||||
|
||||
import { createTranslator } from "../i18n/index.ts";
|
||||
const tl = createTranslator(Astro.currentLocale);
|
||||
---
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between px-8 md:px-0 md:py-4">
|
||||
<div class="border-l-4 border-colorPrimary pl-4">
|
||||
<p class="font-secondary text-colorPrimary font-bold leading-none py-2 text-2xl md:text-lg">
|
||||
<a href="/">Centro del Reino<br /> De Paz y Justicia</a>
|
||||
<a href="/">{tl("nav.logo_line1")}<br/>{tl("nav.logo_line2")}</a>
|
||||
</p>
|
||||
</div>
|
||||
<nav
|
||||
class="flex justify-evenly gap-10 items-center uppercase text-md text-white"
|
||||
>
|
||||
<div class="hidden md:flex gap-8 font-primary font-bold">
|
||||
<a class="hover:text-colorPrimary transition" href="#somos">Somos</a>
|
||||
<a class="hover:text-colorPrimary transition" href="#programs">Programas</a>
|
||||
<a class="hover:text-colorPrimary transition" href="#news">Noticias</a>
|
||||
<a class="hover:text-colorPrimary transition" href="#somos">{tl("nav.about")}</a>
|
||||
<a class="hover:text-colorPrimary transition" href="#programs">{tl("nav.programs")}</a>
|
||||
<a class="hover:text-colorPrimary transition" href="#news">{tl("nav.news")}</a>
|
||||
</div>
|
||||
<div class="drawer lg:hidden">
|
||||
<input id="my-drawer-1" type="checkbox" class="drawer-toggle" />
|
||||
|
|
@ -31,24 +34,24 @@ import { Icon } from "astro-icon/components";
|
|||
<div class="flex gap-2 justify-center items-center mb-8 mt-8">
|
||||
<img class="w-1/3 object-contain" src="/img/logo-metalico.webp" alt="Logo Centro del Reino de Paz y Justicia" />
|
||||
<p class="font-secondary text-colorPrimary font-bold leading-none py-2 text-lg ">
|
||||
<a href="/">Centro del Reino<br /> De Paz y Justicia</a>
|
||||
<a href="/">{tl("nav.logo_line1")}<br/>{tl("nav.logo_line2")}</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="font-primary font-bold flex flex-col gap-1 text-lg p-0">
|
||||
<li><a><a class="hover:text-colorPrimary transition" href="#somos">Somos</a></a></li>
|
||||
<li><a><a class="hover:text-colorPrimary transition" href="#programs">Programas</a></a></li>
|
||||
<li><a><a class="hover:text-colorPrimary transition" href="#news">Noticias</a></a></li>
|
||||
<li><a><a class="hover:text-colorPrimary transition" href="#somos">{tl("nav.about")}</a></a></li>
|
||||
<li><a><a class="hover:text-colorPrimary transition" href="#programs">{tl("nav.programs")}</a></a></li>
|
||||
<li><a><a class="hover:text-colorPrimary transition" href="#news">{tl("nav.news")}</a></a></li>
|
||||
</div>
|
||||
<div class="w-50">
|
||||
<Button class="px-8 py-2 uppercase text-lg mt-8" title="Contacto" url="#contact" variant="primary" />
|
||||
<Button class="px-8 py-2 uppercase text-lg mt-8" title={tl("nav.contact")} url="#contact" variant="primary" />
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-50 hidden md:block">
|
||||
<Button class="px-8 py-2 uppercase" title="Contacto" url="#contact" variant="primary" />
|
||||
<Button class="px-8 py-2 uppercase" title={tl("nav.contact")} url="#contact" variant="primary" />
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"nav.logo_line1": "Centro del Reino",
|
||||
"nav.logo_line2": "de Paz y Justicia",
|
||||
"nav.about": "About",
|
||||
"nav.news": "News",
|
||||
"nav.programs": "Programs",
|
||||
"nav.contact": "Contact"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"nav.logo_line1": "Centro del Reino",
|
||||
"nav.logo_line2": "de Paz y Justicia",
|
||||
"nav.about": "Somos",
|
||||
"nav.news": "Noticias",
|
||||
"nav.programs": "Programas",
|
||||
"nav.contact": "Contacto"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"nav.logo_line1": "Centro del Reino",
|
||||
"nav.logo_line2": "de Paz y Justicia",
|
||||
"nav.about": "À propos",
|
||||
"nav.news": "Nouvelles",
|
||||
"nav.programs": "Programmes",
|
||||
"nav.contact": "Contactez"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"nav.logo_line1": "Centro del Reino",
|
||||
"nav.logo_line2": "de Paz y Justicia",
|
||||
"nav.about": "À propos",
|
||||
"nav.news": "Nouvelles",
|
||||
"nav.programs": "Programmes",
|
||||
"nav.contact": "Contactez"
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import es from "./es.json";
|
||||
import en from "./en.json";
|
||||
import fr from "./fr.json";
|
||||
import he from "./he.json";
|
||||
import uk from "./uk.json";
|
||||
import pt from "./pt.json";
|
||||
|
||||
const dictionaries = { es, en, fr, he, uk, pt } as const;
|
||||
export type Locale = keyof typeof dictionaries;
|
||||
|
||||
// Optional: type-safe keys from the default dictionary
|
||||
export type I18nKey = keyof typeof es;
|
||||
|
||||
export function t(
|
||||
locale: string | undefined,
|
||||
key: I18nKey,
|
||||
vars?: Record<string, string | number>
|
||||
) {
|
||||
const l = (locale in dictionaries ? locale : "es") as Locale;
|
||||
|
||||
// fallback chain: requested locale -> default locale -> key itself
|
||||
const template =
|
||||
dictionaries[l][key] ??
|
||||
dictionaries.it[key] ??
|
||||
String(key);
|
||||
|
||||
if (!vars) return template;
|
||||
|
||||
// simple interpolation: "Hello {name}"
|
||||
return template.replace(/\{(\w+)\}/g, (_, name) =>
|
||||
vars[name] === undefined ? `{${name}}` : String(vars[name])
|
||||
);
|
||||
}
|
||||
|
||||
export function createTranslator(locale: string | undefined) {
|
||||
return function tl(key: I18nKey, vars?: Record<string, string | number>) {
|
||||
return t(locale, key, vars);
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"nav.logo_line1": "Centro del Reino",
|
||||
"nav.logo_line2": "de Paz y Justicia",
|
||||
"nav.about": "Somos",
|
||||
"nav.news": "Noticias",
|
||||
"nav.programs": "Programas",
|
||||
"nav.contact": "Contacto"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"nav.logo_line1": "Centro del Reino",
|
||||
"nav.logo_line2": "de Paz y Justicia",
|
||||
"nav.about": "Somos",
|
||||
"nav.news": "Noticias",
|
||||
"nav.programs": "Programas",
|
||||
"nav.contact": "Contacto"
|
||||
}
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
---
|
||||
import "../../styles/global.css";
|
||||
|
||||
import MainLayout from "../../layouts/MainLayout.astro";
|
||||
import HeroHome from "../../components/HeroHome.astro";
|
||||
import NewsSection from "../../components/section/NewsSection.astro";
|
||||
import ParticipateSection from "../../components/section/ParticipateSection.astro";
|
||||
import CarouselSection from "../../components/section/CarouselSection.astro";
|
||||
import InfoSection from "../../components/section/InfoSection.astro";
|
||||
import IdentitySection from "../../components/section/IdentitySection.astro";
|
||||
import AuthoritySection from "../../components/section/AuthoritySection.astro";
|
||||
import ProjectionSection from "../../components/section/ProjectionSection.astro";
|
||||
|
||||
import { infoboxes } from "../../data/content/infosection.js";
|
||||
import ColorSection from "../../components/section/ColorSection.astro";
|
||||
import TitleSection from "../../components/section/TitleSection.astro";
|
||||
import GridSection from "../../components/section/GridSection.astro";
|
||||
import ColumnsSection from "../../components/section/ColumnsSection.astro";
|
||||
import FormationSection from "../../components/section/FormationSection.astro";
|
||||
import FooterSection from "../../components/section/FooterSection.astro";
|
||||
|
||||
const { locale } = Astro.params;
|
||||
|
||||
const carouselImages2 = [
|
||||
{
|
||||
image: "https://ik.imagekit.io/crpy/tr:w-1920,h-1080,cm-extract,x-0,y-1730/lonely-african-american-male-praying-with-his-hands-bible-with-his-head-down.webp",
|
||||
text: "Justicia",
|
||||
},
|
||||
{
|
||||
image: "https://ik.imagekit.io/crpy/amigos-bn.webp",
|
||||
text: "Paz",
|
||||
},
|
||||
];
|
||||
|
||||
const carouselImages3 = [
|
||||
{
|
||||
image: "https://ik.imagekit.io/crpy/tr:w-1920,h-1080,cm-extract,x-0,y-1730/lonely-african-american-male-praying-with-his-hands-bible-with-his-head-down.webp",
|
||||
text: "Justicia",
|
||||
},
|
||||
{
|
||||
image: "https://ik.imagekit.io/crpy/amigos-bn.webp",
|
||||
text: "Paz",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<MainLayout>
|
||||
|
||||
<HeroHome />
|
||||
|
||||
<InfoSection bgColor="bg-white" title="Construyendo el mundo soñado por los profetas: justicia y paz para Israel y toda la humanidad" data={infoboxes} />
|
||||
|
||||
<CarouselSection class="object-cover" images={carouselImages3} />
|
||||
|
||||
<IdentitySection bgColor="bg-white" colorText="text-[#003421]" initTitle="Identidad Institucional" title="El Centro del Reino de Paz y Justicia" />
|
||||
|
||||
<AuthoritySection bgColor="bg-[#003421]" titleColor="text-colorSecondary" descColor="text-[#EBE6D2]" />
|
||||
|
||||
<TitleSection title="Dr. José Benjamín Pérez Matos | Trayectoria" />
|
||||
|
||||
<GridSection />
|
||||
|
||||
<ColorSection
|
||||
id="mision"
|
||||
bgColor="#22523F"
|
||||
titleColor="text-[#ffffff]"
|
||||
textColor="text-[#CBA16A] font-bold"
|
||||
title="Misión"
|
||||
text="Formar líderes, impulsar iniciativas educativas y promover acciones públicas orientadas a la justicia y la paz, desde una base ética y espiritual firme, con un compromiso explícito con Israel y con la responsabilidad de contribuir al bienestar y la estabilidad de la humanidad en su conjunto." />
|
||||
|
||||
<ColorSection
|
||||
bgColor="#CBA16A"
|
||||
titleColor="text-[#ffffff]"
|
||||
textColor="text-[#ffffff] font-bold"
|
||||
title="Visión"
|
||||
text="Consolidarse como un actor internacional de referencia en formación de liderazgo, diplomacia pública y proyección institucional, reconocido por su coherencia, su claridad de valores y su contribución concreta a la construcción de un mundo alineado con la visión profética de justicia y paz." />
|
||||
|
||||
<TitleSection title="Valores Intitucionales" />
|
||||
|
||||
<ColumnsSection />
|
||||
|
||||
<ProjectionSection title="Diplomacia Pública y Proyección Internacional" />
|
||||
|
||||
<FormationSection />
|
||||
|
||||
<CarouselSection images={carouselImages2} />
|
||||
|
||||
<NewsSection />
|
||||
|
||||
<ParticipateSection />
|
||||
|
||||
<FooterSection />
|
||||
|
||||
</MainLayout>
|
||||
Loading…
Reference in New Issue