Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0
article
A reading page: an optional head and share bar, then the body as prose.
Carried by the article and post Templates. Seen on pages/harbor/terms.json, section 1.
{
"kind": "article",
"shell": {
"inset": "article",
"density": "article"
},
"block": {
"type": "article",
"head": {
"title": "Terms"
},
"body": "Harbor tides is a worked example. It shows a whole Site rendered by `@mdxui/site`, and it sells nothing.\n\n## The data\n\nEvery tide on these pages is invented. Never plan a passage from it.\n\n## The records\n\nEach page of this Site is a JSON record served beside its render. Copy any record and rewrite it for your own Business."
}
}
{
"title": "article",
"type": "object",
"properties": {
"type": {
"type": "string",
"const": "article"
},
"head": {
"type": "object",
"properties": {
"back": {
"type": "object",
"properties": {
"href": {
"type": "string",
"minLength": 1,
"maxLength": 160
},
"label": {
"type": "string",
"minLength": 1,
"maxLength": 16
}
},
"required": [
"href",
"label"
],
"additionalProperties": false
},
"tag": {
"type": "string",
"minLength": 1,
"maxLength": 20
},
"dateline": {
"type": "object",
"properties": {
"date": {
"type": "string",
"pattern": "^\\d{4}-\\d{2}-\\d{2}$"
},
"read": {
"type": "object",
"properties": {
"minutes": {
"type": "integer",
"minimum": 1,
"maximum": 180
},
"unit": {
"type": "string",
"minLength": 1,
"maxLength": 12
}
},
"required": [
"minutes",
"unit"
],
"additionalProperties": false
}
},
"required": [
"date"
],
"additionalProperties": false
},
"title": {
"type": "string",
"minLength": 1,
"maxLength": 80
},
"dek": {
"type": "string",
"minLength": 1,
"maxLength": 360
}
},
"required": [
"title"
],
"additionalProperties": false
},
"share": {
"type": "object",
"properties": {
"url": {
"type": "string",
"minLength": 1,
"maxLength": 160
},
"title": {
"type": "string",
"minLength": 1,
"maxLength": 80
},
"label": {
"type": "string",
"minLength": 1,
"maxLength": 16
},
"on": {
"minItems": 1,
"maxItems": 5,
"type": "array",
"items": {
"type": "string",
"enum": [
"reddit",
"x",
"linkedin",
"bluesky",
"hackernews"
]
}
}
},
"required": [
"url",
"title",
"label",
"on"
],
"additionalProperties": false
},
"body": {
"type": "string",
"minLength": 1,
"maxLength": 12000
},
"copy": {
"type": "boolean"
}
},
"required": [
"type",
"body"
],
"additionalProperties": false
}{
"kind": "article",
"shell": { "inset": "article", "density": "article" },
"block": {
"type": "article",
"head": { "title": "Terms" },
"body": "Harbor tides is a worked example. It shows a whole Site rendered by `@mdxui/site`, and it sells nothing.\n\n## The data\n\nEvery tide on these pages is invented. Never plan a passage from it.\n\n## The records\n\nEach page of this Site is a JSON record served beside its render. Copy any record and rewrite it for your own Business."
}
}Smallest that parses
{
"type": "article",
"body": "Harbor tides is a worked example. It shows a whole Site rendered by `@mdxui/site`, and it sells nothing.\n\n## The data\n\nEvery tide on these pages is invented. Never plan a passage from it.\n\n## The records\n\nEach page of this Site is a JSON record served beside its render. Copy any record and rewrite it for your own Business."
}Props
From @mdxui/site@7.0.0-alpha.0. A count reads as min–max × item; a string bound is its maximum length in characters, and links its refusal.
| Prop | Type and bound | Required |
|---|---|---|
head | object | no |
head.back | object | no |
head.back.href | string ≤160 | yes |
head.back.label | string ≤16 | yes |
head.tag | string ≤20 | no |
head.dateline | object | no |
head.dateline.date | string (pattern) | yes |
head.dateline.read | object | no |
head.title | string ≤80 | yes |
head.dek | string ≤360 | no |
share | object | no |
share.url | string ≤160 | yes |
share.title | string ≤80 | yes |
share.label | string ≤16 | yes |
share.on | 1–5 × "reddit" | "x" | "linkedin" | "bluesky" | "hackernews" | yes |
body | string ≤12000 | yes |
copy | boolean | no |
Use instead
text-stack: a few titled paragraphs