diff --git a/.github/labeler.yml b/.github/labeler.yml
index 008cebbb22fafe..5bb8a6b564e71b 100644
--- a/.github/labeler.yml
+++ b/.github/labeler.yml
@@ -3,5 +3,8 @@
'🚨 action':
- .github/workflows/**
+# Note: The "any" logic requires ANY file of the PR to match ALL (!) of the globs in the array,
+# so to match files in multiple different paths, we also need multiple "any" arrays.
i18n:
- any: ['src/content/docs/**/*.mdx', '!src/content/docs/en/**/*']
+- any: ['src/i18n/**/*', '!src/i18n/en/*']
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 15978a4322b25a..2b3caa87da75ea 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -30,18 +30,6 @@ jobs:
- name: Run Check
run: pnpm run check
- tsc:
- name: Check for type issues with tsc
- runs-on: ubuntu-latest
- steps:
- - name: Checkout
- uses: actions/checkout@v3
-
- - name: Install Tools & Dependencies
- uses: ./.github/actions/install
-
- - name: Run Check
- run: pnpm run tsc
eslint:
name: Check for code issues with ESLint
runs-on: ubuntu-latest
diff --git a/.gitpod.yml b/.gitpod.yml
index 41467bd6c5ac17..c38198e94576e6 100644
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -2,5 +2,5 @@ tasks:
- init: pnpm install
command: pnpm run dev
ports:
- - port: 3000
+ - port: 4321
onOpen: open-browser
diff --git a/.nvmrc b/.nvmrc
index e6db45a90794ef..617bcf916bf1ad 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-18.14.0
+18.14.1
diff --git a/astro.config.ts b/astro.config.ts
index c524bfe6a8e114..b474e51442c727 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -29,6 +29,8 @@ export default defineConfig({
astroDocsExpressiveCode(),
mdx(),
],
+ scopedStyleStrategy: 'where',
+ compressHTML: false,
markdown: {
// Override with our own config
smartypants: false,
diff --git a/contributor-guides/writing-and-style-guide.md b/contributor-guides/writing-and-style-guide.md
index 4a57d8a22841ad..a80b3f930b8ff0 100644
--- a/contributor-guides/writing-and-style-guide.md
+++ b/contributor-guides/writing-and-style-guide.md
@@ -14,7 +14,7 @@ All readers can benefit from clear, straightforward writing, but this can be par
- have cognitive, learning or attention difficulties.
- come from a non-traditional development background.
-We aim for **clear** and **helpful** documentation that serves the reader above all else!
+We aim for **clear** and **helpful** documentation that serves the reader above all else!
Usually this means choosing:
@@ -59,7 +59,7 @@ Whenever possible, give the reader a direct instruction:
e.g. Type the command...
-Do not use _"Let's..."_ or _"Next, we will..."_. You are not sitting there with your reader! (This also means you will never need the words _we_, _us_, and _our_. If you see them, rephrase!)
+Do not use *"Let's..."* or *"Next, we will..."*. You are not sitting there with your reader! (This also means you will never need the words *we*, *us*, and *our*. If you see them, rephrase!)
If you must address the reader, it is OK to use "you" and "your". Especially for emphasis in very important steps where something could go wrong:
@@ -85,12 +85,11 @@ Here is an example edit we made to one of our own recipes to illustrate the diff
> 1.
> 2. ...
-
### Opinionated Instructions
-Sometimes you will need to give an instruction where the reader has options. You want to illustrate the example with the specific choice you made, but you also want to make it clear that other decisions are acceptable.
+Sometimes you will need to give an instruction where the reader has options. You want to illustrate the example with the specific choice you made, but you also want to make it clear that other decisions are acceptable.
-In this case, try to separate the instruction from the opinion. First, give the action to take with a more general description. Then state the opinionated choice that your example uses. Your reader will be able to first process what you are doing and then will see the choice you have made. They can still follow your instruction, making a choice that works for their own project.
+In this case, try to separate the instruction from the opinion. First, give the action to take with a more general description. Then state the opinionated choice that your example uses. Your reader will be able to first process what you are doing and then will see the choice you have made. They can still follow your instruction, making a choice that works for their own project.
This can be easier to follow (and perhaps more reassuring!) than a statement that gives multiple options. This is also usually easier to write since you do not have to remind the reader that this file is from *your* example, and may not appear in their project.
@@ -105,7 +104,6 @@ This can be easier to follow (and perhaps more reassuring!) than a statement tha
## Custom Components
@@ -161,7 +159,7 @@ By default, the badge uses a muted colour scheme to blend in. It also has an acc
### Since Component
-As features are added to Astro, it can be helpful to document _when_ they were added. This allows users to easily see if the version of Astro (or other packages) they are running supports a specific feature as described in the docs.
+As features are added to Astro, it can be helpful to document *when* they were added. This allows users to easily see if the version of Astro (or other packages) they are running supports a specific feature as described in the docs.
You can use the `` component to display this information in a standardized way.
@@ -277,9 +275,10 @@ Inside `MyCustomTabs.jsx`, import the Tabs component and create one `` com
---
import Tabs from './Tabs';
---
-
+
```
+
To create your custom tab component, follow the pattern below using a `` with a named slot for each tab and panel to be created. Note that you must define your tab names here (e.g. Preact, React, Solid, Svelte, Vue), but the content for each panel will be written when your custom component is imported and used in a Markdown page, as in the previous `` example.
```jsx
@@ -287,18 +286,18 @@ To create your custom tab component, follow the pattern below using a `
- Preact
- React
- Solid
- Svelte
- Vue
-
-
-
-
-
-
+
+ Preact
+ React
+ Solid
+ Svelte
+ Vue
+
+
+
+
+
+
```
@@ -318,7 +317,7 @@ import RecipeLinks from "~/components/RecipeLinks.astro";
## Lists vs. Headings
-Both lists and headings are used in our docs for readability. We will often start by using `
` to list related items.
+Both lists and headings are used in our docs for readability. We will often start by using `
` to list related items.
But, when individual line items become large, span multiple paragraphs, or contain too many `` terms affecting readability, then we will change to section headings.
@@ -339,33 +338,36 @@ Do use headings to break up text into organized sections! Many readers prefer to
## Examples (e.g. examples)
Current practice is to use the words "for example" in full within the text of a sentence, but (e.g. Netlify, Vercel) inside a parenthetical so as to not take the reader out of the flow the sentence.
-
-> For example, when passing props . . .
-> If you store your Astro project in an online Git provider (e.g. GitHub, GitLab), you can . . .
+> For example, when passing props . . .
+
+> If you store your Astro project in an online Git provider (e.g. GitHub, GitLab), you can . . .
## Code Samples
-We take great pride in our code samples, but they require a little extra work to write!
+We take great pride in our code samples, but they require a little extra work to write!
Don't worry! We'll help you out in a PR if your code authoring needs some adjustment before merging. But, you can make use of all our features below and preview them locally to make sure your code looks the way you want.
If you are **editing existing code samples**, then please make sure to preview your updated code sample! Update any necessary syntax such as line highlighting or title (file name).
-If you are **adding new code samples**, you have the option of adding a file name (usually recommended!) to be displayed as a title. You can also highlight individual words, phrases, or entire lines in regular or "diff" (red/green) style.
+If you are **adding new code samples**, you have the option of adding a file name (usually recommended!) to be displayed as a title. You can also highlight individual words, phrases, or entire lines in regular or "diff" (red/green) style.
**All extra code styling is written on the opening line of the code block, immediately after the language.**
Here are two examples of what our code snippets look like written in Markdown, just so you can see what it looks like in action. Syntax explanations follow.
-#### Example 1
+#### Example 1
+
- Use the file name as a title
- highlight rows 9 and 10
+
``````markdown
```astro title="src/pages/nested-components.astro" {9-10}
``````
-#### Example 2
+#### Example 2
+
- use the file name as a title (alt method)
- apply "+ diff" styling (green backround) to any occurrence of ``
- highlight any occurrence of `{props.title}` and `{props.social}`
@@ -379,9 +381,10 @@ Here are two examples of what our code snippets look like written in Markdown, j
Most code should include a sample file name so that we give the reader not only copy-pastable code, but also provide the file into which that code should be pasted.
-`title="src/pages/index.astro"`
+`title="src/pages/index.astro"`
Alternatively, write the file name as a code comment in a separate line. Write the file name of `.astro` files immediately after the opening `---`
+
``````markdown
```astro
---
@@ -403,7 +406,6 @@ Use Curly braces to highlight (default), or show "diff" style (+/-) "inserted" o
- del={2} - Shows "diff" style (-) at line 2
- ins={7-9} - Shows "diff" style (+) lines 7-9
-
### Text Highlighting
Use quotation marks to highlight (default), or assign red/green "diff" style background colors for individual words and phrases.
@@ -419,14 +421,12 @@ Regular expressions are supported within slashes `/ /`. See a handy [tool for co
- /{frontmatter.(title|description)}/ - Highlight all instances of `{frontmatter.title}` and `{frontmatter.description}`
> ***Note***
+>
> - del="
" - Use `\` to escape quotation marks and other special characters in the search string
>
>- del='\
' - Use single quotes to make it easier to match double quotes
-
-
-
-### Don't destructure props
+### Don't destructure props
The following prop syntax is relevant to all component frameworks we support:
diff --git a/netlify.toml b/netlify.toml
index e4174d26a996db..495f7a389d3196 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -107,3 +107,7 @@
from = "/:lang/*"
to = "/:lang/404/"
status = 404
+
+ [[redirects]]
+ from = "/en/concepts/mpa-vs-spa"
+ to = "/en/concepts/why-astro"
diff --git a/src/content/docs/de/concepts/mpa-vs-spa.mdx b/old-translations/de/concepts/mpa-vs-spa.mdx
similarity index 100%
rename from src/content/docs/de/concepts/mpa-vs-spa.mdx
rename to old-translations/de/concepts/mpa-vs-spa.mdx
diff --git a/old-translations/de/core-concepts/endpoints.mdx b/old-translations/de/core-concepts/endpoints.mdx
new file mode 100644
index 00000000000000..4f5eb0bc952673
--- /dev/null
+++ b/old-translations/de/core-concepts/endpoints.mdx
@@ -0,0 +1,278 @@
+---
+title: Endpunkte
+description: Erfahre, wie du Endpunkte erstellen kannst, die jegliche Form von Daten bereitstellen.
+---
+
+Mit Astro kannst du eigene projektspezifische Endpunkte erstellen, die jegliche Form von Daten bereitstellen können. Du kannst damit Bilder generieren, ein RSS-Dokument bereitstellen oder sie als API-Route verwenden, um eine komplette API für deine Seite zu erstellen.
+
+Auf statisch generierten Websites werden projektspezifische Endpunkte zum Erstellungszeitpunkt ausgeführt, um statische Dateien zu erzeugen. Wenn du hingegen den optionalen [SSR](/de/guides/server-side-rendering/)-Modus aktivierst, verwandeln projektspezifische Endpunkte sich in API-Endpunkte, die in Echtzeit zur Behandlung jeder eingehenden Anfrage ausgeführt werden. Statische und SSR-Endpunkte werden auf ähnliche Weise definiert, aber SSR-Endpunkte bieten mehr Optionen.
+
+## Endpunkte für statische Dateien
+
+Um einen Endpunkt zu erstellen, füge eine Datei mit der Endung `.js` oder `.ts` dem `/pages`-Verzeichnis hinzu. Da die Erweiterung `.js` oder `.ts` während des Erstellungsprozesses entfernt wird, sollte der Dateiname zusätzlich eine Dateiendung enthalten, die zum Format der ausgegebenen Daten passt. So erzeugt z.B. die Datei `src/pages/data.json.ts` den Endpunkt `/data.json`.
+
+Endpunkte exportieren eine `get`-Funktion (optional `async`), welche ein [Context-Objekt](/de/reference/api-reference/#endpunkt-kontext) als Parameter übergeben bekommt, dessen Inhalte ähnlich zur globalen `Astro`-Variable sind. Ihr Rückgabewert ist ein Objekt mit einer `body`-Eigenschaft. Astro ruft diese Funktion zum Erstellungszeitpunkt auf und verwendet den Inhalt der `body`-Eigenschaft, um die Ausgabedatei zu erzeugen.
+
+```ts
+// Beispiel: src/pages/builtwith.json.ts
+// Ausgabe: /builtwith.json
+export async function get({params, request}) {
+ return {
+ body: JSON.stringify({
+ name: 'Astro',
+ url: 'https://astro.build/',
+ }),
+ };
+}
+```
+
+Das Rückgabe-Objekt kann auch eine `encoding`-Eigenschaft enthalten. Sie kann jedes gültige [`BufferEncoding`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/bdd02508ddb5eebcf701fdb8ffd6e84eabf47885/types/node/buffer.d.ts#L169) enthalten, welches von der Node.js-Methode `fs.writeFile` unterstützt wird. Hier ein Beispiel, wie du ein binäres PNG-Bild erzeugen kannst:
+
+```ts title="src/pages/astro-logo.png.ts" {6}
+export async function get({ params, request }) {
+ const response = await fetch("https://astro.build/assets/press/full-logo-light.png");
+ const buffer = Buffer.from(await response.arrayBuffer());
+ return {
+ body: buffer,
+ encoding: 'binary',
+ };
+}
+```
+
+Du kannst deine Endpunkt-Funktion auch mit dem `APIRoute`-Type typisieren:
+
+```ts
+import type { APIRoute } from 'astro';
+
+export const get: APIRoute = async function get ({params, request}) {
+...
+```
+
+## `params` und dynamische Routen
+
+Endpunkte unterstützen das gleiche [dynamische Routing](/de/core-concepts/routing/#dynamische-routen) wie Seiten. Benenne dazu deine Datei mit einem Parameternamen, der in eckige Klammern eingeschlossen ist, und exportiere eine Funktion mit dem Namen [`getStaticPaths()`](/de/reference/api-reference/#getstaticpaths). Dann kannst du auf den Parameter mittels der `params`-Eigenschaft zugreifen, die die Funktion des Endpunkts entgegennimmt:
+
+```ts title="src/pages/[id].json.ts"
+import type { APIRoute } from 'astro';
+
+const usernames = ["Sarah", "Chris", "Dan"]
+
+export const get: APIRoute = ({ params, request }) => {
+ const id = params.id;
+ return {
+ body: JSON.stringify({
+ name: usernames[id]
+ })
+ }
+};
+
+export function getStaticPaths () {
+ return [
+ { params: { id: "0"} },
+ { params: { id: "1"} },
+ { params: { id: "2"} },
+ ]
+}
+```
+
+Dies generiert drei JSON-Endpunkte zum Erstellungszeitpunkt: `/api/1.json`, `/api/2.json`, `/api/3.json`. Dynamisches Routing funktioniert bei Endpunkten genau wie bei normalen Seiten, aber da der Endpunkt eine Funktion statt einer Komponente ist, werden [props](/de/reference/api-reference/#datenübergabe-mit-props) nicht unterstützt.
+
+### `request`
+
+Alle Endpunkte nehmen eine `request`-Eigenschaft entgegen, allerdings hast du im statischen Modus nur Zugriff auf `request.url`. Diese enthält die komplette URL des aktuellen Endpunkts und funktioniert genauso wie [Astro.request.url](/de/reference/api-reference/#astrorequest) bei Seiten.
+
+```ts title="src/pages/request-path.json.ts"
+import type { APIRoute } from 'astro';
+
+export const get: APIRoute = ({ params, request }) => {
+ return {
+ body: JSON.stringify({
+ path: new URL(request.url).pathname
+ })
+ };
+}
+```
+
+## Server-Endpunkte (API-Routen)
+
+Alles, was bei den Endpunkten für statische Dateien beschrieben wurde, kann auch im SSR-Modus verwendet werden: Dateien können eine `get`-Funktion exportieren, die ein [Context-Objekt](/de/reference/api-reference/#endpunkt-kontext) mit ähnlichen Eigenschaften wie die globale `Astro`-Variable entgegennimmt.
+
+Im Gegensatz zum `static`-Modus werden allerdings im `server`-Modus deine Endpunkte erst dann erzeugt, wenn eine Anfrage für sie empfangen wird. Dies ermöglicht den Zugriff auf neue Funktionen, die zum Erstellungszeitpunkt nicht verfügbar sind, und erlaubt es dir, API-Routen zu erstellen, die auf Anfragen warten und ihren Code zur Laufzeit in einer sicheren Server-Umgebung ausführen.
+
+:::note
+Stelle sicher, dass du [SSR aktivierst](/de/guides/server-side-rendering/#ssr-in-deinem-projekt-aktivieren), bevor du diese Beispiele ausprobierst.
+:::
+
+Server-Endpunkte können auf `params` zugreifen, ohne `getStaticPaths` zu exportieren, und sie können ein [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)-Objekt zurückgeben, welches dir ermöglicht, Statuscodes und Header zu setzen:
+
+```js title="src/pages/[id].json.js"
+import { getProduct } from '../db';
+
+export async function get({ params }) {
+ const id = params.id;
+ const product = await getProduct(id);
+
+ if (!product) {
+ return new Response(null, {
+ status: 404,
+ statusText: 'Not found'
+ });
+ }
+
+ return new Response(JSON.stringify(product), {
+ status: 200,
+ headers: {
+ "Content-Type": "application/json"
+ }
+ });
+}
+```
+
+Diese Funktion wird jede Anfrage beantworten, deren Adresse zur dynamischen Route passt. Wenn wir zum Beispiel zu `/helmet.json` navigieren, wird `params.id` den Wert `helmet` haben. Wenn in der Produktdatenbank `helmet` existiert, wird der Endpunkt ein `Response`-Objekt erzeugen, um mit JSON und einem erfolgreichen [HTTP-Statuscode](https://developer.mozilla.org/en-US/docs/Web/API/Response/status) zu antworten. Ansonsten wird ein anderes `Response`-Objekt erzeugt, um mit einem `404`-Fehler zu antworten.
+
+### HTTP-Methoden
+
+Zusätzlich zur `get`-Funktion kannst du Funktionen mit den Namen aller möglichen [HTTP-Methoden](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) exportieren. Wenn eine Anfrage ankommt, wird Astro die Methode prüfen und die entsprechende Funktion aufrufen.
+
+Du kannst auch eine Funktion `all` exportieren, die alle Methoden abdeckt, die keine eigene Funktion haben. Falls eine Anfrage eintrifft, die zu keiner exportierten Methode passt, wird diese mit einer Weiterleitung zur [404-Seite](/de/core-concepts/astro-pages/#benutzerdefinierte-404-fehlerseite) beantwortet.
+
+:::note
+Da `delete` in JavaScript ein reserviertes Wort ist, exportiere eine `del`-Funktion, um die `delete`-Methode abzubilden.
+:::
+
+```ts title="src/pages/methods.json.ts"
+export const get: APIRoute = ({ params, request }) => {
+ return {
+ body: JSON.stringify({
+ message: "Das war ein GET!"
+ })
+ }
+};
+
+export const post: APIRoute = ({ request }) => {
+ return {
+ body: JSON.stringify({
+ message: "Das war ein POST!"
+ })
+ }
+}
+
+export const del: APIRoute = ({ request }) => {
+ return {
+ body: JSON.stringify({
+ message: "Das war ein DELETE!"
+ })
+ }
+}
+
+export const all: APIRoute = ({ request }) => {
+ return {
+ body: JSON.stringify({
+ message: `Das war ein ${request.method}!`
+ })
+ }
+}
+```
+
+### `request`
+
+Im `SSR`-Modus gibt die `request`-Eigenschaft ein vollwertiges [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)-Objekt zurück, welches die aktuelle Anfrage enthält. Das erlaubt dir, Daten entgegenzunehmen und Header zu überprüfen.
+
+```ts title="src/pages/test-post.json.ts"
+export const post: APIRoute = async ({ request }) => {
+ if (request.headers.get("Content-Type") === "application/json") {
+ const body = await request.json();
+ const name = body.name;
+ return new Response(JSON.stringify({
+ message: "Dein Name war: " + name
+ }), {
+ status: 200
+ })
+ }
+ return new Response(null, { status: 400 });
+}
+```
+
+### Umleitungen
+
+Der Endpunkt-Kontext exportiert eine `redirect()`-Hilfsfunktion, ähnlich wie `Astro.redirect`:
+
+```js title="src/pages/links/[id].js" {14}
+import { getLinkUrl } from '../db';
+
+export async function get({ params, redirect }) {
+ const { id } = params;
+ const link = await getLinkUrl(id);
+
+ if (!link) {
+ return new Response(null, {
+ status: 404,
+ statusText: 'Not found'
+ });
+ }
+
+ return redirect(link, 307);
+}
+```
+
+### Beispiel: Ein Captcha verifizieren
+
+Server-Endpunkte können als REST-API-Endpunkte genutzt werden, um Funktionen wie Authentisierung, Datenbankzugriffe oder Verifizierungen durchzuführen, ohne sensible Informationen an den Client zu übermitteln.
+
+Im Beispiel unten wird eine API-Route genutzt, um ein Google reCAPTCHA v3 zu verifizieren, ohne das Kennwort an Clients herauszugeben.
+
+Auf dem Server implementieren wir eine POST-Methode, die die Daten von reCAPTCHA entgegennimmt. Hier können wir sicher geschützte Passwörter definieren oder Umgebungsvariablen auslesen.
+
+```js title="src/pages/recaptcha.js"
+export async function post({ request }) {
+ const data = await request.json();
+
+ const recaptchaURL = 'https://www.google.com/recaptcha/api/siteverify';
+ const requestBody = {
+ secret: "YOUR_SITE_SECRET_KEY", // Dies kann eine Umgebungsvariable sein
+ response: data.recaptcha // Dieses Token wird vom Client gesendet
+ };
+
+ const response = await fetch(recaptchaURL, {
+ method: "POST",
+ body: JSON.stringify(requestBody)
+ });
+
+ const responseData = await response.json();
+
+ return new Response(JSON.stringify(responseData), { status: 200 });
+}
+```
+
+Danach können wir unseren Endpunkt mittels `fetch` aus einem Client-Skript heraus aufrufen:
+
+```astro title="src/pages/index.astro"
+
+