mirror of
https://github.com/kbenestad/mdcms.git
synced 2026-06-18 15:24:32 +00:00
a09df3a63c
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
78 lines
2.2 KiB
Markdown
78 lines
2.2 KiB
Markdown
---
|
|
title: Tabs & Accordions
|
|
sort: 400
|
|
---
|
|
|
|
# Tabs & Accordions
|
|
|
|
## Tab — Underline variant
|
|
|
|
```mdcms tab-underline
|
|
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
|
|
|
|
```mdcms tab-filled
|
|
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
|
|
|
|
```mdcms accordion-underline
|
|
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
|
|
|
|
```mdcms accordion-filled
|
|
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.
|
|
```
|