Mở cái đầu

Đây là cái blog thứ 3 của mình, 2 cái trước (một cái dùng jekyll host trên github và một cái dùng tailwin-starter-blog Next.js host trên vercel). Cả 2 cái blog trước đây của mình đều dùng template có sẫn nên bây giờ mình muốn làm cái gì khác biệt một chút, nhân cái tiện đang học reactjs (mới học xong props với state thôi) mình quyết định làm một cái blog mới bằng chính reactjs - đúng hơn là Next.js (vì mình thấy cái này hỗ trợ static site tốt và đứng sau Next.js chính là thằng host Vercel - cái host mà mình sẽ đẩy blog này lên.) và thế là mình quyết định đốt cái "giai đoạn" cho nó cháy.

Nói là viết bằng reactjs cho nó có vẻ nguy hiểm thôi chứ thật ra trong gần 1 tuần code cái blog này thì chắc 60-70% thời gian là mình ngồi viết CSS. (Darkmode, responsive, flex, căn chính... điên hết cả đầu.). Sau đây ta sẽ đi 1 vòng thăm quan các cái mình đã làm trong cái blog này.

Giao diện (JSX + CSS thuần)

Khi học reactjs được vài hôm thì mình thử qua mấy cái framework UI cho Reactjs (chakraUI, Material, Ant) mỗi cái thì đều có cái hay giở riêng. Mà mình làm mỗi cái blog nhỏ mà giờ install cả một cái framework rồi dùng 1-2 cái component thì đúng là "dùng dao mổ trâu để cắt bao đầu rùa." Nên là mình dùng CSS thuần hơi cực một tí nhưng mà mình fullcontrol (thật ra nó cực vãiiiiii) các bạn cứ bật cái inspect ở Devtool nên thì nhìn một đống biến CSS của mình gần ~40 biến (light với cả dark thì phải là ~80 giá trị). Mình ko dùng themeProvider để làm darkMode mà dùng CSS thuần luôn.

Code đây

Parsing source code...

Về cơ bản thì khi bạn nhấn cái nút toggle thì nó sẽ thay đổi cái thẻ html data-theme="light || dark" ứng với mỗi cái data-theme nào thì biến CSS được khai báo ở theme đấy được sử dụng :

Parsing source code...

MarkDown Engine

Cái post này được viết bằng markdown (tất nhiên rồi). Mình dùng next-mdx-remote để render markdown. Cấu hình khá là dễ, mình đã thử mdx-bundler nhưng mà cái custom component của nó ko hỗ trợ import css ngoài vào thì phải. Nếu bạn ko biết custom component là gì thì...

Cái callout này này

Cái này được render bằng MDX luôn nhé ko phải nhúng html đâu

Reactions

Cái này là phần thả reactions ở cuối bài viết, dữ liệu được lưu vào firestore của firebase. Setup cũng khá dễ thôi thiết kế model database ko thể đơn giản hơn.

Parsing source code...

Authentication

Oke phần này đúng là cái đốt cháy giai đoạn của mình (đa phần các cái trước mình chỉ dùng state, props với hook effect thôi). Nhưng thằng này thì phải dùng context (well mình chưa học đến nó luôn, nghe giới thiệu là nó dùng để chia sẻ dữ liệu cho cả cái app - nó thường dùng để lưu thông tin mang tính global có thể truy cập ở bất cứ chỗ nào trong app). Và firebase là cái mình dùng để xác thực (bằng google hay github, nó có cả xác thực ẩn danh nhưng mình ko dùng).

Bình luận

Oke cái này cũng nhờ vào firestore để lưu trữ dữ liệu luôn, (thanks firebase) mình chỉ làm code được cái thanh bình luận đơn giản thôi, nó ko có nested comments (ko reply) ko thả tim các thứ gì được, (cả blog chắc gì được 10 đọc mất công làm cái chức năng chả ai dùng thì phí thật - với cả trình độ mới học của mình còn hạn chế nên mình cũng ko làm được :))) Hết bài.