Phân tích bài viết từ claw.ai.vn - Custom Components trong Tiptap

Phân tích bài viết từ claw.ai.vn

Bài viết “Lập trình cho nhà tiếp thị” trên claw.ai.vn sử dụng các custom components phức tạp từ Tiptap editor - không phải markdown thông thường.

Các Custom Components được sử dụng

1. Terminal Block

{
  "data-terminal-config": {
    "variant": "output",
    "title": "Cài đặt Claude Code",
    "lines": [
      { "type": "command", "text": "npm install -g @anthropic-ai/claude-code", "prompt": "$" },
      { "type": "output", "text": "> Đang cài đặt..." },
      { "type": "success", "text": "Cài đặt thành công" }
    ]
  }
}

Các variant:

• output - Hiển thị output với màu sắc
• steps - Hiển thị các bước với tiêu đề
• file-tree - Hiển thị cấu trúc file
• copybox - Hiển thị code có nút copy
• interactive - Interactive terminal simulation

2. Tabs Block

{
  "data-tabs-config": {
    "style": "tabs-lift",
    "tabs": [
      { "label": "ChatGPT", "content": "..." },
      { "label": "Claude Code", "content": "..." }
    ]
  }
}

Các style:

• tabs-lift - Tabs nổi lên với border
• tabs-box - Tabs trong hộp
• tabs-border - Tabs với border dưới

3. Tables

Sử dụng Tailwind CSS:

• table table-md table-zebra - Bảng có dải màu xen kẽ
• overflow-x-auto - Cho phép scroll ngang trên mobile

4. Alerts/Callouts

<div class="alert alert-success alert-soft" data-color="success" data-type="soft">
  <span class="alert-leading-icon icon-[lucide--lightbulb]"></span>
  <div class="alert-content">
    <div class="alert-title font-bold">Mẹo</div>
    <div class="alert-body">Nội dung...</div>
  </div>
</div>

Các loại:

• alert-success - Màu xanh lá
• alert-info - Màu xanh dương
• alert-warning - Màu vàng
• alert-error - Màu đỏ

5. Task Lists

<ul data-type="taskList">
  <li data-checked="false" data-checkbox-class="checkbox-primary">
    <label>
      <input type="checkbox">
      <span>Nội dung</span>
    </label>
  </li>
</ul>

Cách replicate trong Starlight/Astro

Option 1: Custom MDX Components

Tạo các Astro components và import vào MDX:

---
import Terminal from '../../components/mdx/Terminal.astro'
---

<Terminal title="Cài đặt">
  <span slot="command">npm install -g @anthropic-ai/claude-code</span>
</Terminal>

Option 2: Svelte Components

Tạo Svelte components với client-side interactivity:

<script>
  export let title = "Terminal";
  export let lines = [];
  let activeTab = 0;
</script>

<div class="terminal">
  <!-- Interactive tabs -->
</div>

Option 3: CSS-only

Sử dụng CSS để style standard markdown elements:

/* Tables */
.content table {
  @apply table table-zebra;
}

/* Task lists */
.content input[type="checkbox"] {
  @apply checkbox checkbox-primary;
}

Kết luận

Để có bài viết giống y hệt claw.ai.vn, cần:

1. Custom MDX components cho Terminal, Tabs, Alerts
2. Client-side JavaScript cho interactive elements
3. Tailwind CSS với custom config
4. Tiptap editor cho phần backend/quản lý content

Starlight có hạn chế về custom components trong MDX, nên approach tốt nhất là:

• Sử dụng CSS để cải thiện styling cho standard markdown
• Hoặc chấp nhận một số khác biệt nhỏ về giao diện