Dev Link-in-bio

Mọi thứ trên trang — tên, trạng thái, link, dự án, biểu đồ, stack, lời của terminal — nằm trong src/content.ts. Kiểu dữ liệu (src/core/model.ts) giải thích từng trường, và trình soạn thảo sẽ báo ngay chỗ nào thiếu hay gõ sai.

• Link: mỗi nút là một { label, hint, href, icon }. Icon có sẵn: github, pen, play, file, calendar, mail, at, rss, globe (thêm icon riêng bằng path data trong src/core/icons.ts).
• Dự án: name, description, href, language (ngôn ngữ phổ biến tự có màu quen thuộc), stars, forks.
• Biểu đồ đóng góp: activity: { weeks, seed } vẽ một biểu đồ trông thật, kết thúc vào hôm nay; đổi seed để có biểu đồ khác. Muốn dùng số liệu thật, thêm counts (mỗi ngày một số, cũ nhất trước) và until: "YYYY-MM-DD" (ngày cuối cùng).
• Avatar: chữ cái đầu trên nền gradient sinh từ chính tên bạn — không cần cài gì.
• Trạng thái: available: false đổi chấm xanh nhấp nháy thành chấm xám đứng yên.
• Terminal: các dòng boot được gõ ra lần đầu mở; banner là hình ASCII hiện phía trên (để trống nếu không cần); quick chọn các lệnh một chạm dưới màn hình.

Bản tải về là file tĩnh: index.html, dev-link-in-bio.css và dev-link-in-bio.js — script vẽ trang từ nội dung của bạn vào <div data-dev-link-in-bio></div>. Sửa src/content.ts rồi build lại script:

Nhớ sửa tay thẻ <title> và <meta> ở đầu index.html — đó là thứ mà ô xem trước link và công cụ tìm kiếm đọc. Với phần HTML bạn tự thêm, gọi DevLinkInBio.init(container); hàm này trả về một hàm để gỡ ra.

Bản tải về là một dự án Vite + React 19 + TypeScript hoàn chỉnh:

• src/content.ts — nội dung, dùng chung với bản HTML.
• src/app/sections/ — mỗi phần của trang là một component; src/app/ui/ — các atom và molecule dùng chung.
• src/core/ — hành vi (tab, terminal, biểu đồ, sao chép, giao diện…), cùng một mã với bản HTML, gắn vào qua hook useBehaviour.
• src/dev-link-in-bio.css — stylesheet duy nhất, dùng chung cho cả hai bản.

App.tsx mở đầu bằng "use client", nên bỏ thẳng vào một trang App Router của Next.js cũng được.

Mỗi lệnh là một hàm thuần nhỏ trong src/core/terminal/commands.ts, biến nội dung thành các dòng chữ, link và lệnh bấm được. Thêm lệnh mới: thêm tên vào CommandName trong src/core/model.ts, viết hàm và thêm vào COMMANDS (cùng LISTED_COMMANDS nếu muốn nó hiện trong help), rồi mô tả nó trong terminal.commands ở content.ts.

Thêm #terminal vào cuối địa chỉ để mở thẳng terminal — tiện cho một đường link "thử terminal".

Mọi thứ là custom property trên :root, ở đầu dev-link-in-bio.css. Màu viết dạng light-dark(sáng, tối), một dòng cho cả hai giao diện.

Giao diện: data-theme="light" hoặc "dark" trên <html> cố định giao diện lúc đầu; không có thì theo hệ thống của người xem. Nút chuyển (và lệnh theme trong terminal) nhớ lựa chọn trong localStorage (dev-link-in-bio-theme).

Cả hai bản đều là file tĩnh: tải thư mục HTML, hoặc thư mục dist/ của dự án React sau khi npm run build, lên Netlify, Vercel, Cloudflare Pages, GitHub Pages hay hosting bất kỳ. Rồi dán link vào bio.