diff --git a/src/libraries/devtools.tsx b/src/libraries/devtools.tsx new file mode 100644 index 000000000..209bb882e --- /dev/null +++ b/src/libraries/devtools.tsx @@ -0,0 +1,91 @@ +import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' +import { Library } from '.' +import { BiBookAlt } from 'react-icons/bi' +import { VscWand } from 'react-icons/vsc' +import { twMerge } from 'tailwind-merge' + +const repo = 'tanstack/devtools' + +const textStyles = 'text-gray-700 dark:text-gray-500' + +export const devtoolsProject = { + id: 'devtools', + name: 'TanStack Devtools', + cardStyles: `shadow-xl shadow-slate-700/20 dark:shadow-lg dark:shadow-slate-500/30 text-slate-400 border-2 border-transparent hover:border-current`, + to: '/devtools', + tagline: `Centralized devtools panel for TanStack libraries and other custom devtools`, + description: `A unified devtools panel that houses all TanStack devtools and allows you to create and integrate your own custom devtools.`, + ogImage: + 'https://github.com/tanstack/devtools/raw/main/media/repo-header.png', + badge: 'alpha', + bgStyle: 'bg-slate-400', + textStyle: 'text-slate-400', + repo, + latestBranch: 'main', + latestVersion: 'v0', + availableVersions: ['v0'], + colorFrom: 'from-slate-400', + colorTo: 'to-slate-600', + textColor: 'text-slate-600', + frameworks: ['react', 'solid', 'vanilla'], + menu: [ + { + icon: , + label: 'Docs', + to: '/devtools/latest/docs', + }, + { + icon: , + label: 'Github', + to: `https://github.com/${repo}`, + }, + ], + featureHighlights: [ + { + title: 'Unified Devtools Panel', + icon: , + description: ( +
+ TanStack Devtools provides a centralized panel that houses all + TanStack library devtools in one place. No more switching between + different devtools panels - everything you need is{' '} + + organized and accessible from a single interface + {' '} + for a streamlined development experience. +
+ ), + }, + { + title: 'Framework Agnostic', + icon: , + description: ( +
+ Built with Solid.js for lightweight performance, but designed to work + within any framework. Create and integrate your own custom devtools + regardless of your tech stack.{' '} + + Whether you're using React, Vue, Angular, or any other framework, + {' '} + TanStack Devtools provides the flexibility you need. +
+ ), + }, + { + title: 'Custom Devtools Support', + icon: , + description: ( +
+ Extend the devtools panel with your own custom devtools. The platform + is designed to be extensible, allowing you to create devtools for your + specific needs and integrate them seamlessly.{' '} + + Build, share, and use custom devtools that enhance your development + workflow + {' '} + while maintaining the same unified experience. +
+ ), + }, + ], +} satisfies Library diff --git a/src/libraries/index.tsx b/src/libraries/index.tsx index c9e49ad90..f5d28a5e1 100644 --- a/src/libraries/index.tsx +++ b/src/libraries/index.tsx @@ -18,6 +18,7 @@ import { rangerProject } from './ranger' import { storeProject } from './store' import { pacerProject } from './pacer' import { dbProject } from './db' +import { devtoolsProject } from './devtools' export const frameworkOptions = [ { label: 'React', value: 'react', logo: reactLogo, color: 'bg-blue-500' }, @@ -56,6 +57,7 @@ export type Library = { | 'pacer' | 'db' | 'config' + | 'devtools' | 'react-charts' | 'create-tsrouter-app' name: string @@ -111,6 +113,7 @@ export const libraries = [ rangerProject, dbProject, configProject, + devtoolsProject, { id: 'react-charts', name: 'React Charts', @@ -133,7 +136,7 @@ export const librariesByGroup = { pacerProject, ], headlessUI: [tableProject, formProject, virtualProject, rangerProject], - other: [configProject], + other: [devtoolsProject, configProject], } export const librariesGroupNamesMap = { diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index 23769836b..f7b023147 100644 --- a/src/routeTree.gen.ts +++ b/src/routeTree.gen.ts @@ -48,6 +48,7 @@ import { Route as LibrariesRangerVersionIndexRouteImport } from './routes/_libra import { Route as LibrariesQueryVersionIndexRouteImport } from './routes/_libraries/query.$version.index' import { Route as LibrariesPacerVersionIndexRouteImport } from './routes/_libraries/pacer.$version.index' import { Route as LibrariesFormVersionIndexRouteImport } from './routes/_libraries/form.$version.index' +import { Route as LibrariesDevtoolsVersionIndexRouteImport } from './routes/_libraries/devtools.$version.index' import { Route as LibrariesDbVersionIndexRouteImport } from './routes/_libraries/db.$version.index' import { Route as LibrariesConfigVersionIndexRouteImport } from './routes/_libraries/config.$version.index' import { Route as LibraryIdVersionDocsIndexRouteImport } from './routes/$libraryId/$version.docs.index' @@ -230,6 +231,12 @@ const LibrariesFormVersionIndexRoute = path: '/form/$version/', getParentRoute: () => LibrariesRouteRoute, } as any) +const LibrariesDevtoolsVersionIndexRoute = + LibrariesDevtoolsVersionIndexRouteImport.update({ + id: '/devtools/$version/', + path: '/devtools/$version/', + getParentRoute: () => LibrariesRouteRoute, + } as any) const LibrariesDbVersionIndexRoute = LibrariesDbVersionIndexRouteImport.update({ id: '/db/$version/', path: '/db/$version/', @@ -326,6 +333,7 @@ export interface FileRoutesByFullPath { '/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute '/config/$version': typeof LibrariesConfigVersionIndexRoute '/db/$version': typeof LibrariesDbVersionIndexRoute + '/devtools/$version': typeof LibrariesDevtoolsVersionIndexRoute '/form/$version': typeof LibrariesFormVersionIndexRoute '/pacer/$version': typeof LibrariesPacerVersionIndexRoute '/query/$version': typeof LibrariesQueryVersionIndexRoute @@ -365,6 +373,7 @@ export interface FileRoutesByTo { '/$libraryId/$version/docs': typeof LibraryIdVersionDocsIndexRoute '/config/$version': typeof LibrariesConfigVersionIndexRoute '/db/$version': typeof LibrariesDbVersionIndexRoute + '/devtools/$version': typeof LibrariesDevtoolsVersionIndexRoute '/form/$version': typeof LibrariesFormVersionIndexRoute '/pacer/$version': typeof LibrariesPacerVersionIndexRoute '/query/$version': typeof LibrariesQueryVersionIndexRoute @@ -409,6 +418,7 @@ export interface FileRoutesById { '/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute '/_libraries/config/$version/': typeof LibrariesConfigVersionIndexRoute '/_libraries/db/$version/': typeof LibrariesDbVersionIndexRoute + '/_libraries/devtools/$version/': typeof LibrariesDevtoolsVersionIndexRoute '/_libraries/form/$version/': typeof LibrariesFormVersionIndexRoute '/_libraries/pacer/$version/': typeof LibrariesPacerVersionIndexRoute '/_libraries/query/$version/': typeof LibrariesQueryVersionIndexRoute @@ -453,6 +463,7 @@ export interface FileRouteTypes { | '/$libraryId/$version/docs/' | '/config/$version' | '/db/$version' + | '/devtools/$version' | '/form/$version' | '/pacer/$version' | '/query/$version' @@ -492,6 +503,7 @@ export interface FileRouteTypes { | '/$libraryId/$version/docs' | '/config/$version' | '/db/$version' + | '/devtools/$version' | '/form/$version' | '/pacer/$version' | '/query/$version' @@ -535,6 +547,7 @@ export interface FileRouteTypes { | '/$libraryId/$version/docs/' | '/_libraries/config/$version/' | '/_libraries/db/$version/' + | '/_libraries/devtools/$version/' | '/_libraries/form/$version/' | '/_libraries/pacer/$version/' | '/_libraries/query/$version/' @@ -796,6 +809,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof LibrariesDbVersionIndexRouteImport parentRoute: typeof LibrariesRouteRoute } + '/_libraries/devtools/$version/': { + id: '/_libraries/devtools/$version/' + path: '/devtools/$version' + fullPath: '/devtools/$version' + preLoaderRoute: typeof LibrariesDevtoolsVersionIndexRouteImport + parentRoute: typeof LibrariesRouteRoute + } '/_libraries/form/$version/': { id: '/_libraries/form/$version/' path: '/form/$version' @@ -1101,6 +1121,13 @@ declare module '@tanstack/react-start/server' { preLoaderRoute: unknown parentRoute: typeof rootServerRouteImport } + '/_libraries/devtools/$version/': { + id: '/_libraries/devtools/$version/' + path: '/devtools/$version' + fullPath: '/devtools/$version' + preLoaderRoute: unknown + parentRoute: typeof rootServerRouteImport + } '/_libraries/form/$version/': { id: '/_libraries/form/$version/' path: '/form/$version' @@ -1695,6 +1722,23 @@ declare module './routes/_libraries/db.$version.index' { unknown > } +declare module './routes/_libraries/devtools.$version.index' { + const createFileRoute: CreateFileRoute< + '/_libraries/devtools/$version/', + FileRoutesByPath['/_libraries/devtools/$version/']['parentRoute'], + FileRoutesByPath['/_libraries/devtools/$version/']['id'], + FileRoutesByPath['/_libraries/devtools/$version/']['path'], + FileRoutesByPath['/_libraries/devtools/$version/']['fullPath'] + > + + const createServerFileRoute: CreateServerFileRoute< + ServerFileRoutesByPath['/_libraries/devtools/$version/']['parentRoute'], + ServerFileRoutesByPath['/_libraries/devtools/$version/']['id'], + ServerFileRoutesByPath['/_libraries/devtools/$version/']['path'], + ServerFileRoutesByPath['/_libraries/devtools/$version/']['fullPath'], + unknown + > +} declare module './routes/_libraries/form.$version.index' { const createFileRoute: CreateFileRoute< '/_libraries/form/$version/', @@ -2015,6 +2059,7 @@ interface LibrariesRouteRouteChildren { LibrariesAccountSplatRoute: typeof LibrariesAccountSplatRoute LibrariesConfigVersionIndexRoute: typeof LibrariesConfigVersionIndexRoute LibrariesDbVersionIndexRoute: typeof LibrariesDbVersionIndexRoute + LibrariesDevtoolsVersionIndexRoute: typeof LibrariesDevtoolsVersionIndexRoute LibrariesFormVersionIndexRoute: typeof LibrariesFormVersionIndexRoute LibrariesPacerVersionIndexRoute: typeof LibrariesPacerVersionIndexRoute LibrariesQueryVersionIndexRoute: typeof LibrariesQueryVersionIndexRoute @@ -2041,6 +2086,7 @@ const LibrariesRouteRouteChildren: LibrariesRouteRouteChildren = { LibrariesAccountSplatRoute: LibrariesAccountSplatRoute, LibrariesConfigVersionIndexRoute: LibrariesConfigVersionIndexRoute, LibrariesDbVersionIndexRoute: LibrariesDbVersionIndexRoute, + LibrariesDevtoolsVersionIndexRoute: LibrariesDevtoolsVersionIndexRoute, LibrariesFormVersionIndexRoute: LibrariesFormVersionIndexRoute, LibrariesPacerVersionIndexRoute: LibrariesPacerVersionIndexRoute, LibrariesQueryVersionIndexRoute: LibrariesQueryVersionIndexRoute, diff --git a/src/routes/_libraries/devtools.$version.index.tsx b/src/routes/_libraries/devtools.$version.index.tsx new file mode 100644 index 000000000..e3d097f12 --- /dev/null +++ b/src/routes/_libraries/devtools.$version.index.tsx @@ -0,0 +1,175 @@ +import { CgSpinner } from 'react-icons/cg' +import { FaCheckCircle } from 'react-icons/fa' +import { Carbon } from '~/components/Carbon' +import { Footer } from '~/components/Footer' +import { TbHeartHandshake } from 'react-icons/tb' +import SponsorPack from '~/components/SponsorPack' +import { devtoolsProject } from '~/libraries/devtools' +import { getLibrary } from '~/libraries' +import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights' +import { Await, Link, getRouteApi } from '@tanstack/react-router' +import { seo } from '~/utils/seo' +import { twMerge } from 'tailwind-merge' +import LandingPageGad from '~/components/LandingPageGad' +import { PartnershipCallout } from '~/components/PartnershipCallout' + +export const Route = createFileRoute({ + component: DevtoolsVersionIndex, + head: () => ({ + meta: seo({ + title: devtoolsProject.name, + description: devtoolsProject.description, + }), + }), +}) + +const librariesRouteApi = getRouteApi('/_libraries') + +export default function DevtoolsVersionIndex() { + const { sponsorsPromise } = librariesRouteApi.useLoaderData() + const { version } = Route.useParams() + const library = getLibrary('devtools') + + const gradientText = `pr-1 inline-block leading-snug text-transparent bg-clip-text bg-gradient-to-r ${devtoolsProject.colorFrom} ${devtoolsProject.colorTo}` + + return ( + <> +
+
+

+ TanStack + Devtools +

+
+ STATUS: ALPHA +
+

+ + Centralized devtools panel + {' '} + for TanStack libraries and custom devtools +

+

+ A unified devtools panel that houses all TanStack devtools and + allows you to create and integrate your own custom devtools. Built + with Solid.js for lightweight performance but + designed to work with any framework. +

+ + Get Started + +
+ + + +
+
+

+ Unified Development Experience +

+

+ TanStack Devtools brings together all your development tools in + one place, making debugging and development more efficient than + ever before. +

+
+
+ {[ + 'Centralized Panel', + 'Framework Agnostic', + 'Custom Devtools', + 'Lightweight', + 'Solid.js Powered', + 'Extensible API', + 'Type Safe', + 'Plugin System', + 'Real-time Updates', + ].map((d, i) => { + return ( + + {d} + + ) + })} +
+
+ +
+

+ Partners +

+
+ +
+ +
+

+ Sponsors +

+
+ } + children={(sponsors) => { + return + }} + /> +
+ +
+ + + +
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Get Started! + +
+
+
+ + ) +}