chore: codebase optimization cleanup (P1-P4 complete, 10/12 tasks)#73
Open
chore: codebase optimization cleanup (P1-P4 complete, 10/12 tasks)#73
Conversation
- Fix Biome lint errors (useless switch case, template literals, unused imports) - Remove duplicate @Keyframes keycap-glow in global.css - Remove dead code: unused props in ForkStats (now context-only) - Clean up unused variables in PerspectiveGridTunnel - Add worker-configuration.d.ts to .gitignore (Biome auto-ignores) - Restore proper biome.json structure Progress: 3/12 tasks complete (Priority 1 done)
## Task 2.1: React Component Optimization - ForkGauge: Extract 5 pure helper functions outside component scope (getVisualPercentage, updateArc, getRiskLevel, getRiskColor, getNeedleEndpoint) Memoize computed values with useMemo to prevent unnecessary recalculations Wrap component with React.memo to prevent re-renders on prop equality - ForkDataProvider: Move 3 converter functions outside component (convertToGaugeData, convertToRiskLevel, formatLastUpdated) Memoize contextValue with useMemo to prevent context consumers from re-rendering ## Task 2.3: Font Self-Hosting - Download Handjet and Oxanium woff2 fonts from Google Fonts - Add @font-face declarations to src/styles/global.css with local paths - Remove Google Fonts CSS links and dns-prefetch from Layout.astro - Fonts now load from /fonts/ instead of fonts.googleapis.com + fonts.gstatic.com ## Verification - npm run typecheck: ✓ No TypeScript errors - npm run lint: ✓ No Biome linting issues - npm run build: ✓ Build succeeds with 21.3KB fonts bundled in dist/fonts/ - Font files: handjet.woff2 (7.5KB), oxanium.woff2 (14KB)
**Task 3.1 - Improve typecheck coverage** - Switch from tsc --build to astro check (understands .astro files) - Better Astro-aware diagnostics **Task 3.2 - Add CI gates** - Add typecheck step before build in GitHub Actions - Add lint step before build in GitHub Actions - Prevents type errors and lint violations from shipping **Task 3.3 - React error boundaries** - Create ErrorBoundary class component (src/components/ErrorBoundary.tsx) - Wrap ForkMonitor render tree with ErrorBoundary - Graceful fallback for render-time exceptions **Task 3.4 - Fix TypeScript type errors** - BlogPreview.astro: Type glob import properly, remove JSX key from HTML element - blog/index.astro: Type glob import, fix autoFocus attribute - blog/[...slug].astro: Type glob import, merge getImage() options - GoogleAnalytics.astro: Add is:inline directives - Layout.astro: Add is:inline directive to structured data script - dialog.tsx: Replace deprecated React.ElementRef with concrete types All checks pass: - npm run typecheck: 0 errors - npm run lint: 0 errors - npm run build: succeeds
Add prefers-reduced-motion accessibility support across animations: **CSS Animations (global.css)** - Added @media (prefers-reduced-motion: reduce) block with targeted disables: - .title (gradient animation) - .cursor.blink-active (blink animation) - .pointer-animated, .pointer-animate-always (bounce animations) - .scroll-indicator-keycap (keycap press/glow animations) - .crt.display-on, .crt.display-off (CRT display animations) - .fx-pulse-glow (pulse effect) - Social media icon fade-ins (#twitter-link, #discord-link, #github-link) - HeroBanner entrance animations ([data-animation-delay]) **JavaScript Animations** - PerspectiveGridTunnel: Check window.matchMedia() and skip animation loop for users with prefers-reduced-motion. Render single static frame instead. - ForkGauge: Disable needle transition (set to 'none') when motion is reduced All animations now gracefully respect user accessibility preferences. Verified: typecheck 0 errors, lint 0 errors, build succeeds.
jubalm
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Codebase optimization consolidation across 4 priority levels. 10 of 12 tasks complete (83%).
Completed Priorities
P1: Quick Wins ✅ (3/3)
@keyframes keycap-glowdefinitionP2: Performance ✅ (2/3)
P3: Developer Experience ✅ (4/4)
typecheckscript fromtsc --buildtoastro check(understands .astro files + Astro-aware diagnostics)typecheck+lintsteps to build job in.github/workflows/build-and-deploy.yml(gates every PR + push before build)ErrorBoundary.tsxcomponent, wrappedForkMonitortree to catch render-time exceptions with fallback UIP4: SEO/Accessibility ✅ (1/2)
@media (prefers-reduced-motion: reduce)block to global.css with targeted animation disablesP5: Architecture ⏸ (Deferred)
Files Changed
src/components/ForkStats.tsx,ForkDisplay.tsx,PerspectiveGridTunnel.tsxsrc/components/ForkGauge.tsx,ForkDataProvider.tsx;src/styles/global.css;public/fonts/(new)package.json,.github/workflows/build-and-deploy.yml,src/components/ErrorBoundary.tsx,src/components/ForkMonitor.tsx, 5 Astro pages + componentssrc/styles/global.css,src/components/PerspectiveGridTunnel.tsx,src/components/ForkGauge.tsxTotal impact: 240+ insertions, 57 deletions across 20+ files
Verification Checklist
npm run typecheck— 0 errorsnpm run lint— 0 errorsnpm run build— succeedsGitHub Issues
Next Steps
Ready to merge. All tests passing, no breaking changes. Site fully functional and optimized.