docs: Add getting started for tanstack/start #973
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
WalkthroughThis pull request introduces a new guide for setting up a Tanstack/Start project with UploadThing, detailing necessary installations, configurations, and component usage. It includes the creation of a FileRouter for file management, an API route for uploads, and helper functions for generating upload components. Additionally, it updates the site configuration to include a navigation link for the new documentation. Changes
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
LGTM
Should we also have a minimal-tanstack-start example @markflorkowski ?
Not a bad idea, wouldn’t block on it though! |
Yea can be its own thing for sure |
|
|
||
| const handlers = createRouteHandler({ | ||
| router: ourFileRouter, | ||
| config: { token: process.env.UPLOADTHING_TOKEN }, |
There was a problem hiding this comment.
this should not be required? Or do Vinxi treeshake it away if you don't reference it explicitely? if so a comment regarding that might be good info
There was a problem hiding this comment.
Nope, just checked, not required. Mb, removed it in f3ba60a.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (3)
docs/src/app/(docs)/getting-started/tanstack-start/page.mdx (3)
25-29: Update warning message for consistencyThe PR objectives mention updating the warning to refer to an UploadThing token instead of a secret key. However, the current warning still uses the term "token". Consider updating the warning message to explicitly mention the transition from "secret key" to "token" for clarity.
For example:
<Warning> If you don't already have an UploadThing token (previously known as secret key), [sign up](https://uploadthing.com/sign-in) and create one from the [dashboard!](https://uploadthing.com/dashboard) </Warning>This change would align with the PR objectives and provide context for users familiar with the previous terminology.
125-129: Consider exporting both UploadButton and UploadDropzoneThe current code only exports the
UploadButtoncomponent. Consider exporting bothUploadButtonandUploadDropzoneto provide users with more flexibility. You can achieve this by using a named export:export { UploadButton, UploadDropzone };This change would allow users to import either or both components as needed.
131-157: Styles section is comprehensive, with a minor suggestionThe instructions for adding UploadThing's styles are clear and cover both Tailwind and non-Tailwind setups effectively. The use of tabs for different setups is user-friendly.
Minor suggestion:
In line 39, consider adding a period after "etc" to follow American English conventions: "Permitted types ["image", "video", etc.]"Tools
LanguageTool
[duplication] ~133-~133: Possible typo: you repeated a word
Context: ...on; ``` ### Add UploadThing's Styles <Tabs tabs={["Tailwind", "Not Tailwind"]}> ...(ENGLISH_WORD_REPEAT_RULE)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- docs/src/app/(docs)/getting-started/tanstack-start/page.mdx (1 hunks)
Additional context used
LanguageTool
docs/src/app/(docs)/getting-started/tanstack-start/page.mdx
[style] ~39-~39: In American English, abbreviations like “etc.” require a period.
Context: ...: - Permitted types ["image", "video", etc] - Max file size - (Optional) `middlewa...(ETC_PERIOD)
[duplication] ~133-~133: Possible typo: you repeated a word
Context: ...on; ``` ### Add UploadThing's Styles <Tabs tabs={["Tailwind", "Not Tailwind"]}> ...(ENGLISH_WORD_REPEAT_RULE)
Additional comments not posted (5)
docs/src/app/(docs)/getting-started/tanstack-start/page.mdx (5)
1-7: Metadata looks good!The metadata for this documentation page is well-structured and provides clear information about the content.
31-79: FileRouter setup looks great!The explanation of the FileRoute concept and the code example for creating a FileRouter are clear and comprehensive. The export of the FileRouter type is a good practice for type safety.
Tools
LanguageTool
[style] ~39-~39: In American English, abbreviations like “etc.” require a period.
Context: ...: - Permitted types ["image", "video", etc] - Max file size - (Optional) `middlewa...(ETC_PERIOD)
81-111: API route creation is well-documentedThe instructions and code example for creating an API route are clear and concise. The warning about configuring the API entry handler (lines 88-92) is a valuable addition, as it addresses a common oversight in other "getting started" guides for Tanstack/Start. This aligns well with the PR objectives.
159-183: Final section provides a clear example and next stepsThe code example for mounting an UploadButton in a Home component is concise and easy to understand. The conclusion with links to further customization and component creation provides valuable next steps for users.
1-183: Overall, excellent documentation for Tanstack/Start setup with UploadThingThis documentation provides a comprehensive guide for setting up a Tanstack/Start project with UploadThing. It covers all necessary steps from package installation to mounting a functional upload button. The content is well-structured, easy to follow, and includes valuable warnings and tips.
Key strengths:
- Clear instructions for each step of the setup process.
- Inclusion of code examples for better understanding.
- Coverage of both Tailwind and non-Tailwind setups.
- Addition of the warning about configuring the API entry handler, which addresses a common oversight.
The minor suggestions provided in the review comments will further enhance the quality and consistency of the documentation. Great job on creating this "getting started" guide!
Tools
LanguageTool
[style] ~39-~39: In American English, abbreviations like “etc.” require a period.
Context: ...: - Permitted types ["image", "video", etc] - Max file size - (Optional) `middlewa...(ETC_PERIOD)
[duplication] ~133-~133: Possible typo: you repeated a word
Context: ...on; ``` ### Add UploadThing's Styles <Tabs tabs={["Tailwind", "Not Tailwind"]}> ...(ENGLISH_WORD_REPEAT_RULE)
|
LGTM. Do you wanna follow up with adding an example? No pressure ofc |
I'll take a look at the examples tomorrow. |
|
One more minor thing I noticed to late: #979 |
Added getting started page for
@tanstack/start. Most of the copy is copy-pasted from other pages with code snippet changes to reflect@tanstack/start. There are two changes to consider:app/api.ts. For more information, please refer to the @tanstack/start docs.". This is Tanstack/Start thing, unrelated to uploadthing. But I think it's useful to include this warning, as setting up API entry handler is not covered in most "getting started with Tanstack/Start" I've seen.Example of Tanstack/Start with UT: GitHub, StackBlitz
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Documentation