Post Format Guide

This document describes how to write and format posts on Bimbel Muda. Posts are written in Markdown and stored in the database. The system uses Marked for parsing and Shiki for syntax highlighting.

Post Fields

When creating a post via the form or API, the following fields are available:

Slug is auto-generated from the title using slugify (lowercase, hyphenated). It is unique per post.
Excerpt is auto-generated from the first 150 characters of content (markdown stripped).
publishedAt is automatically set when status changes to published.

Standard Markdown

All standard Markdown syntax is supported:

# Heading 1
## Heading 2
### Heading 3

**bold text** and _italic text_

- Unordered list item
- Another item
  - Nested item

1. Ordered list
2. Second item

> This is a blockquote.

[Link text](https://example.com)

![Alt text](https://example.com/image.png)

---

Code Snippets

Use fenced code blocks with a language identifier for syntax highlighting. The theme is github-dark.

Supported languages: python, javascript, typescript, bash, sh, json, sql, html, css, markdown, plaintext, r, java, cpp, c, yaml, toml, rust, go

```python
def greet(name):
    return f"Hello, {name}!"

print(greet("World"))
```

```javascript
const add = (a, b) => a + b;
console.log(add(2, 3));
```

```sql
SELECT name, score
FROM students
WHERE score > 80
ORDER BY score DESC;
```

Code Output

To show the output of a code snippet, use the output language tag immediately after the code block. The output block renders with a dark background and green text styled to look like a terminal.

```python
print("Hello, World!")
```

```output
Hello, World!
```

The output block attaches visually to the code block above it (rounded bottom corners, no gap).

Only use output for terminal/console output. It is not a general code block.

Charts

Interactive charts are rendered using Plotly.js. Use the chart language tag with a valid JSON object describing the chart spec.

The JSON object supports two top-level keys:

• data — array of Plotly trace objects (required)
• layout — Plotly layout object (optional)

```chart
{
  "data": [
    {
      "x": ["Jan", "Feb", "Mar", "Apr"],
      "y": [120, 95, 140, 110],
      "type": "bar",
      "name": "Sales"
    }
  ],
  "layout": {
    "title": "Monthly Sales",
    "xaxis": { "title": "Month" },
    "yaxis": { "title": "Sales (IDR)" }
  }
}
```

Chart Types

Any Plotly trace type is supported. Common examples:

Line chart:

```chart
{
  "data": [
    {
      "x": [1, 2, 3, 4, 5],
      "y": [10, 25, 18, 40, 32],
      "type": "scatter",
      "mode": "lines+markers",
      "name": "Revenue"
    }
  ],
  "layout": {
    "title": "Revenue Over Time"
  }
}
```

Scatter plot:

```chart
{
  "data": [
    {
      "x": [1, 2, 3, 4],
      "y": [10, 11, 12, 13],
      "mode": "markers",
      "type": "scatter",
      "name": "Data Points"
    }
  ]
}
```

Pie chart (Rendered):

{
  "data": [
    {
      "labels": ["Python", "JavaScript", "SQL"],
      "values": [40, 35, 25],
      "type": "pie"
    }
  ],
  "layout": {
    "title": "Language Usage"
  }
}

Chart Notes

• Charts are rendered client-side by Plotly.js — they are interactive (hover, zoom, pan).
• Default chart height is 400px.
• paper_bgcolor and plot_bgcolor default to transparent to match the post background.
• Invalid JSON will cause the chart to silently fail to render — always validate the JSON before saving.

Full Post Example

Below is a complete example combining all elements:

# Analyzing Student Scores with Python

In this post, we explore a simple dataset of student scores and visualize the distribution.

## Loading the Data

```python
import pandas as pd

data = {"name": ["Alice", "Bob", "Charlie"], "score": [88, 72, 95]}
df = pd.DataFrame(data)
print(df)
```

```output
      name  score
0    Alice     88
1      Bob     72
2  Charlie     95
```

## Score Distribution

```chart
{
  "data": [
    {
      "x": ["Alice", "Bob", "Charlie"],
      "y": [88, 72, 95],
      "type": "bar",
      "marker": { "color": ["#4a9a4a", "#888", "#4a9a4a"] }
    }
  ],
  "layout": {
    "title": "Student Scores",
    "yaxis": { "title": "Score", "range": [0, 100] }
  }
}
```

## Observations

- **Charlie** scored highest at 95.
- **Bob** is below the group average.
- Average score: `(88 + 72 + 95) / 3 = 85`

Summary