maudocs 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +99 -0
- package/bin/cli.js +85 -0
- package/maudocs-1.0.0.tgz +0 -0
- package/package.json +35 -0
- package/template/components.js +1 -0
- package/template/index.html +895 -0
- package/template/src/Accordion.jsx +42 -0
- package/template/src/Alert.jsx +82 -0
- package/template/src/CodeBlock.jsx +41 -0
- package/template/src/Header.jsx +131 -0
- package/template/src/Sidebar.jsx +88 -0
- package/template/src/index.js +48 -0
- package/vite.config.js +24 -0
|
@@ -0,0 +1,895 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="vi" class="scroll-smooth">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Documentation Template</title>
|
|
7
|
+
|
|
8
|
+
<!-- Tailwind CSS via CDN -->
|
|
9
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
10
|
+
|
|
11
|
+
<!-- Google Fonts: Inter -->
|
|
12
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
13
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
14
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
15
|
+
|
|
16
|
+
<!-- Lucide Icons via CDN -->
|
|
17
|
+
<script src="https://unpkg.com/lucide@latest"></script>
|
|
18
|
+
|
|
19
|
+
<!-- Mermaid.js via CDN for Diagrams -->
|
|
20
|
+
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.0/dist/mermaid.min.js"></script>
|
|
21
|
+
|
|
22
|
+
<!-- Chart.js via CDN for Charts -->
|
|
23
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
24
|
+
|
|
25
|
+
<!-- Reusable Web Components (Custom Elements) -->
|
|
26
|
+
<script src="components.js"></script>
|
|
27
|
+
|
|
28
|
+
<!-- Tailwind Configuration for Theme Customization & Dark Mode -->
|
|
29
|
+
<script>
|
|
30
|
+
tailwind.config = {
|
|
31
|
+
darkMode: 'class',
|
|
32
|
+
theme: {
|
|
33
|
+
extend: {
|
|
34
|
+
fontFamily: {
|
|
35
|
+
sans: ['Inter', 'sans-serif'],
|
|
36
|
+
},
|
|
37
|
+
colors: {
|
|
38
|
+
brand: {
|
|
39
|
+
50: '#f5f3ff',
|
|
40
|
+
100: '#ede9fe',
|
|
41
|
+
200: '#ddd6fe',
|
|
42
|
+
300: '#c4b5fd',
|
|
43
|
+
400: '#a78bfa',
|
|
44
|
+
500: '#8b5cf6',
|
|
45
|
+
600: '#7c3aed',
|
|
46
|
+
700: '#6d28d9',
|
|
47
|
+
800: '#5b21b6',
|
|
48
|
+
900: '#4c1d95',
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
</script>
|
|
55
|
+
|
|
56
|
+
<style>
|
|
57
|
+
/* Tinh chỉnh thanh cuộn cho đẹp mắt */
|
|
58
|
+
::-webkit-scrollbar {
|
|
59
|
+
width: 6px;
|
|
60
|
+
height: 6px;
|
|
61
|
+
}
|
|
62
|
+
::-webkit-scrollbar-track {
|
|
63
|
+
background: transparent;
|
|
64
|
+
}
|
|
65
|
+
.dark ::-webkit-scrollbar-thumb {
|
|
66
|
+
background: #334155;
|
|
67
|
+
border-radius: 4px;
|
|
68
|
+
}
|
|
69
|
+
::-webkit-scrollbar-thumb {
|
|
70
|
+
background: #cbd5e1;
|
|
71
|
+
border-radius: 4px;
|
|
72
|
+
}
|
|
73
|
+
::-webkit-scrollbar-thumb:hover {
|
|
74
|
+
background: #94a3b8;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* Thu nhỏ và đồng bộ đường line liên kết của Mermaid */
|
|
78
|
+
.mermaid .edgePath .path,
|
|
79
|
+
.mermaid .edgePath path,
|
|
80
|
+
.mermaid g.edgePath path {
|
|
81
|
+
stroke-width: 1px !important;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* CSS Overrides cho Mermaid hỗ trợ Light/Dark mode tức thì không cần reload */
|
|
85
|
+
.mermaid .node rect,
|
|
86
|
+
.mermaid .node circle,
|
|
87
|
+
.mermaid .node polygon,
|
|
88
|
+
.mermaid .node path,
|
|
89
|
+
.mermaid .node cylinder {
|
|
90
|
+
fill: #ffffff !important;
|
|
91
|
+
stroke: #cbd5e1 !important; /* Đồng bộ màu với đường line */
|
|
92
|
+
stroke-width: 1px !important;
|
|
93
|
+
transition: fill 0.2s ease, stroke 0.2s ease;
|
|
94
|
+
}
|
|
95
|
+
.dark .mermaid .node rect,
|
|
96
|
+
.dark .mermaid .node circle,
|
|
97
|
+
.dark .mermaid .node polygon,
|
|
98
|
+
.dark .mermaid .node path,
|
|
99
|
+
.dark .mermaid .node cylinder {
|
|
100
|
+
fill: #18181b !important;
|
|
101
|
+
stroke: #3f3f46 !important; /* Đồng bộ màu với đường line */
|
|
102
|
+
}
|
|
103
|
+
.mermaid .node .label {
|
|
104
|
+
color: #0f172a !important;
|
|
105
|
+
}
|
|
106
|
+
.dark .mermaid .node .label {
|
|
107
|
+
color: #e2e8f0 !important;
|
|
108
|
+
}
|
|
109
|
+
/* Viền ngoài của Subgraph */
|
|
110
|
+
.mermaid .cluster > rect {
|
|
111
|
+
fill: #ffffff !important;
|
|
112
|
+
stroke: #cbd5e1 !important; /* Đồng bộ màu với đường line */
|
|
113
|
+
stroke-width: 1px !important;
|
|
114
|
+
}
|
|
115
|
+
.dark .mermaid .cluster > rect {
|
|
116
|
+
fill: #09090b !important;
|
|
117
|
+
stroke: #3f3f46 !important; /* Đồng bộ màu với đường line */
|
|
118
|
+
stroke-width: 1px !important;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* Hộp tiêu đề Header của Subgraph (Tạo đường gạch ngang chia đôi) */
|
|
122
|
+
.mermaid .cluster .label-container,
|
|
123
|
+
.mermaid .cluster rect.header {
|
|
124
|
+
fill: #f8fafc !important; /* Màu nền header hơi xám nhẹ */
|
|
125
|
+
stroke: #cbd5e1 !important;
|
|
126
|
+
stroke-width: 1px !important;
|
|
127
|
+
}
|
|
128
|
+
.dark .mermaid .cluster .label-container,
|
|
129
|
+
.dark .mermaid .cluster rect.header {
|
|
130
|
+
fill: #18181b !important; /* Màu nền header tối */
|
|
131
|
+
stroke: #3f3f46 !important;
|
|
132
|
+
stroke-width: 1px !important;
|
|
133
|
+
}
|
|
134
|
+
.mermaid .cluster .label {
|
|
135
|
+
color: #64748b !important;
|
|
136
|
+
}
|
|
137
|
+
.dark .mermaid .cluster .label {
|
|
138
|
+
color: #a1a1aa !important;
|
|
139
|
+
}
|
|
140
|
+
.mermaid .edgePath .path {
|
|
141
|
+
stroke: #cbd5e1 !important;
|
|
142
|
+
}
|
|
143
|
+
.dark .mermaid .edgePath .path {
|
|
144
|
+
stroke: #3f3f46 !important;
|
|
145
|
+
}
|
|
146
|
+
.mermaid .edgePath .arrowheadPath {
|
|
147
|
+
fill: #94a3b8 !important;
|
|
148
|
+
stroke: none !important;
|
|
149
|
+
transform: scale(0.65) translate(-2px, -1px) !important;
|
|
150
|
+
}
|
|
151
|
+
.dark .mermaid .edgePath .arrowheadPath {
|
|
152
|
+
fill: #52525b !important;
|
|
153
|
+
stroke: none !important;
|
|
154
|
+
transform: scale(0.65) translate(-2px, -1px) !important;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Giao diện xem toàn màn hình (fullscreen board) cho sơ đồ */
|
|
158
|
+
.mermaid-fullscreen-active {
|
|
159
|
+
position: fixed !important;
|
|
160
|
+
inset: 0 !important;
|
|
161
|
+
z-index: 50 !important;
|
|
162
|
+
background-color: rgba(9, 9, 11, 0.96) !important;
|
|
163
|
+
padding: 5rem 2rem 2rem 2rem !important;
|
|
164
|
+
display: flex !important;
|
|
165
|
+
flex-direction: column !important;
|
|
166
|
+
align-items: center !important;
|
|
167
|
+
justify-content: center !important;
|
|
168
|
+
overflow: auto !important;
|
|
169
|
+
border-radius: 0 !important;
|
|
170
|
+
border: none !important;
|
|
171
|
+
}
|
|
172
|
+
.mermaid-fullscreen-active [id^="main-mermaid-diagram"] {
|
|
173
|
+
flex: 1 !important;
|
|
174
|
+
display: flex !important;
|
|
175
|
+
align-items: center !important;
|
|
176
|
+
justify-content: center !important;
|
|
177
|
+
width: 100% !important;
|
|
178
|
+
height: 100% !important;
|
|
179
|
+
overflow: auto !important;
|
|
180
|
+
}
|
|
181
|
+
.mermaid-fullscreen-active svg {
|
|
182
|
+
max-width: 95% !important;
|
|
183
|
+
max-height: 85vh !important;
|
|
184
|
+
height: auto !important;
|
|
185
|
+
width: auto !important;
|
|
186
|
+
}
|
|
187
|
+
</style>
|
|
188
|
+
</head>
|
|
189
|
+
<body class="bg-slate-50 text-slate-800 dark:bg-slate-950 dark:text-slate-200 min-h-screen flex flex-col font-sans transition-colors duration-200">
|
|
190
|
+
|
|
191
|
+
<!-- TOP HEADER -->
|
|
192
|
+
<mau-header logo-text="Dev" logo-highlight="Docs" logo-href="#" github-url="https://github.com" search-placeholder="Tìm kiếm tài liệu..."></mau-header>
|
|
193
|
+
|
|
194
|
+
<!-- MAIN WRAPPER -->
|
|
195
|
+
<div class="flex-1 max-w-[90rem] w-full mx-auto flex">
|
|
196
|
+
|
|
197
|
+
<!-- LEFT SIDEBAR -->
|
|
198
|
+
<mau-sidebar mobile-title="Điều hướng" search-placeholder="Tìm kiếm...">
|
|
199
|
+
<!-- AI_AGENT:SIDEBAR_NAVIGATION_START -->
|
|
200
|
+
|
|
201
|
+
<!-- Nhóm 1: Bắt đầu -->
|
|
202
|
+
<div class="flex flex-col gap-2">
|
|
203
|
+
<h3 class="font-semibold text-slate-900 dark:text-white uppercase tracking-wider text-[11px] text-slate-400 dark:text-slate-500">Giới thiệu chung</h3>
|
|
204
|
+
<ul class="flex flex-col gap-1 border-l border-slate-100 dark:border-slate-800 ml-1.5 pl-3">
|
|
205
|
+
<li>
|
|
206
|
+
<a href="#tong-quan" class="nav-link block py-1.5 text-brand-600 dark:text-brand-400 font-medium -ml-3.5 pl-3.5 border-l-2 border-brand-600 dark:border-brand-400 transition-all">Tổng quan dự án</a>
|
|
207
|
+
</li>
|
|
208
|
+
<li>
|
|
209
|
+
<a href="#huong-dan-ai" class="nav-link block py-1.5 text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 transition-all">Hướng dẫn AI Agent</a>
|
|
210
|
+
</li>
|
|
211
|
+
</ul>
|
|
212
|
+
</div>
|
|
213
|
+
|
|
214
|
+
<!-- Nhóm 2: Các Block Giao Diện Mẫu -->
|
|
215
|
+
<div class="flex flex-col gap-2">
|
|
216
|
+
<h3 class="font-semibold text-slate-900 dark:text-white uppercase tracking-wider text-[11px] text-slate-400 dark:text-slate-500">Thành phần UI Mẫu</h3>
|
|
217
|
+
<ul class="flex flex-col gap-1 border-l border-slate-100 dark:border-slate-800 ml-1.5 pl-3">
|
|
218
|
+
<li>
|
|
219
|
+
<a href="#block-alert" class="nav-link block py-1.5 text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 transition-all">Hộp thông báo (Alerts)</a>
|
|
220
|
+
</li>
|
|
221
|
+
<li>
|
|
222
|
+
<a href="#block-code" class="nav-link block py-1.5 text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 transition-all">Mã nguồn (Code Blocks)</a>
|
|
223
|
+
</li>
|
|
224
|
+
<li>
|
|
225
|
+
<a href="#block-table" class="nav-link block py-1.5 text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 transition-all">Bảng biểu & Dữ liệu</a>
|
|
226
|
+
</li>
|
|
227
|
+
<li>
|
|
228
|
+
<a href="#block-cards" class="nav-link block py-1.5 text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 transition-all">Danh sách dạng Thẻ (Cards)</a>
|
|
229
|
+
</li>
|
|
230
|
+
<li>
|
|
231
|
+
<a href="#block-steps" class="nav-link block py-1.5 text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 transition-all">Quy trình (Steps Layout)</a>
|
|
232
|
+
</li>
|
|
233
|
+
<li>
|
|
234
|
+
<a href="#block-tabs" class="nav-link block py-1.5 text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 transition-all">Chuyển đổi tab (Tabs)</a>
|
|
235
|
+
</li>
|
|
236
|
+
<li>
|
|
237
|
+
<a href="#block-accordions" class="nav-link block py-1.5 text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 transition-all">Hộp mở rộng (Accordions)</a>
|
|
238
|
+
</li>
|
|
239
|
+
<li>
|
|
240
|
+
<a href="#block-badges-buttons" class="nav-link block py-1.5 text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 transition-all">Nhãn & Nút (Badges & Buttons)</a>
|
|
241
|
+
</li>
|
|
242
|
+
<li>
|
|
243
|
+
<a href="#block-diagrams" class="nav-link block py-1.5 text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 transition-all">Sơ đồ luồng (Diagrams)</a>
|
|
244
|
+
</li>
|
|
245
|
+
<li>
|
|
246
|
+
<a href="#block-charts" class="nav-link block py-1.5 text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 transition-all">Biểu đồ (Charts)</a>
|
|
247
|
+
</li>
|
|
248
|
+
</ul>
|
|
249
|
+
</div>
|
|
250
|
+
<!-- AI_AGENT:SIDEBAR_NAVIGATION_END -->
|
|
251
|
+
</mau-sidebar>
|
|
252
|
+
|
|
253
|
+
|
|
254
|
+
<!-- CONTENT WRAPPER -->
|
|
255
|
+
<main class="flex-1 min-w-0 px-4 sm:px-6 lg:px-8 py-8 lg:py-12 flex gap-10">
|
|
256
|
+
|
|
257
|
+
<!-- MAIN ARTICLE CONTENT -->
|
|
258
|
+
<article class="flex-1 min-w-0 max-w-3xl">
|
|
259
|
+
|
|
260
|
+
<!-- Breadcrumbs -->
|
|
261
|
+
<nav class="flex items-center gap-2 text-xs text-slate-400 dark:text-slate-500 mb-4">
|
|
262
|
+
<a href="#" class="hover:text-slate-600 dark:hover:text-slate-350">Tài liệu</a>
|
|
263
|
+
<i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
|
|
264
|
+
<span class="text-slate-600 dark:text-slate-350 font-medium">Tổng quan</span>
|
|
265
|
+
</nav>
|
|
266
|
+
|
|
267
|
+
<!-- AI_AGENT:MAIN_CONTENT_START -->
|
|
268
|
+
|
|
269
|
+
<!-- SECTION: TỔNG QUAN -->
|
|
270
|
+
<section id="tong-quan" class="mb-12 scroll-mt-20">
|
|
271
|
+
<h1 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-4">Mẫu tài liệu chuẩn hóa cho AI Agent</h1>
|
|
272
|
+
<p class="text-lg text-slate-600 dark:text-slate-400 mb-6 leading-relaxed">
|
|
273
|
+
Chào mừng bạn đến với template tài liệu tối giản và hiện đại được tối ưu hóa cho cả người dùng lẫn các **AI Agent**. File HTML này chứa toàn bộ CSS và biểu tượng cần thiết qua CDN, sẵn sàng chạy ngay mà không cần cấu hình phức tạp.
|
|
274
|
+
</p>
|
|
275
|
+
<div class="p-5 rounded-2xl bg-gradient-to-tr from-brand-50 to-indigo-50/50 dark:from-brand-950/20 dark:to-indigo-950/20 border border-brand-100 dark:border-brand-900/50 flex gap-4">
|
|
276
|
+
<div class="text-brand-600 dark:text-brand-400 shrink-0 mt-0.5">
|
|
277
|
+
<i data-lucide="sparkles" class="w-5.5 h-5.5"></i>
|
|
278
|
+
</div>
|
|
279
|
+
<div>
|
|
280
|
+
<h4 class="font-semibold text-brand-900 dark:text-brand-300 text-sm mb-1">Mục tiêu thiết kế</h4>
|
|
281
|
+
<p class="text-xs text-brand-700/95 dark:text-brand-400/90 leading-relaxed">
|
|
282
|
+
Tạo một khung chuẩn duy nhất giúp các AI agent tự động hiểu quy tắc UI, dễ dàng nhân bản mã nguồn để xây dựng hệ thống hướng dẫn, API Docs hoặc giáo trình lập trình đồng bộ.
|
|
283
|
+
</p>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
</section>
|
|
287
|
+
|
|
288
|
+
<!-- SECTION: HƯỚNG DẪN AI AGENT -->
|
|
289
|
+
<section id="huong-dan-ai" class="mb-12 scroll-mt-20 border-t border-slate-100 dark:border-slate-800/60 pt-10">
|
|
290
|
+
<h2 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight mb-4 flex items-center gap-2">
|
|
291
|
+
<i data-lucide="cpu" class="w-5 h-5 text-indigo-500"></i>
|
|
292
|
+
<span>Hướng dẫn dành cho AI Agent</span>
|
|
293
|
+
</h2>
|
|
294
|
+
<p class="text-sm text-slate-600 dark:text-slate-400 mb-6">
|
|
295
|
+
Khi AI Agent muốn thêm nội dung mới, cần tuân thủ 2 vị trí neo (anchor comments) chính trong tệp tin:
|
|
296
|
+
</p>
|
|
297
|
+
|
|
298
|
+
<ul class="space-y-4 text-sm text-slate-600 dark:text-slate-400">
|
|
299
|
+
<li class="flex gap-3">
|
|
300
|
+
<div class="w-5 h-5 rounded-full bg-emerald-50 dark:bg-emerald-950/30 flex items-center justify-center text-emerald-600 dark:text-emerald-400 shrink-0 font-bold text-xs mt-0.5">1</div>
|
|
301
|
+
<div>
|
|
302
|
+
<strong>Danh mục Sidebar:</strong> Thêm liên kết `<a href="#id-cua-ban" ...>` vào trong khối được bao bọc bởi `<!-- AI_AGENT:SIDEBAR_NAVIGATION_START -->` và `<!-- AI_AGENT:SIDEBAR_NAVIGATION_END -->`.
|
|
303
|
+
</div>
|
|
304
|
+
</li>
|
|
305
|
+
<li class="flex gap-3">
|
|
306
|
+
<div class="w-5 h-5 rounded-full bg-emerald-50 dark:bg-emerald-950/30 flex items-center justify-center text-emerald-600 dark:text-emerald-400 shrink-0 font-bold text-xs mt-0.5">2</div>
|
|
307
|
+
<div>
|
|
308
|
+
<strong>Nội dung chính:</strong> Thêm các thẻ `<section id="id-cua-ban" class="mb-12 scroll-mt-20 border-t border-slate-100 dark:border-slate-800/60 pt-10">` vào bên dưới thẻ bắt đầu `<!-- AI_AGENT:MAIN_CONTENT_START -->`.
|
|
309
|
+
</div>
|
|
310
|
+
</li>
|
|
311
|
+
</ul>
|
|
312
|
+
</section>
|
|
313
|
+
|
|
314
|
+
<!-- SECTION: BLOCK ALERTS -->
|
|
315
|
+
<section id="block-alert" class="mb-12 scroll-mt-20 border-t border-slate-100 dark:border-slate-800/60 pt-10">
|
|
316
|
+
<h2 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight mb-3">Hộp thông báo (Alerts / Callouts)</h2>
|
|
317
|
+
<p class="text-sm text-slate-500 dark:text-slate-400 mb-6">Dùng để làm nổi bật các lưu ý, cảnh báo hoặc lời khuyên quan trọng.</p>
|
|
318
|
+
|
|
319
|
+
<div class="space-y-4">
|
|
320
|
+
<!-- Cách 1: Sử dụng qua Custom HTML Tag -->
|
|
321
|
+
<mau-alert type="info" title="Thông tin chi tiết (HTML Custom Tag)">
|
|
322
|
+
Đây là một khối thông báo dạng Info được dựng sẵn bằng <strong>Web Component</strong> kế thừa Tailwind CSS.
|
|
323
|
+
</mau-alert>
|
|
324
|
+
|
|
325
|
+
<!-- Cách 2: Sử dụng qua JS Functional (React/TSX style) -->
|
|
326
|
+
<div id="dynamic-alert-root"></div>
|
|
327
|
+
|
|
328
|
+
<script>
|
|
329
|
+
window.addEventListener('DOMContentLoaded', () => {
|
|
330
|
+
const root = document.getElementById('dynamic-alert-root');
|
|
331
|
+
if (root && window.DevDocs) {
|
|
332
|
+
const dynamicAlert = window.DevDocs.Alert({
|
|
333
|
+
type: 'success',
|
|
334
|
+
title: 'React/TSX Functional style (Javascript)',
|
|
335
|
+
children: 'Đây là Alert được tạo động bằng hàm <code>Alert({ type: "success", title: "...", children: "..." })</code> phong cách TSX, hỗ trợ nút đóng tắt linh hoạt!',
|
|
336
|
+
dismissible: true
|
|
337
|
+
});
|
|
338
|
+
root.appendChild(dynamicAlert);
|
|
339
|
+
}
|
|
340
|
+
});
|
|
341
|
+
</script>
|
|
342
|
+
</div>
|
|
343
|
+
</section>
|
|
344
|
+
|
|
345
|
+
<!-- SECTION: CODE BLOCKS -->
|
|
346
|
+
<section id="block-code" class="mb-12 scroll-mt-20 border-t border-slate-100 dark:border-slate-800/60 pt-10">
|
|
347
|
+
<h2 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight mb-3">Mã nguồn (Code Blocks)</h2>
|
|
348
|
+
<p class="text-sm text-slate-500 dark:text-slate-400 mb-6">Trình diễn mã nguồn lập trình với font chữ Courier/Mono và tích hợp sẵn chức năng Copy nhanh.</p>
|
|
349
|
+
|
|
350
|
+
<mau-code-block language="javascript" code="const agent = new AIAgent({
|
|
351
|
+
name: 'Antigravity',
|
|
352
|
+
skills: ['coding', 'planning']
|
|
353
|
+
});
|
|
354
|
+
agent.start();"></mau-code-block>
|
|
355
|
+
</section>
|
|
356
|
+
|
|
357
|
+
<!-- SECTION: TABLES -->
|
|
358
|
+
<section id="block-table" class="mb-12 scroll-mt-20 border-t border-slate-100 dark:border-slate-800/60 pt-10">
|
|
359
|
+
<h2 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight mb-3">Bảng biểu & Dữ liệu (Tables)</h2>
|
|
360
|
+
<p class="text-sm text-slate-500 dark:text-slate-400 mb-6">Sử dụng để liệt kê tham số API, cấu hình, thông số kỹ thuật.</p>
|
|
361
|
+
|
|
362
|
+
<div class="overflow-x-auto rounded-xl border border-slate-200/80 dark:border-slate-800">
|
|
363
|
+
<table class="w-full text-left text-sm border-collapse">
|
|
364
|
+
<thead>
|
|
365
|
+
<tr class="bg-slate-50 dark:bg-slate-900/60 border-b border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white font-semibold">
|
|
366
|
+
<th class="px-4 py-3">Tham số</th>
|
|
367
|
+
<th class="px-4 py-3">Kiểu dữ liệu</th>
|
|
368
|
+
<th class="px-4 py-3">Mô tả</th>
|
|
369
|
+
</tr>
|
|
370
|
+
</thead>
|
|
371
|
+
<tbody class="divide-y divide-slate-150 dark:divide-slate-800/80">
|
|
372
|
+
<tr class="hover:bg-slate-50/50 dark:hover:bg-slate-900/30 transition-all">
|
|
373
|
+
<td class="px-4 py-3 font-mono font-medium text-brand-600 dark:text-brand-400">configPath</td>
|
|
374
|
+
<td class="px-4 py-3 text-slate-500">string</td>
|
|
375
|
+
<td class="px-4 py-3">Đường dẫn tương đối tới file config.json</td>
|
|
376
|
+
</tr>
|
|
377
|
+
<tr class="hover:bg-slate-50/50 dark:hover:bg-slate-900/30 transition-all">
|
|
378
|
+
<td class="px-4 py-3 font-mono font-medium text-brand-600 dark:text-brand-400">autoCommit</td>
|
|
379
|
+
<td class="px-4 py-3 text-slate-500">boolean</td>
|
|
380
|
+
<td class="px-4 py-3">Tự động đẩy mã nguồn sau khi tạo thành công.</td>
|
|
381
|
+
</tr>
|
|
382
|
+
</tbody>
|
|
383
|
+
</table>
|
|
384
|
+
</div>
|
|
385
|
+
</section>
|
|
386
|
+
|
|
387
|
+
<!-- SECTION: CARDS GRID -->
|
|
388
|
+
<section id="block-cards" class="mb-12 scroll-mt-20 border-t border-slate-100 dark:border-slate-800/60 pt-10">
|
|
389
|
+
<h2 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight mb-3">Danh sách dạng Thẻ (Cards Grid)</h2>
|
|
390
|
+
<p class="text-sm text-slate-500 dark:text-slate-400 mb-6">Thích hợp làm danh mục bài viết nổi bật hoặc tính năng chính.</p>
|
|
391
|
+
|
|
392
|
+
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
393
|
+
<div class="p-5 rounded-xl border border-slate-200 dark:border-slate-800 hover:border-brand-500 dark:hover:border-brand-500 hover:shadow-md hover:-translate-y-0.5 transition-all bg-white dark:bg-slate-900 group">
|
|
394
|
+
<div class="w-10 h-10 rounded-lg bg-brand-50 dark:bg-brand-950/50 flex items-center justify-center text-brand-600 dark:text-brand-400 mb-4 group-hover:scale-110 transition-transform">
|
|
395
|
+
<i data-lucide="zap" class="w-5 h-5"></i>
|
|
396
|
+
</div>
|
|
397
|
+
<h4 class="font-semibold text-slate-900 dark:text-white text-base mb-1.5">Tốc độ tối ưu</h4>
|
|
398
|
+
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">Sử dụng Tailwind CDN tải nhanh và dễ chạy ngay mà không cần cài đặt Node.js ban đầu.</p>
|
|
399
|
+
</div>
|
|
400
|
+
|
|
401
|
+
<div class="p-5 rounded-xl border border-slate-200 dark:border-slate-800 hover:border-brand-500 dark:hover:border-brand-500 hover:shadow-md hover:-translate-y-0.5 transition-all bg-white dark:bg-slate-900 group">
|
|
402
|
+
<div class="w-10 h-10 rounded-lg bg-indigo-50 dark:bg-indigo-950/50 flex items-center justify-center text-indigo-600 dark:text-indigo-400 mb-4 group-hover:scale-110 transition-transform">
|
|
403
|
+
<i data-lucide="shield-check" class="w-5 h-5"></i>
|
|
404
|
+
</div>
|
|
405
|
+
<h4 class="font-semibold text-slate-900 dark:text-white text-base mb-1.5">Tính nhất quán</h4>
|
|
406
|
+
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">Mọi agent sẽ tuân thủ cấu trúc của template để duy trì trải nghiệm liền mạch.</p>
|
|
407
|
+
</div>
|
|
408
|
+
</div>
|
|
409
|
+
</section>
|
|
410
|
+
|
|
411
|
+
<!-- SECTION: STEPS -->
|
|
412
|
+
<section id="block-steps" class="mb-12 scroll-mt-20 border-t border-slate-100 dark:border-slate-800/60 pt-10">
|
|
413
|
+
<h2 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight mb-3">Quy trình thực hiện (Steps Layout)</h2>
|
|
414
|
+
<p class="text-sm text-slate-500 dark:text-slate-400 mb-6">Trình diễn tuần tự các bước cài đặt hoặc hướng dẫn từng bước.</p>
|
|
415
|
+
|
|
416
|
+
<div class="space-y-6 ml-4 border-l-2 border-slate-150 dark:border-slate-800 pl-6 relative">
|
|
417
|
+
<!-- Step 1 -->
|
|
418
|
+
<div class="relative">
|
|
419
|
+
<div class="absolute -left-[35px] top-0.5 w-6 h-6 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold text-xs ring-4 ring-white dark:ring-slate-950">1</div>
|
|
420
|
+
<h4 class="font-semibold text-slate-900 dark:text-white text-sm mb-1">Khởi tạo Dự án</h4>
|
|
421
|
+
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">Chạy lệnh của NPM CLI để tự động kéo file template chuẩn về thư mục của bạn.</p>
|
|
422
|
+
</div>
|
|
423
|
+
|
|
424
|
+
<!-- Step 2 -->
|
|
425
|
+
<div class="relative">
|
|
426
|
+
<div class="absolute -left-[35px] top-0.5 w-6 h-6 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold text-xs ring-4 ring-white dark:ring-slate-950">2</div>
|
|
427
|
+
<h4 class="font-semibold text-slate-900 dark:text-white text-sm mb-1">Tích hợp AI Agent</h4>
|
|
428
|
+
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">Cấu hình prompt của AI Agent để tham chiếu đến các anchor của file này.</p>
|
|
429
|
+
</div>
|
|
430
|
+
</div>
|
|
431
|
+
</section>
|
|
432
|
+
|
|
433
|
+
<!-- SECTION: TABS -->
|
|
434
|
+
<section id="block-tabs" class="mb-12 scroll-mt-20 border-t border-slate-100 dark:border-slate-800/60 pt-10">
|
|
435
|
+
<h2 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight mb-3">Chuyển đổi tab (Tabs Switcher)</h2>
|
|
436
|
+
<p class="text-sm text-slate-500 dark:text-slate-400 mb-6">Dùng để chuyển đổi giữa các câu lệnh cài đặt hoặc các ngôn ngữ lập trình khác nhau.</p>
|
|
437
|
+
|
|
438
|
+
<div class="rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden bg-white dark:bg-slate-900">
|
|
439
|
+
<div class="flex border-b border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900/60 px-4">
|
|
440
|
+
<button class="tab-btn px-4 py-3 text-sm font-medium border-b-2 border-brand-500 text-brand-600 dark:text-brand-400 transition-all" data-tab-target="npm-pane">npm</button>
|
|
441
|
+
<button class="tab-btn px-4 py-3 text-sm font-medium border-b-2 border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 transition-all" data-tab-target="yarn-pane">yarn</button>
|
|
442
|
+
<button class="tab-btn px-4 py-3 text-sm font-medium border-b-2 border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 transition-all" data-tab-target="pnpm-pane">pnpm</button>
|
|
443
|
+
</div>
|
|
444
|
+
<div class="p-4 bg-slate-950 text-slate-200 font-mono text-xs">
|
|
445
|
+
<div id="npm-pane" class="tab-pane block">npm install create-tailwind-docs</div>
|
|
446
|
+
<div id="yarn-pane" class="tab-pane hidden">yarn add create-tailwind-docs</div>
|
|
447
|
+
<div id="pnpm-pane" class="tab-pane hidden">pnpm add create-tailwind-docs</div>
|
|
448
|
+
</div>
|
|
449
|
+
</div>
|
|
450
|
+
</section>
|
|
451
|
+
|
|
452
|
+
<!-- SECTION: ACCORDIONS -->
|
|
453
|
+
<section id="block-accordions" class="mb-12 scroll-mt-20 border-t border-slate-100 dark:border-slate-800/60 pt-10">
|
|
454
|
+
<h2 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight mb-3">Hộp mở rộng (Accordions / FAQs)</h2>
|
|
455
|
+
<p class="text-sm text-slate-500 dark:text-slate-400 mb-6">Thích hợp cho phần câu hỏi thường gặp (FAQs) hoặc nội dung ẩn/hiện nâng cao.</p>
|
|
456
|
+
|
|
457
|
+
<div class="space-y-3">
|
|
458
|
+
<mau-accordion title="Làm sao để tuân thủ thiết kế tối giản?">
|
|
459
|
+
Hãy hạn chế tự viết các class CSS ad-hoc, thay vào đó hãy sử dụng lại hệ màu Slate/Indigo/Brand đã được cấu hình sẵn trong config Tailwind của tệp tin.
|
|
460
|
+
</mau-accordion>
|
|
461
|
+
|
|
462
|
+
<mau-accordion title="Tôi có thể tùy chỉnh font chữ khác không?">
|
|
463
|
+
Được. Bạn có thể thay đổi link Google Fonts tại phần Header và cập nhật cấu hình <code>fontFamily</code> trong đoạn script cài đặt của Tailwind CSS.
|
|
464
|
+
</mau-accordion>
|
|
465
|
+
</div>
|
|
466
|
+
</section>
|
|
467
|
+
|
|
468
|
+
<!-- SECTION: BADGES & BUTTONS -->
|
|
469
|
+
<section id="block-badges-buttons" class="mb-12 scroll-mt-20 border-t border-slate-100 dark:border-slate-800/60 pt-10">
|
|
470
|
+
<h2 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight mb-3">Nhãn và Nút bấm (Badges & Buttons)</h2>
|
|
471
|
+
<p class="text-sm text-slate-500 dark:text-slate-400 mb-6">Sử dụng để định danh trạng thái API hoặc các liên kết hành động chính.</p>
|
|
472
|
+
|
|
473
|
+
<div class="space-y-6">
|
|
474
|
+
<!-- Badges -->
|
|
475
|
+
<div class="flex flex-wrap gap-2 items-center">
|
|
476
|
+
<span class="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-brand-100 text-brand-700 dark:bg-brand-950/40 dark:text-brand-300 border border-brand-200/50 dark:border-brand-900/30">GET</span>
|
|
477
|
+
<span class="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300 border border-emerald-200/50 dark:border-emerald-900/30">POST</span>
|
|
478
|
+
<span class="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300 border border-amber-200/50 dark:border-amber-900/30">Required</span>
|
|
479
|
+
<span class="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400">v1.2.0</span>
|
|
480
|
+
</div>
|
|
481
|
+
|
|
482
|
+
<!-- Buttons -->
|
|
483
|
+
<div class="flex flex-wrap gap-3">
|
|
484
|
+
<button class="px-4 py-2 rounded-lg bg-brand-600 hover:bg-brand-700 active:bg-brand-850 text-white font-medium text-sm transition-all shadow-sm shadow-brand-500/10">Nút chính (Primary)</button>
|
|
485
|
+
<button class="px-4 py-2 rounded-lg border border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-900 text-slate-700 dark:text-slate-300 font-medium text-sm transition-all">Nút phụ (Outline)</button>
|
|
486
|
+
</div>
|
|
487
|
+
</div>
|
|
488
|
+
</section>
|
|
489
|
+
|
|
490
|
+
<!-- SECTION: DIAGRAMS -->
|
|
491
|
+
<section id="block-diagrams" class="mb-12 scroll-mt-20 border-t border-slate-100 dark:border-slate-800/60 pt-10">
|
|
492
|
+
<h2 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight mb-3">Sơ đồ luồng & Sơ đồ tư duy (Mermaid.js)</h2>
|
|
493
|
+
<p class="text-sm text-slate-500 dark:text-slate-400 mb-6">Vẽ sơ đồ luồng dữ liệu, sơ đồ tuần tự hoặc mindmap trực tiếp từ văn bản text. AI Agent rất thích hợp để sinh nội dung này.</p>
|
|
494
|
+
|
|
495
|
+
<div class="space-y-6">
|
|
496
|
+
<!-- Flowchart Container -->
|
|
497
|
+
<div id="mermaid-container" class="relative group rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 transition-all duration-300">
|
|
498
|
+
<!-- Expand / Close Buttons -->
|
|
499
|
+
<div class="absolute top-3 right-3 flex gap-2 z-10">
|
|
500
|
+
<button id="expand-mermaid-btn" class="p-1.5 rounded-lg bg-slate-50 hover:bg-slate-100 dark:bg-slate-850 dark:hover:bg-slate-800 text-slate-500 dark:text-slate-400 transition-all border border-slate-200 dark:border-slate-700 shadow-sm" title="Xem toàn màn hình">
|
|
501
|
+
<i data-lucide="maximize-2" class="w-4 h-4"></i>
|
|
502
|
+
</button>
|
|
503
|
+
<button id="close-mermaid-btn" class="hidden p-1.5 rounded-lg bg-slate-900 hover:bg-slate-800 text-slate-400 hover:text-white transition-all border border-slate-800 shadow-sm" title="Đóng">
|
|
504
|
+
<i data-lucide="x" class="w-4 h-4"></i>
|
|
505
|
+
</button>
|
|
506
|
+
</div>
|
|
507
|
+
|
|
508
|
+
<div class="overflow-x-auto flex justify-center pt-4" id="main-mermaid-diagram">
|
|
509
|
+
<div class="mermaid w-full">
|
|
510
|
+
flowchart LR
|
|
511
|
+
subgraph db_pg["PostgreSQL - 1 database"]
|
|
512
|
+
users[users]
|
|
513
|
+
sub_plan["subscriptions plan=PRO"]
|
|
514
|
+
wallets[credit_wallets]
|
|
515
|
+
proj_1[projects #1]
|
|
516
|
+
proj_2[projects #2]
|
|
517
|
+
runtimes[project_runtimes]
|
|
518
|
+
channels[project_channels]
|
|
519
|
+
|
|
520
|
+
users --> sub_plan
|
|
521
|
+
users --> wallets
|
|
522
|
+
users --> proj_1
|
|
523
|
+
users --> proj_2
|
|
524
|
+
proj_1 --> runtimes
|
|
525
|
+
proj_1 --> channels
|
|
526
|
+
end
|
|
527
|
+
</div>
|
|
528
|
+
</div>
|
|
529
|
+
</div>
|
|
530
|
+
|
|
531
|
+
<!-- Flowchart Container 2 (Architecture TD) -->
|
|
532
|
+
<div id="mermaid-container-2" class="relative group rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 mt-6 transition-all duration-300">
|
|
533
|
+
<!-- Expand / Close Buttons -->
|
|
534
|
+
<div class="absolute top-3 right-3 flex gap-2 z-10">
|
|
535
|
+
<button id="expand-mermaid-btn-2" class="p-1.5 rounded-lg bg-slate-50 hover:bg-slate-100 dark:bg-slate-850 dark:hover:bg-slate-800 text-slate-500 dark:text-slate-400 transition-all border border-slate-200 dark:border-slate-700 shadow-sm" title="Xem toàn màn hình">
|
|
536
|
+
<i data-lucide="maximize-2" class="w-4 h-4"></i>
|
|
537
|
+
</button>
|
|
538
|
+
<button id="close-mermaid-btn-2" class="hidden p-1.5 rounded-lg bg-slate-900 hover:bg-slate-800 text-slate-400 hover:text-white transition-all border border-slate-800 shadow-sm" title="Đóng">
|
|
539
|
+
<i data-lucide="x" class="w-4 h-4"></i>
|
|
540
|
+
</button>
|
|
541
|
+
</div>
|
|
542
|
+
|
|
543
|
+
<div class="overflow-x-auto flex justify-center pt-4" id="main-mermaid-diagram-2">
|
|
544
|
+
<div class="mermaid w-full">
|
|
545
|
+
flowchart TD
|
|
546
|
+
subgraph cloud_private["Cloud (private)"]
|
|
547
|
+
web["cloud-web hoặc web + flags"]
|
|
548
|
+
api["cloud-api"]
|
|
549
|
+
fleet["fleet package"]
|
|
550
|
+
billing["billing package"]
|
|
551
|
+
container["1 container/project"]
|
|
552
|
+
gateways["N gateways"]
|
|
553
|
+
|
|
554
|
+
web --> api
|
|
555
|
+
api --> fleet
|
|
556
|
+
api --> billing
|
|
557
|
+
fleet --> container
|
|
558
|
+
container --> gateways
|
|
559
|
+
end
|
|
560
|
+
|
|
561
|
+
subgraph oss_public["OSS (công khai)"]
|
|
562
|
+
web_oss["apps/web"]
|
|
563
|
+
api_oss["apps/api"]
|
|
564
|
+
proxy["proxy WS"]
|
|
565
|
+
db[(PostgreSQL)]
|
|
566
|
+
sync["sync file"]
|
|
567
|
+
core["@aucobot/control-plane-core"]
|
|
568
|
+
gateway_oss["1x gateway"]
|
|
569
|
+
volume["volume"]
|
|
570
|
+
|
|
571
|
+
web_oss --> api_oss
|
|
572
|
+
api_oss --> proxy
|
|
573
|
+
api_oss --> db
|
|
574
|
+
api_oss --> sync
|
|
575
|
+
api_oss --> core
|
|
576
|
+
proxy --> gateway_oss
|
|
577
|
+
sync --> volume
|
|
578
|
+
end
|
|
579
|
+
|
|
580
|
+
billing -->|import packages| core
|
|
581
|
+
gateways ~~~ web_oss
|
|
582
|
+
</div>
|
|
583
|
+
</div>
|
|
584
|
+
</div>
|
|
585
|
+
</div>
|
|
586
|
+
</section>
|
|
587
|
+
|
|
588
|
+
<!-- SECTION: CHARTS -->
|
|
589
|
+
<section id="block-charts" class="mb-12 scroll-mt-20 border-t border-slate-100 dark:border-slate-800/60 pt-10">
|
|
590
|
+
<h2 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight mb-3">Biểu đồ dữ liệu (Chart.js)</h2>
|
|
591
|
+
<p class="text-sm text-slate-500 dark:text-slate-400 mb-6">Trình diễn biểu đồ trực quan, sinh động (cột, đường, tròn) phục vụ báo cáo số liệu.</p>
|
|
592
|
+
|
|
593
|
+
<div class="p-5 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
|
|
594
|
+
<div class="max-w-md mx-auto aspect-video">
|
|
595
|
+
<canvas id="sample-chart"></canvas>
|
|
596
|
+
</div>
|
|
597
|
+
</div>
|
|
598
|
+
</section>
|
|
599
|
+
|
|
600
|
+
<!-- AI_AGENT:MAIN_CONTENT_END -->
|
|
601
|
+
|
|
602
|
+
</article>
|
|
603
|
+
|
|
604
|
+
<!-- RIGHT SIDEBAR (TABLE OF CONTENTS) -->
|
|
605
|
+
<aside class="hidden lg:block w-48 shrink-0 sticky top-24 self-start max-h-[calc(100vh-6rem)] overflow-y-auto pr-2 text-xs">
|
|
606
|
+
<h4 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-[10px] mb-3">Mục lục trang này</h4>
|
|
607
|
+
|
|
608
|
+
<ul id="toc-list" class="space-y-2.5 border-l border-slate-100 dark:border-slate-800 pl-3.5">
|
|
609
|
+
<!-- Sẽ được tự động cập nhật bởi JS -->
|
|
610
|
+
</ul>
|
|
611
|
+
</aside>
|
|
612
|
+
|
|
613
|
+
</main>
|
|
614
|
+
</div>
|
|
615
|
+
|
|
616
|
+
<!-- FOOTER -->
|
|
617
|
+
<footer class="mt-auto border-t border-slate-200/80 bg-white/50 py-6 dark:border-slate-800/80 dark:bg-slate-900/30 text-center text-xs text-slate-400 transition-colors">
|
|
618
|
+
<div class="max-w-[90rem] mx-auto px-4">
|
|
619
|
+
<p>© 2026 DevDocs. Được tối ưu hóa cho AI & Lập trình viên.</p>
|
|
620
|
+
</div>
|
|
621
|
+
</footer>
|
|
622
|
+
|
|
623
|
+
<!-- CORE SCRIPTS -->
|
|
624
|
+
<script>
|
|
625
|
+
// Initialize Lucide Icons
|
|
626
|
+
lucide.createIcons();
|
|
627
|
+
|
|
628
|
+
// ==========================================
|
|
629
|
+
// 1. Initial Theme Manager
|
|
630
|
+
// ==========================================
|
|
631
|
+
// Init theme
|
|
632
|
+
if (localStorage.getItem('color-theme') === 'dark' ||
|
|
633
|
+
(!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
634
|
+
document.documentElement.classList.add('dark');
|
|
635
|
+
} else {
|
|
636
|
+
document.documentElement.classList.remove('dark');
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
// ==========================================
|
|
640
|
+
// 3. Auto Generate Table of Contents (TOC) & Highlight Active Navigation
|
|
641
|
+
// ==========================================
|
|
642
|
+
const tocList = document.getElementById('toc-list');
|
|
643
|
+
const sections = document.querySelectorAll('article section');
|
|
644
|
+
|
|
645
|
+
sections.forEach(sec => {
|
|
646
|
+
const h2 = sec.querySelector('h2') || sec.querySelector('h1');
|
|
647
|
+
if (h2) {
|
|
648
|
+
const li = document.createElement('li');
|
|
649
|
+
const a = document.createElement('a');
|
|
650
|
+
a.href = `#${sec.id}`;
|
|
651
|
+
a.textContent = h2.textContent.trim();
|
|
652
|
+
a.className = 'toc-link block text-slate-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors';
|
|
653
|
+
li.appendChild(a);
|
|
654
|
+
tocList.appendChild(li);
|
|
655
|
+
}
|
|
656
|
+
});
|
|
657
|
+
|
|
658
|
+
const tocLinks = document.querySelectorAll('.toc-link');
|
|
659
|
+
|
|
660
|
+
// Scrollspy Highlight
|
|
661
|
+
function onScroll() {
|
|
662
|
+
let scrollPos = window.scrollY || document.documentElement.scrollTop || 0;
|
|
663
|
+
const headerOffset = 100;
|
|
664
|
+
const navLinks = document.querySelectorAll('.nav-link');
|
|
665
|
+
|
|
666
|
+
sections.forEach((sec) => {
|
|
667
|
+
const top = sec.offsetTop - headerOffset;
|
|
668
|
+
const bottom = top + sec.offsetHeight;
|
|
669
|
+
|
|
670
|
+
if (scrollPos >= top && scrollPos < bottom) {
|
|
671
|
+
// Highlight Sidebar Links
|
|
672
|
+
navLinks.forEach(link => {
|
|
673
|
+
if (link.getAttribute('href') === `#${sec.id}`) {
|
|
674
|
+
link.className = 'nav-link block py-1.5 text-brand-600 dark:text-brand-400 font-medium -ml-3.5 pl-3.5 border-l-2 border-brand-600 dark:border-brand-400 transition-all';
|
|
675
|
+
} else {
|
|
676
|
+
link.className = 'nav-link block py-1.5 text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 transition-all';
|
|
677
|
+
}
|
|
678
|
+
});
|
|
679
|
+
|
|
680
|
+
// Highlight TOC Links
|
|
681
|
+
tocLinks.forEach(link => {
|
|
682
|
+
if (link.getAttribute('href') === `#${sec.id}`) {
|
|
683
|
+
link.classList.remove('text-slate-400');
|
|
684
|
+
link.classList.add('text-brand-600', 'dark:text-brand-400', 'font-medium');
|
|
685
|
+
} else {
|
|
686
|
+
link.classList.remove('text-brand-600', 'dark:text-brand-400', 'font-medium');
|
|
687
|
+
link.classList.add('text-slate-400');
|
|
688
|
+
}
|
|
689
|
+
});
|
|
690
|
+
}
|
|
691
|
+
});
|
|
692
|
+
}
|
|
693
|
+
|
|
694
|
+
window.addEventListener('scroll', onScroll);
|
|
695
|
+
onScroll();
|
|
696
|
+
|
|
697
|
+
// ==========================================
|
|
698
|
+
// 4. Code Copy Button Functionality
|
|
699
|
+
// ==========================================
|
|
700
|
+
const copyButtons = document.querySelectorAll('.copy-btn');
|
|
701
|
+
copyButtons.forEach(btn => {
|
|
702
|
+
btn.addEventListener('click', function() {
|
|
703
|
+
const textToCopy = this.getAttribute('data-code');
|
|
704
|
+
navigator.clipboard.writeText(textToCopy).then(() => {
|
|
705
|
+
const label = this.querySelector('span');
|
|
706
|
+
label.textContent = 'Copied!';
|
|
707
|
+
this.classList.add('text-emerald-500');
|
|
708
|
+
setTimeout(() => {
|
|
709
|
+
label.textContent = 'Copy';
|
|
710
|
+
this.classList.remove('text-emerald-500');
|
|
711
|
+
}, 2000);
|
|
712
|
+
}).catch(err => {
|
|
713
|
+
console.error('Không thể copy: ', err);
|
|
714
|
+
});
|
|
715
|
+
});
|
|
716
|
+
});
|
|
717
|
+
|
|
718
|
+
// ==========================================
|
|
719
|
+
// 5. Basic Client Search Filter
|
|
720
|
+
// ==========================================
|
|
721
|
+
document.addEventListener('input', function(e) {
|
|
722
|
+
if (e.target && (e.target.id === 'search-input' || e.target.placeholder === 'Tìm kiếm...')) {
|
|
723
|
+
const term = e.target.value.toLowerCase().trim();
|
|
724
|
+
sections.forEach(sec => {
|
|
725
|
+
const text = sec.textContent.toLowerCase();
|
|
726
|
+
sec.style.display = text.includes(term) ? 'block' : 'none';
|
|
727
|
+
});
|
|
728
|
+
}
|
|
729
|
+
});
|
|
730
|
+
|
|
731
|
+
// Ctrl + K Shortcut to focus search
|
|
732
|
+
document.addEventListener('keydown', (e) => {
|
|
733
|
+
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
|
734
|
+
e.preventDefault();
|
|
735
|
+
const searchInput = document.getElementById('search-input');
|
|
736
|
+
if (searchInput) searchInput.focus();
|
|
737
|
+
}
|
|
738
|
+
});
|
|
739
|
+
|
|
740
|
+
// ==========================================
|
|
741
|
+
// 6. Interactive Tab Switcher
|
|
742
|
+
// ==========================================
|
|
743
|
+
const tabButtons = document.querySelectorAll('.tab-btn');
|
|
744
|
+
tabButtons.forEach(btn => {
|
|
745
|
+
btn.addEventListener('click', function() {
|
|
746
|
+
const targetId = this.getAttribute('data-tab-target');
|
|
747
|
+
const container = this.closest('.rounded-xl');
|
|
748
|
+
|
|
749
|
+
container.querySelectorAll('.tab-btn').forEach(b => {
|
|
750
|
+
b.classList.remove('border-brand-500', 'text-brand-600', 'dark:text-brand-400');
|
|
751
|
+
b.classList.add('border-transparent', 'text-slate-500');
|
|
752
|
+
});
|
|
753
|
+
|
|
754
|
+
this.classList.remove('border-transparent', 'text-slate-500');
|
|
755
|
+
this.classList.add('border-brand-500', 'text-brand-600', 'dark:text-brand-400');
|
|
756
|
+
|
|
757
|
+
container.querySelectorAll('.tab-pane').forEach(pane => {
|
|
758
|
+
pane.classList.remove('block');
|
|
759
|
+
pane.classList.add('hidden');
|
|
760
|
+
});
|
|
761
|
+
|
|
762
|
+
const activePane = container.querySelector(`#${targetId}`);
|
|
763
|
+
if (activePane) {
|
|
764
|
+
activePane.classList.remove('hidden');
|
|
765
|
+
activePane.classList.add('block');
|
|
766
|
+
}
|
|
767
|
+
});
|
|
768
|
+
});
|
|
769
|
+
|
|
770
|
+
// ==========================================
|
|
771
|
+
// 7. Initialize Chart.js
|
|
772
|
+
// ==========================================
|
|
773
|
+
const ctx = document.getElementById('sample-chart');
|
|
774
|
+
if (ctx) {
|
|
775
|
+
const isDark = document.documentElement.classList.contains('dark');
|
|
776
|
+
window.myChart = new Chart(ctx, {
|
|
777
|
+
type: 'bar',
|
|
778
|
+
data: {
|
|
779
|
+
labels: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5'],
|
|
780
|
+
datasets: [{
|
|
781
|
+
label: 'Lượng truy cập API (triệu)',
|
|
782
|
+
data: [12, 19, 3, 5, 2],
|
|
783
|
+
backgroundColor: '#8b5cf6', // brand-500
|
|
784
|
+
borderRadius: 6,
|
|
785
|
+
}]
|
|
786
|
+
},
|
|
787
|
+
options: {
|
|
788
|
+
responsive: true,
|
|
789
|
+
maintainAspectRatio: false,
|
|
790
|
+
plugins: {
|
|
791
|
+
legend: {
|
|
792
|
+
labels: {
|
|
793
|
+
color: isDark ? '#cbd5e1' : '#334155'
|
|
794
|
+
}
|
|
795
|
+
}
|
|
796
|
+
},
|
|
797
|
+
scales: {
|
|
798
|
+
y: {
|
|
799
|
+
beginAtZero: true,
|
|
800
|
+
grid: {
|
|
801
|
+
color: isDark ? '#334155' : '#e2e8f0'
|
|
802
|
+
},
|
|
803
|
+
ticks: {
|
|
804
|
+
color: isDark ? '#cbd5e1' : '#334155'
|
|
805
|
+
}
|
|
806
|
+
},
|
|
807
|
+
x: {
|
|
808
|
+
grid: {
|
|
809
|
+
display: false
|
|
810
|
+
},
|
|
811
|
+
ticks: {
|
|
812
|
+
color: isDark ? '#cbd5e1' : '#334155'
|
|
813
|
+
}
|
|
814
|
+
}
|
|
815
|
+
}
|
|
816
|
+
}
|
|
817
|
+
});
|
|
818
|
+
}
|
|
819
|
+
|
|
820
|
+
// ==========================================
|
|
821
|
+
// 8. Initialize Mermaid.js (Cursor Style)
|
|
822
|
+
// ==========================================
|
|
823
|
+
let mermaidInitialized = false;
|
|
824
|
+
function renderMermaid() {
|
|
825
|
+
if (typeof mermaid !== 'undefined') {
|
|
826
|
+
const isDark = document.documentElement.classList.contains('dark');
|
|
827
|
+
const themeVariables = {
|
|
828
|
+
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Fira Code", monospace',
|
|
829
|
+
fontSize: '13px',
|
|
830
|
+
primaryColor: isDark ? '#1a1a1a' : '#ffffff',
|
|
831
|
+
primaryTextColor: isDark ? '#d4d4d8' : '#18181b',
|
|
832
|
+
primaryBorderColor: isDark ? '#3f3f46' : '#cbd5e1',
|
|
833
|
+
lineColor: isDark ? '#52525b' : '#94a3b8',
|
|
834
|
+
arrowheadColor: isDark ? '#60a5fa' : '#3b82f6',
|
|
835
|
+
clusterBkg: isDark ? '#111113' : '#f8fafc',
|
|
836
|
+
clusterBorder: isDark ? '#27272a' : '#e2e8f0',
|
|
837
|
+
titleColor: isDark ? '#a1a1aa' : '#64748b',
|
|
838
|
+
secondaryColor: isDark ? '#27272a' : '#f1f5f9',
|
|
839
|
+
tertiaryColor: isDark ? '#09090b' : '#f8fafc'
|
|
840
|
+
};
|
|
841
|
+
|
|
842
|
+
mermaid.initialize({
|
|
843
|
+
startOnLoad: !mermaidInitialized,
|
|
844
|
+
theme: 'base',
|
|
845
|
+
themeVariables: themeVariables,
|
|
846
|
+
securityLevel: 'loose',
|
|
847
|
+
flowchart: {
|
|
848
|
+
useMaxWidth: true,
|
|
849
|
+
htmlLabels: true,
|
|
850
|
+
curve: 'stepAfter'
|
|
851
|
+
}
|
|
852
|
+
});
|
|
853
|
+
|
|
854
|
+
if (mermaidInitialized) {
|
|
855
|
+
try {
|
|
856
|
+
mermaid.run();
|
|
857
|
+
} catch(e) {}
|
|
858
|
+
}
|
|
859
|
+
mermaidInitialized = true;
|
|
860
|
+
}
|
|
861
|
+
}
|
|
862
|
+
|
|
863
|
+
renderMermaid();
|
|
864
|
+
|
|
865
|
+
// ==========================================
|
|
866
|
+
// 9. Mermaid Fullscreen Board Toggle
|
|
867
|
+
// ==========================================
|
|
868
|
+
function setupMermaidFullscreen(containerId, expandBtnId, closeBtnId) {
|
|
869
|
+
const container = document.getElementById(containerId);
|
|
870
|
+
const expandBtn = document.getElementById(expandBtnId);
|
|
871
|
+
const closeBtn = document.getElementById(closeBtnId);
|
|
872
|
+
|
|
873
|
+
if (container && expandBtn && closeBtn) {
|
|
874
|
+
expandBtn.addEventListener('click', function() {
|
|
875
|
+
container.classList.add('mermaid-fullscreen-active');
|
|
876
|
+
expandBtn.classList.add('hidden');
|
|
877
|
+
closeBtn.classList.remove('hidden');
|
|
878
|
+
document.body.style.overflow = 'hidden';
|
|
879
|
+
});
|
|
880
|
+
|
|
881
|
+
closeBtn.addEventListener('click', function() {
|
|
882
|
+
container.classList.remove('mermaid-fullscreen-active');
|
|
883
|
+
expandBtn.classList.remove('hidden');
|
|
884
|
+
closeBtn.classList.add('hidden');
|
|
885
|
+
document.body.style.overflow = '';
|
|
886
|
+
});
|
|
887
|
+
}
|
|
888
|
+
}
|
|
889
|
+
|
|
890
|
+
setupMermaidFullscreen('mermaid-container', 'expand-mermaid-btn', 'close-mermaid-btn');
|
|
891
|
+
setupMermaidFullscreen('mermaid-container-2', 'expand-mermaid-btn-2', 'close-mermaid-btn-2');
|
|
892
|
+
</script>
|
|
893
|
+
|
|
894
|
+
</body>
|
|
895
|
+
</html>
|