CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-slidev--types

Comprehensive TypeScript type definitions and interfaces for the Slidev presentation framework ecosystem

Pending
Overview
Eval results
Files

table-of-contents.mddocs/

Table of Contents System

Types for Slidev's table of contents system, providing hierarchical navigation structure for presentations.

Capabilities

Table of Contents Item

Interface for table of contents items with hierarchical structure and navigation state.

/**
 * Table of contents item with hierarchical navigation structure
 */
interface TocItem {
  /** Slide number */
  no: number;
  /** Whether this item is currently active */
  active?: boolean;
  /** Whether this item is an active parent (has active children) */
  activeParent?: boolean;
  /** Child TOC items for nested structure */
  children: TocItem[];
  /** Whether this item has an active parent */
  hasActiveParent?: boolean;
  /** Nesting level in the hierarchy */
  level: number;
  /** Title level (heading level: 1-6) */
  titleLevel: number;
  /** Navigation path for this item */
  path: string;
  /** Whether to hide this item in TOC display */
  hideInToc?: boolean;
  /** Display title for this item */
  title?: string;
}

Usage Examples:

import type { TocItem } from "@slidev/types";

// Example TOC structure
const tocStructure: TocItem[] = [
  {
    no: 1,
    active: true,
    activeParent: false,
    children: [],
    hasActiveParent: false,
    level: 0,
    titleLevel: 1,
    path: "/1",
    hideInToc: false,
    title: "Introduction"
  },
  {
    no: 2,
    active: false,
    activeParent: true,
    children: [
      {
        no: 3,
        active: false,
        activeParent: false,
        children: [],
        hasActiveParent: true,
        level: 1,
        titleLevel: 2,
        path: "/3",
        hideInToc: false,
        title: "Getting Started"
      }
    ],
    hasActiveParent: false,
    level: 0,
    titleLevel: 1,
    path: "/2",
    hideInToc: false,
    title: "Tutorial"
  }
];

// Function to find active TOC item
function findActiveTocItem(toc: TocItem[]): TocItem | null {
  for (const item of toc) {
    if (item.active) return item;
    
    const activeChild = findActiveTocItem(item.children);
    if (activeChild) return activeChild;
  }
  return null;
}

// Function to build TOC navigation path
function buildTocPath(item: TocItem): string[] {
  const path = [item.title || `Slide ${item.no}`];
  
  // This would typically traverse up the parent chain
  // Implementation depends on how parent references are maintained
  
  return path.reverse();
}

// Function to filter visible TOC items
function filterVisibleTocItems(toc: TocItem[]): TocItem[] {
  return toc
    .filter(item => !item.hideInToc)
    .map(item => ({
      ...item,
      children: filterVisibleTocItems(item.children)
    }));
}

Install with Tessl CLI

npx tessl i tessl/npm-slidev--types

docs

cli-build.md

clicks-interactions.md

code-execution.md

config-frontmatter.md

context-menu.md

index.md

markdown-transform.md

options-system.md

setup-plugins.md

slide-data.md

table-of-contents.md

tile.json