bangunai-blog-manager

What this skill does

# BangunAI Blog Manager (Digital Garden + Content Workflow)

**Homepage:** React 18 + Vite + MDX + shadcn/ui  
**Blog Root:** `/home/hades/BangunAI-Blog`  
**Content Root:** `/home/hades/BangunAI-Blog/src/content`  
**Tech Stack:** TypeScript, Tailwind CSS, Mermaid 11, KaTeX, Shiki

Skill ini menggabungkan:
- workflow custom untuk blog content (daily, fetch style, universal writer, logging, smart read)
- MDX authoring untuk React-based digital garden
- Obsidian-like features (callouts, mermaid diagrams, LaTeX math, wikilinks, backlinks)
- Auto-import system via `import.meta.glob`

---

## 🌿 BangunAI Blog Fundamentals

Blog ini adalah **Digital Garden & Knowledge Base** dengan fitur terinspirasi dari Obsidian.

### Struktur Proyek

```
/home/hades/BangunAI-Blog/
├── src/
│   ├── content/
│   │   ├── writing/       # Blog posts (notes, essays)
│   │   ├── articles/      # Technical articles, tutorials
│   │   ├── read/          # Reading notes, link curation
│   │   ├── daily/         # Daily notes (tasks, logs)
│   │   ├── about.mdx      # About page (single file)
│   │   ├── now.mdx        # Now page (current activities)
│   │   └── index.ts       # Auto-import loader
│   ├── components/        # React components (40+ shadcn/ui)
│   │   ├── Callout.tsx    # 14 tipe callouts
│   │   ├── MermaidDiagram.tsx  # Mermaid renderer
│   │   ├── WikiLink.tsx   # Internal linking
│   │   ├── Backlinks.tsx  # Auto backlinks
│   │   ├── GraphView.tsx  # Knowledge graph
│   │   └── ui/            # shadcn/ui components
│   ├── pages/             # Route pages
│   ├── lib/               # Utilities
│   │   ├── date.ts        # Date formatting
│   │   └── utils.ts       # Class utilities
│   └── data/
│       ├── posts.ts       # Helper functions
│       └── types.ts       # TypeScript types
├── public/                # Static assets
├── skill/                 # Agent skills (this!)
└── package.json           # Dependencies
```

### Content Types

| Type | Description | Location | Features |
|------|-------------|----------|----------|
| **Writing** | Personal notes, essays | `src/content/writing/` | Filter by type (note/essay), category, tags |
| **Articles** | Technical tutorials, guides | `src/content/articles/` | Grouped by year |
| **Read** | Curated readings with notes | `src/content/read/` | Source URL, snippet, tags |
| **Daily** | Daily notes, tasks, logs | `src/content/daily/` | Rollover tasks, timestamps |
| **About** | About page (MDX) | `src/content/about.mdx` | Single static page |
| **Now** | Current activities | `src/content/now.mdx` | Updated regularly |

### Auto-Import System

File `src/content/index.ts` auto-detect semua `.mdx` files via `import.meta.glob`:

```typescript
// NO MANUAL REGISTRATION NEEDED!
const writingModules = import.meta.glob("./writing/*.mdx", { eager: true });
const articleModules = import.meta.glob("./articles/*.mdx", { eager: true });
const readModules = import.meta.glob("./read/*.mdx", { eager: true });
```

**Benefits:** Create file → Auto-detected → Available immediately

---

## 📝 Frontmatter Formats

### Format A: Standard Posts (writing, articles, daily)

```yaml
---
title: "Judul Artikel Yang Menarik"
slug: judul-artikel-yang-menarik
summary: "Ringkasan singkat 1-2 kalimat yang compelling."
type: note                # note | essay | article
category: Tech            # Tech | Refleksi | Produktivitas | Linux | Coding | Life
tags: [react, typescript, tutorial]
date: "2026-02-11T14:30:00"
readingTime: 5
featured: false           # (optional) untuk featured posts
---
```

**Required Fields:**
- `title` — Judul artikel (string)
- `slug` — URL-friendly slug (kebab-case)
- `summary` — Deskripsi singkat, compelling (1-2 kalimat)
- `type` — Jenis konten:
  - `note` — Catatan pendek, quick takes
  - `essay` — Tulisan mendalam, eksploratif
  - `article` — Tutorial, panduan terstruktur
- `category` — Kategori utama (pilih salah satu):
  - `Tech` — Teknologi, programming, tools
  - `Refleksi` — Personal reflection, thoughts
  - `Produktivitas` — Productivity, workflow
  - `Linux` — Linux, terminal, sysadmin
  - `Coding` — Coding practices, patterns
  - `Life` — Lifestyle, experiences
- `tags` — Array tags (lowercase, kebab-case)
- `date` — ISO timestamp dengan jam (`YYYY-MM-DDTHH:mm:ss`)
- `readingTime` — Estimasi menit baca (~200 kata/menit)

**Optional Fields:**
- `featured` — Boolean, untuk featured posts di homepage

### Format B: Read Items (read/)

```yaml
---
title: "Judul Artikel/Bacaan"
slug: judul-artikel-bacaan
snippet: "Quote atau snippet menarik dari artikel (1-2 kalimat)."
source: "nama-situs.com"
url: "https://link-ke-artikel.com"
tags: [programming, career]
date: "2026-02-11T18:00:00"
---

## Catatan Personal (Optional)

Komentar atau catatan tentang bacaan ini...
```

**Required Fields:**
- `title` — Judul artikel (string)
- `slug` — URL-friendly slug (kebab-case)
- `snippet` — Quote/excerpt menarik dari artikel
- `source` — Domain sumber (e.g., `github.com`, `dev.to`)
- `url` — Link lengkap ke artikel asli
- `tags` — Array tags (lowercase)
- `date` — ISO timestamp

**Body Content:** Optional, untuk catatan personal

### Format C: Special Pages (about, now)

```yaml
---
title: "About"  # atau "Now"
---

Content langsung di sini...
Mendukung semua fitur MDX (callouts, highlight, mermaid, dll).
```

**Minimal frontmatter:** Hanya `title`

---

## 🧩 MDX Components Available

### 1. Callouts (14 Types)

```mdx
<Callout type="info" title="Judul Callout">
Isi callout di sini.
</Callout>
```

**Available types:**
- `info` — Informasi umum (biru)
- `tip` — Tips & tricks (hijau)
- `warning` — Peringatan (kuning)
- `danger` — Danger/error (merah)
- `success` — Success message (hijau cerah)
- `note` — Catatan (abu-abu)
- `example` — Contoh (ungu)
- `bug` — Bug report (merah)
- `question` — Pertanyaan (biru muda)
- `abstract` — Abstract/summary (indigo)
- `important` — Penting (orange)
- `caution` — Hati-hati (kuning gelap)
- `quote` — Kutipan (krem)
- `cite` — Sitasi (krem gelap)

**Obsidian Blockquote Syntax:**
```mdx
> [!info] Judul Callout
> Isi callout menggunakan sintaks Obsidian.
```

### 2. Mermaid Diagrams

````mdx
```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]
```
````

**Supported diagrams (Mermaid v11):**
- `graph` / `flowchart` — Flowchart
- `sequenceDiagram` — Sequence diagram
- `pie` — Pie chart
- `classDiagram` — UML class diagram
- `stateDiagram-v2` — UML state diagram
- `erDiagram` — Entity relationship diagram
- `gantt` — Gantt chart
- `mindmap` — Mind map
- `timeline` — Timeline

**Features:**
- Auto-render dengan tema terang/gelap
- Unique ID per diagram (no conflicts)
- Responsive container

### 3. LaTeX Math (KaTeX)

```mdx
Inline: $E = mc^2$

Block:
$$
\int_0^\infty e^{-x} dx = 1
$$
```

**Powered by KaTeX 0.16** — Fast math rendering

### 4. WikiLinks (Internal Links)

```mdx
<WikiLink to="slug-artikel" label="Teks yang Ditampilkan" />
```

**Features:**
- Link mati (slug not found) → strikethrough otomatis
- Auto-deteksi dari semua posts

### 5. Highlight

```mdx
<Highlight>teks yang di-highlight</Highlight>

Atau gunakan HTML tag:
<mark>teks yang di-highlight</mark>
```

### 6. YouTube Embed

```mdx
<YouTube url="https://youtube.com/watch?v=VIDEO_ID" title="Judul Video" />
```

**Features:**
- Responsive iframe
- Auto-aspect ratio 16:9

### 7. Code Blocks (Shiki Syntax Highlighting)

````mdx
```typescript
function hello(name: string): string {
  return `Hello, ${name}!`;
}
```
````

**Features:**
- Powered by Shiki with `github-dark-dimmed` theme
- Copy button included
- Multi-language support (TypeScript, Python, Bash, dll)

### 8. GFM (GitHub Flavored Markdown)

**Tables:**
```mdx
| Column 1 | Column 2 |
|----------|----------|
| Value A  | Value B  |
```

**Task Lists:**
```mdx
- [x] Completed task
- [ ] Uncompleted task
```

**Strikethrough:**
```mdx
~~deleted text~~
```

### 9. Backlinks

Auto-generated di setiap artikel detail. Menampilkan