Slug Navigation

Overview

By default, the app generates a slug property for every data entry mapped in the schema. Slugs are derived from each entry's title (via titlePath) and produce clean, human-readable URLs like /technologies/artificial-intelligence instead of /technologies/tech-0042.

Slugs are generated during the data join phase and are available on every entry alongside id.

How It Works

When data is loaded, the join layer runs a slugification pass over all schema objects:

1. For each schema object, it iterates over the data entries at src
2. If an entry doesn't already have a slug property, one is generated from the value at titlePath
3. The slug is lowercased and URL-safe (e.g. "Artificial Intelligence" becomes "artificial-intelligence")

// Before slugification
{ id: "tech-0042", title: "Artificial Intelligence", ... }

// After slugification
{ id: "tech-0042", title: "Artificial Intelligence", slug: "artificial-intelligence", ... }

If an entry already has a slug property in the source data, it is preserved as-is.

Entity Matching

Throughout the app, entity selection (clicking a card, navigating via URL, highlighting in the radar) resolves by slug first, falling back to id. This means:

• URLs use the slug when available: /technologies/artificial-intelligence
• If no slug matches, the app falls back to matching by id
• This ensures backward compatibility with existing bookmarks or links that use raw IDs

Components that use this matching logic include cards, list items, pagination, the radar visualization, and the panel view.

Configuration

Slug generation is controlled by the slugify property at the schema root level:

const schema = {
  slugify: true, // default — generates slugs for all entries
  objects: {
    // ...
  },
};

Disabling Slugs

Set slugify: false to disable auto-generation entirely:

const schema = {
  slugify: false,
  objects: {
    // entries keep their original data, navigation uses id only
  },
};

This is useful when your IDs are already human-readable or when you need full control over URL identifiers.

Providing Custom Slugs

If your data already includes a slug field, the auto-generation respects it:

{
  "allTechnologies": [
    { "id": "tech-0042", "title": "Artificial Intelligence", "slug": "ai" }
  ]
}

In this case, the URL would use /technologies/ai rather than the auto-generated /technologies/artificial-intelligence.

URL Structure

Slug navigation integrates with both routing modes:

Dynamic mode:

/technologies/artificial-intelligence
/~pt/technologies/inteligencia-artificial
/@usa/technologies/artificial-intelligence

Static mode:

/?page=technologies&id=artificial-intelligence

The id parameter in the URL can be either a slug or an actual id — the app resolves it transparently.