Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0
directory-list
A listing of products or places, with search, sort and a pager.
Theme
BenchlistDirectory
directoryown6 sections
Harbor tidesAPI product
quaypointown3 sections
3 pages in 2 Businesses name directory-list in this build.
Use directory-list for a page of things a directory lists: benches in a city, integrations of an API. One product-list carries up to 50 rows, with a rail of filters, sort links and a pager; each row links to its directory-product page.
Sections in order
Harbor tides /integrations
Fields that matter
| Section type | Field | Type | Bounds | Refused as |
|---|---|---|---|---|
| product-list | rows | 0–50 × object | ≤50 | product-list.rows |
| product-list | rows[].name | string ≤32 | 1–32 | product-list.rows.name |
| product-list | rows[].summary | string ≤120 | 1–120 | product-list.rows.summary |
| product-list | rows[].tag ? | string ≤24 | 1–24 | product-list.rows.tag |
| product-list | sort ? | 0–4 × object | ≤4 | product-list.sort |
| product-list | pager.pages | integer 1–10000 | 1–10000 | product-list.pager.pages |
Every field of product-list
| Field | Type | Req | Bounds | Refusal |
|---|---|---|---|---|
title | string ≤48 | 1–48 | product-list.title | |
note | string ≤24 | 1–24 | product-list.note | |
rail | object | — | ||
rail.groups | 1–4 × object | yes | 1–4 | product-list.rail.groups |
rail.groups[].label | string ≤20 | yes | 1–20 | product-list.rail.groups.label |
rail.groups[].links | 1–12 × object | yes | 1–12 | product-list.rail.groups.links |
sort | 0–4 × object | ≤4 | product-list.sort | |
sort[].href | string ≤160 | yes | 1–160 | product-list.sort.href |
sort[].label | string ≤16 | yes | 1–16 | product-list.sort.label |
sort[].on | boolean | — | ||
view | "list" | "cards" | — | ||
views | 0–2 × object | ≤2 | product-list.views | |
views[].href | string ≤160 | yes | 1–160 | product-list.views.href |
views[].label | string ≤16 | yes | 1–16 | product-list.views.label |
views[].icon | icon or mark name (52) | — | ||
views[].on | boolean | — | ||
rows | 0–50 × object | yes | ≤50 | product-list.rows |
rows[].href | string ≤160 | yes | 1–160 | product-list.rows.href |
rows[].mark | icon or mark name (52) | — | ||
rows[].name | string ≤32 | yes | 1–32 | product-list.rows.name |
rows[].summary | string ≤120 | yes | 1–120 | product-list.rows.summary |
rows[].tag | string ≤24 | 1–24 | product-list.rows.tag | |
rows[].note | string ≤32 | 1–32 | product-list.rows.note | |
pager | object | — | ||
pager.prev | string ≤160 | 1–160 | product-list.pager.prev | |
pager.next | string ≤160 | 1–160 | product-list.pager.next | |
pager.page | integer 1–10000 | yes | 1–10000 | product-list.pager.page |
pager.pages | integer 1–10000 | yes | 1–10000 | product-list.pager.pages |
empty | string ≤80 | 1–80 | product-list.empty |
Starter record
pages/benchlist/home.json6.1 KB directory-list.json{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "directory",
"frame": "none",
"template": "directory-list",
"title": "Benchlist: a workbench near you, by the hour",
"description": "Kilns, lathes, looms and benches in shared workshops, booked by the hour, each with its tools, rules and rate.",
"sections": [
{
"kind": "nav",
"shell": {"inset":"bleed","density":"none","surface":"glass","sticky":true},
"block": {
"type": "nav",
"menu": "none",
"brand": {"href":"/","text":"Benchlist","mark":"layout-grid"},
"links": [["/city/duluth","Duluth"],["/about","About"]],
"cta": {"href":"/list-a-bench","label":"List a bench"},
"search": {"action":"/city/duluth","placeholder":"Kiln, lathe, loom, press"}
}
},
{
"kind": "hero",
"shell": {"inset":"contained","density":"hero"},
"block": {
"type": "hero",
"layout": "centered",
"stack": 640,
"title": "A workbench near you, by the hour.",
"lede": "Kilns, lathes, looms and benches in shared workshops, booked by the hour. Every listing names its tools, its house rules and its hourly rate.",
"actions": [
{"href":"/city/duluth","label":"Browse Duluth","kind":"solid","icon":"map-pin"},
{"href":"/list-a-bench","label":"List a bench","kind":"ghost"}
],
"fine": ["Rates shown before booking","Free cancellation to 24 hours"]
}
},
{
"kind": "band",
"shell": {"inset":"contained","density":"compact"},
"block": {
"type": "stats",
"items": [
{"value":"10","label":"Benches listed in Duluth"},
{"value":"$9","label":"Lowest hourly rate listed"},
{"value":"24 h","label":"Free cancellation before a booking"}
]
}
},
{
"kind": "section",
"shell": {"inset":"contained","density":"section"},
"block": {
"type": "product-list",
"title": "Benches in Duluth, by kind",
"note": "8 kinds",
"view": "cards",
"views": [
{"href":"/","label":"Kinds","icon":"layout-grid","on":true},
{"href":"/city/duluth","label":"List","icon":"list"}
],
"rows": [
{
"href": "/city/duluth?kind=kiln",
"mark": "sparkles",
"name": "Kiln rooms",
"summary": "Electric kilns to cone 10, with shelves and posts. Bisque or glaze.",
"tag": "Clay",
"note": "2 listed, from $18 an hour"
},
{
"href": "/city/duluth?kind=wood",
"mark": "blocks",
"name": "Woodshop benches",
"summary": "Hardwood benches beside a cabinet saw, jointer and planer.",
"tag": "Wood",
"note": "2 listed, from $16 an hour"
},
{
"href": "/city/duluth?kind=metal",
"mark": "gauge",
"name": "Metal bays",
"summary": "A metal lathe with tooling, or a ventilated welding booth.",
"tag": "Metal",
"note": "2 listed, from $24 an hour"
},
{
"href": "/city/duluth?kind=print",
"mark": "files",
"name": "Print presses",
"summary": "A tabletop letterpress with type, or a four-color screen press.",
"tag": "Print",
"note": "2 listed, from $14 an hour"
},
{
"href": "/city/duluth?kind=textile",
"mark": "layers",
"name": "Looms",
"summary": "A four-shaft floor loom, warped on request a day ahead.",
"tag": "Textile",
"note": "1 listed, $12 an hour"
},
{
"href": "/city/duluth?kind=jewelry",
"mark": "badge-check",
"name": "Jewelry benches",
"summary": "A bench pin, flex shaft and torch, in a room with a safe.",
"tag": "Jewelry",
"note": "1 listed, $9 an hour"
},
{
"href": "/list-a-bench",
"mark": "sparkles",
"name": "Glass studios",
"summary": "No glass kiln or torch bench is listed yet. A host who lists one sets its rate.",
"tag": "Glass",
"note": "0 listed"
},
{
"href": "/list-a-bench",
"mark": "film",
"name": "Darkrooms",
"summary": "No darkroom is listed yet. Enlargers, trays and a sink by the hour.",
"tag": "Photo",
"note": "0 listed"
}
]
}
},
{
"kind": "closing",
"shell": {"inset":"contained","density":"closing","surface":"tint"},
"block": {
"type": "closing",
"layout": "split",
"head": {
"eyebrow": "For hosts",
"title": "A bench idle on Tuesdays?",
"lede": "List it with its tools and rules. Benchlist takes 12 percent of each booking and nothing else."
},
"stats": [{"value":"12%","label":"Of each booking"},{"value":"2 days","label":"To review a listing"}],
"actions": [{"href":"/list-a-bench","label":"List a bench","kind":"solid"}]
}
},
{
"kind": "footer",
"shell": {"inset":"contained","density":"footer"},
"block": {
"type": "footer",
"layout": "areas",
"brand": {"href":"/","text":"Benchlist","mark":"layout-grid"},
"blurb": "Shared workshop benches by the hour. Benchlist lists tools and rooms, never people.",
"columns": [
{
"title": "Browse",
"links": [["/city/duluth","Benches in Duluth"],["/bench/kiln-room-4","Kiln room 4"]]
},
{"title":"Hosts","links":[["/list-a-bench","List a bench"],["/about","About"],["/terms","Terms"]]},
{"title":"For agents","links":[["/records.zip","Site records (.zip)"]]}
],
"note": [
"Benchlist is a worked example on mdxui.dev, not a customer.",
"Rendered by @mdxui/site. Search, sorting and forms here do not run."
]
}
}
]
}