CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-docusaurus--theme-classic

Classic theme for Docusaurus static site generator providing comprehensive React component library for documentation sites

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

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;
  };
}

Install with Tessl CLI

npx tessl i tessl/npm-docusaurus--theme-classic

docs

blog-components.md

content-components.md

core-plugin.md

documentation-components.md

icon-components.md

index.md

layout-components.md

navigation-components.md

theme-configuration.md

utility-components.md

tile.json