GitHub user xuang7 added a comment to the discussion: Support customizable
landing/about pages via block composition
Following up with a proposed design and a working prototype. I validated the
approach by rebuilding a landing page from configuration.
### Configuration Format
Each page is represented as a JSON document containing a schema version, an
optional theme, and an ordered list of blocks.
Each block contains:
- `type`: the block component to render
- `config`: block-specific content and behavior
- `layout`: predefined presentation options
```json
{
"schemaVersion": 1,
"theme": {
"accentColor": "#0f766e",
"contentMaxWidth": "1200px"
},
"blocks": [
{
"type": "hero",
"config": {
"title": "Project A",
"subtitle": "...",
"backgroundImage": "assets/hero.png"
},
"layout": {
"width": "full",
"spaceBottom": "md"
}
},
{
"type": "stats",
"config": {
"template": "Browse {datasets} and {workflows} shared by our
community.",
"counters": [
{
"key": "datasets",
"entity": "dataset",
"label": "public datasets"
},
{
"key": "workflows",
"entity": "workflow",
"label": "workflows"
}
]
}
},
{
"type": "dataset-list",
"config": {
"title": "Featured Datasets",
"description": "...",
"source": "ids",
"ids": [12, 34]
}
}
]
}
```
### Architecture
The page configuration is stored in site_settings, with a versioned default
defined in default.conf. The frontend reads and validates the configuration,
applies the page theme, and renders each block using application-owned
components.
Configuration updates go through the ADMIN-only settings endpoint. The backend
validates the document against an allowlist of block types and per-type field
schemas and enforces a maximum configuration size.
Dynamic blocks use the existing search and hub APIs, so the current permission
filtering remains unchanged. Invalid blocks are handled independently, allowing
the rest of the page to continue rendering. If the full configuration is
invalid, the page falls back to the built-in default.
### Block Types for v1
The initial block types may include:
- `hero`: page title, subtitle, and optional background image
- `content`: Markdown content
- `image`: standalone image
- `media-text`: image and text displayed together
- `section-heading`: section title with optional styling
- `link-list`: links displayed as chips or a list
- `stats`: live dataset and workflow statistics
- `embed`: allowlisted video embeds
- `workflow-list`: dynamically selected or explicitly curated workflows
- `dataset-list`: dynamically selected or explicitly curated datasets
- `nav-header`
- `footer`...
List blocks may use sources such as:
- `top-loved`
- `top-cloned`
- `ids` (using explicit IDs supports curated sections without requiring a
tagging feature. Tag-based sources can be added later)
### Layout and Styling
Pages use an ordered, single-column block flow. Each block supports predefined
layout options, such as width, top spacing, and bottom spacing. Page-level
theme options may include colors, content width, and page padding.
The configuration does not allow custom CSS, JavaScript, or uploaded frontend
code.
### Prototype Demo
https://github.com/user-attachments/assets/387f1b90-e623-434a-b236-b98351121b77
GitHub link:
https://github.com/apache/texera/discussions/6726#discussioncomment-17899743
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to: [email protected]
