components

2.1 KB

1. // components/index.hl — `/`: the list of the site's components, each with its demo and README (no component is shown on the home itself — creator 2026-09-25). A new component adds one entry here.
2. parent './main.hl'
3. import { siteName } from '../project.hl'
5. __title = siteName
7. View {
8. componentList {
9. h1 { "Components" }
10. ul { id = "components"
11. li { a { id = "open-month-view" href = "/month-view" "Month view" } p { "A month with buttons to page through it; today is marked." } a { class = "quiet" href = "/month-view/README.md" "README" } }
12. li { a { id = "open-date-picker" href = "/date-picker" "Date picker" } p { "A date field: click it, pick a day, or type YYYY-MM-DD." } a { class = "quiet" href = "/date-picker/README.md" "README" } }
13. li { a { id = "open-range-picker" href = "/range-picker" "Date range picker" } p { "One field for a period: click a start day and an end day, the days between are highlighted." } a { class = "quiet" href = "/range-picker/README.md" "README" } }
14. li { a { id = "open-pagination" href = "/pagination" "Pagination" } p { "Page numbers with Previous and Next: 1 .. 44 45 46 .. 89." } a { class = "quiet" href = "/pagination/README.md" "README" } }
15. li { a { id = "open-md-editor" href = "/md-editor" "Markdown editor" } p { "A Markdown field you edit visually: headings look like headings, bold is bold; the value stays plain Markdown." } a { class = "quiet" href = "/md-editor/README.md" "README" } }
16. li { a { id = "open-code-editor" href = "/code-editor" "Code editor" } p { "A code field: coloured while you type, line numbers, Tab / Shift+Tab, undo and redo." } a { class = "quiet" href = "/code-editor/README.md" "README" } }
17. li { a { id = "open-file-upload" href = "/file-upload" "File upload" } p { "Drop or choose one file: name, size and progress show; the app decides where it is stored." } a { class = "quiet" href = "/file-upload/README.md" "README" } }
18. li { a { id = "open-modal" href = "/modal" "Modal" } p { "A window over the page: title, any content, footer buttons; closes by ×, Esc or the dim background and tells the page how." } a { class = "quiet" href = "/modal/README.md" "README" } }
19. }
20. }
21. }