tanstack / tanstack.com Goto Github PK

View Code? Open in Web Editor NEW

373.0 5.0 111.0 17.05 MB

The marketing and docs site for all TanStack projects

Home Page: https://tanstack.com

JavaScript 1.05% CSS 18.16% TypeScript 80.79%

tanstack.com's Introduction

Welcome to TanStack.com!

This site is built with TanStack Router!

TanStack Router Docs

It's deployed automagically with Vercel!

Vercel

Development

From your terminal:

pnpm install
pnpm dev

This starts your app in development mode, rebuilding assets on file changes.

Editing and previewing the docs of TanStack projects locally

The documentations for all TanStack projects except for React Charts are hosted on https://tanstack.com, powered by this TanStack Router app. In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system.

Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's TanStack/form) and preview them locally :

Create a new directory called tanstack.

mkdir tanstack

Enter the directory and clone this repo and the repo of the project there.

cd tanstack
git clone [email protected]:TanStack/tanstack.com.git
git clone [email protected]:TanStack/form.git

Note

Your tanstack directory should look like this:

tanstack/
   |
   +-- form/
   |
   +-- tanstack.com/

Warning

Make sure the name of the directory in your local file system matches the name of the project's repo. For example, tanstack/form must be cloned into form (this is the default) instead of some-other-name, because that way, the doc pages won't be found.

Enter the tanstack/tanstack.com directory, install the dependencies and run the app in dev mode:

cd tanstack.com
pnpm i
# The app will run on https://localhost:3000 by default
pnpm dev

Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in tanstack/form/docs.

Note

The updated pages need to be manually reloaded in the browser.

Warning

You will need to update the docs/config.json file (in the project's repo) if you add a new doc page!

tanstack.com's People

Contributors

Stargazers

Watchers

Forkers

birbosluk jacob-ebey zslabs tigerabrodi pzich bennettdams tkdodo kouts maxgfeller luisauter dglsparsons illuzan-forks illuzan thevipinmishra nickserv greatstate samtlt atif252 jamessspanggg xenomech isabella232 voodoomd patrick-ullrich andersdjohnson iicdii hichemfantar ardeora tordans damianosipiuk uvacoder dimitropoulos benadam11 zadeviggers hakimlyon ariabennett saurabhan moshyfawn iamdevmarcos judicaelandria danilowoz justice-sh dragosdev-code nicholasgriffintn skirianov martinstaudt flybayer pacexy mgahn0706 david-mcafee subhanbakh okandas mmaaaaz uiforks codesjedi future-leader1 styleshit papadavis47 beerose arnoud-dv tylermcginnis essana3 kevinvandy fulopkovacs andyswanepoel leojuriolli7 mwelwankuta timmyichen nksaraf ducin aslemammad sunui yshashi acusti hugo-delattre hodooseungmo nklhtv coleea netlify chigia001 0-vortex ruisaraiva19 protogenesis md-assembla kushagramehta eddie0329 jontii dogpawhat jungwoo3490 bronifty daysm lynnandtonic balastrong oliviertassinari kadoshms subratamal bitcooker tobysolutions elibobcoder 87xie toavina23

tanstack.com's Issues

The lastest url in banner don't update after navigation

When working on adding canonical tag for doc site, I try to use loader result from tanstack.com/app/routes/query.$version.tsx to generate the canonical link.

This work fine for SSR inital response, but when user naivate to different page using the menu the redirect URL is not update.

In context of adding canonical link, this is not an issue as we only need this for bot.

But I believe the version banner should be up to date with the current url.

favicon is not displayed

Website is down 3/27/23

Looks like there might be an issue with the tailwindcss version and generating styles that is causing the website to display nothing.

Website Fails to Render when Microsoft Editor Chrome Extension Installed

Hey Maintainers 👋🏻,

I was visiting the tanstack site to RTFM and I experienced a weird rendering issue where the page was completely blank. Similar to that of #210. I had no issues in an Incognito window so I assumed it was extension related. After a brief process of a elimination I discovered it was the Microsoft Editor: Spelling & Grammar Checker extension causing the issue.

What specifically this extension is doing to cause the website rendering to fail entirely I'm not entirely sure. If you're unfamiliar with the extension it's a glorrified spell and grammar checker. Below I've included all the details I feel might be helpful for both reproducing the issue.

Do let me know if you need anything further though.

Peace ✌🏻

System details

Device: MacBook Pro 14-inch (Apple M1 Pro)
Arch: ARM64
OS: macOS Sonoma 14.4.1
Browser: Chrome 124.0.6367.62
Extension version: v1.8.1

Console Logs

Codesandbox plugin on site 'tanstack.com/query' takes forever to load

I'm using Firefox 119.0.1 (64-bit) on an intel i5 and when i scroll to the section where it contains a codesandbox plugin, it produces a blank empty canvas.

Here is the site for reference https://tanstack.com/query/v3/

Even if it loads, pressing the tabs for solid, vue etc will result in the black canvas yet again.

preview broken at `tanstack.com/virtual`

currently seeing this error at https://tanstack.com/virtual/latest

Limited docs sidebar sorting

Problem

Currently, the sidebar generator iterates over the core items and adds framework items as it goes, then goes through any framework sections that were not core sections. This means that groups with core items always appear first.

Proposal

Frameworks could be moved within sections, so that the logic would be to render the section, its core items, and the selected framework's items.

const configSchema = z.object({
  docSearch: z.object({
    appId: z.string(),
    apiKey: z.string(),
    indexName: z.string(),
  }),
  sections: z.array(
    z.object({
      name: z.string(),
      items: z.array(
        z.object({
          label: z.string(),
          to: z.string(),
          badge: z.string().optional(),
        })
      ),
      frameworks: z.array(
        z.object({
          name: z.string(),
          items: z.array(
            z.object({
              label: z.string(),
              to: z.string(),
              badge: z.string().optional(),
            })
          ),
        })
      ),
    })
  ),
  users: z.array(z.string()).optional(),
})

some head tag is unusual in 'code splitting' on tanstack router

'example' tag is h3 and 'before' tag is h4

I think that why head tag's display css is inline-block

so I suggest to change from inline-block to block on this code

Document Title not updating on all tanstack.com pages

Hi!

I happened to notice that document.title isn't getting updated when you navigate within pages in any of the pre-defined routes.

Reproduction steps:

navigate to https://tanstack.com/query/v4/docs/guides/scroll-restoration
- observe that the document title (i.e. in the browser tab) reads Scroll Restoration | Tanstack Query Docs
click on "Filters" at the bottom of the page (or in the sidebar, it's the next item in the list)
- observe the url changed to https://tanstack.com/query/v4/docs/guides/filters
- observe that the document title has not changed
refresh the page
- observe that the document title now correctly reads Filters | Tanstack Query Docs

This happens on other sites on tanstack.com as well, e.g. https://tanstack.com/table and others.

I looked for a quick solution so I could contribute it, but after like 90 seconds of looking I see that it's controlled by the utils/seo function which is integrated in to remix, and I don't have enough experience with remix to fix it quickly.

isPending property not available

The documentation specifies that isPending or status === 'pending' - The query has no data yet
But logging out the object returned by useQuery, isPending is not part of properties like it is specified in the documentation.

Documentation for TanStack Query, Table, Router and Virtual is not working

Docs are not working for Query, Table, Router and Virtual.
Welcome page works in each, but clicking on 'Get Started' results in an error:

Application Error
Error: Cannot initialize 'routeModules'. This normally occurs when you have server code in your client modules.
Check this link for more details:
https://remix.run/pages/gotchas#server-code-in-client-bundles
    at D (https://tanstack.com/build/_shared/chunk-X6YUK6IC.js:9:80)
    at Rr (https://tanstack.com/build/_shared/chunk-X6YUK6IC.js:12:65)
    at Zi (https://tanstack.com/build/_shared/chunk-OGUMYIMX.js:5:52842)
    at na (https://tanstack.com/build/_shared/chunk-OGUMYIMX.js:9:8687)
    at qs (https://tanstack.com/build/_shared/chunk-OGUMYIMX.js:9:933)
    at Qf (https://tanstack.com/build/_shared/chunk-OGUMYIMX.js:9:864)
    at ut (https://tanstack.com/build/_shared/chunk-OGUMYIMX.js:9:724)
    at yi (https://tanstack.com/build/_shared/chunk-OGUMYIMX.js:7:10856)
    at Ve (https://tanstack.com/build/_shared/chunk-OGUMYIMX.js:7:8416)
    at jr (https://tanstack.com/build/_shared/chunk-OGUMYIMX.js:9:15760)

Framework picker for the Query v3 docs shows frameworks that weren't supported in this version

Query v3 only has React docs, but the framework picker shows other frameworks too:

Sidebar covers only 80% of the screen on mobile

Issue description

The Sidebar covers only 80% of the screen on mobile and suffers from double scroll (when sidebar content scroll is over, underneath content is being scrolled)

Attachements

You can see at the bottom main content is visible

Fix

I would like to be assigned to this issue and fix it

Same text for TanStack Form and React Ranger

The presentation text for TanStack Form is the same text than the one used to present React Ranger

Algolia search results for Query only route to v4 docs

When searching the Tanstack Query docs with the Algolia search bar, it only searches on the v4 version of the docs, no matter what docs version you have currently selected. This is especially frustrating when trying to search for features that have a new name in v5. The search results are empty. It is also frustrating if I click on a search result and I am routed to the v4 version of the docs as I won't realize I'm browsing the incorrect version of the docs. I looked into fixing this myself but it seems like the configuration is handled through the Algolia web interface?

site fails to load in Edge with "Microsoft Editor: Spelling & Grammar Checker" extension running

Links:

The following errors occurred while hydrating the app, likely due to browser extensions mutating the dom before hydration. Falling back to client-side rendering.

DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Full console logs

22client-W1dh9HGm.js:38  Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Vs (client-W1dh9HGm.js:38:4791)
    at df (client-W1dh9HGm.js:40:45426)
    at af (client-W1dh9HGm.js:40:39635)
    at kh (client-W1dh9HGm.js:40:39607)
    at of (client-W1dh9HGm.js:40:34618)
    at S (client-W1dh9HGm.js:25:1568)
    at MessagePort.O (client-W1dh9HGm.js:25:1935)
Vs @ client-W1dh9HGm.js:38
df @ client-W1dh9HGm.js:40
af @ client-W1dh9HGm.js:40
kh @ client-W1dh9HGm.js:40
of @ client-W1dh9HGm.js:40
S @ client-W1dh9HGm.js:25
O @ client-W1dh9HGm.js:25

        [NEW] Explain Console errors by using Copilot in Edge: click 
         to explain an error. 
        Learn more
        Don't show again
3client-W1dh9HGm.js:38  Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Vs (client-W1dh9HGm.js:38:4791)
    at df (client-W1dh9HGm.js:40:45426)
    at af (client-W1dh9HGm.js:40:39635)
    at kh (client-W1dh9HGm.js:40:39607)
    at of (client-W1dh9HGm.js:40:34618)
    at S (client-W1dh9HGm.js:25:1568)
    at MessagePort.O (client-W1dh9HGm.js:25:1935)
Vs @ client-W1dh9HGm.js:38
df @ client-W1dh9HGm.js:40
af @ client-W1dh9HGm.js:40
kh @ client-W1dh9HGm.js:40
of @ client-W1dh9HGm.js:40
S @ client-W1dh9HGm.js:25
O @ client-W1dh9HGm.js:25
client-W1dh9HGm.js:40  Uncaught Error: Minified React error #422; visit https://reactjs.org/docs/error-decoder.html?invariant=422 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at dh (client-W1dh9HGm.js:40:8427)
    at Kd (client-W1dh9HGm.js:40:7368)
    at df (client-W1dh9HGm.js:40:45629)
    at af (client-W1dh9HGm.js:40:39635)
    at kh (client-W1dh9HGm.js:40:39607)
    at of (client-W1dh9HGm.js:40:34618)
    at S (client-W1dh9HGm.js:25:1568)
    at MessagePort.O (client-W1dh9HGm.js:25:1935)
dh @ client-W1dh9HGm.js:40
Kd @ client-W1dh9HGm.js:40
df @ client-W1dh9HGm.js:40
af @ client-W1dh9HGm.js:40
kh @ client-W1dh9HGm.js:40
of @ client-W1dh9HGm.js:40
S @ client-W1dh9HGm.js:25
O @ client-W1dh9HGm.js:25
client-W1dh9HGm.js:525  The following errors occurred while hydrating the app, likely due to browser extensions mutating the dom before hydration. Falling back to client-side rendering.
console.error @ client-W1dh9HGm.js:525
n0 @ client-W1dh9HGm.js:525
console.error @ client-W1dh9HGm.js:525
Gs @ client-W1dh9HGm.js:40
n.callback @ client-W1dh9HGm.js:40
cu @ client-W1dh9HGm.js:38
$u @ client-W1dh9HGm.js:40
rf @ client-W1dh9HGm.js:40
vh @ client-W1dh9HGm.js:40
Sh @ client-W1dh9HGm.js:40
rn @ client-W1dh9HGm.js:40
Lu @ client-W1dh9HGm.js:40
en @ client-W1dh9HGm.js:38
Sh @ client-W1dh9HGm.js:40
rn @ client-W1dh9HGm.js:40
of @ client-W1dh9HGm.js:40
S @ client-W1dh9HGm.js:25
O @ client-W1dh9HGm.js:25
client-W1dh9HGm.js:525  DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25276)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
console.error @ client-W1dh9HGm.js:525
Gs @ client-W1dh9HGm.js:40
n.callback @ client-W1dh9HGm.js:40
cu @ client-W1dh9HGm.js:38
$u @ client-W1dh9HGm.js:40
rf @ client-W1dh9HGm.js:40
vh @ client-W1dh9HGm.js:40
Sh @ client-W1dh9HGm.js:40
rn @ client-W1dh9HGm.js:40
Lu @ client-W1dh9HGm.js:40
en @ client-W1dh9HGm.js:38
Sh @ client-W1dh9HGm.js:40
rn @ client-W1dh9HGm.js:40
of @ client-W1dh9HGm.js:40
S @ client-W1dh9HGm.js:25
O @ client-W1dh9HGm.js:25
client-W1dh9HGm.js:38  Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25276)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
    at tl (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25399)
en @ client-W1dh9HGm.js:38
Sh @ client-W1dh9HGm.js:40
rn @ client-W1dh9HGm.js:40
of @ client-W1dh9HGm.js:40
S @ client-W1dh9HGm.js:25
O @ client-W1dh9HGm.js:25
client-W1dh9HGm.js:525  The following errors occurred while hydrating the app, likely due to browser extensions mutating the dom before hydration. Falling back to client-side rendering.
console.error @ client-W1dh9HGm.js:525
n0 @ client-W1dh9HGm.js:525
console.error @ client-W1dh9HGm.js:525
Gs @ client-W1dh9HGm.js:40
n.callback @ client-W1dh9HGm.js:40
cu @ client-W1dh9HGm.js:38
$u @ client-W1dh9HGm.js:40
rf @ client-W1dh9HGm.js:40
vh @ client-W1dh9HGm.js:40
Sh @ client-W1dh9HGm.js:40
rn @ client-W1dh9HGm.js:40
Lu @ client-W1dh9HGm.js:40
en @ client-W1dh9HGm.js:38
(anonymous) @ client-W1dh9HGm.js:40
client-W1dh9HGm.js:525  DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at tf (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:26002)
    at It (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25708)
    at tf (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:26457)
    at It (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25708)
    at tf (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:26457)
    at It (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25708)
    at tf (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:26457)
    at It (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25708)
    at tf (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:26650)
    at It (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25708)
console.error @ client-W1dh9HGm.js:525
Gs @ client-W1dh9HGm.js:40
n.callback @ client-W1dh9HGm.js:40
cu @ client-W1dh9HGm.js:38
$u @ client-W1dh9HGm.js:40
rf @ client-W1dh9HGm.js:40
vh @ client-W1dh9HGm.js:40
Sh @ client-W1dh9HGm.js:40
rn @ client-W1dh9HGm.js:40
Lu @ client-W1dh9HGm.js:40
en @ client-W1dh9HGm.js:38
(anonymous) @ client-W1dh9HGm.js:40
client-W1dh9HGm.js:38  Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at tf (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:26002)
    at It (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25708)
    at tf (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:26457)
    at It (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25708)
    at tf (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:26457)
    at It (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25708)
    at tf (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:26457)
    at It (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25708)
    at tf (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:26650)
    at It (https://tanstack.com/_build/assets/client-W1dh9HGm.js:40:25708)
en @ client-W1dh9HGm.js:38
(anonymous) @ client-W1dh9HGm.js:40

/query/v4/docs/comparison not working

https://tanstack.com/query/v4/docs/comparison is not working:

Cannot change Framework or Version in the selectors.

Steps

Try to select a new version or framework on tanstack.com/query from the framework/version selector:

Expected Behaviour

You should navigate to the docs for the selected framework/version (eg /query/latest/docs/framework/react -> /query/v3/docs/framework/react

Actual behaviour

No navigation occurs and the selector remains stuck.

Nodes

Installed the site locallaly and ran a bisect section to track down the issue:

git bisect good
42a83f39c496cd9197bbe3733c77194bc59bc598 is the first bad commit
commit 42a83f39c496cd9197bbe3733c77194bc59bc598
Author: Tanner Linsley <[email protected]>
Date:   Mon Apr 29 23:37:24 2024 -0600

   fix: upgrades

app/components/DocsLayout.tsx            |   6 +-
app/images/people/dominikdorfmeister.jpg | Bin 0 -> 84778 bytes
app/images/people/kevinvancott.jpeg      | Bin 0 -> 125932 bytes
app/images/people/tannerlinsley.jpeg     | Bin 0 -> 110884 bytes
app/routeTree.gen.ts                     |  31 +-
app/routes/_libraries.index.tsx          | 531 +++++++++++++++++++++++++++
app/routes/_libraries.support.tsx        | 152 ++++++++
app/routes/_libraries.tsx                |  77 ++--
app/routes/index.tsx                     | 591 -------------------------------
media/brand.sketch                       | Bin 861477 -> 882244 bytes
package.json                             |   6 +-
pnpm-lock.yaml                           | 514 ++++++++++++++++++---------
12 files changed, 1113 insertions(+), 795 deletions(-)
create mode 100644 app/images/people/dominikdorfmeister.jpg
create mode 100644 app/images/people/kevinvancott.jpeg
create mode 100644 app/images/people/tannerlinsley.jpeg
create mode 100644 app/routes/_libraries.index.tsx
create mode 100644 app/routes/_libraries.support.tsx
delete mode 100644 app/routes/index.tsx

At 42a83f3, I suspect the @tanstack/react-router": upgrade from 1.29.2 to 1.31.3 is responsible and there's an issue in that version.

Link is broken

https://tanstack.com/query/latest/docs/framework/react/guides/prefetching

Redirects to: https://tanstack.com/query/latest/docs/framework/react/guides/tkdodos-blog#17-seeding-the-query-cache
Instead of: https://tanstack.com/query/latest/docs/framework/react/community/tkdodos-blog#17-seeding-the-query-cache

Destination urls in search are broken in Router docs

How to reproduce:

Go to https://tanstack.com/router/latest/docs/framework/react/overview
Use the search box in the sidebar to search for anything (e.g. LinkComponent)
Click on the first result
The href is https://tanstack.com/router/v1/docs/api/router/linkComponent which redirects back to the Overview page

The issue:

The framework param is not included in the urls in the search result.

The correct path is: https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent

Examples are now 'squished'

A styling change has been made recently that makes the examples significantly less readable

Here's a page that was left up from two nights ago (https://tanstack.com/table/v8/docs/examples/react/column-groups):

Here's the same page now:

I noticed this in Chrome, but replicated it in Safari, Firefox, and Edge.

If switch Framework when on page that doesn't exist on other framework, leads to 404

I feel like it should instead reroute to index for that section maybe?

e.g. https://tanstack.com/query/latest/docs/framework/react/comparison then switch to "Vue" goes to 404 and url of https://tanstack.com/query/latest/docs/framework/vue/comparison

FIREFOX Stackblitz Embeds in docs give "Unable to run Embedded Project" error on the preview pane

the specific details of the error are:

Unable to run Embedded Project

Looks like this project is being embedded without proper isolation headers.
Read more about browser support for embedded projects

`https://tanstack.com` Site root is throwing authentication errors

First, there is an Unknown error, that appears to have the below content embedded in the markup:

{
  "root": {
    "error": "AUTHENTICATION_REQUIRED",
    "message": "You should provide valid api key to perform this operation",
    "statusCode": 401
  }
}

The page then refreshes to show the Unexpected Server Error which appears to be a 500 with the below response:

The "examples" section doesn't load

Hi, I was reading the docs and noticed that the examples display an empty black rectangle :

The view source link leads to a 404 page. I looked into it and found out that it's missing /react/ in the path. So for example, the "simple" page should redirect to https://github.com/TanStack/query/tree/main/examples/react/simple instead of https://github.com/TanStack/query/tree/main/examples/simple. The sandbox URL has this issue as well.

Suggestion: Accept Brave Rewards

I spend a lot of time on your documentation, and I was wondering if you'd ever considered accepting Brave Rewards to finance the site.
I saw that mui.com accepts them, which is what made me want to ask the question here.

Thanks for all your hard work!

nozzle partnership card links to ag-grid partnership article

Issue as of a964d86:

tanstack.com/app/routes/index.tsx

Line 435 in a964d86

to="/blog/ag-grid-partnership"

I'm not sure the referenced article actually exists: https://github.com/TanStack/tanstack.com/tree/a964d864fcc7df99991122842631be4a8e879984/app/blog

Can probably just remove the "Learn More" if it doesn't.

[Docs] [Form] “Fix” the framework dropdown

The framework dropdown has no effect when viewing a “core” page. Since users land on the Overview page (which is a “core” page), the dropdown looks broken, and it looks like we don’t support Vue (users have to go to a “react” page first before switching to “Vue”).

The dropdown should work even when seeing a core page, it should at least refresh the navigation menu to replace the React pages with the Vue pages.

As a side note, since the Overview page shows some React code, it may make sense to create an Overview/React and an Overview/Vue page (like in the TanStack Query docs)

Relative links in table/v8/docs/guide don't work

All relative links in the doc pages for TanStack Table under Guide are being resolve relative to table/v8/docs instead to table/v8/docs/guide. This breaks navigation on most Guide files.

Examples:

No QueryClient set, use QueryClientProvider to set one

import React from 'react';
import {StatusBar} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import AppNavigator from './src/navigators';
import {theme} from './src/utils/theme';
import {navigationRef} from './src/utils/navigation';
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/integration/react';
import {store, persistor} from './src/redux/store';
import SplashScreen from 'react-native-splash-screen';
import {MenuProvider} from 'react-native-popup-menu';
import {PersistQueryClientProvider} from '@tanstack/react-query-persist-client';
import {queryClient, queryPersister} from './src/utils/react-query';

const App = () => {
  SplashScreen.hide();
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <PersistQueryClientProvider
          client={queryClient}
          persistOptions={queryPersister}>
          <MenuProvider>
            <NavigationContainer theme={theme} ref={navigationRef}>
              <StatusBar backgroundColor={'grey'} />
              <AppNavigator />
            </NavigationContainer>
          </MenuProvider>
        </PersistQueryClientProvider>
      </PersistGate>
    </Provider>
  );
};
export default App;

Using PersistQueryClientProvider

"@tanstack/react-query": "^4.2.1",
    "@tanstack/react-query-persist-client": "^4.2.1",

Originally posted by @uttu-316 in TanStack/query#4784 (comment)

Infinite redirection `/query/v3/docs/vue/overview`

If I'm navigating the Vue docs I could select the v3 as version, which ends in an endless loop of redirection:
https://tanstack.com/query/v3/docs/vue/overview -> https://tanstack.com/query/v3/docs/vue -> https://tanstack.com/query/v3/docs/vue/overview

[Docs] [Form] Regression: “Fix” the framework dropdown

This PR introduced the framework dropdown-issue for form and store again.

Malformed algolia search results

I think this is different from #138, but the algolia search results have a malformed URL.

For example, searching for useMutation:

https://tanstack.com/query/v4/docs/react/reference/useMutation <-- Algolia search result links to
https://tanstack.com/query/v4/docs/framework/react/reference/useMutation <-- Actual docs page found in sidebar

Going to the malformed URL without /framework/ just redirects to the docs homepage, which can be confusing for some folks. I don't think the fix is within this repo (as opposed to whatever Algolia has cached) but happy to open a PR if I'm wrong.

Scrollbar not using dark mode

The code sandbox is not working for TanStack Query

The code sandbox is not working for TanStack Query
Error:

Could not find dependency: '@tanstack/react-query' relative to '/src/index.js'

RSS feed for blog

Please add RSS feed to you blog at https://tanstack.com/blog

React Table Docs - Subscribe to Bytes block overlays Page Content on scrolling

STR:

open https://react-table.tanstack.com/docs/overview
scroll to bottom
observe SUBSCRIBE TO BYTES block on right clashes with ON THIS PAGE block

Screen Recording File

RECORDING1.mp4

TanStack Form Search is broken / Missing algolia config

Hello,

the TanStack Form DocSearch is broken right now. It seems like the configuration is not set in the docs/config.json file.

https://github.com/TanStack/form/blob/main/docs/config.json#L2-L6

"docSearch": {
  "appId": "",
  "apiKey": "",
  "indexName": "tanstack-form"
},

as opposed to TanStack Query for example:

"docSearch": {
  "appId": "20TOVD6LOE",
  "apiKey": "35bc6c51aa322700d1383e17c4f669f4",
  "indexName": "tanstackquery"
},

Website has Devtools

Is this Devtools intended?

Docs content width

Hey there,

excellent v4 update. I am just wondering whether there is a reason the new docs let the content area stretch the entire width? In my opinion it makes the content much harder to read compared to the previous docs, especially on larger screens.

See:

compared to:

which simply adds a max-width and justifies the content. (The overlapping navigation at the bottom is not caused by this. There just happened to be no text in the large version.)

Website broken

 client-DsFMF6EI.js:38 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at ml (client-DsFMF6EI.js:38:4807)
    at kh (client-DsFMF6EI.js:40:45522)
    at yh (client-DsFMF6EI.js:40:39714)
    at Vm (client-DsFMF6EI.js:40:39686)
    at mh (client-DsFMF6EI.js:40:34675)
    at T (client-DsFMF6EI.js:25:1561)
    at MessagePort.j (client-DsFMF6EI.js:25:1922)
ml @ client-DsFMF6EI.js:38
kh @ client-DsFMF6EI.js:40
yh @ client-DsFMF6EI.js:40
Vm @ client-DsFMF6EI.js:40
mh @ client-DsFMF6EI.js:40
T @ client-DsFMF6EI.js:25
j @ client-DsFMF6EI.js:25
client-DsFMF6EI.js:40 Uncaught Error: Minified React error #422; visit https://reactjs.org/docs/error-decoder.html?invariant=422 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Pm (client-DsFMF6EI.js:40:8432)
    at oh (client-DsFMF6EI.js:40:7373)
    at kh (client-DsFMF6EI.js:40:45725)
    at yh (client-DsFMF6EI.js:40:39714)
    at Vm (client-DsFMF6EI.js:40:39686)
    at mh (client-DsFMF6EI.js:40:34675)
    at T (client-DsFMF6EI.js:25:1561)
    at MessagePort.j (client-DsFMF6EI.js:25:1922)
Pm @ client-DsFMF6EI.js:40
oh @ client-DsFMF6EI.js:40
kh @ client-DsFMF6EI.js:40
yh @ client-DsFMF6EI.js:40
Vm @ client-DsFMF6EI.js:40
mh @ client-DsFMF6EI.js:40
T @ client-DsFMF6EI.js:25
j @ client-DsFMF6EI.js:25
client-DsFMF6EI.js:624 [ReactHydrationOverlay]: No `window.BUILDER_HYDRATION_OVERLAY` found. Make sure the initializer script is properly injected into your app's entry point.
(anonymous) @ client-DsFMF6EI.js:624
Co @ client-DsFMF6EI.js:40
Ir @ client-DsFMF6EI.js:40
cf @ client-DsFMF6EI.js:40
Kn @ client-DsFMF6EI.js:38
Wm @ client-DsFMF6EI.js:40
Zn @ client-DsFMF6EI.js:40
mh @ client-DsFMF6EI.js:40
T @ client-DsFMF6EI.js:25
j @ client-DsFMF6EI.js:25
client-DsFMF6EI.js:40 DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25322)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
wl @ client-DsFMF6EI.js:40
n.callback @ client-DsFMF6EI.js:40
Vc @ client-DsFMF6EI.js:38
af @ client-DsFMF6EI.js:40
_h @ client-DsFMF6EI.js:40
Fm @ client-DsFMF6EI.js:40
Wm @ client-DsFMF6EI.js:40
Zn @ client-DsFMF6EI.js:40
cf @ client-DsFMF6EI.js:40
Kn @ client-DsFMF6EI.js:38
Wm @ client-DsFMF6EI.js:40
Zn @ client-DsFMF6EI.js:40
mh @ client-DsFMF6EI.js:40
T @ client-DsFMF6EI.js:25
j @ client-DsFMF6EI.js:25
client-DsFMF6EI.js:38 Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25322)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
Kn @ client-DsFMF6EI.js:38
Wm @ client-DsFMF6EI.js:40
Zn @ client-DsFMF6EI.js:40
mh @ client-DsFMF6EI.js:40
T @ client-DsFMF6EI.js:25
j @ client-DsFMF6EI.js:25
client-DsFMF6EI.js:40 DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26048)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26503)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26503)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26503)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26696)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
wl @ client-DsFMF6EI.js:40
n.callback @ client-DsFMF6EI.js:40
Vc @ client-DsFMF6EI.js:38
af @ client-DsFMF6EI.js:40
_h @ client-DsFMF6EI.js:40
Fm @ client-DsFMF6EI.js:40
Wm @ client-DsFMF6EI.js:40
Zn @ client-DsFMF6EI.js:40
cf @ client-DsFMF6EI.js:40
Kn @ client-DsFMF6EI.js:38
(anonymous) @ client-DsFMF6EI.js:40
client-DsFMF6EI.js:38 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26048)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26503)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26503)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26503)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26696)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
Kn @ client-DsFMF6EI.js:38
(anonymous) @ client-DsFMF6EI.js:40
js?id=G-JMT1Z50SPS:633 Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')
    at b (js?id=G-JMT1Z50SPS:633:47)
    at js?id=G-JMT1Z50SPS:635:94
    at js?id=G-JMT1Z50SPS:635:269
    at js?id=G-JMT1Z50SPS:642:3
b @ js?id=G-JMT1Z50SPS:633
(anonymous) @ js?id=G-JMT1Z50SPS:635
(anonymous) @ js?id=G-JMT1Z50SPS:635
(anonymous) @ js?id=G-JMT1Z50SPS:642
content.js:284 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'children')
    at content.js:284:55
    at content.js:284:150
    at content.js:284:2674
    at content.js:284:2837
(anonymous) @ content.js:284
(anonymous) @ content.js:284
(anonymous) @ content.js:284
(anonymous) @ content.js:284
Show 4 more frames
Show less

Svelte codeblocks aren't supported

Hello, I'm the new maintainer of the svelte-query package. I've noticed that the svelte codeblocks are described as being "bash" even when specified as svelte, and also don't have great syntax highlighting. Is there any way to add in correct processing of svelte?

Error after reload site (when it was open since a moment)

```

Error while running in the development mode

I just forked and ran the development server.

Got this error on the very first run.

However, the CSS file was generated as I can see in the output, but I still can't access the localhost:3001

Also checked the routes folder, can't open any route mentioned there! :(

Is there a different endpoint? Am I missing something?

Old manual version redirects don't work as expected

Problem

The handleRedirects functions in table.$.tsx, router.$.tsx, query.$.tsx, and virtual.$.tsx do not work as expected, since a lower-level layout has priority on redirecting these paths.

For example, if you visit /table/v7/docs/api/useColumnOrder:

/table/v7/docs/api/useColumnOrder
/table/latest/docs/api/useColumnOrder #1st redirect
/table/latest/docs/introduction #2nd redirect

See discussion on #158

Potential Solution

The handleRedirects functions should probably be moved to the docs.$.tsx level, where they can run before the loadDocs function. Maybe the original functions could be moved to and exported from the project folders?

The TanStack Store React quick start page has too many redirects

Describe the bug

The link to "quick start" doesn't load anything, and if you open it in a new tab, eventually it resolves into an ERR_TOO_MANY_REDIRECTS error being thrown as per the screenshot attached.

Your Example Website or App

https://tanstack.com/store/latest/docs/framework/react/quick-start

Steps to Reproduce the Bug or Issue

Go to the TanStack store documentation overview page
Click "Quick Start" in the left hand menu
Wait...

Expected behavior

As a user I expected the quick start page to load.

Screenshots or Videos

Platform

OS: [e.g. macOS, Windows, Linux]
Browser: [e.g. Chrome, Safari, Firefox]
Version: [e.g. 91.1]

Additional context

No response

All the diff are breaking after adding shikiGetHighlighter

After the addition of shikiGetHighlighter in the commit, all the diffs are breaking, as diff is not directly supported by Shiki.

Due to the such changes, four pages are breaking with code changes. Here's the link to the code.

Why you have Tinder tracking on your website? It seems a little bit unrelated. But just my personal opinion.

Browser: Edge
OS: MacOs

Replace Prism code highlighter with Shiki

Problem

The Prism code highlighter is quite limited for our use case, where we are commonly rendering languages like Vue or Svelte. Even JSX highlighting is often poor - see below:

Shiki is a modern alternative which uses the same engine as VS Code, meaning that how it looks on the site will be how it looks in VS Code. Unfortunately, it is ESM-only which has been challenging to implement in Remix.

Potential Solution

rehype-pretty-code - uses Shiki, hooks into unified/remark/rehype ecosystem (used by react-markdown).

bug: incorrect OG image generation

Cannot confirm if this was the same behaviour prior to this commit, but currently, the opengraph images generated for the documentation routes are all pointed at Form.

See for Query: tanstack.com/query/latest/docs/framework/react/overview - checker

See for Router: tanstack.com/router/latest/docs/framework/react/overview - checker

tanstack / tanstack.com Goto Github PK

tanstack.com's Introduction

Welcome to TanStack.com!

Development

Editing and previewing the docs of TanStack projects locally

tanstack.com's People

Contributors

Stargazers

Watchers

Forkers

tanstack.com's Issues

System details

Console Logs

Problem

Proposal

Issue description

Attachements

Fix

Steps

Expected Behaviour

Actual behaviour

Nodes

How to reproduce:

The issue:

Problem

Potential Solution

Describe the bug

Your Example Website or App

Steps to Reproduce the Bug or Issue

Expected behavior

Screenshots or Videos

Platform

Additional context

Problem

Potential Solution

Recommend Projects

Recommend Topics

Recommend Org