Skill: dwirx/tulisai (version 0.1.0)

--- name: bangunai-blog-manager description: Use when managing BangunAI Blog content, automating blog workflows, and writing MDX articles with BangunAI conventions. Supports Obsidian-like features (callouts, mermaid, LaTeX, wikilinks, backlinks, graph view). --- # BangunAI Blog Manager (Digital Garden + Content Workflow) **Homepage:** React 18 + Vite + MDX + shadcn/ui **Blog Root:** `/home/hades/BangunAI-Blog` **Content Root:** [REDACTED_SECRET] **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 artikel lain yang me-link ke artikel ini. ### 10. Graph View Interactive force-directed graph menampilkan koneksi antar konten. ### 11. Table of Contents (TOC) - Sticky di desktop (right sidebar) - Collapsible bottom bar di mobile - Active heading tracking - Progress bar --- ## 🎨 Design System ### Color Tokens (HSL-based) **Dark Mode (Default):** - `--background` — Navy gelap (#1A1A2E) - `--foreground` — Cream (#F5E6D3) - `--primary` — Gold/amber (aksen utama) - `--accent` — Warm gold (hover states) - `--card` — Navy lebih terang **Light Mode:** - `--background` — Cream hangat - `--foreground` — Navy gelap - `--primary` — Amber gelap - `--card` — Cream lebih gelap **Usage:** ```tsx // ✅ Gunakan semantic tokens <div className="bg-background text-foreground"> <button className="bg-primary text-primary-foreground"> Klik </button> </div> // ❌ Jangan hardcode warna <div className="bg-[#1A1A2E] text-[#F5E6D3]"> ``` ### Font Stack | Font | Usage | |------|-------| | **Space Grotesk** | Headings & navigation | | **Source Serif 4** | Body text artikel (serif) | | **Inter** | UI elements & labels | | **JetBrains Mono** | Code blocks & inline code | ### Glass Morphism ```tsx <div className="glass glass-hover rounded-xl p-6"> Konten dengan efek kaca transparan </div> ``` --- ## 🔧 Workflows ### 1) `daily` (Smart Daily Note) Create daily note dengan auto-rollover unchecked tasks dari kemarin. ```bash BLOG_ROOT="/home/hades/BangunAI-Blog" DAILY_DIR="$BLOG_ROOT/src/content/daily" mkdir -p "$DAILY_DIR" TODAY=$(date +%Y-%m-%d) FILE="$DAILY_DIR/$TODAY.mdx" LAST_FILE=$(find "$DAILY_DIR" -name "????-??-??.mdx" ! -name "$TODAY.mdx" 2>/dev/null | sort | tail -n 1) if [ ! -f "$FILE" ]; then cat > "$FILE" <<EOF --- title: "Daily Note: $TODAY" date: "$TODAY" type: daily tags: [daily] --- # Daily Note: $TODAY EOF if [ -n "$LAST_FILE" ]; then PENDING=$(grep "\- \[ \]" "$LAST_FILE" || true) if [ -n "$PENDING" ]; then echo "## Rollover Tasks" >> "$FILE" echo "" >> "$FILE" echo "$PENDING" >> "$FILE" echo "" >> "$FILE" fi fi cat >> "$FILE" <<EOF ## Tasks Today - [ ] ## Log EOF echo "✅ Created: $FILE" else echo "📂 Exists: $FILE" fi ``` ### 2) `fetch_last` (Style Reference) Fetch latest file untuk style reference. Supports all categories including special pages. ```bash # Input: CATEGORY (writing, articles, read, daily, about, now) BLOG_ROOT="/home/hades/BangunAI-Blog" case "$CATEGORY" in "daily") DIR="$BLOG_ROOT/src/content/daily" ;; "writing") DIR="$BLOG_ROOT/src/content/writing" ;; "articles") DIR="$BLOG_ROOT/src/content/articles" ;; "read") DIR="$BLOG_ROOT/src/content/read" ;; "about") cat "$BLOG_ROOT/src/content/about.mdx" exit 0 ;; "now") cat "$BLOG_ROOT/src/content/now.mdx" exit 0 ;; *) echo "❌ Unknown category"; exit 1 ;; esac LAST_FILE=$(ls -t "$DIR"/*.mdx 2>/dev/null | head -n 1) if [ -f "$LAST_FILE" ]; then echo "📄 REFERENSI GAYA ($LAST_FILE):" head -n 50 "$LAST_FILE" else echo "❌ Belum ada file di $CATEGORY" fi ``` ### 3) `write` (Universal Writer + BangunAI Style) Write new content dengan frontmatter lengkap. **For Writing/Articles:** ```bash CATEGORY="writing" # atau "articles" FILENAME="judul-artikel.mdx" BLOG_ROOT="/home/hades/BangunAI-Blog" cat > "$BLOG_ROOT/src/content/$CATEGORY/$FILENAME" <<'EOF' --- title: "Judul Artikel Baru" slug: judul-artikel-baru summary: "Ringkasan singkat tentang artikel ini yang menarik perhatian pembaca." type: note category: Tech tags: [react, typescript, tutorial] date: "2026-02-12T15:00:00" readingTime: 5 --- ## Introduction Paragraf pembuka yang compelling dan menarik perhatian. <Callout type="tip" title="Pro Tip"> Gunakan callouts untuk highlight informasi penting! </Callout> ## Section 1 ### Subsection A Content here dengan **bold** dan *italic*. ```typescript // Example code dengan syntax highlighting function example(): string { return "Hello World"; } ``` ## Mermaid Example ```mermaid graph LR A[Input] --> B[Process] B --> C[Output] ``` ## Math Example Inline math: $x^2 + y^2 = z^2$ Block math: $$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$ ## Internal Link Check out <WikiLink to="other-article" label="this related article" />. ## Conclusion Kesimpulan yang solid dan actionable. EOF echo "✅ Created: $BLOG_ROOT/src/content/$CATEGORY/$FILENAME" ``` **For Read Items:** ```bash CATEGORY="read" FILENAME="interesting-article.mdx" BLOG_ROOT="/home/hades/BangunAI-Blog" cat > "$BLOG_ROOT/src/content/$CATEGORY/$FILENAME" <<'EOF' --- title: "Interesting Article Title" slug: interesting-article snippet: "A compelling quote or snippet from the article that captures its essence." source: "website.com" url: "https://website.com/article" tags: [tech, programming, career] date: "2026-02-12T15:00:00" --- ## Key Takeaways - Point 1: Important insight - Point 2: Actionable advice - Point 3: Thought-provoking idea ## Personal Notes My thoughts and commentary about this article... <Callout type="note"> This reminds me of a similar concept in... </Callout> EOF echo "✅ Created: $BLOG_ROOT/src/content/$CATEGORY/$FILENAME" ``` ### 4) `log` (Append Log) Append timestamped log to today's daily note. ```bash # Input: CONTENT="..." TODAY=$(date +%Y-%m-%d) FILE="/home/hades/BangunAI-Blog/src/content/daily/$TODAY.mdx" if [ ! -f "$FILE" ]; then echo "❌ Run 'daily' workflow first!" exit 1 fi echo "- $(date +%H:%M) $CONTENT" >> "$FILE" echo "✅ Logged to: $FILE" ``` ### 5) `read` (Smart Read) Smart search content by keyword. ```bash # Input: FILE="..." find [REDACTED_SECRET] -name "*$FILE*.mdx" | head -n 1 | xargs -r cat ``` ### 6) `update_about` (Update About Page) Update about.mdx with MDX content. ```bash # Input: CONTENT="..." FILE="/home/hades/BangunAI-Blog/src/content/about.mdx" cat > "$FILE" <<EOF --- title: "About" --- $CONTENT EOF echo "✅ Updated: $FILE" ``` ### 7) `update_now` (Update Now Page) Update now.mdx with current activities. ```bash # Input: CONTENT="..." FILE="/home/hades/BangunAI-Blog/src/content/now.mdx" CURRENT_DATE=$(date +"%B %Y") cat > "$FILE" <<EOF --- title: "Now" --- ## Apa yang Sedang Saya Kerjakan *Terakhir diperbarui: $CURRENT_DATE* Halaman ini terinspirasi dari [nownownow.com](https://nownownow.com) — tempat saya mencatat apa yang sedang saya fokuskan saat ini. --- $CONTENT --- > *Halaman ini adalah snapshot dari kehidupan saya saat ini. Bukan resume, bukan portofolio — hanya update jujur tentang apa yang sedang saya kerjakan.* EOF echo "✅ Updated: $FILE" ``` ### 8) `verify_index` (Verify Content) Verify content auto-import statistics. ```bash BLOG_ROOT="/home/hades/BangunAI-Blog" echo "📊 Content Statistics:" echo "" echo "Writing posts: $(ls -1 "$BLOG_ROOT/src/content/writing"/*.mdx 2>/dev/null | wc -l)" echo "Articles: $(ls -1 "$BLOG_ROOT/src/content/articles"/*.mdx 2>/dev/null | wc -l)" echo "Read items: $(ls -1 "$BLOG_ROOT/src/content/read"/*.mdx 2>/dev/null | wc -l)" echo "Daily notes: $(ls -1 "$BLOG_ROOT/src/content/daily"/*.mdx 2>/dev/null | wc -l)" echo "" echo "Special files:" echo "- about.mdx: $(test -f "$BLOG_ROOT/src/content/about.mdx" && echo "✅" || echo "❌")" echo "- now.mdx: $(test -f "$BLOG_ROOT/src/content/now.mdx" && echo "✅" || echo "❌")" echo "- index.ts: $(test -f "$BLOG_ROOT/src/content/index.ts" && echo "✅" || echo "❌")" ``` --- ## 📋 Content Category Guidelines | Category | Path | Use Case | Type Options | Examples | |----------|------|----------|--------------|----------| | `writing` | `src/content/writing/` | Personal notes, essays | `note`, `essay` | Reflections, quick takes, deep thoughts | | `articles` | `src/content/articles/` | Technical tutorials, guides | `article` | How-to guides, technical deep dives | | `read` | `src/content/read/` | Reading notes, link curation | N/A (special format) | Curated articles, bookmarks | | `daily` | `src/content/daily/` | Daily notes, tasks, logs | `daily` | Task tracking, daily logs | | `about` | `src/content/about.mdx` | About page (static) | N/A | Personal bio, site info | | `now` | `src/content/now.mdx` | Current activities | N/A | What I'm doing now | ### Category Values **Choose wisely untuk `category` field:** - `Tech` — Teknologi, programming, tools, frameworks - `Refleksi` — Personal reflection, thoughts, philosophy - `Produktivitas` — Productivity tips, workflow, GTD - `Linux` — Linux, terminal, system administration - `Coding` — Coding practices, patterns, best practices - `Life` — Lifestyle, personal experiences, stories --- ## 🎯 Best Practices ### 1. Frontmatter Consistency **DO:** ```yaml title: "Belajar React Hooks di 2026" slug: belajar-react-hooks-2026 type: note category: Tech tags: [react, hooks, javascript] date: "2026-02-12T15:30:00" ``` **DON'T:** ```yaml title: belajar-react-hooks # Missing quotes slug: Belajar React Hooks # Not kebab-case type: blog # Invalid type category: technology # Typo/wrong value tags: React, Hooks # Not array format date: "2026-02-12" # Missing time ``` ### 2. File Naming **DO:** ``` belajar-react-hooks-2026.mdx setup-neovim-lua.mdx refleksi-tahun-2025.mdx ``` **DON'T:** ``` Blog Post 1.mdx # Spaces, not descriptive temp.mdx # Non-descriptive NEW_POST.mdx # Uppercase, underscore ``` ### 3. Content Structure **Recommended structure:** ```mdx --- frontmatter here --- ## Introduction (H2) Brief intro, hook the reader. <Callout type="info"> Context or prerequisite info. </Callout> ## Main Section 1 (H2) ### Subsection A (H3) Content... ### Subsection B (H3) Content... ## Main Section 2 (H2) ### Examples (H3) Code or examples... ## Conclusion (H2) Summary and takeaways. ``` ### 4. Using MDX Components **DO:** ```mdx <Callout type="tip" title="Pro Tip"> Use semantic components for better UX. </Callout> <WikiLink to="related-article" label="Read more about this" /> ``` **DON'T:** ```mdx <div style="background: yellow; padding: 10px;"> Hardcoded styling instead of using Callout </div> <a href="/artikel/related-article">Read more</a> <!-- Should use WikiLink instead --> ``` ### 5. Date & Time Format **ISO timestamp with time:** ```yaml date: "2026-02-12T15:30:00" # YYYY-MM-DDTHH:mm:ss ``` **Displayed as:** - Detail page: `11 Februari 2026, 14:30` - Card list: `11 Feb · 14:30` ### 6. Reading Time Estimation ```bash # Count words (exclude frontmatter) WORD_COUNT=$(tail -n +$(grep -n "^---$" file.mdx | tail -1 | cut -d: -f1) file.mdx | wc -w) # Calculate reading time (200 words/minute) READING_TIME=$(( (WORD_COUNT + 199) / 200 )) # Add to frontmatter readingTime: $READING_TIME ``` ### 7. Tags Best Practices - Use **lowercase** - Use **kebab-case** for multi-word tags - Keep tags **consistent** across posts - Prefer **specific** over generic tags **Good tags:** ```yaml tags: [react-hooks, typescript, state-management] ``` **Bad tags:** ```yaml tags: [React Hooks, programming, stuff] ``` --- ## 🚀 Development Workflow ### Local Development ```bash # Start dev server cd /home/hades/BangunAI-Blog bun run dev # Open http://localhost:8080 ``` ### Create New Content 1. **Fetch style reference:** ```bash CATEGORY="writing" bash fetch_last.sh ``` 2. **Create new file:** ```bash cat > src/content/writing/new-post.mdx <<'EOF' --- title: "New Post" slug: new-post summary: "Brief summary" type: note category: Tech tags: [tag1, tag2] date: "$(date -Iseconds)" readingTime: 5 --- Content here... EOF ``` 3. **Verify auto-import:** ```bash # File otomatis terdeteksi via import.meta.glob # Check di browser: http://localhost:8080/writing ``` 4. **Build & deploy:** ```bash bun run build bun run preview ``` ### Git Workflow ```bash # Add new content git add src/content/writing/new-post.mdx git commit -m "Add: new blog post about X" # Rename (preserve history) git mv src/content/writing/old.mdx src/content/writing/new.mdx git commit -m "Rename: old post to new name" # Delete (tracked) git rm src/content/writing/unwanted.mdx git commit -m "Remove: unwanted post" # Push git push origin main ``` --- ## 🔍 Troubleshooting ### Issue: Content not showing **Check:** 1. Valid frontmatter? (all required fields present) 2. Valid MDX syntax? (no unclosed tags) 3. File in correct directory? 4. Dev server restarted? ### Issue: Mermaid not rendering **Check:** 1. Valid Mermaid syntax? 2. Diagram type supported? 3. Check browser console for errors ### Issue: WikiLink shows strikethrough **Reason:** Target slug not found **Fix:** 1. Verify target slug exists 2. Check spelling 3. Ensure target file has valid frontmatter ### Issue: LaTeX not rendering **Check:** 1. Valid LaTeX syntax? 2. Escaped special characters? 3. Using `$` or `$$` delimiters correctly? --- ## 📚 Quick Reference ### Frontmatter Cheatsheet **Writing/Articles:** ```yaml --- title: "Title" slug: slug summary: "Summary" type: note|essay|article category: Tech|Refleksi|Produktivitas|Linux|Coding|Life tags: [tag1, tag2] date: "YYYY-MM-DDTHH:mm:ss" readingTime: number --- ``` **Read:** ```yaml --- title: "Title" slug: slug snippet: "Snippet" source: "domain.com" url: "https://..." tags: [tag1, tag2] date: "YYYY-MM-DDTHH:mm:ss" --- ``` **Special Pages:** ```yaml --- title: "About|Now" --- ``` ### MDX Components Cheatsheet | Component | Usage | |-----------|-------| | Callout | `<Callout type="info" title="...">...</Callout>` | | Mermaid | ` ```mermaid ... ``` ` | | LaTeX | `$...$` or `$$...$$` | | WikiLink | `<WikiLink to="slug" label="..." />` | | Highlight | `<Highlight>...</Highlight>` | | YouTube | `<YouTube url="..." title="..." />` | ### File Locations Cheatsheet | Type | Location | |------|----------| | Writing | `src/content/writing/*.mdx` | | Articles | `src/content/articles/*.mdx` | | Read | `src/content/read/*.mdx` | | Daily | `src/content/daily/*.mdx` | | About | `src/content/about.mdx` | | Now | `src/content/now.mdx` | | Index | `src/content/index.ts` | --- ## 🎉 Summary Skill ini fully integrated dengan **BangunAI Blog**: - ✅ 8 workflows ready to use - ✅ 3 frontmatter formats supported - ✅ Complete MDX components reference - ✅ Obsidian-like features documented - ✅ Design system guidelines - ✅ Best practices & troubleshooting - ✅ Auto-import via `import.meta.glob` - ✅ Git-based operations - ✅ Production-ready **Homepage:** https://github.com/dwirx/BangunAI-Blog

path: EXAMPLES.md
content: # BangunAI Blog Manager - Examples

Contoh lengkap penggunaan semua workflows.

## 1. Daily Note Workflow

```bash
BLOG_ROOT="/home/hades/BangunAI-Blog"
DAILY_DIR="$BLOG_ROOT/src/content/daily"
mkdir -p "$DAILY_DIR"

TODAY=$(date +%Y-%m-%d)
FILE="$DAILY_DIR/$TODAY.mdx"
LAST_FILE=$(find "$DAILY_DIR" -name "????-??-??.mdx" ! -name "$TODAY.mdx" 2>/dev/null | sort | tail -n 1)

if [ ! -f "$FILE" ]; then
  cat > "$FILE" <<DAILYEOF
---
title: "Daily Note: $TODAY"
date: "$TODAY"
type: daily
tags: [daily]
---

# Daily Note: $TODAY

DAILYEOF

  if [ -n "$LAST_FILE" ]; then
    PENDING=$(grep "\- \[ \]" "$LAST_FILE" || true)
    if [ -n "$PENDING" ]; then
      echo "## Rollover Tasks" >> "$FILE"
      echo "" >> "$FILE"
      echo "$PENDING" >> "$FILE"
      echo "" >> "$FILE"
    fi
  fi
  
  cat >> "$FILE" <<DAILYEOF
## Tasks Today

- [ ] 

## Log

DAILYEOF
  echo "✅ Created: $FILE"
else
  echo "📂 Exists: $FILE"
fi
```

## 2. Fetch Style Reference

### Fetch Writing Post Style
```bash
CATEGORY="writing"
BLOG_ROOT="/home/hades/BangunAI-Blog"
DIR="$BLOG_ROOT/src/content/$CATEGORY"
LAST_FILE=$(ls -t "$DIR"/*.mdx 2>/dev/null | head -n 1)
echo "📄 REFERENSI GAYA ($LAST_FILE):"
head -n 40 "$LAST_FILE"
```

### Fetch Read Item Style
```bash
CATEGORY="read"
BLOG_ROOT="/home/hades/BangunAI-Blog"
DIR="$BLOG_ROOT/src/content/$CATEGORY"
LAST_FILE=$(ls -t "$DIR"/*.mdx 2>/dev/null | head -n 1)
echo "📄 REFERENSI GAYA ($LAST_FILE):"
head -n 15 "$LAST_FILE"
```

### Fetch About Page
```bash
CATEGORY="about"
BLOG_ROOT="/home/hades/BangunAI-Blog"
cat "$BLOG_ROOT/src/content/about.mdx"
```

## 3. Create New Content

### Create Writing Post
```bash
CATEGORY="writing"
FILENAME="my-new-article.mdx"
BLOG_ROOT="/home/hades/BangunAI-Blog"

cat > "$BLOG_ROOT/src/content/$CATEGORY/$FILENAME" <<'WRITINGEOF'
---
title: "Judul Artikel Baru"
slug: judul-artikel-baru
summary: "Ringkasan singkat tentang artikel ini."
type: note
category: Tech
tags: [react, typescript]
date: "2026-02-12T15:00:00"
readingTime: 5
---

## Introduction

Paragraf pembuka yang menarik perhatian pembaca.

## Section 1

### Subsection A

Content here...

```typescript
// Example code
function example() {
  return "Hello World";
}
```

## Conclusion

Kesimpulan artikel.
WRITINGEOF

echo "✅ Created: $BLOG_ROOT/src/content/$CATEGORY/$FILENAME"
```

### Create Read Item
```bash
CATEGORY="read"
FILENAME="interesting-article.mdx"
BLOG_ROOT="/home/hades/BangunAI-Blog"

cat > "$BLOG_ROOT/src/content/$CATEGORY/$FILENAME" <<'READEOF'
---
title: "Interesting Article Title"
slug: interesting-article
snippet: "A compelling quote or snippet from the article."
source: "website.com"
url: "https://website.com/article"
tags: [tech, programming]
date: "2026-02-12T15:00:00"
---

## Key Takeaways

- Point 1
- Point 2
- Point 3

## Personal Notes

Catatan personal tentang artikel ini...
READEOF

echo "✅ Created: $BLOG_ROOT/src/content/$CATEGORY/$FILENAME"
```

### Create Article
```bash
CATEGORY="articles"
FILENAME="deep-dive-topic.mdx"
BLOG_ROOT="/home/hades/BangunAI-Blog"

cat > "$BLOG_ROOT/src/content/$CATEGORY/$FILENAME" <<'ARTICLEOF'
---
title: "Deep Dive: Topik Menarik"
slug: deep-dive-topic
summary: "Eksplorasi mendalam tentang topik tertentu."
type: article
category: Tech
tags: [architecture, system-design]
date: "2026-02-12T15:00:00"
readingTime: 15
---

## Overview

Long-form content untuk artikel mendalam.

## Section 1: Background

Content...

## Section 2: Technical Details

Content...

## Conclusion

Summary dan takeaways.
ARTICLEOF

echo "✅ Created: $BLOG_ROOT/src/content/$CATEGORY/$FILENAME"
```

## 4. Append Log to Daily Note

```bash
CONTENT="Finished writing new blog post about TypeScript"
TODAY=$(date +%Y-%m-%d)
FILE="/home/hades/BangunAI-Blog/src/content/daily/$TODAY.mdx"

if [ ! -f "$FILE" ]; then 
  echo "❌ Run 'daily' workflow first!"
  exit 1
fi

echo "- $(date +%H:%M) $CONTENT" >> "$FILE"
echo "✅ Logged to: $FILE"
```

## 5. Smart Read Content

```bash
# Search for file containing keyword
FILE="typescript"
RESULT=$(find [REDACTED_SECRET] -name "*$FILE*.mdx" | head -n 1)

if [ -n "$RESULT" ]; then
  echo "📄 Found: $RESULT"
  cat "$RESULT"
else
  echo "❌ No file found matching: $FILE"
fi
```

## 6. Update About Page

```bash
FILE="/home/hades/BangunAI-Blog/src/content/about.mdx"

cat > "$FILE" <<'ABOUTEOF'
---
title: "About"
---

Hai, selamat datang di blog saya.

## Tentang Saya

Saya seorang developer yang passionate tentang...

## Tentang Blog Ini

Blog ini berisi...

## Kontak

Email: [REDACTED_SECRET]
ABOUTEOF

echo "✅ Updated: $FILE"
```

## 7. Update Now Page

```bash
FILE="/home/hades/BangunAI-Blog/src/content/now.mdx"
CURRENT_DATE=$(date +"%B %Y")

cat > "$FILE" <<NOWEOF
---
title: "Now"
---

## Apa yang Sedang Saya Kerjakan

*Terakhir diperbarui: $CURRENT_DATE*

Halaman ini terinspirasi dari [nownownow.com](https://nownownow.com) — tempat saya mencatat apa yang sedang saya fokuskan saat ini.

---

### 🔨 Proyek

- Project 1
- Project 2

### 📚 Sedang Dibaca

- Book 1
- Book 2

### 🎯 Fokus Belajar

- Topic 1
- Topic 2

---

> *Halaman ini adalah snapshot dari kehidupan saya saat ini.*
NOWEOF

echo "✅ Updated: $FILE"
```

## 8. Verify Content Statistics

```bash
BLOG_ROOT="/home/hades/BangunAI-Blog"

echo "📊 Content Statistics:"
echo ""
echo "Writing posts: $(ls -1 "$BLOG_ROOT/src/content/writing"/*.mdx 2>/dev/null | wc -l)"
echo "Articles: $(ls -1 "$BLOG_ROOT/src/content/articles"/*.mdx 2>/dev/null | wc -l)"
echo "Read items: $(ls -1 "$BLOG_ROOT/src/content/read"/*.mdx 2>/dev/null | wc -l)"
echo "Daily notes: $(ls -1 "$BLOG_ROOT/src/content/daily"/*.mdx 2>/dev/null | wc -l)"
echo ""
echo "Special files:"
echo "- about.mdx: $(test -f "$BLOG_ROOT/src/content/about.mdx" && echo "✅" || echo "❌")"
echo "- now.mdx: $(test -f "$BLOG_ROOT/src/content/now.mdx" && echo "✅" || echo "❌")"
echo "- index.ts: $(test -f "$BLOG_ROOT/src/content/index.ts" && echo "✅" || echo "❌")"
```

## Common Tasks

### List All Posts by Category
```bash
echo "=== Writing Posts ==="
ls -lt /home/hades/BangunAI-Blog/src/content/writing/*.mdx | head -5

echo ""
echo "=== Articles ==="
ls -lt /home/hades/BangunAI-Blog/src/content/articles/*.mdx | head -5

echo ""
echo "=== Read Items ==="
ls -lt /home/hades/BangunAI-Blog/src/content/read/*.mdx | head -5
```

### Search for Keyword
```bash
KEYWORD="typescript"
echo "Searching for: $KEYWORD"
find /home/hades/BangunAI-Blog/src/content -name "*.mdx" -exec grep -l "$KEYWORD" {} \;
```

### Move/Rename Post
```bash
cd /home/hades/BangunAI-Blog
git mv src/content/writing/old-name.mdx src/content/writing/new-name.mdx
echo "✅ Renamed post (git tracked)"
```

### Delete Post
```bash
cd /home/hades/BangunAI-Blog
git rm src/content/writing/unwanted-post.mdx
echo "✅ Deleted post (git tracked)"
```

## Integration with index.ts

File `src/content/index.ts` **auto-detect** semua MDX files:

```typescript
// Auto-import all MDX files (no manual registration needed!)
const writingModules = import.meta.glob<MdxModule>("./writing/*.mdx", { eager: true });
const articleModules = import.meta.glob<MdxModule>("./articles/*.mdx", { eager: true });
const readModules = import.meta.glob<MdxModule>("./read/*.mdx", { eager: true });
const aboutModule = import.meta.glob<MdxModule>("./about.mdx", { eager: true });
const nowModule = import.meta.glob<MdxModule>("./now.mdx", { eager: true });
```

**Artinya:** Setiap kali kamu create file `.mdx` baru di folder yang tepat, file itu **otomatis ter-import** tanpa perlu edit `index.ts`!

## Tips & Best Practices

1. **Always use frontmatter** — Semua MDX file harus punya frontmatter minimal
2. **Consistent slugs** — Gunakan kebab-case, lowercase, no special chars
3. **ISO timestamps** — Format date: `"2026-02-12T15:00:00"`
4. **Git tracking** — Gunakan `git mv` dan `git rm` untuk preserve history
5. **Auto-import** — Tidak perlu edit `index.ts`, semua MDX auto-detected
6. **Reading time** — Estimasi ~200 kata/menit
7. **Tags lowercase** — Konsisten pakai lowercase untuk tags
8. **Category consistency** — Pilih dari: Tech, Life, Design, Business



path: INTEGRATION.md
content: # BangunAI Blog Manager - Integration Guide

Complete integration guide untuk skill dengan BangunAI Blog (Digital Garden + Obsidian-like features).

## 🌿 Content Structure

```
src/content/
├── writing/     11 posts (notes, essays)
├── articles/    4 posts (technical tutorials)
├── read/        8 items (curated readings)
├── daily/       1 note (growing daily)
├── about.mdx    Single static page
├── now.mdx      Single dynamic page
└── index.ts     Auto-import loader
```

## 📝 Frontmatter Formats

### A. Standard (writing, articles, daily)
- **Required:** title, slug, summary, type, category, tags, date, readingTime
- **Type:** `note` | `essay` | `article`
- **Category:** `Tech` | `Refleksi` | `Produktivitas` | `Linux` | `Coding` | `Life`
- **Date:** ISO with time (`YYYY-MM-DDTHH:mm:ss`)

### B. Read Items (read/)
- **Required:** title, slug, snippet, source, url, tags, date
- **Body:** Optional (for personal notes)

### C. Special (about, now)
- **Required:** title only
- **Content:** Full MDX support

## 🧩 Obsidian-Like Features

| Feature | Implementation | Component |
|---------|----------------|-----------|
| Callouts | 14 types | `<Callout type="..." title="...">` |
| Mermaid | 9+ diagram types | ` ```mermaid ... ``` ` |
| LaTeX | Inline & block | `$...$` or `$$...$$` |
| WikiLinks | Internal linking | `<WikiLink to="slug" />` |
| Backlinks | Auto-generated | Auto in ArticleDetail |
| Graph View | Interactive | `/graph` route |
| TOC | Sticky + mobile | Auto-generated |
| Syntax Highlight | Shiki + copy | ` ```lang ... ``` ` |
| GFM | Tables, tasks | Standard Markdown |

## 🔧 8 Workflows

1. **daily** - Create daily note with rollover tasks
2. **fetch_last** - Style reference (supports about/now)
3. **write** - New content (multi-format frontmatter)
4. **log** - Append timestamped log
5. **read** - Smart search by keyword
6. **update_about** - Update about.mdx
7. **update_now** - Update now.mdx (auto-date)
8. **verify_index** - Content statistics

## 🎨 Design System

### Color Tokens (HSL)
- Dark Mode: Navy (#1A1A2E) + Cream (#F5E6D3)
- Light Mode: Cream + Navy
- Primary: Gold/amber accents

### Font Stack
- **Space Grotesk** - Headings
- **Source Serif 4** - Body
- **Inter** - UI elements
- **JetBrains Mono** - Code

### Glass Morphism
```tsx
<div className="glass glass-hover">...</div>
```

## 🚀 Auto-Import System

`src/content/index.ts` uses `import.meta.glob`:

```typescript
const writingModules = import.meta.glob("./writing/*.mdx", { eager: true });
```

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

## ✅ Best Practices

### Frontmatter
- Use ISO timestamps with time
- Tags: lowercase, kebab-case
- Category: exact match from list
- Type: note/essay/article

### File Naming
- kebab-case.mdx
- Descriptive names
- No spaces, no uppercase

### Content Structure
```mdx
## Introduction (H2)
### Subsection (H3)
<Callout>...</Callout>
## Conclusion (H2)
```

### Git Operations
```bash
git mv old.mdx new.mdx    # Preserve history
git rm unwanted.mdx        # Track deletion
```

## 📊 Current Statistics

```
Writing: 11 posts
Articles: 4 posts
Read: 8 items
Daily: 1 note
Special: 2 pages (about, now)
Total: 26 content files
```

## 🔗 Key URLs

- **Repo:** https://github.com/dwirx/BangunAI-Blog
- **Local:** http://localhost:8080
- **Routes:** `/`, `/writing`, `/artikel`, `/read`, `/tags`, `/graph`, `/now`, `/about`

## 📚 Documentation

- `SKILL.md` - Complete workflow guide (600+ lines)
- `README.md` - Quick reference
- `EXAMPLES.md` - Copy-paste examples
- `INTEGRATION.md` - This file

## 🎯 Migration Notes

### From Obsidian (ObsBlog)

**Changes:**
- ✅ Path: `/home/hades/ObsBlog` → `/home/hades/BangunAI-Blog`
- ✅ Format: `.md` → `.mdx`
- ✅ Frontmatter: Obsidian → BangunAI (more structured)
- ✅ Components: Obsidian callouts → React MDX components
- ✅ Features: Full Obsidian-like support (callouts, mermaid, LaTeX, wikilinks, backlinks, graph)

**Preserved:**
- ✅ Daily workflow (rollover tasks)
- ✅ Fetch style workflow
- ✅ Write workflow
- ✅ Log workflow
- ✅ Read workflow

**New:**
- ✅ 3 additional workflows (update_about, update_now, verify_index)
- ✅ MDX components (Callout, Mermaid, WikiLink, YouTube, etc.)
- ✅ Auto-import system
- ✅ Design system tokens
- ✅ Multiple content types (note/essay/article)
- ✅ 6 category options

## 🔍 Troubleshooting

### Content not showing
- Check frontmatter required fields
- Verify file in correct directory
- Restart dev server

### Mermaid not rendering
- Validate Mermaid syntax
- Check diagram type supported
- Browser console for errors

### WikiLink strikethrough
- Target slug not found
- Verify spelling
- Check target frontmatter

### LaTeX not rendering
- Validate LaTeX syntax
- Proper delimiters `$` or `$$`
- Escape special characters

## 🎉 Status

✅ **Fully integrated** with BangunAI Blog
✅ **8 workflows** production-ready
✅ **3 frontmatter formats** supported
✅ **14 callout types** available
✅ **9+ diagram types** via Mermaid
✅ **LaTeX math** via KaTeX
✅ **Auto-import** via import.meta.glob
✅ **Design system** documented
✅ **Best practices** established

**Ready for production use!** 🚀


path: README.md
content: # BangunAI Blog Manager Skill

Agent skill untuk mengelola content BangunAI Blog — Digital Garden & Knowledge Base dengan Obsidian-like features (React 18 + Vite + MDX + Mermaid + KaTeX + Shiki).

## Quick Start

```bash
# Test skill dari workspace
cd /home/hades/BangunAI-Blog/skill
cat SKILL.md
```

## Workflows Available

| Workflow | Command | Description |
|----------|---------|-------------|
| `daily` | Bash script | Create daily note dengan rollover tasks |
| `fetch_last` | Bash script | Fetch latest file untuk style reference (supports about/now) |
| `write` | Bash script | Write new content dengan frontmatter |
| `log` | Bash script | Append log ke daily note |
| `read` | Bash script | Smart read content by keyword |
| `update_about` | Bash script | Update about.mdx page |
| `update_now` | Bash script | Update now.mdx page with timestamp |
| `verify_index` | Bash script | Verify content auto-import statistics |

## Content Structure

```
src/content/
├── writing/     # Blog posts (notes, essays)
├── articles/    # Technical articles, tutorials
├── read/        # Reading notes (bookmarks, link sharing)
├── daily/       # Daily notes (tasks, logs)
├── about.mdx    # About page (single file, MDX)
├── now.mdx      # Now page (single file, MDX)
└── index.ts     # Content loader (auto-import via import.meta.glob)
```

## Obsidian-Like Features

- **14 Callout Types** — info, tip, warning, danger, success, note, example, bug, question, abstract, important, caution, quote, cite
- **Mermaid Diagrams** — flowchart, sequence, pie, class, state, ER, gantt, mindmap, timeline
- **LaTeX Math (KaTeX)** — Inline `$...$` and block `$$...$$`
- **WikiLinks** — Internal linking dengan auto-strikethrough untuk broken links
- **Backlinks** — Auto-generated backlinks di setiap artikel
- **Graph View** — Interactive force-directed knowledge graph
- **Syntax Highlighting** — Shiki-powered dengan copy button
- **GFM Support** — Tables, task lists, strikethrough
- **Table of Contents** — Sticky TOC dengan active heading tracking

## Frontmatter Templates

### Standard Posts (writing, articles, daily)

```yaml
---
title: "Your Title"
slug: your-slug
summary: "Brief compelling summary"
type: note              # note | essay | article
category: Tech          # Tech | Refleksi | Produktivitas | Linux | Coding | Life
tags: [tag1, tag2]
date: "2026-02-12T15:30:00"
readingTime: 5
featured: false         # optional
---
```

### Read Items (read/)

```yaml
---
title: "Article Title"
slug: article-slug
snippet: "Interesting quote or snippet"
source: "website.com"
url: "https://full-url.com"
tags: [tag1, tag2]
date: "2026-02-12T18:00:00"
---
```

### Special Pages (about, now)

```yaml
---
title: "About"
---
```

## Usage Examples

### Create Daily Note
```bash
BLOG_ROOT="/home/hades/BangunAI-Blog"
DAILY_DIR="$BLOG_ROOT/src/content/daily"
mkdir -p "$DAILY_DIR"
TODAY=$(date +%Y-%m-%d)
# ... (see SKILL.md for full script)
```

### Fetch Style Reference
```bash
CATEGORY="writing"
BLOG_ROOT="/home/hades/BangunAI-Blog"
DIR="$BLOG_ROOT/src/content/$CATEGORY"
ls -t "$DIR"/*.mdx | head -n 1 | xargs head -n 40
```

### Create New Post
```bash
CATEGORY="writing"
FILENAME="my-new-post.mdx"
BLOG_ROOT="/home/hades/BangunAI-Blog"
cat > "$BLOG_ROOT/src/content/$CATEGORY/$FILENAME" <<'MDXEOF'
---
title: "My New Post"
slug: my-new-post
summary: "This is a new blog post"
type: note
category: Tech
tags: [example]
date: "2026-02-12T10:00:00"
readingTime: 3
---

## Introduction

Content here...
MDXEOF
```

## Integration with OpenCode

This skill is automatically loaded when:
- User asks to create blog content
- User mentions "BangunAI Blog"
- User wants to write MDX articles
- User needs frontmatter conventions

## Development Commands

```bash
# Start dev server
bun run dev

# Build production
bun run build

# Run tests
bun run test

# Lint code
bun run lint
```

## Path Configuration

- Blog Root: `/home/hades/BangunAI-Blog`
- Content Root: `/home/hades/BangunAI-Blog/src/content`
- Skill Location: `/home/hades/BangunAI-Blog/skill/`

## Categories

- **Tech** — Teknologi, programming, tools, frameworks
- **Refleksi** — Personal reflection, thoughts, philosophy
- **Produktivitas** — Productivity tips, workflow, GTD
- **Linux** — Linux, terminal, system administration
- **Coding** — Coding practices, patterns, best practices
- **Life** — Lifestyle, personal experiences, stories

## Content Types

- **note** — Short blog posts, quick thoughts, snapshots
- **essay** — Long-form personal writing, explorative thoughts
- **article** — Technical tutorials, structured guides, how-tos
- **daily** — Daily notes with tasks and logs

## MDX Components

| Component | Usage |
|-----------|-------|
| Callout | `<Callout type="info" title="...">...</Callout>` (14 types) |
| Mermaid | ` ```mermaid ... ``` ` (9+ diagram types) |
| LaTeX | `$...$` or `$$...$$` (KaTeX) |
| WikiLink | `<WikiLink to="slug" label="..." />` |
| Highlight | `<Highlight>...</Highlight>` or `<mark>` |
| YouTube | `<YouTube url="..." title="..." />` |
| Code | ` ```lang ... ``` ` (Shiki + copy button) |



Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: suspicious | SkillSpector: suspicious (MEDIUM)