Skip to content

Commit 1105e60

Browse files
authored
Merge branch 'v3-upgrade-guide' into v3-concepts
2 parents d8439df + 852468d commit 1105e60

182 files changed

Lines changed: 9309 additions & 1783 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

src/components/LeftSidebar/Sponsors.astro

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,9 @@ import UIString from '../UIString.astro';
44

55
<div dir="ltr" lang="en" class="sponsors">
66
<h2 class="sponsors-title"><UIString key="leftSidebar.sponsoredBy" /></h2>
7-
<a href="https://www.netlify.com/" aria-label="Netlify">
8-
<svg xmlns="http://www.w3.org/2000/svg" width="105" viewBox="0 0 256 105" aria-hidden="true">
9-
<path
10-
fill="#32E6E2"
11-
d="M58.5 103.8V77.4l.5-.5h6.6l.6.5v26.4l-.6.5H59l-.5-.5Zm0-76.9V.5L59 0h6.6l.6.5V27l-.6.5H59l-.5-.5ZM35.8 85.2h-1l-4.4-4.5v-.9l8.5-8.5h4.7l.7.6v4.8l-8.5 8.5Zm-5.4-60.5v-.9l4.5-4.5h.9l8.5 8.5v4.8l-.7.6H39l-8.5-8.5ZM.5 48.3H38l.5.6v6.6l-.5.5H.5l-.5-.5v-6.6l.5-.6Zm255 0 .5.6v6.6l-.6.5h-37.8l-.6-.5 2.8-6.6.5-.6h35.1Z"
12-
></path>
13-
<path
14-
d="M74.7 65.9H68l-.6-.6V50c0-2.7-1-4.9-4.4-5-1.7 0-3.6 0-5.7.2l-.3.3v20l-.6.5H50l-.6-.6V39l.6-.6h14.8c5.7 0 10.4 4.7 10.4 10.5v16.4l-.5.6Zm31.9-11.6-.6.6H89l-.6.5c0 1.1 1.1 4.4 5.5 4.4 1.7 0 3.3-.5 3.9-1.6l.5-.6h6.6l.6.6c-.6 3.3-3.3 8.2-11.6 8.2-9.3 0-13.7-6.6-13.7-14.3S84.6 38 93.4 38s13.2 6.6 13.2 14.2v2.2ZM98.3 49c0-.6-.5-4.4-5-4.4s-4.9 3.8-4.9 4.4l.6.5h8.8l.5-.5Zm23.7 8.7c0 1.1.5 1.7 1.6 1.7h5l.5.5v5.5l-.6.6h-4.9c-5 0-9.3-2.2-9.3-8.3v-12l-.6-.6H110l-.6-.5V39l.6-.6h3.8l.6-.5v-5l.5-.5h6.6l.5.5v5l.6.5h6l.6.6v5.5l-.6.5h-6l-.6.6v12Zm20.3 8.3h-6.6l-.6-.6V28l.6-.6h6.6l.5.6v37.3l-.5.6ZM157 34h-6.6l-.5-.5V28l.5-.6h6.6l.6.6v5.5l-.6.5Zm0 31.9h-6.6l-.5-.6V39l.5-.6h6.6l.6.6v26.3l-.6.6Zm25.8-38v5.6l-.5.5h-5c-1 0-1.6.6-1.6 1.7v2.2l.5.5h5.5l.6.6v5.5l-.6.5h-5.5l-.5.6v19.7l-.6.6h-6.5l-.6-.6V45.5l-.5-.5h-3.9l-.5-.5V39l.5-.6h3.9l.5-.5v-2.2c0-6 4.4-8.3 9.4-8.3h4.9l.5.6Zm20.3 38.5c-2.2 5.5-4.3 8.8-12 8.8h-2.8l-.5-.5v-5.5l.5-.6h2.8c2.7 0 3.3-.5 3.8-2.2V66l-8.8-21.4V39l.6-.6h5l.5.6 6.5 18.7h.6L206 39l.5-.6h5l.5.6v5.5l-8.8 22Z"
15-
></path>
7+
<a href="https://vercel.com/" aria-label="Vercel">
8+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 284 65" width="95" aria-hidden="true">
9+
<path d="M141.7 16.3c-11 0-19 7.1-19 18s9 18 20 18c6.7 0 12.5-2.7 16.2-7.1l-7.7-4.5c-2 2.2-5 3.5-8.5 3.5-4.8 0-8.9-2.5-10.4-6.5h28c.3-1 .4-2.2.4-3.5 0-10.8-8-18-19-18zm-9.5 14.4c1.3-4 4.7-6.4 9.5-6.4s8.2 2.5 9.4 6.4h-18.9zm117.2-14.4c-11 0-19 7.1-19 18s9 18 20 18a21 21 0 0 0 16.2-7.1l-7.7-4.5c-2 2.2-5 3.5-8.5 3.5-4.8 0-8.9-2.5-10.4-6.5h28c.2-1 .4-2.2.4-3.5 0-10.8-8-18-19-18zm-9.5 14.4c1.3-4 4.7-6.4 9.5-6.4s8.2 2.5 9.4 6.4H240zm-39 3.6c0 6 3.9 10 10 10 4.1 0 7.2-2 8.8-5l7.7 4.5a18.5 18.5 0 0 1-16.5 8.5c-11 0-19-7.2-19-18s8-18 19-18c7.3 0 13.3 3.1 16.5 8.4l-7.7 4.5c-1.6-3-4.7-5-8.8-5-6 0-10 4-10 10zm82.5-29v46h-9v-46h9zM37.6.3l37 64H.5l37-64zm92.4 5-27.7 48-27.8-48H85l17.4 30 17.3-30H130zm58.9 12v9.6c-1-.3-2-.5-3.2-.5-5.8 0-10 4-10 10v14.9h-9v-34h9v9.1c0-5 5.9-9.1 13.2-9.1z"/>
1610
</svg>
1711
</a>
1812
<a href="https://www.storyblok.com/" aria-label="Storyblok">

src/content/docs/ar/getting-started.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
8181

8282
## انضم إلى مجتمعنا
8383

84-
انضم إلى مجتمع [أسترو على ديسكورد](https://astro.build/chat/) للمشاركة والحصول على المساعدة من مجتمع نشط وودود!
84+
انضم إلى مجتمع [أسترو على ديسكورد](https://astro.build/chat) للمشاركة والحصول على المساعدة من مجتمع نشط وودود!
8585

8686
💬 رحّب وعرف بنفسك على قناة `#general`!
8787

src/content/docs/de/getting-started.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ Sieh dir Beispiele zu einigen grundlegenden Konzepten und Strukturen einer Astro
9292

9393
## Werde Teil unserer Community
9494

95-
Tritt dem [Astro-Discord](https://astro.build/chat/) bei, um deine Erfahrungen und Fragen rund um Astro mit unserer aktiven, freundlichen Community zu teilen!
95+
Tritt dem [Astro-Discord](https://astro.build/chat) bei, um deine Erfahrungen und Fragen rund um Astro mit unserer aktiven, freundlichen Community zu teilen!
9696

9797
💬 Stell dich im Kanal `#general` vor!
9898

src/content/docs/en/concepts/why-astro.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,6 @@ One of our favorite sayings is: **opt-in to complexity.** We designed Astro to r
7575

7676
**Astro is an all-in-one web framework that comes with everything you need to build a website.** Astro includes a component syntax, file-based routing, asset handling, a build process, bundling, optimizations, data-fetching, and more. You can build great websites without ever reaching outside of Astro's core feature set.
7777

78-
If you need more control, you can extend Astro with over [100+ integrations](https://astro.build/integrations/) like [React](https://www.npmjs.com/package/@astrojs/react), [Svelte](https://www.npmjs.com/package/@astrojs/svelte), [Vue](https://www.npmjs.com/package/@astrojs/vue), [Tailwind CSS](https://www.npmjs.com/package/@astrojs/tailwind), [MDX](https://www.npmjs.com/package/@astrojs/mdx), [image optimizations](https://www.npmjs.com/package/@astrojs/image), and more. [Connect your favorite CMS](/en/guides/cms/) or [deploy to your favorite host](/en/guides/deploy/) with just a single command.
78+
If you need more control, you can extend Astro with over [100+ integrations](https://astro.build/integrations/) like [React](https://www.npmjs.com/package/@astrojs/react), [Svelte](https://www.npmjs.com/package/@astrojs/svelte), [Vue](https://www.npmjs.com/package/@astrojs/vue), [Tailwind CSS](https://www.npmjs.com/package/@astrojs/tailwind), [MDX](https://www.npmjs.com/package/@astrojs/mdx), and more. [Connect your favorite CMS](/en/guides/cms/) or [deploy to your favorite host](/en/guides/deploy/) with just a single command.
7979

8080
Astro is UI-agnostic, meaning you can **Bring Your Own UI Framework (BYOF)**. React, Preact, Solid, Svelte, Vue, and Lit are all officially supported in Astro. You can even mix and match different frameworks on the same page, making future migrations easier and preventing project lock-in to a single framework.

src/content/docs/en/core-concepts/endpoints.mdx

Lines changed: 57 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -10,33 +10,30 @@ Astro lets you create custom endpoints to serve any kind of data. You can use th
1010
In statically-generated sites, your custom endpoints are called at build time to produce static files. If you opt in to [SSR](/en/guides/server-side-rendering/) mode, custom endpoints turn into live server endpoints that are called on request. Static and SSR endpoints are defined similarly, but SSR endpoints support additional features.
1111

1212
## Static File Endpoints
13+
1314
To create a custom endpoint, add a `.js` or `.ts` file to the `/pages` directory. The `.js` or `.ts` extension will be removed during the build process, so the name of the file should include the extension of the data you want to create. For example, `src/pages/data.json.ts` will build a `/data.json` endpoint.
1415

15-
Endpoints export a `get` function (optionally `async`) that receives a [context object](/en/reference/api-reference/#endpoint-context) with properties similar to the `Astro` global. It returns an object with a `body`, and Astro will call this at build time and use the contents of the body to generate the file.
16+
Endpoints export a `GET` function (optionally `async`) that receives a [context object](/en/reference/api-reference/#endpoint-context) with properties similar to the `Astro` global. Here, it returns an Response object with a `name` and `url`, and Astro will call this at build time and use the contents of the body to generate the file.
1617

1718
```ts
1819
// Example: src/pages/builtwith.json.ts
1920
// Outputs: /builtwith.json
20-
export async function get({params, request}) {
21-
return {
22-
body: JSON.stringify({
21+
export async function GET({params, request}) {
22+
return new Response(
23+
JSON.stringify({
2324
name: 'Astro',
24-
url: 'https://astro.build/',
25-
}),
26-
};
25+
url: 'https://astro.build/'
26+
})
27+
)
2728
}
2829
```
2930

30-
The return object can also have an `encoding` property. It can be any valid [`BufferEncoding`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/bdd02508ddb5eebcf701fdb8ffd6e84eabf47885/types/node/buffer.d.ts#L169) accepted by Node.js' `fs.writeFile` method. For example, to produce a binary png image:
31+
Since Astro v3.0, the returned `Response` object doesn't have to include the `encoding` property anymore. For example, to produce a binary png image:
3132

32-
```ts title="src/pages/astro-logo.png.ts" {6}
33-
export async function get({ params, request }) {
33+
```ts title="src/pages/astro-logo.png.ts" {3}
34+
export async function GET({ params, request }) {
3435
const response = await fetch("https://docs.astro.build/assets/full-logo-light.png");
35-
const buffer = Buffer.from(await response.arrayBuffer());
36-
return {
37-
body: buffer,
38-
encoding: 'binary',
39-
};
36+
return new Response(await response.arrayBuffer());
4037
}
4138
```
4239

@@ -45,8 +42,7 @@ You can also type your endpoint functions using the `APIRoute` type:
4542
```ts
4643
import type { APIRoute } from 'astro';
4744

48-
export const get: APIRoute = async ({ params, request }) => {
49-
...
45+
export const GET: APIRoute = async ({ params, request }) => {...}
5046
```
5147

5248
### `params` and Dynamic routing
@@ -56,45 +52,47 @@ Endpoints support the same [dynamic routing](/en/core-concepts/routing/#dynamic-
5652
```ts title="src/pages/api/[id].json.ts"
5753
import type { APIRoute } from 'astro';
5854

59-
const usernames = ["Sarah", "Chris", "Dan"]
55+
const usernames = ["Sarah", "Chris", "Yan", "Elian"]
6056

61-
export const get: APIRoute = ({ params, request }) => {
57+
export const GET: APIRoute = ({ params, request }) => {
6258
const id = params.id;
63-
return {
64-
body: JSON.stringify({
59+
return new Response(
60+
JSON.stringify({
6561
name: usernames[id]
6662
})
67-
}
68-
};
63+
)
64+
}
6965

70-
export function getStaticPaths () {
66+
export function getStaticPaths() {
7167
return [
7268
{ params: { id: "0"} },
7369
{ params: { id: "1"} },
7470
{ params: { id: "2"} },
71+
{ params: { id: "3"} }
7572
]
7673
}
7774
```
7875

79-
This will generate three JSON endpoints at build time: `/api/0.json`, `/api/1.json`, `/api/2.json`. Dynamic routing with endpoints works the same as it does with pages, but because the endpoint is a function and not a component, [props](/en/reference/api-reference/#data-passing-with-props) aren't supported.
76+
This will generate four JSON endpoints at build time: `/api/0.json`, `/api/1.json`, `/api/2.json` and `/api/3.json`. Dynamic routing with endpoints works the same as it does with pages, but because the endpoint is a function and not a component, [props](/en/reference/api-reference/#data-passing-with-props) aren't supported.
8077

8178
### `request`
79+
8280
All endpoints receive a `request` property, but in static mode, you only have access to `request.url`. This returns the full URL of the current endpoint and works the same as [Astro.request.url](/en/reference/api-reference/#astrorequest) does for pages.
8381

8482
```ts title="src/pages/request-path.json.ts"
8583
import type { APIRoute } from 'astro';
8684

87-
export const get: APIRoute = ({ params, request }) => {
88-
return {
89-
body: JSON.stringify({
85+
export const GET: APIRoute = ({ params, request }) => {
86+
return new Response(JSON.stringify({
9087
path: new URL(request.url).pathname
9188
})
92-
};
89+
)
9390
}
9491
```
9592

9693
## Server Endpoints (API Routes)
97-
Everything described in the static file endpoints section can also be used in SSR mode: files can export a `get` function which receives a [context object](/en/reference/api-reference/#endpoint-context) with properties similar to the `Astro` global.
94+
95+
Everything described in the static file endpoints section can also be used in SSR mode: files can export a `GET` function which receives a [context object](/en/reference/api-reference/#endpoint-context) with properties similar to the `Astro` global.
9896

9997
But, unlike in `static` mode, when you configure `server` mode, the endpoints will be built when they are requested. This unlocks new features that are unavailable at build time, and allows you to build API routes that listen for requests and securely execute code on the server at runtime.
10098

@@ -109,7 +107,7 @@ Server endpoints can access `params` without exporting `getStaticPaths`, and the
109107
```js title="src/pages/[id].json.js"
110108
import { getProduct } from '../db';
111109

112-
export async function get({ params }) {
110+
export async function GET({ params }) {
113111
const id = params.id;
114112
const product = await getProduct(id);
115113

@@ -120,12 +118,14 @@ export async function get({ params }) {
120118
});
121119
}
122120

123-
return new Response(JSON.stringify(product), {
124-
status: 200,
125-
headers: {
126-
"Content-Type": "application/json"
121+
return new Response(
122+
JSON.stringify(product), {
123+
status: 200,
124+
headers: {
125+
"Content-Type": "application/json"
126+
}
127127
}
128-
});
128+
);
129129
}
130130
```
131131

@@ -134,7 +134,7 @@ This will respond to any request that matches the dynamic route. For example, if
134134
In SSR mode, certain providers require the `Content-Type` header to return an image. In this case, use a `Response` object to specify a `headers` property. For example, to produce a binary `.png` image:
135135

136136
```ts title="src/pages/astro-logo.png.ts"
137-
export async function get({ params, request }) {
137+
export async function GET({ params, request }) {
138138
const response = await fetch("https://docs.astro.build/assets/full-logo-light.png");
139139
const buffer = Buffer.from(await response.arrayBuffer());
140140
return new Response(buffer, {
@@ -144,55 +144,49 @@ export async function get({ params, request }) {
144144
```
145145

146146
### HTTP methods
147-
In addition to the `get` function, you can export a function with the name of any [HTTP method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). When a request comes in, Astro will check the method and call the corresponding function.
148147

149-
You can also export an `all` function to match any method that doesn't have a corresponding exported function. If there is a request with no matching method, it will redirect to your site's [404 page](/en/core-concepts/astro-pages/#custom-404-error-page).
148+
In addition to the `GET` function, you can export a function with the name of any [HTTP method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). When a request comes in, Astro will check the method and call the corresponding function.
150149

151-
:::note
152-
Since `delete` is a reserved word in JavaScript, export a `del` function to match the delete method.
153-
:::
150+
You can also export an `ALL` function to match any method that doesn't have a corresponding exported function. If there is a request with no matching method, it will redirect to your site's [404 page](/en/core-concepts/astro-pages/#custom-404-error-page).
154151

155152
```ts title="src/pages/methods.json.ts"
156-
export const get: APIRoute = ({ params, request }) => {
157-
return {
158-
body: JSON.stringify({
153+
export const GET: APIRoute = ({ params, request }) => {
154+
return new Response(JSON.stringify({
159155
message: "This was a GET!"
160156
})
161-
}
162-
};
157+
)
158+
}
163159

164-
export const post: APIRoute = ({ request }) => {
165-
return {
166-
body: JSON.stringify({
160+
export const POST: APIRoute = ({ request }) => {
161+
return new Response(JSON.stringify({
167162
message: "This was a POST!"
168163
})
169-
}
164+
)
170165
}
171166

172-
export const del: APIRoute = ({ request }) => {
173-
return {
174-
body: JSON.stringify({
167+
export const DELETE: APIRoute = ({ request }) => {
168+
return new Response(JSON.stringify({
175169
message: "This was a DELETE!"
176170
})
177-
}
171+
)
178172
}
179173

180-
export const all: APIRoute = ({ request }) => {
181-
return {
182-
body: JSON.stringify({
174+
export const ALL: APIRoute = ({ request }) => {
175+
return new Resonse(JSON.stringify({
183176
message: `This was a ${request.method}!`
184177
})
185-
}
178+
)
186179
}
187180
```
188181

189182
<RecipeLinks slugs={["en/recipes/captcha", "en/recipes/build-forms-api" ]}/>
190183

191-
### `request`
184+
### `request`
185+
192186
In SSR mode, the `request` property returns a fully usable [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) object that refers to the current request. This allows you to accept data and check headers:
193187

194188
```ts title="src/pages/test-post.json.ts"
195-
export const post: APIRoute = async ({ request }) => {
189+
export const POST: APIRoute = async ({ request }) => {
196190
if (request.headers.get("Content-Type") === "application/json") {
197191
const body = await request.json();
198192
const name = body.name;
@@ -207,12 +201,13 @@ export const post: APIRoute = async ({ request }) => {
207201
```
208202

209203
### Redirects
204+
210205
The endpoint context exports a `redirect()` utility similar to `Astro.redirect`:
211206

212207
```js title="src/pages/links/[id].js" {14}
213208
import { getLinkUrl } from '../db';
214209

215-
export async function get({ params, redirect }) {
210+
export async function GET({ params, redirect }) {
216211
const { id } = params;
217212
const link = await getLinkUrl(id);
218213

src/content/docs/en/core-concepts/project-structure.mdx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,6 @@ Some files (like Astro components) are not even sent to the browser as written b
6666
While this guide describes some popular conventions used in the Astro community, the only directories reserved by Astro are `src/pages/` and `src/content/`. You are free to rename and reorganize any other directories in a way that works best for you.
6767
:::
6868

69-
### `src/assets`
70-
71-
The [`src/assets`](/en/guides/assets/) directory is the recommended folder to use for storing assets (e.g. images) that are processed by Astro. This is not required, and this is not a special reserved folder.
72-
7369
### `src/components`
7470

7571
**Components** are reusable units of code for your HTML pages. These could be [Astro components](/en/core-concepts/astro-components/), or [UI framework components](/en/core-concepts/framework-components/) like React or Vue. It is common to group and organize all of your project components together in this folder.

src/content/docs/en/getting-started.mdx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ import TranslatorList from '~/components/TranslatorList.astro'
88
import ContributorList from '~/components/ContributorList.astro'
99
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
1010

11+
{/* TODO: Replace with 3.0 tip on 30 August 2023. */}
12+
:::tip[Hello Astronauts!]
13+
Our new docs theme [Starlight is on Product Hunt today](https://www.producthunt.com/posts/starlight-by-astro).
14+
:::
15+
1116
<h2>What is Astro?</h2>
1217

1318
Astro is an **all-in-one** **web framework** for building **fast,** **content-focused** websites.
@@ -88,7 +93,7 @@ See examples of some of the key concepts and patterns of an Astro site!
8893

8994
## Join our Community
9095

91-
Join us in the [Astro Discord](https://astro.build/chat/) to share with and get help from an active, friendly community!
96+
Join us in the [Astro Discord](https://astro.build/chat) to share with and get help from an active, friendly community!
9297

9398
💬 Say hi in our `#general` channel!
9499

0 commit comments

Comments
 (0)