or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

blog-components.mdcontent-components.mdcore-plugin.mddocumentation-components.mdicon-components.mdindex.mdlayout-components.mdnavigation-components.mdtheme-configuration.mdutility-components.md
tile.json

core-plugin.mddocs/

Core Plugin

The core plugin functionality that configures Docusaurus with the classic theme components, styling, and build-time processing.

Capabilities

Main Plugin Function

The default export that creates and configures the classic theme plugin.

/**
 * Main theme plugin function that configures the classic theme
 * @param context - Docusaurus load context containing site configuration
 * @param options - Theme plugin options
 * @returns Configured Docusaurus plugin
 */
export default function themeClassic(
  context: LoadContext,
  options: PluginOptions,
): Plugin<undefined>;

Usage Example:

// docusaurus.config.js
export default {
  title: 'My Site',
  themes: [
    [
      '@docusaurus/theme-classic',
      {
        customCss: ['./src/css/custom.css'],
      },
    ],
  ],
};

Plugin Options Validation

Validates and normalizes plugin options before configuration.

/**
 * Validates plugin options
 * @param params - Validation parameters
 * @returns Validated plugin options
 */
function validateOptions(params: {
  options: Options;
  validate: ValidationContext;
}): PluginOptions;

interface Options {
  customCss?: string[] | string;
}

interface PluginOptions {
  customCss: string[];
}

Theme Configuration Validation

Validates theme configuration options in themeConfig.

/**
 * Validates theme configuration
 * @param params - Validation parameters including theme config
 * @returns Validated theme configuration
 */
function validateThemeConfig(params: {
  themeConfig: ThemeConfig;
  validate: ValidationContext;
}): ThemeConfig;

Swizzle Configuration

Provides configuration for component swizzling (customization).

/**
 * Returns swizzle configuration for component customization
 * @returns Swizzle configuration object
 */
function getSwizzleConfig(): SwizzleConfig;

interface SwizzleConfig {
  components: {
    [componentName: string]: {
      actions: {
        eject: 'safe' | 'unsafe' | 'forbidden';
        wrap: 'safe' | 'unsafe' | 'forbidden';
      };
      description: string;
    };
  };
}

Plugin Methods

The plugin object returned by themeClassic includes several key methods:

Theme Path Methods

/**
 * Returns the path to compiled theme components
 */
getThemePath(): string; // Returns '../lib/theme'

/**
 * Returns the path to TypeScript theme source
 */
getTypeScriptThemePath(): string; // Returns '../src/theme'

Translation Methods

/**
 * Gets translation file configurations
 */
getTranslationFiles(): TranslationFileObject[];

/**
 * Translates theme configuration based on current locale
 */
translateThemeConfig(params: {
  themeConfig: ThemeConfig;
  translationFiles: TranslationFile[];
}): ThemeConfig;

/**
 * Gets default code translation messages
 */
getDefaultCodeTranslationMessages(): Record<string, string>;

Client Module Configuration

/**
 * Returns client-side modules to be loaded
 * Includes Infima CSS, Prism languages, and custom CSS
 */
getClientModules(): string[];

Build Configuration

/**
 * Configures Webpack for Prism language support
 */
configureWebpack(
  config: Configuration,
  isServer: boolean,
  utils: ConfigureWebpackUtils,
): Configuration | void;

/**
 * Configures PostCSS with RTL support
 */
configurePostCss(postCssOptions: PostCssOptions): PostCssOptions;

HTML Injection

/**
 * Injects HTML tags including theme scripts and SVG sprites
 */
injectHtmlTags(): {
  preBodyTags: HtmlTag[];
};

Configuration Types

Theme Configuration

interface ThemeConfig {
  colorMode?: {
    defaultMode: 'light' | 'dark';
    disableSwitch: boolean;
    respectPrefersColorScheme: boolean;
  };
  
  navbar?: {
    title?: string;
    logo?: NavbarLogo;
    items: NavbarItem[];
    hideOnScroll?: boolean;
    style?: 'primary' | 'dark';
  };
  
  footer?: {
    style: 'light' | 'dark';
    links?: FooterLinks;
    copyright?: string;
    logo?: FooterLogo;
  };
  
  prism?: {
    theme?: PrismTheme;
    darkTheme?: PrismTheme;
    additionalLanguages?: string[];
    defaultLanguage?: string;
    magicComments?: MagicCommentConfig[];
  };
  
  docs?: {
    versionPersistence: 'localStorage' | 'none';
    sidebar: {
      hideable: boolean;
      autoCollapseCategories: boolean;
    };
  };
  
  blog?: {
    sidebar: {
      groupByYear: boolean;
    };
  };
  
  announcementBar?: {
    id: string;
    content: string;
    backgroundColor?: string;
    textColor?: string;
    isCloseable?: boolean;
  };
}

Navbar Configuration

interface NavbarLogo {
  alt?: string;
  src: string;
  srcDark?: string;
  href?: string;
  target?: string;
  width?: string | number;
  height?: string | number;
  className?: string;
  style?: React.CSSProperties;
}

type NavbarItem = 
  | DefaultNavbarItem
  | DropdownNavbarItem  
  | DocNavbarItem
  | DocSidebarNavbarItem
  | DocsVersionNavbarItem
  | DocsVersionDropdownNavbarItem
  | LocaleDropdownNavbarItem
  | SearchNavbarItem
  | HtmlNavbarItem;

interface DefaultNavbarItem {
  type?: 'default';
  label?: string;
  html?: string;
  to?: string;
  href?: string;
  activeBasePath?: string;
  activeBaseRegex?: string;
  exact?: boolean;
  position?: 'left' | 'right';
  className?: string;
  prependBaseUrlToHref?: boolean;
}

Footer Configuration

interface FooterLogo {
  alt?: string;
  src: string;
  srcDark?: string;
  href?: string;
  width?: string | number;
  height?: string | number;
}

type FooterLinks = MultiColumnFooter | SimpleFooter;

interface MultiColumnFooter {
  links: FooterLinkColumn[];
}

interface SimpleFooter {
  links: FooterLinkItem[];
}

interface FooterLinkColumn {
  title?: string;
  items: FooterLinkItem[];
}

interface FooterLinkItem {
  label?: string;
  html?: string;
  to?: string;
  href?: string;
  prependBaseUrlToHref?: boolean;
}

Prism Configuration

interface PrismTheme {
  plain: PrismThemeEntry;
  styles: PrismThemeEntry[];
}

interface PrismThemeEntry {
  types: string[];
  style: React.CSSProperties;
  languages?: string[];
}

interface MagicCommentConfig {
  className: string;
  line?: string;
  block?: {
    start: string;
    end: string;
  };
}