Skip to content

Add search functionality across all topic pages #4

Description

@sridhar-3009

Feature request

Add a search bar to the navbar that lets users search across all topic content and jump to the relevant section.

Scope

  • Search index: build a JS object at page load from all <h2>, <h4>, and <p> text across the 12 topic pages
  • Since this is a static site (no server), the index must be pre-built as a JSON file or inline JS array
  • Match query against title + snippet, show top 5 results as a dropdown
  • Clicking a result navigates to that topic page (with #section-id anchor if possible)

Implementation options

  1. Pre-built index (recommended): Write a small script that reads all 12 HTML files and outputs search-index.json — bundle it into the repo. At runtime, fetch it and filter client-side.
  2. Runtime scrape: On the home page, lazily fetch each topic HTML and build the index in the browser. Simpler but slower first load.

Files

  • index.html — add search input to navbar
  • css/style.css — search dropdown styles
  • js/search.js (new file) — search logic
  • search-index.json (new file, optional) — pre-built index

Constraints

  • No external search library (no Lunr, no Algolia)
  • Must work offline (no CDN-only deps at search time)
  • No emojis in UI

Difficulty: Intermediate

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions