@@ -170,7 +203,7 @@ To add SSR hydration and avoid that loading state, simply render the
`
` hydration helper in the body of your root layout **before**
the children.
-```tsx copy filename="app/layout.tsx"
+```tsx {{title: "app/layout.tsx" }}
import { NextSSRPlugin } from "@uploadthing/react/next-ssr-plugin";
import { extractRouterConfig } from "uploadthing/server";
@@ -200,13 +233,12 @@ export default function RootLayout({
}
```
-
-
---
### 🎉 You're Done!
-Want to customize the components? Check out the ["Theming" page](/theming)
+Want to customize the components? Check out the
+["Theming" page](/concepts/theming)
Want to make your own components? Check out our
-[useUploadThing hook](/api-reference/react#useuploadthing)
+[useUploadThing hook](/api-reference/react#use-upload-thing)
diff --git a/docs/src/pages/getting-started/astro.mdx b/docs/src/app/(docs)/getting-started/astro/page.mdx
similarity index 72%
rename from docs/src/pages/getting-started/astro.mdx
rename to docs/src/app/(docs)/getting-started/astro/page.mdx
index 0be4e0ff79..647e2426a5 100644
--- a/docs/src/pages/getting-started/astro.mdx
+++ b/docs/src/app/(docs)/getting-started/astro/page.mdx
@@ -1,7 +1,10 @@
-import { Callout, Steps, Tab, Tabs } from "nextra-theme-docs";
+import { docsMetadata } from "@/lib/utils";
-import EnvSetup from "./_shared/env-setup.mdx";
-import TailwindSetup from "./_shared/tailwind-setup.mdx";
+export const metadata = docsMetadata({
+ title: "Astro Setup",
+ description: "Learn how to set up an Astro project with UploadThing",
+ category: "Getting Started",
+});
# Astro Setup
@@ -9,16 +12,33 @@ You can use Astro with any of the frontend frameworks we support. This guide
will walk you through setting it up using React, but the steps will be near
identical for other frameworks too.
-
+
Check out a full example
[here](https://github.com/pingdotgg/uploadthing/tree/main/examples/minimal-astro-react)
-
+
+
+## Setting up your environment
+
+### Install the packages
-
+```bash npm2yarn
+npm install uploadthing @uploadthing/react
+```
+
+### Add env variables
+
+```bash
+UPLOADTHING_TOKEN=... # A token for interacting with the SDK
+```
+
+
+ If you don't already have a uploadthing secret key, [sign
+ up](https://uploadthing.com/sign-in) and create one from the
+ [dashboard!](https://uploadthing.com/dashboard)
+
## Set Up A FileRouter
-
### Creating your first FileRoute
All files uploaded to uploadthing are associated with a FileRoute. The following
@@ -31,9 +51,9 @@ of a FileRoute similar to an endpoint, it has:
- `onUploadComplete` callback for when uploads are completed
To get full insight into what you can do with the FileRoutes, please refer to
-the [File Router API](/api-reference/server#file-routes).
+the [File Router API](/file-routes).
-```ts copy filename="src/server/uploadthing.ts"
+```ts {{title: "src/server/uploadthing.ts" }}
import { createUploadthing, type FileRouter } from "uploadthing/server";
const f = createUploadthing();
@@ -71,54 +91,36 @@ export type OurFileRouter = typeof ourFileRouter;
### Create a Astro API route using the FileRouter
-
+
File path here doesn't matter, you can serve this from any route. We recommend
serving it from `/api/uploadthing`.
-
+
-```ts copy filename="src/pages/api/uploadthing.ts"
+```ts {{ title: "src/pages/api/uploadthing.ts" }}
import { createRouteHandler } from "uploadthing/server";
import { ourFileRouter } from "~/server/uploadthing";
// Export routes for Next App Router
-export const { GET, POST } = createRouteHandler({
+const handlers = createRouteHandler({
router: ourFileRouter,
config: {
- uploadthingSecret: import.meta.env.UPLOADTHING_SECRET,
+ token: import.meta.env.UPLOADTHING_TOKEN,
},
});
+export { handlers as GET, handlers as POST };
```
> See configuration options in
-> [server API reference](/api-reference/server#createroutehandler)
-
-### Add UploadThing's Styles
-
-
-
-
-
-
- Include our CSS file in the root layout to make sure the components look right!
-
- ```astro copy filename="src/layouts/root.astro"
- ---
- import "@uploadthing/react/styles.css";
- // ...
- ---
- ```
-
-
-
+> [server API reference](/api-reference/server#create-route-handler)
-### Create The UploadThing Components (Recommended)
+## Create The UploadThing Components
We provide components to make uploading easier. We **highly recommend
re-exporting them with the types assigned**, but you CAN import the components
individually from `@uploadthing/react` instead.
-```ts copy filename="src/utils/uploadthing.ts"
+```ts {{ title: "src/utils/uploadthing.ts" }}
import {
generateUploadButton,
generateUploadDropzone,
@@ -130,9 +132,40 @@ export const UploadButton = generateUploadButton();
export const UploadDropzone = generateUploadDropzone();
```
+### Add UploadThing's Styles
+
+
+
+ Wrap your Tailwind config with the `withUt` helper. You can learn more about our
+ Tailwind helper in the ["Theming" page](/concepts/theming#theming-with-tailwind-css)
+
+ ```tsx
+ import { withUt } from "uploadthing/tw";
+
+ export default withUt({
+ // Your existing Tailwind config
+ content: ["./src/**/*.{ts,tsx,mdx}"],
+ ...
+ });
+ ```
+
+
+
+ Include our CSS file in the root layout to make sure the components look right!
+
+ ```astro
+ ---
+ import "@uploadthing/react/styles.css";
+ // ...
+ ---
+ ```
+
+
+
+
### Mount A Button And Upload!
-```tsx copy filename="src/components/image-uploader.tsx"
+```tsx {{title: "src/components/image-uploader.tsx" }}
import { UploadButton } from "~/utils/uploadthing";
export function ImageUploader() {
@@ -153,12 +186,12 @@ export function ImageUploader() {
}
```
-
+
Don't forget to add the `client:load` directive when mounting your component
in an Astro island.
-
+
-```astro copy filename="src/pages/index.astro"
+```astro {{ title: "src/pages/index.astro" }}
---
import Layout from "~/layouts/root.astro"
import { ImageUploader } from "~/components/image-uploader";
@@ -168,9 +201,9 @@ import { ImageUploader } from "~/components/image-uploader";
```
-### (Optional) Rendering with SSR
+## Improving SSR {{ label: '💡 Optional' }}
-import { WithoutSSR, WithSSR } from "../../components/ssr-diff";
+import { WithoutSSR, WithSSR } from "@/components/SSRDiff";
@@ -181,7 +214,7 @@ UploadThing needs to get info from your server to get permissions info. Normally
this means a loading state, but you can inject the router config from
server-rendered Astro components:
-```astro copy filename="src/components/uploadthing-ssr.astro"
+```astro {{ title: "src/components/uploadthing-ssr.astro" }}
---
import { extractRouterConfig } from "uploadthing/server"
import { uploadRouter } from "~/server/uploadthing";
@@ -206,7 +239,7 @@ const routerConfig = extractRouterConfig(uploadRouter);
Then render this component in your layout:
-```astro copy filename="src/layouts/root.astro"
+```astro {{ title: "src/layouts/root.astro" }}
---
import UploadThingSSR from "~/components/uploadthing-ssr.astro";
---
@@ -221,13 +254,12 @@ import UploadThingSSR from "~/components/uploadthing-ssr.astro";
+ 
+ 
+ {props.authors.length < 2 && (
+