or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

content-processing.mdindex.mdplugin-configuration.mdroute-management.md
tile.json

index.mddocs/

Docusaurus Plugin Content Pages

A core Docusaurus plugin that enables the creation and management of standalone pages within Docusaurus sites. It provides comprehensive support for both JSX/TSX and Markdown/MDX pages with advanced features including localization, routing, and webpack integration.

Package Information

  • Package Name: @docusaurus/plugin-content-pages
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @docusaurus/plugin-content-pages

Core Imports

import pluginContentPages, { validateOptions } from "@docusaurus/plugin-content-pages";

For CommonJS:

const pluginContentPages = require("@docusaurus/plugin-content-pages").default;
const { validateOptions } = require("@docusaurus/plugin-content-pages");

Basic Usage

import type { LoadContext, Plugin } from "@docusaurus/types";
import pluginContentPages, { validateOptions } from "@docusaurus/plugin-content-pages";

// Configure the plugin
const plugin = await pluginContentPages(context, {
  path: 'src/pages',
  routeBasePath: '/',
  include: ['**/*.{js,jsx,ts,tsx,md,mdx}'],
  exclude: ['**/_*.{js,jsx,ts,tsx,md,mdx}'],
  mdxPageComponent: '@theme/MDXPage',
});

// Use in Docusaurus config
export default {
  plugins: [
    [
      '@docusaurus/plugin-content-pages',
      {
        path: 'src/pages',
        routeBasePath: '/',
        include: ['**/*.{js,jsx,ts,tsx,md,mdx}'],
      },
    ],
  ],
};

Architecture

The plugin is built around several key components:

  • Plugin Factory: Main pluginContentPages function that creates the plugin instance
  • Content Processing: Loads and processes JSX, TSX, MD, and MDX page files
  • Route Generation: Creates routes from processed content with permalink handling
  • MDX Integration: Custom webpack loader for MDX processing with frontmatter support
  • Localization Support: Handles internationalized content with localized paths
  • Validation System: Comprehensive option and frontmatter validation using Joi schemas

Capabilities

Plugin Configuration

Core plugin factory function and option validation for setting up the pages plugin with customizable behavior.

export default function pluginContentPages(
  context: LoadContext,
  options: PluginOptions,
): Promise<Plugin<LoadedContent | null>>;

export function validateOptions(
  args: OptionValidationContext<Options | undefined, PluginOptions>
): PluginOptions;

Plugin Configuration

Content Processing

Content loading and processing system that handles JSX, TSX, MD, and MDX files with frontmatter parsing and metadata extraction.

interface LoadedContent {
  type: 'jsx' | 'mdx';
  permalink: string;
  source: string;
  frontMatter?: PageFrontMatter;
  title?: string;
  description?: string;
}

interface PageFrontMatter {
  title?: string;
  description?: string;
  image?: string;
  slug?: string;
  keywords?: string[];
  wrapperClassName?: string;
  hide_table_of_contents?: string;
  toc_min_heading_level?: number;
  toc_max_heading_level?: number;
  draft?: boolean;
  unlisted?: boolean;
  last_update?: FrontMatterLastUpdate;
}

Content Processing

Route Management

Route creation and management system that generates routes from loaded content with permalink handling and metadata integration.

interface RouteConfig {
  path: string;
  component: string;
  exact: boolean;
  metadata: RouteMetadata;
  modules: Record<string, string>;
}

interface RouteMetadata {
  sourceFilePath: string;
  lastUpdatedAt?: number;
}

Route Management

Types

Core type definitions used throughout the plugin:

interface PluginOptions {
  id?: string;
  path: string;
  routeBasePath: string;
  include: string[];
  exclude: string[];
  mdxPageComponent: string;
  showLastUpdateTime: boolean;
  showLastUpdateAuthor: boolean;
  editUrl?: string | EditUrlFunction;
  editLocalizedFiles?: boolean;
  // MDX options
  remarkPlugins: any[];
  rehypePlugins: any[];
  recmaPlugins: any[];
  beforeDefaultRehypePlugins: any[];
  beforeDefaultRemarkPlugins: any[];
  admonitions: boolean | object;
}

type Options = Partial<PluginOptions>;

interface JSXPageMetadata {
  type: 'jsx';
  permalink: string;
  source: string;
}

interface MDXPageMetadata {
  type: 'mdx';
  permalink: string;
  source: string;
  frontMatter: PageFrontMatter & {[key: string]: unknown};
  editUrl?: string;
  title?: string;
  description?: string;
  unlisted: boolean;
  lastUpdatedBy?: string;
  lastUpdatedAt?: number;
}

type Metadata = JSXPageMetadata | MDXPageMetadata;

type EditUrlFunction = (editUrlParams: {
  pagesDirPath: string;
  pagesPath: string;
  permalink: string;
  locale: string;
}) => string | undefined;

interface Assets {
  /** Image asset URL */
  image?: string;
}

interface FrontMatterLastUpdate {
  /** Override last update date */
  date?: Date | string;
  /** Override last update author */
  author?: string;
}

Plugin Lifecycle Methods

The plugin implements the standard Docusaurus plugin lifecycle methods:

interface Plugin<LoadedContent> {
  /** Returns file paths to watch for changes */
  getPathsToWatch(): string[];
  /** Loads and processes page content */
  loadContent(): Promise<LoadedContent | null>;
  /** Creates routes from loaded content */
  contentLoaded(params: {
    content: LoadedContent;
    actions: PluginContentLoadedActions;
  }): Promise<void>;
  /** Configures webpack for MDX processing */
  configureWebpack(): {
    module: {
      rules: RuleSetRule[];
    };
  };
}