From 3932f9b589d2cb2a4748d0d62471049aee15ef7c Mon Sep 17 00:00:00 2001
From: Diego <diecoscai@gmail.com>
Date: Sat, 11 Jul 2026 14:16:02 -0300
Subject: [PATCH] Add og:locale meta, hreflang/lang on language toggles,
 labeled corner group
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Deferred items from PR #16 review:
- og:locale + og:locale:alternate per locale (en_US/es_ES)
- hreflang + lang attributes on all four EN/ES toggle anchors
- role=group + localized aria-label on the corner controls container
- Hide the mobile-menu language row from sm: up — the corner EN/ES pair
  already shows there, so the 640-767px band no longer offers two toggles

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VhYGxeedwYvmSNJFBkxwMK
---
 src/components/CornerControls.astro | 8 +++++++-
 src/components/Nav.astro            | 6 +++++-
 src/i18n/index.ts                   | 9 +++++++++
 src/layouts/Base.astro              | 2 ++
 4 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/CornerControls.astro b/src/components/CornerControls.astro
index da54cb7..f2fb1ab 100644
--- a/src/components/CornerControls.astro
+++ b/src/components/CornerControls.astro
@@ -1,6 +1,6 @@
 ---
 import ThemeToggle from './ThemeToggle.astro';
-import { getLocale } from '../i18n';
+import { getLocale, ui } from '../i18n';
 
 const locale = getLocale(Astro.currentLocale);
 
@@ -11,11 +11,15 @@ const langClass = (active: boolean) =>
 ---
 
 <div
+  role="group"
+  aria-label={ui[locale].corner.group}
   class="fixed right-4 top-4 z-50 flex h-12 items-center gap-0.5 rounded-full border border-hairline bg-canvas/70 px-1.5 shadow-lg shadow-black/10 backdrop-blur-md"
 >
   <a
     href="/"
     data-lang-link
+    hreflang="en"
+    lang="en"
     aria-label="English"
     aria-current={locale === 'en' ? 'page' : undefined}
     class={`hidden sm:block ${langClass(locale === 'en')}`}
@@ -25,6 +29,8 @@ const langClass = (active: boolean) =>
   <a
     href="/es/"
     data-lang-link
+    hreflang="es"
+    lang="es"
     aria-label="Español"
     aria-current={locale === 'es' ? 'page' : undefined}
     class={`hidden sm:block ${langClass(locale === 'es')}`}
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index b30d54c..be658eb 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -90,10 +90,12 @@ const links = [
       }
     </ul>
 
-    <div class="mt-1 flex items-center gap-1 border-t border-hairline px-3 py-3">
+    <div class="mt-1 flex items-center gap-1 border-t border-hairline px-3 py-3 sm:hidden">
       <a
         href="/"
         data-lang-link
+        hreflang="en"
+        lang="en"
         aria-label="English"
         aria-current={locale === 'en' ? 'page' : undefined}
         class={locale === 'en'
@@ -105,6 +107,8 @@ const links = [
       <a
         href="/es/"
         data-lang-link
+        hreflang="es"
+        lang="es"
         aria-label="Español"
         aria-current={locale === 'es' ? 'page' : undefined}
         class={locale === 'es'
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 26fcc1c..e500f69 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -61,6 +61,9 @@ interface UIStrings {
   footer: {
     builtWith: string;
   };
+  corner: {
+    group: string;
+  };
 }
 
 export const ui: Localized<UIStrings> = {
@@ -120,6 +123,9 @@ export const ui: Localized<UIStrings> = {
     footer: {
       builtWith: 'Built with Astro · Tailwind',
     },
+    corner: {
+      group: 'Language and theme',
+    },
   },
   es: {
     nav: {
@@ -178,6 +184,9 @@ export const ui: Localized<UIStrings> = {
     footer: {
       builtWith: 'Hecho con Astro · Tailwind',
     },
+    corner: {
+      group: 'Idioma y tema',
+    },
   },
 };
 
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 27ec0f4..9747e94 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -56,6 +56,8 @@ const ogImage = new URL('/og.png', siteBase).href;
     <meta property="og:url" content={canonical} />
     <meta property="og:image" content={ogImage} />
     <meta property="og:site_name" content={profile.name} />
+    <meta property="og:locale" content={locale === 'es' ? 'es_ES' : 'en_US'} />
+    <meta property="og:locale:alternate" content={locale === 'es' ? 'en_US' : 'es_ES'} />
 
     <!-- Twitter -->
     <meta name="twitter:card" content="summary_large_image" />