Layout Components

/**
 * Main page layout wrapper component
 * @param props - Layout configuration props
 * @returns Layout structure with header, main content, and footer
 */
function Layout(props: LayoutProps): ReactNode;

interface LayoutProps {
  readonly children?: ReactNode;
  readonly noFooter?: boolean;
  readonly wrapperClassName?: string;
  // SEO and metadata props
  readonly title?: string;
  readonly description?: string;
}

import Layout from '@theme/Layout';

export default function MyPage() {
  return (
    <Layout
      title="My Custom Page"
      description="Description for SEO"
      wrapperClassName="my-custom-wrapper"
    >
      <div>
        <h1>My Page Content</h1>
        <p>This content will be wrapped with header and footer.</p>
      </div>
    </Layout>
  );
}

/**
 * Layout context provider for theme state management
 * @param props - Provider props containing children
 * @returns Context provider wrapper
 */
function LayoutProvider(props: LayoutProviderProps): ReactNode;

interface LayoutProviderProps {
  readonly children: ReactNode;
}

/**
 * Accessibility skip-to-content link for keyboard navigation
 * @returns Skip link that appears on focus
 */
function SkipToContent(): ReactNode;

/**
 * Back to top button that appears when scrolling down
 * @returns Floating button for scroll-to-top functionality
 */
function BackToTopButton(): ReactNode;

/**
 * Site-wide announcement bar component
 * @returns Announcement banner or null if not configured
 */
function AnnouncementBar(): ReactNode | null;

/**
 * Announcement bar content wrapper
 * @param props - Content container props
 * @returns Styled content container
 */
function AnnouncementBarContent(props: AnnouncementBarContentProps): ReactNode;

interface AnnouncementBarContentProps extends ComponentProps<'div'> {}

/**
 * Close button for announcement bar
 * @param props - Button props
 * @returns Close button element
 */
function AnnouncementBarCloseButton(props: AnnouncementBarCloseButtonProps): ReactNode;

interface AnnouncementBarCloseButtonProps extends ComponentProps<'button'> {}

/**
 * Root theme context provider
 * @param props - Provider props
 * @returns Theme context wrapper
 */
function ThemeProvider(props: ThemeProviderProps): ReactNode;

interface ThemeProviderProps {
  readonly children: ReactNode;
}

/**
 * Theme-aware page title formatter
 * @param props - Title formatter props
 * @returns Formatted title element
 */
function ThemeProviderTitleFormatter(props: TitleFormatterProps): ReactNode;

interface TitleFormatterProps {
  readonly children: ReactNode;
}

/**
 * Color mode toggle switch for dark/light theme
 * @param props - Toggle configuration props
 * @returns Theme toggle button
 */
function ColorModeToggle(props: ColorModeToggleProps): ReactNode;

interface ColorModeToggleProps {
  readonly className?: string;
  readonly buttonClassName?: string;
  readonly respectPrefersColorScheme: boolean;
  readonly value: ColorMode | null;
  readonly onChange: (colorMode: ColorMode | null) => void;
}

type ColorMode = 'light' | 'dark';

import { useColorMode } from '@docusaurus/theme-common';
import ColorModeToggle from '@theme/ColorModeToggle';

export default function CustomToggle() {
  const { colorMode, setColorMode } = useColorMode();
  
  return (
    <ColorModeToggle
      className="custom-toggle"
      value={colorMode}
      onChange={setColorMode}
      respectPrefersColorScheme={true}
    />
  );
}

/**
 * Site logo component with theme-aware images
 * @param props - Logo configuration props
 * @returns Logo link with image
 */
function Logo(props: LogoProps): ReactNode;

interface LogoProps extends ComponentProps<'a'> {
  readonly imageClassName?: string;
  readonly titleClassName?: string;
}

/**
 * Theme-aware image component
 * @param props - Image props with light/dark variants
 * @returns Image element that responds to theme changes
 */
function ThemedImage(props: ThemedImageProps): ReactNode;

interface ThemedImageProps extends Omit<ComponentProps<'img'>, 'src'> {
  readonly sources: {
    readonly light: string;
    readonly dark: string;
  };
}

import ThemedImage from '@theme/ThemedImage';

export default function MyComponent() {
  return (
    <ThemedImage
      alt="My Image"
      sources={{
        light: '/img/logo-light.png',
        dark: '/img/logo-dark.png',
      }}
      width="200"
      height="100"
    />
  );
}

/**
 * Content visibility wrapper for draft/unlisted content
 * @param props - Visibility metadata props
 * @returns Visibility wrapper component
 */
function ContentVisibility(props: ContentVisibilityProps): ReactNode;

interface ContentVisibilityProps {
  readonly metadata: {
    readonly unlisted: boolean;
    readonly frontMatter: {
      draft?: boolean;
      unlisted?: boolean;
    };
  };
}

/**
 * Draft content marker component
 * @param props - Draft marker props
 * @returns Draft indicator element
 */
function Draft(props: DraftProps): ReactNode;

interface DraftProps {
  className?: string;
}

/**
 * Unlisted content marker component
 * @param props - Unlisted marker props
 * @returns Unlisted indicator element
 */
function Unlisted(props: UnlistedProps): ReactNode;

interface UnlistedProps {
  className?: string;
}

/**
 * Search metadata component for SEO and search indexing
 * @param props - Search metadata props
 * @returns Meta tags for search optimization
 */
function SearchMetadata(props: SearchMetadataProps): ReactNode;

interface SearchMetadataProps {
  readonly locale?: string;
  readonly version?: string;
  readonly tag?: string;
}

/**
 * Site metadata component for global SEO
 * @returns Meta tags for site-wide SEO
 */
function SiteMetadata(): ReactNode;

import React from 'react';
import Layout from '@theme/Layout';
import LayoutProvider from '@theme/Layout/Provider';

export default function CustomPage() {
  return (
    <Layout 
      title="Custom Page" 
      description="A custom page with layout components"
      noFooter={false}
      wrapperClassName="custom-page"
    >
      <div className="container">
        <h1>Custom Page Content</h1>
        <p>This page uses the standard Docusaurus layout.</p>
      </div>
    </Layout>
  );
}

import React from 'react';
import OriginalLayout from '@theme-original/Layout';
import { useThemeConfig } from '@docusaurus/theme-common';

export default function CustomLayout(props) {
  const {
    navbar: {hideOnScroll = false},
  } = useThemeConfig();

  return (
    <div className={hideOnScroll ? 'navbar-hide-on-scroll' : ''}>
      <OriginalLayout {...props} />
    </div>
  );
}