DVLab Website — Design Verification Lab, NTUEE

The official website of the Design Verification Lab (DVLab) at National Taiwan University, directed by Prof. Chung-Yang (Ric) Huang. Bilingual (Traditional Chinese default at /, English at /en/), statically generated with Astro, with automatic dark mode and full per-page SEO.

Live site: https://dvlab-ntu.github.io/

Stack

• Astro 5 — static site generation. Every route is a complete HTML file; navigation is plain full-page loads (no SPA router), so clicks respond instantly and every page is indexable.
• Content: Markdown with frontmatter under src/content/ (members, papers, courses, awards, join) — bilingual zh/en fields
• Dark mode: automatic via prefers-color-scheme + manual toggle (localStorage lab-theme), FOUC-safe inline script
• UI: styled after the lab's 2022 site (navy + gold palette, icon nav bar, home hero with the lab group photo, particle background). The light theme is a yellow-green high-contrast variant. Home hero animations are CSS-only or a small vanilla canvas script (src/scripts/particles.mjs), disabled under prefers-reduced-motion
• SEO: per-page title/description/canonical/hreflang/OG generated by src/layouts/BaseLayout.astro, verified by npm run test:seo
• Sitemap: @astrojs/sitemap (generated at build time)

Local development

npm ci
npm run dev          # dev server with content hot reload
npm run preview      # preview the production build

Verification

PUBLIC_SITE_URL=https://dvlab-ntu.github.io npm run verify

Runs five stages (see docs/verification.md for details):

1. validate:content — content schema/bilingual checks
2. build — production build
3. test:smoke — key pages contain expected content
4. test:pages — output-quality audit of every generated HTML page (no stray template text, non-empty body, h1/title/meta present, all internal links and images resolve, required routes exist)
5. test:seo — canonical/hreflang/OG/i18n checks

CI runs the same command; GitHub Pages deploys only after it passes.

Documentation

• docs/architecture.md — project structure, pages, data flow
• docs/content-guide.md — how to edit content (collections, bilingual, photos)
• docs/deployment.md — CI/CD pipeline and GitHub Pages deployment
• docs/verification.md — the five-stage verify pipeline in detail

Content

Collection	Path	Notes
Members	src/content/members/*.md	id must match filename; name/role/area/bio/status are {zh, en} objects; links supports scholar/github/homepage/email/linkedin; avatar auto-resolves from public/member/images/<id>.jpg
Papers	src/content/papers/*.md	year, title, venue, authors, optional abstract/links/bibtex
Courses	src/content/courses/*.md	title {zh,en}, semester, official NTU course-catalogue link, optional intro/contents {zh,en}
Awards	src/content/awards/*.md	title {zh,en}, year, month, students[], optional advisors[], source URL
Join	src/content/join/recruitment/	overview_cn.md / overview_en.md

Pages: home (/), members, papers, courses, awards, life (/life/, lab activity photos), join — each in / and /en/. Site-wide copy (brand, nav, home hero/highlights) lives in src/data/site.zh.json / site.en.json.

Deployment

.github/workflows/pages.yml builds, verifies, and deploys dist/ to GitHub Pages at https://dvlab-ntu.github.io/. sitemap-index.xml is generated automatically. The admin/ route is an optional Decap CMS backend (disabled until CMS_GITHUB_REPO / CMS_OAUTH_BASE_URL are configured).