Library Routing Documentation

Overview

This Nuxt application implements a hierarchical slug-based routing system for the library with three levels:

1. Workspaces
2. Folders (within workspaces)
3. Decks (within folders)

URL Structure

• Workspace: /library/[workspace-slug]
• Folder: /library/[workspace-slug]/[folder-slug]
• Deck: /library/[workspace-slug]/[folder-slug]/[deck-slug]

Key Components

1. Slug Generation (slugify.ts)

• slugify(): Transforms names into URL-friendly slugs by:
  • Trimming whitespace
  • Converting to lowercase
  • Removing non-alphanumeric characters
  • Replacing spaces with hyphens
  • Removing consecutive hyphens
• Helper functions generate appropriate URLs:
  • workspaceLink(): Creates workspace URLs
  • folderLink(): Creates folder URLs
  • deckLink(): Creates deck URLs

2. Route Resolution (useRouteSlugs.ts)

• Extracts slugs from current route parameters
• Maps slugs back to actual data objects by matching slugified names
• Returns computed references to the current workspace, folder, and deck
• Handles server-side prefetching for enhanced performance

3. Route Generation Helpers (slugify.ts)

• Contains utility functions for generating route paths:
  • workspaceLink(workspace): Creates workspace URLs
  • folderLink(params): Creates folder URLs with two usage patterns:
    • Direct: folderLink({ folder, workspace })
    • Resolution: folderLink({ folder, workspaces })
  • deckLink(params): Creates deck URLs with two usage patterns:
    • Direct: deckLink({ deck, workspace, folder })
    • Resolution: deckLink({ deck, folders, workspaces })
• These helpers handle proper slug generation and path construction
• Particularly useful for UI elements like pinned decks that need direct links

4. Page Components

• /library/[name]/index.vue: Displays folders within a workspace
• /library/[name]/[folder]/[deck].vue: Displays deck content with tabbed interface

Data Flow

1. Entity names are slugified for URL-friendly representation
2. Routes use these slugs as parameters
3. useRouteSlugs resolves slugs back to actual data objects
4. Components render based on the resolved objects

Implementation Details

The routing system uses Nuxt's file-based routing in conjunction with composables that map between:

• Human-readable names in the UI
• URL-safe slugs in the browser address bar
• Actual data objects (with IDs) in the application state

This approach creates human-readable URLs while maintaining proper data relationships in the application's hierarchy.