TagCloud

import ui/theme.qwe use theme_cssuse ui/tag_cloud.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

let tag_cloud_demo_topics = [    { label: "quillo", weight: 64, href: "#quillo" }, { label: "css", weight: 21, href: "#css" },    { label: "sqlite", weight: 9, href: "#sqlite" }, { label: "forms", weight: 30, href: "#forms" },    { label: "accessibility", weight: 17, href: "#a11y" }, { label: "rust", weight: 4, href: "#rust" },    { label: "deploy", weight: 12, href: "#deploy" }, { label: "testing", weight: 26, href: "#testing" },    { label: "dark mode", weight: 6, href: "#dark" }, { label: "components", weight: 48, href: "#components" },    { label: "http", weight: 2, href: "#http" },]view TagCloudDemo() =    <div.demo-stack>        <TagCloud id="tag-cloud-demo-topics" label="Topics" selected="forms" tags={tag_cloud_demo_topics}/>        <TagCloud id="tag-cloud-demo-skills" label="Skills" order="weight" scale="log" counts={true} tone="neutral" tags={[            { label: "SQL", weight: 340 }, { label: "Go", weight: 12 }, { label: "TypeScript", weight: 95 }, { label: "Elixir", weight: 3 }, { label: "Python", weight: 210 },        ]}/>    </div>

// TagCloud: tags sized by how much each is used, so the common ones stand out:// topics of a blog, skills, search terms.////   <TagCloud label="Topics" tags={[//       { label: "quillo", weight: 42, href: "/tags/quillo" },//       { label: "css", weight: 12, href: "/tags/css" },//       { label: "sqlite", weight: 3 },//   ]}/>//// tags: maps of { label, weight, href? }: weight is a count (how many posts); the// largest is size 5, the smallest size 1, the rest in between (on a log scale with// scale "log", which suits counts that differ a lot; "linear" by default). href// makes a tag a link. order: "alpha" (default), "weight" (largest first) or// "given". selected: the label of the tag that is on (aria-current). counts: the// count beside each tag ("css 12"); it is said to screen readers either way.// tone: "accent" (default) or "neutral". label: the list's name. id: the// element's id. It is a <ul> of links or text.import ui/theme.qwe use ui_clslet tag_cloud_css = css`.ui-tagcloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; padding: 0; list-style: none;  font-family: var(--ui-font); line-height: 1.2; --t: var(--ui-accent); }.ui-tagcloud-neutral { --t: var(--ui-fg); }.ui-tagcloud-tag { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 4px; border-radius: 4px;  color: color-mix(in srgb, var(--t) var(--ui-tagcloud-mix), var(--ui-muted)); text-decoration: none; }a.ui-tagcloud-tag:hover { background: color-mix(in srgb, var(--t) 10%, transparent); text-decoration: underline; }a.ui-tagcloud-tag:focus-visible { outline: none; box-shadow: var(--ui-focus); }.ui-tagcloud-tag[aria-current="true"] { background: var(--t); color: var(--ui-bg); }.ui-tagcloud-s1 { font-size: 13px; font-weight: 400; --ui-tagcloud-mix: 45%; }.ui-tagcloud-s2 { font-size: 15px; font-weight: 450; --ui-tagcloud-mix: 60%; }.ui-tagcloud-s3 { font-size: 18px; font-weight: 500; --ui-tagcloud-mix: 72%; }.ui-tagcloud-s4 { font-size: 22px; font-weight: 600; --ui-tagcloud-mix: 86%; }.ui-tagcloud-s5 { font-size: 27px; font-weight: 650; --ui-tagcloud-mix: 100%; }.ui-tagcloud-n { color: var(--ui-muted); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }.ui-tagcloud-tag[aria-current="true"] .ui-tagcloud-n { color: inherit; opacity: .8; }`// A weight's size, 1 to 5, between the lightest and the heaviest.fn tag_cloud_size(w: num, lo: num, hi: num, scale: str) -> int {    if hi <= lo { return 3 }    let f = scale == "log" ? (math.log(w - lo + 1) / math.log(hi - lo + 1)) : (w - lo) / (hi - lo)    1 + round(f * 4)}view TagCloud(tags: list, order: str = "alpha", scale: str = "linear", selected: str? = null, counts: bool = false,              tone: str = "accent", label: str? = null, id: str? = null, class: str? = null) {    style global tag_cloud_css    let ws = tags | map((t) => t.weight ?? 1)    let lo = min(ws) ?? 0    let hi = max(ws) ?? 0    let ordered = order == "alpha" ? sort_by(tags, (t) => lower(t.label)) : order == "weight" ? sort_by(tags, (t) => 0 - (t.weight ?? 1)) : tags    <ul class={ui_cls(["ui-tagcloud", tone != "accent" && `ui-tagcloud-${tone}`, class])} id={id} aria-label={label}>        {for t in ordered => {            let size = tag_cloud_size(t.weight ?? 1, lo, hi, scale)            let cls = `ui-tagcloud-tag ui-tagcloud-s${size}`            let on = selected != null && selected == t.label ? "true" : null            let body = [t.label, counts ? <span.ui-tagcloud-n aria-hidden="true">{t.weight ?? 1}</span> : null,                        <span.ui-sr>, {t.weight ?? 1}</span>]            <li data-size={size}>                {t.href != null ? <a class={cls} href={t.href} aria-current={on}>{body}</a> : <span class={cls} aria-current={on}>{body}</span>}            </li>        }}    </ul>}