fix: slugify supports better acronyms and preserve non-latin char (#606)

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

Update slugify function to handle better acronyms and preserve non-latin characters.
- uses slugify (simov) for Latin-only strings to fix acronym issue (eg: e2e-testing)
- uses lodash.kebabcase for strings with non-latin characters to preserve them

* fix: remove dots in slugified titles for view transitions

Fixes #584

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": {

pnpm-lock.yaml

@@ -41,6 +41,9 @@ importers:
       sharp:
         specifier: ^0.34.5
         version: 0.34.5
+      slugify:
+        specifier: ^1.6.6
+        version: 1.6.6
       tailwindcss:
         specifier: ^4.1.18
         version: 4.1.18
@@ -2378,6 +2381,10 @@ packages:
     deprecated: 'SECURITY: Multiple vulnerabilities fixed in 8.0.1 (XML injection, path traversal, command injection, protocol injection). Upgrade immediately: npm install sitemap@8.0.1'
     hasBin: true
 
+  slugify@1.6.6:
+    resolution: {integrity: sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==}
+    engines: {node: '>=8.0.0'}
+
   smol-toml@1.6.0:
     resolution: {integrity: sha512-4zemZi0HvTnYwLfrpk/CF9LOd9Lt87kAt50GnqhMpyF9U3poDAP2+iukq2bZsO/ufegbYehBkqINbsWxj4l4cw==}
     engines: {node: '>= 18'}
@@ -5406,6 +5413,8 @@ snapshots:
       arg: 5.0.2
       sax: 1.4.1
 
+  slugify@1.6.6: {}
+
   smol-toml@1.6.0: {}
 
   source-map-js@1.2.1: {}

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));