Skip to content

Implement the cookie banner i18n spanish version #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Wilovy09 merged 1 commit into from
Mar 6, 2026
Merged

Implement the cookie banner i18n spanish version #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 15 additions & 13 deletions src/components/CookieBanner.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@
import { Image } from "astro:assets"
import ferrisCooking from "~/assets/images/webp/ferris_cooking.jpg"

import { defaultLang, ui } from "~/i18n/ui"

const lang = defaultLang

type TranslationKey = keyof (typeof ui)[typeof defaultLang]
const t = (key: TranslationKey) => ui[lang][key]
const projectId = import.meta.env.VITE_CLARITY_PROJECT_ID
---

Expand All @@ -17,33 +23,29 @@ const projectId = import.meta.env.VITE_CLARITY_PROJECT_ID
<div class="relative aspect-4/3 md:aspect-auto">
<Image
src={ferrisCooking}
alt="Ferris cocinando cookies"
alt={t("cookie.banner.img.alt")}
class="absolute inset-0 w-full h-full object-cover"
/>
</div>

<div class="flex flex-col justify-center gap-5 p-6 overflow-y-auto">
<div class="flex flex-col gap-3">
<h2 class="text-secondary font-semibold text-lg">🍪 Aviso de Cookies</h2>
<h2 class="text-secondary font-semibold text-lg">{t("cookie.banner.title")}</h2>
<p class="text-sm text-secondary/70 leading-relaxed">
Utilizamos cookies propias y de terceros para mejorar tu experiencia
en nuestro sitio web, analizar el tráfico y entender cómo interactúan
los usuarios con nuestro contenido.
{t("cookie.banner.purpose")}
</p>
<p class="text-sm text-secondary/70 leading-relaxed">
También utilizamos <span class="text-secondary font-medium">Microsoft Clarity</span>,
una herramienta de análisis que nos permite comprender el comportamiento
de navegación mediante mapas de calor y grabaciones anónimas de sesiones,
con el fin de optimizar nuestro servicio.
{t("cookie.banner.company.also")}<span class="text-secondary font-medium">{t("cookie.banner.company")}</span>
{t("cookie.banner.company.description")}
</p>
<p class="text-xs text-secondary/50 leading-relaxed">
Al hacer clic en "Aceptar", consientes el uso de cookies según nuestra
{t("cookie.banner.accept")}
<a
href="/privacidad"
target="_blank"
rel="noopener noreferrer"
class="text-yellow hover:underline"
>Política de Privacidad</a>.
>{t("policy.privacy")}</a>.
</p>
</div>

Expand All @@ -52,13 +54,13 @@ const projectId = import.meta.env.VITE_CLARITY_PROJECT_ID
id="reject-cookies"
class="flex-1 px-4 py-2 text-sm text-secondary/60 border border-stroke-color rounded-lg hover:bg-stroke-color/20 transition-colors cursor-pointer"
>
Rechazar
{t("text.denied")}
</button>
<button
id="accept-cookies"
class="flex-1 px-4 py-2 text-sm bg-yellow text-primary font-semibold rounded-lg hover:opacity-90 transition-opacity cursor-pointer"
>
Aceptar
{t("text.accept")}
</button>
</div>
</div>
Expand Down
18 changes: 17 additions & 1 deletion src/i18n/ui.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,35 @@ export const defaultLang = "es"

export const ui = {
es: {
"policy.privacy": "Política de Privacidad",
"text.denied": "Rechazar",
"text.accept": "Aceptar",
"nav.home": "Inicio",
"nav.learn": "Aprender",
"nav.privacy": "Privacidad",

"track.badge.beginner": "Principiante",
"track.badge.advanced": "Avanzado",
"track.lessons": "lecciones",
"track.lessons": "Lecciones",
"track.start": "Empezar",
"track.continue": "Continuar",
"track.certificate": "Ver certificado",

"lesson.content": "Contenido",
"lesson.editor": "Editor",
"lesson.more_below": "Hay más contenido abajo",

"cookie.banner.img.alt": "Ferris cocinando cookies",
"cookie.banner.title": "🍪 Aviso de Cookies",
"cookie.banner.purpose": `Utilizamos cookies propias y de terceros para mejorar tu experiencia
en nuestro sitio web, analizar el tráfico y entender cómo interactúan
los usuarios con nuestro contenido.`,
"cookie.banner.company.also": "También utilizamos ",
"cookie.banner.company": "Microsoft Clarity",
"cookie.banner.company.description": `,
una herramienta de análisis que nos permite comprender el comportamiento
de navegación mediante mapas de calor y grabaciones anónimas de sesiones,
con el fin de optimizar nuestro servicio.`,
"cookie.banner.accept": `Al hacer clic en "Aceptar", consientes el uso de cookies según nuestra`,
},
} as const
Loading