Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0
List a directory
A listing page with a rail, sort and pager, and a page per listing with its facts and plans, built like Benchlist.
A directory is two Templates: directory-list, the rows a reader scans, and directory-product, the page each row opens. Benchlist lists shared workshop benches by the hour this way.
Prerequisites
- A Site's
navandfooter, from Build a landing page. - One record per listing, written from your own catalog of things: benches, rooms, integrations.
List what you carry
product-list holds up to 50 rows a page. Each row links to its listing and carries a name of 32 characters, a summary of 120, a tag of 24 and a note of 32. view sets the rows as a list or as a grid of cards.
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "directory",
"frame": "none",
"template": "directory-list",
"title": "Benches in Duluth · Benchlist",
"description": "Ten shared workshop benches in Duluth, each with its tools, rules and hourly rate.",
"sections": [
… 2 more sections
{sections.2 · product-list
"kind": "section",
"shell": { "inset": "listing", "density": "listing" },
"block": {
"type": "product-list",
"note": "10 benches",
"rail": {
"groups": [
{
"label": "Kind",
"links": [
{
"href": "/city/duluth",
"label": "All benches",
"on": true,
"count": 10
},
{
"href": "/city/duluth?kind=kiln",
"label": "Kiln rooms",
"count": 2
},
{
"href": "/city/duluth?kind=wood",
"label": "Woodshop",
"count": 2
},
{
"href": "/city/duluth?kind=metal",
"label": "Metal",
"count": 2
},
{
"href": "/city/duluth?kind=print",
"label": "Print",
"count": 2
},
{
"href": "/city/duluth?kind=textile",
"label": "Textile",
"count": 1
},
{
"href": "/city/duluth?kind=jewelry",
"label": "Jewelry",
"count": 1
}
]
},
{
"label": "Neighborhood",
"links": [
{
"href": "/city/duluth?near=lincoln-park",
"label": "Lincoln Park",
"count": 4
},
{
"href": "/city/duluth?near=canal-park",
"label": "Canal Park",
"count": 3
},
{
"href": "/city/duluth?near=lakeside",
"label": "Lakeside",
"count": 3
}
]
}
]
},
"sort": [
{ "href": "/city/duluth", "label": "Nearest", "on": true },
{ "href": "/city/duluth?sort=rate", "label": "Hourly rate" },
{ "href": "/city/duluth?sort=new", "label": "Newest" }
],
"view": "list",
"views": [
{
"href": "/city/duluth",
"label": "List",
"icon": "list",
"on": true
},
{ "href": "/", "label": "Kinds", "icon": "layout-grid" }
],
"rows": [
{
"href": "/bench/kiln-room-4",
"mark": "sparkles",
"name": "Kiln room 4",
"summary": "Two electric kilns to cone 10 in a shared clay studio. Shelves, posts and witness cones included.",
"tag": "Kiln room",
"note": "$22 an hour · Lincoln Park"
},
{
"href": "/404",
"mark": "sparkles",
"name": "Kiln room 2",
"summary": "One front-loading kiln to cone 6, with a glaze table beside it.",
"tag": "Kiln room",
"note": "$18 an hour · Lincoln Park"
},
{
"href": "/404",
"mark": "blocks",
"name": "Woodshop bench 2",
"summary": "A seven-foot maple bench beside a cabinet saw, jointer and planer.",
"tag": "Woodshop",
"note": "$16 an hour · Canal Park"
},
{
"href": "/404",
"mark": "blocks",
"name": "CNC router bed",
"summary": "A four by eight foot bed. A one-hour induction comes first.",
"tag": "Woodshop",
"note": "$38 an hour · Canal Park"
},
{
"href": "/404",
"mark": "gauge",
"name": "Lathe bay 1",
"summary": "A 12-inch metal lathe with tooling. Safety glasses on the wall.",
"tag": "Metal",
"note": "$24 an hour · Lakeside"
},
{
"href": "/404",
"mark": "gauge",
"name": "Welding bay 3",
"summary": "MIG and TIG in a ventilated booth. Bring your own helmet.",
"tag": "Metal",
"note": "$28 an hour · Lakeside"
},
{
"href": "/404",
"mark": "files",
"name": "Letterpress 1",
"summary": "A tabletop press with two cases of type, ink and rollers.",
"tag": "Print",
"note": "$14 an hour · Canal Park"
},
{
"href": "/404",
"mark": "files",
"name": "Screen print table",
"summary": "A four-color press and an exposure unit, booked by the half day.",
"tag": "Print",
"note": "$20 an hour · Lincoln Park"
},
{
"href": "/404",
"mark": "layers",
"name": "Loom 2",
"summary": "A four-shaft floor loom, warped on request a day ahead.",
"tag": "Textile",
"note": "$12 an hour · Lakeside"
},
{
"href": "/404",
"mark": "badge-check",
"name": "Jewelry bench 1",
"summary": "A bench pin, flex shaft and torch, in a room with a safe.",
"tag": "Jewelry",
"note": "$9 an hour · Lincoln Park"
}
],
"pager": { "page": 1, "pages": 1 }
}
},
… 2 more sections
]
}
Let readers narrow it
The rail holds up to four groups of links with counts, the sort up to four links, and the pager a previous and a next address. Every control is a link to another address, so each filter, order and page is its own record, and no script runs.
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "directory",
"frame": "none",
"template": "directory-list",
"title": "Benches in Duluth · Benchlist",
"description": "Ten shared workshop benches in Duluth, each with its tools, rules and hourly rate.",
"sections": [
… 2 more sections
{sections.2 · product-list
"kind": "section",
"shell": { "inset": "listing", "density": "listing" },
"block": {
"type": "product-list",
"note": "10 benches",
"rail": {
"groups": [
{
"label": "Kind",
"links": [
{
"href": "/city/duluth",
"label": "All benches",
"on": true,
"count": 10
},
{
"href": "/city/duluth?kind=kiln",
"label": "Kiln rooms",
"count": 2
},
{
"href": "/city/duluth?kind=wood",
"label": "Woodshop",
"count": 2
},
{
"href": "/city/duluth?kind=metal",
"label": "Metal",
"count": 2
},
{
"href": "/city/duluth?kind=print",
"label": "Print",
"count": 2
},
{
"href": "/city/duluth?kind=textile",
"label": "Textile",
"count": 1
},
{
"href": "/city/duluth?kind=jewelry",
"label": "Jewelry",
"count": 1
}
]
},
{
"label": "Neighborhood",
"links": [
{
"href": "/city/duluth?near=lincoln-park",
"label": "Lincoln Park",
"count": 4
},
{
"href": "/city/duluth?near=canal-park",
"label": "Canal Park",
"count": 3
},
{
"href": "/city/duluth?near=lakeside",
"label": "Lakeside",
"count": 3
}
]
}
]
},
"sort": [
{ "href": "/city/duluth", "label": "Nearest", "on": true },
{ "href": "/city/duluth?sort=rate", "label": "Hourly rate" },
{ "href": "/city/duluth?sort=new", "label": "Newest" }
],
"view": "list",
"views": [
{
"href": "/city/duluth",
"label": "List",
"icon": "list",
"on": true
},
{ "href": "/", "label": "Kinds", "icon": "layout-grid" }
],
"rows": [
{
"href": "/bench/kiln-room-4",
"mark": "sparkles",
"name": "Kiln room 4",
"summary": "Two electric kilns to cone 10 in a shared clay studio. Shelves, posts and witness cones included.",
"tag": "Kiln room",
"note": "$22 an hour · Lincoln Park"
},
{
"href": "/404",
"mark": "sparkles",
"name": "Kiln room 2",
"summary": "One front-loading kiln to cone 6, with a glaze table beside it.",
"tag": "Kiln room",
"note": "$18 an hour · Lincoln Park"
},
{
"href": "/404",
"mark": "blocks",
"name": "Woodshop bench 2",
"summary": "A seven-foot maple bench beside a cabinet saw, jointer and planer.",
"tag": "Woodshop",
"note": "$16 an hour · Canal Park"
},
{
"href": "/404",
"mark": "blocks",
"name": "CNC router bed",
"summary": "A four by eight foot bed. A one-hour induction comes first.",
"tag": "Woodshop",
"note": "$38 an hour · Canal Park"
},
{
"href": "/404",
"mark": "gauge",
"name": "Lathe bay 1",
"summary": "A 12-inch metal lathe with tooling. Safety glasses on the wall.",
"tag": "Metal",
"note": "$24 an hour · Lakeside"
},
{
"href": "/404",
"mark": "gauge",
"name": "Welding bay 3",
"summary": "MIG and TIG in a ventilated booth. Bring your own helmet.",
"tag": "Metal",
"note": "$28 an hour · Lakeside"
},
{
"href": "/404",
"mark": "files",
"name": "Letterpress 1",
"summary": "A tabletop press with two cases of type, ink and rollers.",
"tag": "Print",
"note": "$14 an hour · Canal Park"
},
{
"href": "/404",
"mark": "files",
"name": "Screen print table",
"summary": "A four-color press and an exposure unit, booked by the half day.",
"tag": "Print",
"note": "$20 an hour · Lincoln Park"
},
{
"href": "/404",
"mark": "layers",
"name": "Loom 2",
"summary": "A four-shaft floor loom, warped on request a day ahead.",
"tag": "Textile",
"note": "$12 an hour · Lakeside"
},
{
"href": "/404",
"mark": "badge-check",
"name": "Jewelry bench 1",
"summary": "A bench pin, flex shaft and torch, in a room with a safe.",
"tag": "Jewelry",
"note": "$9 an hour · Lincoln Park"
}
],
"pager": { "page": 1, "pages": 1 }
}
},
… 2 more sections
]
}
Give each listing a page
product-head opens the listing: a name of 32, a summary of 120, up to nine chips and one or two actions.
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "directory",
"frame": "split",
"template": "directory-product",
"title": "Kiln room 4 · Benchlist",
"description": "Two electric kilns to cone 10 in a shared clay studio in Lincoln Park, Duluth. $22 an hour.",
"sections": [
… 1 more section
{sections.1 · product-head
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "product-head",
"mark": "sparkles",
"name": "Kiln room 4",
"summary": "Two electric kilns to cone 10 in a shared clay studio in Lincoln Park, Duluth.",
"chips": [
{ "label": "Kiln room", "href": "/city/duluth?kind=kiln" },
{ "label": "Duluth", "href": "/city/duluth" },
{ "label": "Lincoln Park" },
{ "label": "Cone 10" }
],
"actions": [
{
"href": "mailto:kiln-room-4@benchlist.example?subject=Booking%20Kiln%20room%204",
"label": "Book by email",
"kind": "solid"
},
{ "href": "#rates", "label": "See the rates", "kind": "ghost" }
]
}
},
{sections.2 · facts
"kind": "section",
"shell": { "inset": "contained", "density": "section", "aside": true },
"block": {
"type": "facts",
"title": "At a glance",
"items": [
{ "label": "Rate", "value": "$22 an hour" },
{ "label": "Minimum", "value": "4 hours" },
{ "label": "Kilns", "value": "2 electric, to cone 10" },
{ "label": "Each holds", "value": "7 cubic feet" },
{ "label": "Open", "value": "07:00 to 22:00, daily" },
{ "label": "Access", "value": "Door code by text" },
{
"label": "Where",
"value": "Lincoln Park, Duluth",
"href": "/city/duluth"
},
{ "label": "Listing", "value": "KR-4", "code": true }
]
}
},
… 4 more sections
]
}
State its facts
facts holds up to 16 rows, a label of 24 and a value of 80 each, for what a reader compares: size, hours, address, what is included.
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "directory",
"frame": "split",
"template": "directory-product",
"title": "Kiln room 4 · Benchlist",
"description": "Two electric kilns to cone 10 in a shared clay studio in Lincoln Park, Duluth. $22 an hour.",
"sections": [
… 1 more section
{sections.1 · product-head
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "product-head",
"mark": "sparkles",
"name": "Kiln room 4",
"summary": "Two electric kilns to cone 10 in a shared clay studio in Lincoln Park, Duluth.",
"chips": [
{ "label": "Kiln room", "href": "/city/duluth?kind=kiln" },
{ "label": "Duluth", "href": "/city/duluth" },
{ "label": "Lincoln Park" },
{ "label": "Cone 10" }
],
"actions": [
{
"href": "mailto:kiln-room-4@benchlist.example?subject=Booking%20Kiln%20room%204",
"label": "Book by email",
"kind": "solid"
},
{ "href": "#rates", "label": "See the rates", "kind": "ghost" }
]
}
},
{sections.2 · facts
"kind": "section",
"shell": { "inset": "contained", "density": "section", "aside": true },
"block": {
"type": "facts",
"title": "At a glance",
"items": [
{ "label": "Rate", "value": "$22 an hour" },
{ "label": "Minimum", "value": "4 hours" },
{ "label": "Kilns", "value": "2 electric, to cone 10" },
{ "label": "Each holds", "value": "7 cubic feet" },
{ "label": "Open", "value": "07:00 to 22:00, daily" },
{ "label": "Access", "value": "Door code by text" },
{
"label": "Where",
"value": "Lincoln Park, Duluth",
"href": "/city/duluth"
},
{ "label": "Listing", "value": "KR-4", "code": true }
]
}
},
… 4 more sections
]
}
Add its plans
A listing that sells by the hour or the month ends on pricing, as on Build a pricing page.
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "directory",
"frame": "split",
"template": "directory-product",
"title": "Kiln room 4 · Benchlist",
"description": "Two electric kilns to cone 10 in a shared clay studio in Lincoln Park, Duluth. $22 an hour.",
"sections": [
… 1 more section
{sections.1 · product-head
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "product-head",
"mark": "sparkles",
"name": "Kiln room 4",
"summary": "Two electric kilns to cone 10 in a shared clay studio in Lincoln Park, Duluth.",
"chips": [
{ "label": "Kiln room", "href": "/city/duluth?kind=kiln" },
{ "label": "Duluth", "href": "/city/duluth" },
{ "label": "Lincoln Park" },
{ "label": "Cone 10" }
],
"actions": [
{
"href": "mailto:kiln-room-4@benchlist.example?subject=Booking%20Kiln%20room%204",
"label": "Book by email",
"kind": "solid"
},
{ "href": "#rates", "label": "See the rates", "kind": "ghost" }
]
}
},
{sections.2 · facts
"kind": "section",
"shell": { "inset": "contained", "density": "section", "aside": true },
"block": {
"type": "facts",
"title": "At a glance",
"items": [
{ "label": "Rate", "value": "$22 an hour" },
{ "label": "Minimum", "value": "4 hours" },
{ "label": "Kilns", "value": "2 electric, to cone 10" },
{ "label": "Each holds", "value": "7 cubic feet" },
{ "label": "Open", "value": "07:00 to 22:00, daily" },
{ "label": "Access", "value": "Door code by text" },
{
"label": "Where",
"value": "Lincoln Park, Duluth",
"href": "/city/duluth"
},
{ "label": "Listing", "value": "KR-4", "code": true }
]
}
},
… 4 more sections
]
}
Result
The Result is the list page. Open the render: every row, sort and page link goes to another page of the same Site.
Benchlist › city/duluth · directoryOpen the render
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "directory",
"frame": "none",
"template": "directory-list",
"title": "Benches in Duluth · Benchlist",
"description": "Ten shared workshop benches in Duluth, each with its tools, rules and hourly rate.",
"sections": [
… 2 more sections
{sections.2 · product-list
"kind": "section",
"shell": { "inset": "listing", "density": "listing" },
"block": {
"type": "product-list",
"note": "10 benches",
"rail": {
"groups": [
{
"label": "Kind",
"links": [
{
"href": "/city/duluth",
"label": "All benches",
"on": true,
"count": 10
},
{
"href": "/city/duluth?kind=kiln",
"label": "Kiln rooms",
"count": 2
},
{
"href": "/city/duluth?kind=wood",
"label": "Woodshop",
"count": 2
},
{
"href": "/city/duluth?kind=metal",
"label": "Metal",
"count": 2
},
{
"href": "/city/duluth?kind=print",
"label": "Print",
"count": 2
},
{
"href": "/city/duluth?kind=textile",
"label": "Textile",
"count": 1
},
{
"href": "/city/duluth?kind=jewelry",
"label": "Jewelry",
"count": 1
}
]
},
{
"label": "Neighborhood",
"links": [
{
"href": "/city/duluth?near=lincoln-park",
"label": "Lincoln Park",
"count": 4
},
{
"href": "/city/duluth?near=canal-park",
"label": "Canal Park",
"count": 3
},
{
"href": "/city/duluth?near=lakeside",
"label": "Lakeside",
"count": 3
}
]
}
]
},
"sort": [
{ "href": "/city/duluth", "label": "Nearest", "on": true },
{ "href": "/city/duluth?sort=rate", "label": "Hourly rate" },
{ "href": "/city/duluth?sort=new", "label": "Newest" }
],
"view": "list",
"views": [
{
"href": "/city/duluth",
"label": "List",
"icon": "list",
"on": true
},
{ "href": "/", "label": "Kinds", "icon": "layout-grid" }
],
"rows": [
{
"href": "/bench/kiln-room-4",
"mark": "sparkles",
"name": "Kiln room 4",
"summary": "Two electric kilns to cone 10 in a shared clay studio. Shelves, posts and witness cones included.",
"tag": "Kiln room",
"note": "$22 an hour · Lincoln Park"
},
{
"href": "/404",
"mark": "sparkles",
"name": "Kiln room 2",
"summary": "One front-loading kiln to cone 6, with a glaze table beside it.",
"tag": "Kiln room",
"note": "$18 an hour · Lincoln Park"
},
{
"href": "/404",
"mark": "blocks",
"name": "Woodshop bench 2",
"summary": "A seven-foot maple bench beside a cabinet saw, jointer and planer.",
"tag": "Woodshop",
"note": "$16 an hour · Canal Park"
},
{
"href": "/404",
"mark": "blocks",
"name": "CNC router bed",
"summary": "A four by eight foot bed. A one-hour induction comes first.",
"tag": "Woodshop",
"note": "$38 an hour · Canal Park"
},
{
"href": "/404",
"mark": "gauge",
"name": "Lathe bay 1",
"summary": "A 12-inch metal lathe with tooling. Safety glasses on the wall.",
"tag": "Metal",
"note": "$24 an hour · Lakeside"
},
{
"href": "/404",
"mark": "gauge",
"name": "Welding bay 3",
"summary": "MIG and TIG in a ventilated booth. Bring your own helmet.",
"tag": "Metal",
"note": "$28 an hour · Lakeside"
},
{
"href": "/404",
"mark": "files",
"name": "Letterpress 1",
"summary": "A tabletop press with two cases of type, ink and rollers.",
"tag": "Print",
"note": "$14 an hour · Canal Park"
},
{
"href": "/404",
"mark": "files",
"name": "Screen print table",
"summary": "A four-color press and an exposure unit, booked by the half day.",
"tag": "Print",
"note": "$20 an hour · Lincoln Park"
},
{
"href": "/404",
"mark": "layers",
"name": "Loom 2",
"summary": "A four-shaft floor loom, warped on request a day ahead.",
"tag": "Textile",
"note": "$12 an hour · Lakeside"
},
{
"href": "/404",
"mark": "badge-check",
"name": "Jewelry bench 1",
"summary": "A bench pin, flex shaft and torch, in a room with a safe.",
"tag": "Jewelry",
"note": "$9 an hour · Lincoln Park"
}
],
"pager": { "page": 1, "pages": 1 }
}
},
… 2 more sections
]
}
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "directory",
"frame": "split",
"template": "directory-product",
"title": "Kiln room 4 · Benchlist",
"description": "Two electric kilns to cone 10 in a shared clay studio in Lincoln Park, Duluth. $22 an hour.",
"sections": [
… 1 more section
{sections.1 · product-head
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "product-head",
"mark": "sparkles",
"name": "Kiln room 4",
"summary": "Two electric kilns to cone 10 in a shared clay studio in Lincoln Park, Duluth.",
"chips": [
{ "label": "Kiln room", "href": "/city/duluth?kind=kiln" },
{ "label": "Duluth", "href": "/city/duluth" },
{ "label": "Lincoln Park" },
{ "label": "Cone 10" }
],
"actions": [
{
"href": "mailto:kiln-room-4@benchlist.example?subject=Booking%20Kiln%20room%204",
"label": "Book by email",
"kind": "solid"
},
{ "href": "#rates", "label": "See the rates", "kind": "ghost" }
]
}
},
{sections.2 · facts
"kind": "section",
"shell": { "inset": "contained", "density": "section", "aside": true },
"block": {
"type": "facts",
"title": "At a glance",
"items": [
{ "label": "Rate", "value": "$22 an hour" },
{ "label": "Minimum", "value": "4 hours" },
{ "label": "Kilns", "value": "2 electric, to cone 10" },
{ "label": "Each holds", "value": "7 cubic feet" },
{ "label": "Open", "value": "07:00 to 22:00, daily" },
{ "label": "Access", "value": "Door code by text" },
{
"label": "Where",
"value": "Lincoln Park, Duluth",
"href": "/city/duluth"
},
{ "label": "Listing", "value": "KR-4", "code": true }
]
}
},
… 4 more sections
]
}
Benchlist › city/duluth · directoryOpen the render