Repository navigation
refactor: performance & UX improvements - #20
Merged
Merged
Conversation
…bserver hook - Create lightweight useInView hook (~20 lines) using IntersectionObserver - Rewrite FadeIn to use CSS transitions triggered by useInView - Rewrite StaggerContainer to use CSS @Keyframes with staggered animation-delay - Replace motion.a in PluginCardGrid with Next.js Link for proper client-side navigation - Replace AnimatePresence/motion.div in NavbarClient with CSS max-height transition - Replace AnimatePresence/motion.div in FAQ accordion with CSS max-height/opacity transition - Add fadeSlideUp and fadeIn @Keyframes to globals.css - Remove framer-motion dependency (~30KB gzipped savings)
- Remove client-side useState/useEffect data fetching
- Fetch data server-side with fetch() using next: { revalidate: 60 }
- Move LatestPluginsSection rendering from HomeContent to page.tsx
- Eliminates waterfall fetch and ships zero extra JS for data fetching
…nguage registration - Import Light build instead of full Prism build (~200KB+ savings) - Register only needed languages: python, cpp, javascript, typescript, bash, json, yaml, markdown, css, clike - Import individual vsc-dark-plus theme instead of full styles bundle
- Terminal animation: skip replay on re-visit using sessionStorage flag - PluginImage: replace manual Image() preloading with Next.js Image component - Plugin detail: add loading fallbacks to DependencyGraph, PluginRatings, VirusTotalCard - Plugin detail: deduplicate getPlugin() calls with React.cache() - PluginAnalyticsChart: add retry button on error state - PluginSearch: reduce debounce from 500ms to 300ms - Focus indicators: add :focus-visible outline styles for keyboard navigation - Pagination: increase touch targets to 44px minimum (WCAG) - Pagination: add #plugin-grid anchor for scroll-to-top on page change
Add usePrefersReducedMotion hook with matchMedia listener to skip inline transition/animation styles when user prefers reduced motion. Previously the global CSS rule couldn't override inline styles.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
0xliam627
approved these changes
May 22, 2026
This branch was successfully deployed
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
2 participants
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
Changes
Bundle Size (1A, 1B, 1C)
src/hooks/useInView.ts— 28-line IntersectionObserver hookFadeIn.tsx,StaggerContainer.tsx— CSS transitions withuseInViewPluginCardGrid.tsx—<Link>replacesmotion.afor proper Next.js navigation/prefetchingNavbarClient.tsx,faq/page.tsx— CSS replaces AnimatePresence/motion.divLatestPluginsSection.tsx— server component withfetch()+next: { revalidate: 60 }MarkdownTabs.tsx— light syntax highlighter build with per-language registrationframer-motiondependencyRuntime & Perceived Speed (2A, 2B)
plugins/[slug]/page.tsx— loading fallbacks for DependencyGraph, PluginRatings, VirusTotalCard dynamic importsplugins/[slug]/page.tsx—React.cache()deduplicatesgetPlugin()betweengenerateMetadataand page renderPluginSearch.tsx— debounce reduced from 500ms to 300msUX Polish (3A, 3B, 3C, 1D, 1E, 1F, 3E, 3F)
HomeContent.tsx— terminal animation skips replay viasessionStorageglobals.css—:focus-visibleoutline styles for keyboard navigationPluginAnalyticsChart.tsx— retry button on fetch errorPluginImage.tsx— Next.js<Image>withonErrorfallbackplugins/page.tsx— 44px min touch targets,#plugin-gridanchor for scroll-to-topFadeIn.tsx,StaggerContainer.tsx—prefers-reduced-motionrespected for inline transitionsVerification
pnpm lint— cleanpnpm type-check— cleanpnpm build— succeeds, shared JS 87.5KB