Jm/translate startlight docs2

astro.config.mjs

@@ -63,7 +63,7 @@ export default defineConfig({
         Header: "./src/components/Header.astro",
         PageSidebar: "./src/components/PageSidebar.astro",
       },
-      social: {
+      social:{
         github: "https://github.com/interledger",
       },
       sidebar: [

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,9 +28,9 @@ 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 class="theme-select-wrapper"><ThemeSelect {...Astro.props} /></div>
+    <LanguagePicker lang={lang} />
   </div>
 </div>
 
@@ -95,10 +99,13 @@ import DevelopersLogo from "./logos/DevelopersLogo.astro";
 
   .secondary-wrap {
     align-items: center;
-    gap: var(--space-s);
   }
 
   :global(site-search > button[data-open-modal]) {
     width: auto;
   }
+
+  .theme-select-wrapper {
+    padding-inline-start: var(--space-s);
+  }
 </style>

src/components/LanguagePicker.astro

@@ -7,6 +7,20 @@ const translatePath = useTranslatedPath(defaultLang, lang);
 ---
 
 <div class="language-switcher-language-url" role="navigation">
+  <!-- Dropdown version for 800px-1160px -->
+  <select class="language-select" aria-label="Select language">
+    <option value={translatePath(path, "en")} selected={lang === "en"}>
+      EN
+    </option>
+    <option value={translatePath(path, "es")} selected={lang === "es"}>
+      ES
+    </option>
+  </select>
+  <svg aria-hidden="true" class="caret" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"></path>
+  </svg>
+
+  <!-- List version for other viewport sizes -->
   <ul class="links">
     <li
       class:list={[lang === "en" && "is-active"]}
@@ -37,6 +51,18 @@ const translatePath = useTranslatedPath(defaultLang, lang);
   </ul>
 </div>
 
+<script>
+  const languageSelect = document.querySelector<HTMLSelectElement>(".language-select");
+  if (languageSelect) {
+    languageSelect.addEventListener("change", (e) => {
+      const target = e.target as HTMLSelectElement;
+      if (target?.value) {
+        window.location.href = target.value;
+      }
+    });
+  }
+</script>
+
 <style>
   a {
     text-decoration-color: transparent;
@@ -45,8 +71,64 @@ const translatePath = useTranslatedPath(defaultLang, lang);
 
   .language-switcher-language-url {
     flex: none;
+    position: relative;
+  }
+
+  /* Dropdown select styling - hidden by default, shown between 800px-1160px */
+  .language-select {
+    display: none;
+    appearance: none;
+    background-color: transparent;
+    border: 0;
+    color: var(--sl-color-gray-1);
+    font-size: var(--sl-text-sm);
+    padding-block: 0.625rem;
+    padding-inline: var(--space-xs) calc(1.25rem + var(--space-xs) + 0.25rem);
+    cursor: pointer;
+    min-width: 4em;
+    text-overflow: ellipsis;
   }
 
+  .language-switcher-language-url:hover .language-select {
+    color: var(--sl-color-gray-2);
+  }
+
+  .language-select:focus-visible {
+    outline: 2px solid var(--color-primary-fallback);
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  /* Dropdown caret - matching ThemeSelect style */
+  .caret {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    inset-inline-end: var(--space-xs);
+    width: 1.25rem;
+    height: 1.25rem;
+    pointer-events: none;
+    display: none;
+    color: var(--sl-color-gray-1);
+  }
+
+  @media screen and (min-width: 800px) and (max-width: 1159px) {
+    .caret {
+      display: block;
+    }
+
+    .language-switcher-language-url:hover .caret {
+      color: var(--sl-color-gray-2);
+    }
+    .language-select {
+      display: block;
+    }
+    .links {
+      display: none !important;
+    }
+  }
+
+  /* List version styling */
   .language-switcher-language-url .links {
     display: flex;
     list-style: none;
@@ -77,11 +159,4 @@ const translatePath = useTranslatedPath(defaultLang, lang);
     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/Footer.astro

@@ -1,4 +1,8 @@
 ---
+import { getLangFromUrl, useTranslations } from "../../i18n/utils";
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
 const currentYear = new Date().getFullYear();
 ---
 <footer>
@@ -9,7 +13,7 @@ const currentYear = new Date().getFullYear();
     <li><a href="https://github.com/interledger"><img src="/developers/img/lander/icon-github.svg" alt="Github" /></a></li>
     <li><a href="https://www.linkedin.com/company/interledger-foundation/"><img src="/developers/img/lander/icon-linkedin.svg" alt="Linkedin" /></a></li>
   </ul>
-  <p>&copy; 2020–{currentYear}, Interledger Foundation</p>
+  <p>&copy; 2020–{currentYear}, Interledger Foundation. { t("footer.copyright") }</p>
 </footer>
 
 <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. {t("footer.copyright")}</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>
 

src/components/pages/FoundationHeader.astro

@@ -16,75 +16,73 @@ const translatePath = useTranslatedPath(lang, lang);
     <div class="site-links-wrapper offscreen" data-nav-wrapper id="siteNavLinks">
       <ul class="site-nav__links menu--level-1" id="siteNavMenu">
         <li class="menu-item has-submenu menu-item--level-1">
-          <a href={translatePath("/about-us")} aria-expanded="false" data-umami-event="Site Nav - About us">{t("nav.about")}</a>
+          <a href={translatePath("/about-us")} aria-expanded="false" data-umami-event="Site Nav - Foundation">{t("nav.foundation")}</a>
           <ul class="menu--level-2">
             <li class="menu-item menu-item--level-2">
-              <a href={translatePath("/vision")} data-umami-event="Site Nav - Vision">Vision</a>
-            </li>
-            <li class="menu-item menu-item--level-2">
-              <a href={translatePath("/mission")} data-umami-event="Site Nav - Mission">Mission</a>
-            </li>
-            <li class="menu-item menu-item--level-2">
-              <a href={translatePath("/values")} data-umami-event="Site Nav - Values">Values</a>
+              <a href={translatePath("/about-us")} data-umami-event="Site Nav - About us">{t("nav.about")}</a>
             </li>
             <li class="menu-item menu-item--level-2">
               <a href={translatePath("/policy-and-advocacy")} data-umami-event="Site Nav - Policy & Advocacy">{t("nav.policy")}</a>
             </li>
             <li class="menu-item menu-item--level-2">
               <a href={translatePath("/team")} data-umami-event="Site Nav - Team">{t("nav.team")}</a>
             </li>
+            <li class="menu-item menu-item--level-2">
+              <a href={translatePath("/press")} data-umami-event="Site Nav - Press">{t("nav.media")}</a>
+            </li>
           </ul>
         </li>
         <li class="menu-item has-submenu menu-item--level-1">
-          <a href={translatePath("/financial-services")} aria-expanded="false" data-umami-event="Site Nav - Grants">{t("nav.grants")}</a>
+          <a href={translatePath("/developers")} aria-expanded="false" data-umami-event="Site Nav - Technology">{t("nav.technology")}</a>
           <ul class="menu--level-2">
             <li class="menu-item menu-item--level-2">
-              <a href={translatePath("/financial-services")} data-umami-event="Site Nav - Financial Services">{t("nav.financial-services")}</a>
+              <a href={translatePath("/open-standards")} data-umami-event="Site Nav - Open Standards">{t("nav.overview")}</a>
             </li>
             <li class="menu-item menu-item--level-2">
-              <a href={translatePath("/education")} data-umami-event="Site Nav - Education">{t("nav.education")}</a>
+              <a href={translatePath("/interledger")} data-umami-event="Site Nav - Interledger">{t("nav.interledger")}</a>
             </li>
             <li class="menu-item menu-item--level-2">
-              <a href={translatePath("/ambassadors")} data-umami-event="Site Nav - Ambassadors">{t("nav.ambassadors")}</a>
+              <a href={translatePath("/open-payments")} data-umami-event="Site Nav - Open Payments">{t("nav.open-payments")}</a>
             </li>
-          </ul>
-        </li>
-        <li class="menu-item has-submenu menu-item--level-1">
-          <a href={translatePath("/developers")} aria-expanded="false" data-umami-event="Site Nav - Technology">{t("nav.technology")}</a>
-          <ul class="menu--level-2">
             <li class="menu-item menu-item--level-2">
-              <a href={translatePath("/interledger")} data-umami-event="Site Nav - Interledger">{t("nav.interledger")}</a>
+              <a href={translatePath("/web-monetization")} data-umami-event="Site Nav - Web Monetization">{t("nav.web-monetization")}</a>
             </li>
             <li class="menu-item menu-item--level-2">
-              <a href={translatePath("/open-standards")} data-umami-event="Site Nav - Open Standards">Open Standards</a>
+              <a href={translatePath("/join-network")} data-umami-event="Site Nav - Join network">{t("nav.join")}</a>
             </li>
             <li class="menu-item menu-item--level-2">
               <a href={translatePath("/developers")} data-umami-event="Site Nav - Developers Portal">{t("nav.developers")}</a>
             </li>
-            <li class="menu-item menu-item--level-2">
-              <a href={translatePath("/developers/blog")} data-umami-event="Site Nav - Engineering Blog">{t("nav.tech-blog")}</a>
-            </li>
           </ul>
         </li>
         <li class="menu-item has-submenu menu-item--level-1">
-          <a href={translatePath("/podcast")} aria-expanded="false" data-umami-event="Site Nav - Future | Money">Future | Money</a>
+          <a href={translatePath("/financial-services")} aria-expanded="false" data-umami-event="Site Nav - Grants">{t("nav.grants")}</a>
           <ul class="menu--level-2">
             <li class="menu-item menu-item--level-2">
-              <a href={translatePath("/podcast")} data-umami-event="Site Nav - Podcast">{t("nav.podcast")}</a>
+              <a href={translatePath("/financial-services")} data-umami-event="Site Nav - Financial Services">{t("nav.financial-services")}</a>
+            </li>
+            <li class="menu-item menu-item--level-2">
+              <a href={translatePath("/education")} data-umami-event="Site Nav - Education">{t("nav.education")}</a>
             </li>
             <li class="menu-item menu-item--level-2">
-              <a href={translatePath("/art")} data-umami-event="Site Nav - Art">{t("nav.art")}</a>
+              <a href={translatePath("/ambassadors")} data-umami-event="Site Nav - Ambassadors">{t("nav.ambassadors")}</a>
             </li>
           </ul>
         </li>
         <li class="menu-item has-submenu menu-item--level-1">
-          <a href={translatePath("/blog")} aria-expanded="false" data-umami-event="Site Nav - News">News</a>
+          <a href={translatePath("/blog")} aria-expanded="false" data-umami-event="Site Nav - Content hub">{t("nav.content-hub")}</a>
           <ul class="menu--level-2">
             <li class="menu-item menu-item--level-2">
               <a href={translatePath("/blog")} data-umami-event="Site Nav - Blog">{t("nav.foundation-blog")}</a>
             </li>
             <li class="menu-item menu-item--level-2">
-              <a href={translatePath("/press")} data-umami-event="Site Nav - Press">Press</a>
+              <a href={translatePath("/developers/blog")} data-umami-event="Site Nav - Engineering Blog">{t("nav.tech-blog")}</a>
+            </li>
+            <li class="menu-item menu-item--level-2">
+              <a href={translatePath("/podcast")} data-umami-event="Site Nav - Podcast">{t("nav.podcast")}</a>
+            </li>
+            <li class="menu-item menu-item--level-2">
+              <a href="https://community.interledger.org/" data-umami-event="Site Nav - Community Forem" rel="noopener noreferrer" target="_blank" class="external">{t("nav.community-forem")}</a>
             </li>
           </ul>
         </li>
@@ -114,7 +112,9 @@ const translatePath = useTranslatedPath(lang, lang);
       </div>
     </button>
   </nav>
-  <LanguagePicker lang={lang} />
+  <div class="foundation-language-picker">
+    <LanguagePicker lang={lang} />
+  </div>
 </header>
 
 <style>
@@ -163,6 +163,14 @@ const translatePath = useTranslatedPath(lang, lang);
   color: currentColor;
 }
 
+a.external::after {
+  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18"><path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 3H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M11 1h6m0 0v6m0-6L7 11"/></svg>');
+  display: inline-block;
+  height: 0.75em;
+  width: 0.75em;
+  margin-inline-start: var(--space-2xs);
+}
+
 .switch-link {
   align-self: center;
   justify-self: end;
@@ -291,7 +299,15 @@ a.switch-link:hover {
   }
 }
 
+.foundation-language-picker {
+  display: none;
+}
+
 @media screen and (min-width: 1160px) {
+  .foundation-language-picker {
+    display: block;
+  }
+
   .site-header {
     display: flex;
     align-items: center;