demote ranger

Author: tannerlinsley

public/images/total-support-share.png

@@ -19,13 +19,7 @@ import { SearchButton } from './SearchButton'
 import { Authenticated, Unauthenticated, useQuery } from 'convex/react'
 import { AuthLoading } from 'convex/react'
 import { api } from 'convex/_generated/api'
-import {
-  MdLibraryBooks,
-  MdLineAxis,
-  MdMenu,
-  MdPerson,
-  MdSupport,
-} from 'react-icons/md'
+import { MdLibraryBooks, MdLineAxis, MdPerson, MdSupport } from 'react-icons/md'
 import { CgClose, CgMenuLeft, CgMusicSpeaker } from 'react-icons/cg'
 import { BiSolidCheckShield } from 'react-icons/bi'
 import { PiHammerFill } from 'react-icons/pi'
@@ -232,7 +226,21 @@ export function Navbar({ children }: { children: React.ReactNode }) {
     <div className="md:flex gap-2 [&>*]:flex-1 lg:block">
       <div>
         {sortBy(
-          libraries.filter((d) => d.to),
+          libraries.filter((d) => {
+            const sidebarLibraryIds = [
+              'start',
+              'router',
+              'query',
+              'table',
+              'form',
+              'db',
+              'virtual',
+              'pacer',
+              'store',
+              'devtools',
+            ]
+            return d.to && sidebarLibraryIds.includes(d.id)
+          }),
           (d) => !d.name.includes('TanStack')
         ).map((library, i) => {
           const [prefix, name] = library.name.split(' ')
@@ -344,6 +352,32 @@ export function Navbar({ children }: { children: React.ReactNode }) {
             </div>
           )
         })}
+        <Link
+          to="/libraries"
+          className={twMerge(linkClasses, 'font-normal')}
+          activeProps={{
+            className: twMerge('font-bold! bg-gray-500/10 dark:bg-gray-500/30'),
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <div className="flex items-center gap-4 justify-between">
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </div>
+            <div>More Libraries</div>
+          </div>
+        </Link>
         <div className="py-2">
           <div className="bg-gray-500/10 h-px" />
         </div>

src/components/Navbar.tsx

@@ -139,7 +139,7 @@ export const librariesByGroup = {
     storeProject,
     pacerProject,
   ],
-  headlessUI: [tableProject, formProject, virtualProject, rangerProject],
+  headlessUI: [tableProject, formProject, virtualProject],
   other: [devtoolsProject, configProject],
 }
 

src/libraries/index.tsx

@@ -9,27 +9,27 @@ import { twMerge } from 'tailwind-merge'
 
 const repo = 'tanstack/ranger'
 
-const textStyles = 'text-pink-600 dark:text-pink-400'
+const textStyles = 'text-gray-700 dark:text-gray-500'
 
 export const rangerProject = {
   id: 'ranger',
   name: 'TanStack Ranger',
-  cardStyles: `shadow-xl shadow-pink-700/20 dark:shadow-lg dark:shadow-pink-500/30 text-pink-500 border-2 border-transparent hover:border-current`,
+  cardStyles: `shadow-xl shadow-slate-700/20 dark:shadow-lg dark:shadow-slate-500/30 text-slate-500 border-2 border-transparent hover:border-current`,
   to: '/ranger',
   tagline: `Headless range and multi-range slider utilities.`,
   description: `Headless, lightweight, and extensible primitives for building range and multi-range sliders.`,
   ogImage: 'https://github.com/tanstack/ranger/raw/main/media/headerv1.png',
   badge: undefined,
-  bgStyle: 'bg-pink-500',
-  textStyle: 'text-pink-500',
+  bgStyle: 'bg-slate-500',
+  textStyle: 'text-slate-500',
   repo,
   latestBranch: 'main',
   latestVersion: 'v0',
   availableVersions: ['v0'],
-  bgRadial: 'from-pink-500 via-pink-600/50 to-transparent',
-  colorFrom: 'from-pink-400',
-  colorTo: 'to-pink-500',
-  textColor: 'text-pink-500',
+  bgRadial: 'from-gray-500 via-gray-700/50 to-transparent',
+  colorFrom: 'from-gray-500',
+  colorTo: 'to-gray-700',
+  textColor: 'text-gray-700',
   frameworks: ['react'],
   scarfId: 'dd278e06-bb3f-420c-85c6-6e42d14d8f61',
   menu: [

src/libraries/ranger.tsx

@@ -12,6 +12,7 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as SponsorsEmbedRouteImport } from './routes/sponsors-embed'
 import { Route as PartnersEmbedRouteImport } from './routes/partners-embed'
 import { Route as MerchRouteImport } from './routes/merch'
+import { Route as LibrariesRouteImport } from './routes/libraries'
 import { Route as BuilderRouteImport } from './routes/builder'
 import { Route as AdminRouteRouteImport } from './routes/admin/route'
 import { Route as LibrariesRouteRouteImport } from './routes/_libraries/route'
@@ -78,6 +79,11 @@ const MerchRoute = MerchRouteImport.update({
   path: '/merch',
   getParentRoute: () => rootRouteImport,
 } as any)
+const LibrariesRoute = LibrariesRouteImport.update({
+  id: '/libraries',
+  path: '/libraries',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const BuilderRoute = BuilderRouteImport.update({
   id: '/builder',
   path: '/builder',
@@ -353,6 +359,7 @@ export interface FileRoutesByFullPath {
   '/$libraryId': typeof LibraryIdRouteRouteWithChildren
   '/admin': typeof AdminRouteRouteWithChildren
   '/builder': typeof BuilderRoute
+  '/libraries': typeof LibrariesRoute
   '/merch': typeof MerchRoute
   '/partners-embed': typeof PartnersEmbedRoute
   '/sponsors-embed': typeof SponsorsEmbedRoute
@@ -405,6 +412,7 @@ export interface FileRoutesByFullPath {
 }
 export interface FileRoutesByTo {
   '/builder': typeof BuilderRoute
+  '/libraries': typeof LibrariesRoute
   '/merch': typeof MerchRoute
   '/partners-embed': typeof PartnersEmbedRoute
   '/sponsors-embed': typeof SponsorsEmbedRoute
@@ -459,6 +467,7 @@ export interface FileRoutesById {
   '/_libraries': typeof LibrariesRouteRouteWithChildren
   '/admin': typeof AdminRouteRouteWithChildren
   '/builder': typeof BuilderRoute
+  '/libraries': typeof LibrariesRoute
   '/merch': typeof MerchRoute
   '/partners-embed': typeof PartnersEmbedRoute
   '/sponsors-embed': typeof SponsorsEmbedRoute
@@ -515,6 +524,7 @@ export interface FileRouteTypes {
     | '/$libraryId'
     | '/admin'
     | '/builder'
+    | '/libraries'
     | '/merch'
     | '/partners-embed'
     | '/sponsors-embed'
@@ -567,6 +577,7 @@ export interface FileRouteTypes {
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/builder'
+    | '/libraries'
     | '/merch'
     | '/partners-embed'
     | '/sponsors-embed'
@@ -620,6 +631,7 @@ export interface FileRouteTypes {
     | '/_libraries'
     | '/admin'
     | '/builder'
+    | '/libraries'
     | '/merch'
     | '/partners-embed'
     | '/sponsors-embed'
@@ -676,6 +688,7 @@ export interface RootRouteChildren {
   LibrariesRouteRoute: typeof LibrariesRouteRouteWithChildren
   AdminRouteRoute: typeof AdminRouteRouteWithChildren
   BuilderRoute: typeof BuilderRoute
+  LibrariesRoute: typeof LibrariesRoute
   MerchRoute: typeof MerchRoute
   PartnersEmbedRoute: typeof PartnersEmbedRoute
   SponsorsEmbedRoute: typeof SponsorsEmbedRoute
@@ -707,6 +720,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MerchRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/libraries': {
+      id: '/libraries'
+      path: '/libraries'
+      fullPath: '/libraries'
+      preLoaderRoute: typeof LibrariesRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/builder': {
       id: '/builder'
       path: '/builder'
@@ -1216,6 +1236,7 @@ const rootRouteChildren: RootRouteChildren = {
   LibrariesRouteRoute: LibrariesRouteRouteWithChildren,
   AdminRouteRoute: AdminRouteRouteWithChildren,
   BuilderRoute: BuilderRoute,
+  LibrariesRoute: LibrariesRoute,
   MerchRoute: MerchRoute,
   PartnersEmbedRoute: PartnersEmbedRoute,
   SponsorsEmbedRoute: SponsorsEmbedRoute,

src/routeTree.gen.ts

@@ -10,7 +10,6 @@ import discordImage from '~/images/discord-logo-white.svg'
 import { useMutation } from '~/hooks/useMutation'
 import { librariesByGroup, librariesGroupNamesMap, Library } from '~/libraries'
 import bytesImage from '~/images/bytes.svg'
-import { partners } from '../../utils/partners'
 import { PartnersGrid } from '~/components/PartnersGrid'
 import OpenSourceStats from '~/components/OpenSourceStats'
 // Using public asset URLs for splash images
@@ -170,7 +169,7 @@ function Index() {
                         to={library.to ?? '#'}
                         params
                         className={twMerge(
-                          `border-2 border-gray-200 dark:border-gray-800/50 rounded-xl shadow-md p-8 transition-all duration-300
+                          `border-2 border-gray-200 dark:border-gray-800/50 rounded-xl shadow-md p-8 transition-all duration-300 ease-out
                           bg-white/90 dark:bg-black/40 backdrop-blur-sm`,
                           'hover:shadow-2xl hover:shadow-current/20 hover:border-current/50 hover:-translate-y-1',
                           'relative group',
@@ -179,10 +178,11 @@ function Index() {
                         )}
                         style={{
                           zIndex: i,
+                          willChange: 'transform',
                         }}
                       >
                         {/* Background content that will blur on hover */}
-                        <div className="z-0 relative group-hover:blur-[0.5px] transition-[filter] duration-200">
+                        <div className="z-0 relative group-hover:blur-[0.5px] transition-[filter] duration-300 ease-out">
                           <div className="flex gap-2 justify-between items-center">
                             <MatchRoute
                               pending
@@ -228,7 +228,7 @@ function Index() {
                         <div
                           className="absolute inset-0 z-30 bg-white/95 dark:bg-black/95 p-6 rounded-xl
                           backdrop-blur-sm flex flex-col justify-center opacity-0 group-hover:opacity-100
-                          transition-opacity duration-300"
+                          transition-opacity duration-300 ease-out pointer-events-none group-hover:pointer-events-auto"
                         >
                           <div
                             className={`text-sm text-gray-800 dark:text-gray-200 leading-relaxed`}
@@ -290,6 +290,28 @@ function Index() {
           )}
         </div>
 
+        <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto mt-8 text-center">
+          <Link
+            to="/libraries"
+            className="inline-flex items-center gap-2 px-6 py-3 rounded-xl border-2 border-gray-300 dark:border-gray-700 bg-white/90 dark:bg-black/40 backdrop-blur-sm shadow-md hover:shadow-xl hover:border-gray-400/70 dark:hover:border-gray-600/70 hover:-translate-y-1 transition-all duration-300 text-gray-900 dark:text-gray-100 font-medium"
+          >
+            <span>More Libraries</span>
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </Link>
+        </div>
+
         <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
           <h3 className={`text-4xl font-light mb-6`}>Partners</h3>
           <PartnersGrid />

src/routes/_libraries/index.tsx

@@ -446,6 +446,34 @@ function RouteComp() {
             Get in Touch
           </a>
         </div>
+
+        <div className="text-center py-8 border-t border-gray-200 dark:border-gray-700">
+          <a
+            href="#total-support-share"
+            className="anchor-heading *:scroll-my-20 *:lg:scroll-my-4"
+          >
+            <h2
+              id="total-support-share"
+              className="text-2xl font-semibold mb-4"
+            >
+              Total Support Share
+            </h2>
+          </a>
+          <p className="text-gray-600 dark:text-gray-300 mb-6 max-w-xl mx-auto">
+            This chart is a percentage-based visualization of the total support
+            each partner has rendered to TanStack ever. It is updated every 6
+            months.
+          </p>
+          <div className="flex justify-center">
+            <img
+              src="/images/total-support-share.png"
+              alt="Total Support Share chart showing percentage-based contribution of partners to TanStack"
+              className="rounded-lg shadow-lg"
+              width={600}
+              height={706}
+            />
+          </div>
+        </div>
       </div>
       <Footer />
     </div>

src/routes/_libraries/partners.tsx

@@ -46,7 +46,7 @@ function VersionIndex() {
               params: { libraryId: library.id, version },
             },
             label: 'Get Started',
-            className: 'bg-pink-500 text-white',
+            className: 'bg-slate-500 text-white',
           }}
         />
 
@@ -98,7 +98,7 @@ function VersionIndex() {
             params: { libraryId: library.id, version },
           }}
           label="Get Started!"
-          className="bg-pink-500 text-white"
+          className="bg-slate-500 text-white"
         />
         <Footer />
       </div>