```
### 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
Konten dengan efek kaca transparan
```
---
## ๐ง 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" <
> "$FILE"
echo "" >> "$FILE"
echo "$PENDING" >> "$FILE"
echo "" >> "$FILE"
fi
fi
cat >> "$FILE" </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.
Gunakan callouts untuk highlight informasi penting!
## 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 .
## 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...
This reminds me of a similar concept in...
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 "/home/hades/BangunAI-Blog/src/content" -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" < "$FILE" < *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.
Context or prerequisite info.
## 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
Use semantic components for better UX.
```
**DON'T:**
```mdx
Hardcoded styling instead of using Callout
Read more
```
### 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 | `...` |
| Mermaid | ` ```mermaid ... ``` ` |
| LaTeX | `$...$` or `$$...$$` |
| WikiLink | `` |
| Highlight | `...` |
| YouTube | `` |
### 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