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:
@@ -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 []
|
||||
|
||||
@@ -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 []
|
||||
|
||||
@@ -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 []
|
||||
|
||||
Reference in New Issue
Block a user