Skip to main content

​
Slug Utilities

The slug utilities provide URL-safe string generation for creating SEO-friendly paths from Guatemalan words and phrases.

​
slugify

Converts a string into a URL-safe slug by removing accents, special characters, and normalizing whitespace. 
function slugify(str: string): string

​
Parameters

​
str
string
required
The string to convert into a slug. Can contain accents, spaces, and special characters.

​
Returns

​
slug
string
URL-safe slug with:
  • Accents and diacritics removed (NFD normalization)
  • Lowercase characters only
  • Spaces converted to hyphens
  • Special characters removed
  • Leading/trailing whitespace trimmed
  • Multiple spaces collapsed to single hyphens

​
Algorithm Steps

  1. Normalize - Uses Unicode NFD (Normalization Form Decomposition) to separate base characters from diacritics
  2. Remove Diacritics - Removes all diacritic marks using regex /\p{Diacritic}/gu
  3. Lowercase - Converts all characters to lowercase
  4. Remove Special Characters - Keeps only alphanumeric characters, spaces, and hyphens
  5. Trim - Removes leading and trailing whitespace
  6. Collapse Spaces - Replaces multiple spaces with single hyphens

​
Examples

import { slugify } from '@/utils/slug';

slugify('Chucho');
// "chucho"

slugify('A huevo');
// "a-huevo"

slugify('Está cabrón');
// "esta-cabron"

​
Real-World Usage

---
import { slugify } from '@/utils/slug';

const words = ['Chucho', 'A huevo', 'Chapín'];
const prefix = '/es';
---

<div>
  {words.map(word => (
    <a href={`${prefix}/palabras/${slugify(word)}/`}>
      {word}
    </a>
  ))}
</div>

<!-- Output:
  /es/palabras/chucho/
  /es/palabras/a-huevo/
  /es/palabras/chapin/
-->

​
Technical Details

The function uses NFD (Normalization Form Decomposition) to separate base characters from combining diacritical marks.For example:
  • "á" becomes "a" + combining acute accent
  • "ü" becomes "u" + combining diaeresis
This allows the subsequent regex to remove only the diacritical marks while preserving the base characters.
The regex /\p{Diacritic}/gu uses:
  • \p{Diacritic} - Unicode property escape matching all diacritical marks
  • g - Global flag to replace all occurrences
  • u - Unicode flag for full Unicode support
The second regex /[^a-z0-9\s-]/g removes:
  • Everything except lowercase letters (a-z)
  • Digits (0-9)
  • Whitespace (\s)
  • Hyphens (-)
The function uses:
  • String.prototype.normalize() - Supported in all modern browsers (IE11+)
  • Unicode property escapes (\p{}) - Requires ES2018+
For older environments, consider a polyfill or alternative normalization approach.
While this is the primary slug utility, slugs are also used in:
  • getLocalizedPath() from @/utils/i18n - for adding language prefixes
  • Astro’s built-in entry.slug - automatically generated from content collection file names
  • setupShareImage() from @/utils/shareImage - uses slugs for image filenames

​
Type Definition

/**
 * Converts a string into a URL-safe slug
 * @param str - String to slugify
 * @returns URL-safe slug with hyphens, lowercase, no accents
 * @example
 * slugify('Está cabrón') // "esta-cabron"
 */
export function slugify(str: string): string;

Build docs developers (and LLMs) love

Get started for freeTalk to us