Sj/translation infrastructure

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",

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/FoundationHeader.astro

@@ -1,103 +1,109 @@
 ---
 import FoundationLogo from "../logos/FoundationLogo.astro";
+import { getLangFromUrl, useTranslations, useTranslatedPath } from "../../i18n/utils";
+import LanguagePicker from "../LanguagePicker.astro"
+
+const lang = getLangFromUrl(Astro.url); 
+const t = useTranslations(lang); 
+const translatePath = useTranslatedPath(lang, lang);
 ---
 <header class="site-header" role="banner">
   <nav class="site-nav" role="navigation" aria-labelledby="block-interledger-mainnavigation-menu" id="block-interledger-mainnavigation">
     <h2 class="visually-hidden" id="block-interledger-mainnavigation-menu">Main navigation</h2>
-    <a href="/" class="site-logo" aria-label="Interledger Foundation" data-umami-event="Site Nav - Logo">
+    <a href={translatePath("/")} class="site-logo" aria-label="Interledger Foundation" data-umami-event="Site Nav - Logo">
       <FoundationLogo />
     </a>
     <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="/vision" aria-expanded="false" data-umami-event="Site Nav - About us">About us</a>
+          <a href={translatePath("/about-us")} aria-expanded="false" data-umami-event="Site Nav - About us">{t("nav.about")}</a>
           <ul class="menu--level-2">
             <li class="menu-item menu-item--level-2">
-              <a href="/vision" data-umami-event="Site Nav - Vision">Vision</a>
+              <a href={translatePath("/vision")} data-umami-event="Site Nav - Vision">Vision</a>
             </li>
             <li class="menu-item menu-item--level-2">
-              <a href="/mission" data-umami-event="Site Nav - Mission">Mission</a>
+              <a href={translatePath("/mission")} data-umami-event="Site Nav - Mission">Mission</a>
             </li>
             <li class="menu-item menu-item--level-2">
-              <a href="/values" data-umami-event="Site Nav - Values">Values</a>
+              <a href={translatePath("/values")} data-umami-event="Site Nav - Values">Values</a>
             </li>
             <li class="menu-item menu-item--level-2">
-              <a href="/policy-and-advocacy" data-umami-event="Site Nav - Policy & Advocacy">Policy & Advocacy</a>
+              <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="/team" data-umami-event="Site Nav - Team">Team</a>
+              <a href={translatePath("/team")} data-umami-event="Site Nav - Team">{t("nav.team")}</a>
             </li>
           </ul>
         </li>
         <li class="menu-item has-submenu menu-item--level-1">
-          <a href="/financial-services" aria-expanded="false" data-umami-event="Site Nav - Grants">Grants</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="/financial-services" data-umami-event="Site Nav - Financial Services">Financial Services</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="/education" data-umami-event="Site Nav - Education">Education</a>
+              <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="/ambassadors" data-umami-event="Site Nav - Ambassadors">Ambassadors</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="/developers" aria-expanded="false" data-umami-event="Site Nav - Technology">Technology</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="/interledger" data-umami-event="Site Nav - Interledger">Interledger</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="/open-standards" data-umami-event="Site Nav - Open Standards">Open Standards</a>
+              <a href={translatePath("/open-standards")} data-umami-event="Site Nav - Open Standards">Open Standards</a>
             </li>
             <li class="menu-item menu-item--level-2">
-              <a href="/developers" data-umami-event="Site Nav - Developers Portal">Developers Portal</a>
+              <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="/developers/blog" data-umami-event="Site Nav - Engineering Blog">Engineering Blog</a>
+              <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="/podcast" aria-expanded="false" data-umami-event="Site Nav - Future | Money">Future | Money</a>
+          <a href={translatePath("/podcast")} aria-expanded="false" data-umami-event="Site Nav - Future | Money">Future | Money</a>
           <ul class="menu--level-2">
             <li class="menu-item menu-item--level-2">
-              <a href="/podcast" data-umami-event="Site Nav - Podcast">Podcast</a>
+              <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="/art" data-umami-event="Site Nav - Art">Art</a>
+              <a href={translatePath("/art")} data-umami-event="Site Nav - Art">{t("nav.art")}</a>
             </li>
           </ul>
         </li>
         <li class="menu-item has-submenu menu-item--level-1">
-          <a href="/blog" aria-expanded="false" data-umami-event="Site Nav - News">News</a>
+          <a href={translatePath("/blog")} aria-expanded="false" data-umami-event="Site Nav - News">News</a>
           <ul class="menu--level-2">
             <li class="menu-item menu-item--level-2">
-              <a href="/blog" data-umami-event="Site Nav - Blog">Blog</a>
+              <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="/press" data-umami-event="Site Nav - Press">Press</a>
+              <a href={translatePath("/press")} data-umami-event="Site Nav - Press">Press</a>
             </li>
           </ul>
         </li>
         <li class="menu-item has-submenu menu-item--level-1">
-          <a href="/get-involved" aria-expanded="false" data-umami-event="Site Nav - Participate">Participate</a>
+          <a href={translatePath("/get-involved")} aria-expanded="false" data-umami-event="Site Nav - Participate">{t("nav.participate")}</a>
           <ul class="menu--level-2">
             <li class="menu-item menu-item--level-2">
-              <a href="/get-involved" data-umami-event="Site Nav - Get involved">Get involved</a>
+              <a href={translatePath("/get-involved")} data-umami-event="Site Nav - Get involved">{t("nav.get-involved")}</a>
             </li>
             <li class="menu-item menu-item--level-2">
-              <a href="/events" data-umami-event="Site Nav - Events">Events</a>
+              <a href={translatePath("/events")} data-umami-event="Site Nav - Events">{t("nav.events")}</a>
             </li>
             <li class="menu-item menu-item--level-2">
-              <a href="/participation-guidelines" data-umami-event="Site Nav - Guidelines">Guidelines</a>
+              <a href={translatePath("/participation-guidelines")} data-umami-event="Site Nav - Guidelines">{t("nav.guidelines")}</a>
             </li>
           </ul>
         </li>
       </ul>
-      <a class="switch-link" href="/summit" data-umami-event="Site Nav - Summit Link">Interledger Summit</a>
+      <a class="switch-link" href={translatePath("/summit")} data-umami-event="Site Nav - Summit Link">{t("nav.summit")}</a>
     </div>
     <button type="button" class="site-nav__toggle" aria-controls="siteNavMenu" aria-label="Toggle Menu" title="Toggle Menu" id="siteNavToggle">
       <div id="menuIcon" class="menu-icon">
@@ -108,6 +114,7 @@ import FoundationLogo from "../logos/FoundationLogo.astro";
       </div>
     </button>
   </nav>
+  <LanguagePicker lang={lang} />
 </header>
 
 <style>
@@ -175,17 +182,17 @@ a.switch-link:hover {
   }
 }
 
-@media screen and (min-width: 480px) and (max-width: 1059px) {
+@media screen and (min-width: 480px) and (max-width: 1159px) {
   .site-links-wrapper {
     width: max-content;
   }
 }
 
-@media screen and (max-width: 1059px) {
+@media screen and (max-width: 1159px) {
   .site-nav {
     height: var(--site-header-height);
   }
-  
+
   .site-links-wrapper {
     position: absolute;
     background-color: var(--color-header-bg);
@@ -284,12 +291,17 @@ a.switch-link:hover {
   }
 }
 
-@media screen and (min-width: 1060px) {
+@media screen and (min-width: 1160px) {
+  .site-header {
+    display: flex;
+    align-items: center;
+  }
   .site-nav {
     display: grid;
     grid-template-columns: auto 1fr 1fr;
     grid-template-areas: "logo links links";
     gap: var(--space-s);
+    flex: 1;
   }
 
   .site-logo {
@@ -348,6 +360,7 @@ a.switch-link:hover {
     display: none;
   }
 }
+
 </style>
 
 <script>

src/content.config.ts

@@ -9,6 +9,7 @@ const blogCollection = defineCollection({
     title: z.string(),
     description: z.string(),
     slug: z.string(),
+    lang: z.string(),
     date: z.date(),
     image: z.string().optional(),
     tags: z.array(z.string()),

src/content/blog/2018-01-29-simplifying-interledger-the-graveyard-of-possible-protocol-features.md

@@ -3,6 +3,7 @@ title: "Simplifying Interledger: The Graveyard of Possible Protocol Features"
 description: As the development of the Interledger Protocol (ILP) nears completion, I thought we should take a moment to remember some of the many core protocol features we’ve killed off along the way.
 date: 2018-01-29
 slug: simplifying-interledger-the-graveyard-of-possible-protocol-features
+lang: en
 authors:
   - Evan Schwartz
 author_urls:

src/content/blog/2018-10-03-interledger-how-to-interconnect-all-blockchains-and-value-networks.md

@@ -3,6 +3,7 @@ title: "Interledger: How to Interconnect All Blockchains and Value Networks"
 description: "Interledger was born out of a project to build a blockchain-agnostic smart contracts platform. A key challenge was neutrality: how could a decentralized app buy resources like storage and computing, without being tied to a specific blockchain?"
 date: 2018-10-03
 slug: interledger-how-to-interconnect-all-blockchains-and-value-networks
+lang: en
 authors:
   - Evan Schwartz
 author_urls:

src/content/blog/2019-01-23-thoughts-on-scaling-interledger-connectors.md

@@ -3,6 +3,7 @@ title: Thoughts on Scaling Interledger Connectors
 description: Streaming payments mean that Interledger connectors need to process huge volumes of Interledger packets, but the current reference implementation is hard to run at scale.
 date: 2019-01-23
 slug: thoughts-on-scaling-interledger-connectors
+lang: en
 authors:
   - Evan Schwartz
 author_urls:

src/content/blog/2024-04-10-the-telemetry-tale.md

@@ -3,6 +3,7 @@ title: "The Telemetry Tale: A Journey into the Metrics of Interledger"
 description: When simple metrics are paired with complex cloud solutions and important privacy considerations, the implementation process becomes significantly more complicated.
 date: 2024-04-10
 slug: the-telemetry-tale
+lang: en
 authors:
   - Sarah Jones
 author_urls:

src/content/blog/2024-07-09-simple-open-payments-guide.md

@@ -3,6 +3,7 @@ title: "A Simple Guide to the Open Payments Standard"
 description: Learn how the Open Payments standard makes online payments easier and more accessible for everyone.
 date: 2024-07-09
 slug: simple-open-payments-guide
+lang: en
 authors:
   - Sarah Jones
 author_urls:

src/content/blog/2024-07-30-open-payments-cinderella-story.mdx

@@ -3,6 +3,7 @@ title: "Open Payments: The Cinderella Story of Finding a Fitting Authorization M
 description: A breakdown of the unique needs that an authorization method for Open Payments needs to be able to fulfill.
 date: 2024-07-30
 slug: open-payments-cinderella-story
+lang: en
 authors:
   - Nathan Lie
 author_urls:

src/content/blog/2024-08-13-interledger-universe.mdx

@@ -4,6 +4,7 @@ description: "Or: “What the heck are all those products and protocols?”"
 ogImageUrl: /developers/img/blog/2024-08-13/og-image.png
 date: 2024-08-13
 slug: interledger-universe
+lang: en
 authors:
   - Sabine Schaller
 author_urls:

src/content/blog/2024-09-06-integration-tests.mdx

@@ -3,6 +3,7 @@ title: "Leveling Up Rafiki Testing: Shifting from Manual to Automated"
 description: "How we automated our manual payment flow tests."
 date: 2024-09-06
 slug: integration-tests
+lang: en
 authors:
   - Blair Currey
 author_urls:

src/content/blog/2024-09-23-rafiki-code-architecture.mdx

@@ -3,6 +3,7 @@ title: "Breaking Down Rafiki: What Makes Our Friend Tick"
 description: "A low-level introduction to the software packages that comprise Rafiki."
 date: 2024-09-23
 slug: rafiki-low-level-intro
+lang: en
 authors:
   - Nathan Lie
 author_urls:

src/content/blog/2024-10-11-where-did-rafiki-money-go.mdx

@@ -3,6 +3,7 @@ title: "Where did rafiki.money go?"
 description: "Or “The need for rebranding when something confuses people.”"
 date: 2024-10-11
 slug: where-did-rafiki-money-go
+lang: en
 authors:
   - Timea Nagy
 author_urls:

src/content/blog/2024-10-25-rafikis-first-security-audit.mdx

@@ -3,6 +3,7 @@ title: "Rafiki's First Security Audit"
 description: "Takeaways from Rafiki's 2024 security audit."
 date: 2024-10-25
 slug: rafikis-first-security-audit
+lang: en
 authors:
   - Max Kurapov
 author_urls: