landing_page/PROJECT.md

Project: ANL Homepage Development

Architecture

• Framework: Next.js 14.2.35 (App Router, static SSG output)
• Tech Stack: React 18.3.1, TypeScript 5.5.3, Tailwind CSS 3.4.6
• Active Codebase Location: /home/godopu16/PuKi/lab/canary_projects/landing_page/refer_landing_page
• Target Workspace Path: /home/godopu16/PuKi/lab/canary_projects/landing_page/website (symlink to refer_landing_page)
• Verification Pipeline:
  • ESLint: npm run lint
  • TypeScript: npx tsc --noEmit
  • Static SSG Build: npm run build
  • Data Integrity Gate: python3 scripts/extract/verify_counts.py

Feature Inventory

#	Feature	Description	Milestone	Source
1	Target Directory Symlink / Alignment	Create symlink website -> refer_landing_page so target directory is fully populated and buildable	M1	Prompt / Workspace
2	Light & Dark Mode Support (System Sync + Toggle)	Implement Dark Mode theme variables, system preference detection (prefers-color-scheme), and manual toggle switch component in Header	M2	R3 / AC-04
3	Core Research Pillars & Home Page (PR-03)	3 home sections (Lab Overview, 4 Pillars, Location) + responsive design	M3	PR-03 / AC-01~03
4	Members IA & Data Integrity (PR-01, PR-02)	Active (16) & Alumni (60) layout, filtering, card view	M3	PR-01 / AC-07
5	Publications IA & Static SSG Routes (PR-04)	4 category SSG routes (intl-conf, intl-journal-conf, domestic-journal-conf, patent) for 223 items	M3	PR-04 / AC-08
6	Lectures & Standardization Pages	45 semesters lectures + 44 standard docs across 6 bodies	M3	AC-10 / AC-11
7	Full Quality Gate & Acceptance Verification	Pass 100% E2E test suite, linting, type-checking, SSG build, data integrity, responsive design, dark mode	M4 (Final)	All ACs

Milestones

#	Name	Scope	Dependencies	Status
1	M1: Workspace Setup & Directory Alignment	Create symlink website -> refer_landing_page, verify build/test scripts work in both paths	none	DONE
2	M2: Light & Dark Mode Implementation	Implement Dark/Light mode theme toggle in Header, system preference detection, and CSS theme variables	M1	PLANNED
3	M3: Responsive Layout & Feature Verification	Verify and refine mobile/tablet/desktop responsive design across Home, Members, Publications, Lectures, Standardization	M2	PLANNED
4	M4: Final Integration & Dual-Track E2E Hardening	Pass 100% E2E test suite (Tiers 1-4) + Tier 5 Adversarial Coverage Hardening (Challenger + Auditor)	M3	PLANNED

Interface Contracts

Header ↔ Theme Manager

• Theme state: 'light' | 'dark' | 'system'
• Persistence: localStorage (theme key) + document.documentElement class/attribute (dark)
• System sync: window.matchMedia('(prefers-color-scheme: dark)') listener
• Default behavior: Respect system color scheme preference, allow user manual override via toggle button, persist setting.

Code Layout

• Root: /home/godopu16/PuKi/lab/canary_projects/landing_page/
• App Directory: /home/godopu16/PuKi/lab/canary_projects/landing_page/refer_landing_page/ (and website/ symlink)
• Pages: app/page.tsx, app/members/page.tsx, app/publications/page.tsx, app/publications/[category]/page.tsx, app/lectures/page.tsx, app/standardization/page.tsx
• Data Content: content/members.ts, content/publications.ts, content/lectures.ts, content/standards.ts, content/categories.ts, content/types.ts
• Styles: app/globals.css
• Components: components/Header.tsx, components/Footer.tsx, components/ThemeToggle.tsx, etc.
• Scripts: scripts/extract/verify_counts.py