tessl/npm-compodoc--compodoc

The missing documentation tool for your Angular application

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Search Engine

Name: tessl/npm-compodoc--compodoc
Author: tessl

The Search Engine provides indexing and search functionality for documentation websites.

Capabilities

SearchEngine Class

Singleton class providing search indexing and JSON generation for client-side search.

/**
 * Search indexing engine for documentation websites
 * Uses singleton pattern - access via SearchEngine.getInstance() or default export
 */
class SearchEngine {
  // Public instance properties
  searchIndex: any;
  documentsStore: Object;
  indexSize: number;
  amountOfMemory: number;
  
  /**
   * Get singleton instance of SearchEngine
   * @returns SearchEngine instance
   */
  static getInstance(): SearchEngine;
  
  /**
   * Index a page for search functionality
   * @param page - Page data to index including content and metadata
   */
  indexPage(page: any): void;
  
  /**
   * Generate search index JSON file for client-side search
   * @param outputFolder - Directory to write the search index
   * @returns Promise resolving when search index is generated
   */
  generateSearchIndexJson(outputFolder: string): Promise<any>;
}

Usage Examples:

import SearchEngine from "@compodoc/compodoc";
// or
// import { SearchEngine } from "@compodoc/compodoc";
// const engine = SearchEngine.getInstance();

// Using the default export (already an instance)
const pageData = {
  infos: {
    name: "AppComponent",
    id: "app-component",
    context: "component"
  },
  rawData: "<h1>AppComponent</h1><p>Main application component</p>",
  url: "/components/AppComponent.html"
};

SearchEngine.indexPage(pageData);

// Generate search index after indexing all pages
await SearchEngine.generateSearchIndexJson("./documentation");

Search Page Data Structure

Structure for page data that gets indexed for search.

interface SearchPageData {
  /**
   * Page metadata and information
   */
  infos: {
    name: string;
    id: string;
    context: string;
    depth?: number;
    pageType?: string;
  };
  
  /**
   * Raw HTML content of the page
   */
  rawData: string;
  
  /**
   * URL path to the page
   */
  url: string;
}

Search Index Structure

Structure of the generated search index JSON file.

interface SearchIndex {
  /**
   * Lunr.js search index data
   */
  index: any;
  
  /**
   * Store of searchable documents
   */
  store: SearchDocument[];
}

interface SearchDocument {
  /**
   * Unique document identifier
   */
  id: string;
  
  /**
   * Document title/name
   */
  title: string;
  
  /**
   * Document content for search
   */
  body: string;
  
  /**
   * Document URL for navigation
   */
  url: string;
  
  /**
   * Document type/context
   */
  type: string;
}

Search Integration

Methods for integrating search functionality into documentation websites.

/**
 * Search functionality configuration
 */
interface SearchConfiguration {
  /**
   * Enable/disable search functionality
   * @default false when Configuration.mainData.disableSearch is true
   */
  enabled: boolean;
  
  /**
   * Maximum number of search results to display
   * @default 15
   */
  maxResults: number;
  
  /**
   * Search index file path
   * @default "js/search/search_index.json" 
   */
  indexPath: string;
}

Usage Examples:

// Configure search in main configuration
const config = Configuration.getInstance();
config.mainData.disableSearch = false;
config.mainData.maxSearchResults = 25;

// Index multiple pages
const pages = [
  { infos: { name: "Overview", id: "overview", context: "page" }, rawData: "...", url: "/index.html" },
  { infos: { name: "AppModule", id: "app-module", context: "module" }, rawData: "...", url: "/modules/AppModule.html" },
  { infos: { name: "AppComponent", id: "app-component", context: "component" }, rawData: "...", url: "/components/AppComponent.html" }
];

pages.forEach(page => SearchEngine.indexPage(page));

// Generate final search index
await SearchEngine.generateSearchIndexJson("./documentation");

Client-Side Search Integration

JavaScript code structure for client-side search functionality.

// Client-side search implementation structure
class DocumentationSearch {
  constructor(indexPath, maxResults) {
    this.indexPath = indexPath;
    this.maxResults = maxResults;
    this.index = null;
    this.store = null;
  }
  
  async initialize() {
    // Load search index
    const response = await fetch(this.indexPath);
    const data = await response.json();
    
    this.index = lunr.Index.load(data.index);
    this.store = data.store;
  }
  
  search(query) {
    if (!this.index) return [];
    
    const results = this.index.search(query);
    return results
      .slice(0, this.maxResults)
      .map(result => {
        const doc = this.store.find(d => d.id === result.ref);
        return {
          ...doc,
          score: result.score
        };
      });
  }
}

Lunr.js Integration

Configuration for the Lunr.js search library used by Compodoc.

interface LunrConfiguration {
  /**
   * Fields to index for search
   */
  fields: {
    title: { boost: number };    // Title field with boosting
    body: { boost: number };     // Body content field
    type: { boost: number };     // Document type field
  };
  
  /**
   * Reference field for document lookup
   */
  ref: "id";
  
  /**
   * Pipeline functions for text processing
   */
  pipeline: string[];
  
  /**
   * Search field configuration
   */
  searchPipeline: string[];
}

Usage Examples:

// Custom search configuration example
const searchConfig: LunrConfiguration = {
  fields: {
    title: { boost: 10 },    // Higher boost for titles
    body: { boost: 1 },      // Normal boost for content
    type: { boost: 5 }       // Medium boost for types
  },
  ref: "id",
  pipeline: ["stemmer", "stopWordFilter"],
  searchPipeline: ["stemmer"]
};