Fix the framework picker for form #133

fulopkovacs · 2024-01-01T13:10:19Z

Two issues has been fixed for the framework picker of the Form project:

It was not working on core pages, like Overview, which is the first page the users see when they open the docs (I thought that the framework picker is not working at all because of this for a long time).
If the user selected a framework and then viewed a core doc page, it went back to React, regardless of the previously selected framework.

❌ main

framework-selector-bad.mp4

✅ This PR

framework-selector-good.mp4

vercel · 2024-01-01T13:10:23Z

@fulopkovacs is attempting to deploy a commit to the Tanstack Team on Vercel.

A member of the Team first needs to authorize it.

fulopkovacs · 2024-01-01T13:20:41Z

@crutchcorn There are a couple of ideas, that that we could add to this PR:

Make these changes for Store too (at first glance, the structure of Form and Store look very similar)
Drop the framework string from the routes of the docs pages:
- "/docs/latest/framework/react/quick-start" -> "/docs/latest/react/quick-start"
- this would make the docs more consistent (the Query doc routes already look like this)
- I think it's technically feasible, because we know all the names of the frameworks from the config.json file in the project's repo (I haven't thought deeply about this problem yet though)

Ofc these are just suggestions, changing routes are scary, plus I know much less about the projects than you do. 🤣 Wdyt?

crutchcorn · 2024-01-01T16:17:25Z

@fulopkovacs let's do #1 for sure. I'm less sure about #2 - @tannerlinsley what do you think?

fulopkovacs · 2024-01-01T18:35:51Z

app/routes/store.$version.docs.framework.$framework.examples._index.tsx

I think examples wasn't supposed to be a dynamic segment in this route, because store.$version.docs.framework.$framework.$examples._index.tsx matches /store/latest/docs/framework/react/quick-start ($examples: "quick-start") and all the other framework-related doc pages.

fulopkovacs · 2024-01-01T18:45:13Z

app/routes/form.$version.docs.framework.$framework.$.tsx

 import { repo, getBranch } from '~/routes/form'
 import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
 import { seo } from '~/utils/seo'
 import { useLoaderData, useParams } from '@remix-run/react'
 import { Doc } from '~/components/Doc'
 import { loadDocs } from '~/utils/docs'
+import { fetchRepoFile } from '~/utils/documents.server'

 export const loader = async (context: LoaderFunctionArgs) => {


The body of the loader function is basically identical in this file and app/routes/store.$version.docs.framework.$framework.$.tsx. If we want to follow the DRY practices, we can extract the shared logic to a helper function.

vercel · 2024-01-09T14:03:24Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tanstack-com	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 15, 2024 10:43pm

crutchcorn

@fulopkovacs I noticed that we've seemingly fixed this by making the core docs duplicate through every framework.

core/quick-start.md -> routes/react/quick-start.md, routes/vue/quick-start.md, etc

This is a clever solution, but unfortunately one we can't move forward with. That would break our doc's SEO pretty bad, as there wouldn't be a canonical URL for core docs anymore

Instead, let's use some other kind of tool (maybe localstorage + a sidebar refactor?) to solve this issue.

fulopkovacs · 2024-01-11T22:10:27Z

@fulopkovacs I noticed that we've seemingly fixed this by making the core docs duplicate through every framework.
core/quick-start.md -> routes/react/quick-start.md, routes/vue/quick-start.md, etc
This is a clever solution, but unfortunately one we can't move forward with. That would break our doc's SEO pretty bad, as there wouldn't be a canonical URL for core docs anymore

Instead, let's use some other kind of tool (maybe localstorage + a sidebar refactor?) to solve this

Sure, I can explore other options. We can use URLSearchParams if we want to keep using SSR, or go down the client-first localStorage route, I'll check which one requires less changes!

crutchcorn · 2024-01-11T22:11:57Z

You're awesome, thank you for your help and receptiveness to feedback. Keep up the amazing work! 🔥

fulopkovacs · 2024-01-11T22:54:23Z

Ok, I went with localStorage for cleaner URLs. It's pretty late here, so this implementation might have mistakes, idk... I'll review it tomorrow and request a review from you when I'm ready!

fulopkovacs · 2024-01-12T22:07:03Z

app/routes/form.$version.docs.$.tsx

@@ -17,7 +17,7 @@ export const loader = async (context: LoaderFunctionArgs) => {
  })
 }

-export const meta: MetaFunction = ({ data }) => {
+export const meta: MetaFunction<typeof loader> = ({ data }) => {


I fixed the type errors around the meta functions in the files I worked on. Most of the remaining errors of this kind are getting fixed in #135.

fulopkovacs · 2024-01-12T22:28:55Z

app/routes/store.$version.docs.framework.$framework.examples._index.tsx

This fixes #129 (comment)

This is awesome, thank you!

crutchcorn · 2024-01-13T04:58:31Z

app/routes/form.$version.docs.framework.$framework.$.tsx

  return seo({
-    title: `${data?.title} | TanStack Form Docs`,
+    title: `${data?.title} | TanStack Query Docs`,


Heads up, this needs to be changed back to Form

crutchcorn · 2024-01-13T04:59:47Z

app/routes/form.tsx

  const framework =
-    params.framework || localStorage.getItem('framework') || 'react'
+    params.framework || localStorage.getItem(formLocalStorageKey) || 'react'


Is there any reason we couldn't just keep framework as the key? It would theoretically allow us to preserve which framework is selected across multiple TanStack projects

Yeah, no specific reason. I just assumed it's not a feature but a bug! I'm changing it back to framework.

crutchcorn · 2024-01-13T05:00:06Z

app/routes/store.$version.docs.framework.$framework.examples._index.tsx

This is awesome, thank you!

crutchcorn · 2024-01-13T05:00:34Z

app/routes/store.tsx

@@ -118,7 +118,7 @@ export const useReactStoreDocsConfig = () => {
  const params = useParams()
  const version = params.version!
  const framework =
-    params.framework || localStorage.getItem('framework') || 'react'
+    params.framework || localStorage.getItem(storeLocalStorageKey) || 'react'


Just checking on this again - could we keep it as framework rather than framework-store and framework-form?

…ependent doc pages of the Form project

…mework is selected

crutchcorn

This is a great fix, good work!

fulopkovacs commented Jan 1, 2024

View reviewed changes

crutchcorn mentioned this pull request Jan 9, 2024

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

Closed

vercel bot deployed to Preview January 9, 2024 14:04 View deployment

crutchcorn requested changes Jan 11, 2024

View reviewed changes

fulopkovacs commented Jan 12, 2024

View reviewed changes

fulopkovacs requested a review from crutchcorn January 12, 2024 22:08

fulopkovacs mentioned this pull request Jan 12, 2024

The TanStack Store React quick start page has too many redirects #129

Closed

fulopkovacs commented Jan 12, 2024

View reviewed changes

crutchcorn requested changes Jan 13, 2024

View reviewed changes

vercel bot deployed to Preview January 13, 2024 05:01 View deployment

fulopkovacs added 11 commits January 13, 2024 15:06

Make it possible to select a framework when viewing the framework-ind…

25149c1

…ependent doc pages of the Form project

Do not default to React for the core docs of the Form, if another fra…

d3e3660

…mework is selected

Fix the framework picker for the Store project too

3f94fec

Minor styling and wording updates

fb77b91

Use urlSearchParams to view the selected framework

83bae65

Use local storage

34ec875

Hopefully final touches

8e3e568

Revert some redundant changes

fdf0bec

Fix an incorrect page title

9d5488e

Save the selected framework under the same key both in form and store

d0ca90e

Typo

10d0d15

fulopkovacs force-pushed the fix-the-framework-picker-for-form branch from 3c87c8b to 10d0d15 Compare January 13, 2024 14:06

Fix a Prettier warning

2e6efb0

fulopkovacs requested a review from crutchcorn January 13, 2024 14:12

vercel bot deployed to Preview January 13, 2024 15:01 View deployment

fix: dropdown picker no longer breaks

9c3047d

vercel bot deployed to Preview January 15, 2024 22:43 View deployment

crutchcorn approved these changes Jan 15, 2024

View reviewed changes

crutchcorn merged commit 15f2363 into TanStack:main Jan 15, 2024
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix the framework picker for form #133

Fix the framework picker for form #133

fulopkovacs commented Jan 1, 2024 •

edited

Loading

vercel bot commented Jan 1, 2024

fulopkovacs commented Jan 1, 2024

crutchcorn commented Jan 1, 2024

fulopkovacs Jan 1, 2024

fulopkovacs Jan 1, 2024

vercel bot commented Jan 9, 2024 •

edited

Loading

crutchcorn left a comment

fulopkovacs commented Jan 11, 2024

crutchcorn commented Jan 11, 2024

fulopkovacs commented Jan 11, 2024

fulopkovacs Jan 12, 2024

fulopkovacs Jan 12, 2024

crutchcorn Jan 13, 2024

crutchcorn Jan 13, 2024

crutchcorn Jan 13, 2024

fulopkovacs Jan 13, 2024

crutchcorn Jan 13, 2024

crutchcorn Jan 13, 2024

crutchcorn left a comment

Fix the framework picker for form #133

Fix the framework picker for form #133

Conversation

fulopkovacs commented Jan 1, 2024 • edited Loading

vercel bot commented Jan 1, 2024

fulopkovacs commented Jan 1, 2024

crutchcorn commented Jan 1, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vercel bot commented Jan 9, 2024 • edited Loading

crutchcorn left a comment

Choose a reason for hiding this comment

fulopkovacs commented Jan 11, 2024

crutchcorn commented Jan 11, 2024

fulopkovacs commented Jan 11, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

crutchcorn left a comment

Choose a reason for hiding this comment

fulopkovacs commented Jan 1, 2024 •

edited

Loading

vercel bot commented Jan 9, 2024 •

edited

Loading