Rendering Showcase
This post verifies rich rendering support in the blog.
1) Image
2) Embedded Map
3) Flowchart (Mermaid)
flowchart TD
A[Draft Idea] --> B[Write Markdown]
B --> C[Review & Edit]
C --> D[Publish to Turso DB]
D --> E[Render in Astro]
4) Diagram (Mermaid Sequence)
sequenceDiagram
participant Admin
participant API
participant Turso
Admin->>API: POST /api/admin/posts
API->>Turso: INSERT post + categories
Turso-->>API: OK
API-->>Admin: success response
5) Chart (Chart.js)
{
"type": "line",
"data": {
"labels": ["Mon", "Tue", "Wed", "Thu", "Fri"],
"datasets": [{
"label": "Page Views",
"data": [120, 180, 160, 240, 310],
"borderColor": "#7aa2ff",
"backgroundColor": "rgba(122,162,255,0.2)",
"fill": true
}]
}
}
6) Data Driven (D3.js)
{
"type": "bar",
"width": 760,
"height": 360,
"color": "#84d5ea",
"data": [
{ "label": "A", "value": 12 },
{ "label": "B", "value": 25 },
{ "label": "C", "value": 19 },
{ "label": "D", "value": 31 }
]
}
7) SVG Render Block
<svg viewBox="0 0 420 150" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="410" height="140" rx="10" fill="#0b1120" stroke="#7aa2ff"/>
<circle cx="60" cy="75" r="36" fill="#7aa2ff" />
<path d="M140 95 Q 200 20 280 90 T 390 80" fill="none" stroke="#84d5ea" stroke-width="6"/>
<text x="120" y="80" fill="#e7ecff" font-size="22" font-family="Fira Code">SVG inline render</text>
</svg>
8) Math Equations (KaTeX)
Inline equation: $E = mc^2$.
Block equation:
$$ \nabla \cdot \vec{E} = \frac{\rho}{\varepsilon_0} $$
And another one:
$$ \int_{0}^{\infty} e^{-x^2} , dx = \frac{\sqrt{\pi}}{2} $$
9) Direct Link Video Support
MP4 link:
https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4
YouTube link:
