Testing Dynamic Blog Post Elements
This is a test post to verify that we can render nice tables, charts, and basic layouts inside CMS articles using standard Markdown along with `json-render` blocks.
1. Standard Markdown Elements
Here is a standard markdown table to verify fallback styling:
Plan Name Provider Rate (¢/kWh) Gexa Saver Deluxe Gexa Energy 11.2 Reliant Basic Power Reliant 14.5 TXU Free Spikes TXU Energy 15.9---
2. Dynamic Charts (json-render + EvilCharts)
Below is an interactive chart compiled dynamically using `json-render` code fences and Recharts:
```json-render
{
"root": "chartCard",
"elements": {
"chartCard": {
"type": "ReuiFrame",
"props": {
"variant": "outline",
"spacing": "comfortable"
},
"children": ["chartHeader", "chartBody"]
},
"chartHeader": {
"type": "ReuiFrameHeader",
"children": ["chartTitle", "chartDesc"]
},
"chartTitle": {
"type": "ReuiFrameTitle",
"props": {
"text": "Electricity Rate Comparison (Dallas, TX)"
}
},
"chartDesc": {
"type": "ReuiFrameDescription",
"props": {
"text": "Compare the average rates of top providers."
}
},
"chartBody": {
"type": "ReuiFrameContent",
"children": ["barChart"]
},
"barChart": {
"type": "BarChart",
"props": {
"xDataKey": "provider",
"barVariant": "gradient",
"chartConfig": {
"rate": {
"label": "Rate (¢/kWh)",
"theme": {
"light": "#2563eb",
"dark": "#3b82f6"
}
}
},
"data": [
{ "provider": "Gexa Energy", "rate": 11.2 },
{ "provider": "Reliant", "rate": 14.5 },
{ "provider": "TXU Energy", "rate": 15.9 },
{ "provider": "Frontier", "rate": 12.8 }
]
}
}
}
}
```
---
3. Dynamic Data Grid (json-render + ReuiDataGrid)
Below is an interactive ReuiDataGrid containing the same data, but supporting paging and sorting:
```json-render
{
"root": "gridCard",
"elements": {
"gridCard": {
"type": "ReuiFrame",
"props": {
"variant": "outline",
"spacing": "comfortable"
},
"children": ["gridBody"]
},
"gridBody": {
"type": "ReuiFrameContent",
"children": ["dataGrid"]
},
"dataGrid": {
"type": "ReuiDataGrid",
"props": {
"pagination": true,
"pageSize": 5,
"sortable": true,
"columns": [
{ "id": "provider", "header": "Provider", "accessorKey": "provider" },
{ "id": "rate", "header": "Rate (¢/kWh)", "accessorKey": "rate" }
],
"data": [
{ "provider": "Gexa Energy", "rate": 11.2 },
{ "provider": "Reliant", "rate": 14.5 },
{ "provider": "TXU Energy", "rate": 15.9 },
{ "provider": "Frontier", "rate": 12.8 },
{ "provider": "Discount Power", "rate": 11.9 }
]
}
}
}
}
```