# HTML Template Specification Technical specification for the TiddlyWiki-style HTML output. ## Overview The output is a single, self-contained HTML file with: - All CSS embedded inline - All JavaScript embedded inline - All images embedded as Base64 - Full offline functionality ## File Structure ```html {{SOFTWARE_NAME}} - User Manual
...
``` ## Placeholders | Placeholder | Description | Source | |-------------|-------------|--------| | `{{SOFTWARE_NAME}}` | Software name | manual-config.json | | `{{VERSION}}` | Version number | manual-config.json | | `{{EMBEDDED_CSS}}` | All CSS content | wiki-base.css + wiki-dark.css | | `{{TOC_HTML}}` | Table of contents | Generated from sections | | `{{TIDDLERS_HTML}}` | All content blocks | Converted from Markdown | | `{{SEARCH_INDEX_JSON}}` | Search data | Generated from content | | `{{EMBEDDED_JS}}` | JavaScript code | Inline in template | | `{{TIMESTAMP}}` | Generation timestamp | ISO 8601 format | | `{{LOGO_BASE64}}` | Logo image | Project logo or generated | ## Component Specifications ### Sidebar (`.wiki-sidebar`) ``` Width: 280px (fixed) Position: Fixed left Height: 100vh Components: - Logo area (.wiki-logo) - Search box (.wiki-search) - Tag navigation (.wiki-tags) - Table of contents (.wiki-toc) ``` ### Main Content (`.wiki-content`) ``` Margin-left: 280px (sidebar width) Max-width: 900px (content) Components: - Header bar (.content-header) - Tiddler container (.tiddler-container) - Footer (.wiki-footer) ``` ### Tiddler (Content Block) ```html

{{TITLE}}

{{DIFFICULTY_LABEL}} {{TAG_BADGES}}
{{CONTENT_HTML}}
``` ### Search Index Format ```json { "tiddler-overview": { "title": "Product Overview", "body": "Plain text content for searching...", "tags": ["getting-started", "overview"] }, "tiddler-ui-guide": { "title": "UI Guide", "body": "Plain text content...", "tags": ["ui-guide"] } } ``` ## Interactive Features ### 1. Search - Full-text search with result highlighting - Searches title, body, and tags - Shows up to 10 results - Keyboard accessible (Enter to search, Esc to close) ### 2. Collapse/Expand - Per-section toggle via button - Expand All / Collapse All buttons - State indicated by ▼ (expanded) or ▶ (collapsed) - Smooth transition animation ### 3. Tag Filtering - Tags: all, getting-started, ui-guide, api, config, troubleshooting, examples - Single selection (radio behavior) - "all" shows everything - Hidden tiddlers via `display: none` ### 4. Theme Toggle - Light/Dark mode switch - Persists to localStorage (`wiki-theme`) - Applies to entire document via `[data-theme="dark"]` - Toggle button shows sun/moon icon ### 5. Responsive Design ``` Breakpoints: - Desktop (> 1024px): Sidebar visible - Tablet (768-1024px): Sidebar collapsible - Mobile (< 768px): Sidebar hidden, hamburger menu ``` ### 6. Print Support - Hides sidebar, toggles, interactive elements - Expands all collapsed sections - Adjusts colors for print - Page breaks between sections ## Accessibility ### Keyboard Navigation - Tab through interactive elements - Enter to activate buttons - Escape to close search results - Arrow keys in search results ### ARIA Attributes ```html