Merge branch 'main' into fix/sidebar-close-on-dropdown

Author: sukvvon

src/components/Navbar.tsx

@@ -30,12 +30,7 @@ import {
 } from 'lucide-react'
 import { ThemeToggle } from './ThemeToggle'
 import { SearchButton } from './SearchButton'
-import {
-  libraries,
-  findLibrary,
-  SIDEBAR_LIBRARY_IDS,
-  type LibrarySlim,
-} from '~/libraries'
+import { libraries, SIDEBAR_LIBRARY_IDS, type LibrarySlim } from '~/libraries'
 import { useClickOutside } from '~/hooks/useClickOutside'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { DiscordIcon } from '~/components/icons/DiscordIcon'
@@ -139,14 +134,11 @@ const MobileCard = ({
 export function Navbar({ children }: { children: React.ReactNode }) {
   const matches = useMatches()
 
-  const { Title, library } = React.useMemo(() => {
+  const { Title } = React.useMemo(() => {
     const match = [...matches].reverse().find((m) => m.staticData.Title)
-    const params = match?.params as { libraryId?: string } | undefined
-    const libraryId = params?.libraryId
 
     return {
       Title: match?.staticData.Title ?? null,
-      library: libraryId ? findLibrary(libraryId) : null,
     }
   }, [matches])
 
@@ -227,8 +219,8 @@ export function Navbar({ children }: { children: React.ReactNode }) {
   const socialLinks = (
     <div className="flex items-center [&_a]:p-1.5 [&_a]:opacity-50 [&_a:hover]:opacity-100 [&_a]:transition-opacity [&_svg]:text-sm">
       <a
-        href={`https://github.com/${library?.repo ?? 'tanstack'}`}
-        aria-label={`Follow ${library?.name ?? 'TanStack'} on GitHub`}
+        href="https://github.com/TanStack"
+        aria-label="Follow TanStack on GitHub"
       >
         <GithubIcon />
       </a>
@@ -621,7 +613,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
           {
             label: 'GitHub',
             icon: GithubIcon,
-            to: 'https://github.com/tanstack',
+            to: 'https://github.com/TanStack',
           },
           {
             label: 'Ethos',

src/components/ThemeToggle.tsx

@@ -15,8 +15,17 @@ export function ThemeToggle() {
   const label =
     themeMode === 'auto' ? 'Auto' : themeMode === 'light' ? 'Light' : 'Dark'
 
+  const nextLabel =
+    themeMode === 'auto' ? 'light' : themeMode === 'light' ? 'dark' : 'auto'
+
   return (
-    <Button variant="ghost" size="xs" onClick={handleToggleMode}>
+    <Button
+      variant="ghost"
+      size="xs"
+      onClick={handleToggleMode}
+      aria-label={`Theme: ${label}. Switch to ${nextLabel} mode.`}
+      title={`Theme: ${label}. Switch to ${nextLabel} mode.`}
+    >
       {themeMode === 'auto' ? (
         <SunMoon className="w-3.5 h-3.5" />
       ) : (

src/router.tsx

@@ -78,6 +78,7 @@ declare module '@tanstack/react-router' {
     baseParent?: boolean
     Title?: () => any
     showNavbar?: boolean
+    includeSearchInCanonical?: boolean
   }
 }
 

src/routes/$libraryId/$version.docs.npm-stats.tsx

@@ -83,6 +83,9 @@ export const Route = createFileRoute('/$libraryId/$version/docs/npm-stats')({
     height: v.fallback(v.optional(v.number(), 400), 400),
   }),
   component: RouteComponent,
+  staticData: {
+    includeSearchInCanonical: true,
+  },
 })
 
 type NpmStatsSearch = {

src/routes/__root.tsx

@@ -184,8 +184,21 @@ function ShellComponent({ children }: { children: React.ReactNode }) {
     select: (s) => s.location?.pathname || '/',
   })
 
+  const canonicalSearchStr = useRouterState({
+    select: (s) => s.location?.searchStr || '',
+  })
+
+  const includeSearchInCanonical = useMatches({
+    select: (s) =>
+      s.some((d) => d.staticData?.includeSearchInCanonical === true),
+  })
+
   const preferredCanonicalPath = getCanonicalPath(canonicalPath)
-  const pageUrl = canonicalUrl(preferredCanonicalPath ?? canonicalPath)
+  const canonicalSearch = includeSearchInCanonical ? canonicalSearchStr : ''
+  const pageUrl = canonicalUrl(
+    preferredCanonicalPath ?? canonicalPath,
+    canonicalSearch,
+  )
 
   const showDevtools = import.meta.env.DEV && canShowDevtools
 
@@ -199,7 +212,10 @@ function ShellComponent({ children }: { children: React.ReactNode }) {
     <html lang="en" className={htmlClass} suppressHydrationWarning>
       <head>
         {preferredCanonicalPath ? (
-          <link rel="canonical" href={canonicalUrl(preferredCanonicalPath)} />
+          <link
+            rel="canonical"
+            href={canonicalUrl(preferredCanonicalPath, canonicalSearch)}
+          />
         ) : null}
         <meta property="og:url" content={pageUrl} />
         <meta name="twitter:url" content={pageUrl} />
@@ -259,18 +275,23 @@ function SearchHotkeyController() {
 
   React.useEffect(() => {
     const handleGlobalKeyDown = (event: KeyboardEvent) => {
-      if (event.defaultPrevented) return
       if (!(event.metaKey || event.ctrlKey)) return
-      if (event.key.toLowerCase() !== 'k') return
+      if (event.altKey || event.shiftKey) return
+      // Match both `key` and `code` so the shortcut works on non-QWERTY layouts.
+      const isK = event.key.toLowerCase() === 'k' || event.code === 'KeyK'
+      if (!isK) return
 
       event.preventDefault()
+      event.stopPropagation()
       setHasOpenedSearch(true)
       openSearch()
     }
 
-    window.addEventListener('keydown', handleGlobalKeyDown)
+    document.addEventListener('keydown', handleGlobalKeyDown, { capture: true })
     return () => {
-      window.removeEventListener('keydown', handleGlobalKeyDown)
+      document.removeEventListener('keydown', handleGlobalKeyDown, {
+        capture: true,
+      })
     }
   }, [openSearch])
 

src/routes/builder.index.tsx

@@ -31,6 +31,7 @@ export const Route = createFileRoute('/builder/')({
   validateSearch: builderSearchSchema,
   component: RouteComponent,
   staticData: {
+    includeSearchInCanonical: true,
     Title: () => (
       <Link
         to="/builder"

src/routes/intent/registry/index.tsx

@@ -58,6 +58,9 @@ export const Route = createFileRoute('/intent/registry/')({
     }),
   }),
   component: IntentRegistryPage,
+  staticData: {
+    includeSearchInCanonical: true,
+  },
 })
 
 function IntentRegistryPage() {

src/routes/maintainers.tsx

@@ -35,6 +35,9 @@ const searchSchema = v.object({
 export const Route = createFileRoute('/maintainers')({
   component: RouteComponent,
   validateSearch: searchSchema,
+  staticData: {
+    includeSearchInCanonical: true,
+  },
   head: () => ({
     meta: seo({
       title: 'Maintainers | TanStack',

src/routes/partners.index.tsx

@@ -78,6 +78,9 @@ function getPartnerFilterAnalytics(search: PartnersSearch) {
 export const Route = createFileRoute('/partners/')({
   component: PartnersIndexPage,
   validateSearch: searchSchema,
+  staticData: {
+    includeSearchInCanonical: true,
+  },
   head: () => ({
     meta: seo({
       title: 'Partners',

src/routes/shop.collections.$handle.tsx

@@ -63,6 +63,9 @@ export const Route = createFileRoute('/shop/collections/$handle')({
     }
   },
   component: CollectionPage,
+  staticData: {
+    includeSearchInCanonical: true,
+  },
 })
 
 function CollectionPage() {