Jm/translate startlight docs2

astro.config.mjs

@@ -8,6 +8,17 @@ import mdx from "@astrojs/mdx";
 export default defineConfig({
   site: "https://interledger.org",
   base: "/developers",
+  i18n: {
+    locales: ["es", "en"],
+    defaultLocale: "en",
+    routing: {
+      prefixDefaultLocale: false,
+      fallbackType: "rewrite"
+    },
+    fallback: {
+      es: "en"
+    }
+  },
   integrations: [
     starlight({
       title: "Interledger",
@@ -52,9 +63,7 @@ export default defineConfig({
         Header: "./src/components/Header.astro",
         PageSidebar: "./src/components/PageSidebar.astro",
       },
-      social: {
-        github: "https://github.com/interledger",
-      },
+      social:{},
       sidebar: [
         {
           label: "Overview",

src/components/Header.astro

@@ -4,6 +4,10 @@ import Search from "@astrojs/starlight/components/Search.astro";
 import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
 import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
 import DevelopersLogo from "./logos/DevelopersLogo.astro";
+import LanguagePicker from "./LanguagePicker.astro";
+import { getLangFromUrl } from "../i18n/utils";
+
+const lang = getLangFromUrl(Astro.url);
 ---
 
 <div class="header sl-flex">
@@ -24,10 +28,10 @@ import DevelopersLogo from "./logos/DevelopersLogo.astro";
   </a>
   <Search {...Astro.props} />
   <div class="sl-hidden md:sl-flex secondary-wrap">
-
     <SocialIcons {...Astro.props} />
     <ThemeSelect {...Astro.props} />
   </div>
+  <LanguagePicker lang={lang} />
 </div>
 
 <style>

src/components/LanguagePicker.astro

@@ -0,0 +1,87 @@
+---
+import { defaultLang } from "../i18n/ui";
+import { useTranslatedPath } from "../i18n/utils";
+const { lang } = Astro.props;
+const path = Astro.url.pathname;
+const translatePath = useTranslatedPath(defaultLang, lang);
+---
+
+<div class="language-switcher-language-url" role="navigation">
+  <ul class="links">
+    <li
+      class:list={[lang === "en" && "is-active"]}
+      aria-current={lang === "en" ? "page" : undefined}
+    >
+      <a
+        href={translatePath(path, "en")}
+        class:list={["language-link", lang === "en" && "is-active"]}
+        hreflang="en-gb"
+        aria-current={lang === "en" ? "page" : undefined}
+      >
+        EN
+      </a>
+    </li>
+    <li
+      class:list={[lang === "es" && "is-active"]}
+      aria-current={lang === "es" ? "page" : undefined}
+    >
+      <a
+        href={translatePath(path, "es")}
+        class:list={["language-link", lang === "es" && "is-active"]}
+        hreflang="es"
+        aria-current={lang === "es" ? "page" : undefined}
+      >
+        ES
+      </a>
+    </li>
+  </ul>
+</div>
+
+<style>
+  a {
+    text-decoration-color: transparent;
+    transition: text-decoration-color ease-in-out 200ms;
+  }
+
+  .language-switcher-language-url {
+    flex: none;
+  }
+
+  .language-switcher-language-url .links {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin-inline-start: var(--space-2xs);
+  }
+
+  .language-switcher-language-url .links li:first-child::after {
+    display: inline-flex;
+    content: "|";
+  }
+
+  .language-switcher-language-url .links a {
+    margin: var(--space-3xs);
+    padding: var(--space-xs) var(--space-2xs);
+    text-underline-offset: 8px;
+    text-decoration: underline 1.5px transparent;
+    color: var(--color-primary-fallback);
+    color: var(--color-primary);
+  }
+
+  .language-switcher-language-url .links a.is-active {
+    text-decoration-color: currentColor;
+  }
+
+  .language-switcher-language-url .links a:hover {
+    background-color: var(--color-nav-hover);
+    border-radius: var(--border-radius);
+  }
+
+  @media screen and (max-width: 1159px) {
+    .language-switcher-language-url {
+      position: absolute;
+      top: 25px;
+      right: calc(var(--space-m) + var(--space-xs) + 24px);
+    }
+  }
+</style>

src/components/pages/FoundationFooter.astro

@@ -1,21 +1,26 @@
 ---
+import { getLangFromUrl, useTranslations, useTranslatedPath } from "../../i18n/utils";
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+const translatePath = useTranslatedPath(lang, lang);
 const currentYear = new Date().getFullYear();
 ---
 
 <footer class="site-footer" role="contentinfo">
   <div class="connect-wrapper">
     <div class="mailing-list">
-      <h3>Join our mailing list</h3>
+      <h3>{t("footer.mailing-list")}</h3>
       <a
         class="button subscribe-btn"
-        href="/subscribe"
+        href={translatePath("/subscribe")}
         data-umami-event="Footer link - Subscribe"
       >
-        Subscribe
+        {t("footer.subscribe")}
       </a>
     </div>
     <div class="social-links">
-      <h3>Connect with us</h3>
+      <h3>{t("footer.connect")}</h3>
       <ul>
         <li>
           <a href="https://www.youtube.com/@InterledgerFoundation" aria-label="Interledger's Youtube channel" data-umami-event="Footer - Youtube">
@@ -55,11 +60,11 @@ const currentYear = new Date().getFullYear();
       </ul>
     </div>
   </div>
-  <p>&copy; 2020–{currentYear}, Interledger Foundation. All rights reserved.</p>
+  <p>&copy; 2020–{currentYear}, Interledger Foundation. {lang === 'es' ? 'Todos los derechos reservados.' : 'All rights reserved.'}</p>
   <ul class="footer-links">
-    <li><a href="https://www.iubenda.com/terms-and-conditions/88624819" data-umami-event="Footer - T&C">Terms & conditions</a></li>
-    <li><a href="https://www.iubenda.com/privacy-policy/88624819" data-umami-event="Footer - Privacy">Privacy policy</a></li>
-    <li><a href="/contact" data-umami-event="Footer - Contact">Contact us</a></li>
+    <li><a href="https://www.iubenda.com/terms-and-conditions/88624819" data-umami-event="Footer - T&C">{t("footer.terms")}</a></li>
+    <li><a href="https://www.iubenda.com/privacy-policy/88624819" data-umami-event="Footer - Privacy">{t("footer.privacy")}</a></li>
+    <li><a href={translatePath("/contact")} data-umami-event="Footer - Contact">{t("footer.contact")}</a></li>
   </ul>
 </footer>