SitemapList
A site's pages as a nested list of links, as deep as the site goes, flowing into columns on wide screens.
Demo
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/sitemap_list.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/sitemap_list.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/sitemap_list.qwe
view SitemapListDemo() = <div.demo-stack> <SitemapList id="sitemap-list-demo" columns={3} current="#sitemap_list" pages={[ { label: "Docs", href: "#docs", children: [ { label: "Install", href: "#install" }, { label: "Language", href: "#language", children: [ { label: "Values", href: "#values" }, { label: "Views", href: "#views" }, { label: "Components", href: "#sitemap_list" } ] }, { label: "Standard library", href: "#stdlib" } ] }, { label: "Components", href: "#components", children: [ { label: "Forms", href: "#forms" }, { label: "Navigation", href: "#navigation" }, { label: "Data", href: "#data" } ] }, { label: "Company", children: [ { label: "About", href: "#about" }, { label: "Blog", href: "#blog" }, { label: "Contact", href: "#contact" } ] } ]}/> </div>Source
ui/sitemap_list.qwe
// SitemapList: a site's pages as a nested list of links, each section's pages under// it, as deep as the site goes: for a site map page, or the "All pages" part of a// footer. Sections can run across columns on a wide screen.//// <SitemapList columns={3} pages={[// { label: "Docs", href: "/docs", children: [// { label: "Install", href: "/docs/install" },// { label: "Language", href: "/docs/language", children: [{ label: "Values", href: "/docs/language/values" }] }// ] },// { label: "Blog", href: "/blog" }// ]}/>//// pages: { label, href?, children?: [...] }; a page without an href is a heading// only. current: the href of this page, marked aria-current="page". columns: how// many columns the top-level sections may flow into on a wide screen (1); they// become one on narrow screens. label: what screen readers call it ("Site map").import ui/theme.qwe use ui_clslet sitemap_list_css = css`.ui-sitemap { font: 14px/1.6 var(--ui-font); color: var(--ui-fg); }.ui-sitemap-cols { columns: var(--ui-sitemap-cols, 1); column-gap: 32px; }.ui-sitemap ul { margin: 0; padding: 0; list-style: none; }.ui-sitemap ul ul { margin: 2px 0 6px 10px; padding-left: 12px; border-left: 1px solid var(--ui-border); }.ui-sitemap-cols > ul > li { break-inside: avoid; margin-bottom: 14px; }.ui-sitemap-cols > ul > li > .ui-sitemap-link, .ui-sitemap-cols > ul > li > .ui-sitemap-text { font-weight: 650; font-size: 15px; }.ui-sitemap-link, .ui-sitemap-text { display: inline-block; padding: 1px 4px; margin-left: -4px; border-radius: 4px; color: var(--ui-fg); text-decoration: none; }.ui-sitemap-link { color: var(--ui-muted); }.ui-sitemap-cols > ul > li > .ui-sitemap-link { color: var(--ui-fg); }.ui-sitemap-link:hover { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 3px; }.ui-sitemap-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }.ui-sitemap-link[aria-current="page"] { color: var(--ui-accent); font-weight: 600; }@media (max-width: 640px) { .ui-sitemap-cols { columns: 1; } }`fn sitemap_list_node(p, current: str?) = <li> {get(p, "href") != null ? <a.ui-sitemap-link href={p.href} aria-current={current != null && p.href == current ? "page" : null}>{p.label}</a> : <span.ui-sitemap-text>{p.label}</span>} {len(get(p, "children") ?? []) > 0 && <ul>{for c in p.children => sitemap_list_node(c, current)}</ul>} </li>view SitemapList(pages: list = [], current: str? = null, columns: int = 1, label: str = "Site map", id: str? = null, class: str? = null) { style global sitemap_list_css <nav class={ui_cls(["ui-sitemap", class])} id={id} aria-label={label}> <div.ui-sitemap-cols style={`--ui-sitemap-cols: ${max([columns, 1])}`}> <ul>{for p in pages => sitemap_list_node(p, current)}</ul> </div> </nav>}Related
AlphabetIndexA to Z links into a list sorted by name; letters with nothing under them stay in place, disabled.4 views · 6 downloadsDirectoryNavA long list of names grouped under sticky letter headers, with a row of letters at the top that jumps to each group.5 views · 5 downloadsJumpLinksA row of links to the sections of the page, scrolling sideways when narrow and sticking to the top if asked.6 views · 6 downloadsLinkListA plain list of links, each with a line saying where it leads, an icon and a short note at the right.5 views · 6 downloadsMenuA vertical list of links and actions in titled sections, with icons, shortcuts, counts, disabled items and the active one marked.6 views · 6 downloadsScrollspyLinks to the sections of a page that mark the one in view as it scrolls, down the side or in a row.5 views · 9 downloads
Thread
Thread 0 posts
On SitemapList: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.