integrate tag filter component into Spanish blog page

Author: Anca2022

eslint.config.js

@@ -14,7 +14,14 @@ export default defineConfig([
   },
   tseslint.configs.recommended,
   eslintPluginAstro.configs.recommended,
-  globalIgnores(['dist', '.astro', 'node_modules', 'public', '**/*.min.js']),
+  globalIgnores([
+    'dist',
+    '.astro',
+    'node_modules',
+    'public',
+    '**/*.min.js',
+    'cms'
+  ]),
   {
     rules: {
       'no-console': 'error',

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,13 +33,16 @@ interface Props {
 const {
   title,
   posts,
+  lang,
   breadcrumbs = [],
   allTags = [],
   selectedTag,
   showTagFilter = false,
   showPagination = false,
   paginationProps
 } = Astro.props
+
+const t = useTranslations(lang)
 ---
 
 <main>
@@ -70,16 +75,25 @@ const {
     }
     <header>
       <h1>{title}</h1>
-      <a class="cta__blog" href="/blog">
-        <p>Check out Foundation updates</p>
+      <a
+        class="cta__blog"
+        href={lang == defaultLang
+          ? 'https://interledger.org/blog'
+          : `https://interledger.org/${lang}/blog`}
+      >
+        <p>{t('blog.check-updates')}</p>
         <img
           src="/developers/img/ernie-purple.svg"
           alt="Ernie holding an envelope"
           aria-hidden="true"
         />
       </a>
     </header>
-    {showTagFilter && <TagFilter allTags={allTags} selectedTag={selectedTag} />}
+    {
+      showTagFilter && (
+        <TagFilter lang={lang} allTags={allTags} selectedTag={selectedTag} />
+      )
+    }
     <ol class="postlist">
       {
         posts.map((blogPostEntry) => {
@@ -92,26 +106,16 @@ const {
               >
                 {blogPostEntry.data.date.toDateString()}
               </time>
-              {blogPostEntry.data.lang ? (
-                <div class="postlist-es">
-                  <a
-                    href={`/developers/blog/${blogPostEntry.id}`}
-                    class="postlist-link heading--6"
-                  >
-                    {blogPostEntry.data.title}
-                  </a>
-                  <a class="postlist-lang" href="/developers/blog/es">
-                    ES
-                  </a>
-                </div>
-              ) : (
-                <a
-                  href={`/developers/blog/${blogPostEntry.id}`}
-                  class="postlist-link heading--6"
-                >
-                  {blogPostEntry.data.title}
-                </a>
-              )}
+              <a
+                href={
+                  lang == defaultLang
+                    ? `/developers/blog/${blogPostEntry.id}`
+                    : `/developers/${lang}/blog/${blogPostEntry.id}`
+                }
+                class="postlist-link heading--6"
+              >
+                {blogPostEntry.data.title}
+              </a>
               <p>
                 {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;

src/components/blog/TagFilter.astro

@@ -1,32 +1,38 @@
 ---
-import { getTagUrl } from '../../utils/tag-url'
+import { useTranslations } from '../../i18n/utils'
+import { languages, defaultLang } from '../../i18n/ui'
+import { getTagSlug, getTagUrl } from '../../utils/tag-url'
 
 interface Props {
+  lang: keyof typeof languages
   allTags: string[]
   selectedTag?: string
 }
 
-const { allTags, selectedTag } = Astro.props
+const { lang, allTags, selectedTag } = Astro.props
+const t = useTranslations(lang)
 ---
 
 <div class="tag-filter">
-  <div class="tag-filter-label">Filter by tag:</div>
+  <div class="tag-filter-label">{t('blog.filter')}:</div>
   <div class="tag-filter-buttons">
     <a
-      href="/developers/blog"
+      href={lang === defaultLang
+        ? '/developers/blog'
+        : `/developers/${lang}/blog`}
       class:list={['tag-button', { active: !selectedTag }]}
       data-umami-event="Blog tag filter - All"
     >
-      All
+      {t('tag.all')}
     </a>
     {
       allTags.map((tag) => (
         <a
-          href={getTagUrl(tag)}
+          href={getTagUrl(tag, lang)}
           class:list={['tag-button', { active: selectedTag === tag }]}
           data-umami-event={`Blog tag filter - ${tag}`}
         >
-          {tag}
+          {t(`tag.${getTagSlug(tag)}`) ?? t(`tag.other`)}
         </a>
       ))
     }

src/content/blog/2025-03-12-breakpoint-it-work-week.mdx

@@ -8,7 +8,8 @@ authors:
   - Timea Nagy
 author_urls:
   - https://www.linkedin.com/in/nagy-timea-35483024
-tags: []
+tags:
+  - Interledger Protocol
 ---
 
 After shaking off the January blues, the Interledger Engineering Managers and Product Managers gathered with the BreakPoint IT team for a productive work week in Cluj-Napoca, Romania.

src/content/blog/es/2025-03-12-breakpoint-it-work-week.mdx

@@ -9,7 +9,7 @@ authors:
 author_urls:
   - https://www.linkedin.com/in/nagy-timea-35483024
 tags:
-  - Interledger
+  - Interledger Protocol
 ---
 
 Después de dejar atrás la melancolía de enero, los Gerentes de Ingeniería y Gerentes de Producto de Interledger se reunieron con el equipo de BreakPoint IT para una semana de trabajo productiva en Cluj-Napoca, Rumanía.  

src/i18n/ui.ts

@@ -57,7 +57,18 @@ export const ui: LanguageUi = {
     'footer.terms': 'Terms of Service',
     'footer.privacy': 'Privacy Policy',
     'footer.contact': 'Contact Us',
-    'blog.written-by': 'Written by'
+    'blog.tech-blog-title': 'Engineering Blog',
+    'blog.check-updates': 'Check out Foundation updates',
+    'blog.filter': 'Filter by tag',
+    'blog.written-by': 'Written by',
+    'tag.all': 'All',
+    'tag.interledger-protocol': 'Interledger Protocol',
+    'tag.open-payments': 'Open Payments',
+    'tag.rafiki': 'Rafiki',
+    'tag.releases': 'Releases',
+    'tag.updates': 'Updates',
+    'tag.web-monetization': 'Web Monetization',
+    'tag.other': 'Other'
   },
   es: {
     'nav.foundation': 'Fundación',
@@ -96,6 +107,17 @@ export const ui: LanguageUi = {
     'footer.terms': 'Condiciones del servicio',
     'footer.privacy': 'Política de privacidad',
     'footer.contact': 'Contáctanos',
-    'blog.written-by': 'Escrito por'
+    'blog.tech-blog-title': 'Blog de Ingeniería',
+    'blog.check-updates': 'Actualizaciones de la Fundación',
+    'blog.filter': 'Filtre por etiquetas',
+    'blog.written-by': 'Escrito por',
+    'tag.all': 'Todas',
+    'tag.interledger-protocol': 'Interledger Protocol',
+    'tag.open-payments': 'Open Payments',
+    'tag.rafiki': 'Rafiki',
+    'tag.releases': 'Lanzamientos',
+    'tag.updates': 'Actualizaciones',
+    'tag.web-monetization': 'Web Monetization',
+    'tag.other': 'Otros'
   }
 } as const

src/layouts/BlogLayout.astro

@@ -62,7 +62,7 @@ const rawHTMLString = `This article was originally published at <a href=${frontm
             href={translatePath('/developers/blog')}
             data-umami-event="Devs breadcrumb - Blog"
           >
-            <span itemprop="name">{t('nav.tech-blog')}</span></a
+            <span itemprop="name">{t('blog.tech-blog-title')}</span></a
           >
           <meta itemprop="position" content="2" />
         </li>