Context Management

/**
 * Main runtime context available throughout the application
 */
interface DocusaurusContext {
  /** Complete site configuration */
  siteConfig: DocusaurusConfig;
  
  /** Site metadata including versions and plugin information */
  siteMetadata: SiteMetadata;
  
  /** Global data from all plugins */
  globalData: GlobalData;
  
  /** Current internationalization state */
  i18n: I18n;
  
  /** Runtime code translations */
  codeTranslations: CodeTranslations;
}

import { useDocusaurusContext } from '@docusaurus/core';
import type { DocusaurusContext } from '@docusaurus/types';

function MyComponent() {
  const { siteConfig, siteMetadata, globalData } = useDocusaurusContext();
  
  return (
    <div>
      <h1>{siteConfig.title}</h1>
      <p>Version: {siteMetadata.docusaurusVersion}</p>
      <p>Site Version: {siteMetadata.siteVersion}</p>
    </div>
  );
}

/**
 * Build-time context available to plugins
 */
interface LoadContext {
  /** Site root directory path */
  siteDir: string;
  
  /** Site version (if specified) */
  siteVersion: string | undefined;
  
  /** Generated files directory path */
  generatedFilesDir: string;
  
  /** Complete site configuration */
  siteConfig: DocusaurusConfig;
  
  /** Path to site configuration file */
  siteConfigPath: string;
  
  /** Build output directory path */
  outDir: string;
  
  /** 
   * Localization directory for current locale
   * Constructed with i18n.path + i18n.currentLocale.path
   */
  localizationDir: string;
  
  /** Base URL (duplicated from siteConfig for convenience) */
  baseUrl: string;
  
  /** Internationalization configuration and state */
  i18n: I18n;
  
  /** Code translations for current locale */
  codeTranslations: CodeTranslations;
  
  /** Default browser storage configuration */
  siteStorage: SiteStorage;
  
  /** Current bundler information (webpack or rspack) */
  currentBundler: CurrentBundler;
}

import type { Plugin, LoadContext } from '@docusaurus/types';

const myPlugin = (context: LoadContext): Plugin => {
  // Access build-time information
  const { siteDir, outDir, siteConfig, i18n } = context;
  
  return {
    name: 'my-plugin',
    
    async loadContent() {
      // Use context to locate files
      const contentPath = path.join(siteDir, 'content');
      
      // Access configuration
      const pluginOptions = siteConfig.customFields?.myPluginOptions;
      
      // Use i18n information
      const currentLocale = i18n.currentLocale;
      
      return { /* loaded content */ };
    }
  };
};

/**
 * Extended context with rendering properties
 */
interface Props extends LoadContext {
  /** Serialized head tags for current page */
  headTags: string;
  
  /** Serialized pre-body tags */
  preBodyTags: string;
  
  /** Serialized post-body tags */
  postBodyTags: string;
  
  /** Site metadata with version information */
  siteMetadata: SiteMetadata;
  
  /** All routes in the application */
  routes: PluginRouteConfig[];
  
  /** Array of all route paths */
  routesPaths: string[];
  
  /** All loaded plugins */
  plugins: LoadedPlugin[];
}

/**
 * Site metadata with version information
 */
interface SiteMetadata {
  /** Docusaurus framework version */
  readonly docusaurusVersion: string;
  
  /** Site version (if specified in config) */
  readonly siteVersion?: string;
  
  /** Version information for all plugins */
  readonly pluginVersions: {[pluginName: string]: PluginVersionInformation};
}

/**
 * Browser storage configuration
 */
interface SiteStorage {
  /** Storage type to use */
  type: 'localStorage' | 'sessionStorage';
  
  /** 
   * Namespace for storage keys
   * Applied as suffix: `${key}${namespace}`
   * Default is empty string for compatibility
   */
  namespace: string;
}

// Theme component using storage
import { useThemeConfig } from '@docusaurus/theme-common';

function ThemeToggle() {
  const { storage } = useThemeConfig();
  
  // Storage configuration from context
  const storageKey = `theme${storage.namespace}`;
  const storageType = storage.type; // 'localStorage' or 'sessionStorage'
  
  const savedTheme = window[storageType].getItem(storageKey);
  
  return <button onClick={toggleTheme}>Toggle Theme</button>;
}

/**
 * Global data structure for plugin data
 */
interface GlobalData {
  [pluginName: string]: {
    [pluginId: string]: unknown;
  };
}

// Plugin setting global data
const blogPlugin: Plugin = {
  name: 'docusaurus-plugin-content-blog',
  
  async contentLoaded({ content, actions }) {
    const { setGlobalData } = actions;
    
    // Set global data for this plugin instance
    setGlobalData({
      posts: content.blogPosts,
      tags: content.blogTags,
      totalPosts: content.blogPosts.length
    });
  }
};

// Component accessing global data
function BlogStats() {
  const { globalData } = useDocusaurusContext();
  
  // Access plugin data by plugin name and id
  const blogData = globalData['docusaurus-plugin-content-blog']?.default;
  
  return (
    <div>
      <p>Total posts: {blogData?.totalPosts}</p>
    </div>
  );
}

import type { Plugin, LoadContext } from '@docusaurus/types';

export default function myPlugin(context: LoadContext, options: any): Plugin {
  return {
    name: 'my-plugin',
    
    async loadContent() {
      // Use context for file paths
      const contentDir = path.join(context.siteDir, 'my-content');
      
      // Access site configuration
      const { title, baseUrl } = context.siteConfig;
      
      // Use i18n information
      const { currentLocale, locales } = context.i18n;
      
      return { /* content */ };
    },
    
    async contentLoaded({ content, actions }) {
      // Create routes with context-aware paths
      actions.addRoute({
        path: context.siteConfig.baseUrl + 'my-page',
        component: '@site/src/components/MyPage'
      });
    }
  };
}

import { useDocusaurusContext } from '@docusaurus/core';
import type { DocusaurusContext } from '@docusaurus/types';

function SiteInfo() {
  const context: DocusaurusContext = useDocusaurusContext();
  
  const {
    siteConfig: { title, tagline, url },
    siteMetadata: { docusaurusVersion, siteVersion },
    i18n: { currentLocale, locales }
  } = context;
  
  return (
    <div>
      <h1>{title}</h1>
      <p>{tagline}</p>
      <p>URL: {url}</p>
      <p>Docusaurus: {docusaurusVersion}</p>
      <p>Site Version: {siteVersion}</p>
      <p>Locale: {currentLocale}</p>
      <p>Available Locales: {locales.join(', ')}</p>
    </div>
  );
}