mdcms/app/pages/tabs-accordions.md
Claude a09df3a63c
Add tabs and accordion content components to index.html
Implements four new mdcms fenced-block types:
  tab-underline / tab, tab-filled,
  accordion-underline / accordion, accordion-filled

Each block reads items: from a YAML body. Tab state and accordion
open/close are managed with aria-selected / aria-expanded and
data-open attributes. Markdown content inside each item is rendered
with the same pipeline as the surrounding page.

Adds computeDerivedTokens() — called on every applyTheme() — which
computes --mdcms-bar, --mdcms-filled-bg/border/fg, --mdcms-strip-border
from the active palette. Uses HSL chroma (S × (1-|2L-1|)) instead of raw
HSL S for the bold-nav heuristic, avoiding a false-positive on near-white
nav colours like the default #F8FAFC.

Adds app/pages/tabs-accordions.md as a visual test page and
docs/unreleased.md to track this change ahead of the next release.

https://claude.ai/code/session_01SFMh7PDxJjvvo5dYbCCFFs
2026-05-21 16:41:27 +00:00

2.2 KiB

title sort
Tabs & Accordions 400

Tabs & Accordions

Tab — Underline variant

items:
  - title: Install
    default: selected
    content: |
      Install with `npm i mdcms` or `pnpm add mdcms`.
  - title: Configure
    content: |
      Drop a `mdcms.config.yaml` next to your content folder.
  - title: Deploy
    content: |
      Any static host. The build emits plain HTML.

Tab — Filled variant

items:
  - title: Overview
    default: selected
    content: |
      MD-CMS is a markdown-based static site system with no build step.
  - title: Features
    content: |
      - Sidebar navigation with sections
      - Full-text search via Fuse.js
      - PWA support with offline caching
      - Dark / light theme toggle
  - title: Architecture
    content: |
      Two parts: `mdcms.py` (CLI) and `app/index.html` (browser renderer).

Accordion — Underline variant

items:
  - title: What is MD-CMS?
    default: open
    content: |
      MD-CMS is a single-file browser renderer that reads markdown, config,
      and nav at runtime entirely client-side. No build pipeline, no compilation.
  - title: How do I install it?
    content: |
      Run `pip install mdcms` or download a binary from the GitHub releases page.
  - title: Does it work offline?
    content: |
      Yes — run `mdcms fetch-deps` to bundle all vendor assets locally, then
      enable `pwa: yes` in `config.yml` for full offline support.

Accordion — Filled variant

items:
  - title: Can I use custom themes?
    default: open
    content: |
      Yes. Create a `theme.yml` file and point to it with `theme: theme.yml` in
      your `config.yml`. The theme controls colours, fonts, and layout.
  - title: What markdown features are supported?
    content: |
      GFM (GitHub Flavored Markdown): tables, task lists, fenced code blocks,
      strikethrough, and autolinks. Syntax highlighting via highlight.js.
  - title: Can I nest categories?
    content: |
      Categories are flat (no nesting), but nav sections support a `parent:`
      key for two-level sidebar grouping.