trang tài liệu astro

Trang tài liệu 1thay.com được xây dựng với Astro 5, tạo ra HTML tĩnh và triển khai lên Cloudflare Pages.

kiến trúc site

Mục	Đường dẫn	Nội dung
Foundations	`/foundations/*`	màu sắc, kiểu chữ, khoảng cách, biểu tượng
Patterns	`/patterns/*`	dashboard, settings, billing, signup, layout, navigation, data-viz, data-table, modal-form, empty-state, error-state, search-filter, theming
Guidelines	`/guidelines/*`	bắt đầu, nguyên tắc thiết kế, code-first, cách dùng token, thiết kế nội dung, tài liệu nền tảng

bố cục

Bố cục	File	Sử dụng
BaseLayout	`src/layouts/BaseLayout.astro`	Bố cục gốc — Google Fonts, CSS toàn cục, thanh điều hướng, script chống nháy thương hiệu
DocsLayout	`src/layouts/DocsLayout.astro`	Trang tài liệu — thanh bên 260px + vùng nội dung, tương thích di động

sử dụng component react trong astro

---
import { Button } from '@1thay/core';
import { Card, CardHeader, CardBody } from '@1thay/core';
---

<Card variant="raised">
  <CardHeader>title</CardHeader>
  <CardBody>
    <p>description text</p>
    <Button variant="primary" client:load>action</Button>
  </CardBody>
</Card>

Quan trọng: Component React trong Astro nhận style dưới dạng object, không phải chuỗi. Dùng div bọc Astro để căn chỉnh khoảng cách.

<!-- dung: style dang object -->
<Button style={{ marginTop: 'var(--space-md)' }}>click</Button>

<!-- sai: style dang chuoi -->
<Button style="margin-top: 16px">click</Button>

thêm trang mới

Tạo src/pages/<section>/<name>.astro
Sử dụng DocsLayout với thuộc tính section phù hợp
Thêm liên kết điều hướng trong thanh bên của DocsLayout.astro
Xác minh: npm run build

triển khai

1thay.com: Cloudflare Pages → github kien-day/1thay-com → nhánh main → npm run build → dist/
design.1thay.com: Dự án Pages riêng → npm run build-storybook → dist-storybook/
Tự động triển khai khi push lên main

cấu hình

// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  integrations: [react()],
  output: 'static',
  site: 'https://1thay.com',
});