DocBase - Docs Site Template with Working Search

Most "docs template" listings are a single article layout copy-pasted across a few pages, with a search box that doesn't actually search. DocBase is different: it ships a real, working client-side search implementation and a distinct layout for each content type a documentation site actually needs, instead of one template reused everywhere.

The pack includes seven complete pages: a docs home, a Getting Started article template with prose, callouts, and a generated table of contents, a Guides page with its own client-side filter, an API Reference page with a parameters table and a JS/cURL/Python request-sample tab switcher, an FAQ with grouped accordions, a Changelog rendered as a dated timeline, and a 404 page. Every page shares a clean "Signal" visual style: light by default, with a full dark mode and one consistent emerald accent for links, active nav state, and buttons.

The centerpiece is a genuine `Ctrl+K` / `Cmd+K` search modal: type to filter by title, section, or keyword, use arrow keys to navigate results, and Enter to jump straight to the page. It runs entirely client-side against a plain JS array, so it works even when the site is opened directly from disk with no server. Code blocks are syntax-highlighted with Prism.js and include a working copy-to-clipboard button, and every article heading gets a hover link icon for copying a direct URL to that section.

DocBase stays a plain static site the whole way through: no CMS, no backend, no account needed before you can preview it, and every font is bundled locally with no live call to Google Fonts or any other third-party service.

Features

- 7 complete pages: Docs home, Getting Started (article template), Guides (with its own filter), API Reference (parameters table, JS/cURL/Python request tabs, response/status code tables), FAQ (grouped accordions), Changelog (dated timeline), and 404 - Real `Ctrl+K` / `Cmd+K` search modal: filter by title, section, or keyword, arrow-key navigation, Enter to jump to the page - runs entirely client-side, works even opened from disk - Syntax-highlighted code blocks (Prism.js) with a working copy-to-clipboard button on every one - Article headings get a hover link icon for copying a direct URL to that section - Clean "Signal" visual style: light default, full dark mode, one emerald accent used consistently - Plain HTML, CSS, and JavaScript - no Node, no npm, no build step; every font bundled locally, no live Google Fonts call - Built on Tailwind CSS, Alpine.js, and Prism.js, all MIT licensed

Requirements

None beyond a modern browser. No PHP, no database, no framework.

Instructions

1. Unzip the download. 2. Open `src/index.html` directly in a browser, or deploy the whole `src/` folder to any static host (Netlify, Vercel, S3, your own server). Every page uses relative paths, so it works as-is including opened directly from disk. 3. To adapt content: each page's text is hardcoded directly in its HTML - replace it page by page with your own. 4. To update search: edit `assets/js/search-index.js`, a plain JS array of `{ title, url, section, excerpt, keywords }` entries - add, remove, or edit entries as your pages change, no rebuild step needed. 5. To recolor: the "Signal" palette ships pre-compiled in `assets/css/docbase.css`. Find and replace the palette's hex values directly in that file (search by hex code, not class name, since there's no bundled Tailwind source to rebuild from). 6. To change nav: each HTML file repeats the shared top bar and sidebar markup directly (no templating layer), so add or remove nav items in that block on every page you want it to appear on. 7. Give a `<code>` element a `language-xxx` class (javascript, bash, json, php, python, css, or markup) to syntax-highlight it with the vendored Prism.js components.