diff --git a/package.json b/package.json index 8fb81cd1..0728b69c 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@tailwindcss/vite": "^4.1.11", "@tanstack/create": "^0.49.1", "@tanstack/pacer": "^0.16.4", + "@tanstack/react-hotkeys": "^0.0.2", "@tanstack/react-pacer": "^0.17.4", "@tanstack/react-query": "^5.90.12", "@tanstack/react-router": "1.157.16", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 114304ce..4e5892f8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -89,6 +89,9 @@ importers: '@tanstack/pacer': specifier: ^0.16.4 version: 0.16.4 + '@tanstack/react-hotkeys': + specifier: ^0.0.2 + version: 0.0.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3) '@tanstack/react-pacer': specifier: ^0.17.4 version: 0.17.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3) @@ -3137,6 +3140,10 @@ packages: resolution: {integrity: sha512-xyIfof8eHBuub1CkBnbKNKQXeRZC4dClhmzePHVOEel4G7lk/dW+TQ16da7CFdeNLv6u6Owf5VoBQxoo6DFTSA==} engines: {node: '>=12'} + '@tanstack/hotkeys@0.0.2': + resolution: {integrity: sha512-HUki67sfc6z62iIY+ito7HV4+cFmsHlwLOWdFN8Aomgw7HJH8zHtBSksVw9Gh7qSapKi29fWa3DViPMzUawN2Q==} + engines: {node: '>=18'} + '@tanstack/pacer@0.16.4': resolution: {integrity: sha512-dqd6p1JK6iucOhJSOA1/VCvT46kZDoem/l/xcYtQpG4Ygxl8xzSW69oMk0bTSh+cAvFXDCrXn3wlS7Otir/fsA==} engines: {node: '>=18'} @@ -3144,6 +3151,13 @@ packages: '@tanstack/query-core@5.90.12': resolution: {integrity: sha512-T1/8t5DhV/SisWjDnaiU2drl6ySvsHj1bHBCWNXd+/T+Hh1cf6JodyEYMd5sgwm+b/mETT4EV3H+zCVczCU5hg==} + '@tanstack/react-hotkeys@0.0.2': + resolution: {integrity: sha512-LaW28h7omiIWgyw61gEU2k2X4YlesB8Gptvw71si77cXbg7RphD+Qu+q/mA84ai4x2miLA6vvYuZTvIVcbz9tw==} + engines: {node: '>=18'} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + '@tanstack/react-pacer@0.17.4': resolution: {integrity: sha512-VdHuN+FkdKwPMD2uuO0qb04CBMOci68CeciQCTASA5Tmts9uxiSHIJEM+ABh/s4pSEdMKM/GI6sFWDNwwCf6yA==} engines: {node: '>=18'} @@ -11295,6 +11309,10 @@ snapshots: '@tanstack/history@1.154.14': {} + '@tanstack/hotkeys@0.0.2': + dependencies: + '@tanstack/store': 0.8.0 + '@tanstack/pacer@0.16.4': dependencies: '@tanstack/devtools-event-client': 0.3.5 @@ -11302,6 +11320,13 @@ snapshots: '@tanstack/query-core@5.90.12': {} + '@tanstack/react-hotkeys@0.0.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': + dependencies: + '@tanstack/hotkeys': 0.0.2 + '@tanstack/react-store': 0.8.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3) + react: 19.2.3 + react-dom: 19.2.3(react@19.2.3) + '@tanstack/react-pacer@0.17.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': dependencies: '@tanstack/pacer': 0.16.4 diff --git a/src/components/LibraryHero.tsx b/src/components/LibraryHero.tsx index e1600512..e0e5c513 100644 --- a/src/components/LibraryHero.tsx +++ b/src/components/LibraryHero.tsx @@ -8,7 +8,7 @@ type LibraryHeroProps = { project: Library cta?: { linkProps: LinkProps - label: string + label: string | React.ReactNode className?: string } actions?: React.ReactNode diff --git a/src/components/landing/HotkeysLanding.tsx b/src/components/landing/HotkeysLanding.tsx new file mode 100644 index 00000000..c569d9f0 --- /dev/null +++ b/src/components/landing/HotkeysLanding.tsx @@ -0,0 +1,93 @@ +import { Footer } from '~/components/Footer' +import { LibraryHero } from '~/components/LibraryHero' +import { PartnersSection } from '~/components/PartnersSection' +import { MaintainersSection } from '~/components/MaintainersSection' +import { LazySponsorSection } from '~/components/LazySponsorSection' +import { BottomCTA } from '~/components/BottomCTA' +import { hotkeysProject } from '~/libraries/hotkeys' +import { getLibrary } from '~/libraries' +import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights' +import LandingPageGad from '~/components/LandingPageGad' +import { LibraryPageContainer } from '~/components/LibraryPageContainer' +import { LibraryStatsSection } from '~/components/LibraryStatsSection' +import { FeatureGridSection } from '~/components/FeatureGridSection' +import { formatForDisplay, useHotkey } from '@tanstack/react-hotkeys' +import { useNavigate } from '@tanstack/react-router' + +const library = getLibrary('hotkeys') + +export default function HotkeysLanding() { + const navigate = useNavigate() + + useHotkey('Mod+Enter', () => { + navigate({ + to: '/$libraryId/$version/docs', + params: { libraryId: library.id, version: 'latest' }, + }) + }) + + return ( + + + Get Started{' '} + {formatForDisplay('Mod+Enter')} + + ), + className: 'bg-rose-600 border-rose-600 hover:bg-rose-700 text-white', + }} + /> + + + + + + + + + + + + + +