fix: slugify supports better acronyms and preserve non-latin char

package.json

@@ -24,6 +24,7 @@
     "remark-toc": "^9.0.0",
     "satori": "^0.18.3",
     "sharp": "^0.34.5",
+    "slugify": "^1.6.6",
     "tailwindcss": "^4.1.18"
   },
   "devDependencies": {

src/components/Card.astro

@@ -22,7 +22,9 @@ const { title, description, ...props } = data;
       "focus-visible:no-underline focus-visible:underline-offset-0",
     ]}
   >
-    <Heading style={{ viewTransitionName: slugifyStr(title) }}>
+    <Heading
+      style={{ viewTransitionName: slugifyStr(title.replaceAll(".", "-")) }}
+    >
       {title}
     </Heading>
   </a>

src/layouts/PostDetails.astro

@@ -91,7 +91,7 @@ const nextPost =
     data-pagefind-body
   >
     <h1
-      transition:name={slugifyStr(title)}
+      transition:name={slugifyStr(title.replaceAll(".", "-"))}
       class="inline-block text-2xl font-bold text-accent sm:text-3xl"
     >
       {title}

src/utils/slugify.ts

@@ -1,5 +1,23 @@
 import kebabcase from "lodash.kebabcase";
+import slugify from "slugify";
 
-export const slugifyStr = (str: string) => kebabcase(str);
+/**
+ * Check if string contains non-Latin characters
+ */
+const hasNonLatin = (str: string): boolean => /[^\x00-\x7F]/.test(str);
+
+/**
+ * Slugify a string using a hybrid approach:
+ * - For Latin-only strings: use slugify (eg: "E2E Testing" -> "e2e-testing", "TypeScript 5.0" -> "typescript-5.0")
+ * - For strings with non-Latin characters: use lodash.kebabcase (preserves non-Latin chars)
+ */
+export const slugifyStr = (str: string): string => {
+  if (hasNonLatin(str)) {
+    // Preserve non-Latin characters (e.g., Burmese, Chinese, etc.)
+    return kebabcase(str);
+  }
+  // Handle Latin strings with better number/acronym handling
+  return slugify(str, { lower: true });
+};
 
 export const slugifyAll = (arr: string[]) => arr.map(str => slugifyStr(str));