Skip to content

Commit

Permalink
I18n (#14)
Browse files Browse the repository at this point in the history 
* i18n iniciado

* Botón para cambiar de idioma modificado

* Footer traducido al inglés

* Página de inicio traducida al inglés

* Página de nosotros traducida al inglés

* Traducción de la pagina nosotros terminada

* Página de servicios traducida al inglés

* Pequeños cambios

* Página de tecnología traducida al inglés

* intento de traducir página 404
  • Loading branch information
@Emanuel-Palestino
Emanuel-Palestino authored Oct 23, 2024
1 parent a4f2554 commit 43833fe
Show file tree
Hide file tree
Showing 23 changed files with 709 additions and 426 deletions.
11 changes: 11 additions & 0 deletions astro.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,15 @@ import tailwind from "@astrojs/tailwind";
export default defineConfig({
integrations: [tailwind()],
site: 'https://lacamara.mx',
i18n: {
defaultLocale: 'es',
locales: ['es', 'en'],
fallback: {
en: 'es',
},
routing: {
prefixDefaultLocale: false,
fallbackType: 'rewrite',
}
}
});
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,6 @@
"lite-youtube-embed": "^0.3.3",
"tailwindcss": "^3.4.13",
"typescript": "^5.6.2"
}
},
"packageManager": "[email protected]+sha512.8e4c3550fb500e808dbc30bb0ce4dd1eb614e30b1c55245f211591ec2cdf9c611cabd34e1364b42f564bd54b3945ed0f49d61d1bbf2ec9bd74b866fcdc723276"
}
31 changes: 17 additions & 14 deletions src/components/Footer.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ import FacebookIcon from "../icons/FacebookIcon.astro";
import XIcon from "../icons/XIcon.astro";
import { Image } from "astro:assets";
import logoImage from "../images/logo_pch_blanco.png";
import { getLangFromUrl, useTranslations } from "../i18n/utils";
const lang = getLangFromUrl(Astro.currentLocale as string);
const t = useTranslations(lang);
---

<footer class="bg-footer py-3 text-white">
Expand All @@ -16,47 +20,46 @@ import logoImage from "../images/logo_pch_blanco.png";
width="42"
height="42"
/>
<p>Cámara de la Gente</p>
<p>{t('footer.company')}</p>
</picture>

<!-- Sección principal del footer -->
<div
class="flex flex-col md:flex-row gap-8 border-t border-gray-200 pt-8 px-4"
>
<nav class="hidden md:block basis-1/3">
<p class="text-lg font-semibold mb-2">Inicio</p>
<p class="text-lg font-semibold mb-2">Nosotros</p>
<p class="text-lg font-semibold mb-2">Servicios</p>
<p class="text-lg font-semibold mb-2">Tecnología</p>
<p class="text-lg font-semibold mb-2">Eventos</p>
<p class="text-lg font-semibold mb-2">{t('nav.home')}</p>
<p class="text-lg font-semibold mb-2">{t('nav.about')}</p>
<p class="text-lg font-semibold mb-2">{t('nav.services')}</p>
<p class="text-lg font-semibold mb-2">{t('nav.technology')}</p>
<p class="text-lg font-semibold mb-2">{t('nav.events')}</p>
</nav>

<div>
<h2 class="text-lg font-semibold mb-4 center">
INFORMACIÓN DE CONTACTO
{t('footer.contactInfo')}
</h2>
<p class="mb-4">
Xochicalco 55, Benito Juárez, CDMX, 03020, MÉXICO
{t('footer.address')}
</p>
</div>

<div>
<h2 class="text-lg font-semibold mb-4 center">
MANTENTE INFORMADO
{t('footer.stayInTouch')}
</h2>
<p class="mb-4">
Indica tu email para recibir actualizaciones de La Cámara de
la Gente
{t('footer.stayInTouchText')}
</p>
<form class="flex flex-col gap-4">
<input
type="email"
placeholder="Ingresa tu email"
placeholder={t('footer.email')}
class="p-3 rounded bg-gray-100 text-gray-900"
/>
<button
class="bg-blue p-3 rounded bg-primary text-white hover:bg-secondary"
>Suscribirse</button
>{t('footer.subscribe')}</button
>
</form>
</div>
Expand All @@ -66,7 +69,7 @@ import logoImage from "../images/logo_pch_blanco.png";
class="flex flex-col-reverse md:flex-row gap-2 justify-between items-center border-t border-gray-200 mt-6 pt-3 px-2"
>
<p class="text-gray-300 text-sm">
&copy; 2024 Cámara de la Gente. Todos los derechos reservados.
&copy; {t('footer.copy')}
</p>
<div class="flex space-x-6 items-center">
<a
Expand Down
79 changes: 59 additions & 20 deletions src/components/Header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@
import EarthIcon from "../icons/EarthIcon.astro";
import { Image } from "astro:assets";
import logoImage from "../images/logo_pch_blanco.png";
import { getLangFromUrl, useTranslations } from "../i18n/utils";
import { getRelativeLocaleUrl } from "astro:i18n";
const lang = getLangFromUrl(Astro.currentLocale as string);
const t = useTranslations(lang);
---

<header
Expand All @@ -19,10 +24,14 @@ import logoImage from "../images/logo_pch_blanco.png";
height="52"
loading="eager"
/>
<p class="block md:hidden lg:block">Cámara de la Gente</p>
<p class="block md:hidden lg:block">{t("header.company")}</p>
</picture>

<button id="header_burger" class="flex flex-col gap-[6px] md:hidden" aria-label="menú desplegable">
<button
id="header_burger"
class="flex flex-col gap-[6px] md:hidden"
aria-label="menú desplegable"
>
<span class="w-[30px] h-[3px] rounded-full bg-white block"></span>
<span class="w-[30px] h-[3px] rounded-full bg-white block"></span>
<span class="w-[30px] h-[3px] rounded-full bg-white block"></span>
Expand All @@ -32,39 +41,57 @@ import logoImage from "../images/logo_pch_blanco.png";
class="flex items-center gap-8 pt-20 flex-col absolute top-0 bottom-0 left-[110vw] w-screen h-screen bg-primary py-6 md:py-0 md:bg-inherit md:w-auto md:h-auto md:static md:flex-row md:pt-0"
>
<nav>
<ul
class="flex flex-col gap-2 items-center md:flex-row lg:gap-4"
>
<ul class="flex flex-col gap-2 items-center md:flex-row lg:gap-4">
<li>
<a href="/" class="relative block px-2 py-1">Inicio</a>
<a
href={getRelativeLocaleUrl(lang)}
class="relative block px-2 py-1">{t("nav.home")}</a
>
</li>
<li>
<a href="/nosotros" class="relative block px-2 py-1"
>Nosotros</a
<a
href={getRelativeLocaleUrl(lang, "nosotros")}
class="relative block px-2 py-1">{t("nav.about")}</a
>
</li>
<li>
<a href="/servicios" class="relative block px-2 py-1"
>Servicios</a
<a
href={getRelativeLocaleUrl(lang, "servicios")}
class="relative block px-2 py-1">{t("nav.services")}</a
>
</li>
<li>
<a href="/tecnologia" class="relative block px-2 py-1"
>Tecnología</a
<a
href={getRelativeLocaleUrl(lang, "tecnologia")}
class="relative block px-2 py-1">{t("nav.technology")}</a
>
</li>
<li>
<a href="/eventos" class="relative block px-2 py-1"
>Eventos</a
<a
href={getRelativeLocaleUrl(lang, "eventos")}
class="relative block px-2 py-1">{t("nav.events")}</a
>
</li>
</ul>
</nav>

<button role="button" class="flex gap-1 items-center">
<EarthIcon width="1.2rem" height="1.2rem" />
<p class="pt-[1px]">ES</p>
</button>
<label for="lang" class="relative">
<span class="block absolute text-white mt-[5px] left-1">
<EarthIcon width="1rem" height="1rem" />
</span>
<select
name="lang"
id="lang"
class="py-1 px-6 pr-4 cursor-pointer bg-transparent"
>
<option value="es" class="text-black" selected={lang === "es"}
>ES</option
>
<option value="en" class="text-black" selected={lang === "en"}
>EN</option
>
</select>
</label>
</div>
</section>
</header>
Expand All @@ -79,7 +106,7 @@ import logoImage from "../images/logo_pch_blanco.png";
header.style.setProperty("--header-opacity", "0.95");
}

if(header && !isHomePage){
if (header && !isHomePage) {
header.style.setProperty("--header-opacity", "0.95");
}

Expand All @@ -105,6 +132,18 @@ import logoImage from "../images/logo_pch_blanco.png";
});
}

const curretAnchor = document.querySelector(`#header nav a[href="${window.location.pathname}"]`);
const curretAnchor = document.querySelector(
`#header nav a[href="${window.location.pathname}"]`,
);
curretAnchor?.classList.add("active");

const langSelect = document.getElementById("lang");
langSelect?.addEventListener("change", (e) => {
const target = e.target as HTMLSelectElement;
if (window.location.replace) {
window.location.replace(`/${target.value}${window.location.pathname}`);
} else {
window.location.href = `/${target.value}${window.location.pathname}`;
}
});
</script>
66 changes: 66 additions & 0 deletions src/components/Nosotros.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
---
import { Image } from "astro:assets";
import one from "../images/gallery_six.jpg";
import two from "../images/gallery_seven.webp";
import three from "../images/gallery_four.webp";
import { getLangFromUrl, useTranslations } from "../i18n/utils";
const lang = getLangFromUrl(Astro.currentLocale as string);
const t = useTranslations(lang);
---

<section class="mx-auto w-full max-w-7xl px-5 py-16 md:px-10 md:py-20">
<div class="grid gap-10 lg:grid-cols-2 lg:gap-12 my-32">
<Image
src={one}
alt="img"
class="h-full w-full object-cover rounded-lg overflow-hidden"
/>
<div class="flex flex-col gap-5 rounded-lg shadow-2xl p-10 sm:p-20">
<h2 class="font-bold md:text-5xl">{t('home.about.1.title')}</h2>
<p class="text-sm text-gray-500 sm:text-base">
{t('home.about.1.text.1')}
<br /><br />
{t('home.about.1.text.2')}
</p>
</div>
</div>

<div class="grid gap-10 lg:grid-cols-2 lg:gap-12 my-32">
<div class="flex flex-col gap-5 rounded-lg shadow-2xl p-10 sm:p-20">
<h2 class="font-bold md:text-5xl">{t('home.about.2.title')}</h2>
<p class="text-sm text-gray-500 sm:text-base">
{t('home.about.2.text.1')}
<br /><br />
{t('home.about.2.text.2')}
<br /><br />
{t('home.about.2.text.3')}
</p>
</div>

<Image
src={two}
alt="img"
class="h-full w-full object-cover rounded-lg overflow-hidden"
/>
</div>

<div class="grid gap-10 lg:grid-cols-2 lg:gap-12 my-32">
<Image
src={three}
alt="img"
class="h-full w-full object-cover rounded-lg overflow-hidden"
/>
<div class="flex flex-col gap-5 rounded-lg shadow-2xl p-10 sm:p-20">
<h2 class="font-bold md:text-5xl">{t('home.about.3.title')}</h2>
<p class="text-sm text-gray-500 sm:text-base">
{t('home.about.3.text.1')}
<br /><br />
{t('home.about.3.text.2')}
<br /><br />
{t('home.about.3.text.3')}
</p>
</div>
</div>
</section>
Loading

0 comments on commit 43833fe

Please sign in to comment.