refactor: Nuxt best practices and clean code review

[dinooo13]

Comprehensive Code Review: Nuxt Rewrite

Overall the rewrite is solid — good use of Nuxt 4, @nuxt/content collections with Zod validation, Nuxt UI, and static generation. Below is the full review with findings categorized by severity, followed by what this PR fixes.

---

What this PR fixes

• Remove unnecessary explicit imports — Nuxt auto-imports everything from utils/ and components/. Removed 10+ manual imports across pages and components that were redundant.
• Extract duplicate getTimestamp into utils/date.ts — Both labs.ts and speaking.ts had their own copy with slightly different signatures. Unified into a single shared utility.
• Fix dead conditional in TalkPreviewCard.vue — :ui body padding was variant === 'featured' ? 'p-6 sm:p-8' : 'p-6 sm:p-8' (identical branches).
• Fix non-null assertion mixed with optional chaining in Hero.vue — global.picture?.alt! is contradictory; replaced with ?? 'Profile picture' fallback.
• Extract repeated Motion animation config in Hero.vue — The same 6-line animation object was duplicated 5 times. Extracted into heroInitial, heroAnimate, and heroTransition() constants.
• Add error handling to clipboard.ts — navigator.clipboard.writeText() can fail (permissions, insecure context) but the rejection was unhandled.
• Replace raw <img> with <NuxtImg> — In labs/[slug].vue, a plain <img> tag bypassed the @nuxt/image optimization pipeline.
• Use stable keys in v-for loops — AppFooter.vue and Hero.vue used array index as :key; replaced with aria-label or to for stable identity.
• Add build validation to CI — CI only ran lint + typecheck but never validated the actual static generation succeeds. Added pnpm run generate step.

---

Additional review findings (not addressed in this PR)

These are observations for future consideration:

Category	Finding	Recommendation
Dependency	better-sqlite3 in dependencies but unused	Remove to reduce install size
Dependency	@vueuse/nuxt imported but only useColorMode appears used (already in Nuxt UI)	Evaluate if needed
Dependency	pnpm overrides for flatted, h3, socket.io-parser have no comments	Add comments explaining why
Performance	[slug].vue pages fetch ALL entries then filter client-side	Consider querying by stem/path directly
SEO	nuxt-og-image module installed but defineOgImage() never called	Add per-page OG image definitions
SEO	Repeated useSeoMeta pattern across all pages	Could extract a usePageSeo composable
Config	compatibilityDate: '2024-11-01' is outdated for Nuxt 4	Update to current date
Types	LabsSection and SpeakingSection types in teaser components duplicate the content schema button type	Consider inferring from content schema
CI	Deploy uses dangerous-clean-slate: true	Document the rationale; consider incremental deploys
ESLint	@typescript-eslint/no-explicit-any: 'off' globally disabled	Consider enabling and fixing usages

What's done well

• Clean content-driven architecture with Zod-validated collections
• Good TypeScript coverage across the codebase
• Proper SSG setup with crawlLinks for automatic route discovery
• View Transition API for theme switching is a nice touch
• Consistent component structure and naming conventions
• Proper <ClientOnly> usage for the color mode button
• Good SEO foundation (canonical URLs, meta tags, robots.txt)

Test plan

• pnpm run lint passes
• pnpm run typecheck passes
• pnpm run generate builds successfully
• Verify all pages render correctly after auto-import changes
• Verify Motion animations still work on homepage

https://claude.ai/code/session_01D9Js2socgpErtmsWh88fMj