Merge branch 'main' into fix/partnership-ad

app/blog/announcing-tanstack-query-v5.md

@@ -11,7 +11,7 @@ v5 continues the journey of v4, trying to make TanStack Query smaller (v5 is ~20
 
 As a big breaking change, we've removed most overloads from the codebase, unifying how you use `useQuery` and other hooks. This is something we wanted to do for v4, but a [TypeScript limitation](https://github.com/microsoft/TypeScript/issues/43371) prevented us from doing that. TypeScript addressed this issue in TS 4.7, so we were able to remove all the overloads that we had for calling `useQuery` with a different amount of parameters. This is a huge DX win, because methods with overloads usually have quite bad TypeScript error messages.
 
-This is the biggest breaking change in v5, but we think it's worth it. The API is now much more consistent - you always just pass _one_ object. To alleviate the pain of changing all occurrences manually, we have tried to prepare everyone for this coming change for the last months. The documentation was changed to use the new API, and we released an auto-fixable [eslint rule](/query/v4/docs/react/eslint/prefer-query-object-syntax) in our eslint package. Additionally, v5 comes with [a codemod](/query/v5/docs/react/guides/migrating-to-v5#codemod) to help with the transition.
+This is the biggest breaking change in v5, but we think it's worth it. The API is now much more consistent - you always just pass _one_ object. To alleviate the pain of changing all occurrences manually, we have tried to prepare everyone for this coming change for the last months. The documentation was changed to use the new API, and we released an auto-fixable [eslint rule](/query/v4/docs/eslint/prefer-query-object-syntax) in our eslint package. Additionally, v5 comes with [a codemod](/query/v5/docs/react/guides/migrating-to-v5#codemod) to help with the transition.
 
 Apart from that, we've renamed `cacheTime` to `gcTime` to better reflect what it is doing, merged `keepPreviousData` with `placeholderData`, renamed `loading` states to `pending` and [removed the callbacks](https://github.com/TanStack/query/discussions/5279) from `useQuery`. All these changes make v5 the most consistent and best version for new starters.
 

app/components/DocsLayout.tsx

@@ -12,10 +12,9 @@ import {
   useMatches,
   useNavigate,
   useParams,
-  useRouterState,
 } from '@tanstack/react-router'
 import type { AnyOrama, SearchParamsFullText, AnyDocument } from '@orama/orama'
-import { SearchBox, SearchButton } from '@orama/searchbox'
+import { SearchBox } from '@orama/searchbox'
 import { Carbon } from '~/components/Carbon'
 import { Select } from '~/components/Select'
 import { useLocalStorage } from '~/utils/useLocalStorage'
@@ -25,7 +24,7 @@ import type { SelectOption } from '~/components/Select'
 import type { ConfigSchema, MenuItem } from '~/utils/config'
 import { create } from 'zustand'
 import { searchBoxParams, searchButtonParams } from '~/components/Orama'
-import { Framework, getFrameworkOptions, getLibrary } from '~/libraries'
+import { Framework, getFrameworkOptions } from '~/libraries'
 import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
 import { DocsCalloutBytes } from '~/components/DocsCalloutBytes'
 import { ClientOnlySearchButton } from './ClientOnlySearchButton'
@@ -179,7 +178,7 @@ const useMenuConfig = ({
   config: ConfigSchema
   repo: string
   frameworks: Framework[]
-}) => {
+}): MenuItem[] => {
   const currentFramework = useCurrentFramework(frameworks)
 
   const localMenu: MenuItem = {
@@ -211,7 +210,7 @@ const useMenuConfig = ({
   return [
     localMenu,
     // Merge the two menus together based on their group labels
-    ...config.sections.map((section) => {
+    ...config.sections.map((section): MenuItem | undefined => {
       const frameworkDocs = section.frameworks?.find(
         (f) => f.label === currentFramework.framework
       )
@@ -232,9 +231,11 @@ const useMenuConfig = ({
       return {
         label: section.label,
         children,
+        collapsible: section.collapsible ?? false,
+        defaultCollapsed: section.defaultCollapsed ?? false,
       }
     }),
-  ].filter(Boolean)
+  ].filter((item) => item !== undefined)
 }
 
 const useFrameworkConfig = ({ frameworks }: { frameworks: Framework[] }) => {
@@ -317,8 +318,7 @@ export function DocsLayout({
   children,
 }: DocsLayoutProps) {
   const { libraryId } = useParams({
-    strict: false,
-    experimental_returnIntersection: true,
+    from: '/$libraryId/$version/docs',
   })
   const frameworkConfig = useFrameworkConfig({ frameworks })
   const versionConfig = useVersionConfig({ versions })
@@ -350,16 +350,29 @@ export function DocsLayout({
   const [showBytes, setShowBytes] = useLocalStorage('showBytes', true)
 
   const menuItems = menuConfig.map((group, i) => {
+    const WrapperComp = group.collapsible ? 'details' : 'div'
+    const LabelComp = group.collapsible ? 'summary' : 'div'
+
+    const isCollapsed = group.defaultCollapsed ?? false
+
+    const detailsProps = group.collapsible ? { open: !isCollapsed } : {}
+
     return (
-      <div key={i}>
-        <div className="text-[.8em] uppercase font-black">{group?.label}</div>
+      <WrapperComp
+        key={`group-${i}`}
+        className="[&>summary]:before:mr-[0.4rem] [&>summary]:marker:text-[0.8em] [&>summary]:marker:-ml-[0.3rem] [&>summary]:marker:leading-4 [&>div.ts-sidebar-label]:ml-[1rem] relative select-none"
+        {...detailsProps}
+      >
+        <LabelComp className="text-[.8em] uppercase font-black leading-4 ts-sidebar-label">
+          {group?.label}
+        </LabelComp>
         <div className="h-2" />
-        <div className="ml-2 text-[.85em]">
+        <ul className="ml-2 text-[.85em] list-none">
           {group?.children?.map((child, i) => {
             const linkClasses = `cursor-pointer flex gap-2 items-center justify-between group px-2 py-[.1rem] rounded-lg hover:bg-gray-500 hover:bg-opacity-10`
 
             return (
-              <React.Fragment key={i}>
+              <li key={i}>
                 {child.to.startsWith('http') ? (
                   <a href={child.to} className={linkClasses}>
                     {child.label}
@@ -423,11 +436,11 @@ export function DocsLayout({
                     }}
                   </Link>
                 )}
-              </React.Fragment>
+              </li>
             )
           })}
-        </div>
-      </div>
+        </ul>
+      </WrapperComp>
     )
   })
 
@@ -539,7 +552,7 @@ export function DocsLayout({
       {largeMenu}
       <div
         className={twMerge(
-          `max-w-full min-w-0 min-h-0 flex relative justify-center w-full`,
+          `max-w-full min-w-0 flex relative justify-center w-full min-h-[88dvh] lg:min-h-0`,
           !isExample && 'mx-auto w-[900px]'
         )}
       >
@@ -613,7 +626,7 @@ export function DocsLayout({
                       <a
                         href={partner.href}
                         target="_blank"
-                        className="px-4 flex items-center justify-center" rel="noreferrer"
+                        className="px-4 flex items-center justify-center cursor-pointer"
                       >
                         <div className="mx-auto max-w-[150px]">
                           <img
@@ -650,20 +663,17 @@ export function DocsLayout({
               <DocsCalloutBytes />
             )}
           </div>
-          {partners.some((d) => d.libraries?.includes(libraryId as any)) ? (
-            <div className="h-[200px]" />
-          ) : (
-            <div className="bg-white dark:bg-gray-900 border-gray-500/20 shadow-xl divide-y divide-gray-500/20 flex flex-col border-t border-l border-b p-4 space-y-2 rounded-l-lg">
-              <Carbon />
-              <div
-                className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500 italic
-                dark:bg-opacity-20 self-center"
-              >
-                Guess what? This ad helps to keep us from burning out and
-                rage-quitting OSS just *that* much more. 😉
-              </div>
+
+          <div className="bg-white dark:bg-gray-900 border-gray-500/20 shadow-xl flex flex-col border-t border-l border-b p-4 space-y-2 rounded-l-lg">
+            <Carbon />
+            <div
+              className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500 italic
+                dark:bg-opacity-20 self-center opacity-50 hover:opacity-100 transition-opacity"
+            >
+              This ad helps to keep us from burning out and rage-quitting OSS
+              just *that* much more, so chill. 😉
             </div>
-          )}
+          </div>
         </div>
       </div>
       {showBytes ? (

app/components/RedirectVersionBanner.tsx

@@ -21,8 +21,8 @@ export function RedirectVersionBanner(props: {
 
   if (![latestVersion, 'latest'].includes(version) && showModal) {
     return (
-      <div className="p-4 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-xl shadow-black/20 flex items-center justify-center gap-4 fixed top-4 left-1/2 bottom-auto backdrop-blur-sm z-20 -translate-x-1/2 rounded-full overflow-hidden">
-        <div>
+      <div className="p-4 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-xl shadow-black/20 flex items-center justify-center gap-2.5 lg:gap-4 fixed top-4 left-1/2 bottom-auto backdrop-blur-sm z-20 -translate-x-1/2 rounded-3xl lg:rounded-full overflow-hidden w-[80%] lg:w-auto">
+        <p className="block">
           You are currently reading <strong>{version}</strong> docs. Redirect to{' '}
           <Link
             params={{
@@ -33,23 +33,27 @@ export function RedirectVersionBanner(props: {
             latest
           </Link>{' '}
           version?
+        </p>
+        <div className="flex gap-2 flex-col lg:flex-row items-center">
+          <Link
+            params={{
+              version: 'latest',
+            }}
+            replace
+            className="bg-black dark:bg-white dark:text-black text-white w-full lg:w-auto py-1 px-2 rounded-md uppercase font-black text-xs"
+          >
+            Latest
+          </Link>
+          <button
+            onClick={() => setShowModal(false)}
+            className="bg-black dark:bg-white dark:text-black text-white w-full lg:w-auto py-1 px-2 rounded-md uppercase font-black text-xs"
+          >
+            Hide
+          </button>
         </div>
-        <Link
-          params={{
-            version: 'latest',
-          }}
-          replace
-          className="bg-black dark:bg-white dark:text-black text-white py-1 px-2 rounded-md uppercase font-black text-xs"
-        >
-          Latest
-        </Link>
-        <button
-          onClick={() => setShowModal(false)}
-          className="bg-black dark:bg-white dark:text-black text-white py-1 px-2 rounded-md uppercase font-black text-xs"
-        >
-          Hide
-        </button>
       </div>
     )
   }
+
+  return null
 }