or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

content-processing.md index.md plugin-configuration.md route-management.md

tile.json

Route Management

Route creation and management system that generates routes from loaded content with comprehensive permalink handling, metadata integration, and webpack module configuration.

Capabilities

Route Creation

Comprehensive route creation system that processes loaded content and generates route configurations.

/**
 * Creates all routes for the loaded pages content
 * @param param - Parameters containing content, options, and actions
 * @returns Promise that resolves when all routes are created
 */
async function createAllRoutes(
  param: CreateAllRoutesParam
): Promise<void>;

/**
 * Builds route configurations for all pages without adding them
 * @param param - Parameters containing content, options, and actions
 * @returns Promise resolving to array of route configurations
 */
async function buildAllRoutes(
  param: CreateAllRoutesParam
): Promise<RouteConfig[]>;

interface CreateAllRoutesParam {
  /** Loaded page content metadata */
  content: LoadedContent;
  /** Plugin options configuration */
  options: PluginOptions;
  /** Docusaurus plugin actions for route creation */
  actions: PluginContentLoadedActions;
}

Usage Example:

import { createAllRoutes } from "@docusaurus/plugin-content-pages";

// In plugin's contentLoaded lifecycle method
async contentLoaded({ content, actions }) {
  if (!content) {
    return;
  }
  await createAllRoutes({
    content,
    options: pluginOptions,
    actions,
  });
}

Route Configuration

Complete route configuration structure for both JSX and MDX pages.

interface RouteConfig {
  /** URL path for the route */
  path: string;
  /** Component path or module reference */
  component: string;
  /** Whether route matching should be exact */
  exact: boolean;
  /** Route metadata for additional information */
  metadata: RouteMetadata;
  /** Module references for dynamic imports */
  modules: Record<string, string>;
}

interface RouteMetadata {
  /** Source file path relative to site directory */
  sourceFilePath: string;
  /** Last update timestamp if available */
  lastUpdatedAt?: number;
}

JSX Route Generation

Route generation specifically for JSX and TSX page components.

/**
 * Builds route configuration for JSX/TSX pages
 * @param metadata - JSX page metadata
 * @returns Promise resolving to route configuration
 */
async function buildJSXRoute(metadata: JSXPageMetadata): Promise<RouteConfig>;

JSX Route Structure:

// For a JSX page at src/pages/about.tsx
const jsxRoute: RouteConfig = {
  path: '/about/',
  component: '@site/src/pages/about.tsx',
  exact: true,
  metadata: {
    sourceFilePath: 'src/pages/about.tsx',
  },
  modules: {
    config: '@generated/docusaurus.config',
  },
};

MDX Route Generation

Route generation specifically for Markdown and MDX pages with data integration.

/**
 * Builds route configuration for MDX pages with data creation
 * @param metadata - MDX page metadata
 * @returns Promise resolving to route configuration
 */
async function buildMDXPageRoute(
  metadata: MDXPageMetadata
): Promise<RouteConfig>;

MDX Route Structure:

// For an MDX page at src/pages/features.mdx
const mdxRoute: RouteConfig = {
  path: '/features/',
  component: '@theme/MDXPage',
  exact: true,
  metadata: {
    sourceFilePath: 'src/pages/features.mdx',
    lastUpdatedAt: 1639123456789,
  },
  modules: {
    content: '@site/src/pages/features.mdx',
  },
};

Route Processing

Metadata Processing

Route metadata processing that extracts relevant information from page metadata.

/**
 * Creates route metadata from page metadata
 * @param metadata - Page metadata (JSX or MDX)
 * @returns Route metadata object
 */
function createPageRouteMetadata(metadata: Metadata): RouteMetadata;

Data File Generation

For MDX pages, the plugin generates JSON data files containing metadata that can be imported by the MDX page component.

// Generated data file structure
interface GeneratedPageData {
  type: 'mdx';
  permalink: string;
  source: string;
  frontMatter: PageFrontMatter;
  title?: string;
  description?: string;
  editUrl?: string;
  unlisted: boolean;
  lastUpdatedBy?: string;
  lastUpdatedAt?: number;
}

Data File Usage:

// In @theme/MDXPage component
import { usePluginData } from '@docusaurus/useGlobalData';

export default function MDXPage({ content }) {
  // content.metadata contains the generated page data
  const { frontMatter, title, description, editUrl } = content.metadata;
  
  return (
    <div>
      <h1>{title}</h1>
      {description && <p>{description}</p>}
      {/* Render MDX content */}
      <content.default />
    </div>
  );
}

Advanced Route Features

Permalink Handling

Comprehensive permalink generation with customization support:

// Default permalink generation
// File: src/pages/docs/getting-started.md
// Permalink: /docs/getting-started/

// Custom slug in frontmatter
// File: src/pages/docs/getting-started.md
// Frontmatter: slug: "quick-start"
// Permalink: /quick-start/

// Index files
// File: src/pages/docs/index.md
// Permalink: /docs/

Route Base Path

All routes respect the configured routeBasePath option:

// With routeBasePath: '/'
// File: src/pages/about.md -> Route: /about/

// With routeBasePath: '/pages/'  
// File: src/pages/about.md -> Route: /pages/about/

// With routeBasePath: ''
// File: src/pages/about.md -> Route: /about/

Module Resolution

The plugin sets up proper module resolution for different page types:

JSX/TSX pages: Direct component imports
MDX pages: MDX loader processing with metadata injection
Config access: All pages get access to Docusaurus configuration

Route Priority

Route processing follows a specific priority system:

Localized content: Takes priority when available
Custom slugs: Override default file-based permalinks
Index files: Special handling for directory index pages
Draft filtering: Draft pages are excluded from route generation

Version

Tile

Files