amelki
Creating different pages with components
Use case: I'd like to be able to create different pages with components
Issue: At the child level the array only supports strings, so there is no way to create a different page layout as far as I can tell
Desired outcome Being able to generate something like the following would be great:
"pages": [
{
"key": "Home",
"heading": "Home Page",
"items": [
{
"id": "1"
"type": "carousel",
"images": [
{ src: "", alt: ""},
]
},
{
"key": "2",
"type": "table",
"title": "my table"
"items": [
{
"type": "tableRow"
"title": "My title",
"description": "My description"
}
]
}
]
},
{
"key": "About Us Page",
"heading": "About Us",
"items": [
{
"key": "2",
"type": "image",
"src": "",
"alt": "",
"caption": "My image caption"
},
{
"id": "1"
"type": "markdown",
"markdown": "My markdown text"
}
]
}
]
In the current version, the best piece of JSON you could end up with would be:
{
"pages": {
"home": {
"1": {
"type": "carousel",
"images": [
{
"src": "foo",
"alt": "bar"
}
]
},
"2": {
"type": "table",
"title": "my table",
"items": [
{
"type": "tableRow",
"title": "My title",
"description": "My description"
}
]
},
"heading": "Home Page"
},
"about_us": {
"heading": "About Us",
"items": {
"1": {
"type": "markdown",
"markdown": "My markdown text"
},
"2": {
"type": "image",
"src": "hello",
"caption": "my image caption"
}
}
}
}
}
Using the following schema:
{
"$schema": "http://json-schema.org/draft-06/schema#",
"type": "object",
"title": "My Web Site",
"properties": {
"pages": {
"type": "object",
"properties": {
"home": {
"type": "object",
"properties": {
"1": {
"type": "object",
"properties": {
"type": {
"type": "string",
"title": "type"
},
"images": {
"type": "array",
"properties": {},
"title": "images",
"items": {
"type": "object",
"properties": {
"src": {
"type": "string",
"title": "src"
},
"alt": {
"type": "string",
"title": "alt"
}
}
}
}
},
"title": "1"
},
"2": {
"type": "object",
"properties": {
"type": {
"type": "string",
"title": "type"
},
"title": {
"type": "string",
"title": "title"
},
"items": {
"type": "array",
"properties": {},
"title": "items",
"items": {
"type": "object",
"properties": {
"type": {
"type": "string",
"title": "type"
},
"title": {
"type": "string",
"title": "title"
},
"description": {
"type": "string",
"title": "description"
}
}
}
}
},
"title": "2"
},
"heading": {
"type": "string",
"title": "Heading"
}
},
"title": "Home"
},
"about_us": {
"type": "object",
"properties": {
"heading": {
"type": "string",
"title": "heading"
},
"items": {
"type": "object",
"properties": {
"1": {
"type": "object",
"properties": {
"type": {
"type": "string",
"title": "type"
},
"markdown": {
"type": "string",
"title": "markdown"
}
},
"title": "1"
},
"2": {
"type": "object",
"properties": {
"type": {
"type": "string",
"title": "type"
},
"src": {
"type": "string",
"title": "src"
},
"alt": {
"type": "string",
"title": "alt",
"description": "world"
},
"caption": {
"type": "string",
"title": "caption"
}
},
"title": "2"
}
},
"title": "items"
}
},
"title": "About Us"
}
},
"title": "Pages"
}
}
}
In order to reach the exact same structure as in your sample, it would require to implement 3 enhancements, that I have just registered: #11 #12 #13. I will definitely address #11 soon. The others are trickier, especially in term of UI, so I need to get a bit more feedback in order to dig deeper into them.
