diff --git a/astro.config.mjs b/astro.config.mjs index 3dbeff1d..8b804816 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -9,6 +9,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', diff --git a/public/img/blog/2024-08-13/2p-transfer.png b/public/img/blog/2024-08-13/2p-transfer.png new file mode 100644 index 00000000..d4f97be4 Binary files /dev/null and b/public/img/blog/2024-08-13/2p-transfer.png differ diff --git a/src/components/Header.astro b/src/components/Header.astro index 9cc06609..c0d215ff 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,8 +1,13 @@ --- +import type { Props } from '@astrojs/starlight/props' 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) ---
@@ -21,8 +26,9 @@ import DevelopersLogo from './logos/DevelopersLogo.astro'
- - + +
+
@@ -91,10 +97,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); + } diff --git a/src/components/LanguagePicker.astro b/src/components/LanguagePicker.astro new file mode 100644 index 00000000..0b32a3e4 --- /dev/null +++ b/src/components/LanguagePicker.astro @@ -0,0 +1,197 @@ +--- +import { defaultLang } from '../i18n/ui' +import { useTranslatedPath } from '../i18n/utils' +const { lang, className } = Astro.props +const path = Astro.url.pathname +const translatePath = useTranslatedPath(defaultLang, lang) +--- + +
+ + + + + + +
+ + + + diff --git a/src/components/blog/BlogIndex.astro b/src/components/blog/BlogIndex.astro index 3d8aa5e4..e04d0132 100644 --- a/src/components/blog/BlogIndex.astro +++ b/src/components/blog/BlogIndex.astro @@ -3,7 +3,8 @@ import { createExcerpt } from '../../utils/create-excerpt' import TagFilter from './TagFilter.astro' import Pagination from './Pagination.astro' import type { CollectionEntry } from 'astro:content' - +import { useTranslations } from '../../i18n/utils' +import { languages, defaultLang } from '../../i18n/ui' interface BreadcrumbItem { name: string href: string @@ -13,6 +14,7 @@ interface BreadcrumbItem { interface Props { title: string posts: CollectionEntry<'blog'>[] + lang: keyof typeof languages breadcrumbs?: BreadcrumbItem[] allTags?: string[] selectedTag?: string @@ -31,6 +33,7 @@ interface Props { const { title, posts, + lang, breadcrumbs = [], allTags = [], selectedTag, @@ -38,6 +41,8 @@ const { showPagination = false, paginationProps } = Astro.props + +const t = useTranslations(lang) ---
@@ -70,8 +75,13 @@ const { }

{title}

- -

Check out Foundation updates

+ +

{t('blog.check-updates')}

Ernie holding an envelope
- {showTagFilter && } + { + showTagFilter && ( + + ) + }
    { posts.map((blogPostEntry) => { @@ -92,26 +106,16 @@ const { > {blogPostEntry.data.date.toDateString()} - {blogPostEntry.data.lang ? ( -
    - - {blogPostEntry.data.title} - - - ES - -
    - ) : ( - - {blogPostEntry.data.title} - - )} + + {blogPostEntry.data.title} +

    {blogPostEntry.data.description ? blogPostEntry.data.description @@ -244,12 +248,6 @@ const { text-decoration-color: currentColor; } - .postlist-es { - display: flex; - align-items: start; - gap: var(--space-2xs); - } - .postlist-lang { border: 1.5px solid; padding-inline: 4px; diff --git a/src/components/blog/CommunityLinks.astro b/src/components/blog/CommunityLinks.astro index 2973483c..9eda131d 100644 --- a/src/components/blog/CommunityLinks.astro +++ b/src/components/blog/CommunityLinks.astro @@ -1,29 +1,56 @@ --- - +const lang = Astro.props.lang || 'en' ---

    -

    - As we are open source, you can easily check our work on GitHub. If the work mentioned here inspired you, we welcome your contributions. You - can join our community slack or participate in the next community call, which takes place each second Wednesday of the month. -

    - -

    - If you want to stay updated with all open opportunities and news from the - Interledger Foundation, you can subscribe to our newsletter. -

    +{ + lang === 'es' ? ( + <> +

    + En Interledger somos de código abierto, así qué puedes verificar + fácilmente nuestro trabajo en + GitHub. Si este blogpost y + las tecnologías aquí mencionadas te inspiraron, agradecemos tus + contribuciones. Puedes unirte a nuestra{' '} + + Comunidad en Slack + {' '} + o participar en la próxima llamada de la{' '} + Comunidad Interledger, + que tiene lugar el segundo miércoles de cada mes. +

    +

    + Si deseas mantenerte actualizado con todas las oportunidades y noticias + de la Fundación Interledger, puedes suscribirte a{' '} + nuestro boletín. +

    + + ) : ( + <> +

    + As we are open source, you can easily check our work on{' '} + GitHub. If the work + mentioned here inspired you, we welcome your contributions. You can join + our{' '} + + community slack + {' '} + or participate in the next{' '} + + community call + + , which takes place each second Wednesday of the month. +

    +

    + If you want to stay updated with all open opportunities and news from + the Interledger Foundation, you can subscribe to our{' '} + newsletter. +

    + + ) +} diff --git a/src/styles/pages.css b/src/styles/pages.css index 47892d84..c78018d5 100644 --- a/src/styles/pages.css +++ b/src/styles/pages.css @@ -1,6 +1,6 @@ /* Webfont import */ @font-face { - font-family: "Titillium"; + font-family: "Titillium Web"; src: url("/developers/fonts/titilliumweb-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; @@ -8,7 +8,7 @@ } @font-face { - font-family: "Titillium"; + font-family: "Titillium Web"; src: url("/developers/fonts/titilliumweb-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; @@ -16,7 +16,7 @@ } @font-face { - font-family: "Titillium"; + font-family: "Titillium Web"; src: url("/developers/fonts/titilliumweb-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; @@ -24,7 +24,7 @@ } @font-face { - font-family: "Titillium"; + font-family: "Titillium Web"; src: url("/developers/fonts/titilliumweb-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; @@ -32,7 +32,7 @@ } @font-face { - font-family: "Titillium"; + font-family: "Titillium Web"; src: url("/developers/fonts/titilliumweb-extralight.woff2") format("woff2"); font-weight: 200; font-style: normal; @@ -80,6 +80,7 @@ --color-primary-bg-fallback: rgba(7, 121, 114, 0.1); --color-primary-bg: oklch(51.95% 0.089 187.7 / 0.1); + --color-nav-hover: #eee; --color-header-bg: var(--color-white); --color-header-accent: #eee; --color-table-stripe: #f6f7f9; diff --git a/src/utils/tag-url.js b/src/utils/tag-url.js index e747fd1f..72ee9884 100644 --- a/src/utils/tag-url.js +++ b/src/utils/tag-url.js @@ -1,11 +1,14 @@ +import { defaultLang } from '../i18n/ui' /** * Converts a tag name to a URL-friendly slug and returns the full tag URL path * @param {string} tag - The tag name * @returns {string} The tag URL path (e.g., "/developers/blog/tag/my-tag") */ -export function getTagUrl(tag) { +export function getTagUrl(tag, lang) { const slug = tag.toLowerCase().replace(/\s+/g, '-') - return `/developers/blog/tag/${slug}` + return lang === defaultLang + ? `/developers/blog/tag/${slug}` + : `/developers/${lang}/blog/tag/${slug}` } /**