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

Utility Components

Name: tessl/npm-docusaurus--theme-classic
Author: tessl

Utility components provide common functionality and accessibility features for the theme including search, SEO metadata, error handling, and content visibility controls.

Capabilities

Search Components

Search functionality integration for the theme.

import type { ReactNode } from 'react';

// Search bar placeholder component
function SearchBar(): ReactNode;

// Search metadata for SEO
interface SearchMetadataProps {
  readonly locale?: string;
  readonly version?: string;
  readonly tag?: string;
}

function SearchMetadata(props: SearchMetadataProps): ReactNode;

Accessibility and Navigation

Components that enhance accessibility and provide navigation aids.

import type { ReactNode } from 'react';

// Skip to content link for accessibility
function SkipToContent(): ReactNode;

// Back to top button
function BackToTopButton(): ReactNode;

// Last updated metadata display
interface LastUpdatedProps {
  readonly lastUpdatedAt?: number | null;
  readonly lastUpdatedBy?: string | null;
}

function LastUpdated(props: LastUpdatedProps): ReactNode;

// Edit this page link
interface EditThisPageProps {
  readonly editUrl: string;
}

function EditThisPage(props: EditThisPageProps): ReactNode;

// Edit metadata row with last updated info
interface EditMetaRowProps {
  readonly className: string;
  readonly editUrl: string | null | undefined;
  readonly lastUpdatedAt: number | null | undefined;
  readonly lastUpdatedBy: string | null | undefined;
}

function EditMetaRow(props: EditMetaRowProps): ReactNode;

Content Visibility and Status

Components for managing content visibility and status indicators.

import type { ReactNode } from 'react';

// Content visibility wrapper
interface ContentVisibilityProps {
  readonly metadata: {
    readonly unlisted: boolean;
    readonly frontMatter: {draft?: boolean; unlisted?: boolean};
  };
}

function ContentVisibility(props: ContentVisibilityProps): ReactNode;

// Unlisted content indicator
interface UnlistedProps {
  className?: string;
}

function Unlisted(props: UnlistedProps): ReactNode;

// Draft content indicator
interface DraftProps {
  className?: string;
}

function Draft(props: DraftProps): ReactNode;

Error and Not Found Pages

Error handling and fallback page components.

import type { ReactNode } from 'react';

// 404 Not Found page
function NotFound(): ReactNode;

// Not found page content
interface NotFoundContentProps {
  readonly className?: string;
}

function NotFoundContent(props: NotFoundContentProps): ReactNode;

// Error page content component
function ErrorPageContent(): ReactNode;

Images and Media

Enhanced image components with theming support.

import type { ComponentProps, ReactNode } from 'react';

// Themed image that switches between light/dark variants
interface ThemedImageProps extends Omit<ComponentProps<'img'>, 'src'> {
  readonly sources: {
    readonly light: string;
    readonly dark: string;
  };
}

function ThemedImage(props: ThemedImageProps): ReactNode;

Typography and Headings

Enhanced heading components with anchor links.

import type { ComponentProps, ReactNode } from 'react';

type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

interface HeadingProps extends ComponentProps<HeadingType> {
  readonly as: HeadingType;
}

function Heading(props: HeadingProps): ReactNode;

Tags and Labels

Tag and label components for content organization.

import type { ReactNode } from 'react';
import type { Tag, TagsListItem } from '@docusaurus/utils';
import type { Optional } from 'utility-types';

// Individual tag component
interface TagProps extends Optional<TagsListItem, 'count'> {}

function Tag(props: TagProps): ReactNode;

// Inline tags list
interface TagsListInlineProps {
  readonly tags: readonly Tag[];
}

function TagsListInline(props: TagsListInlineProps): ReactNode;

// Tags organized by letter
interface TagsListByLetterProps {
  readonly tags: readonly TagsListItem[];
}

function TagsListByLetter(props: TagsListByLetterProps): ReactNode;

Usage Examples

import SearchBar from '@theme/SearchBar';
import SkipToContent from '@theme/SkipToContent';
import ThemedImage from '@theme/ThemedImage';
import Heading from '@theme/Heading';

function MyPage() {
  return (
    <div>
      <SkipToContent />
      
      <SearchBar />
      
      <ThemedImage
        sources={{
          light: '/img/logo-light.png',
          dark: '/img/logo-dark.png',
        }}
        alt="Site Logo"
      />
      
      <Heading as="h1" id="main-title">
        Welcome to My Site
      </Heading>
    </div>
  );
}

Types

import type { ReactNode, ComponentProps } from 'react';

// Base component props that many utility components extend
interface BaseProps {
  readonly className?: string;
  readonly children?: ReactNode;
}

// Metadata interface for content visibility
interface VisibilityMetadata {
  readonly unlisted: boolean;
  readonly frontMatter: {
    draft?: boolean;
    unlisted?: boolean;
  };
}

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

theme-configuration.md

utility-components.md

tile.json

tessl/npm-docusaurus--theme-classic