Khám phá vẻ đẹp của toán học qua những nghiên cứu học thuật.
Chào mừng bạn đến với repo mã nguồn của trang web Tiểu sảnh nhỏ xíu của Arust. Đây là một bách khoa toàn thư toán học nhỏ gọn, được xây dựng như một không gian nội dung tĩnh chuyên dùng để chia sẻ, tổng hợp các kiến thức trọng điểm từ Đại số, Giải tích, Hình học cho tới Toán ứng dụng và hệ thống đề cương ôn tập.
Trang web tập trung tối đa vào trải nghiệm đọc (typography), khả năng kết xuất tài liệu chuẩn kỹ thuật và sự kết hợp tuyệt vời giữa tính thẩm mỹ và hiệu năng nhanh chóng.
- Admin / Chịu trách nhiệm nội dung: Nguyễn Phước Thịnh
- Đội ngũ phát triển (Dev): Heavietnam
- Lưu ý: Heavietnam chỉ phụ trách phần kỹ thuật build web, tối ưu giao diện và hệ thống cốt lõi. Heavietnam không phụ trách và không chịu trách nhiệm về các nội dung học thuật được đăng tải trên website.
- Giao diện đa nền (Light/Dark Mode) đặc chế: Cấu trúc CSS được tinh chỉnh sâu với 2 phong cách lấy cảm hứng từ bộ editor nổi tiếng Typora. Đặc biệt, hệ thống được thiết lập [Dark Mode] làm chế độ mặc định để xoa dịu đôi mắt cho các "cú đêm" học thuật:
- Tối (Dark Mode - Default): Phycat-Abyss sâu thẳm, huyền bí.
- Sáng (Light Mode): Phycat-Forest mát mẻ, trong trẻo.
- Cấu trúc Sidebar thông minh (Auto-generated Sidebar): Sidebar tự động vạch ra danh mục theo chuẩn cấu trúc cây thư mục hệ thống bên dưới mã nguồn (
02 - Toán THPT,03-Đại Số, v.v.). Hệ thống sẽ lấy các tiền tố số để gán thứ tự ưu tiên (sort) trên màn hình một cách logic, nhưng tự động làm ẩn đi các số này khi hiển thị cho người xem, đảm bảo tính liền mạch và thẩm mỹ nhất. Chỉ việc tạo thư mục mới, thả file.mdvào là web sẽ tự nối nhánh trên Menu Sidebar mà không cần khai báo code. - Hỗ trợ Toán học chuyên sâu: Tích hợp bộ thư viện render KaTeX đỉnh cao, hoạt động hoàn hảo với các định dạng Inline, Block, Ma trận hay Phân số nhiều dòng mà không làm vỡ kiến trúc giao diện.
- Tree-list thông minh (Danh sách cây): Các cấu trúc List (danh sách) nhiều dòng có gắn thiết kế thanh nối nhánh dọc theo ý tưởng Layout Typora. Lập trình pure-CSS tự động nhận diện và khéo léo né tránh sự che lấp khi danh sách chứa các ma trận cồng kềnh.
- Tìm kiếm thần tốc: Tích hợp bộ máy tìm kiếm toàn văn Algolia Search thân thiện giúp tra thông tin chớp nhoáng.
- Responsive 100%: Sidebar, table nội dung, menu điều hướng trượt mượt mà, tự động căn chỉnh hoàn hảo cho thiết bị di động.
Dự án này là minh chứng cho việc hòa quyện các công nghệ hiện đại để xây dựng nên một kiến trúc tĩnh vững chắc:
- Docusaurus v3: Trái tim của website, Static Site Builder của Meta chuyên làm cho web học thuật.
- React.js 19: Xử lý logic Component bên dưới giao diện.
- MDX v3: Tính năng gộp định dạng chuẩn Markdown và sức mạnh của React JSX.
- KaTeX & remark-math / rehype-katex: Engine biên dịch ra mã chuẩn để trình bày công thức.
- [Algolia / Docusaurus Search Local]: Hệ thống lập chỉ mục tìm kiếm thông minh từ khóa.
- Custom CSS: Tổ hợp lệnh tinh chỉnh tỉ mỉ tại custom.css để giữ nguyên vẹn độ mượt mà từ theme Typora gốc (từ Hash-link, Code block macOS style đến Heading icon).
Đảm bảo môi trường ở máy tính của bạn đã được cài Node.js (phiên bản >=18.0).
Mở Terminal trong thư mục source và tiến hành tải về các thư viện:
npm install
npm run start
Một server phát triển (dev-server) sẽ được khởi chạy thường ở địa chỉ http://localhost:3000. Mọi thay đổi về code hay dữ liệu trong file .md sẽ tự động tải lại trên trình duyệt (Hot-reload).
npm run build
Lệnh trên sẽ render ra một bộ file HTML, CSS nguyên bản, tối ưu nhất nằm tại thư mục Build. Bộ mã này rất gọn nhẹ và có thể đẩy lên bất kỳ nền tảng Hosting nào (Vercel, GitHub Pages, Firebase, Heroku,...).
Docusaurus sử dụng MDX (Markdown + React JSX), do đó khi chèn mã HTML vào bài viết, bắt buộc tuân thủ 3 quy tắc sau để tránh lỗi sập web khi build:
Mọi thẻ HTML không có nội dung bên trong đều bắt buộc phải có dấu gạch chéo / ở cuối.
- ❌ Sai:
<img src="image.jpg" alt="Hình ảnh"> - ✅ Đúng:
<img src="image.jpg" alt="Hình ảnh" /> - ❌ Sai:
<br>hoặc<hr> - ✅ Đúng:
<br />hoặc<hr />
Không dùng chuỗi string để định dạng style. Phải viết dưới dạng Object {{ ... }} và các thuộc tính CSS có chứa dấu gạch ngang (như text-align, max-width) phải chuyển sang dạng camelCase (textAlign, maxWidth).
- ❌ Sai:
<div style="text-align: center; max-width: 100%;"> - ✅ Đúng:
<div style={{ textAlign: "center", maxWidth: "100%" }}>
Khi lồng các đoạn code HTML/JSX vào trong cặp dấu trích dẫn (Blockquote >), hãy cẩn thận kẻo bị đứt gãy dòng. Tất cả các dòng (kể cả dòng trống giữa các thẻ HTML) đều nên bắt đầu bằng dấu >.
- ❌ Sai:
> <div> <img src="..." /> > </div>
- ✅ Đúng:
> <div> > <img src="..." /> > </div>
Dự án "Tiểu sảnh nhỏ xíu của Arust" - Xây dựng với tất cả sự tận tâm dành cho Toán học và Thẩm mỹ.