chores:update the spanish tag-slug to make it more robust in a tag giving 404

Author: leonism

src/i18n/tag-mappings.ts

@@ -0,0 +1,34 @@
+/**
+ * Tag Translations.
+ * Maps common English tag slugs to their localized equivalents in other languages.
+ */
+export const tagMappings: Record<string, Record<string, string>> = {
+  'technology': {
+    ja: 'テクノロジー',
+    es: 'technology'
+  },
+  'ai': {
+    ja: '人工知能',
+    es: 'inteligencia-artificial'
+  },
+  'automation': {
+    ja: '自動化',
+    es: 'automatización'
+  },
+  'sustainability': {
+    ja: '持続可能性',
+    es: 'sostenibilidad'
+  },
+  'business': {
+    ja: 'ビジネス',
+    es: 'negocios'
+  },
+  'security': {
+    ja: 'セキュリティ',
+    es: 'seguridad'
+  },
+  'innovation': {
+    ja: '革新',
+    es: 'innovación'
+  }
+};

src/pages/[lang]/blog/tags/[...page].astro

@@ -1,12 +1,12 @@
 ---
-import { type CollectionEntry } from 'astro:content';
-import Layout from '@/layouts/Layout.astro';
-import BlogCard from '@/components/blog/BlogCard.astro';
-import Pagination from '@/components/common/Pagination.astro';
-import { useTranslations, getLocalizedPath, slugifyTag, isValidLanguage } from '@/i18n/utils';
-import { BlogService } from '@/services/BlogService';
-import { LOCALES, PAGINATION_TAGS_PER_PAGE } from '@/consts';
-import type { GetStaticPaths, Page } from 'astro';
+import { type CollectionEntry } from "astro:content";
+import Layout from "@/layouts/Layout.astro";
+import BlogCard from "@/components/blog/BlogCard.astro";
+import Pagination from "@/components/common/Pagination.astro";
+import { useTranslations, getLocalizedPath, slugifyTag, isValidLanguage } from "@/i18n/utils";
+import { BlogService } from "@/services/BlogService";
+import { LOCALES, PAGINATION_TAGS_PER_PAGE } from "@/consts";
+import type { GetStaticPaths, Page } from "astro";
 
 export const getStaticPaths = (async ({ paginate }) => {
   const languages = Object.keys(LOCALES);
@@ -17,10 +17,10 @@ export const getStaticPaths = (async ({ paginate }) => {
     const posts = await BlogService.getPostsByLocale(locale);
     
     // Group posts by tag
-    const tagsMap = new Map<string, CollectionEntry<'blog'>[]>();
+    const tagsMap = new Map<string, CollectionEntry<"blog">[]>();
     posts.forEach(post => {
       (post.data.tags || []).forEach(tag => {
-        const normalizedTag = tag.trim().normalize('NFC');
+        const normalizedTag = tag.trim().normalize("NFC");
         const existing = tagsMap.get(normalizedTag) || [];
         existing.push(post);
         tagsMap.set(normalizedTag, existing);
@@ -52,11 +52,11 @@ export const getStaticPaths = (async ({ paginate }) => {
       page.url = {
         ...page.url,
         prev: currentPage === 2 
-          ? getLocalizedPath('/blog/tags', locale) 
-          : page.url.prev?.replace(/\/1$/, ''),
+          ? getLocalizedPath("/blog/tags", locale) 
+          : page.url.prev?.replace(/\/1$/, ""),
         next: page.url.next,
-        current: page.url.current.replace(/\/1$/, ''),
-        first: getLocalizedPath('/blog/tags', locale),
+        current: page.url.current.replace(/\/1$/, ""),
+        first: getLocalizedPath("/blog/tags", locale),
       };
 
       return { 
@@ -70,7 +70,17 @@ export const getStaticPaths = (async ({ paginate }) => {
 
     // 2. Individual Tag Page Paths
     const uniqueTags = Array.from(tagsMap.keys());
-    for (const tag of uniqueTags) {
+    const { tagMappings } = await import("@/i18n/tag-mappings");
+    
+    // Add mapped tags as well
+    const allKnownTags = new Set(uniqueTags);
+    Object.keys(tagMappings).forEach(engSlug => {
+        if(tagMappings[engSlug][lang]) {
+            allKnownTags.add(tagMappings[engSlug][lang]);
+        }
+    });
+
+    for (const tag of allKnownTags) {
       const tagSlug = slugifyTag(tag);
       if (tagSlug) {
         // We don't paginate posts within a tag here to keep it simple as per original [tag].astro
@@ -86,34 +96,34 @@ export const getStaticPaths = (async ({ paginate }) => {
 }) satisfies GetStaticPaths;
 
 type Props = 
-  | { isIndex: true; page: Page<{ tag: string; posts: CollectionEntry<'blog'>[]; count: number }>; tag?: undefined }
+  | { isIndex: true; page: Page<{ tag: string; posts: CollectionEntry<"blog">[]; count: number }>; tag?: undefined }
   | { isIndex: false; page?: undefined; tag: string };
 
 const { page, tag, isIndex } = Astro.props as Props;
 const { lang } = Astro.params;
 
 if (!lang || !isValidLanguage(lang)) {
-  return Astro.redirect('/404');
+  return Astro.redirect("/404");
 }
 
 const locale = lang as any;
 const t = useTranslations(locale);
 
 // Prepare data for rendering
-let tagPosts: CollectionEntry<'blog'>[] = [];
+let tagPosts: CollectionEntry<"blog">[] = [];
 if (!isIndex && tag) {
   tagPosts = await BlogService.getPostsByTag(lang, tag);
 }
 ---
 
 <Layout
   title={isIndex 
-    ? `${t('nav.tags')} ${page && page.currentPage > 1 ? `| ${t('pagination.page')} ${page.currentPage}` : ''} | ${t('nav.blog')}`
-    : `#${tag} | ${t('nav.blog')}`
+    ? `${t("nav.tags")} ${page && page.currentPage > 1 ? `| ${t("pagination.page")} ${page.currentPage}` : ""} | ${t("nav.blog")}`
+    : `#${tag} | ${t("nav.blog")}`
   }
   description={isIndex
-    ? (locale === 'es' ? 'Explora todos los temas de nuestro blog por etiquetas.' : locale === 'ja' ? 'タグでブログのすべてのトピックを探索します。' : 'Explore all topics in our blog by tags.')
-    : (locale === 'es' ? `Artículos sobre ${tag}` : locale === 'ja' ? `${tag}に関する記事` : `Articles about ${tag}`)
+    ? (locale === "es" ? "Explora todos los temas de nuestro blog por etiquetas." : locale === "ja" ? "タグでブログのす べてのトピックを探索します。" : "Explore all topics in our blog by tags.")
+    : (locale === "es" ? `Artículos sobre ${tag}` : locale === "ja" ? `${tag}に関する記事` : `Articles about ${tag}`)
   }
   lang={locale}
 >
@@ -122,14 +132,14 @@ if (!isIndex && tag) {
       <>
         <div class="mb-16 text-center">
           <h1 class="mb-4 text-4xl font-bold text-slate-900 dark:text-white sm:text-5xl">
-            {t('nav.tags')}
+            {t("nav.tags")}
           </h1>
           <p class="mx-auto max-w-2xl text-lg text-slate-600 dark:text-slate-400 sm:text-xl">
-            {locale === 'es'
-              ? 'Encuentra artículos por tema y categoría.'
-              : locale === 'ja'
-                ? 'トピックやカテゴリー別に記事を見つける。'
-                : 'Find articles by topic and category.'}
+            {locale === "es"
+              ? "Encuentra artículos por tema y categoría."
+              : locale === "ja"
+                ? "トピックやカテゴリー別に記事を見つける。"
+                : "Find articles by topic and category."}
           </p>
         </div>
 
@@ -152,14 +162,14 @@ if (!isIndex && tag) {
                         </a>
                       </h2>
                       <span class="inline-flex shrink-0 items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
-                        {count} {count === 1 ? t('blog.post') : t('blog.posts')}
+                        {count} {count === 1 ? t("blog.post") : t("blog.posts")}
                       </span>
                     </div>
                     <a 
                       href={getLocalizedPath(`/blog/tags/${slugifyTag(tagName)}`, locale)}
                       class="inline-flex shrink-0 items-center gap-1 text-sm font-medium text-blue-600 transition-colors hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                     >
-                      {t('blog.viewTagArticles')}
+                      {t("blog.viewTagArticles")}
                       <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                         <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                       </svg>
@@ -171,7 +181,7 @@ if (!isIndex && tag) {
                       <BlogCard 
                         post={post} 
                         lang={locale} 
-                        loading={index < 3 ? 'eager' : 'lazy'} 
+                        loading={index < 3 ? "eager" : "lazy"} 
                         class="post-item animate-fade-in"
                       />
                     ))}
@@ -180,36 +190,33 @@ if (!isIndex && tag) {
               ))}
             </div>
 
-            {/* Pagination */}
             {page && page.lastPage > 1 && <Pagination page={page} lang={locale} />}
           </>
         ) : (
           <div class="py-20 text-center">
             <p class="text-xl text-slate-500">
-              {locale === 'es' ? 'No se encontraron etiquetas.' : locale === 'ja' ? 'タグが見つかりません。' : 'No tags found.'}
+              {locale === "es" ? "No se encontraron etiquetas." : locale === "ja" ? "タグが見つかりません。" : "No tags found."}
             </p>
           </div>
         )}
       </>
     ) : (
       <>
-        {/* Header */}
         <div class="mb-12 text-center">
           <h1 class="mb-4 text-4xl font-bold text-gray-900 dark:text-gray-100 sm:text-5xl">
             #{tag}
           </h1>
           <p class="mx-auto max-w-3xl text-xl text-gray-600 dark:text-gray-300">
             {
-              locale === 'es'
+              locale === "es"
                 ? `Artículos etiquetados con #${tag}`
-                : locale === 'ja'
+                : locale === "ja"
                   ? `#${tag} のタグが付いた記事`
                   : `Articles tagged with #${tag}`
             }
           </p>
         </div>
 
-        {/* Posts Grid */}
         {tagPosts.length > 0 ? (
           <div
             id="posts-container"
@@ -219,19 +226,19 @@ if (!isIndex && tag) {
               <BlogCard
                 post={post}
                 lang={lang}
-                loading={index < 3 ? 'eager' : 'lazy'}
+                loading={index < 3 ? "eager" : "lazy"}
                 class="post-item animate-fade-in"
               />
             ))}
           </div>
         ) : (
           <div class="py-12 text-center">
             <p class="text-gray-500 dark:text-gray-400">
-              {locale === 'es'
-                ? 'No se encontraron artículos.'
-                : locale === 'ja'
-                  ? '記事が見つかりません。'
-                  : 'No articles found.'}
+              {locale === "es"
+                ? "No se encontraron artículos."
+                : locale === "ja"
+                  ? "記事が見つかりません。"
+                  : "No articles found."}
             </p>
           </div>
         )}

src/services/BlogService.ts

@@ -126,18 +126,31 @@ export class BlogService {
   ): Promise<CollectionEntry<'blog'>[]> {
     const allPosts = await BlogService.getPostsByLocale(lang);
     const { slugifyTag } = await import('@/i18n/utils');
-    const normalizedTag = tagSlugOrName.trim().normalize('NFC').toLowerCase();
+    const { tagMappings } = await import('@/i18n/tag-mappings');
 
-    return allPosts.filter((post) =>
+    let normalizedTag = tagSlugOrName.trim().normalize('NFC').toLowerCase();
+
+    // Helper to find posts
+    const findPosts = (tag: string) => allPosts.filter((post) =>
       (post.data.tags || []).some((t) => {
         const normalizedT = t.normalize('NFC');
         const sTag = slugifyTag(normalizedT).toLowerCase();
         return (
-          sTag === normalizedTag || 
-          normalizedT.toLowerCase() === normalizedTag
+          sTag === tag || 
+          normalizedT.toLowerCase() === tag
         );
       }),
     );
+
+    let posts = findPosts(normalizedTag);
+
+    // If no posts found and there is a mapping, try the mapped tag
+    if (posts.length === 0 && tagMappings[normalizedTag] && tagMappings[normalizedTag][lang]) {
+        const mappedTag = tagMappings[normalizedTag][lang].toLowerCase();
+        posts = findPosts(mappedTag);
+    }
+    
+    return posts;
   }
 
   /**

test-slugify.ts

@@ -0,0 +1,13 @@
+function slugifyTag(tag: string) {
+  return tag
+    .toLowerCase()
+    .normalize('NFD') // Decompose combined characters
+    .replace(/[\u0300-\u036f]/g, '') // Remove Latin diacritic marks
+    .normalize('NFC') // Re-combine other marks (like Japanese dakuten)
+    .replace(/[^\p{L}\p{N}]+/gu, '-') // Replace non-alphanumeric (Unicode-aware) with hyphens
+    .replace(/-+/g, '-') // Replace multiple hyphens
+    .replace(/^-+/, '') // Remove leading hyphens
+    .replace(/-+$/, '') // Remove trailing hyphens
+    .trim();
+}
+console.log("Slug:", slugifyTag("テクノロジー"));