feat: add calendar docs with inline markdown rendering

Add src/ui/calendar.md with full documentation for both calendar
namespaces (picker props, event grid, ticker, agenda, event data
format, date utilities, CSS classes).

Add a minimal markdown-to-hiccup renderer (ui.markdown) that handles
headings, fenced code blocks, tables, lists, inline code, and bold.
Styled with ui/markdown.css using theme tokens.

Each dev target renders the docs inline on the Calendar page:
- Hiccup: slurps the .md file at render time
- Replicant: embeds via compile-time macro (ui.macros/inline-file)
- Squint: fetches from /calendar.md served by Vite

Also fixes calendar event grid day cells to be square (aspect-ratio: 1
with overflow: hidden instead of min-height).
This commit is contained in:
Florian Schroedl
2026-03-29 09:59:31 +02:00
parent 25f868fb69
commit d6d205cb3b
11 changed files with 421 additions and 6 deletions

View File

@@ -23,7 +23,8 @@
[ui.icon :as icon]
[ui.separator :as separator]
[ui.calendar :as calendar]
[ui.calendar-events :as cal-events]))
[ui.calendar-events :as cal-events]
[ui.markdown :as markdown]))
;; ── Query Params ────────────────────────────────────────────────────
@@ -412,6 +413,8 @@
(defn calendar-page []
[:div
(page-header "Calendar" "Date picker, event grid, ticker strip, and agenda list.")
(into [:div {:class "md-docs"}]
(markdown/markdown->hiccup (slurp "src/ui/calendar.md")))
(calendar-demo)])
(defn icons-page []

View File

@@ -20,7 +20,9 @@
[ui.icon :as icon]
[ui.separator :as separator]
[ui.calendar :as calendar]
[ui.calendar-events :as cal-events]))
[ui.calendar-events :as cal-events]
[ui.markdown :as markdown])
(:require-macros [ui.macros :refer [inline-file]]))
;; ── State ───────────────────────────────────────────────────────────
@@ -390,9 +392,13 @@
["Dev & Technical"
[:code :terminal :database :globe :shield :zap :book-open :map-pin]]])
(def calendar-docs-md (inline-file "../../src/ui/calendar.md"))
(defn calendar-page []
[:div
(page-header "Calendar" "Date picker, event grid, ticker strip, and agenda list.")
(into [:div {:class ["md-docs"]}]
(markdown/markdown->hiccup calendar-docs-md))
(calendar-demo)])
(defn icons-page []

View File

@@ -19,7 +19,8 @@
[ui.icon :as icon]
[ui.separator :as separator]
[ui.calendar :as calendar]
[ui.calendar-events :as cal-events]))
[ui.calendar-events :as cal-events]
[ui.markdown :as markdown]))
;; ── State ───────────────────────────────────────────────────────────
@@ -433,9 +434,23 @@
(into [:div {:style {"display" "grid" "grid-template-columns" "repeat(auto-fill, minmax(5rem, 1fr))" "gap" "var(--size-4)"}}]
(map icon-card icons)))))
(def !calendar-docs (atom nil))
(defn load-calendar-docs! []
(when-not @!calendar-docs
(-> (js/fetch "/calendar.md")
(.then (fn [r] (.text r)))
(.then (fn [text]
(reset! !calendar-docs text)
(render!))))))
(defn calendar-page []
(load-calendar-docs!)
[:div
(page-header "Calendar" "Date picker, event grid, ticker strip, and agenda list.")
(when-let [md @!calendar-docs]
(into [:div {:class "md-docs"}]
(markdown/markdown->hiccup md)))
(calendar-demo)])
(defn icons-page []