diff --git a/src/components/starlight/Sidebar.astro b/src/components/starlight/Sidebar.astro index f5f46176acc8c..af91be8f0da47 100644 --- a/src/components/starlight/Sidebar.astro +++ b/src/components/starlight/Sidebar.astro @@ -45,7 +45,8 @@ function assertGroups(sidebar: SidebarEntry[]): asserts sidebar is Group[] { assertGroups(sidebar); /** Convert a group label to an `id` we can use to identify tab panels. */ -const makeId = (label: string) => label.toLowerCase().replaceAll(/\s+/g, '-'); +// The id is prefixed to avoid clashing with existing heading IDs on the page. +const makeId = (label: string) => '__tab-' + label.toLowerCase().replaceAll(/\s+/g, '-'); /** Get the icon for a group. Update the icon names in the array to change the icons associated with a group. */ const getIcon = (index: number) => diff --git a/src/content/docs/de/basics/project-structure.mdx b/src/content/docs/de/basics/project-structure.mdx index 857ceec127206..41a6b02797a63 100644 --- a/src/content/docs/de/basics/project-structure.mdx +++ b/src/content/docs/de/basics/project-structure.mdx @@ -1,6 +1,6 @@ --- title: Projektstruktur -description: Erfahre, wie du ein Projekt mit Astro strukturierst. +description: Eine Einführung in die grundlegende Dateistruktur eines Astro-Projekts. i18nReady: true --- @@ -14,7 +14,7 @@ Hier erfährst du, wie ein Astro-Projekt grundsätzlich organisiert ist, und wel Astro nutzt einige fest vorgegebene Verzeichnisse, um dein Projekt zu strukturieren. Das Stammverzeichnis jedes Astro-Projekts sollte die folgenden Verzeichnisse und Dateien enthalten: -- `src/*` - Der Quellcode deines Projekts (Komponenten, Seiten, Stile, usw.) +- `src/*` - Der Quellcode deines Projekts (Komponenten, Seiten, Stile, Bilder, usw.) - `public/*` - Nicht zu verarbeitende Inhalte, die kein Quellcode sind (Schriftarten, Symbole usw.) - `package.json` - Die Projektdatei deines Paketmanagers - `astro.config.mjs` - Eine Astro-Konfigurationsdatei (wird empfohlen) @@ -28,17 +28,19 @@ Ein typischer Astro-Verzeichnisbaum könnte so aussehen: - public/ - robots.txt - favicon.svg - - social-image.png + - mein-lebenslauf.pdf - src/ + - blog/ + - post1.md + - post2.md + - post3.md - components/ - Header.astro - Button.jsx - - content/ - - config.ts - - posts/ - - post1.md - - post2.md - - post3.md + - images/ + - image1.jpg + - image2.jpg + - image3.jpg - layouts/ - PostLayout.astro - pages/ @@ -49,6 +51,7 @@ Ein typischer Astro-Verzeichnisbaum könnte so aussehen: - rss.xml.js - styles/ - global.css + - content.config.ts - astro.config.mjs - package.json - tsconfig.json @@ -64,13 +67,14 @@ Im `src/`-Verzeichnis befindet sich der Großteil deines Projektquellcodes. Dies - [UI-Framework-Komponenten (React usw.)](/de/guides/framework-components/) - [Stile (CSS, Sass)](/de/guides/styling/) - [Markdown](/de/guides/markdown-content/) +- [Bilder, die von Astro optimiert und bearbeitet werden](/de/guides/images/) Astro verarbeitet, optimiert und bündelt deine Dateien in `src/`, um die endgültige Website zu erstellen, die an den Browser gesendet wird. Im Gegensatz zum statischen `public/`-Verzeichnis werden deine `src/`-Dateien von Astro für dich verarbeitet und optimiert: Einige Dateien (z.B. Astro-Komponenten) werden gar nicht so an den Browser gesendet, wie du sie geschrieben hast, sondern stattdessen in statisches HTML gerendert. Andere Dateien (z.B. CSS) werden zwar an den Browser gesendet, können aber zur Leistungsverbesserung vorher optimiert oder mit anderen CSS-Dateien gebündelt werden. :::tip -Dieser Leitfaden beschreibt zwar einige gängige Konventionen, die in der Astro-Community verwendet werden, aber die einzigen Verzeichnisse, die von Astro reserviert sind, sind `src/pages/` und `src/content/`. Es steht dir frei, alle anderen Verzeichnisse so umzubenennen und umzugestalten, wie es für dich am besten ist. +Dieser Leitfaden beschreibt zwar einige gängige Konventionen, die in der Astro-Community verwendet werden, aber das einzigen Verzeichnis, welches von Astro reserviert ist, ist `src/pages/`. Es steht dir frei, alle anderen Verzeichnisse so umzubenennen und umzugestalten, wie es für dich am besten ist. ::: ### `src/pages` @@ -87,10 +91,6 @@ Seitenrouten werden für deine Website erstellt, indem du [unterstützte Dateity Diese Vorgehensweise ist in Astro-Projekten üblich, aber nicht zwingend erforderlich. Du kannst deine Komponenten gerne auch anders organisieren! -### `src/content` - -Das Verzeichnis `src/content/` ist für die Speicherung von [Inhaltssammlungen](/de/guides/content-collections/) und einer Konfigurationsdatei reserviert. Andere Dateien sind in diesem Verzeichnis nicht erlaubt. - ### `src/layouts` [Layouts](/de/basics/layouts/) sind Astro-Komponenten, welche die UI-Struktur definieren, die von einer oder mehreren [Seiten](/de/basics/astro-pages/) gemeinsam genutzt wird. @@ -105,7 +105,7 @@ Es ist eine übliche Vorgehensweise, deine CSS- oder Sass-Stile im Verzeichnis ` Das Verzeichnis `public/` ist für Dateien und Inhalte vorgesehen, die Astro während des Buildvorgangs nicht verarbeiten muss. Die Dateien in diesem Ordner werden unverändert in den Build-Ordner kopiert, und dann wird deine Website gebaut. -Dieses Verhalten macht `public/` ideal für verbreitete Inhalte wie Bilder und Schriftarten, sowie für besondere Dateien wie `robots.txt` und `manifest.webmanifest`. +Dieses Verhalten macht `public/` ideal für allgemeine Inhalte, die keine Bearbeitung benötigen, wie z.B. einige Bilder und Schriftarten oder spezielle Dateien wie `robots.txt` und `manifest.webmanifest`. Du kannst zwar auch CSS- und JavaScript-Dateien in `public/` speichern, beachte aber bitte, dass diese dann während des Buildvorgangs weder gebündelt noch optimiert werden. @@ -115,7 +115,7 @@ Als allgemeine Regel kann man sagen, dass jeglicher CSS- oder JavaScript-Code, d ### `package.json` -Diese Datei wird von JavaScript-Paketmanagern verwendet, um die erforderlichen Pakete ("Abhängigkeiten") eines Projekts zu verwalten. Sie definiert auch die Skripte, die üblicherweise dazu verwendet werden, um Astro auszuführen (z.B. `npm start`, `npm run build`). +Diese Datei wird von JavaScript-Paketmanagern verwendet, um die erforderlichen Pakete ("Abhängigkeiten") eines Projekts zu verwalten. Sie definiert auch die Skripte, die üblicherweise dazu verwendet werden, um Astro auszuführen (z.B. `npm run dev`, `npm run build`). Es gibt [zwei Arten von Abhängigkeiten](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file), die du in deiner `package.json`-Datei festlegen kannst: `dependencies` und `devDependencies`. In den meisten Fällen funktionieren sie auf die gleiche Weise: Astro benötigt zum Erzeugungszeitpunkt alle Abhängigkeiten, und auch dein Paketmanager wird beide Arten installieren. Wir empfehlen dir, all deine Abhängigkeiten zunächst in `dependencies` einzutragen, und `devDependencies` nur zu verwenden, wenn dein spezieller Anwendungsfall es erfordert. @@ -129,7 +129,7 @@ Astro unterstützt mehrere Dateiformate für seine JavaScript-Konfigurationsdate Das Laden von TypeScript-Konfigurationsdateien wird mit [`tsm`](https://github.com/lukeed/tsm) gehandhabt und berücksichtigt die `tsconfig`-Optionen deines Projekts. -In der [Astro-Konfigurationsanleitung](/de/reference/configuration-reference/) findest du weitere Informationen zum Einstellen der Konfigurationen. +In der [Konfigurationsreferenz](/de/reference/configuration-reference/) findest du alle Einzelheiten. ### `tsconfig.json` diff --git a/src/content/docs/de/guides/deploy/deno.mdx b/src/content/docs/de/guides/deploy/deno.mdx index 4c4b0bb61de39..6fb2a9489c5df 100644 --- a/src/content/docs/de/guides/deploy/deno.mdx +++ b/src/content/docs/de/guides/deploy/deno.mdx @@ -1,27 +1,36 @@ --- -title: Veröffentliche deine Astro-Seite auf Deno -description: Wie du deine Astro-Webseite mit Deno ins Internet stellst. +title: Veröffentliche deine Astro-Website auf Deno +description: Wie du deine Astro-Webseite mit Deno im Internet veröffentlichst. +sidebar: + label: Deno type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; +import StaticSsrTabs from '~/components/tabs/StaticSsrTabs.astro'; + Du kannst eine serverseitig gerenderte Astro-Seite auf [Deno Deploy](https://deno.com/deploy) veröffentlichen, einem verteilten System, das JavaScript, TypeScript und WebAssembly weltweit ausführt. Dieser Leitfaden enthält Anweisungen für die Bereitstellung in Deno Deploy über GitHub Actions oder die CLI von Deno Deploy. ## Anforderungen -In dieser Anleitung wird davon ausgegangen, dass du [Deno](https://deno.land/) bereits installiert hast. +In dieser Anleitung wird davon ausgegangen, dass du [Deno](https://deno.com/) bereits installiert hast. ## Projektkonfiguration -Dein Astro-Projekt kann auf [Deno Deploy](https://deno.com/deploy) als serverseitig gerenderte Webseite (SSR) bereitgestellt werden. Deno Deploy unterstützt keine statischen Webseiten. +Dein Astro-Projekt kann auf [Deno Deploy](https://deno.com/deploy) als statische Website oder als serverseitig gerenderte Website (SSR) bereitgestellt werden. + +### Statische Website + +Dein Astro-Projekt ist standardmäßig eine statische Website. Du brauchst keine zusätzliche Konfiguration, um eine statische Astro-Site an Deno Deploy zu übergeben. ### Adapter für SSR So aktivierst du SSR in deinem Astro-Projekt und stellst es mit Deno Deploy bereit: -Füge [den Deno-Adapter](/de/guides/integrations-guide/deno/) hinzu, um SSR in deinem Astro-Projekt mit dem folgenden Befehl `astro add` zu aktivieren. Damit installierst du den Adapter und nimmst in einem Schritt die entsprechenden Änderungen an deiner Datei `astro.config.mjs` vor. +Füge [den Deno-Adapter][Deno adapter] hinzu, um SSR in deinem Astro-Projekt mit dem folgenden Befehl `astro add` zu aktivieren. Damit installierst du den Adapter und nimmst in einem Schritt die entsprechenden Änderungen an deiner Datei `astro.config.mjs` vor. ```bash npx astro add deno @@ -29,13 +38,14 @@ npx astro add deno Wenn du den Adapter stattdessen lieber manuell installieren möchtest, führe die folgenden zwei Schritte aus: -1. Installiere [den `@deno/astro-adapter`-Adapter](https://github.com/withastro/astro/tree/main/packages/integrations/deno) mit deinem bevorzugten Paketmanager als Abhängigkeit deines Projekts. Wenn du npm verwendest oder dir nicht sicher bist, führe dies im Terminal aus: + +1. Installiere [den `@deno/astro-adapter`-Adapter][Deno adapter] mit deinem bevorzugten Paketmanager als Abhängigkeit deines Projekts. Wenn du npm verwendest oder dir nicht sicher bist, führe dies im Terminal aus: ```bash npm install @deno/astro-adapter ``` -1. Aktualisiere deine Projektkonfigurationsdatei `astro.config.mjs` mit den folgenden Änderungen. +2. Aktualisiere deine Projektkonfigurationsdatei `astro.config.mjs` mit den folgenden Änderungen. ```js ins={3,6-7} // astro.config.mjs @@ -69,6 +79,7 @@ Wenn du den Adapter stattdessen lieber manuell installieren möchtest, führe di ```bash npm run preview ``` + ## Wie man veröffentlicht @@ -78,77 +89,150 @@ Du kannst Deno Deploy über GitHub Actions oder über das Deno Deploy CLI (Comma Wenn dein Projekt auf GitHub gespeichert ist, führt dich die [Deno Deploy-Webseite](https://dash.deno.com/) durch die Einrichtung von GitHub-Aktionen für die Bereitstellung deiner Astro-Seite. + 1. Veröffentliche deinen Code in einem öffentlichen oder privaten GitHub-Repository. -1. Melde dich auf [Deno Deploy](https://dash.deno.com/) mit deinem GitHub-Konto an und klicke auf [Neues Projekt](https://dash.deno.com). +2. Melde dich auf [Deno Deploy](https://dash.deno.com/) mit deinem GitHub-Konto an und klicke auf [Neues Projekt](https://dash.deno.com). -1. Wähle dein Repository und den Branch aus, den du bereitstellen möchtest, und wähle den Modus **GitHub Action**. (Deine Astro-Seite benötigt einen Build-Schritt und kann den automatischen Modus nicht verwenden) +3. Wähle dein Repository und den Branch aus, den du bereitstellen möchtest, und wähle den Modus **GitHub Action**. (Deine Astro-Seite benötigt einen Build-Schritt und kann den automatischen Modus nicht verwenden.) -1. Erstelle in deinem Astro-Projekt eine neue Datei unter `.github/workflows/deploy.yml` und füge die unten stehende YAML ein. Diese Datei ähnelt der YAML-Datei von Deno Deploy, mit den zusätzlichen Schritten, die du für deine Astro-Seite benötigst. - - ```yaml - name: Deploy - on: [push] - - jobs: - deploy: +4. Erstelle in deinem Astro-Projekt eine neue Datei unter `.github/workflows/deploy.yml` und füge die unten stehende YAML ein. Diese Datei ähnelt der YAML-Datei von Deno Deploy, mit den zusätzlichen Schritten, die du für deine Astro-Seite benötigst. + + + + ```yaml + --- + // .github/workflows/deploy.yml + --- name: Deploy - runs-on: ubuntu-latest - permissions: - id-token: write # Benötigt für die Autorisierung mit Deno Deploy - contents: read # Benötigt, um das Repository zu klonen - - steps: - - name: Clone repository - uses: actions/checkout@v4 - - # Du benutzt kein npm? Ändere `npm ci` in `yarn install` oder `pnpm i` - - name: Install dependencies - run: npm ci - - # Du benutzt kein npm? Ändere `npm run build` in `yarn build` oder `pnpm run build` - - name: Build Astro - run: npm run build - - - name: Upload to Deno Deploy - uses: denoland/deployctl@v1 - with: - projekt: my-deno-project # TODO: durch Deno Deploy Projektnamen ersetzen - entrypoint: server/entry.mjs - root: dist - ``` - -1. Nachdem du diese YAML-Datei übertragen und auf GitHub in deinem konfigurierten Veröffentlichungs-Branch gepusht hast, sollte die Veröffentlichung automatisch beginnen! + on: [push] + + jobs: + deploy: + name: Deploy + runs-on: ubuntu-latest + permissions: + id-token: write # Benötigt für die Autorisierung mit Deno Deploy + contents: read # Benötigt, um das Repository zu klonen + + steps: + - name: Clone repository + uses: actions/checkout@v4 + + # Du benutzt kein npm? Ändere `npm ci` in `yarn install` oder `pnpm i` + - name: Install dependencies + run: npm ci + + # Du benutzt kein npm? Ändere `npm run build` in `yarn build` oder `pnpm run build` + - name: Build Astro + run: npm run build + + - name: Upload to Deno Deploy + uses: denoland/deployctl@v1 + with: + project: my-deno-project # TODO: durch Deno Deploy Projektnamen ersetzen + entrypoint: jsr:@std/http/file-server + root: dist + ``` + + + + ```yaml + --- + // .github/workflows/deploy.yml + --- + name: Deploy + on: [push] + + jobs: + deploy: + name: Deploy + runs-on: ubuntu-latest + permissions: + id-token: write # Benötigt für die Autorisierung mit Deno Deploy + contents: read # Benötigt, um das Repository zu klonen + + steps: + - name: Clone repository + uses: actions/checkout@v4 + + # Du benutzt kein npm? Ändere `npm ci` in `yarn install` oder `pnpm i` + - name: Install dependencies + run: npm ci + + # Du benutzt kein npm? Ändere `npm run build` in `yarn build` oder `pnpm run build` + - name: Build Astro + run: npm run build + + - name: Upload to Deno Deploy + uses: denoland/deployctl@v1 + with: + project: my-deno-project # TODO: durch Deno Deploy Projektnamen ersetzen + entrypoint: server/entry.mjs + root: dist + ``` + + + +5. Nachdem du diese YAML-Datei übertragen und auf GitHub in deinem konfigurierten Veröffentlichungs-Branch gepusht hast, sollte die Veröffentlichung automatisch beginnen! Du kannst den Fortschritt auf der Registerkarte "Aktionen" auf deiner GitHub-Repository-Seite oder auf [Deno Deploy](https://dash.deno.com) verfolgen. - + ### CLI-Veröffentlichung -1. Installiere das [Deno Deploy CLI](https://deno.com/deploy/docs/deployctl). + +1. Installiere das [Deno Deploy CLI](https://docs.deno.com/deploy/manual/deployctl). ```bash - deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -r -f https://deno.land/x/deploy/deployctl.ts + deno install -gArf jsr:@deno/deployctl ``` -1. Führe deinen Astro-Bauschritt aus. +2. Führe deinen Astro-Bauschritt aus. ```bash npm run build ``` -1. Führe `deployctl` zum Veröffentlichen aus! - - Ersetze im folgenden Befehl `` mit deinem [Personal Access Token](https://dash.deno.com/user/access-tokens) und `` mit deinem Deno Deploy-Projektnamen. - - ```bash - DENO_DEPLOY_TOKEN= deployctl deploy --project= --no-static --include=./dist ./dist/server/entry.mjs - ``` +3. Führe `deployctl` zum Veröffentlichen aus! + + Ersetze im folgenden Befehl `` mit deinem [Personal Access Token](https://dash.deno.com/account#access-tokens) und `` mit deinem Deno Deploy-Projektnamen. + + + + ```bash + cd dist && DENO_DEPLOY_TOKEN= deployctl deploy --project= jsr:@std/http/file-server + ``` + + + + ```bash + DENO_DEPLOY_TOKEN= deployctl deploy --project= --no-static --include=./dist ./dist/server/entry.mjs + ``` + + - Du kannst alle deine Einsätze auf [Deno Deploy](https://dash.deno.com) verfolgen. - -1. (Optional) Um den Build und das Deployment in einem Befehl zu vereinfachen, füge ein `deploy-deno` Skript in die `package.json` ein. - + Du kannst alle deine Veröffentlichungen auf [Deno Deploy](https://dash.deno.com) verfolgen. + +4. (Optional) Um den Build und die Veröffentlichung in einem Befehl zu vereinfachen, füge ein `deploy-deno` Skript in die `package.json` ein. + + + + ```json ins={9} + // package.json + { + // ... + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview", + "deno-deploy": "npm run build && cd dist && deployctl deploy --project= jsr:@std/http/file-server" + } + } + ``` + + ```json ins={9} // package.json { @@ -162,12 +246,14 @@ Wenn dein Projekt auf GitHub gespeichert ist, führt dich die [Deno Deploy-Webse } } ``` + + - Dann kannst du diesen Befehl verwenden, um deine Astro-Seite in einem Schritt zu erstellen und einzusetzen. + Dann kannst du diesen Befehl verwenden, um deine Astro-Seite in einem Schritt zu erstellen und veröffentlichen. ```bash DENO_DEPLOY_TOKEN= npm run deno-deploy ``` + - -📚 Erfahre mehr über [SSR in Astro](/de/guides/on-demand-rendering/). +[Deno adapter]: https://github.com/denoland/deno-astro-adapter diff --git a/src/content/docs/de/guides/deploy/github.mdx b/src/content/docs/de/guides/deploy/github.mdx index efcec32510f98..db3ff545dc159 100644 --- a/src/content/docs/de/guides/deploy/github.mdx +++ b/src/content/docs/de/guides/deploy/github.mdx @@ -1,40 +1,106 @@ --- title: Veröffentliche deine Astro-Website bei GitHub Pages description: Wie du deine Astro-Website mit GitHub Pages im Internet veröffentlichst. +sidebar: + label: GitHub Pages type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; + Du kannst [GitHub Pages](https://pages.github.com/) verwenden, um eine Astro-Website direkt von einem Repository auf [GitHub.com](https://github.com/) zu hosten. ## Wie du sie veröffentlichst -Du kannst eine Astro-Website bei GitHub Pages veröffentlichen, indem du [GitHub Actions](https://github.com/features/actions) verwendest und so deine Website automatisch erzeugst und veröffentlichst. Um dies zu erreichen, muss dein Quelltext auf GitHub liegen. +Du kannst eine Astro-Website bei GitHub Pages veröffentlichen, indem du [GitHub Actions](https://github.com/features/actions) verwendest und so deine Website automatisch erzeugst und veröffentlichst. Um dies zu erreichen, muss dein Quelltext auf GitHub gehosted sein. -Astro pflegt die offizielle `withastro/action`, welche dein Projekt mit minimaler Konfiguration veröffentlicht. Folge den unten angeführten Anweisungen, um deine Astro-Website bei GitHub Pages zu veröffentlichen, und lies [die README des Pakets](https://github.com/withastro/action), falls du mehr Informationen benötigst. +Astro pflegt die offizielle `withastro/action`, welche dein Projekt mit minimaler Konfiguration veröffentlicht. Folge den unten angeführten Anweisungen, um deine Astro-Website bei GitHub Pages zu veröffentlichen, und lies [die README-Datei des Pakets](https://github.com/withastro/action), falls du mehr Informationen benötigst. -1. Setze die Optionen [`site`](/de/reference/configuration-reference/#site) und bei Bedarf auch [`base`](/de/reference/configuration-reference/#base) in `astro.config.mjs`. - - `site` sollte in etwa `https://.github.io` entsprechen - - `base` sollte ein Schrägstrich gefolgt vom Namen deines Repositories sein, zum Beispiel `/mein-repository`. +## Astro für GitHub Pages konfigurieren - :::note - Falls dein Repository `.github.io` heißt, benötigst du die Option `base` nicht. - ::: +### Veröffentlichung auf einer `github.io` UR + +Setze die Optionen [`site`](/de/reference/configuration-reference/#site) und [`base`](/de/reference/configuration-reference/#base) in `astro.config.mjs`. + +```js title="astro.config.mjs" ins={4-5} +import { defineConfig } from 'astro/config' + +export default defineConfig({ + site: 'https://astronaut.github.io', + base: 'my-repo', +}) +``` + +#### `site` + +Der Wert für `site` muss einer der folgenden sein: + +- Die folgende URL basiert auf deinem Benutzernamen: `https://.github.io` +- Die zufällige URL, die automatisch für eine [private Seite der GitHub-Organisation] (https://docs.github.com/en/enterprise-cloud@latest/pages/getting-started-with-github-pages/changing-the-visibility-of-your-github-pages-site) generiert wird: `https://.pages.github.io/` + +#### `base` -2. Erstelle eine neue Datei `.github/workflows/deploy.yml` in deinem Projekt und füge den folgenden YAML-Code ein: +Ein Wert für `base` kann erforderlich sein, damit Astro deinen Repository-Namen (z.B. `/my-repo`) als Stammverzeichnis deiner Website behandelt. - ```yaml - name: GitHub Pages Astro CI +:::note +Setze keinen `base`-Parameter, wenn: + +- Deine Seite wird aus dem Stammordner ausgeliefert. +- Dein Repository befindet sich unter `https://github.com//.github.io`. +::: + +Der Wert für `base` sollte der Name deines Repositorys sein, der mit einem Schrägstrich beginnt, zum Beispiel `/my-blog`. Damit Astro weiß, dass das Stammverzeichnis deiner Website `/my-repo` ist und nicht der Standardwert `/`. + +:::caution +Wenn dieser Wert konfiguriert ist, muss allen deinen internen Seitenlinks dein „Basis“-Wert vorangestellt werden: + +```astro ins="/my-repo" +Über mich +``` + +Siehe mehr über [einen `base`-Wert konfigurieren](/de/reference/configuration-reference/#base). +::: + +### GitHub-Seiten mit einer eigenen Domain verwenden + +:::tip[Eine benutzerdefinierte Domäne einrichten] +Du kannst eine benutzerdefinierte Domain einrichten, indem du die folgende Datei `./public/CNAME` zu deinem Projekt hinzufügst: + +```js title="public/CNAME" +sub.mydomain.com +``` + +Dadurch wird deine Website unter deiner benutzerdefinierten Domain statt unter `user.github.io` bereitgestellt. Vergiss nicht, auch [DNS für deinen Domainanbieter zu konfigurieren](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-a-subdomain). +::: + +Um Astro für die Verwendung von GitHub-Seiten mit einer benutzerdefinierten Domain zu konfigurieren, gibst du deine Domain als Wert für `site` an. Setze keinen Wert für `base`: + +```js title="astro.config.mjs" ins={4} +import { defineConfig } from 'astro/config' + +export default defineConfig({ + site: 'https://example.com', +}) +``` + +## Konfiguriere eine GitHub-Aktion + + +1. Erstelle eine neue Datei in deinem Projekt unter `.github/workflows/deploy.yml` und füge die folgende YAML ein. + + ```yaml title="deploy.yml" + name: Deploy to GitHub Pages on: - # Löst den Workflow bei jedem Push auf den `main`-Branch aus - # Verwendest du einen anderen Branch-Namen? Ersetze `main` durch den Namen deines Branches + # Löse den Workflow jedes Mal aus, wenn du zum `main`-Branch pushst + # Du verwendest einen anderen Branchnamen? Ersetze `main` durch den Namen deines Branches push: branches: [ main ] - # Erlaubt es dir, diesen Workflow manuell über den Actions-Tab auf GitHub zu starten + # Ermöglicht es dir, diesen Workflow manuell über die Registerkarte „Actions“ auf GitHub auszuführen. workflow_dispatch: - - # Erlaubt diesem Job das Repository zu klonen und eine Veröffentlichung bei GitHub Pages zu erstellen + + # Erlaube diesem Job, das Repo zu klonen und eine Seitenbereitstellung zu erstellen permissions: contents: read pages: write @@ -44,10 +110,14 @@ Astro pflegt die offizielle `withastro/action`, welche dein Projekt mit minimale build: runs-on: ubuntu-latest steps: - - name: Checke dein Repository mit Git aus + - name: Checkout your repository using git uses: actions/checkout@v4 - - name: Installiere Abhängigkeiten, erzeuge deine Website und lade sie hoch - uses: withastro/action@v0 + - name: Install, build, and upload your site + uses: withastro/action@v3 + # with: + # path: . # Das Stammverzeichnis deines Astro-Projekts innerhalb des Repositorys. (optional) + # node-version: 20 # Die spezifische Version von Node, die für die Erstellung deiner Website verwendet werden soll. Der Standardwert ist 20. (optional) + # package-manager: pnpm@latest # Der Node-Paketmanager, der für die Installation von Abhängigkeiten und die Erstellung deiner Website verwendet werden soll. Wird automatisch anhand deines Lockfiles ermittelt. (optional) deploy: needs: build @@ -56,29 +126,24 @@ Astro pflegt die offizielle `withastro/action`, welche dein Projekt mit minimale name: github-pages url: ${{ steps.deployment.outputs.page_url }} steps: - - name: Bei GitHub Pages veröffentlichen + - name: Deploy to GitHub Pages id: deployment - uses: actions/deploy-pages@v1 + uses: actions/deploy-pages@v4 ``` - :::caution - Die offizielle Astro-[Action](https://github.com/withastro/action) sucht nach einem Lockfile, um deinen bevorzugten Paketmanager (`npm`, `yarn` oder `pnpm`) zu erkennen. Du solltest die von deinem Paketmanager automatisch generierte Datei `package-lock.json`, `yarn.lock` oder `pnpm-lock.yaml` zu deinem Repository hinzufügen. + :::note + Die Astro-Aktion benötigt ein paar optionale Eingaben. Diese kannst du angeben, indem du die Zeile `with:` auskommentierst und die gewünschte Eingabe angibst. ::: -3. Committe die neue Workflow-Datei und pushe sie zu GitHub. - -4. Gehe auf GitHub zum Tab **Settings** deines Repositories und suche den Abschnitt **Pages**. - -5. Wähle den `gh-pages`-Branch und das `"/" (root)`-Verzeichnis als **Source** deiner Website aus und drücke **Save**. + :::caution + Die offizielle Astro-[Action](https://github.com/withastro/action) scannt nach einer Lock-Datei, um deinen bevorzugten Paketmanager (`npm`, `yarn`, `pnpm` oder `bun`) zu erkennen. Du solltest die von deinem Paketmanager automatisch generierte Datei `package-lock.json`, `yarn.lock`, `pnpm-lock.yaml` oder `bun.lockb` in dein Repository übertragen. + ::: -Deine Website sollte jetzt veröffentlicht sein! Wenn du Änderungen an deinem Astro-Projekt zu deinem Repository pushst, wird die GitHub Action diese automatisch veröffentlichen. +2. Gehe auf GitHub auf den Reiter **Einstellungen** deines Repositorys und suche den Abschnitt **Seiten** der Einstellungen. -:::tip[Richte eine benutzerdefinierte Domäne ein] -Optional kannst du eine benutzerdefinierte Domäne einrichten, indem du die folgende Datei `./public/CNAME` zu deinem Projekt hinzufügst: +3. Wähle **GitHub Actions** als **Quelle** für deine Seite. -```js title="public/CNAME" -sub.meine-domain.de -``` +4. Übertrage die neue Workflow-Datei und pushe sie auf GitHub. + -Dadurch wird deine Website auf deiner benutzerdefinierten Domäne veröffentlicht, und nicht auf `.github.io`. Vergiss nicht, auch [den DNS-Eintrag deines Domänen-Anbieters anzupassen](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-a-subdomain). -::: +Deine Website sollte jetzt veröffentlicht werden! Wenn du Änderungen am Repository deines Astro-Projekts vornimmst, wird die GitHub-Aktion sie automatisch für dich veröffentlichen. diff --git a/src/content/docs/de/guides/deploy/gitlab.mdx b/src/content/docs/de/guides/deploy/gitlab.mdx index 4804e80f274ac..414f56f1fda6a 100644 --- a/src/content/docs/de/guides/deploy/gitlab.mdx +++ b/src/content/docs/de/guides/deploy/gitlab.mdx @@ -1,10 +1,15 @@ --- title: Veröffentliche deine Astro-Website mit GitLab Pages description: Anleitung zur Veröffentlichung deiner Astro-Website mittels GitLab Pages. +sidebar: + label: GitLab Pages type: deploy +i18nReady: true --- -[GitLab Pages](https://pages.gitlab.io/) ermöglichen es dir eine Astro-Website für deine [GitLab](https://about.gitlab.com/) Projekte, Gruppen oder Benutzerkonten bereitzustellen. +import { Steps } from '@astrojs/starlight/components'; + +[GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/) ermöglichen es dir eine Astro-Website für deine [GitLab](https://about.gitlab.com/) Projekte, Gruppen oder Benutzerkonten bereitzustellen. :::tip[Auf der Suche nach einem Beispiel?] Schau dir [das offizielle Astro-Beispiel für GitLab Pages an](https://gitlab.com/pages/astro)! @@ -12,30 +17,108 @@ Schau dir [das offizielle Astro-Beispiel für GitLab Pages an](https://gitlab.co ## So funktioniert die Veröffentlichung -1. Setze den Parameter `.site` in `astro.config.mjs` auf den benötigten Wert. -2. Setze den Parameter `dist` in `astro.config.mjs` auf den Wert `public` und den Parameter `public` in `astro.config.mjs` auf einen neu benannten Ordner, der alles enthält, was sich derzeit in `public` befindet. Der Grund dafür ist, dass `public` ein zweiter Quellordner in Astro ist. Damit du Dateien von `public` veröffentlichen kannst, musst du die entsprechenden Dateien aus einem anderen Ordner holen. Ihre "astro.config.mjs" könnte damit so aussehen: +Du kannst eine Astro-Site auf GitLab Pages bereitstellen, indem du GitLab CI/CD nutzt, um deine Site automatisch zu erstellen und bereitzustellen. Dazu muss dein Quellcode auf GitLab gehostet werden und du musst die folgenden Änderungen an deinem Astro-Projekt vornehmen: + + + +1. Richte die Optionen [`site`](/de/reference/configuration-reference/#site) und [`base`](/de/reference/configuration-reference/#base) in `astro.config.mjs` ein. + + ```js title="astro.config.mjs" ins={4-5} + import { defineConfig } from 'astro/config'; + + export default defineConfig({ + site: 'https://.gitlab.io', + base: '/', + outDir: 'public', + publicDir: 'static', + }); + ``` + + `site` + + Der Wert für `site` muss einer der folgenden sein: + + - Die folgende URL basiert auf deinem Benutzernamen: `https://.gitlab.io` + - Die folgende URL basiert auf deinem Gruppennamen: `https://.gitlab.io` + - Deine benutzerdefinierte Domain, wenn du sie in den Einstellungen deines GitLab-Projekts konfiguriert hast: `https://example.com` + + Bei selbstverwalteten GitLab-Instanzen ersetze „gitlab.io“ durch die Pages-Domäne deiner Instanz. + + `base` + + Ein Wert für `base` kann erforderlich sein, damit Astro deinen Repository-Namen (z.B. `/mein-repo`) als Stammverzeichnis deiner Website behandelt. + + :::note + Setze keinen `base`-Parameter, wenn deine Seite aus dem Stammverzeichnis veröffentlicht wird. + ::: + + Der Wert für `base` sollte der Name deines Repositorys sein, der mit einem Schrägstrich beginnt, zum Beispiel `/mein-blog`. Damit Astro weiß, dass das Stammverzeichnis deiner Website `/mein-repo` ist und nicht der Standardwert `/`. + + :::caution + Wenn dieser Wert konfiguriert ist, muss allen deinen internen Seitenlinks dein `base`-Wert vorangestellt werden: + + ```astro ins="/mein-repo" + Über uns + ``` + + Siehe mehr über [einen `base`-Wert konfigurieren](/de/reference/configuration-reference/#base). + ::: - ```js +2. Benenne das Verzeichnis `public/` in `static/` um. + +3. Setze `outDir: 'public'` in `astro.config.mjs`. Diese Einstellung weist Astro an, die statische Build-Ausgabe in einem Ordner namens `public` abzulegen, der von GitLab Pages für exponierte Dateien benötigt wird. + + Wenn du das Verzeichnis [`public/`](/de/basics/project-structure/#public) als Quelle für statische Dateien in deinem Astro-Projekt verwendet hast, benenne es um und verwende diesen neuen Ordnernamen in `astro.config.mjs` für den Wert von `publicDir`. + + Hier sind zum Beispiel die richtigen Einstellungen für `astro.config.mjs`, wenn das Verzeichnis `public/` in `static/` umbenannt wird: + + ```js title="astro.config.mjs" ins={4-5} + import { defineConfig } from 'astro/config'; + export default defineConfig({ - sitemap: true, - site: 'https://astro.build/', + outDir: 'public', + publicDir: 'static', }); ``` -3. Erstelle eine Datei namens `.gitlab-ci.yml` im Stammverzeichnis deines Projekts mit folgendem Inhalt. Sobald du Änderungen an den Inhalten deiner Seite durchführst wird deine Website damit neu gebaut und veröffentlicht: +4. Ändere die Build-Ausgabe in `.gitignore`. In unserem Beispiel müssen wir `dist/` in `public/` ändern: - ```yaml - image: node:14 + ```diff title=".gitignore" + # build output + -dist/ + +public/ + ``` + +5. Erstelle im Stammverzeichnis deines Projekts eine Datei namens `.gitlab-ci.yml` mit dem folgenden Inhalt. Damit wird deine Website erstellt und bereitgestellt, sobald du Änderungen an deinen Inhalten vornimmst: + + ```yaml title=".gitlab-ci.yml" pages: - cache: - paths: - - node_modules/ + # Das Docker-Image, das für die Erstellung deiner App verwendet wird + image: node:lts + + before_script: + - npm ci + script: - - npm install + # Gib hier die Schritte an, die zur Erstellung deiner App nötig sind - npm run build + artifacts: paths: + # Der Ordner, der die zu veröffentlichenden Dateien enthält. + # Dies muss „public“ genannt werden. - public + only: + # Löse einen neuen Build aus und setze ihn nur dann ein, + # wenn es einen Push auf den/die Branch(es) unten gibt - main ``` + +6. Commite deine Änderungen und pushe sie zu GitLab. + +7. Gehe auf GitLab in das Menü **Deploy** deines Repositorys und wähle **Pages**. Hier siehst du die vollständige URL deiner GitLab Pages Website. Um sicherzustellen, dass du das URL-Format `https://benutzername.gitlab.io/mein-repo` verwendest, deaktiviere die Einstellung **Einzigartige Domain verwenden** auf dieser Seite. + + + +Deine Website sollte jetzt veröffentlicht sein! Wenn du Änderungen am Repository deines Astro-Projekts vornimmst, werden sie von der GitLab CI/CD-Pipeline automatisch für dich veröffentlicht. diff --git a/src/content/docs/de/guides/deploy/google-cloud.mdx b/src/content/docs/de/guides/deploy/google-cloud.mdx index a4a04e8d98528..669f3b03c6e52 100644 --- a/src/content/docs/de/guides/deploy/google-cloud.mdx +++ b/src/content/docs/de/guides/deploy/google-cloud.mdx @@ -1,16 +1,21 @@ --- title: Veröffentliche deine Astro-Website auf Google Cloud description: Wie du deine Astro-Website auf Google Cloud im Internet veröffentlichst. +sidebar: + label: Google Cloud type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; + [Google Cloud](https://cloud.google.com/) ist eine voll ausgestattete Web-App-Hosting-Plattform, die für die Veröffentlichung einer Astro-Website verwendet werden kann. ## So funktioniert die Veröffentlichung ### Cloud Storage (nur statisch) + 1. [Erstelle ein neues GCP-Projekt](https://console.cloud.google.com/projectcreate) oder wähle ein bereits vorhandenes Projekt aus. 2. Erstelle einen neuen Bucket unter [Cloud Storage](https://cloud.google.com/storage). @@ -22,6 +27,7 @@ i18nReady: true 5. Aktiviere den öffentlichen Zugriff, indem du `allUsers` eine neue Berechtigung namens `Storage Object Viewer` hinzufügst. 6. Bearbeite die Website-Konfiguration und füge `ìndex.html` als Einstiegspunkt und `404.html` als Fehlerseite hinzu. + ### Cloud Run (SSR und statisch) @@ -29,112 +35,56 @@ Cloud Run ist eine serverlose Plattform, die es dir ermöglicht, einen Container #### Bereite den Dienst vor + 1. [Erstelle ein neues GCP-Projekt](https://console.cloud.google.com/projectcreate) oder wähle ein bereits vorhandenes Projekt aus. 2. Stelle sicher, dass die [Cloud Run API](https://console.cloud.google.com/apis/library/run.googleapis.com) aktiviert ist. 3. Erstelle einen neuen Dienst. + -#### Die Dockerdatei erstellen - -##### Dockerfile für statische Websites (Beispiel) - -Das folgende Dockerfile erstellt deine Website und stellt sie mit Apache HTTPD (Standardkonfiguration) auf Port `80` bereit. - -```docker title="Dockerfile" -FROM node:lts AS build -WORKDIR /app -COPY . . -RUN npm i -RUN npm run build - -FROM httpd:2.4 AS runtime -COPY --from=build /app/dist /usr/local/apache2/htdocs/ -EXPOSE 80 -``` - -:::note -Wenn du einen anderen Paketmanager als `npm` verwendest, musst du die Befehle ändern: - -```docker title="Dockerfile" add={4} "pnpm" -FROM node:lts AS build -WORKDIR /app -COPY . . -RUN npm i -g pnpm@latest -RUN pnpm i -RUN pnpm run build -# ... -``` -::: - -##### Dockerfile für SSR-Websites (Beispiel) - -Das folgende Dockerfile erstellt deine Website und stellt sie mit Node.js (SSR-Adapter) auf Port `4321` bereit. +#### Dockerfile erstellen & Container erzeugen -```docker title="Dockerfile" -FROM node:lts AS runtime -WORKDIR /app - -COPY . . - -RUN npm install -RUN npm run build - -ENV HOST=0.0.0.0 -ENV PORT=4321 -EXPOSE 4321 -CMD node ./dist/server/entry.mjs -``` - -:::tip[Bitte bedenke Folgendes:] -Dies sind nur Beispiele für Dockerdateien. Du kannst sie an deine Bedürfnisse anpassen. Du könntest zum Beispiel ein anderes Docker-Image wie `node:lts-alpine` verwenden. - -```docker title="Dockerfile" del={1} add={2} -FROM node:lts AS runtime -FROM node:lts-alpine AS runtime -``` -::: - -#### Erstelle den Container +Bevor du deine Astro-Website in Cloud Run veröffentlichen kannst, musst du ein Dockerfile erstellen, mit dem du den Container erzeugen kannst. Weitere Informationen über [wie du Docker mit Astro verwendest](/de/recipes/docker/#creating-a-dockerfile) findest du in unseren Beispielen. Sobald das Dockerfile erstellt ist, erstellst du ein Image und überträgst es zu Google Cloud. Es gibt mehrere Möglichkeiten, dies zu tun: -**Lokale Erstellung mit Docker**: +**Lokale Erzeugung mit Docker**: -Verwende den Befehl `docker build`, um das Image zu erstellen, `docker tag`, um ihm einen Tag zu geben, und dann `docker push`, um es an eine Registry zu übergeben. Im Fall von Google Cloud ist [Google Cloud Registry](https://cloud.google.com/container-registry/docs/pushing-and-pulling#add-registry) die einfachste Option, aber du kannst auch [Docker Hub](https://hub.docker.com/) verwenden. +Verwende den Befehl `docker build`, um das Image zu erstellen, `docker tag`, um ihm ein Tag zu geben, und dann `docker push`, um es in eine Registry zu pushen. Im Fall von Google Cloud ist [`Artifact Registry`] (https://cloud.google.com/artifact-registry/docs/docker/pushing-and-pulling) die einfachste Option, aber du kannst auch [Docker Hub](https://hub.docker.com/) verwenden. ```bash -# Erstelle deinen Container +# Erzeuge deinen Container docker build . docker tag SOURCE_IMAGE HOSTNAME/PROJECT-ID/TARGET-IMAGE:TAG -# Übertrage dein Image in eine Registry +# Pushe dein Image in eine Registry docker push HOSTNAME/PROJECT-ID/IMAGE:TAG ``` Ändere die folgenden Werte in den obigen Befehlen, damit sie zu deinem Projekt passen: -- `SOURCE_IMAGE`: Der lokalen Image-Namen oder die Image-ID. -- `HOSTNAME`: Der Registry-Host (`gcr.io`, `eu.gcr.io`, `asia.gcr.io`, `us.gcr.io`). -- `PROJECT`: Deine Google Cloud Projekt-ID. -- `TARGET-IMAGE`: Der Name für das Image, wenn es in der Registry gespeichert wird. -- `TAG` Die Version, die mit dem Image verknüpft ist +- `SOURCE_IMAGE`: der lokale Imagename oder die Image-ID. +- `HOSTNAME`: der Registry-Host (`gcr.io`, `eu.gcr.io`, `asia.gcr.io`, `us.gcr.io`, `docker.io`). +- `PROJECT`: deine Google Cloud Projekt-ID. +- `TARGET-IMAGE`: Der Name für das Image, wenn es in der Registry gespeichert wird. +- `TAG` ist die Version, die mit dem Image verknüpft ist. -[Erfahre mehr in der Google-Cloud-Dokumentation](https://cloud.google.com/container-registry/docs/pushing-and-pulling) +[Lies mehr in der Google Cloud-Dokumentation](https://cloud.google.com/artifact-registry/docs/docker/pushing-and-pulling) **Ein anderes Tool verwenden**: Du kannst ein CI/CD-Tool verwenden, das Docker unterstützt, z.B. [GitHub Actions](https://github.com/marketplace/actions/push-to-gcr-github-action). -**Erstelle mit [Cloud Build](https://cloud.google.com/build)**: +**Erzeuge mit [Cloud Build](https://cloud.google.com/build)**: Anstatt die Dockerdatei lokal zu erstellen, kannst du Google Cloud anweisen, das Image per Fernzugriff zu erstellen. Siehe dazu die [Google Cloud Build-Dokumentation](https://cloud.google.com/build/docs/build-push-docker-image). -#### Den Container erstellen +#### Den Container veröffentlichen -Das Deployment kann manuell in deinem Terminal [mit `gcloud`](https://cloud.google.com/run/docs/deploying#service) oder automatisch mit [Cloud Build](https://cloud.google.com/build) oder einem anderen CI/CD-System durchgeführt werden. +Die Veröffentlichung kann manuell in deinem Terminal [mit `gcloud`](https://cloud.google.com/run/docs/deploying#service) oder automatisch mit [Cloud Build](https://cloud.google.com/build) oder einem anderen CI/CD-System durchgeführt werden. :::note[Benötigst du öffentlichen Zugang?] Vergiss nicht, die Berechtigung `Cloud Run Invoker` zur Gruppe `allUsers` in den Cloud Run-Berechtigungseinstellungen hinzuzufügen! diff --git a/src/content/docs/de/guides/deploy/vercel.mdx b/src/content/docs/de/guides/deploy/vercel.mdx index ea2a1d7a3bb83..43e0c5e165140 100644 --- a/src/content/docs/de/guides/deploy/vercel.mdx +++ b/src/content/docs/de/guides/deploy/vercel.mdx @@ -1,15 +1,18 @@ --- -title: Veröffentliche deine Astro-Site in Vercel +title: Veröffentliche deine Astro-Website in Vercel description: Wie du deine Astro-Website mit Vercel im Internet veröffentlichst. +sidebar: + label: Vercel type: deploy i18nReady: true --- -import ReadMore from '~/components/ReadMore.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import ReadMore from '~/components/ReadMore.astro'; import { Steps } from '@astrojs/starlight/components'; -Du kannst [Vercel](http://vercel.com/) verwenden, um einen Astro-Standort ohne Konfiguration in dessen globales Edge-Netzwerk einzubinden. +Du kannst [Vercel](http://vercel.com/) verwenden, um eine Astro-Website ohne Konfiguration in dessen globales Edge-Netzwerk einzubinden. -Diese Anleitung enthält Anweisungen für die Veröffentlichung in Vercel über die Website-UI oder die CLI von Vercel. +Diese Anleitung enthält Anweisungen für die Veröffentlichung mit Vercel über die Website-UI oder die CLI von Vercel. ## Projektkonfiguration @@ -17,7 +20,7 @@ Dein Astro-Projekt kann in Vercel als statische Website oder als serverseitig ge ### Statische Website -Dein Astro-Projekt ist standardmäßig eine statische Website. Du brauchst keine zusätzliche Konfiguration, um eine statische Astro-Site in Vercel einzusetzen. +Dein Astro-Projekt ist standardmäßig eine statische Website. Du brauchst keine zusätzliche Konfiguration, um eine statische Astro-Website auf Vercel zu veröffentlichen. ### Adapter für SSR @@ -25,18 +28,46 @@ Um SSR in deinem Astro-Projekt zu aktivieren und auf Vercel zu veröffentlichen: Füge [den Vercel-Adapter](/de/guides/integrations-guide/vercel/) hinzu, um SSR in deinem Astro-Projekt mit dem folgenden Befehl `astro add` zu aktivieren. Damit installierst du den Adapter und nimmst in einem Schritt die entsprechenden Änderungen an deiner Datei `astro.config.mjs` vor. -```bash -npx astro add vercel -``` + + + ```shell + npx astro add vercel + ``` + + + ```shell + pnpm astro add vercel + ``` + + + ```shell + yarn astro add vercel + ``` + + Wenn du den Adapter stattdessen lieber manuell installieren möchtest, führe die folgenden zwei Schritte aus: -1. Installiere [den `@astrojs/vercel` Adapter](/de/guides/integrations-guide/vercel/) mit deinem bevorzugten Paketmanager in die Abhängigkeiten deines Projekts. Wenn du npm verwendest oder dir nicht sicher bist, führe dies im Terminal aus: +1. Installiere [den `@astrojs/vercel` Adapter](/de/guides/integrations-guide/vercel/) mit deinem bevorzugten Paketmanager in die Abhängigkeiten deines Projekts. - ```bash + + + ```shell npm install @astrojs/vercel - ``` + ``` + + + ```shell + pnpm add @astrojs/vercel + ``` + + + ```shell + yarn add @astrojs/vercel + ``` + + 2. Füge zwei neue Zeilen zu deiner Projektkonfigurationsdatei `astro.config.mjs` hinzu. @@ -64,30 +95,46 @@ Du kannst Vercel über die Benutzeroberfläche der Website oder über die Befehl 3. Vercel wird Astro automatisch erkennen und die richtigen Einstellungen vornehmen. -4. Deine Anwendung wird bereitgestellt! (z.B. [astro.vercel.app](https://astro.vercel.app/)) +4. Deine Anwendung wird veröffentlicht! (z.B. [astro.vercel.app](https://astro.vercel.app/)) -Nachdem dein Projekt importiert und veröffenlicht wurde, erzeugen alle nachfolgenden Pushes zu Branches [Preview Deployments](https://vercel.com/docs/concepts/deployments/preview-deployments), und alle Änderungen am Produktionszweig (allgemein "main") führen zu einem [Production Deployment](https://vercel.com/docs/concepts/deployments/environments#production). +Nachdem dein Projekt importiert und veröffenlicht wurde, erzeugen alle nachfolgenden Pushes zu Branches eine [Veröffentlichungsvorschau](https://vercel.com/docs/concepts/deployments/preview-deployments), und alle Änderungen am Produktionsbranch (meistens "main") führen zu einer [Produktionsveröffentlichung](https://vercel.com/docs/concepts/deployments/environments#production). Erfahre mehr über die [Git Integration](https://vercel.com/docs/concepts/git) von Vercel. - ### CLI-Veröffentlichung 1. Installiere das [Vercel CLI](https://vercel.com/cli) und führe `vercel` aus, um es zu veröffentlichen. - ```bash - npm install -g vercel - vercel - ``` + + + ```shell + npm install -g vercel + vercel + ``` + + + ```shell + pnpm add -g vercel + vercel + ``` + + + ```shell + yarn global add vercel + vercel + ``` + + 2. Vercel wird Astro automatisch erkennen und die richtigen Einstellungen vornehmen. + 3. Wenn du gefragt wirst: `Want to override the settings? [y/N]`, wähle `N`. + 4. Deine Anwendung wird veröffenlicht! (z.B. [astro.vercel.app](https://astro.vercel.app/)) - ### Projektkonfiguration mit vercel.json Du kannst `vercel.json` verwenden, um das Standardverhalten von Vercel außer Kraft zu setzen und zusätzliche Einstellungen zu konfigurieren. Du kannst zum Beispiel Header an die HTTP-Antworten deiner Veröffentlichungen anhängen. diff --git a/src/content/docs/en/basics/project-structure.mdx b/src/content/docs/en/basics/project-structure.mdx index 4e36a855223e4..8b2a0a00bcc4b 100644 --- a/src/content/docs/en/basics/project-structure.mdx +++ b/src/content/docs/en/basics/project-structure.mdx @@ -13,7 +13,7 @@ Here's how an Astro project is organized, and some files you will find in your n Astro leverages an opinionated folder layout for your project. Every Astro project root should include the following directories and files: -- `src/*` - Your project source code (components, pages, styles, etc.) +- `src/*` - Your project source code (components, pages, styles, images, etc.) - `public/*` - Your non-code, unprocessed assets (fonts, icons, etc.) - `package.json` - A project manifest. - `astro.config.mjs` - An Astro configuration file. (recommended) @@ -27,17 +27,19 @@ A common Astro project directory might look like this: - public/ - robots.txt - favicon.svg - - social-image.png + - my-cv.pdf - src/ + - blog/ + - post1.md + - post2.md + - post3.md - components/ - Header.astro - Button.jsx - - content/ - - config.ts - - posts/ - - post1.md - - post2.md - - post3.md + - images/ + - image1.jpg + - image2.jpg + - image3.jpg - layouts/ - PostLayout.astro - pages/ @@ -48,6 +50,7 @@ A common Astro project directory might look like this: - rss.xml.js - styles/ - global.css + - content.config.ts - astro.config.mjs - package.json - tsconfig.json @@ -63,13 +66,14 @@ The `src/` folder is where most of your project source code lives. This includes - [UI framework components (React, etc.)](/en/guides/framework-components/) - [Styles (CSS, Sass)](/en/guides/styling/) - [Markdown](/en/guides/markdown-content/) +- [Images to be optimized and processed by Astro](/en/guides/images/) Astro processes, optimizes, and bundles your `src/` files to create the final website that is shipped to the browser. Unlike the static `public/` directory, your `src/` files are built and handled for you by Astro. Some files (like Astro components) are not even sent to the browser as written but are instead rendered to static HTML. Other files (like CSS) are sent to the browser but may be optimized or bundled with other CSS files for performance. :::tip -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. +While this guide describes some popular conventions used in the Astro community, the only directory reserved by Astro is `src/pages/`. You are free to rename and reorganize any other directories in a way that works best for you. ::: ### `src/pages` @@ -86,10 +90,6 @@ Pages routes are created for your site by adding [supported file types](/en/basi This is a common convention in Astro projects, but it is not required. Feel free to organize your components however you like! -### `src/content` - -The `src/content/` directory is reserved to store [content collections](/en/guides/content-collections/) and a configuration file. No other files are allowed inside this folder. - ### `src/layouts` [Layouts](/en/basics/layouts/) are Astro components that define the UI structure shared by one or more [pages](/en/basics/astro-pages/). @@ -104,7 +104,7 @@ It is a common convention to store your CSS or Sass files in a `src/styles` dire The `public/` directory is for files and assets in your project that do not need to be processed during Astro's build process. The files in this folder will be copied into the build folder untouched, and then your site will be built. -This behavior makes `public/` ideal for common assets like images and fonts, or special files such as `robots.txt` and `manifest.webmanifest`. +This behavior makes `public/` ideal for common assets that do not require any processing, like some images and fonts, or special files such as `robots.txt` and `manifest.webmanifest`. You can place CSS and JavaScript in your `public/` directory, but be aware that those files will not be bundled or optimized in your final build. diff --git a/src/content/docs/en/guides/actions.mdx b/src/content/docs/en/guides/actions.mdx index a37797765c761..d4714b5014402 100644 --- a/src/content/docs/en/guides/actions.mdx +++ b/src/content/docs/en/guides/actions.mdx @@ -598,7 +598,7 @@ export const onRequest = defineMiddleware(async (context, next) => { // Optional: delete the session after the page is rendered. // Feel free to implement your own persistence strategy await actionStore.delete(sessionId); - ctx.cookies.delete("action-session-id"); + context.cookies.delete("action-session-id"); return next(); } diff --git a/src/content/docs/en/guides/authentication.mdx b/src/content/docs/en/guides/authentication.mdx index ead734ff7c3e0..0859f9d0d903b 100644 --- a/src/content/docs/en/guides/authentication.mdx +++ b/src/content/docs/en/guides/authentication.mdx @@ -81,9 +81,9 @@ export default defineConfig({ ### Configuration -Create an `auth.config.mjs` file in your project's root directory. Add any auth [providers](https://authjs.dev/getting-started/providers) or methods you wish to support, along with any environment variables they require. +Create an `auth.config.ts` file in your project's root directory. Add any auth [providers](https://authjs.dev/getting-started/providers) or methods you wish to support, along with any environment variables they require. -```ts title="auth.config.mjs" +```ts title="auth.config.ts" import GitHub from '@auth/core/providers/github'; import { defineConfig } from 'auth-astro'; diff --git a/src/content/docs/en/guides/cms/cloudcannon.mdx b/src/content/docs/en/guides/cms/cloudcannon.mdx index dcf2a3e7f2ca6..7ed6bd1f52997 100644 --- a/src/content/docs/en/guides/cms/cloudcannon.mdx +++ b/src/content/docs/en/guides/cms/cloudcannon.mdx @@ -12,10 +12,12 @@ i18nReady: true import Grid from '~/components/FluidGrid.astro' import Card from '~/components/ShowcaseCard.astro' -[CloudCannon](https://cloudcannon.com) is a Git-based content management system that provides a visual editor for your content. +[CloudCannon](https://cloudcannon.com) is a Git-based headless content management system that provides a visual editor for your content. ## Official Resources +- [Astro Starter Template](https://cloudcannon.com/templates/astro-starter/) +- [Astro Multilingual Starter Template](https://cloudcannon.com/templates/astro-multilingual-starter/) - [Astro Starter Guide](https://cloudcannon.com/documentation/guides/astro-starter-guide/) - [Bookshop & Astro Guide](https://cloudcannon.com/documentation/guides/bookshop-astro-guide/) - [Astro Beginner Tutorial Series](https://cloudcannon.com/tutorials/astro-beginners-tutorial-series/) @@ -30,4 +32,4 @@ import Card from '~/components/ShowcaseCard.astro' - \ No newline at end of file + diff --git a/src/content/docs/en/guides/content-collections.mdx b/src/content/docs/en/guides/content-collections.mdx index cc15b12bd3642..da0f3d31c5e77 100644 --- a/src/content/docs/en/guides/content-collections.mdx +++ b/src/content/docs/en/guides/content-collections.mdx @@ -165,7 +165,7 @@ The `parser` argument also allows you to load a single collection from a nested {"dogs": [{}], "cats": [{}]} ``` -You can seperate these collections by passing a custom `parser` to the `file()` loader for each collection: +You can separate these collections by passing a custom `parser` to the `file()` loader for each collection: ```typescript title="src/content.config.ts" const dogs = defineCollection({ diff --git a/src/content/docs/en/guides/deploy/aws.mdx b/src/content/docs/en/guides/deploy/aws.mdx index 6a987adfec73f..efd8d0e60bdb1 100644 --- a/src/content/docs/en/guides/deploy/aws.mdx +++ b/src/content/docs/en/guides/deploy/aws.mdx @@ -150,7 +150,7 @@ To connect S3 with Cloudfront, create a CloudFront distribution with the followi This configuration will serve your site using the Cloudfront CDN network. You can find your CloudFront distribution URL in the bucket's **Distributions > Domain name**. :::note -When connecting CloudFront to an S3 static website endpoint, you rely on S3 bucket policies for access control. See [S3 static website hosting](/en/guides/deploy/aws/#s3-static-website-hosting) section for more information about bucket policies. +When connecting CloudFront to an S3 static website endpoint, you rely on S3 bucket policies for access control. See [S3 static website hosting](#s3-static-website-hosting) section for more information about bucket policies. ::: ## Continuous deployment with GitHub Actions diff --git a/src/content/docs/en/guides/deploy/deno.mdx b/src/content/docs/en/guides/deploy/deno.mdx index 1078805feffd4..1282364c87fed 100644 --- a/src/content/docs/en/guides/deploy/deno.mdx +++ b/src/content/docs/en/guides/deploy/deno.mdx @@ -6,7 +6,6 @@ sidebar: type: deploy i18nReady: true --- -import ReadMore from '~/components/ReadMore.astro'; import { Steps } from '@astrojs/starlight/components'; import StaticSsrTabs from '~/components/tabs/StaticSsrTabs.astro'; diff --git a/src/content/docs/en/guides/deploy/google-cloud.mdx b/src/content/docs/en/guides/deploy/google-cloud.mdx index 6e3f18321ce19..0d356f6d67463 100644 --- a/src/content/docs/en/guides/deploy/google-cloud.mdx +++ b/src/content/docs/en/guides/deploy/google-cloud.mdx @@ -65,7 +65,7 @@ docker push HOSTNAME/PROJECT-ID/IMAGE:TAG Change the following values in the commands above to match your project: - `SOURCE_IMAGE`: the local image name or image ID. -- `HOSTNAME`: the registry host (`gcr.io`, `eu.gcr.io`, `asia.gcr.io`, `us.gcr.io`). +- `HOSTNAME`: the registry host (`gcr.io`, `eu.gcr.io`, `asia.gcr.io`, `us.gcr.io`, `docker.io`). - `PROJECT`: your Google Cloud project ID. - `TARGET-IMAGE`: the name for the image when it's stored in the registry. - `TAG` is the version associated with the image. diff --git a/src/content/docs/en/guides/deploy/vercel.mdx b/src/content/docs/en/guides/deploy/vercel.mdx index c9ec21326750f..6566ab3e4d512 100644 --- a/src/content/docs/en/guides/deploy/vercel.mdx +++ b/src/content/docs/en/guides/deploy/vercel.mdx @@ -6,6 +6,7 @@ sidebar: type: deploy i18nReady: true --- +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import ReadMore from '~/components/ReadMore.astro'; import { Steps } from '@astrojs/starlight/components'; @@ -27,18 +28,46 @@ To enable SSR in your Astro project and deploy on Vercel: Add [the Vercel adapter](/en/guides/integrations-guide/vercel/) to enable SSR in your Astro project with the following `astro add` command. This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step. -```bash -npx astro add vercel -``` + + + ```shell + npx astro add vercel + ``` + + + ```shell + pnpm astro add vercel + ``` + + + ```shell + yarn astro add vercel + ``` + + If you prefer to install the adapter manually instead, complete the following two steps: -1. Install [the `@astrojs/vercel` adapter](/en/guides/integrations-guide/vercel/) to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal: +1. Install [the `@astrojs/vercel` adapter](/en/guides/integrations-guide/vercel/) to your project’s dependencies using your preferred package manager. - ```bash + + + ```shell npm install @astrojs/vercel - ``` + ``` + + + ```shell + pnpm add @astrojs/vercel + ``` + + + ```shell + yarn add @astrojs/vercel + ``` + + 1. Add two new lines to your `astro.config.mjs` project configuration file. @@ -78,10 +107,26 @@ After your project has been imported and deployed, all subsequent pushes to bran 1. Install the [Vercel CLI](https://vercel.com/cli) and run `vercel` to deploy. - ```bash - npm install -g vercel - vercel - ``` + + + ```shell + npm install -g vercel + vercel + ``` + + + ```shell + pnpm add -g vercel + vercel + ``` + + + ```shell + yarn global add vercel + vercel + ``` + + 2. Vercel will automatically detect Astro and configure the right settings. diff --git a/src/content/docs/en/guides/imports.mdx b/src/content/docs/en/guides/imports.mdx index 93943efd9cf40..78e694b3019ca 100644 --- a/src/content/docs/en/guides/imports.mdx +++ b/src/content/docs/en/guides/imports.mdx @@ -206,7 +206,7 @@ These aliases are also integrated automatically into [VS Code](https://code.visu ```astro title="src/components/my-component.astro" {3,4} --- // imports all files that end with `.md` in `./src/pages/post/` -const matches = await import.meta.glob('../pages/post/*.md', { eager: true }); +const matches = import.meta.glob('../pages/post/*.md', { eager: true }); const posts = Object.values(matches); --- @@ -226,7 +226,7 @@ Astro components imported using `import.meta.glob` are of type [`AstroInstance`] ```astro title="src/pages/component-library.astro" {8} --- // imports all files that end with `.astro` in `./src/components/` -const components = Object.values(await import.meta.glob('../components/*.astro', { eager: true })); +const components = Object.values(import.meta.glob('../components/*.astro', { eager: true })); --- {components.map((component) => ( @@ -248,7 +248,7 @@ A common workaround is to instead import a larger set of files that includes all const { postSlug } = Astro.props; const pathToMyFeaturedPost = `src/pages/blog/${postSlug}.md`; -const posts = await Object.values(await import.meta.glob("../pages/blog/*.md", { eager: true })); +const posts = Object.values(import.meta.glob("../pages/blog/*.md", { eager: true })); const myFeaturedPost = posts.find(post => post.file.includes(pathToMyFeaturedPost)); --- @@ -287,12 +287,13 @@ You can optionally provide a type for the `frontmatter` variable using a TypeScr ```astro --- +import type { MarkdownInstance } from 'astro'; interface Frontmatter { title: string; description?: string; } -const posts = import.meta.glob>('./posts/**/*.md'); +const posts = Object.values(import.meta.glob>('./posts/**/*.md', { eager: true })); ---
    @@ -323,7 +324,7 @@ Other files may have various different interfaces, but `import.meta.glob()` acce interface CustomDataFile { default: Record; } -const data = await import.meta.glob('../data/**/*.js'); +const data = import.meta.glob('../data/**/*.js'); --- ``` diff --git a/src/content/docs/en/guides/integrations-guide/mdx.mdx b/src/content/docs/en/guides/integrations-guide/mdx.mdx index d6e45b210a294..f60bdd790b640 100644 --- a/src/content/docs/en/guides/integrations-guide/mdx.mdx +++ b/src/content/docs/en/guides/integrations-guide/mdx.mdx @@ -96,7 +96,7 @@ It also adds extra features to standard MDX, including support for Markdown-styl `.mdx` files must be written in [MDX syntax](https://mdxjs.com/docs/what-is-mdx/#mdx-syntax) rather than Astro’s HTML-like syntax. -### Using MDX wth content collections +### Using MDX with content collections To include MDX files in a content collection, make sure that your [collection loader](/en/guides/content-collections/#defining-the-collection-loader) is configured to load content from `.mdx` files: @@ -105,12 +105,13 @@ import { defineCollection, z } from 'astro:content'; import { glob } from 'astro/loaders'; const blog = defineCollection({ - loader: glob({ pattern: "**\/*.{md,mdx}", base: "./src/blog" }), + loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/blog" }), schema: z.object({ title: z.string(), description: z.string(), pubDate: z.coerce.date(), }) +}); export const collections = { blog }; ``` @@ -131,7 +132,7 @@ Or you can use that exported `title` in your page using `import` and `import.met ```astro title="src/pages/index.astro" --- -const matches = await import.meta.glob('./posts/*.mdx', { eager: true }); +const matches = import.meta.glob('./posts/*.mdx', { eager: true }); const posts = Object.values(matches); --- diff --git a/src/content/docs/en/guides/internationalization.mdx b/src/content/docs/en/guides/internationalization.mdx index c76e14dbeaea6..e210b84c37816 100644 --- a/src/content/docs/en/guides/internationalization.mdx +++ b/src/content/docs/en/guides/internationalization.mdx @@ -40,7 +40,7 @@ export default defineConfig({ Organize your content folders with localized content by language. Create individual `/[locale]/` folders anywhere within `src/pages/` and Astro's [file-based routing](/en/guides/routing/) will create your pages at corresponding URL paths. -Your folder names must match the items in `locales` exactly. Include a localized folder for your `defaultLocale` only if you configure `prefixDefaultLocale: true` to show a localized URL path for your default language (e.g. /en/about/). +Your folder names must match the items in `locales` exactly. Include a localized folder for your `defaultLocale` only if you configure `prefixDefaultLocale: true` to show a localized URL path for your default language (e.g. `/en/about/`). - src @@ -255,7 +255,7 @@ This routing option allows you to customize your domains on a per-language basis Add `i18n.domains` to map any of your supported `locales` to custom URLs: -```js title="astro.config.mjs" {3-7} ins={14-21} +```js title="astro.config.mjs" {3-7} ins={14-17} import { defineConfig } from "astro/config" export default defineConfig({ site: "https://example.com", @@ -334,7 +334,7 @@ export default defineConfig({ locales: ["es", "en", "fr"], locales: ["es", "en", { path: "french", // no slashes included - codes: ["fr", "fr-BR", "fr-CA"] + codes: ["fr", "fr-BR", "fr-CA"] }], defaultLocale: "en", routing: { diff --git a/src/content/docs/en/guides/markdown-content.mdx b/src/content/docs/en/guides/markdown-content.mdx index 87e0dcb27ddfc..6558c8cd582c5 100644 --- a/src/content/docs/en/guides/markdown-content.mdx +++ b/src/content/docs/en/guides/markdown-content.mdx @@ -45,7 +45,7 @@ Here is my _great_ post! ```astro title="src/pages/my-posts.astro" --- import * as greatPost from '../posts/great-post.md'; -const posts = Object.values(await import.meta.glob('../posts/*.md', { eager: true })); +const posts = Object.values(import.meta.glob('../posts/*.md', { eager: true })); ---

    {greatPost.frontmatter.title}

    @@ -116,7 +116,7 @@ import {Content as PromoBanner} from '../components/promoBanner.md'; import { getEntry, render } from 'astro:content'; const product = await getEntry('products', 'shirt'); -const { Content } = await render(); +const { Content } = await render(product); ---

    Today's promo

    @@ -406,4 +406,4 @@ const markdown = await response.text(); const content = marked.parse(markdown); ---
    -``` \ No newline at end of file +``` diff --git a/src/content/docs/en/guides/migrate-to-astro/from-create-react-app.mdx b/src/content/docs/en/guides/migrate-to-astro/from-create-react-app.mdx index e1eab6db10cf6..6957004ec1b65 100644 --- a/src/content/docs/en/guides/migrate-to-astro/from-create-react-app.mdx +++ b/src/content/docs/en/guides/migrate-to-astro/from-create-react-app.mdx @@ -339,7 +339,7 @@ import { getCollection } from 'astro:content'; const allBlogPosts = await getCollection('blog'); // Get all `src/pages/posts/` entries -const allPosts = await Object.values(await import.meta.glob('../pages/post/*.md', { eager: true })); +const allPosts = Object.values(import.meta.glob('../pages/post/*.md', { eager: true })); // Fetch remote data const response = await fetch('https://randomuser.me/api/'); diff --git a/src/content/docs/en/guides/migrate-to-astro/from-gatsby.mdx b/src/content/docs/en/guides/migrate-to-astro/from-gatsby.mdx index 676185abaa53e..d06d90806f1df 100644 --- a/src/content/docs/en/guides/migrate-to-astro/from-gatsby.mdx +++ b/src/content/docs/en/guides/migrate-to-astro/from-gatsby.mdx @@ -368,7 +368,7 @@ import { getCollection } from 'astro:content'; const allBlogPosts = await getCollection('blog'); // Get all `src/pages/posts/` entries -const allPosts = await Object.values(await import.meta.glob('../pages/post/*.md', { eager: true })); +const allPosts = Object.values(import.meta.glob('../pages/post/*.md', { eager: true })); --- export const pageQuery = graphql` diff --git a/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx index 52ea16572e4b9..0c588394ef8cf 100644 --- a/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx +++ b/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx @@ -397,7 +397,7 @@ import { getCollection } from 'astro:content'; const allBlogPosts = await getCollection('blog'); // Get all `src/pages/posts/` entries -const allPosts = Object.values(await import.meta.glob('../pages/posts/*.md', { eager: true })); +const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true })); const response = await fetch('https://randomuser.me/api/'); const data = await response.json(); diff --git a/src/content/docs/en/guides/routing.mdx b/src/content/docs/en/guides/routing.mdx index 18e0745382af8..491d56b7cddc9 100644 --- a/src/content/docs/en/guides/routing.mdx +++ b/src/content/docs/en/guides/routing.mdx @@ -532,7 +532,7 @@ In the following example, we will implement nested pagination to build the URLs // src/pages/[tag]/[page].astro export async function getStaticPaths({ paginate }) { const allTags = ['red', 'blue', 'green']; - const allPosts = Object.values(await import.meta.glob('../pages/post/*.md', { eager: true })); + const allPosts = Object.values(import.meta.glob('../pages/post/*.md', { eager: true })); // For every tag, return a paginate() result. // Make sure that you pass `{params: {tag}}` to `paginate()` // so that Astro knows which tag grouping the result is for. diff --git a/src/content/docs/en/guides/upgrade-to/v5.mdx b/src/content/docs/en/guides/upgrade-to/v5.mdx index 6c44b2fdb0b6f..771df774f2821 100644 --- a/src/content/docs/en/guides/upgrade-to/v5.mdx +++ b/src/content/docs/en/guides/upgrade-to/v5.mdx @@ -722,7 +722,7 @@ Astro 5.0 removes this access as it was never intentionally exposed for client u #### What should I do? -If you are currently currently using `astro:content` in the client, pass the data you need through props to your client components instead: +If you are currently using `astro:content` in the client, pass the data you need through props to your client components instead: ```astro title="src/pages/blog.astro" --- @@ -987,6 +987,7 @@ Object.assign(ctx.locals, { } }) ``` + See more about [storing data in `context.locals`](/en/guides/middleware/#storing-data-in-contextlocals). ### Changed: `params` no longer decoded @@ -1015,7 +1016,7 @@ const { id } = Astro.params; --- ``` -Note that the use of [`decodeURIComponent`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent)) is discouraged for `getStaticPaths` because it decodes more characters than it should, for example `/`, `?`, `#` and more. +Note that the use of [`decodeURIComponent`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent) is discouraged for `getStaticPaths` because it decodes more characters than it should, for example `/`, `?`, `#` and more. Read more about [creating dynamic routes with `params`](/en/guides/routing/#static-ssg-mode). @@ -1046,7 +1047,7 @@ function useRoute(route: IntegrationRouteData) { -In Astro v4.x, `RouteData.distURL` was `undefined` or a `URL` +In Astro v4.x, `RouteData.distURL` was `undefined` or a `URL`. Astro v5.0 updates the shape of `IntegrationRouteData.distURL` to be `undefined` or an array of `URL`s. This fixes a previous error because a route can generate multiple files on disk, especially when using dynamic routes such as `[slug]` or `[...slug]`. diff --git a/src/content/docs/en/guides/view-transitions.mdx b/src/content/docs/en/guides/view-transitions.mdx index 5018f7b581931..d5ef68792a41c 100644 --- a/src/content/docs/en/guides/view-transitions.mdx +++ b/src/content/docs/en/guides/view-transitions.mdx @@ -565,7 +565,7 @@ If you have code that sets up a global state in an inline script, this state wil ## Lifecycle events -The `` router fires a number of events on the `document` during navigation. These events provide hooks into the lifecycle of navigation, allowing you to do things like show indicators that a new page is loading, override default behavior, and restore state as navigation is completing. +The `` router fires a number of events on the `document` during navigation. These events provide hooks into the lifecycle of navigation, allowing you to do things like show indicators that a new page is loading, override default behavior, and restore state as navigation is completing. The navigation process involves a **preparation** phase, when new content is loaded; a **DOM swap** phase, where the old page's content is replaced by the new page's content; and a **completion** phase where scripts are executed, loading is reported as completed and clean-up work is carried out. diff --git a/src/content/docs/en/install-and-setup.mdx b/src/content/docs/en/install-and-setup.mdx index ea699821eaf40..5b84abaefc43c 100644 --- a/src/content/docs/en/install-and-setup.mdx +++ b/src/content/docs/en/install-and-setup.mdx @@ -105,19 +105,19 @@ Run the following command in your terminal, substituting any integration that su ```shell # create a new project with react and tailwind - npm create astro@latest -- --add react tailwind + npm create astro@latest -- --add react --add tailwind ``` ```shell # create a new project with react and tailwind - pnpm create astro@latest --add react tailwind + pnpm create astro@latest --add react --add tailwind ``` ```shell # create a new project with react and tailwind - yarn create astro --add react tailwind + yarn create astro --add react --add tailwind ``` diff --git a/src/content/docs/en/recipes/rss.mdx b/src/content/docs/en/recipes/rss.mdx index 5fbcfbfe87955..5578dcd513092 100644 --- a/src/content/docs/en/recipes/rss.mdx +++ b/src/content/docs/en/recipes/rss.mdx @@ -102,9 +102,9 @@ export async function GET(context) { title: post.data.title, pubDate: post.data.pubDate, description: post.data.description, - // Compute RSS link from post `slug` - // This example assumes all posts are rendered as `/blog/[slug]` routes - link: `/blog/${post.slug}/`, + // Compute RSS link from post `id` + // This example assumes all posts are rendered as `/blog/[id]` routes + link: `/blog/${post.id}/`, })), }); } @@ -185,7 +185,7 @@ export async function GET(context) { description: 'A humble Astronaut’s guide to the stars', site: context.site, items: blog.map((post) => ({ - link: `/blog/${post.slug}/`, + link: `/blog/${post.id}/`, // Note: this will not process components or JSX expressions in MDX files. content: sanitizeHtml(parser.render(post.body), { allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']) diff --git a/src/content/docs/en/reference/api-reference.mdx b/src/content/docs/en/reference/api-reference.mdx index c85def0623feb..71729fa258584 100644 --- a/src/content/docs/en/reference/api-reference.mdx +++ b/src/content/docs/en/reference/api-reference.mdx @@ -836,7 +836,7 @@ Use [Vite's `import.meta.glob`](https://vite.dev/guide/features.html#glob-import `Astro.glob('../pages/post/*.md')` can be replaced with: -`Object.values(await import.meta.glob('../pages/post/*.md', { eager: true }));` +`Object.values(import.meta.glob('../pages/post/*.md', { eager: true }));` See the [imports guide](/en/guides/imports/#importmetaglob) for more information and usage. ::: diff --git a/src/content/docs/en/reference/routing-reference.mdx b/src/content/docs/en/reference/routing-reference.mdx index 77355087d7764..13c27f4ffff46 100644 --- a/src/content/docs/en/reference/routing-reference.mdx +++ b/src/content/docs/en/reference/routing-reference.mdx @@ -183,6 +183,7 @@ A function that can be returned from [`getStaticPaths()`](#getstaticpaths) to di The following example fetches and passes 150 items to the `paginate` function, and creates static, prerendered pages at build time that will display 10 items per page: ```astro title="src/pages/pokemon/[page].astro" +--- export async function getStaticPaths({ paginate }) { // Load your data with fetch(), getCollection(), etc. const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`); @@ -194,6 +195,7 @@ export async function getStaticPaths({ paginate }) { } const { page } = Astro.props; +--- ``` `paginate()` has the following arguments: diff --git a/src/content/docs/en/tutorial/5-astro-api/1.mdx b/src/content/docs/en/tutorial/5-astro-api/1.mdx index 0ed3ab7b91bd9..d3c5a5a35739a 100644 --- a/src/content/docs/en/tutorial/5-astro-api/1.mdx +++ b/src/content/docs/en/tutorial/5-astro-api/1.mdx @@ -29,7 +29,7 @@ Now that you have a few blog posts to link to, it's time to configure the Blog p ```astro title="src/pages/blog.astro" ins={3} --- import BaseLayout from '../layouts/BaseLayout.astro' - const allPosts = Object.values(await import.meta.glob('./posts/*.md', { eager: true })); + const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true })); const pageTitle = "My Astro Learning Blog"; --- @@ -48,7 +48,7 @@ Now that you have a few blog posts to link to, it's time to configure the Blog p ```astro title="src/pages/blog.astro" del={9,10,11} ins={13} --- import BaseLayout from '../layouts/BaseLayout.astro' - const allPosts = await Object.values(import.meta.glob('./posts/*.md', { eager: true })); + const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true })); const pageTitle = "My Astro Learning Blog"; --- @@ -141,7 +141,7 @@ Try on your own to make all the necessary changes to your Astro project so that --- import BaseLayout from '../layouts/BaseLayout.astro'; import BlogPost from '../components/BlogPost.astro'; - const allPosts = Object.values(await import.meta.glob('../pages/posts/*.md', { eager: true })); + const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true })); const pageTitle = "My Astro Learning Blog"; --- ``` @@ -161,7 +161,7 @@ Try on your own to make all the necessary changes to your Astro project so that --- import BaseLayout from '../layouts/BaseLayout.astro'; import BlogPost from '../components/BlogPost.astro'; - const allPosts = Object.values(await import.meta.glob('../pages/posts/*.md', { eager: true })); + const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true })); const pageTitle = "My Astro Learning Blog" --- @@ -186,7 +186,7 @@ If your Astro component contains the following line of code: ```astro --- -const myPosts = Object.values(await import.meta.glob('./posts/*.md', { eager: true })); +const myPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true })); --- ``` diff --git a/src/content/docs/en/tutorial/5-astro-api/2.mdx b/src/content/docs/en/tutorial/5-astro-api/2.mdx index de6ac486ad125..48f4bcf44cadb 100644 --- a/src/content/docs/en/tutorial/5-astro-api/2.mdx +++ b/src/content/docs/en/tutorial/5-astro-api/2.mdx @@ -70,7 +70,7 @@ You can create entire sets of pages dynamically using `.astro` files that export import BaseLayout from '../../layouts/BaseLayout.astro'; export async function getStaticPaths() { - const allPosts = Object.values(await import.meta.glob('../posts/*.md', { eager: true })); + const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true })); return [ {params: {tag: "astro"}, props: {posts: allPosts}}, @@ -183,7 +183,7 @@ Even if it looks challenging, you can try following along with the steps to buil import BaseLayout from '../../layouts/BaseLayout.astro'; export async function getStaticPaths() { - const allPosts = Object.values(await import.meta.glob('../posts/*.md', { eager: true })); + const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true })); const uniqueTags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())]; } @@ -249,7 +249,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro'; import BlogPost from '../../components/BlogPost.astro'; export async function getStaticPaths() { - const allPosts = Object.values(await import.meta.glob('../posts/*.md', { eager: true })); + const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true })); const uniqueTags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())]; diff --git a/src/content/docs/en/tutorial/5-astro-api/3.mdx b/src/content/docs/en/tutorial/5-astro-api/3.mdx index a91059fc74058..fcf4002bb72cb 100644 --- a/src/content/docs/en/tutorial/5-astro-api/3.mdx +++ b/src/content/docs/en/tutorial/5-astro-api/3.mdx @@ -114,7 +114,7 @@ Fortunately, you already know a way to grab the data from all your Markdown file ```astro title = "src/pages/tags/index.astro" ins={3} --- import BaseLayout from '../../layouts/BaseLayout.astro'; - const allPosts = Object.values(await import.meta.glob('../posts/*.md', { eager: true })); + const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true })); const pageTitle = "Tag Index"; --- ``` @@ -125,7 +125,7 @@ Fortunately, you already know a way to grab the data from all your Markdown file ```astro title = "src/pages/tags/index.astro" ins={4} --- import BaseLayout from '../../layouts/BaseLayout.astro'; - const allPosts = Object.values(await import.meta.glob('../posts/*.md', { eager: true })); + const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true })); const tags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())]; const pageTitle = "Tag Index"; --- @@ -209,7 +209,7 @@ Here is what your new page should look like: ```astro title="src/pages/tags/index.astro" --- import BaseLayout from '../../layouts/BaseLayout.astro'; -const allPosts = Object.values(await import.meta.glob('../posts/*.md', { eager: true })); +const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true })); const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())]; const pageTitle = "Tag Index"; --- diff --git a/src/content/docs/en/tutorial/6-islands/4.mdx b/src/content/docs/en/tutorial/6-islands/4.mdx index a35aee44fb2b6..54abb22574bae 100644 --- a/src/content/docs/en/tutorial/6-islands/4.mdx +++ b/src/content/docs/en/tutorial/6-islands/4.mdx @@ -169,7 +169,7 @@ Upgrade to the latest version of Astro, and upgrade all integrations to their la import MarkdownPostLayout from '../../layouts/MarkdownPostLayout.astro'; export async function getStaticPaths() { - const posts = await getCollection('posts'); + const posts = await getCollection('blog'); return posts.map(post => ({ params: { slug: post.id }, props: { post }, })); @@ -207,7 +207,7 @@ Upgrade to the latest version of Astro, and upgrade all integrations to their la import BlogPost from "../components/BlogPost.astro"; const pageTitle = "My Astro Learning Blog"; - const allPosts = Object.values(await import.meta.glob("../pages/posts/*.md", { eager: true })); + const allPosts = Object.values(import.meta.glob("../pages/posts/*.md", { eager: true })); const allPosts = await getCollection("blog"); --- ``` diff --git a/src/content/docs/en/upgrade-astro.mdx b/src/content/docs/en/upgrade-astro.mdx index 006beee56fb71..2a484d2d350e4 100644 --- a/src/content/docs/en/upgrade-astro.mdx +++ b/src/content/docs/en/upgrade-astro.mdx @@ -118,6 +118,7 @@ See the upgrade guides below for an explanation of changes, comparing the new ve Documentation for older versions of Astro is not maintained, but is available as a static snapshot. Use these versions of docs if you are unable to upgrade your project, but still wish to consult guides and reference: +- [unmaintained v4.16.17 snapshot](https://v4.docs.astro.build/en/getting-started/) - [unmaintained v3.6.3 snapshot](https://docs-git-v3-docs-unmaintained-astrodotbuild.vercel.app/) - [unmaintained v2.10.15 snapshot](https://deploy-preview-4405--astro-docs-2.netlify.app/en/getting-started/) diff --git a/src/content/docs/fr/basics/astro-components.mdx b/src/content/docs/fr/basics/astro-components.mdx index 64360b653fc8b..1076ee7ceff42 100644 --- a/src/content/docs/fr/basics/astro-components.mdx +++ b/src/content/docs/fr/basics/astro-components.mdx @@ -1,17 +1,26 @@ --- title: Composants -description: Une introduction à la syntaxe des composants .astro. +description: Une introduction aux composants Astro. i18nReady: true --- -**Les composants Astro** sont les blocs de base de tout projet Astro. Ce sont des composants avec seulement du HTML, sans exécution côté client. Vous pouvez repérer un composant Astro par son extension de fichier : `.astro`. +import ReadMore from '~/components/ReadMore.astro'; + +**Les composants Astro** sont les éléments de base de tout projet Astro. Il s'agit de composants de template HTML uniquement, sans exécution côté client, qui utilisent l'extension de fichier `.astro`. -Les composants Astro sont extrêmement flexibles. Souvent, un composant Astro contiendra une **interface utilisateur réutilisable sur la page**, comme un en-tête ou une carte de profil. À d'autres moments, un composant Astro peut contenir un petit extrait de code HTML, comme une collection de balises `` courantes qui facilitent le travail avec le référencement. Les composants Astro peuvent même contenir la mise en page entière d'une page. +:::note +Si vous connaissez le HTML, vous en savez déjà assez pour écrire votre premier composant Astro. -La chose la plus importante à savoir sur les composants Astro est qu'ils **ne sont pas rendus côté client**. Ils sont rendus en HTML soit au moment de la construction, soit à la demande en utilisant le [rendu côté serveur (SSR)](/fr/guides/on-demand-rendering/). Vous pouvez inclure du code JavaScript à l'intérieur de votre composant, il sera entièrement supprimé de la page finale envoyée aux navigateurs de vos utilisateurs. Le résultat est un site plus rapide, sans aucune empreinte JavaScript ajoutée par défaut. +Pour en savoir plus, consultez la [Référence syntaxique Astro](/fr/reference/astro-syntax/). +::: -Lorsque votre composant Astro nécessite une interactivité côté client, vous pouvez ajouter des [balises HTML ` +``` + +### Types de variables + +Il existe trois types de variables d'environnement, déterminées par la combinaison des paramètres `context` (client ou serveur) et `access` (secret ou public) définis dans votre schéma : + +- **Variables publiques du client** : Ces variables se retrouvent à la fois dans vos bundles client et serveur finaux et sont accessibles à la fois depuis le client et le serveur via le module `astro:env/client` : + + ```js + import { API_URL } from "astro:env/client" + ``` + +- **Variables publiques du serveur** : Ces variables se retrouvent dans votre bundle de serveur final et sont accessibles sur le serveur via le module `astro:env/server` : + + ```js + import { PORT } from "astro:env/server" + ``` + +- **Variables secrètes du serveur** : Ces variables ne font pas partie de votre bundle final et sont accessibles sur le serveur via le module `astro:env/server` : + + ```js + import { API_SECRET } from "astro:env/server" + ``` + + Par défaut, les secrets ne sont validés qu'au moment de l'exécution. Vous pouvez activer la validation des variables privées au démarrage en [configurant `validateSecrets: true`](/fr/reference/configuration-reference/#envvalidatesecrets). + +:::note +Les **variables secrètes du client** ne sont pas prises en charge car il n'existe aucun moyen sûr d'envoyer ces données au client. Par conséquent, il n'est pas possible de configurer à la fois `context: "client"` et `access: "secret"` dans votre schéma. +::: + +### Types de données + +Il existe actuellement quatre types de données pris en charge : les chaînes de caractères, les nombres, les énumérations et les booléens : + +```js +import { envField } from "astro/config" + +envField.string({ + // context & access + optional: true, + default: "foo", +}) + +envField.number({ + // context & access + optional: true, + default: 15, +}) + +envField.boolean({ + // context & access + optional: true, + default: true, +}) + +envField.enum({ + // context & access + values: ['foo', 'bar', 'baz'], + optional: true, + default: 'baz', +}) +``` + +Pour une liste complète des champs de validation, consultez la [référence de l'API `envField`](/fr/reference/configuration-reference/#envschema). + +### Récupérer des secrets de manière dynamique + +Malgré la définition de votre schéma, vous souhaiterez peut-être récupérer la valeur brute d'un secret donné ou récupérer des secrets non définis dans votre schéma. Dans ce cas, vous pouvez utiliser `getSecret()` exporté depuis `astro:env/server` : + +```js +import { + FOO, // boolean + getSecret +} from 'astro:env/server' + +getSecret('FOO') // string | undefined ``` + +Apprenez-en davantage dans [la référence de l'API](/fr/reference/modules/astro-env/#getsecret). + +### Limitations + +1. `astro:env` est un module virtuel, ce qui signifie qu'il ne peut être utilisé que dans le contexte Astro. Par exemple, vous pouvez l'utiliser dans : + + - les Middlewares + - les routes et points de terminaison Astro + - les composants Astro + - les composants de framework + - les modules + + Vous ne pouvez pas l'utiliser dans ce qui suit et devrez recourir à `process.env` : + + - `astro.config.mjs` + - les scripts + +2. [`@astrojs/cloudflare`](/fr/guides/integrations-guide/cloudflare/) est un peu différent des autres adaptateurs. Les variables d'environnement sont limitées à la requête, contrairement à Node.js où elles sont globales. + + Cela signifie que vous devez toujours utiliser des secrets dans la portée de la requête : + + ```js title="src/middleware.ts" + import { defineMiddleware } from "astro:middleware" + import { FOO, getSecret } from "astro:env" + + console.log(FOO) // undefined + console.log(getSecret("FOO")) // undefined + + export const onRequest = defineMiddleware((context, next) => { + console.log(FOO) // boolean + console.log(getSecret("FOO")) // string + + return next() + }) + ``` diff --git a/src/content/docs/fr/guides/imports.mdx b/src/content/docs/fr/guides/imports.mdx index 46e61e594ba06..54bbb82e1e2a3 100644 --- a/src/content/docs/fr/guides/imports.mdx +++ b/src/content/docs/fr/guides/imports.mdx @@ -1,6 +1,6 @@ --- -title: Imports -description: Apprendre comment importer différents types de contenu avec Astro. +title: Référence des importations +description: Découvrez comment importer différents types de fichiers dans votre projet Astro. i18nReady: true --- import RecipeLinks from "~/components/RecipeLinks.astro"; @@ -22,11 +22,21 @@ Les types de fichiers suivants sont pris en charge par Astro : - Modules CSS (`.module.css`) - Images et actifs (`.svg`, `.jpg`, `.png`, etc.) -De plus, vous pouvez étendre Astro pour ajouter le support de différents [Frameworks UI](/fr/guides/framework-components/) comme React, Svelte et Vue. Vous pouvez également installer l'[intégration Astro MDX](/fr/guides/integrations-guide/mdx/) et utiliser les fichiers `.mdx` dans votre projet. +De plus, vous pouvez étendre Astro pour ajouter le support de différents [Frameworks UI](/fr/guides/framework-components/) comme React, Svelte et Vue. Vous pouvez également installer l'[intégration Astro MDX](/fr/guides/integrations-guide/mdx/) ou l'[intégration Astro Markdoc](/fr/guides/integrations-guide/markdoc/) pour utiliser les fichiers `.mdx` ou `.mdoc` dans votre projet. ### Les fichiers dans `public/` -Vous pouvez placer n'importe quelle ressource statique dans le répertoire [`public/`](/fr/basics/project-structure/#public) de votre projet, et Astro le copiera directement dans votre version finale sans y toucher. Les fichiers dans le répertoire `public/` ne sont pas construits ou regroupés par Astro, ce qui signifie que n'importe quel type de fichier est supporté. Vous pouvez référencer un fichier `public/` par un chemin d'URL directement dans vos modèles HTML. +Vous pouvez placer n'importe quelle ressource statique dans le répertoire [`public/`](/fr/basics/project-structure/#public) de votre projet, et Astro le copiera directement dans votre version finale sans y toucher. Les fichiers dans le répertoire `public/` ne sont pas construits ou regroupés par Astro, ce qui signifie que n'importe quel type de fichier est supporté. + +Vous pouvez référencer un fichier `public/` par un chemin d'URL directement dans vos modèles HTML. + +```astro +// Pour faire un lien vers /public/reports/annual/2024.pdf +Télécharger la déclaration annuelle 2024 en PDF. + +// Pour afficher /public/assets/cats/ginger.jpg +Un chat orange dort sur un lit. +``` ## Déclarations d'importation @@ -54,7 +64,7 @@ import { getUser } from './user.ts'; import type { UserType } from './user.ts'; ``` -Astro comprend un support intégré pour [TypeScript] (https://www.typescriptlang.org/). Vous pouvez importer des fichiers `.ts` et `.tsx` directement dans votre projet Astro, et même écrire du code TypeScript directement dans votre [script de composant Astro](/fr/basics/astro-components/#le-script-du-composant) et n'importe quelle [balise de scripts](/fr/guides/client-side-scripts/). +Astro comprend un support intégré pour [TypeScript] (https://www.typescriptlang.org/). Vous pouvez importer des fichiers `.ts` et `.tsx` directement dans votre projet Astro, et même écrire du code TypeScript directement dans votre [script de composant Astro](/fr/basics/astro-components/#le-script-du-composant) et dans n'importe quelle [balise de scripts](/fr/guides/client-side-scripts/). **Astro n'effectue aucune vérification de type lui-même.** La vérification de type doit être prise en charge en dehors d'Astro, soit par votre IDE, soit par un script séparé. Pour vérifier le type des fichiers Astro, la commande [`astro check`](/fr/reference/cli-reference/#astro-check) est fournie. @@ -187,16 +197,17 @@ import logoUrl from '@assets/logo.png?url'; Ces alias sont également intégrés automatiquement dans [VS Code](https://code.visualstudio.com/docs/languages/jsconfig) et d'autres éditeurs de code. -## `Astro.glob()` +## `import.meta.glob()` -[`Astro.glob()`](/fr/reference/api-reference/#astroglob) est un moyen d'importer plusieurs fichiers à la fois. +L'utilitaire [`import.meta.glob()` de Vite](https://vite.dev/guide/features.html#glob-import) est un moyen d'importer plusieurs fichiers à la fois en utilisant des modèles glob pour trouver des chemins de fichiers correspondants. -`Astro.glob()` ne prend qu'un seul paramètre : un [pattern global](/fr/guides/imports/) relatif correspondant aux fichiers locaux que vous souhaitez importer. Il est asynchrone et renvoie un tableau des exportations de chaque fichier correspondant. +`import.meta.glob()` prend un [modèle glob relatif](#patterns-globaux) correspondant aux fichiers locaux que vous souhaitez importer comme paramètre. Il renvoie un tableau des exportations de chaque fichier correspondant. Pour charger tous les modules correspondants à l'avance, passez `{ eager: true }` comme deuxième argument : -```astro title="src/components/my-component.astro" +```astro title="src/components/my-component.astro" {3,4} --- // importe tous les fichiers qui se terminent par `.md` dans `./src/pages/post/` -const posts = await Astro.glob('../pages/post/*.md'); +const matches = import.meta.glob('../pages/post/*.md', { eager: true }); +const posts = Object.values(matches); ---
    @@ -204,18 +215,18 @@ const posts = await Astro.glob('../pages/post/*.md'); ))}
    ``` -Les composants Astro importés avec `Astro.glob` sont de type [`AstroInstance`](/fr/reference/api-reference/#fichiers-astro). Vous pouvez effectuer le rendu de chaque instance de composant en utilisant sa propriété `default` : +Les composants Astro importés avec `import.meta.glob` sont de type [`AstroInstance`](#fichiers-astro). Vous pouvez effectuer le rendu de chaque instance de composant en utilisant sa propriété `default` : ```astro title="src/pages/component-library.astro" {8} --- // importe tous les fichiers qui se terminent par `.astro` dans `./src/components/` -const components = await Astro.glob('../components/*.astro'); +const components = Object.values(import.meta.glob('../components/*.astro', { eager: true })); --- {components.map((component) => ( @@ -225,6 +236,97 @@ const components = await Astro.glob('../components/*.astro'); ))} ``` +### Valeurs prises en charge + +La fonction `import.meta.glob()` de Vite ne prend en charge que les chaînes littérales statiques. Elle ne prend pas en charge les variables dynamiques ni l'interpolation de chaîne de caractères. + +Une solution de contournement courante consiste à importer un ensemble de fichiers plus grand qui inclut tous les fichiers dont vous avez besoin, puis à les filtrer : + +```astro {6-7} +--- +// src/components/featured.astro +const { postSlug } = Astro.props; +const pathToMyFeaturedPost = `src/pages/blog/${postSlug}.md`; + +const posts = Object.values(import.meta.glob("../pages/blog/*.md", { eager: true })); +const myFeaturedPost = posts.find(post => post.file.includes(pathToMyFeaturedPost)); +--- + +

    + Jetez un oeil à mon article préféré, {myFeaturedPost.frontmatter.title}! +

    +``` + +### Utilitaires de type d'importation + +#### Fichiers Markdown + +Les fichiers Markdown chargés avec `import.meta.glob()` renvoient l'interface `MarkdownInstance` suivante : + +```ts +export interface MarkdownInstance> { + /* Toutes les données spécifiées dans le frontmatter YAML de ce fichier */ + frontmatter: T; + /* Le chemin d'accès absolu de ce fichier */ + file: string; + /* Le chemin rendu de ce fichier */ + url: string | undefined; + /* Composant Astro qui restitue le contenu de ce fichier */ + Content: AstroComponentFactory; + /** (Markdown seulement) Contenu du fichier Markdown brut, à l'exclusion de la mise en page HTML et du frontmat YAML */ + rawContent(): string; + /** (Markdown seulement) Fichier Markdown compilé en HTML, à l'exclusion de la mise en page HTML */ + compiledContent(): string; + /* Fonction qui renvoie un tableau des éléments h1...h6 dans ce fichier */ + getHeadings(): Promise<{ depth: number; slug: string; text: string }[]>; + default: AstroComponentFactory; +} +``` + +Vous pouvez éventuellement fournir un type pour la variable `frontmatter` à l'aide d'un générique TypeScript. + +```astro +--- +import type { MarkdownInstance } from 'astro'; +interface Frontmatter { + title: string; + description?: string; +} + +const posts = Object.values(import.meta.glob>('./posts/**/*.md', { eager: true })); +--- + +
      + {posts.map(post =>
    • {post.frontmatter.title}
      • )} +
    +``` + +#### Fichiers Astro + +Les fichiers Astro ont l'interface suivante : + +```ts +export interface AstroInstance { + /* Le chemin d'accès de ce fichier */ + file: string; + /* L'URL de ce fichier (s'il se trouve dans le répertoire des pages) */ + url: string | undefined; + default: AstroComponentFactory; +} +``` + +#### Autres fichiers + +D'autres fichiers peuvent avoir différentes interfaces, mais `import.meta.glob()` accepte un générique TypeScript si vous savez exactement ce que contient un type de fichier non reconnu. + +```ts +--- +interface CustomDataFile { + default: Record; +} +const data = import.meta.glob('../data/**/*.js'); +--- +``` ### Patterns globaux @@ -234,19 +336,18 @@ Par exemple, le pattern global `./pages/**/*.{md,mdx}` commence dans le sous-ré #### Patterns globaux dans Astro -Pour être utilisé avec `Astro.glob()`, le pattern global doit être une chaîne littérale et ne peut pas contenir de variables. Voir [le guide de dépannage](/fr/guides/troubleshooting/#astroglob---no-matches-found) pour une solution de contournement. +Pour être utilisé avec `import.meta.glob()`, le modèle glob doit être une chaîne littérale et ne peut contenir aucune variable. En outre, les motifs globaux doivent commencer par l'un des éléments suivants : - `./` (pour commencer dans le répertoire actuel) - `../` (pour démarrer dans le répertoire parent) - `/` (pour démarrer à la racine du projet) - [En savoir plus sur la syntaxe des motifs globaux](https://github.com/mrmlnc/fast-glob#pattern-syntax). -#### `Astro.glob()` vs `getCollection()` +#### `import.meta.glob()` vs `getCollection()` -[Les collections de contenu](/fr/guides/content-collections/) fournissent une [API `getCollection()`](/fr/reference/modules/astro-content/#getcollection) pour charger plusieurs fichiers au lieu de `Astro.glob()`. Si vos fichiers de contenu (par exemple Markdown, MDX, Markdoc) sont situés dans des collections dans le répertoire `src/content/`, utilisez `getCollection()` pour [interroger une collection](/fr/guides/content-collections/#interroger-les-collections) et retourner les entrées de la collection. +[Les collections de contenu](/fr/guides/content-collections/) fournissent une [API `getCollection()`](/fr/reference/modules/astro-content/#getcollection) pour charger plusieurs fichiers au lieu de `import.meta.glob()`. Si vos fichiers de contenu (par exemple Markdown, MDX, Markdoc) sont situés dans des collections dans le répertoire `src/content/`, utilisez `getCollection()` pour [interroger une collection](/fr/guides/content-collections/#interroger-les-collections) et retourner les entrées de la collection. ## WASM diff --git a/src/content/docs/fr/guides/integrations-guide/alpinejs.mdx b/src/content/docs/fr/guides/integrations-guide/alpinejs.mdx index d223a1b884be8..8ac9abebd230b 100644 --- a/src/content/docs/fr/guides/integrations-guide/alpinejs.mdx +++ b/src/content/docs/fr/guides/integrations-guide/alpinejs.mdx @@ -2,6 +2,8 @@ type: integration title: '@astrojs/alpinejs' description: Apprenez à utiliser l'intégration du framework @astrojs/alpinejs pour étendre le support des composants dans votre projet Astro. +sidebar: + label: Alpine.js githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/alpinejs/' category: renderer i18nReady: true diff --git a/src/content/docs/fr/guides/integrations-guide/cloudflare.mdx b/src/content/docs/fr/guides/integrations-guide/cloudflare.mdx index 4779cb112cebf..5a392c15b0d66 100644 --- a/src/content/docs/fr/guides/integrations-guide/cloudflare.mdx +++ b/src/content/docs/fr/guides/integrations-guide/cloudflare.mdx @@ -2,6 +2,8 @@ type: integration title: '@astrojs/cloudflare' description: "Apprendre à utiliser l'adaptateur SSR @astrojs/cloudflare pour déployer votre projet Astro." +sidebar: + label: Cloudflare githubIntegrationURL: 'https://github.com/withastro/adapters/tree/main/packages/cloudflare/' category: adapter i18nReady: true @@ -9,7 +11,7 @@ i18nReady: true import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -Cet adaptateur permet à Astro de déployer votre [site rendu `hybrid` ou `server`](/fr/guides/on-demand-rendering/) sur [Cloudflare](https://www.cloudflare.com/). +Cet adaptateur permet à Astro de déployer vos [routes rendues à la demande](/fr/guides/on-demand-rendering/) sur [Cloudflare](https://www.cloudflare.com/). Si vous utilisez Astro comme constructeur de sites statiques, vous n'avez pas besoin d'adaptateur. @@ -289,8 +291,6 @@ Vous pouvez créer un script pnpm pour lancer `wrangler types` automatiquement a Vous pouvez taper l'objet `runtime` en utilisant `Runtime` : ```ts title="src/env.d.ts" -/// - type Runtime = import('@astrojs/cloudflare').Runtime; declare namespace App { diff --git a/src/content/docs/fr/guides/integrations-guide/db.mdx b/src/content/docs/fr/guides/integrations-guide/db.mdx index e794ee49a1c88..b37f88cea4307 100644 --- a/src/content/docs/fr/guides/integrations-guide/db.mdx +++ b/src/content/docs/fr/guides/integrations-guide/db.mdx @@ -2,6 +2,8 @@ type: integration title: '@astrojs/db' description: "Apprenez à utiliser l'intégration @astrojs/db dans votre projet Astro." +sidebar: + label: DB githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/db/' category: other i18nReady: true diff --git a/src/content/docs/fr/guides/integrations-guide/deno.mdx b/src/content/docs/fr/guides/integrations-guide/deno.mdx index b851cdb073662..b87686fd0d453 100644 --- a/src/content/docs/fr/guides/integrations-guide/deno.mdx +++ b/src/content/docs/fr/guides/integrations-guide/deno.mdx @@ -1,6 +1,8 @@ --- title: '@deno/astro-adapter' description: L'adaptateur Deno Astro +sidebar: + label: Deno i18nReady: true --- diff --git a/src/content/docs/fr/guides/integrations-guide/index.mdx b/src/content/docs/fr/guides/integrations-guide/index.mdx index d35768788b64e..3068d77f0ebff 100644 --- a/src/content/docs/fr/guides/integrations-guide/index.mdx +++ b/src/content/docs/fr/guides/integrations-guide/index.mdx @@ -1,5 +1,8 @@ --- title: Utiliser les Intégrations +description: Apprenez à ajouter des intégrations à votre projet Astro. +sidebar: + label: Vue d'ensemble des intégrations i18nReady: true --- @@ -13,6 +16,7 @@ Les **intégrations Astro** permettent d'ajouter de nouvelles fonctionnalités e Les intégrations peuvent... - Débloquer React, Vue, Svelte, Solid et d'autres frameworks UI populaires. +- Activer le rendu à la demande avec un [adaptateur SSR](/fr/guides/on-demand-rendering/). - Intégrer des outils comme Tailwind et Partytown avec quelques lignes de code. - Ajouter de nouvelles fonctionnalités à votre projet, comme la génération automatique de sitemap. - Écrire du code personnalisé qui s'accroche au processus de construction, au serveur de développement, et plus encore. diff --git a/src/content/docs/fr/guides/integrations-guide/lit.mdx b/src/content/docs/fr/guides/integrations-guide/lit.mdx index be4a4de709f4e..e157dac0d24f8 100644 --- a/src/content/docs/fr/guides/integrations-guide/lit.mdx +++ b/src/content/docs/fr/guides/integrations-guide/lit.mdx @@ -1,218 +1,24 @@ --- -type: integration -title: '@astrojs/lit' -description: "Apprenez à utiliser l'intégration du framework @astrojs/lit pour élargir la prise en charge des composants dans votre projet Astro." -githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/lit/' -category: renderer +title: 'Lit' +description: Utiliser Lit pour étendre la prise en charge des composants dans votre projet Astro. +sidebar: + label: Lit i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -Cette **[intégration Astro][astro-integration]** permet un rendu côté serveur et une hydratation côté client pour vos éléments personnalisés [Lit](https://lit.dev/). - -## Installation - -Astro inclut une commande `astro add` pour automatiser l'installation des intégrations officielles. Si vous préférez, vous pouvez [installer les intégrations manuellement](#installation-manuelle) à la place. - -Pour installer `@astrojs/lit`, exécutez ce qui suit depuis le répertoire de votre projet et suivez les instructions : - - - - ```sh - npx astro add lit - ``` - - - ```sh - pnpm astro add lit - ``` - - - ```sh - yarn astro add lit - ``` - - - -Si vous rencontrez des problèmes, [n'hésitez pas à nous les signaler sur GitHub](https://github.com/withastro/astro/issues) et essayez les étapes d'installation manuelle ci-dessous. - -### Installation manuelle - -Tout d'abord, installez le paquet `@astrojs/lit` : - - - - ```sh - npm install @astrojs/lit - ``` - - - ```sh - pnpm add @astrojs/lit - ``` - - - ```sh - yarn add @astrojs/lit - ``` - - - -La plupart des gestionnaires de paquets installent également les dépendances associées. Si vous voyez un avertissement "Cannot find package 'lit'" (ou similaire) lorsque vous démarrez Astro, vous devrez installer `lit` et `@webcomponents/template-shadowroot` : - - - - ```sh - npm install lit @webcomponents/template-shadowroot - ``` - - - ```sh - pnpm add lit @webcomponents/template-shadowroot - ``` - - - ```sh - yarn add lit @webcomponents/template-shadowroot - ``` - - - -Ensuite, appliquez l'intégration à votre fichier `astro.config.*` en utilisant la propriété `integrations` : - -```js ins={2} ins="lit()" title="astro.config.mjs" -import { defineConfig } from 'astro/config'; -import lit from '@astrojs/lit'; - -export default defineConfig({ - // ... - integrations: [lit()], -}); -``` - -## Démarrage - -Pour utiliser votre premier composant Lit dans Astro, consultez notre [documentation sur les Frameworks UI][astro-ui-frameworks]. Ceci explique : - -* 📦 comment les composants du Framework sont chargés, -* 💧 les options d'hydratation côté client, et -* 🤝 les possibilités de mélanger et d'imbriquer les Frameworks. - -L'écriture et l'importation d'un composant Lit dans Astro se présentent comme suit : - -```js title="src/components/my-element.js" -import { LitElement, html } from 'lit'; - -export class MyElement extends LitElement { - render() { - return html`

    Hello le monde! Depuis my-element

    `; - } -} - -customElements.define('my-element', MyElement); -``` - -Le composant est maintenant prêt à être importé via le frontmatter Astro : - -```astro title="src/pages/index.astro" ---- -import { MyElement } from '../components/my-element.js'; ---- - - -``` - -:::note -Lit nécessite la présence de variables globales du navigateur tel que `HTMLElement` et `customElements`. Pour cette raison, le moteur de rendu Lit adapte le serveur avec ces éléments globaux pour que Lit puisse fonctionner. Il se peut que vous rencontriez des bibliothèques qui fonctionnent mal à cause de cela. +:::caution[Obsolète] +Cette intégration Astro permettant un rendu à la demande et une hydratation côté client pour vos éléments personnalisés [Lit](https://lit.dev/) a été supprimée dans Astro 5.0. ::: -### Décorateurs expérimentaux - -Pour utiliser les [décorateurs expérimentaux dans Lit](https://lit.dev/docs/components/decorators/), ajoutez ce qui suit à votre fichier `tsconfig.json` : - -```json title="tsconfig.json" add={3} -{ - "compilerOptions": { - "experimentalDecorators": true, - } -} -``` - -Cela vous permet d'utiliser des décorateurs expérimentaux tels que `@customElement` et `@state` pour enregistrer un élément personnalisé et définir une propriété d'état dans votre composant Lit : - -```ts title="src/components/my-element.ts" -import { LitElement, html } from "lit"; -import { customElement, state } from "lit/decorators.js"; - -@customElement("my-element") -export class MyElement extends LitElement { - @state() name = "my-element"; - - override render() { - return html`

    Bonjour à tous ! De ${this.name}

    `; - } -} -``` - -### Polyfills et hydratation - -Le moteur de rendu gère automatiquement l'ajout des polyfills appropriés pour le support des navigateurs qui n'ont pas Declarative Shadow DOM. Le polyfill fait environ *1.5kB*. Si le navigateur supporte Declarative Shadow DOM, moins de 250 octets sont chargés (pour détecter le support). - -L'hydratation est également gérée automatiquement. Vous pouvez utiliser les mêmes directives d'hydratation telles que `client:load`, `client:idle` et `client:visible` que vous pouvez utiliser avec d'autres bibliothèques supportées par Astro. +Vous pouvez continuer à utiliser Lit pour les composants client en ajoutant une balise de script côté client. Par exemple : ```astro ---- -import { MyElement } from '../components/my-element.js'; ---- + - +... ``` -Ce qui précède ne chargera le JavaScript de l'élément que lorsque qu'il sera visible par l'utilsateur. Comme il s'agit d'un rendu serveur, l'utilisateur ne verra pas de jank ; le chargement et l'hydratation se feront de manière transparente. - -## Dépannage - -Pour obtenir de l'aide, consultez le canal `#support` sur [Discord](https://astro.build/chat). Nos sympathiques membres de l'équipe d'assistance sont là pour vous aider ! - -Vous pouvez également consulter notre [Documentation d'intégration Astro][astro-integration] pour plus d'informations sur les intégrations. - -Les problèmes courants sont listés ci-dessous : - -### Éléments globaux du navigateur - -Le SSR de l'intégration Lit fonctionne en ajoutant quelques propriétés globales du navigateur à l'environnement global. Certaines des propriétés ajoutées incluent `window`, `document`, et `location`. - -Ces propriétés globales *peuvent* interférer avec d'autres bibliothèques qui pourraient utiliser l'existence de ces variables pour détecter qu'elles s'exécutent dans le navigateur, alors qu'elles s'exécutent en fait dans le serveur. Cela peut provoquer des bogues avec ces bibliothèques. - -Pour cette raison, l'intégration de Lit peut ne pas être compatible avec ces types de bibliothèques. Une chose qui peut aider est de changer l'ordre des intégrations lorsque Lit interfère avec d'autres intégrations : - -```js lang="js" title="astro.config.mjs" ins={7} del={6} - import { defineConfig } from 'astro/config'; - import vue from '@astrojs/vue'; - import lit from '@astrojs/lit'; - - export default defineConfig({ - integrations: [vue(), lit()] - integrations: [lit(), vue()] - }); -``` - -L'ordre correct peut être différent en fonction de la cause fondamentale du problème. Cependant, il n'est pas garanti que cela corrige tous les problèmes, et certaines bibliothèques ne peuvent pas être utilisées si vous utilisez l'intégration Lit. - -### Gestionnaires de paquets stricts - -Lorsque vous utilisez un [gestionnaire de paquets strict](https://pnpm.io/pnpm-vs-npm#npms-flat-tree) comme `pnpm`, vous pouvez obtenir une erreur telle que `ReferenceError : module is not defined` lors de l'exécution de votre site. Pour remédier à ce problème, hissez les dépendances Lit avec un fichier `.npmrc` : - -```ini title=".npmrc" -public-hoist-pattern[]=*lit* -``` - -### Limites - -L'intégration Lit est alimentée par `@lit-labs/ssr` qui a quelques limitations. Voir leur [documentation sur les limitations](https://www.npmjs.com/package/@lit-labs/ssr#user-content-notes-and-limitations) pour en savoir plus. - -- Astro ne prend pas en charge IntelliSense pour les composants Lit. - -[astro-integration]: /fr/guides/integrations-guide/ - -[astro-ui-frameworks]: /fr/guides/framework-components/#utilisation-des-composants-de-framework +Si vous souhaitez maintenir vous-même une intégration Lit, vous pouvez utiliser la [dernière version publiée de `@astrojs/lit`](https://github.com/withastro/astro/tree/astro%404.13.0/packages/integrations/lit) comme point de départ et mettre à jour les paquets appropriés. diff --git a/src/content/docs/fr/guides/integrations-guide/markdoc.mdx b/src/content/docs/fr/guides/integrations-guide/markdoc.mdx index cd8b58411a209..2d95b1abbb34c 100644 --- a/src/content/docs/fr/guides/integrations-guide/markdoc.mdx +++ b/src/content/docs/fr/guides/integrations-guide/markdoc.mdx @@ -2,6 +2,8 @@ type: integration title: '@astrojs/markdoc' description: "Apprenez à utiliser l'intégration @astrojs/markdoc dans votre projet Astro." +sidebar: + label: Markdoc githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/markdoc/' category: other i18nReady: true @@ -380,7 +382,7 @@ export default defineMarkdocConfig({ ### En-têtes personnalisés -`@astrojs/markdoc` ajoute automatiquement des liens d'ancrage à vos titres, et [génère une liste de `titres` via l'API des Collections de contenu](/fr/guides/content-collections/#rendre-le-contenu-en-html). Pour personnaliser davantage le rendu des titres, vous pouvez appliquer un composant Astro [en tant que nœud Markdoc][markdoc-nodes]. +`@astrojs/markdoc` ajoute automatiquement des liens d'ancrage à vos titres, et [génère une liste de `titres` via l'API des Collections de contenu](/fr/guides/content-collections/#restitution-du-contenu). Pour personnaliser davantage le rendu des titres, vous pouvez appliquer un composant Astro [en tant que nœud Markdoc][markdoc-nodes]. Cet exemple rend un composant `Heading.astro` en utilisant la propriété `render` : @@ -400,7 +402,7 @@ export default defineMarkdocConfig({ Tous les titres Markdown rendront le composant `Heading.astro` et passeront les `attributs` suivants en tant que props du composant : * `level: number` Le niveau de la rubrique 1 - 6 -* `id: string` Un `id` généré à partir du contenu textuel de la rubrique. Cela correspond au `slug` généré par la fonction [content `render()`](/fr/guides/content-collections/#rendre-le-contenu-en-html). +* `id: string` Un `id` généré à partir du contenu textuel de la rubrique. Cela correspond au `slug` généré par la fonction [content `render()`](/fr/guides/content-collections/#restitution-du-contenu). Par exemple, le titre `### Level 3 heading!` passera `level: 3` et `id: 'level-3-heading'` en tant qu'éléments du composant. diff --git a/src/content/docs/fr/guides/integrations-guide/mdx.mdx b/src/content/docs/fr/guides/integrations-guide/mdx.mdx index 5fc08939d427b..276363d4e7d43 100644 --- a/src/content/docs/fr/guides/integrations-guide/mdx.mdx +++ b/src/content/docs/fr/guides/integrations-guide/mdx.mdx @@ -1,6 +1,8 @@ --- type: integration title: '@astrojs/mdx' +sidebar: + label: MDX description: "Apprenez à utiliser l'intégration @astrojs/mdx dans votre projet Astro." githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/mdx/' category: other @@ -94,6 +96,26 @@ Elle ajoute également des fonctionnalités supplémentaires au MDX standard, y Les fichiers `.mdx` doivent être écrits en [syntaxe MDX](https://mdxjs.com/docs/what-is-mdx/#mdx-syntax) plutôt qu'en syntaxe HTML d'Astro. +### Utilisation de MDX avec des collections de contenu + +Pour inclure des fichiers MDX dans une collection de contenus, assurez-vous que votre [chargeur de collection](/fr/guides/content-collections/#définir-le-loader-de-collection) est configuré pour charger du contenu à partir de fichiers `.mdx` : + +```js title="src/content.config.ts" ins="mdx" +import { defineCollection, z } from 'astro:content'; +import { glob } from 'astro/loaders'; + +const blog = defineCollection({ + loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/blog" }), + schema: z.object({ + title: z.string(), + description: z.string(), + pubDate: z.coerce.date(), + }) +}); + +export const collections = { blog }; +``` + ### Utilisation de variables exportées dans MDX MDX permet d'utiliser les instructions `export` pour ajouter des variables à votre contenu MDX ou pour exporter des données vers un composant qui les importe. @@ -110,7 +132,7 @@ Ou vous pouvez utiliser ce `title` exporté dans votre page en utilisant les ins ```astro title="src/pages/index.astro" --- -const matches = await import.meta.glob('./posts/*.mdx', { eager: true }); +const matches = import.meta.glob('./posts/*.mdx', { eager: true }); const posts = Object.values(matches); --- diff --git a/src/content/docs/fr/guides/integrations-guide/netlify.mdx b/src/content/docs/fr/guides/integrations-guide/netlify.mdx index 089b48c0c7cf0..2960ba8b30a73 100644 --- a/src/content/docs/fr/guides/integrations-guide/netlify.mdx +++ b/src/content/docs/fr/guides/integrations-guide/netlify.mdx @@ -2,13 +2,15 @@ type: integration title: '@astrojs/netlify' description: "Apprenez à utiliser l'adaptateur SSR @astrojs/netlify pour déployer votre projet Astro." +sidebar: + label: Netlify githubIntegrationURL: 'https://github.com/withastro/adapters/tree/main/packages/netlify/' category: adapter i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -Cet adaptateur permet à Astro de déployer votre [site rendu `hybride` ou `serveur`](/fr/guides/on-demand-rendering/) sur [Netlify](https://www.netlify.com/). +Cet adaptateur permet à Astro de déployer vos [routes rendues à la demande](/fr/guides/on-demand-rendering/) sur [Netlify](https://www.netlify.com/). Si vous utilisez Astro en tant que constructeur de site statique, vous n'avez pas besoin d'adaptateur. @@ -111,8 +113,6 @@ const { Si vous utilisez TypeScript, vous pouvez obtenir des typages corrects en mettant à jour `src/env.d.ts` pour utiliser `NetlifyLocals` : ```ts title="src/env.d.ts" -/// - type NetlifyLocals = import('@astrojs/netlify').NetlifyLocals declare namespace App { diff --git a/src/content/docs/fr/guides/integrations-guide/node.mdx b/src/content/docs/fr/guides/integrations-guide/node.mdx index 99cbf829ed17b..afaefc925384d 100644 --- a/src/content/docs/fr/guides/integrations-guide/node.mdx +++ b/src/content/docs/fr/guides/integrations-guide/node.mdx @@ -2,6 +2,8 @@ type: integration title: '@astrojs/node' description: "Apprenez à utiliser l'adaptateur SSR @astrojs/node pour déployer votre projet Astro." +sidebar: + label: Node githubIntegrationURL: 'https://github.com/withastro/adapters/tree/main/packages/node/' category: adapter i18nReady: true @@ -9,7 +11,7 @@ i18nReady: true import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -Cet adaptateur permet à Astro de déployer votre [site rendu `hybrid` ou `server`](/fr/guides/on-demand-rendering/) vers des cibles Node. +Cet adaptateur permet à Astro de déployer vos [routes rendues à la demande](/fr/guides/on-demand-rendering/) vers des cibles Node. Si vous utilisez Astro comme constructeur de site statique, vous n'avez pas besoin d'adaptateur. diff --git a/src/content/docs/fr/guides/integrations-guide/partytown.mdx b/src/content/docs/fr/guides/integrations-guide/partytown.mdx index a323c028f000d..1da13bac6cd54 100644 --- a/src/content/docs/fr/guides/integrations-guide/partytown.mdx +++ b/src/content/docs/fr/guides/integrations-guide/partytown.mdx @@ -2,6 +2,8 @@ type: integration title: '@astrojs/partytown' description: "Apprenez à utiliser l'intégration @astrojs/partytown dans votre projet Astro." +sidebar: + label: Partytown githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/partytown/' category: other i18nReady: true diff --git a/src/content/docs/fr/guides/integrations-guide/preact.mdx b/src/content/docs/fr/guides/integrations-guide/preact.mdx index 35d07c20580c8..b4e1158cdf446 100644 --- a/src/content/docs/fr/guides/integrations-guide/preact.mdx +++ b/src/content/docs/fr/guides/integrations-guide/preact.mdx @@ -2,6 +2,8 @@ type: integration title: '@astrojs/preact' description: "Apprenez à utiliser l'intégration du framework @astrojs/preact pour étendre la prise en charge des composants dans votre projet Astro." +sidebar: + label: Preact githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/preact/' category: renderer i18nReady: true @@ -10,7 +12,7 @@ i18nReady: true import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' import Since from '~/components/Since.astro'; -Cette **[intégration Astro][astro-integration]** permet le rendu côté serveur et l'hydratation côté client pour vos composants [Preact](https://preactjs.com/). +Cette **[intégration Astro][astro-integration]** permet le rendu et l'hydratation côté client pour vos composants [Preact](https://preactjs.com/). ## Pourquoi Preact ? diff --git a/src/content/docs/fr/guides/integrations-guide/prefetch.mdx b/src/content/docs/fr/guides/integrations-guide/prefetch.mdx index f6c7352e2ffdd..8cfe9ebc1d5a7 100644 --- a/src/content/docs/fr/guides/integrations-guide/prefetch.mdx +++ b/src/content/docs/fr/guides/integrations-guide/prefetch.mdx @@ -1,6 +1,8 @@ --- title: '@astrojs/prefetch' description: "L'intégration de prefetch, qui est obsolète." +sidebar: + label: Prefetch i18nReady: true --- diff --git a/src/content/docs/fr/guides/integrations-guide/react.mdx b/src/content/docs/fr/guides/integrations-guide/react.mdx index c80622ebfe700..f3fa68b577898 100644 --- a/src/content/docs/fr/guides/integrations-guide/react.mdx +++ b/src/content/docs/fr/guides/integrations-guide/react.mdx @@ -2,13 +2,15 @@ type: integration title: '@astrojs/react' description: "Apprenez à utiliser l'intégration du framework @astrojs/react pour étendre la prise en charge des composants dans votre projet Astro." +sidebar: + label: React githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/react/' category: renderer i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -Cette **[intégration Astro][astro-integration]** permet le rendu côté serveur et l'hydratation côté client pour vos composants [React](https://react.dev/). +Cette **[intégration Astro][astro-integration]** permet le rendu et l'hydratation côté client pour vos composants [React](https://react.dev/). ## Installation diff --git a/src/content/docs/fr/guides/integrations-guide/sitemap.mdx b/src/content/docs/fr/guides/integrations-guide/sitemap.mdx index 44a1b7e8a80d2..551eae3dc0e4f 100644 --- a/src/content/docs/fr/guides/integrations-guide/sitemap.mdx +++ b/src/content/docs/fr/guides/integrations-guide/sitemap.mdx @@ -2,6 +2,8 @@ type: integration title: '@astrojs/sitemap' description: "Apprenez à utiliser l'intégration @astrojs/sitemap dans votre projet Astro." +sidebar: + label: Sitemap githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/sitemap/' category: other i18nReady: true diff --git a/src/content/docs/fr/guides/integrations-guide/solid-js.mdx b/src/content/docs/fr/guides/integrations-guide/solid-js.mdx index 6cd2a16130144..eede284b7a3f3 100644 --- a/src/content/docs/fr/guides/integrations-guide/solid-js.mdx +++ b/src/content/docs/fr/guides/integrations-guide/solid-js.mdx @@ -2,6 +2,8 @@ type: integration title: '@astrojs/solid-js' description: "Apprenez à utiliser l'intégration du framework @astrojs/solid-js pour étendre la prise en charge des composants dans votre projet Astro." +sidebar: + label: SolidJS githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/solid/' category: renderer i18nReady: true @@ -9,7 +11,7 @@ i18nReady: true import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import Since from '~/components/Since.astro'; -Cette **[intégration Astro][astro-integration]** permet le rendu côté serveur et l'hydratation côté client pour vos composants [SolidJS](https://www.solidjs.com/). +Cette **[intégration Astro][astro-integration]** permet le rendu et l'hydratation côté client pour vos composants [SolidJS](https://www.solidjs.com/). ## Installation diff --git a/src/content/docs/fr/guides/integrations-guide/svelte.mdx b/src/content/docs/fr/guides/integrations-guide/svelte.mdx index 51ebab2e1bd1e..208d096158a86 100644 --- a/src/content/docs/fr/guides/integrations-guide/svelte.mdx +++ b/src/content/docs/fr/guides/integrations-guide/svelte.mdx @@ -2,6 +2,8 @@ type: integration title: '@astrojs/svelte' description: "Apprenez à utiliser l'intégration du framework @astrojs/svelte pour étendre la prise en charge des composants dans votre projet Astro." +sidebar: + label: Svelte githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/svelte/' category: renderer i18nReady: true @@ -9,7 +11,7 @@ i18nReady: true import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import Since from '~/components/Since.astro'; -Cette **[intégration Astro][astro-integration]** permet le rendu côté serveur et l'hydratation côté client pour vos 5 composants [Svelte](https://svelte.dev/). Pour le support de Svelte 3 et 4, installez `@astrojs/svelte@5` à la place. +Cette **[intégration Astro][astro-integration]** permet le rendu et l'hydratation côté client pour vos 5 composants [Svelte](https://svelte.dev/). Pour le support de Svelte 3 et 4, installez `@astrojs/svelte@5` à la place. ## Installation diff --git a/src/content/docs/fr/guides/integrations-guide/tailwind.mdx b/src/content/docs/fr/guides/integrations-guide/tailwind.mdx index 5f4a35c09f719..1107aad3c14dd 100644 --- a/src/content/docs/fr/guides/integrations-guide/tailwind.mdx +++ b/src/content/docs/fr/guides/integrations-guide/tailwind.mdx @@ -2,6 +2,8 @@ type: integration title: '@astrojs/tailwind' description: "Apprenez comment utiliser l'intégration @astrojs/tailwind dans votre projet Astro." +sidebar: + label: Tailwind githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/tailwind/' category: other i18nReady: true diff --git a/src/content/docs/fr/guides/integrations-guide/vercel.mdx b/src/content/docs/fr/guides/integrations-guide/vercel.mdx index e3dd66a495b3a..7a6fcdac2cda6 100644 --- a/src/content/docs/fr/guides/integrations-guide/vercel.mdx +++ b/src/content/docs/fr/guides/integrations-guide/vercel.mdx @@ -2,6 +2,8 @@ type: integration title: '@astrojs/vercel' description: "Apprenez à utiliser l'adaptateur SSR @astrojs/vercel pour déployer votre projet Astro." +sidebar: + label: Vercel githubIntegrationURL: 'https://github.com/withastro/adapters/tree/main/packages/vercel/' category: adapter i18nReady: true @@ -10,7 +12,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import ReadMore from '~/components/ReadMore.astro'; import Since from '~/components/Since.astro' -Cet adaptateur permet à Astro de déployer votre [site rendu `hybrid` ou `server`](/fr/guides/on-demand-rendering/) sur [Vercel](https://www.vercel.com/). +Cet adaptateur permet à Astro de déployer vos [routes rendues à la demande](/fr/guides/on-demand-rendering/) sur [Vercel](https://www.vercel.com/). Si vous utilisez Astro comme constructeur de site statique, vous n'avez besoin de cet adaptateur que si vous utilisez des services Vercel supplémentaires (par exemple [Vercel Web Analytics](https://vercel.com/docs/analytics), [Vercel Image Optimization](https://vercel.com/docs/image-optimization)). Sinon, vous n'avez pas besoin d'adaptateur pour déployer votre site `statique`. @@ -70,7 +72,7 @@ Ensuite, ajoutez l'adaptateur et votre [mode de rendu à la demande](/fr/guides/ ```js title="astro.config.mjs" ins={2, 6-7} import { defineConfig } from 'astro/config'; -import vercel from '@astrojs/vercel/serverless'; +import vercel from '@astrojs/vercel'; export default defineConfig({ // ... @@ -79,20 +81,6 @@ export default defineConfig({ }); ``` -### Choix d'une méthode de déploiement - -Vous pouvez vous déployer vers différentes cibles : - -* `serverless` : SSR à l'intérieur d'une [fonction Node.js](https://vercel.com/docs/concepts/functions/serverless-functions). -* `static` : génère un site web statique en suivant les formats de sortie de Vercel, les redirections, etc. - -Vous pouvez changer la cible en changeant l'importation : - -```js "serverless" "static" -import vercel from '@astrojs/vercel/serverless'; -import vercel from '@astrojs/vercel/static'; -``` - ## Utilisation En savoir plus sur [le déploiement de votre projet sur Vercel](/fr/guides/deploy/vercel/) @@ -118,7 +106,7 @@ Vous pouvez activer [Vercel Web Analytics](https://vercel.com/docs/concepts/anal ```js title="astro.config.mjs" ins={8-10} import { defineConfig } from 'astro/config'; -import vercel from '@astrojs/vercel/serverless'; +import vercel from '@astrojs/vercel'; export default defineConfig({ // ... @@ -143,7 +131,7 @@ Les propriétés `domains` et `remotePatterns` seront automatiquement remplies e ```js title="astro.config.mjs" ins={8-10} import { defineConfig } from 'astro/config'; -import vercel from '@astrojs/vercel/static'; +import vercel from '@astrojs/vercel'; export default defineConfig({ // ... @@ -166,7 +154,7 @@ Lorsque cette option est activée, un [Service d'images](/fr/reference/image-ser ```js title="astro.config.mjs" ins={8} import { defineConfig } from 'astro/config'; -import vercel from '@astrojs/vercel/static'; +import vercel from '@astrojs/vercel'; export default defineConfig({ // ... @@ -199,7 +187,7 @@ import astroLogo from '../assets/logo.png'; ### `devImageService` -**Type :** `'sharp' | 'squoosh' | string`
    +**Type :** `'sharp' | string`
    **Disponible pour :** Serverless, Static **Défaut :** `sharp` @@ -210,14 +198,14 @@ Il peut également être défini à une valeur arbitraire afin d'utiliser un ser ```js title="astro.config.mjs" ins={8-9} import { defineConfig } from 'astro/config'; -import vercel from '@astrojs/vercel/serverless'; +import vercel from '@astrojs/vercel'; export default defineConfig({ // ... output: 'server', adapter: vercel({ imageService: true, - devImageService: 'squoosh', + devImageService: 'sharp', }), }); ``` @@ -235,7 +223,7 @@ Pour activer cette fonctionnalité, mettez `isr` à true dans la configuration d ```js title="astro.config.mjs" ins={8} import { defineConfig } from 'astro/config'; -import vercel from '@astrojs/vercel/serverless'; +import vercel from '@astrojs/vercel'; export default defineConfig({ // ... @@ -258,7 +246,7 @@ Vous pouvez modifier la durée de mise en cache des routes en configurant une va ```js title="astro.config.mjs" {8-11} import { defineConfig } from 'astro/config'; -import vercel from '@astrojs/vercel/serverless'; +import vercel from '@astrojs/vercel'; export default defineConfig({ // ... @@ -278,7 +266,7 @@ Pour mettre en œuvre le [Mode brouillon](https://vercel.com/docs/build-output-a ```js title="astro.config.mjs" {7-12} import { defineConfig } from 'astro/config'; -import vercel from '@astrojs/vercel/serverless'; +import vercel from '@astrojs/vercel'; export default defineConfig({ output: "server", @@ -302,7 +290,7 @@ Utilisez cette propriété pour forcer l'intégration de fichiers dans votre fon ```js title="astro.config.mjs" ins={8} import { defineConfig } from 'astro/config'; -import vercel from '@astrojs/vercel/serverless'; +import vercel from '@astrojs/vercel'; export default defineConfig({ // ... @@ -322,7 +310,7 @@ Utilisez cette propriété pour exclure du processus de regroupement des fichier ```js title="astro.config.mjs" ins={8} import { defineConfig } from 'astro/config'; -import vercel from '@astrojs/vercel/serverless'; +import vercel from '@astrojs/vercel'; export default defineConfig({ // ... @@ -342,7 +330,7 @@ Utilisez cette propriété pour étendre ou limiter la durée maximale (en secon ```js title="astro.config.mjs" ins={8} import { defineConfig } from 'astro/config'; -import vercel from '@astrojs/vercel/serverless'; +import vercel from '@astrojs/vercel'; export default defineConfig({ // ... @@ -363,7 +351,7 @@ Utilisez cette propriété pour activer [Vercel Skew protection](https://vercel. ```js title="astro.config.mjs" ins={8} import { defineConfig } from 'astro/config'; -import vercel from '@astrojs/vercel/serverless'; +import vercel from '@astrojs/vercel'; export default defineConfig({ // ... @@ -374,36 +362,9 @@ export default defineConfig({ }); ``` -### Configuration du regroupement des fonctions - -:::caution[Obsolète] -L'option `functionPerRoute` est obsolète et sera entièrement supprimée dans Astro 5. De plus, cette option est incompatible avec certaines fonctionnalités d'Astro telles que les domaines i18n et la réécriture des requêtes. - -Si vous avez actuellement activé `functionPerRoute: true`, nous vous recommandons de supprimer cette option de configuration dès que possible. -::: - -L'adaptateur Vercel combine toutes vos routes en une seule fonction par défaut. - -Vous avez également la possibilité de diviser les constructions en une fonction séparée pour chaque route en utilisant l'option `functionPerRoute`. Cela réduit la taille de chaque fonction, ce qui signifie que vous êtes moins susceptible de dépasser la limite de taille pour une fonction individuelle. De plus, les démarrages de code sont plus rapides. - -Vérifiez que votre plan Vercel comprend un nombre approprié de fonctions avant d'activer l'option `functionPerRoute`. Par exemple, le niveau gratuit de Vercel limite chaque déploiement à un maximum de 12 fonctions. Si votre plan Vercel est insuffisant pour le nombre de routes de votre projet, vous recevrez un message d'erreur pendant le déploiement. - -```js title="astro.config.mjs" ins={8} -import { defineConfig } from 'astro/config'; -import vercel from '@astrojs/vercel/serverless'; - -export default defineConfig({ - // ... - output: 'server', - adapter: vercel({ - functionPerRoute: true, - }), -}); -``` - ### Le middleware Vercel Edge avec le middleware Astro -L’adaptateur @astrojs/vercel/serverless peut créer une [fonction edge] (https://vercel.com/docs/functions/edge-functions) à partir d’un middleware Astro dans votre base de code. Lorsque ‘edgeMiddleware’ est activé, une fonction edge exécute votre code middleware pour toutes les demandes, y compris les ressources statiques, les pages pré-rendues et les pages rendues à la demande. +L’adaptateur `@astrojs/vercel` peut créer une [fonction edge](https://vercel.com/docs/functions/edge-functions) à partir d’un middleware Astro dans votre base de code. Lorsque ‘edgeMiddleware’ est activé, une fonction edge exécute votre code middleware pour toutes les demandes, y compris les ressources statiques, les pages pré-rendues et les pages rendues à la demande. Pour les pages rendues à la demande, l'objet `context.locals` est sérialisé en utilisant du JSON et envoyé dans un en-tête pour la fonction serverless, qui effectue le rendu. Comme mesure de sécurité, la fonction serverless refusera de servir les requêtes avec une réponse `403 Forbidden` à moins qu'elles ne proviennent de la fonction edge générée. @@ -411,7 +372,7 @@ Il s'agit d'une fonctionnalité opt-in, et l'option `edgeMiddleware` doit être ```js title="astro.config.mjs" "edgeMiddleware: true" import { defineConfig } from 'astro/config'; -import vercel from '@astrojs/vercel/serverless'; +import vercel from '@astrojs/vercel'; export default defineConfig({ // ... @@ -425,8 +386,6 @@ export default defineConfig({ L'Edge Middleware a accès au [`RequestContext`](https://vercel.com/docs/functions/edge-middleware/middleware-api#requestcontext) de Vercel avec `ctx.locals.vercel.edge`. Si vous utilisez TypeScript, vous pouvez obtenir les typages appropriés en mettant à jour `src/env.d.ts` pour utiliser `EdgeLocals` : ```ts -/// - type EdgeLocals = import('@astrojs/vercel').EdgeLocals declare namespace App { diff --git a/src/content/docs/fr/guides/integrations-guide/vue.mdx b/src/content/docs/fr/guides/integrations-guide/vue.mdx index 1ad376da4c9bd..f4d1aef087998 100644 --- a/src/content/docs/fr/guides/integrations-guide/vue.mdx +++ b/src/content/docs/fr/guides/integrations-guide/vue.mdx @@ -2,6 +2,8 @@ type: integration title: '@astrojs/vue' description: "Apprenez à utiliser l'intégration du framework @astrojs/vue pour étendre la prise en charge des composants dans votre projet Astro." +sidebar: + label: Vue githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/vue/' category: renderer i18nReady: true @@ -9,7 +11,7 @@ i18nReady: true import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import Since from '~/components/Since.astro'; -Cette **[intégration Astro][astro-integration]** permet le rendu côté serveur et l'hydratation côté client pour vos composants [Vue 3](https://vuejs.org/). +Cette **[intégration Astro][astro-integration]** permet le rendu et l'hydratation côté client pour vos composants [Vue 3](https://vuejs.org/). ## Installation diff --git a/src/content/docs/fr/guides/internationalization.mdx b/src/content/docs/fr/guides/internationalization.mdx index fee8abe9cd992..d024b831fd746 100644 --- a/src/content/docs/fr/guides/internationalization.mdx +++ b/src/content/docs/fr/guides/internationalization.mdx @@ -1,6 +1,8 @@ --- title: Routage d'Internationalisation (i18n) -description: Apprenez à utiliser le routage i18n dans Astro. +sidebar: + label: Internationalisation (i18n) +description: Découvrez comment utiliser les fonctionnalités de routage i18n d’Astro pour localiser les pages de votre site. i18nReady: true --- @@ -22,14 +24,14 @@ Vous pouvez aussi choisir d'[ajouter votre propre logique i18n en plus ou à la ## Configurer le routage i18n -Une langue par défaut ([`defaultLocale`](/fr/reference/configuration-reference/#i18ndefaultlocale)) et une liste de toutes les langues prises en charge ([`locales`](/fr/reference/configuration-reference/#i18nlocales)) doivent être spécifiées dans un objet de configuration `i18n`. De plus, vous pouvez configurer un comportement de routage et de repli plus spécifique pour correspondre aux URL souhaitées. +Une liste de toutes les langues prises en charge ([`locales`](/fr/reference/configuration-reference/#i18nlocales)) et une langue par défaut ([`defaultLocale`](/fr/reference/configuration-reference/#i18ndefaultlocale)), qui doit être l'une des langues répertoriées dans `locales`, doivent être spécifiées dans un objet de configuration `i18n`. De plus, vous pouvez configurer un comportement de routage et de repli plus spécifique pour correspondre aux URL souhaitées. ```js title="astro.config.mjs" import { defineConfig } from "astro/config" export default defineConfig({ i18n: { - defaultLocale: "en", locales: ["es", "en", "pt-br"], + defaultLocale: "en", } }) ``` @@ -106,8 +108,8 @@ Ce paramètre détermine également où doivent résider les fichiers de page (e import { defineConfig } from "astro/config" export default defineConfig({ i18n: { - defaultLocale: "en", locales: ["es", "en", "fr"], + defaultLocale: "en", routing: { prefixDefaultLocale: false } @@ -140,8 +142,8 @@ Il s'agit de la valeur **par défaut**. Activez cette option lorsque les URL dan import { defineConfig } from "astro/config" export default defineConfig({ i18n: { - defaultLocale: "en", locales: ["es", "en", "fr"], + defaultLocale: "en", routing: { prefixDefaultLocale: true } @@ -190,8 +192,8 @@ Vous serez responsable de l'écriture de votre propre logique de routage ou [d'e import { defineConfig } from "astro/config" export default defineConfig({ i18n: { - defaultLocale: "en", locales: ["es", "en", "fr"], + defaultLocale: "en", routing: "manual" } }) @@ -253,7 +255,7 @@ Cette option de routage vous permet de personnaliser vos domaines par langue pou Ajoutez `i18n.domains` pour associer n'importe lequel de vos paramètres régionaux (`locales`) pris en charge à des URL personnalisées : -```js title="astro.config.mjs" {3-7} ins={14-21} +```js title="astro.config.mjs" {3-7} ins={14-17} import { defineConfig } from "astro/config" export default defineConfig({ site: "https://example.com", @@ -262,14 +264,14 @@ export default defineConfig({ mode: 'standalone', }), i18n: { - defaultLocale: "en", locales: ["es", "en", "fr", "ja"], + defaultLocale: "en", routing: { prefixDefaultLocale: false }, domains: { - fr: "https://fr.example.com", - es: "https://example.es" + fr: "https://fr.example.com", + es: "https://example.es" } } }) @@ -305,8 +307,8 @@ Par exemple, la configuration ci-dessous définit `es` comme paramètre régiona import { defineConfig } from "astro/config" export default defineConfig({ i18n: { - defaultLocale: "en", locales: ["es", "en", "fr"], + defaultLocale: "en", fallback: { fr: "es" }, @@ -325,16 +327,16 @@ Passez un objet au tableau `locales` avec une clé `path` pour définir un préf Ceci est utile si vous prenez en charge plusieurs variantes d'une langue (par exemple `"fr"`, `"fr-BR"` et `"fr-CA"`) et que vous souhaitez que toutes ces variantes soient associées à la même URL `/fr/`, ou même le personnaliser entièrement (par exemple `/french/`): -```js title="astro.config.mjs" del={5} ins={6-9} +```js title="astro.config.mjs" del={4} ins={5-8} import { defineConfig } from "astro/config" export default defineConfig({ i18n: { - defaultLocale: "en", locales: ["es", "en", "fr"], locales: ["es", "en", { - path: "french", // aucune barre oblique incluse - codes: ["fr", "fr-BR", "fr-CA"] + path: "french", // aucune barre oblique incluse + codes: ["fr", "fr-BR", "fr-CA"] }], + defaultLocale: "en", routing: { prefixDefaultLocale: true } @@ -350,7 +352,7 @@ Cette fonctionnalité présente certaines restrictions : - L'option `site` est obligatoire. - L'option `output` doit être définie sur `"server"`. - Il ne peut pas y avoir de pages individuelles pré-générées. -- La fonctionnalité de l'adaptateur [`functionPerRoute`](/fr/reference/adapter-reference/#functionperroute) n'est pas supportée. + Astro s'appuie sur les en-têtes suivants afin de prendre en charge la fonctionnalité : - [`X-Forwarded-Host`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-Host) et [`Host`](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Host). Astro utilisera le premier et, s’il n’est pas présent, essaiera le second. diff --git a/src/content/docs/fr/guides/markdown-content.mdx b/src/content/docs/fr/guides/markdown-content.mdx index 884798f2facf2..df2f8c0afe493 100644 --- a/src/content/docs/fr/guides/markdown-content.mdx +++ b/src/content/docs/fr/guides/markdown-content.mdx @@ -1,6 +1,8 @@ --- title: Markdown -description: Apprenez à créer du contenu en utilisant Markdown avec Astro. +sidebar: + label: Markdown +description: Découvrez la prise en charge intégrée d'Astro pour Markdown. i18nReady: true --- import Since from '~/components/Since.astro'; @@ -19,13 +21,13 @@ Pour des fonctionnalités supplémentaires, telles que l'inclusion de composants ## Organiser les fichiers Markdown -Vos fichiers Markdown locaux peuvent être conservés n'importe où dans votre répertoire `src/`. Ils peuvent être importés dans les composants `.astro` en utilisant une instruction `import` pour un seul fichier et `import.meta.glob()` de Vite pour interroger plusieurs fichiers à la fois. +Vos fichiers Markdown locaux peuvent être conservés n'importe où dans votre répertoire `src/`. Ils peuvent être importés dans les composants `.astro` en utilisant une instruction `import` pour un seul fichier et [`import.meta.glob()` de Vite](/fr/guides/imports/#importmetaglob) pour interroger plusieurs fichiers à la fois. Si vous avez des groupes de fichiers Markdown apparentés, envisagez de les [définir comme des collections](/fr/guides/content-collections/). Cela présente plusieurs avantages, notamment la possibilité de stocker les fichiers Markdown n'importe où sur votre système de fichiers ou à distance. Les collections vous permettent également d'utiliser une API optimisée et spécifique au contenu pour interroger et afficher votre contenu. Les collections sont destinées aux ensembles de données qui partagent la même structure, tels que les articles de blog ou les pages de produits. Lorsque vous définissez cette forme dans un schéma, vous bénéficiez en outre de la validation, de la sécurité des types et de l'Intellisense dans votre éditeur. -{/* En savoir plus sur [quand utiliser les collections de contenu](/fr/guides/content-collections/#quand-créer-une-collection) au lieu des importations de fichiers. */} +En savoir plus sur [quand utiliser les collections de contenu](/fr/guides/content-collections/#quand-créer-une-collection) au lieu des importations de fichiers. ## Expressions dynamiques de type JSX @@ -43,7 +45,7 @@ Voici mon _incroyable_ billet ! ```astro title="src/pages/my-posts.astro" --- import * as greatPost from '../posts/great-post.md'; -const posts = Object.values(await import.meta.glob('../posts/*.md', { eager: true })); +const posts = Object.values(import.meta.glob('../posts/*.md', { eager: true })); ---

    {greatPost.frontmatter.title}

    @@ -72,7 +74,7 @@ Les propriétés exportées suivantes sont disponibles dans votre composant `.as - **`frontmatter`** - Contient toutes les données spécifiées dans le frontmatter YAML du fichier. - **``** - Un composant qui renvoie le contenu complet et affiché du fichier. - **`RawContent()`** - Une fonction qui renvoie le document Markdown brut sous forme de chaîne de caractères. -- **`compiledContent()`** - Une fonction qui retourne le document Markdown compilé en une chaîne HTML. +- **`compiledContent()`** - Une fonction asynchrone qui retourne le document Markdown compilé en une chaîne HTML. - **`getHeadings()`** - Une fonction asynchrone qui retourne un tableau de tous les titres (`

    ` à `

    `) dans le fichier avec le type : `{ depth: number ; slug: string ; text: string }[]`. Le `slug` de chaque titre correspond à l'identifiant généré pour un titre donné et peut être utilisé pour les liens d'ancrage. Un exemple de billet de blog en Markdown peut passer l'objet `Astro.props` suivant : @@ -103,7 +105,7 @@ Astro.props = { Le composant `` est disponible en important `Content` à partir d'un fichier Markdown. Ce composant renvoie le contenu complet du fichier, affiché en HTML. Vous pouvez optionnellement renommer `Content` en n'importe quel nom de composant que vous préférez. -Vous pouvez également [rendre le contenu HTML d'une entrée de collection Markdown](/fr/guides/content-collections/#rendre-le-contenu-en-html) en affichant un composant ``. +Vous pouvez également [rendre le contenu HTML d'une entrée de collection Markdown](/fr/guides/content-collections/#restitution-du-contenu) en affichant un composant ``. ```astro title="src/pages/content.astro" "Content" --- @@ -114,7 +116,7 @@ import {Content as PromoBanner} from '../components/promoBanner.md'; import { getEntry, render } from 'astro:content'; const product = await getEntry('products', 'shirt'); -const { Content } = await render(); +const { Content } = await render(product); ---

    Promotion du jour

    @@ -326,7 +328,7 @@ Les [collections de contenu](/fr/guides/content-collections/) et l'[importation Astro traite [tout fichier supporté dans le répertoire `/src/pages/`](/fr/basics/astro-pages/#fichiers-de-page-pris-en-charge) comme une page, y compris `.md` et d'autres types de fichiers Markdown. -Placer un fichier dans ce répertoire, ou n'importe quel sous-répertoire, construira automatiquement une route de page en utilisant le nom de chemin du fichier et affichera le contenu Markdown affiché en HTML. +Placer un fichier dans ce répertoire, ou n'importe quel sous-répertoire, construira automatiquement une route de page en utilisant le nom de chemin du fichier et affichera le contenu Markdown affiché en HTML. Astro ajoutera automatiquement une balise `` ​​à votre page pour permettre une création plus facile de contenu non ASCII. ```markdown title="src/pages/page-1.md" --- @@ -347,7 +349,9 @@ Il n'est probablement pas très stylé, mais Markdown prend en charge : ### Propriété `layout` du frontmatter -Pour aider avec la fonctionnalité limitée des pages Markdown, Astro fournit une propriété frontmatter `layout` spéciale qui est un chemin relatif vers un [composant de mise en page Markdown](/fr/basics/layouts/#mises-en-page-markdown). Si votre fichier Markdown est situé dans `src/pages/`, créez un composant de mise en page et ajoutez-le dans cette propriété de mise en page pour fournir une enveloppe de page autour de votre contenu Markdown. +Pour aider avec les fonctionnalités limitées des pages Markdown individuelles, Astro fournit une propriété de frontmatter spéciale nommée `layout` qui est un chemin relatif vers un [composant Astro de mise en page Markdown](/fr/basics/layouts/#mises-en-page-markdown). `layout` n'est pas une propriété spéciale lors de l'utilisation de [collections de contenu](/fr/guides/content-collections/) pour interroger et restituer votre contenu Markdown, et il n'est pas garanti qu'elle soit prise en charge en dehors de son cas d'utilisation prévu. + +Si votre fichier Markdown est situé dans `src/pages/`, créez un composant de mise en page et ajoutez-le dans cette propriété de mise en page pour fournir une enveloppe de page autour de votre contenu Markdown. ```markdown title="src/pages/posts/post-1.md" {2} --- @@ -366,24 +370,28 @@ Ce composant de mise en page est un composant Astro normal avec [des propriété const {frontmatter} = Astro.props; --- + + + // n'est plus ajouté par défaut +

    {frontmatter.title}

    -

    Post author: {frontmatter.author}

    +

    Auteur de l'article : {frontmatter.author}

    {frontmatter.description}

    ``` -Vous pouvez également [styliser votre Markdown](/fr/guides/styling/#style-markdown) dans votre composant de mise en page. +Lorsque vous utilisez la propriété frontmatter `layout`, vous devez inclure la balise `` dans votre mise en page car Astro ne l'ajoutera plus automatiquement. Vous pouvez désormais également [styliser votre Markdown](/fr/guides/styling/#style-markdown) dans votre composant de mise en page. En savoir plus sur les [Mises en page Markdown](/fr/basics/layouts/#mises-en-page-markdown). ## Récupérer du Markdown à distance -**Astro n'inclut pas de support intégré pour le Markdown à distance en dehors des [collections de contenu expérimentales](/fr/reference/configuration-reference/#experimentalcontentlayer) !** +Astro n'inclut pas de support intégré pour Markdown à distance en dehors des [collections de contenu](/fr/guides/content-collections/). -Pour récupérer directement du Markdown distant et le rendre au format HTML, vous devrez installer et configurer votre propre interpréteur de Markdown à partir de NPM. Celui-ci **n'héritera pas** des paramètres Markdown intégrés d'Astro que vous avez configurés. +Pour récupérer directement du Markdown distant et le rendre au format HTML, vous devrez installer et configurer votre propre interpréteur de Markdown à partir de NPM. Celui-ci n'héritera pas des paramètres Markdown intégrés d'Astro que vous avez configurés. Assurez-vous de bien comprendre ces limitations avant d'implémenter ceci dans votre projet, et envisagez de récupérer votre Markdown distant en utilisant un chargeur de collections de contenu à la place. diff --git a/src/content/docs/fr/guides/media/cloudinary.mdx b/src/content/docs/fr/guides/media/cloudinary.mdx index a7b2101ae36cf..834a565f96a79 100644 --- a/src/content/docs/fr/guides/media/cloudinary.mdx +++ b/src/content/docs/fr/guides/media/cloudinary.mdx @@ -1,6 +1,8 @@ --- title: Cloudinary & Astro description: Ajoutez des images et des vidéos à votre projet Astro avec Cloudinary +sidebar: + label: Cloudinary type: media stub: true service: Cloudinary diff --git a/src/content/docs/fr/guides/media/index.mdx b/src/content/docs/fr/guides/media/index.mdx index e006cc8e7132a..47cefb463081a 100644 --- a/src/content/docs/fr/guides/media/index.mdx +++ b/src/content/docs/fr/guides/media/index.mdx @@ -1,6 +1,8 @@ --- title: Utiliser un DAM avec Astro description: Comment utiliser un gestionnaire de ressources numériques (DAM) pour ajouter des images et des vidéos à Astro +sidebar: + label: Aperçu de la gestion des ressources numériques (DAM) i18nReady: true --- import MediaGuidesNav from '~/components/MediaGuidesNav.astro'; diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx index 99aadc42411b4..48b8312854865 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis Create React App (CRA) description: Conseils pour migrer un projet Create React App existant vers Astro +sidebar: + label: Create React App type: migration stub: true framework: Create React App @@ -143,7 +145,7 @@ import App from '../cra-project/App.jsx'; :::note[Directives client] Votre application a besoin d'une [directive client](/fr/reference/directives-reference/#directives-client) pour l'interactivité. Astro affichera votre application React en HTML statique jusqu'à ce que vous optiez pour le JavaScript côté client. -Utilisez `client:load` pour vous assurer que votre application se charge immédiatement depuis le serveur, ou `client:only="react"` pour ignorer le rendu côté serveur et exécuter votre application entièrement côté client. +Utilisez `client:load` pour vous assurer que votre application se charge immédiatement depuis le serveur, ou `client:only="react"` pour ignorer le rendu sur le serveur et exécuter votre application entièrement côté client. ::: ## Convertir votre CRA en Astro @@ -272,7 +274,7 @@ Voici quelques conseils pour convertir un composant CRA `.js` en un composant `. 5. Décidez si les composants importés doivent également être convertis en Astro. Vous pouvez les garder en tant que composants React pour le moment, ou pour toujours. Mais vous pouvez éventuellement vouloir les convertir en composants `.astro`, surtout s'ils n'ont pas besoin d'être interactifs ! -6. Remplacez `useEffect()` par des déclarations d'importation ou [`Astro.glob()`](/fr/reference/api-reference/#astroglob) pour interroger vos fichiers locaux. Utilisez `fetch()` pour récupérer des données externes. +6. Remplacez `useEffect()` par des déclarations d'importation ou [`import.meta.glob()`](/fr/guides/imports/#importmetaglob) pour interroger vos fichiers locaux. Utilisez `fetch()` pour récupérer des données externes. ### Tests de migration @@ -323,7 +325,7 @@ En savoir plus sur [l'utilisation spécifique de `` dans Astro](/fr/basi La récupération de données dans un composant Create React App est similaire à Astro, avec quelques légères différences. -Vous devrez supprimer toutes les instances d'un crochet d'effet secondaire (`useEffect`) pour `Astro.glob()` ou `getCollection()`/`getEntryBySlug()` pour accéder aux données depuis d'autres fichiers dans la source de votre projet. +Vous devrez supprimer toutes les instances d'un crochet d'effet secondaire (`useEffect`) pour `import.meta.glob()` ou `getCollection()`/`getEntryBySlug()` pour accéder aux données depuis d'autres fichiers dans la source de votre projet. Pour [récupérer des données distantes](/fr/guides/data-fetching/), utilisez `fetch()`. @@ -337,7 +339,7 @@ import { getCollection } from 'astro:content'; const allBlogPosts = await getCollection('blog'); // Obtention de toutes les entrées `src/pages/posts/` -const allPosts = await Astro.glob('../pages/posts/*.md'); +const allPosts = Object.values(import.meta.glob('../pages/post/*.md', { eager: true })); // Récupération des données à distance const response = await fetch('https://randomuser.me/api/'); @@ -346,7 +348,7 @@ const randomUser = data.results[0]; --- ``` -En savoir plus sur [l'importation de fichiers locaux avec `Astro.glob()`](/fr/guides/imports/#astroglob), [l'interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections) ou [la récupération de données distantes](/fr/guides/data-fetching/). +En savoir plus sur l'importation de fichiers locaux avec [`import.meta.glob()`](/fr/guides/imports/#importmetaglob), [l'interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections) ou [la récupération de données distantes](/fr/guides/data-fetching/). ### Le style de CRA à Astro diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-docusaurus.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-docusaurus.mdx index 7b75674ed41ff..5c8b4516a3b64 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-docusaurus.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-docusaurus.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis Docusaurus description: Conseils pour migrer un projet Docusaurus existant vers Astro +sidebar: + label: Docusaurus type: migration stub: true framework: Docusaurus @@ -31,7 +33,7 @@ Docusaurus et Astro partagent certaines similitudes qui vous aideront à migrer Lorsque vous reconstruisez votre site Docusaurus avec Astro, vous remarquerez quelques différences importantes : -- Docusaurus est une application monopage (SPA) basée sur React. Les sites Astro sont des applications multi-pages construites en utilisant des [composants `.astro`](/fr/basics/astro-components/), mais peuvent aussi supporter [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/fr/guides/framework-components/) et le templating HTML brut. +- Docusaurus est une application monopage (SPA) basée sur React. Les sites Astro sont des applications multi-pages construites en utilisant des [composants `.astro`](/fr/basics/astro-components/), mais peuvent aussi supporter [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/fr/guides/framework-components/) et le templating HTML brut. - Docusaurus a été conçu pour construire des sites web de documentation et possède des fonctionnalités intégrées spécifiques aux sites web de documentation que vous devriez construire vous-même dans Astro. Au lieu de cela, Astro propose certaines de ces fonctionnalités via [Starlight : un thème officiel pour la documentation](https://starlight.astro.build). Ce site web a inspiré Starlight et fonctionne désormais avec lui ! Vous pouvez également trouver d'autres [thèmes de documentation communautaires](https://astro.build/themes?search=&categories%5B%5D=docs) avec des fonctionnalités intégrées dans notre vitrine de thèmes. @@ -63,7 +65,7 @@ Vous pouvez passer un argument `--template` à la commande `create astro` pour d L'intégration MDX d'Astro est incluse par défaut, ce qui vous permet de [transférer vos fichiers de contenu existants vers Starlight](https://starlight.astro.build/fr/getting-started/#ajouter-du-contenu) immédiatement. -Vous pouvez trouver la documentation d'Astro, et d'autres modèles officiels, sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Vous pouvez trouver la documentation d'Astro, et d'autres modèles officiels, sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-eleventy.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-eleventy.mdx index 18c882054e470..889d0b66dfcd6 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-eleventy.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-eleventy.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis Eleventy description: Conseils pour la migration d'un projet Eleventy existant vers Astro +sidebar: + label: Eleventy type: migration stub: true framework: Eleventy @@ -59,7 +61,7 @@ Apportez vos fichiers Markdown existants (ou MDX, avec notre intégration option Votre projet Eleventy vous a permis d'utiliser une variété de langages de templates pour construire votre site. Dans un projet Astro, la modélisation de vos pages sera principalement réalisée à l'aide de composants Astro, qui peuvent être utilisés comme éléments d'interface utilisateur, de mise en page et même de pages complètes. Vous pouvez explorer [la syntaxe des composants Astro](/fr/basics/astro-components/) pour voir comment créer des modèles dans Astro en utilisant des composants. -Pour convertir d'autres types de sites, comme un portfolio ou un site de documentation, consultez d'autres modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Pour convertir d'autres types de sites, comme un portfolio ou un site de documentation, consultez d'autres modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx index 5d4ab2e198d45..6b9ecadc6e219 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis Gatsby description: Astuces pour migrer un projet Gatsby existant vers Astro +sidebar: + label: Gatsby type: migration stub: false framework: Gatsby @@ -34,7 +36,7 @@ Lorsque vous reconstruisez votre site Gatsby dans Astro, vous remarquerez quelqu - [Les composants `.astro`](/fr/basics/astro-components/) ne sont pas écrits sous forme de fonctions exportées renvoyant des modèles de page. Au lieu de cela, vous diviserez votre code en une « barrière de code » pour votre JavaScript et en un corps dédié au HTML que vous générez. -- [Données de fichiers locaux](/fr/guides/imports/): Gatsby utilise GraphQL pour récupérer des données à partir de vos fichiers de projet. Astro utilise les importations ESM et les fonctions d'attente de niveau supérieur (par exemple, [`Astro.glob()`](/fr/guides/imports/#astroglob), [`getCollection()`](/fr/guides/content-collections/#interroger-les-collections)) pour importer des données à partir de vos fichiers de projet. Vous pouvez ajouter manuellement GraphQL à votre projet Astro mais il n'est pas inclus par défaut. +- [Données de fichiers locaux](/fr/guides/imports/): Gatsby utilise GraphQL pour récupérer des données à partir de vos fichiers de projet. Astro utilise les importations ESM et les fonctions d'attente de niveau supérieur (par exemple, [`import.meta.glob()`](/fr/guides/imports/#importmetaglob), [`getCollection()`](/fr/guides/content-collections/#interroger-les-collections)) pour importer des données à partir de vos fichiers de projet. Vous pouvez ajouter manuellement GraphQL à votre projet Astro mais il n'est pas inclus par défaut. ## Convertir votre projet Gatsby @@ -78,7 +80,7 @@ Vous pouvez utiliser un argument `--template` avec la commande `create astro` po Ensuite, copiez les fichiers existants de votre projet Gatsby vers votre nouveau projet Astro dans un dossier séparé en dehors de `src`. :::tip -Consultez https://astro.new pour la liste complète des modèles de démarrage officiels et des liens pour ouvrir un nouveau projet dans StackBlitz, CodeSandbox ou Gitpod. +Consultez https://astro.new pour la liste complète des modèles de démarrage officiels et des liens pour ouvrir un nouveau projet dans IDX, StackBlitz, CodeSandbox ou Gitpod. ::: ### Installer des intégrations (facultatif) @@ -123,7 +125,7 @@ Voici quelques conseils pour convertir un composant Gatsby `.js` en un composant 5. Décidez si les composants importés doivent également être convertis en syntaxe Astro. Avec l'intégration officielle installée, vous pouvez [utiliser les composants React existants dans votre fichier Astro](/fr/guides/framework-components/). Mais vous souhaiterez peut-être les convertir en composants `.astro`, surtout s'ils n'ont pas besoin d'être interactifs ! -6. Supprimez toutes les requêtes GraphQL. Utilisez plutôt les instructions d'importation et [`Astro.glob()`](/fr/reference/api-reference/#astroglob) pour interroger vos fichiers locaux. +6. Supprimez toutes les requêtes GraphQL. Utilisez plutôt les instructions d'importation et [`import.meta.glob()`](/fr/guides/imports/#importmetaglob) pour interroger vos fichiers locaux. Voir [un exemple de modèle de démarrage de blog Gatsby converti étape par étape](#exemple-guidé-mise-en-page-de-gatsby-à-astro) @@ -222,7 +224,7 @@ Ces [pages `.astro`](/fr/basics/astro-pages/) doivent être situées dans `src/p Astro dispose d'une prise en charge intégrée pour Markdown et d'une intégration facultative pour les fichiers MDX. Vous pouvez réutiliser tous les [fichiers Markdown et MDX existants](/fr/guides/markdown-content/), mais ils peuvent nécessiter quelques ajustements dans leur frontmatter, comme l'ajout de [la propriété spéciale `layout` d'Astro](/fr/basics/layouts/#mises-en-page-markdown). Ces fichiers peuvent également être placés dans `src/pages/` pour profiter du routage automatique basé sur les fichiers. -Alternativement, vous pouvez utiliser les [collections de contenu](/fr/guides/content-collections/) dans Astro pour stocker et gérer votre contenu. Lorsqu'ils font partie d'une collection, les fichiers Markdown et MDX résideront dans des dossiers dans `src/content/`. Vous récupérerez vous-même le contenu et [générerez ces pages de manière dynamique](/fr/guides/content-collections/#générer-des-routes-à-partir-du-contenu). +Alternativement, vous pouvez utiliser les [collections de contenu](/fr/guides/content-collections/) dans Astro pour stocker et gérer votre contenu. Vous récupérerez vous-même le contenu et [générerez ces pages de manière dynamique](/fr/guides/content-collections/#générer-des-routes-à-partir-du-contenu). ### Migration des tests @@ -351,7 +353,7 @@ Vous pouvez en apprendre davantage sur [l'utilisation d'images dans Astro](/fr/g ### GraphQL : de Gatsby à Astro -Supprimez toutes les références aux requêtes GraphQL et utilisez à la place [`Astro.glob()`](/fr/guides/imports/#astroglob) pour accéder aux données de vos fichiers locaux. +Supprimez toutes les références aux requêtes GraphQL et utilisez à la place [`import.meta.glob()`](/fr/guides/imports/#importmetaglob) pour accéder aux données de vos fichiers locaux. Ou, si vous utilisez des collections de contenu, interrogez vos fichiers Markdown et MDX dans `src/content/` en utilisant [`getEntry()` et `getCollection()`](/fr/guides/content-collections/#interroger-les-collections). @@ -366,7 +368,7 @@ import { getCollection } from 'astro:content'; const allBlogPosts = await getCollection('blog'); // Récupérer toutes les entrées dans `src/pages/posts/` -const allPosts = await Astro.glob('../pages/posts/*.md'); +const allPosts = Object.values(import.meta.glob('../pages/post/*.md', { eager: true })); --- export const pageQuery = graphql` diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-gitbook.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-gitbook.mdx index 39c334c56cbdf..01142bc4116c5 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-gitbook.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-gitbook.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis GitBook description: Conseils pour migrer un projet GitBook existant vers Astro +sidebar: + label: GitBook type: migration stub: true framework: GitBook @@ -23,7 +25,7 @@ GitBook et Astro partagent certaines similitudes qui vous aideront à migrer vot Lorsque vous migrez vos documents GitBook vers Astro, vous remarquerez quelques différences importantes : -- Un site GitBook est édité à l'aide d'un tableau de bord en ligne. Dans Astro, vous utiliserez un [éditeur de code](/fr/editor-setup/) et un environnement de développement pour maintenir votre site. Vous pouvez développer localement sur votre machine, ou choisir un éditeur/environnement de développement en nuage comme StackBlitz, CodeSandbox, ou Gitpod. +- Un site GitBook est édité à l'aide d'un tableau de bord en ligne. Dans Astro, vous utiliserez un [éditeur de code](/fr/editor-setup/) et un environnement de développement pour maintenir votre site. Vous pouvez développer localement sur votre machine, ou choisir un éditeur/environnement de développement en nuage comme IDX, StackBlitz, CodeSandbox, ou Gitpod. - GitBook stocke votre contenu dans une base de données. Dans Astro, vous aurez des fichiers individuels (typiquement Markdown ou MDX) dans votre [répertoire de projet](/fr/basics/project-structure/) pour le contenu de chaque page. Vous pouvez également choisir d'utiliser un [CMS pour votre contenu](/fr/guides/cms/) et utiliser Astro pour récupérer et présenter les données. @@ -73,4 +75,3 @@ Notez que bien que vous ayez maintenant votre contenu migré dans votre projet A ## Ressources de la communauté - Ajoutez le vôtre ! - diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-gridsome.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-gridsome.mdx index 74a6c86cbf1ba..c69bb6373bccf 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-gridsome.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-gridsome.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis Gridsome description: Conseils pour la migration d'un projet Gridsome existant vers Astro +sidebar: + label: Gridsome type: migration stub: true framework: Gridsome @@ -27,11 +29,11 @@ Gridsome et Astro partagent certaines similitudes qui vous aideront à migrer vo Lorsque vous reconstruisez votre site Gridsome dans Astro, vous remarquerez quelques différences importantes : -- Gridsome est une application monopage (SPA) basée sur Vue. Les sites Astro sont des applications multi-pages construites à l'aide de [composants `.astro`](/fr/basics/astro-components/), mais peuvent également supporter [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/fr/guides/framework-components/) et le templating HTML brut. +- Gridsome est une application monopage (SPA) basée sur Vue. Les sites Astro sont des applications multi-pages construites à l'aide de [composants `.astro`](/fr/basics/astro-components/), mais peuvent également supporter [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/fr/guides/framework-components/) et le templating HTML brut. - En tant que SPA, Gridsome utilise `vue-router` pour le routage SPA, et `vue-meta` pour gérer ``. Dans Astro, vous créerez des pages HTML séparées et contrôlerez le `` de votre page directement, ou dans un [composant de mise en page](/fr/basics/layouts/). -- [Données de fichiers locaux](/fr/guides/imports/) : Gridsome utilise GraphQL pour récupérer les données de vos fichiers de projet. Astro utilise les importations ESM et l'aide [`Astro.glob()`](/fr/guides/imports/#astroglob) pour importer des données à partir de fichiers de projets locaux. Les ressources distantes peuvent être chargées en utilisant l'API standard `fetch()`. GraphQL peut être optionnellement ajouté à votre projet, mais n'est pas inclus par défaut. +- [Données de fichiers locaux](/fr/guides/imports/) : Gridsome utilise GraphQL pour récupérer les données de vos fichiers de projet. Astro utilise les importations ESM et l'aide [`import.meta.glob()`](/fr/guides/imports/#importmetaglob) pour importer des données à partir de fichiers de projets locaux. Les ressources distantes peuvent être chargées en utilisant l'API standard `fetch()`. GraphQL peut être optionnellement ajouté à votre projet, mais n'est pas inclus par défaut. ## Passer de Gridsome à Astro @@ -61,9 +63,9 @@ Apportez vos fichiers Markdown existants (ou MDX, avec notre intégration option La structure de projet de Gridsome étant similaire à celle d'Astro, vous pourrez peut-être copier plusieurs fichiers existants de votre projet au même endroit dans votre nouveau projet Astro. Cependant, les deux structures de projet ne sont pas identiques. Vous pouvez examiner [la structure de projet d'Astro](/fr/basics/project-structure/) pour voir quelles sont les différences. -Comme Astro interroge et importe vos fichiers locaux différemment de Gridsome, vous pouvez lire [comment charger des fichiers en utilisant `Astro.glob()`](/fr/guides/imports/#astroglob) pour comprendre comment travailler avec vos fichiers locaux. +Comme Astro interroge et importe vos fichiers locaux différemment de Gridsome, vous pouvez lire [comment charger des fichiers en utilisant `import.meta.glob()`](/fr/guides/imports/#importmetaglob) pour comprendre comment travailler avec vos fichiers locaux. -Pour convertir d'autres types de sites, tels qu'un site de portfolio ou de documentation, consultez d'autres modèles de démarrage officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Pour convertir d'autres types de sites, tels qu'un site de portfolio ou de documentation, consultez d'autres modèles de démarrage officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-hugo.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-hugo.mdx index 2aaad8d923f82..747c881138089 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-hugo.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-hugo.mdx @@ -1,6 +1,8 @@ --- title: Migrer depuis Hugo description: Conseils pour la migration d'un projet Hugo existant vers Astro +sidebar: + label: Hugo type: migration stub: true framework: Hugo @@ -60,7 +62,7 @@ Apportez vos fichiers Markdown existants (ou MDX, avec notre intégration option Pour continuer à utiliser du contenu dynamique tel que des variables, des expressions ou des composants d'interface utilisateur dans votre contenu Markdown, ajoutez l'intégration MDX facultative d'Astro et convertissez vos fichiers Markdown existants en [pages MDX](/fr/guides/markdown-content/). MDX prend en charge le frontmatter YAML, vous pouvez donc conserver vos propriétés de frontmatter existantes. Mais vous devez remplacer toute syntaxe de shortcode par [la syntaxe propre à MDX](https://mdxjs.com/docs/what-is-mdx/#mdx-syntax), qui autorise les expressions JSX et/ou les importations de composants. -Pour convertir d'autres types de sites, comme un portfolio ou un site de documentation, consultez les modèles de démarrage officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Pour convertir d'autres types de sites, comme un portfolio ou un site de documentation, consultez les modèles de démarrage officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-jekyll.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-jekyll.mdx index b2670bf52d068..d2de906822da6 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-jekyll.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-jekyll.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis Jekyll description: Conseils pour migrer un projet Jekyll existant vers Astro +sidebar: + label: Jekyll type: migration stub: true framework: Jekyll @@ -61,7 +63,7 @@ Une grande partie du contenu de vos pages HTML existantes peut être convertie e Astro n'a pas de propriété `permalink` qui accepte les espaces réservés. Vous pouvez avoir besoin d'en savoir plus sur [le routage des pages d'Astro](/fr/guides/routing/) si vous voulez conserver votre structure d'URL existante. Vous pouvez également envisager de [définir des redirections chez un hébergeur comme Netlify](https://docs.netlify.com/routing/redirects/). -Pour convertir d'autres types de sites, tels qu'un site de portfolio ou de documentation, consultez les modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Pour convertir d'autres types de sites, tels qu'un site de portfolio ou de documentation, consultez les modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx index 9a93b83ba536b..10fb5a732ce1f 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis Next.js description: Astuces pour migrer un projet Next.js existant vers Astro +sidebar: + label: Next.js type: migration stub: false framework: Next.js @@ -76,7 +78,7 @@ Vous pouvez utiliser un argument `--template` avec la commande `create astro` po Ensuite, copiez les fichiers existants de votre projet Next vers votre nouveau projet Astro dans un dossier séparé en dehors de `src`. :::tip -Consultez https://astro.new pour la liste complète des modèles de démarrage officiels et des liens pour ouvrir un nouveau projet dans StackBlitz, CodeSandbox ou Gitpod. +Consultez https://astro.new pour la liste complète des modèles de démarrage officiels et des liens pour ouvrir un nouveau projet dans IDX, StackBlitz, CodeSandbox ou Gitpod. ::: ### Installer des intégrations (facultatif) @@ -119,7 +121,7 @@ Voici quelques conseils pour convertir un composant Next `.js` en un composant ` 5. Décidez si les composants importés doivent également être convertis en syntaxe Astro. Avec l'intégration officielle installée, vous pouvez [utiliser les composants React existants dans votre fichier Astro](/fr/guides/framework-components/). Mais vous souhaiterez peut-être les convertir en composants `.astro`, surtout s'ils n'ont pas besoin d'être interactifs ! -6. Remplacez `getStaticProps()` avec des déclarations d'importation ou avec [`Astro.glob()`](/fr/reference/api-reference/#astroglob) pour interroger vos fichiers locaux. Utilisez `fetch()` pour récupérer des données externes. +6. Remplacez `getStaticProps()` avec des déclarations d'importation ou avec [`import.meta.glob()`](/fr/guides/imports/#importmetaglob) pour interroger vos fichiers locaux. Utilisez `fetch()` pour récupérer des données externes. Voir [un exemple d'un fichier`.js` converti étape par étape depuis Next](#exemple-guidé-récupération-des-données-de-next-vers-astro). @@ -304,7 +306,7 @@ export default function Head() { Dans Next.js, vos articles se trouvent soit dans `/pages`, soit dans `/app/routeName/page.jsx`. -Avec Astro, **tous les contenus de vos pages doivent vivre à l'intérieur du dossier `src/`**, soit dans `src/pages`, soit dans `src/content`. +Avec Astro, **tous les contenus de vos pages doivent vivre à l'intérieur du dossier `src/`**, sauf si vous utilisez les [collections de contenu](/fr/guides/content-collections/). #### Pages React @@ -316,7 +318,7 @@ Ces [pages `.astro`](/fr/basics/astro-pages/) doivent être situées dans `src/p Astro dispose d'une prise en charge intégrée pour Markdown et d'une intégration facultative pour les fichiers MDX. Vous pouvez réutiliser tous les [fichiers Markdown et MDX existants](/fr/guides/markdown-content/), mais ils peuvent nécessiter quelques ajustements dans leur frontmatter, comme l'ajout de [la propriété spéciale `layout` d'Astro](/fr/basics/layouts/#mises-en-page-markdown). Vous n'aurez plus besoin de créer manuellement des pages pour chaque itinéraire généré par Markdown. Ces fichiers peuvent être placés dans `src/pages/` pour profiter du routage automatique basé sur les fichiers. -Alternativement, vous pouvez utiliser les [collections de contenu](/fr/guides/content-collections/) dans Astro pour stocker et gérer votre contenu. Lorsqu'ils font partie d'une collection, les fichiers Markdown et MDX résideront dans des dossiers dans `src/content/`. Vous récupérerez vous-même le contenu et [générerez ces pages de manière dynamique](/fr/guides/content-collections/#générer-des-routes-à-partir-du-contenu). +Alternativement, vous pouvez utiliser les [collections de contenu](/fr/guides/content-collections/) dans Astro pour stocker et gérer votre contenu. Vous récupérerez vous-même le contenu et [générerez ces pages de manière dynamique](/fr/guides/content-collections/#générer-des-routes-à-partir-du-contenu). ### Migration des tests @@ -383,7 +385,7 @@ En savoir plus sur [l'utilisation spécifique de `` dans Astro](/fr/basi ### La récupération des données : de Next vers Astro -Convertissez toutes les instances de `getStaticProps()` en `Astro.glob()` ou `getCollection()`/`getEntryBySlug()` afin d'accéder aux données d'autres fichiers dans la source de votre projet. Pour [récupérer des données distantes](/fr/guides/data-fetching/), utilisez `fetch()`. +Convertissez toutes les instances de `getStaticProps()` en `import.meta.glob()` ou `getCollection()`/`getEntryBySlug()` afin d'accéder aux données d'autres fichiers dans la source de votre projet. Pour [récupérer des données distantes](/fr/guides/data-fetching/), utilisez `fetch()`. Ces demandes de données sont effectuées dans le frontmatter du composant Astro et utilisent une instruction `await` de niveau supérieur (« top-level await »). @@ -395,7 +397,7 @@ import { getCollection } from 'astro:content'; const allBlogPosts = await getCollection('blog'); // Get all `src/pages/posts/` entries -const allPosts = await Astro.glob('../pages/posts/*.md'); +const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true })); const response = await fetch('https://randomuser.me/api/'); const data = await response.json(); @@ -403,7 +405,7 @@ const randomUser = data.results[0]; --- ``` -En savoir plus sur les [importations de fichiers locaux avec `Astro.glob()`](/fr/guides/imports/#astroglob), l'[interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections) ou la [récupération de données distantes](/fr/guides/data-fetching/). +En savoir plus sur les [importations de fichiers locaux avec `import.meta.glob()`](/fr/guides/imports/#importmetaglob), l'[interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections) ou la [récupération de données distantes](/fr/guides/data-fetching/). ### Les styles : de Next vers Astro diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-nuxtjs.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-nuxtjs.mdx index 2ac183785c0ee..35c822f70cc03 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-nuxtjs.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-nuxtjs.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis NuxtJS description: Astuces pour migrer un projet NuxtJS existant vers Astro +sidebar: + label: NuxtJS type: migration stub: false framework: NuxtJS @@ -29,7 +31,7 @@ Nuxt et Astro partagent certaines similitudes qui vous aideront à migrer votre Lorsque vous reconstruisez votre site Nuxt dans Astro, vous remarquerez quelques différences importantes : -- Nuxt est un SPA (application monopage) basé sur Vue. Les sites Astro sont des applications multipages créées à l'aide de composants `.astro`, mais ils peuvent également prendre en charge React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit et des modèles HTML brut. +- Nuxt est un SPA (application monopage) basé sur Vue. Les sites Astro sont des applications multipages créées à l'aide de composants `.astro`, mais ils peuvent également prendre en charge React, Preact, Vue.js, Svelte, SolidJS, AlpineJS et des modèles HTML brut. - [Routage des pages](/fr/basics/astro-pages/#routage-basé-sur-les-fichiers) : Nuxt utilise `vue-router` pour le routage SPA et `vue-meta` pour gérer ``. Dans Astro, vous créerez des routes distinctes pour vos pages HTML et vous contrôlerez le contenu de la balise `` directement dans votre page ou dans un composant de mise en page. @@ -78,7 +80,7 @@ Vous pouvez utiliser un argument `--template` avec la commande `create astro` po Ensuite, copiez les fichiers existants de votre projet Nuxt vers votre nouveau projet Astro dans un dossier séparé en dehors de `src`. :::tip -Consultez https://astro.new pour la liste complète des modèles de démarrage officiels et des liens pour ouvrir un nouveau projet dans StackBlitz, CodeSandbox ou Gitpod. +Consultez https://astro.new pour la liste complète des modèles de démarrage officiels et des liens pour ouvrir un nouveau projet dans IDX, StackBlitz, CodeSandbox ou Gitpod. ::: ### Installer des intégrations (facultatif) @@ -224,7 +226,7 @@ Vous souhaiterez peut-être également réutiliser le code de [la propriété `h ### Migrer les pages et les articles -Dans NuxtJS, vos [pages](/fr/basics/astro-pages/) se trouvent dans `/pages`. Dans Astro, **les contenus de vos pages doivent résider dans `src/pages` ou `src/content`**. +Dans NuxtJS, vos [pages](/fr/basics/astro-pages/) se trouvent dans `/pages`. Dans Astro, **les contenus de vos pages doivent résider dans `src/pages`** sauf si vous utilisez les [collections de contenu](/fr/guides/content-collections/). #### Pages Vue @@ -261,7 +263,7 @@ Astro dispose d'une prise en charge intégrée pour Markdown et d'une intégrati Vous n'aurez plus besoin de créer manuellement des pages pour chaque route générée par Markdown ni d'utiliser un paquet externe comme `@nuxt/content`. Ces fichiers peuvent être placés dans `src/pages/` pour profiter du routage automatique basé sur les fichiers. -Lorsqu'ils font partie d'une [collection de contenu](/fr/guides/content-collections/), les fichiers Markdown et MDX vivront dans des dossiers à l'intérieur de `src/content/` et vous [générez ces pages dynamiquement](/fr/guides/content-collections/#générer-des-routes-à-partir-du-contenu). +Lorsqu'elles font partie d'une [collection de contenu](/fr/guides/content-collections/), vous [générez ces pages dynamiquement](/fr/guides/content-collections/#générer-des-routes-à-partir-du-contenu) à partir de vos entrées de contenu. ### Migrer les tests diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-pelican.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-pelican.mdx index d21ec90e21dba..a275a415db25b 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-pelican.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-pelican.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis Pelican description: Conseils pour la migration d'un projet Pelican existant vers Astro +sidebar: + label: Pelican type: migration stub: true framework: Pelican @@ -59,7 +61,7 @@ Pelican a peut-être pris en charge une grande partie de la mise en page de votr Comme Pelican, Astro dispose de nombreux plugins qui étendent ses fonctionnalités. Explorez la [liste officielle des intégrations](/fr/guides/integrations-guide/) pour ajouter des fonctionnalités telles que la prise en charge de MDX et trouvez des centaines d'autres intégrations gérées par la communauté dans le [Répertoire des intégrations Astro](https://astro.build/integrations/). Vous pouvez même utiliser l'[API Intégration d'Astro](/fr/reference/integrations-reference/) pour créer votre propre intégration personnalisée afin d'étendre les fonctionnalités de votre projet. -Pour convertir d'autres types de sites, comme un portfolio ou un blog, consultez d'autres modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Pour convertir d'autres types de sites, comme un portfolio ou un blog, consultez d'autres modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-sveltekit.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-sveltekit.mdx index 4b4212b120b90..d0ab3c2d2a8e9 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-sveltekit.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-sveltekit.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis SvelteKit description: Conseils pour migrer un projet SvelteKit existant vers Astro +sidebar: + label: SvelteKit type: migration stub: true framework: SvelteKit @@ -29,7 +31,7 @@ Lorsque vous reconstruisez votre site SvelteKit dans Astro, vous remarquerez que - Les sites Astro sont des applications multi-pages, alors que SvelteKit utilise par défaut des SPA (applications mono-page) avec un rendu côté serveur, mais peut également créer des MPA, des SPA traditionnelles, ou vous pouvez mélanger ces techniques au sein d'une application. -- [Composants](/fr/basics/astro-components/) : SvelteKit utilise [Svelte](https://svelte.dev). Les pages Astro sont construites en utilisant les [composants `.astro`](/fr/basics/astro-components/), mais peuvent aussi supporter [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/fr/guides/framework-components/) et le templating HTML brut. +- [Composants](/fr/basics/astro-components/) : SvelteKit utilise [Svelte](https://svelte.dev). Les pages Astro sont construites en utilisant les [composants `.astro`](/fr/basics/astro-components/), mais peuvent aussi supporter [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/fr/guides/framework-components/) et le templating HTML brut. - [Axé sur le contenu](/fr/concepts/why-astro/#axé-sur-le-contenu) : Astro a été conçu pour mettre en valeur votre contenu et vous permettre d'opter pour l'interactivité uniquement en cas de besoin. Une application SvelteKit existante peut être conçue pour une forte interactivité côté client. Astro a des capacités intégrées pour travailler avec votre contenu, comme la génération de pages, mais peut nécessiter des techniques Astro avancées pour inclure des éléments qui sont plus difficiles à reproduire en utilisant les composants `.astro`, comme les tableaux de bord. @@ -64,7 +66,7 @@ Apportez vos fichiers Markdown existants (ou MDX, avec notre intégration option Bien que les composants de routage et de mise en page basés sur les fichiers soient similaires dans Astro, vous pouvez consulter [la structure de projet d'Astro](/fr/basics/project-structure/) pour savoir où les fichiers doivent être placés. -Pour convertir d'autres types de sites, tels qu'un portfolio ou un site de documentation, consultez les modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Pour convertir d'autres types de sites, tels qu'un portfolio ou un site de documentation, consultez les modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-vuepress.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-vuepress.mdx index ca5755999cf21..c3c48b5f2590d 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-vuepress.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-vuepress.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis VuePress description: Conseils pour migrer un projet VuePress existant vers Astro +sidebar: + label: VuePress type: migration stub: true framework: VuePress @@ -25,7 +27,7 @@ VuePress et Astro partagent certaines similitudes qui vous aideront à migrer vo Lorsque vous reconstruisez votre site VuePress dans Astro, vous remarquerez quelques différences importantes. -- VuePress est une application monopage (SPA) basée sur Vue. Les sites Astro sont des applications multi-pages construites à l'aide de [composants `.astro`](/fr/basics/astro-components/), mais peuvent également prendre en charge [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/fr/guides/framework-components/) et le templating HTML brut. +- VuePress est une application monopage (SPA) basée sur Vue. Les sites Astro sont des applications multi-pages construites à l'aide de [composants `.astro`](/fr/basics/astro-components/), mais peuvent également prendre en charge [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/fr/guides/framework-components/) et le templating HTML brut. - [Modèles de mise en page](/fr/basics/layouts/) : Les sites VuePress sont créés à l'aide de fichiers Markdown (`.md`) pour le contenu des pages et de modèles HTML (`.html`) pour la mise en page. Astro est basé sur des composants et utilise des composants Astro, qui incluent des modèles HTML pour les pages, les mises en page et les éléments individuels de l'interface utilisateur. Astro peut également créer des [pages à partir de fichiers `.md` et `.mdx`](/fr/guides/markdown-content/), en utilisant un composant de mise en page Astro pour envelopper le contenu Markdown dans un modèle de page. @@ -59,7 +61,7 @@ Apportez vos fichiers de contenu Markdown existants à [créer des pages Markdow VuePress, ou tout autre thème que vous avez installé, a probablement géré une grande partie de la mise en page et des métadonnées de votre site pour vous. Vous pouvez lire l'article sur [la construction de Layouts Astro en tant qu'enveloppes de page Markdown](/fr/basics/layouts/#mises-en-page-markdown) pour voir comment gérer vous-même le templating dans Astro, y compris votre page ``. -Vous pouvez trouver la documentation de démarrage d'Astro, ainsi que d'autres modèles, sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Vous pouvez trouver la documentation de démarrage d'Astro, ainsi que d'autres modèles, sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-wordpress.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-wordpress.mdx index 600bca0ac7ffc..16997a7769e9a 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-wordpress.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-wordpress.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis WordPress description: Astuces pour migrer un projet WordPress existant vers Astro. +sidebar: + label: WordPress type: migration stub: true framework: WordPress @@ -27,7 +29,7 @@ WordPress et Astro partagent certaines similitudes qui vous aideront à migrer v Lorsque vous reconstruisez votre site WordPress dans Astro, vous remarquerez quelques différences importantes : -- Un site WordPress est édité en utilisant un tableau de bord en ligne. Dans Astro, vous utiliserez un [éditeur de code](/fr/editor-setup/) et un environnement de développement pour maintenir votre site. Vous pouvez développer localement sur votre machine ou choisir un éditeur/environnement de développement en ligne comme StackBlitz, CodeSandbox ou Gitpod. +- Un site WordPress est édité en utilisant un tableau de bord en ligne. Dans Astro, vous utiliserez un [éditeur de code](/fr/editor-setup/) et un environnement de développement pour maintenir votre site. Vous pouvez développer localement sur votre machine ou choisir un éditeur/environnement de développement en ligne comme IDX, StackBlitz, CodeSandbox ou Gitpod. - WordPress dispose d’un vaste marché de plugins et de thèmes. Dans Astro, vous trouverez quelques thèmes et [intégrations](https://astro.build/integrations/) disponibles, mais vous devrez peut-être désormais créer vous-même bon nombre de vos fonctionnalités existantes au lieu de rechercher des solutions tierces. Vous pouvez également choisir de commencer avec un [thème Astro](https://astro.build/themes) possédant des fonctionnalités intégrées ! @@ -63,7 +65,7 @@ Vous souhaiterez peut-être suivre le [tutoriel Construire un blog](/fr/tutorial Si vous souhaitez déplacer tous vos articles existants vers Astro, vous pourriez trouver cet [outil pour exporter du contenu Markdown depuis WordPress utile](https://github.com/lonekorean/wordpress-export-to-markdown). Vous devrez peut-être apporter quelques ajustements au résultat si vous devez [convertir un site WordPress volumineux ou compliqué vers Markdown](https://swizec.com/blog/how-to-export-a-large-wordpress-site-to-markdown/). -Pour convertir d'autres types de sites, comme un portfolio ou un site de documentation, découvrez plus de modèles de démarrage officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Pour convertir d'autres types de sites, comme un portfolio ou un site de documentation, découvrez plus de modèles de démarrage officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/index.mdx b/src/content/docs/fr/guides/migrate-to-astro/index.mdx index 63ac0f1d67b06..052209129d8f9 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/index.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/index.mdx @@ -1,6 +1,8 @@ --- title: Migrer un projet existant vers Astro description: Quelques trucs et astuces pour convertir votre site vers Astro. +sidebar: + label: Aperçu des migrations de site i18nReady: true --- import MigrationGuidesNav from '~/components/MigrationGuidesNav.astro'; @@ -33,7 +35,7 @@ Selon votre projet déjà existant, vous pourrez peut-être utiliser vos composa [De nombreux sites existants peuvent être construits avec Astro](/fr/concepts/why-astro/). Astro est parfaitement adapté à vos sites existants basés sur le contenu, tels que les blogs, les landing pages, les sites marketing et les portfolios. Astro s'intègre à plusieurs Headless CMS populaires et vous permet de connecter des paniers de boutique eCommerce. -Astro vous permet de choisir entre un site généré statiquement et le [rendu côté serveur (SSR)](/fr/guides/on-demand-rendering/), ce qui en fait un excellent remplacement pour les SSGs ou pour les sites qui ont besoin de récupérer des données de page à la volée. +Astro vous permet d'avoir un site web entièrement généré de manière statique, une application dynamique avec des routes rendues à la demande ou une combinaison des deux avec [un contrôle complet sur le rendu de votre projet](/fr/guides/on-demand-rendering/), ce qui en fait un excellent remplacement pour les SSG ou pour les sites qui doivent récupérer certaines données de page à la volée. ## Comment la conception de mon projet va-t-elle changer ? diff --git a/src/content/docs/fr/guides/routing.mdx b/src/content/docs/fr/guides/routing.mdx index 1f1f3dad2d450..570028821dd24 100644 --- a/src/content/docs/fr/guides/routing.mdx +++ b/src/content/docs/fr/guides/routing.mdx @@ -12,7 +12,7 @@ Astro utilise **le routage basé sur les fichiers** pour générer vos URLs de c ## Naviguer entre les pages -Astro utilise des éléments HTML standard [``](https://developer.mozilla.org/fr-FR/docs/Web/HTML/Element/a) pour naviguer entre les itinéraires. Il n'y a pas de composant `` spécifique au cadre de travail. +Astro utilise des éléments HTML standard [``](https://developer.mozilla.org/fr-FR/docs/Web/HTML/Element/a) pour naviguer entre les routes. Il n'y a pas de composant `` spécifique au framework. ```astro title="src/pages/index.astro"

    En savoir plus about Astro !

    @@ -23,10 +23,10 @@ Astro utilise des éléments HTML standard [``](https://developer.mozilla.org ## Routes Statiques -Les composants Astro (`.astro`) et les fichiers Markdown (`.md`) dans le répertoire `src/pages` **deviendront automatiquement des pages de votre site web**. La route de chaque page correspond à son chemin et à son nom de fichier dans le répertoire `src/pages`. +Les composants de page `.astro` ainsi que les fichiers Markdown et MDX (`.md`, `.mdx`) dans le répertoire `src/pages` **deviennent automatiquement des pages de votre site web**. La route de chaque page correspond à son chemin et à son nom de fichier dans le répertoire `src/pages`. ```diff -# Exemple: Routes Statiques +# Exemple : Routes Statiques src/pages/index.astro -> mysite.com/ src/pages/about.astro -> mysite.com/about src/pages/about/index.astro -> mysite.com/about @@ -87,8 +87,21 @@ Cela va générer `/en-v1/info` et `/fr-v2/info`. Les paramètres peuvent être inclus dans des parties séparées du chemin, ainsi nous pourrions utiliser `src/pages/[lang]/[version]/info.astro` avec le même `getStaticPaths` pour générer `/en/v1/info` et `/fr/v2/info`. -En savoir plus sur [`getStaticPaths()`](/fr/reference/api-reference/#getstaticpaths). +#### Décodage de `params` +Les `params` fournis à la fonction `getStaticPaths()` ne sont pas décodés. Utilisez la fonction [`decodeURI`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/decodeURI) lorsque vous avez besoin de décoder les valeurs des paramètres. + +```astro title="src/pages/[slug].astro" +--- +export function getStaticPaths() { + return [ + { params: { slug: decodeURI("%5Bpage%5D") } }, // est décodé en "[page]" + ] +} +--- +``` + +En apprendre plus sur [`getStaticPaths()`](/fr/reference/routing-reference/#getstaticpaths). @@ -131,7 +144,7 @@ Dans cet exemple, une requête pour `/withastro/astro/tree/main/docs/public/favi #### Exemple : Pages dynamiques à plusieurs niveaux -Ici, nous utilisons un paramètre REST (`[...slug]`) et la fonctionnalité [`props`](/fr/reference/api-reference/#transfert-de-données-avec-props) de `getStaticPaths()` pour générer des pages pour des slugs de différentes profondeurs. +Ici, nous utilisons un paramètre REST (`[...slug]`) et la fonctionnalité [`props`](/fr/reference/routing-reference/#data-passing-with-props) de `getStaticPaths()` pour générer des pages pour des slugs de différentes profondeurs. ```astro title="src/pages/[...slug].astro" --- @@ -385,7 +398,7 @@ Astro a besoin de savoir quelle route doit être utilisée pour construire la pa - Les routes basées sur des fichiers ont priorité sur les redirections. - Si aucune des règles ci-dessus ne décide de l'ordre, les routes sont triées par ordre alphabétique en fonction des paramètres régionaux par défaut de votre installation Node. -Dans l'exemple ci-dessus, voici quelques exemples de la manière dont les règles feront correspondre une URL demandée à la route utilisée pour construire le code HTML :: +Dans l'exemple ci-dessus, voici quelques exemples de la manière dont les règles feront correspondre une URL demandée à la route utilisée pour construire le code HTML : - `pages/post/create.astro` - Ne construira que des `/post/create`. - `pages/post/[pid].ts` - Construira `/post/abc`, `/post/xyz`, etc. Mais pas `/post/create`. @@ -398,7 +411,7 @@ Dans l'exemple ci-dessus, voici quelques exemples de la manière dont les règle Les routes internes ont la priorité sur les routes définies par l'utilisateur ou par l'intégration, car elles sont nécessaires au déroulement des fonctionnalités d'Astro. Les routes réservées d'Astro sont les suivantes : - `_astro/` : Fournit toutes les ressources statiques au client, y compris les documents CSS, les scripts client intégrés, les images optimisées et toutes les ressources Vite. -- `_server_islands/` : Sert les composants dynamiques différés dans une [Île de serveur](/fr/reference/configuration-reference/#experimentalserverislands); +- `_server_islands/` : Sert les composants dynamiques différés dans une [Île de serveur](/fr/guides/server-islands/). - `_actions/` : Sert toutes les [actions](/fr/guides/actions/) définies. ## Pagination @@ -497,7 +510,7 @@ const { page } = Astro.props; {page.url.last ? Fin : null} ``` -En savoir plus sur [la propriété `page` de pagination](/fr/reference/api-reference/#la-propriété-page-de-pagination). +En savoir plus sur [la propriété `page` de pagination](/fr/reference/routing-reference/#the-pagination-page-prop). ### Pagination Imbriquée @@ -519,7 +532,7 @@ Dans l'exemple suivant, nous allons implémenter la pagination imbriquée pour c // src/pages/[tag]/[page].astro export function getStaticPaths({paginate}) { const allTags = ['red', 'blue', 'green']; - const allPosts = await Astro.glob('../../posts/*.md'); + const allPosts = Object.values(import.meta.glob('../pages/post/*.md', { eager: true })); // Pour chaque tag, retourne un résultat paginate(). // Assurez-vous de passer `{params: {tag}}` à la fonction `paginate()` // afin qu'Astro sache à quel groupe de tags le résultat est destiné. diff --git a/src/content/docs/fr/guides/styling.mdx b/src/content/docs/fr/guides/styling.mdx index 5312bccd5c0be..38c8eee847f80 100644 --- a/src/content/docs/fr/guides/styling.mdx +++ b/src/content/docs/fr/guides/styling.mdx @@ -1,6 +1,6 @@ --- -title: Styles & CSS -description: Apprenez à styliser des composants dans Astro avec des styles délimités, des CSS externes et des outils tels que Sass et PostCSS. +title: Styles et CSS +description: Apprenez à mettre en forme des composants dans Astro avec des styles à portée limitée, des CSS externes et des outils tels que Sass et PostCSS. i18nReady: true --- @@ -9,11 +9,11 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' import ReadMore from '~/components/ReadMore.astro' -Astro a été conçu pour faciliter le stylisme et l'écriture de CSS. Écrivez votre propre CSS directement dans un composant Astro ou importez votre bibliothèque CSS préférée comme [Tailwind][tailwind]. Les langages de style avancés comme [Sass][sass] et [Less][less] sont également pris en charge. +Astro a été conçu pour rendre la mise en forme et l'écriture CSS un jeu d'enfant. Écrivez votre propre CSS directement dans un composant Astro ou importez votre bibliothèque CSS préférée comme [Tailwind][tailwind]. Les langages avancés de mise en forme comme [Sass][sass] et [Less][less] sont également pris en charge. ## Styliser avec Astro -Le style d'un composant Astro est aussi simple que l'ajout d'une balise ` ``` -### Styles scopés +### Styles à portée limitée -Les règles CSS Astro ` ``` -Voici ce que cela donne : +Est compilé comme ceci : ```astro ``` -Vous pouvez également mélanger des règles CSS globales et étendues dans la même balise ` -

    Title

    +

    Titre

    ``` -C'est un excellent moyen de styliser des éléments tels que des articles de blog ou des documents dont le contenu est géré par un CMS et qui se trouvent en dehors d'Astro. Mais attention : les composants dont l'apparence diffère selon qu'ils ont ou non un certain composant parent peuvent devenir difficiles à dépanner. +C'est un excellent moyen de mettre en forme des éléments tels que des articles de blog ou des documents dont le contenu est géré par un CMS et qui se trouvent en dehors d'Astro. Mais attention : les composants dont l'apparence diffère selon qu'ils ont ou non un certain composant parent peuvent devenir difficiles à dépanner. -Les styles restreints doivent être utilisés aussi souvent que possible. Les styles globaux ne doivent être utilisés qu'en cas de besoin. +Les styles à portée limitée doivent être utilisés aussi souvent que possible. Les styles globaux ne doivent être utilisés qu'en cas de besoin. ### Combiner des classes avec `class:list` @@ -107,13 +107,13 @@ const { isRed } = Astro.props; ``` -Consultez notre page [directives reference](/fr/reference/directives-reference/#classlist) pour en savoir plus sur `class:list`. +Consultez notre page de [référence des directives](/fr/reference/directives-reference/#classlist) pour en savoir plus sur `class:list`. ### Variables CSS

    -Le ` -Ce sera rouge! +Ce sera rouge ! ``` -:::noteStyles en cascade à partir des composants parents] +:::note[Styles à portée limitée à partir des composants parents] Parce que l'attribut `data-astro-cid-*` inclut l'enfant dans la portée de son parent, il est possible que les styles passent en cascade du parent à l'enfant. Pour éviter que cela n'ait des effets secondaires inattendus, assurez-vous d'utiliser des noms de classe uniques dans le composant enfant. ::: ### Styles en ligne -Vous pouvez styler les éléments HTML en ligne en utilisant l'attribut `style`. Il peut s'agir d'une chaîne CSS ou d'un objet de propriétés CSS : +Vous pouvez mettre en forme les éléments HTML en ligne en utilisant l'attribut `style`. Il peut s'agir d'une chaîne CSS ou d'un objet de propriétés CSS : ```astro title="src/pages/index.astro" // Ils sont équivalents: @@ -179,12 +179,12 @@ Vous pouvez styler les éléments HTML en ligne en utilisant l'attribut `style`. Il y a deux façons de résoudre les feuilles de style globales externes : une importation ESM pour les fichiers situés dans la source de votre projet, et un lien URL absolu pour les fichiers dans votre répertoire `public/`, ou hébergés en dehors de votre projet. -En savoir plus sur l'utilisation des [assets statique](/fr/guides/imports/) situés dans `public/` ou `src/`. +En savoir plus sur l'utilisation des [ressources statiques](/fr/guides/imports/) situés dans `public/` ou `src/`. ### Importer une feuille de style locale :::caution[Utilisation d'un paquet npm ?] -Vous pouvez avoir besoin de mettre à jour votre `astro.config` lorsque vous importez des paquets npm. Voir la section ["importer des feuilles de style depuis un paquet npm"](#importer-une-feuille-de-style-à-partir-dun-paquet-npm) ci-dessous. +Vous pouvez avoir besoin de mettre à jour votre `astro.config` lorsque vous importez des paquets npm. Voir la section [« importer des feuilles de style depuis un paquet npm »](#importer-une-feuille-de-style-à-partir-dun-paquet-npm) ci-dessous. ::: Vous pouvez importer des feuilles de style dans le frontmatter de vos composants Astro en utilisant la syntaxe d'importation ESM. Les importations CSS fonctionnent comme [toute autre importation ESM dans un composant Astro](/fr/basics/astro-components/#le-script-du-composant), qui doit être référencé comme **relatif au composant** et doit être écrit en **haut** du script de votre composant, avec toutes les autres importations. @@ -223,7 +223,7 @@ import { defineConfig } from 'astro/config'; export default defineConfig({ vite: { ssr: { - noExternal: ['package-name'], + noExternal: ['nom-du-paquet'], } } }) @@ -244,22 +244,22 @@ import 'package-name/normalize'; ``` -### Charger une feuille de style statique via les balises "link +### Charger une feuille de style statique via les balises "link" Vous pouvez également utiliser l'élément `` pour charger une feuille de style sur la page. Il doit s'agir d'un chemin d'URL absolu vers un fichier CSS situé dans votre répertoire `/public`, ou d'une URL vers un site web externe. Les valeurs href `` relatives ne sont pas supportées. ```astro title="src/pages/index.astro" {3,5} - + ``` -Comme cette approche utilise le répertoire `public/`, elle ne tient pas compte du traitement CSS normal, du regroupement et des optimisations fournis par Astro. Si vous avez besoin de ces transformations, utilisez la méthode [Import a Stylesheet](#importer-une-feuille-de-style-locale) ci-dessus. +Comme cette approche utilise le répertoire `public/`, elle ne tient pas compte du traitement CSS normal, du regroupement et des optimisations fournis par Astro. Si vous avez besoin de ces transformations, utilisez la méthode [Importer une feuille de style](#importer-une-feuille-de-style-locale) ci-dessus. -## Ordre en cascade +## Ordre de cascade Les composants Astro doivent parfois évaluer plusieurs sources de CSS. Par exemple, votre composant peut importer une feuille de style CSS, inclure sa propre balise ` ``` -4. 첫 번째 정적 자산 만들기 - - 또한 정적 자산을 저장하기 위해 `public/` 디렉터리를 생성할 수도 있습니다. Astro는 항상 최종 빌드에 이러한 자산을 포함하므로 컴포넌트 템플릿에서 안전하게 참조할 수 있습니다. - - 텍스트 편집기에서 `public/robots.txt` 파일을 만듭니다. `robots.txt`는 Google과 같은 검색 봇에게 사이트 처리 방법을 알려주기 위해 대부분의 사이트에 포함되는 간단한 파일입니다. - - 이 가이드에서는 다음 코드 조각을 복사하여 새 파일에 붙여넣습니다. +4. 첫 번째 정적 자산을 생성합니다. + + 정적 자산을 저장하기 위해 `public/` 디렉터리를 생성해야 합니다. Astro는 최종 빌드에 이러한 자산들을 항상 포함시키므로, 컴포넌트 템플릿에서 안전하게 참조할 수 있습니다. + + 텍스트 편집기에서 디렉터리의 `public/robots.txt`에 새 파일을 생성하세요. `robots.txt`는 대부분의 사이트가 Google과 같은 검색 봇에게 사이트를 어떻게 처리해야 하는지 알려주기 위해 포함하는 간단한 파일입니다. + + 이 가이드에서는 다음 코드 스니펫을 새로운 파일에 복사하여 붙여넣으세요: ```diff title="public/robots.txt" - # 예: 모든 봇이 사이트를 스캔하고 색인을 생성하도록 허용. + # 예시: 모든 봇이 사이트를 스캔하고 색인할 수 있도록 허용 # 전체 구문: https://developers.google.com/search/docs/advanced/robots/create-robots-txt User-agent: * Allow: / ``` -5. `astro.config.mjs` 생성 - - Astro는 `astro.config.mjs`를 사용하여 구성됩니다. Astro를 구성할 필요가 없다면 이 파일은 선택 사항이지만 지금 생성하고 싶을 수도 있습니다. - - 프로젝트 루트에 `astro.config.mjs`를 만들고 아래 코드를 복사하세요. +5. `astro.config.mjs`를 생성합니다. + + Astro는 `astro.config.mjs`를 사용하여 구성됩니다. Astro를 구성할 필요가 없다면 이 파일은 선택사항이지만, 지금 생성해두는 것이 좋을 수 있습니다. + + 프로젝트의 루트에 `astro.config.mjs`를 생성하고, 아래 코드를 복사하여 붙여넣으세요: ```js title="astro.config.mjs" import { defineConfig } from 'astro/config'; @@ -381,18 +286,18 @@ Astro는 배포 가능한 버전의 사이트를 별도의 폴더 (기본적으 // https://astro.build/config export default defineConfig({}); ``` - - 프로젝트에 React, Svelte 등과 같은 [UI 프레임워크 컴포넌트](/ko/guides/framework-components/)를 포함하거나 Tailwind 또는 Partytown과 같은 다른 도구를 사용하려는 경우 여기에서 [수동으로 가져와 통합을 구성합니다](/ko/guides/integrations-guide/). - - 자세한 내용은 Astro의 [API 구성 참조](/ko/reference/configuration-reference/)를 확인하세요. + + React, Svelte 등과 같은 [UI 프레임워크 컴포넌트](/ko/guides/framework-components/)를 포함하거나 프로젝트에서 Tailwind 또는 Partytown과 같은 다른 도구를 사용하려면, 이곳에서 [통합을 수동으로 가져와 구성](/ko/guides/integrations-guide/)하면 됩니다. + + 더 자세한 내용은 Astro의 [API 구성 참조](/ko/reference/configuration-reference/)를 참고하세요. 6. TypeScript 지원 추가 - - TypeScript는 `tsconfig.json`을 사용하여 구성됩니다. TypeScript 코드를 작성하지 않더라도 Astro 및 VS Code와 같은 도구가 프로젝트를 이해하는 방법을 제공하므로 이 파일은 중요합니다. 일부 기능 (예: npm 패키지 가져오기)은 `tsconfig.json` 파일이 없으면 편집기에서 지원되지 않습니다. - - TypeScript 코드를 작성하려는 경우 Astro의 `strict` 또는 `strictest` 템플릿을 사용하는 것이 좋습니다. [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/)에서 세 가지 템플릿 구성을 보고 비교할 수 있습니다. - - 프로젝트 루트에 `tsconfig.json`을 생성하고 아래 코드를 복사하세요. (TypeScript 템플릿에 `base`, `strict` 또는 `strictest`를 사용할 수 있습니다) + + TypeScript는 `tsconfig.json`을 사용하여 구성됩니다. TypeScript 코드를 작성하지 않더라도, 이 파일은 Astro와 VS Code와 같은 도구가 프로젝트를 이해하는 방법을 알 수 있게 해주므로 중요합니다. npm 패키지 가져오기와 같은 일부 기능은 `tsconfig.json` 파일이 없으면 편집기에서 전혀 지원되지 않습니다. + + TypeScript 코드를 작성할 계획이 있다면, Astro의 `strict` 또는 `strictest` 템플릿을 사용하는 것이 권장됩니다. [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/)에서 세 가지 템플릿 구성을 보고 비교할 수 있습니다. + + 프로젝트의 루트에 `tsconfig.json`을 생성하고, 아래 코드를 복사하여 붙여넣으세요. (TypeScript 템플릿으로 `base`, `strict`, 또는 `strictest`를 사용할 수 있습니다): ```json title="tsconfig.json" "base" { @@ -400,11 +305,11 @@ Astro는 배포 가능한 버전의 사이트를 별도의 폴더 (기본적으 } ``` - 자세한 내용은 Astro의 [TypeScript 설정 가이드](/ko/guides/typescript/#설정)를 확인하세요. + Astro의 [TypeScript 설정 가이드](/ko/guides/typescript/#설정)에서 더 자세한 내용을 참고하세요. 7. 다음 단계 - 위 단계를 수행했다면 이제 프로젝트 디렉터리는 다음과 같아야 합니다. + 위의 단계들을 따랐다면, 프로젝트 디렉터리는 이제 다음과 같이 보일 것입니다: - node_modules/ @@ -414,11 +319,11 @@ Astro는 배포 가능한 버전의 사이트를 별도의 폴더 (기본적으 - pages/ - index.astro - astro.config.mjs - - package-lock.json 또는 `yarn.lock`, `pnpm-lock.yaml` 등 + - package-lock.json 또는 `yarn.lock`, `pnpm-lock.yaml`, 등 - package.json - tsconfig.json -8. 이제 [Astro 개발 서버를 시작](#astro-개발-서버-시작)하여 빌드하는 동안 프로젝트의 실시간 미리보기를 볼 수 있습니다! +8. 이제 [Astro 개발 서버를 시작](/ko/develop-and-build/#astro-개발-서버-시작)하고 프로젝트를 만드는 동안 실시간 미리보기를 확인할 수 있습니다! diff --git a/src/content/docs/ko/recipes/analyze-bundle-size.mdx b/src/content/docs/ko/recipes/analyze-bundle-size.mdx index 4018c1afcef07..902eea9c085af 100644 --- a/src/content/docs/ko/recipes/analyze-bundle-size.mdx +++ b/src/content/docs/ko/recipes/analyze-bundle-size.mdx @@ -84,4 +84,4 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; 하이드레이션에 대한 Astro의 독특한 접근 방식을 고려할 때, 이 빌드가 반드시 클라이언트가 받게 될 번들을 나타내지는 않습니다. Rollup visualizer는 사이트 전체에서 사용되는 모든 종속성을 표시하지만, 페이지별로 번들 크기를 세분화하지는 않습니다. -::: +::: \ No newline at end of file diff --git a/src/content/docs/ko/recipes/build-forms-api.mdx b/src/content/docs/ko/recipes/build-forms-api.mdx index 0a039f4371b8a..5d78f12e29918 100644 --- a/src/content/docs/ko/recipes/build-forms-api.mdx +++ b/src/content/docs/ko/recipes/build-forms-api.mdx @@ -1,5 +1,5 @@ --- -title: API 경로를 사용하여 양식 작성 +title: API 라우트를 사용하여 양식 작성 description: JavaScript를 사용하여 양식 제출을 API 경로로 보내는 방법을 알아보세요. i18nReady: true type: recipe @@ -14,7 +14,7 @@ HTML 양식을 사용하면 브라우저가 페이지를 새로 고치거나 새 ## 전제 조건 -- [SSR](/ko/guides/on-demand-rendering/) (`output: 'server'` 또는 `'hybrid'`)가 활성화된 프로젝트가 필요합니다. +- [요청 시 렌더링을 위한 어댑터](/ko/guides/on-demand-rendering/)를 사용하는 프로젝트가 필요합니다. - 설치된 [UI 프레임워크 통합](/ko/guides/framework-components/)이 필요합니다. ## 레시피 diff --git a/src/content/docs/ko/recipes/build-forms.mdx b/src/content/docs/ko/recipes/build-forms.mdx index f1f98d76970c7..3c67ff78aefa1 100644 --- a/src/content/docs/ko/recipes/build-forms.mdx +++ b/src/content/docs/ko/recipes/build-forms.mdx @@ -203,4 +203,4 @@ SSR 모드에서 Astro 페이지는 양식을 표시하고 처리할 수 있습 ``` - \ No newline at end of file + diff --git a/src/content/docs/ko/recipes/bun.mdx b/src/content/docs/ko/recipes/bun.mdx index a7c656854eda7..c95d617f17f3d 100644 --- a/src/content/docs/ko/recipes/bun.mdx +++ b/src/content/docs/ko/recipes/bun.mdx @@ -13,7 +13,7 @@ Bun을 Astro와 사용할 때 미완성된 기능들을 마주할 수 있으며, Bun을 사용하면서 문제가 발생하면, [Bun의 Github 저장소에서 직접 issue를 생성해주세요](https://github.com/oven-sh/bun/issues/new/choose). ::: -## 요구사항 +## 전제 조건 - Bun이 로컬 기기에 설치되어 있어야 합니다. Bun 공식 문서의 [설치 방법](https://bun.sh/docs/installation)을 참조하세요. @@ -26,7 +26,7 @@ bunx create-astro@latest my-astro-project-using-bun ``` :::tip -`--template` 플래그를 사용하여 [기존 Astro GitHub 저장소에서 새로운 Astro 프로젝트를 생성](/ko/install-and-setup/#테마-또는-시작-템플릿-사용)할 수도 있습니다: +`--template` 플래그를 사용하여 [기존 Astro GitHub 저장소에서 새로운 Astro 프로젝트를 생성](/ko/install-and-setup/#cli-마법사를-통한-설치)할 수도 있습니다: ```bash bunx create-astro@latest my-astro-project-using-bun --template eliancodes/brutal ``` @@ -90,7 +90,7 @@ bunx --bun astro preview ## Bun으로 SSR 추가 -Bun은 [Node.js API 호환성](https://bun.sh/docs/runtime/nodejs-apis)을 제공하므로 Astro 프로젝트에서 [서버 측 렌더링](/ko/guides/on-demand-rendering/)을 위한 모든 Astro 어댑터를 사용할 수 있습니다: +Bun은 [Node.js API 호환성](https://bun.sh/docs/runtime/nodejs-apis)을 제공하므로 Astro 프로젝트의 [요청 시 렌더링](/ko/guides/on-demand-rendering/)을 위한 모든 Astro 어댑터를 사용할 수 있습니다: ```bash bunx astro add vercel diff --git a/src/content/docs/ko/recipes/call-endpoints.mdx b/src/content/docs/ko/recipes/call-endpoints.mdx index 1dc1dce0f4f82..c6bc2711b460f 100644 --- a/src/content/docs/ko/recipes/call-endpoints.mdx +++ b/src/content/docs/ko/recipes/call-endpoints.mdx @@ -29,7 +29,7 @@ import { Steps } from '@astrojs/starlight/components'; } ``` -2. Astro 페이지의 엔드포인트에서 `GET()` 메서드를 가져옵니다. 요청 컨텍스트를 제공하기 위해 [`Astro` global](/ko/reference/api-reference/#astro-global)을 인자로 전달하여 이 메서드를 호출합니다. 그러면 이 응답을 페이지에서 사용할 수 있습니다. +2. Astro 페이지의 엔드포인트에서 `GET()` 메서드를 가져옵니다. 요청 컨텍스트를 제공하기 위해 [`Astro` global](/ko/reference/api-reference/)을 인자로 전달하여 이 메서드를 호출합니다. 그러면 이 응답을 페이지에서 사용할 수 있습니다. ```astro title="src/pages/index.astro" --- @@ -41,4 +41,4 @@ import { Steps } from '@astrojs/starlight/components';

    {data.greeting} world!

    ``` - \ No newline at end of file + diff --git a/src/content/docs/ko/recipes/docker.mdx b/src/content/docs/ko/recipes/docker.mdx index 5afeff22eee08..d53f1475d28be 100644 --- a/src/content/docs/ko/recipes/docker.mdx +++ b/src/content/docs/ko/recipes/docker.mdx @@ -189,4 +189,4 @@ CMD node ./dist/server/entry.mjs `http://localhost:`에서 사이트에 액세스할 수 있어야 합니다. 3. 이제 웹 사이트가 성공적으로 빌드되어 컨테이너에 패키징되었으므로 이를 클라우드 공급자에 배포할 수 있습니다. 한 가지 예시는 [Google Cloud](/ko/guides/deploy/google-cloud/#cloud-run-ssr-및-정적) 배포 가이드와 Docker 문서의 [앱 배포](https://docs.docker.com/language/nodejs/deploy/) 페이지를 참조하세요. - \ No newline at end of file + diff --git a/src/content/docs/ko/recipes/i18n.mdx b/src/content/docs/ko/recipes/i18n.mdx index 4062247e4865f..eaf2d2c3be48e 100644 --- a/src/content/docs/ko/recipes/i18n.mdx +++ b/src/content/docs/ko/recipes/i18n.mdx @@ -84,10 +84,10 @@ v4.0에서 Astro는 기본 및 지원되는 언어를 구성할 수 있게 해 - post-2.md -2. `src/content/config.ts` 파일을 만들고 각 콘텐츠 유형에 대한 컬렉션을 내보냅니다. +2. `src/content.config.ts` 파일을 만들고 각 콘텐츠 유형에 대한 컬렉션을 내보냅니다. ```ts - //src/content/config.ts + //src/content.config.ts import { defineCollection, z } from 'astro:content'; const blogCollection = defineCollection({ @@ -526,4 +526,4 @@ v4.0에서 Astro는 기본 및 지원되는 언어를 구성할 수 있게 해 - [astro-i18n](https://github.com/alexandre-fernandez/astro-i18n) — Astro용 TypeScript 우선 국제화 라이브러리입니다. - [astro-i18n-aut](https://github.com/jlarmstrongiv/astro-i18n-aut) — 페이지 생성 없이 `defaultLocale`을 지원하는 i18n용 Astro 통합입니다. 통합은 어댑터와 UI 프레임워크에 구애받지 않습니다. - [astro-react-i18next](https://github.com/jeremyxgo/astro-react-i18next) — Astro 웹사이트의 React 컴포넌트에서 i18next 및 react-i18next를 원활하게 사용할 수 있도록 하는 Astro 통합입니다. -- [paraglide](https://inlang.com/c/astro) - Astro 아일랜드와 같은 부분적인 하이드레이션 패턴을 위해 특별히 설계된 완전한 타입 안정성을 갖춘 i18n 라이브러리입니다. \ No newline at end of file +- [paraglide](https://inlang.com/c/astro) - Astro 아일랜드와 같은 부분적인 하이드레이션 패턴을 위해 특별히 설계된 완전한 타입 안정성을 갖춘 i18n 라이브러리입니다. diff --git a/src/content/docs/ko/recipes/index.mdx b/src/content/docs/ko/recipes/index.mdx index 569c7e122bddc..1f2229567d21b 100644 --- a/src/content/docs/ko/recipes/index.mdx +++ b/src/content/docs/ko/recipes/index.mdx @@ -1,5 +1,7 @@ --- -title: 활용 레시피 +title: Astro 레시피 +sidebar: + label: 레시피 개요 description: 간단하고 핵심적인 실습 가이드. i18nReady: true --- @@ -15,11 +17,6 @@ Astro의 공식 레시피는 특정 작업의 실제 예제를 완성하는 과 -- [Astro Tips](https://astro-tips.dev) - -{/* - ## 커뮤니티 리소스 -커뮤니티 레시피 목록에서 커뮤니티 구성원들이 작성하고 제출한 더 많은 레시피를 찾아보세요. -*/} \ No newline at end of file +[Astro Tips](https://astro-tips.dev)에서 커뮤니티에서 작성하고 제출한 더 많은 레시피를 확인하세요. diff --git a/src/content/docs/ko/recipes/rss.mdx b/src/content/docs/ko/recipes/rss.mdx index eb2dbd7611fe3..4a8f926a2658b 100644 --- a/src/content/docs/ko/recipes/rss.mdx +++ b/src/content/docs/ko/recipes/rss.mdx @@ -13,7 +13,7 @@ Astro는 블로그 및 기타 콘텐츠 웹사이트를 위한 빠른 자동 RSS ## `@astrojs/rss` 설정 -패키지 [`@astrojs/rss`](https://github.com/withastro/astro/tree/main/packages/astro-rss)는 [API endpoints](/ko/guides/endpoints/#정적-파일-엔드포인트)를 사용하여 RSS 피드를 생성하기 위한 헬퍼를 제공합니다. 이렇게 하면 [SSR adapter](/ko/guides/on-demand-rendering/)를 사용할 때 정적 빌드 및 온디맨드 생성을 모두 사용할 수 있습니다. +패키지 [`@astrojs/rss`](https://github.com/withastro/astro/tree/main/packages/astro-rss)는 [API 엔드포인트](/ko/guides/endpoints/#정적-파일-엔드포인트)를 사용하여 RSS 피드를 생성하기 위한 헬퍼를 제공합니다. 이렇게 하면 [SSR 어댑터](/ko/guides/on-demand-rendering/)를 사용할 때 정적 빌드 및 온디맨드 생성을 모두 사용할 수 있습니다. 1. 선호하는 패키지 관리자를 사용하여 `@astrojs/rss`를 설치하세요. @@ -56,7 +56,7 @@ Astro는 블로그 및 기타 콘텐츠 웹사이트를 위한 빠른 자동 RSS // 출력 xml에서의 `` 필드 description: 'A humble Astronaut’s guide to the stars', // 엔드포인트 컨텍스트에서 프로젝트 "site"를 가져옵니다. - // https://docs.astro.build/ko/reference/api-reference/#contextsite + // https://docs.astro.build/ko/reference/api-reference/#site site: context.site, // 출력 xml에서의 `` 배열 // 콘텐츠 컬렉션 및 glob 가져오기를 사용한 예제는 "항목 생성" 섹션을 참조하세요. @@ -114,7 +114,7 @@ export async function GET(context) { 모든 블로그 항목이 유효한 RSS 피드 항목을 생성하도록 하려면 스키마의 각 개별 속성을 정의하는 대신 선택적으로 `rssSchema`를 가져와 적용할 수 있습니다. -```js title="src/content/config.ts" "rssSchema" +```js title="src/content.config.ts" "rssSchema" import { defineCollection } from 'astro:content'; import { rssSchema } from '@astrojs/rss'; @@ -211,7 +211,7 @@ export function GET(context) { site: context.site, items: posts.map((post) => ({ link: post.url, - content: sanitizeHtml(post.compiledContent()), + content: sanitizeHtml((await post.compiledContent())), ...post.frontmatter, })), }); diff --git a/src/content/docs/ko/recipes/sharing-state-islands.mdx b/src/content/docs/ko/recipes/sharing-state-islands.mdx index 16050f8884e7b..35ca7d6c9f4d1 100644 --- a/src/content/docs/ko/recipes/sharing-state-islands.mdx +++ b/src/content/docs/ko/recipes/sharing-state-islands.mdx @@ -101,11 +101,6 @@ export const sharedCount = createSignal(0); npm install nanostores @nanostores/vue ``` - - ```shell - npm install nanostores @nanostores/lit - ``` - 여기에서 [Nano Stores 사용 안내서](https://github.com/nanostores/nanostores#guide)로 이동하거나 아래 예시를 따라갈 수 있습니다! @@ -243,27 +238,6 @@ export default function CartButton() { ``` - -```ts -// src/components/CartFlyoutToggle.ts -import { LitElement, html } from 'lit'; -import { isCartOpen } from '../cartStore'; - -export class CartFlyoutToggle extends LitElement { - handleClick() { - isCartOpen.set(!isCartOpen.get()); - } - - render() { - return html` - - `; - } -} - -customElements.define('cart-flyout-toggle', CartFlyoutToggle); -``` - 그런 다음 `CartFlyout` 컴포넌트에서 `isCartOpen`을 읽을 수 있습니다. @@ -335,25 +309,7 @@ export default function CartFlyout() { ``` - -```ts -// src/components/CartFlyout.ts -import { isCartOpen } from '../cartStore'; -import { LitElement, html } from 'lit'; -import { StoreController } from '@nanostores/lit'; - -export class CartFlyout extends LitElement { - private cartOpen = new StoreController(this, isCartOpen); - - render() { - return this.cartOpen.value ? html`` : null; - } -} - -customElements.define('cart-flyout', CartFlyout); -``` - ### "maps" 사용 @@ -598,41 +554,7 @@ export default function AddToCartForm({ children }) { ``` - -```ts -// src/components/AddToCartForm.ts -import { LitElement, html } from 'lit'; -import { isCartOpen, addCartItem } from '../cartStore'; - -export class AddToCartForm extends LitElement { - static get properties() { - return { - item: { type: Object }, - }; - } - constructor() { - super(); - this.item = {}; - } - - addToCart(e) { - e.preventDefault(); - isCartOpen.set(true); - addCartItem(this.item); - } - - render() { - return html` -
    - -
    - `; - } -} -customElements.define('add-to-cart-form', AddToCartForm); -``` -     마지막으로 `CartFlyout` 내부에 장바구니 항목을 렌더링합니다. @@ -771,51 +693,7 @@ export default function CartFlyout() { ``` - -```ts -// src/components/CartFlyout.ts -import { LitElement, html } from 'lit'; -import { isCartOpen, cartItems } from '../cartStore'; -import { StoreController } from '@nanostores/lit'; -export class CartFlyoutLit extends LitElement { - private cartOpen = new StoreController(this, isCartOpen); - private getCartItems = new StoreController(this, cartItems); - - renderCartItem(cartItem) { - return html` -
  • - ${cartItem.name} -

    ${cartItem.name}

    -

    Quantity: ${cartItem.quantity}

    -
    • - `; - } - - render() { - return this.cartOpen.value - ? html` - - ` - : null; - } -} - -customElements.define('cart-flyout', CartFlyoutLit); -``` -     이제 은하계에서 가장 작은 JS 번들이 포함된 완전한 대화형 전자상거래 예시가 생겼습니다. 🚀 diff --git a/src/content/docs/ko/recipes/sharing-state.mdx b/src/content/docs/ko/recipes/sharing-state.mdx index a92cf45cac7d7..730a24096d6f6 100644 --- a/src/content/docs/ko/recipes/sharing-state.mdx +++ b/src/content/docs/ko/recipes/sharing-state.mdx @@ -85,4 +85,4 @@ Astro 웹 사이트를 구축할 때 컴포넌트 간 상태를 공유해야 할 ## 자료 - [Nano Stores의 NPM 링크](https://www.npmjs.com/package/nanostores) -- [Vanilla JS를 위한 Nano Stores 문서 ](https://github.com/nanostores/nanostores#vanilla-js) \ No newline at end of file +- [Vanilla JS를 위한 Nano Stores 문서 ](https://github.com/nanostores/nanostores#vanilla-js) diff --git a/src/content/docs/ko/reference/adapter-reference.mdx b/src/content/docs/ko/reference/adapter-reference.mdx index 57cc4e2fb6147..c36e1350743f4 100644 --- a/src/content/docs/ko/reference/adapter-reference.mdx +++ b/src/content/docs/ko/reference/adapter-reference.mdx @@ -1,16 +1,18 @@ --- title: Astro 어댑터 API +sidebar: + label: 어댑터 API i18nReady: true --- import Since from '~/components/Since.astro'; import { FileTree } from '@astrojs/starlight/components'; -Astro는 SSR (서버 측 렌더링)을 위해 모든 클라우드 제공업체에 쉽게 배포할 수 있도록 설계되었습니다. 이 기능은 [통합](/ko/reference/integrations-reference/)으로 제공되는 __어댑터__ 를 통해 사용할 수 있습니다. 기존 어댑터를 사용하는 방법을 알아보려면 [SSR 가이드](/ko/guides/on-demand-rendering/)를 참조하세요. +Astro는 서버 측 렌더링(SSR)으로 알려진 요청 시 렌더링을 위해 모든 클라우드 제공업체에 쉽게 배포할 수 있도록 설계되었습니다. 이 기능은 [통합](/ko/reference/integrations-reference/)으로 제공되는 __어댑터__ 를 통해 사용할 수 있습니다. 기존 어댑터를 사용하는 방법을 알아보려면 [요청 시 렌더링 가이드](/ko/guides/on-demand-rendering/)를 참조하세요. ## 어댑터란 무엇입니까? -어댑터는 서버 측 렌더링을 위한 엔트리포인트 제공하는 특별한 종류의 [통합](/ko/reference/integrations-reference/)입니다. 어댑터는 두 가지 작업을 수행합니다. +어댑터는 요청 시 서버 렌더링을 위한 엔트리포인트 제공하는 특별한 종류의 [통합](/ko/reference/integrations-reference/)입니다. 어댑터는 두 가지 작업을 수행합니다. - 요청 처리를 위한 호스트별 API를 구현합니다. - 호스트 규칙에 따라 빌드를 구성합니다. @@ -48,7 +50,7 @@ interface AstroAdapter { serverEntrypoint?: string; exports?: string[]; adapterFeatures: AstroAdapterFeatures; - supportedAstroFeatures: AstroFeatureMap; + supportedAstroFeatures: AstroAdapterFeatureMap; } export interface AstroAdapterFeatures { @@ -57,49 +59,52 @@ export interface AstroAdapterFeatures { */ edgeMiddleware: boolean; /** - * SSR 전용입니다. 각 경로는 자체 함수/파일이 됩니다. + * 어댑터가 의도하는 빌드 출력 유형을 결정합니다. 기본값은 `server`입니다. */ - functionPerRoute: boolean; + buildOutput?: 'static' | 'server'; } -export type SupportsKind = 'unsupported' | 'stable' | 'experimental' | 'deprecated'; +export type AdapterSupportsKind = 'unsupported' | 'stable' | 'experimental' | 'deprecated' | 'limited'; -export type AstroFeatureMap = { +export type AdapterSupportWithMessage = { + support: Exclude; + message: string; +}; + +export type AdapterSupport = AdapterSupportsKind | AdapterSupportWithMessage; + +export type AstroAdapterFeatureMap = { /** * 어댑터는 정적 페이지를 제공할 수 있습니다. */ - staticOutput?: SupportsKind; + staticOutput?: AdapterSupport; /** * 어댑터는 정적이거나 서버를 통해 렌더링되는 페이지를 제공할 수 있습니다. */ - hybridOutput?: SupportsKind; + hybridOutput?: AdapterSupport; /** - * 어댑터는 SSR 페이지를 제공할 수 있습니다. + * 어댑터는 요청 시 렌더링되는 페이지를 제공할 수 있습니다. */ - serverOutput?: SupportsKind; - /** - * 어댑터는 정적 자산을 내보낼 수 있습니다. - */ - assets?: AstroAssetsFeature; -}; - -export interface AstroAssetsFeature { - supportKind?: SupportsKind; + serverOutput?: AdapterSupport; /** - * 이 어댑터가 'sharp' 라이브러리와 호환되는 환경에 파일을 배포하는지 여부 - */ - isSharpCompatible?: boolean; + * 어댑터는 i18n 도메인을 지원할 수 있습니다. + */ + i18nDomains?: AdapterSupport; + /** + * 어댑터는 `astro:env/server`에서 내보낸 `getSecret`을 지원할 수 있습니다. + */ + envGetSecret?: AdapterSupport; /** - * 이 어댑터가 'squoosh' 라이브러리와 호환되는 환경에 파일을 배포하는지 여부 + * 어댑터는 Sharp 이미지 서비스를 지원합니다. */ - isSquooshCompatible?: boolean; -} + sharpImageService?: AdapterSupport; +}; ``` 속성은 다음과 같습니다. * __name__: 로깅에 사용되는 어댑터의 고유 이름입니다. -* __serverEntrypoint__: 서버 측 렌더링의 엔트리포인트입니다. +* __serverEntrypoint__: 요청 시 서버 렌더링의 엔트리포인트입니다. * __exports__: `createExports`와 함께 사용되는 경우 명명된 내보내기 배열입니다 (아래 설명 참조). * __adapterFeatures__: 어댑터에서 지원해야 하는 특정 기능을 활성화하는 객체입니다. 이러한 기능은 빌드된 출력을 변경하며 어댑터는 다양한 출력을 처리하기 위해 적절한 로직을 구현해야 합니다. @@ -191,7 +196,12 @@ export function start(manifest) { 다음과 같은 메서드가 제공됩니다. -##### `app.render(request: Request, options?: RenderOptions)` +##### `app.render()` + +

    + +**타입:** `(request: Request, options?: RenderOptions) => Promise` +

    이 메서드는 요청과 일치하는 Astro 페이지를 호출하고 렌더링한 후 [Response](https://developer.mozilla.org/ko/docs/Web/API/Response) 객체에 Promise를 반환합니다. 이는 페이지를 렌더링하지 않는 API 경로에도 적용됩니다. @@ -201,10 +211,21 @@ const response = await app.render(request); ##### `RenderOptions` +

    + +**타입:** `{addCookieHeader?: boolean; clientAddress?: string; locals?: object; routeData?: RouteData;}` +

    + `app.render()` 메서드는 필수 `request` 인수와 [`addCookieHeader`](#addcookieheader), [`clientAddress`](#clientaddress), [`locals`](#locals), [`routeData`](#routedata)에 대한 선택적 `RenderOptions` 객체를 허용합니다. ###### `addCookieHeader` +

    + +**타입:** `boolean`
    +**기본값:** `false` +

    + `Astro.cookie.set()`이 작성한 모든 쿠키를 응답 헤더에 자동으로 추가할지 여부입니다. `true`로 설정하면 응답의 `Set-Cookie` 헤더에 쉼표로 구분된 키-값 쌍으로 추가됩니다. 표준 `response.headers.getSetCookie()` API를 사용하여 개별적으로 읽을 수 있습니다. `false` (기본값)로 설정하면 `App.getSetCookieFromResponse(response)`에서만 쿠키를 사용할 수 있습니다. @@ -215,7 +236,13 @@ const response = await app.render(request, { addCookieHeader: true }); ###### `clientAddress` -페이지에서는 [`Astro.clientAddress`](/ko/reference/api-reference/#astroclientaddress)로, API 경로 및 미들웨어에서는 `ctx.clientAddress`로 사용할 수 있는 클라이언트 IP 주소입니다. +

    + +**타입:** `string`
    +**기본값:** `request[Symbol.for("astro.clientAddress")]` +

    + +페이지에서는 [`Astro.clientAddress`](/ko/reference/api-reference/#clientaddress)로, API 경로 및 미들웨어에서는 `ctx.clientAddress`로 사용할 수 있는 클라이언트 IP 주소입니다. 아래 예시에서는 `x-forwarded-for` 헤더를 읽고 이를 `clientAddress`로 전달합니다. 이 값은 사용자가 `Astro.clientAddress`로 사용할 수 있게 됩니다. @@ -226,7 +253,12 @@ const response = await app.render(request, { clientAddress }); ###### `locals` -요청 수명 주기 동안 정보를 저장하고 액세스하는 데 사용되는 [`context.locals` 객체](/ko/reference/api-reference/#contextlocals)입니다. +

    + +**타입:** `object` +

    + +요청 수명 주기 동안 정보를 저장하고 액세스하는 데 사용되는 [`context.locals` 객체](/ko/reference/api-reference/#locals)입니다. 아래 예시에서는 `x-private-header`라는 헤더를 읽고 이를 객체로 구문 분석한 후 `locals`에 전달하려고 시도합니다. 그런 다음 [미들웨어 함수](/ko/guides/middleware/)에 전달될 수 있습니다. @@ -244,7 +276,13 @@ try { ###### `routeData` -렌더링할 경로를 이미 알고 있는 경우 [`routeData`](/ko/reference/integrations-reference/#routedata-타입-참조)에 대한 값을 제공하세요. 그렇게 하면 렌더링할 경로를 결정하기 위해 [`app.match`](#appmatchrequest)에 대한 내부 호출을 우회하게 됩니다. +

    + +**타입:** `RouteData`
    +**기본값:** `app.match(request)` +

    + +렌더링할 경로를 이미 알고 있는 경우 [`integrationRouteData`](/ko/reference/integrations-reference/#integrationroutedata-타입-참조)에 대한 값을 제공하세요. 그렇게 하면 렌더링할 경로를 결정하기 위해 [`app.match`](#appmatch)에 대한 내부 호출을 우회하게 됩니다. ```js "routeData" const routeData = app.match(request); @@ -256,7 +294,12 @@ if (routeData) { } ``` -##### `app.match(request)` +##### `app.match()` + +

    + +**타입:** `(request: Request) => RouteData | undefined` +

    이 메서드는 요청이 Astro 앱의 라우팅 규칙과 일치하는지 확인하는 데 사용됩니다. @@ -293,9 +336,9 @@ Astro 기능은 어댑터가 Astro에 기능을 지원할 수 있는지 여부 이러한 작업은 지원되거나 지원되지 않는 기능, 지원 수준 및 사용자가 사용하는 구성을 기반으로 실행됩니다. -다음 구성은 Astro에 이 어댑터가 자산에 대한 실험적 지원을 제공하지만, 어댑터가 내장 서비스 Sharp 및 Squoosh와 호환되지 않음을 알려줍니다. +다음 구성은 이 어댑터가 Sharp 기반의 내장 이미지 서비스에 대한 실험적 지원을 가지고 있음을 Astro에 알려줍니다. -```js title="my-adapter.mjs" ins={9-15} +```js title="my-adapter.mjs" ins={9-11} export default function createIntegration() { return { name: '@matthewp/my-adapter', @@ -305,12 +348,8 @@ export default function createIntegration() { name: '@matthewp/my-adapter', serverEntrypoint: '@matthewp/my-adapter/server.js', supportedAstroFeatures: { - assets: { - supportKind: "experimental", - isSharpCompatible: false, - isSquooshCompatible: false - } - } + sharpImageService: 'experimental' + } }); }, }, @@ -318,42 +357,52 @@ export default function createIntegration() { } ``` -Astro는 터미널에 **경고**를 기록합니다. +Sharp 이미지 서비스가 사용되는 경우, Astro는 어댑터의 지원 상태에 따라 터미널에 경고와 오류를 기록할 것입니다. ``` [@matthewp/my-adapter] The feature is experimental and subject to issues or changes. + +[@matthewp/my-adapter] The currently selected adapter `@matthewp/my-adapter` is not compatible with the service "Sharp". Your project will NOT be able to build. ``` -자산에 사용되는 서비스가 어댑터와 호환되지 않으면 오류가 발생합니다. +사용자에게 더 많은 맥락을 제공하기 위해 추가적인 메시지를 제공할 수 있습니다: -``` -[@matthewp/my-adapter] The currently selected adapter `@matthewp/my-adapter` is not compatible with the service "Sharp". Your project will NOT be able to build. +```js title="my-adapter.mjs" ins={9-14} +export default function createIntegration() { + return { + name: '@matthewp/my-adapter', + hooks: { + 'astro:config:done': ({ setAdapter }) => { + setAdapter({ + name: '@matthewp/my-adapter', + serverEntrypoint: '@matthewp/my-adapter/server.js', + supportedAstroFeatures: { + sharpImageService: { + support: 'limited', + message: 'This adapter has limited support for Sharp, certain features may not work as expected.' + } + } + }); + }, + }, + }; +} ``` ## 어댑터 기능 내보낸 파일의 출력을 변경하는 기능 세트입니다. 어댑터가 이러한 기능을 선택하면 특정 후크에서 추가 정보를 얻게 됩니다. -### `functionPerRoute` - -SSR만을 사용하는 경우에만 활성화되는 기능입니다. 기본적으로 Astro는 각 요청마다 렌더링된 페이지를 내보내는 역할을 하는 단일 `entry.mjs` 파일을 내보냅니다. - -`functionPerRoute`가 `true`인 경우, Astro는 대신 프로젝트에 정의된 각 경로에 대해 별도의 파일을 생성합니다. +### `edgeMiddleware` -내보낸 각 파일은 한 페이지만 렌더링합니다. 페이지는 `dist/pages/` 디렉터리 (또는 [`outDir`](/ko/reference/configuration-reference/#outdir)에 지정된 디렉터리의 `/pages/` 디렉터리 아래)에 생성됩니다. 내보낸 파일은 `src/pages/` 디렉터리의 동일한 파일 경로를 유지합니다. +

    -빌드의 `pages/` 디렉터리에 있는 파일은 `src/pages/`에 있는 페이지 파일의 디렉터리 구조를 미러링합니다. 예를 들면 다음과 같습니다. +**타입:** `boolean` +

    - -- dist/ - - pages/ - - blog/ - - entry.\_slug\_.astro.mjs - - entry.about.astro.mjs - - entry.index.astro.mjs - +요청 시 렌더링되는 미들웨어 코드가 빌드 타임에 번들링될지 여부를 정의합니다. -어댑터에 `true`를 전달하여 기능을 활성화합니다. +활성화되면, 이는 빌드 타임에 모든 페이지에서 미들웨어 코드가 번들링되고 가져와지는 것을 방지합니다: ```js title="my-adapter.mjs" ins={9-11} export default function createIntegration() { @@ -365,7 +414,7 @@ export default function createIntegration() { name: '@matthewp/my-adapter', serverEntrypoint: '@matthewp/my-adapter/server.js', adapterFeatures: { - functionPerRoute: true + edgeMiddleware: true } }); }, @@ -374,9 +423,9 @@ export default function createIntegration() { } ``` -그런 다음 [`astro:build:ssr`](/ko/reference/integrations-reference/#astrobuildssr) 후크를 사용하면 빌드 후 내보낸 실제 파일에 페이지 경로를 매핑하는 `entryPoints` 객체가 제공됩니다. +그런 다음, 파일 시스템의 실제 파일에 대한 `URL`인 `middlewareEntryPoint`를 제공하는 [`astro:build:ssr`](/ko/reference/integrations-reference/#astrobuildssr) 훅을 사용합니다. -```js title="my-adapter.mjs" ins={15-19} +```js title="my-adapter.mjs" ins={15-20} export default function createIntegration() { return { name: '@matthewp/my-adapter', @@ -386,42 +435,36 @@ export default function createIntegration() { name: '@matthewp/my-adapter', serverEntrypoint: '@matthewp/my-adapter/server.js', adapterFeatures: { - functionPerRoute: true + edgeMiddleware: true } }); }, - 'astro:build:ssr': ({ entryPoints }) => { - for (const [route, entryFile] of entryPoints) { - // route 및 entryFile로 작업을 시작하세요. + 'astro:build:ssr': ({ middlewareEntryPoint }) => { + // 이 속성이 존재하는지 확인하는 것을 잊지 마세요. 어댑터가 이 기능을 사용하도록 설정하지 않은 경우 `undefined`가 될 것입니다. + if (middlewareEntryPoint) { + createEdgeMiddleware(middlewareEntryPoint) } } }, }; } -``` - -:::caution -`entryFile`은 `URL` 타입이며 파일 시스템에 있는 파일의 실제 경로를 나타냅니다. 즉, 코드가 실행되는 OS에 따라 경로가 변경됩니다. -::: - -#### 서버리스 환경 -서버리스 환경에서 `functionPerRoute: true`를 설정하면 각 경로에 대한 JavaScript 파일 (핸들러)이 생성됩니다. 핸들러는 호스팅 플랫폼 (lambda, function, page, 등)에 따라 다른 이름을 가질 수 있습니다. - -이러한 각 경로는 핸들러가 실행될 때 [콜드 스타트](https://azure.microsoft.com/en-us/blog/understanding-serverless-cold-start/)가 발생하여 약간의 지연이 발생할 수 있습니다. 이 지연은 다양한 요인의 영향을 받습니다. +function createEdgeMiddleware(middlewareEntryPoint) { + // 번들러를 사용하여 새로운 물리적 파일을 생성하세요. +} +``` -`functionPerRoute: false`를 사용하면 모든 경로 렌더링을 담당하는 단일 핸들러만 존재합니다. 이 핸들러가 처음 트리거되면 콜드 스타트가 발생합니다. 그러면 다른 모든 경로가 지연 없이 작동해야 합니다. 그러나 `functionPerRoute: true`가 제공하는 코드 분할의 이점을 잃게 됩니다. +### envGetSecret -:::note -프로젝트에 적합한 `functionPerRoute` 구성을 선택하려면 호스팅 플랫폼과 작동 방식을 이해하는 것이 중요합니다. -::: +

    -### `edgeMiddleware` +**타입:** `AdapterSupportsKind` +

    -빌드 시 SSR 미들웨어 코드를 번들링할지 여부를 정의합니다. +이는 어댑터가 `env.schema`에서 사용자가 구성한 비밀을 검색할 수 있도록 하는 기능입니다. -활성화되면 미들웨어 코드가 빌드 중에 모든 페이지에서 번들링되고 가져오는 것을 방지합니다. +어댑터에 유효한 `AdapterSupportsKind` 값을 전달하여 기능을 활성화하세요: ```js title="my-adapter.mjs" ins={9-11} export default function createIntegration() { @@ -433,7 +476,7 @@ export default function createIntegration() { name: '@matthewp/my-adapter', serverEntrypoint: '@matthewp/my-adapter/server.js', adapterFeatures: { - edgeMiddleware: true + envGetSecret: 'stable' } }); }, @@ -442,9 +485,62 @@ export default function createIntegration() { } ``` -그런 다음 후크 [`astro:build:ssr`](/ko/reference/integrations-reference/#astrobuildssr)를 사용하면 파일 시스템의 실제 파일에 대한 `middlewareEntryPoint`, `URL`을 제공합니다. +`astro/env/setup` 모듈을 통해 `getSecret()` 구현을 제공할 수 있습니다. 서버 엔트리포인트에서 가능한 한 빨리 `setGetEnv()`를 호출하세요: -```js title="my-adapter.mjs" ins={15-19} +```js ins={2,4} +import { App } from 'astro/app'; +import { setGetEnv } from "astro/env/setup" + +setGetEnv((key) => process.env[key]) + +export function createExports(manifest) { + const app = new App(manifest); + const handler = (event, context) => { + // ... + }; + + return { handler }; +} +``` + +비밀을 지원하는 경우, 환경 변수가 요청에 연결되어 있을 때 `getSecret()` 전에 `setGetEnv()`를 호출해야 합니다: + +```js ins={3,14} +import type { SSRManifest } from 'astro'; +import { App } from 'astro/app'; +import { setGetEnv } from 'astro/env/setup'; +import { createGetEnv } from '../utils/env.js'; + +type Env = { + [key: string]: unknown; +}; + +export function createExports(manifest: SSRManifest) { + const app = new App(manifest); + + const fetch = async (request: Request, env: Env) => { + setGetEnv(createGetEnv(env)); + + const response = await app.render(request); + + return response; + }; + + return { default: { fetch } }; +} +``` + +### buildOutput + +

    + +**타입:** `'static' | 'server'`
    + +

    + +이 속성을 사용하면 빌드의 특정 출력 형태를 강제할 수 있습니다. 이는 특정 출력 유형에서만 작동하는 어댑터에 유용할 수 있습니다. 예를 들어, 어댑터가 정적 웹사이트를 기대하지만 호스트별 파일을 생성하기 위해 어댑터를 사용하는 경우가 있습니다. 지정하지 않으면 기본값은 `server`입니다. + +```js title="my-adapter.mjs" ins={9-11} export default function createIntegration() { return { name: '@matthewp/my-adapter', @@ -454,22 +550,11 @@ export default function createIntegration() { name: '@matthewp/my-adapter', serverEntrypoint: '@matthewp/my-adapter/server.js', adapterFeatures: { - edgeMiddleware: true + buildOutput: 'static' } }); }, - - 'astro:build:ssr': ({ middlewareEntryPoint }) => { - // 이 속성이 존재하는지 확인하세요. 어댑터가 해당 기능을 선택하지 않으면 'undefined'가 됩니다. - if (middlewareEntryPoint) { - createEdgeMiddleware(middlewareEntryPoint) - } - } }, }; } - -function createEdgeMiddleware(middlewareEntryPoint) { - // 번들러를 사용하여 새로운 실제 파일을 내보냅니다. -} ``` diff --git a/src/content/docs/ko/reference/api-reference.mdx b/src/content/docs/ko/reference/api-reference.mdx index 5da7b5cb90c3c..59be187d93bac 100644 --- a/src/content/docs/ko/reference/api-reference.mdx +++ b/src/content/docs/ko/reference/api-reference.mdx @@ -1,240 +1,627 @@ --- -title: Astro 런타임 API +title: Astro 렌더링 컨텍스트 +sidebar: + label: 렌더링 컨텍스트 i18nReady: true tableOfContents: minHeadingLevel: 2 maxHeadingLevel: 4 --- import Since from '~/components/Since.astro'; -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Tabs, TabItem } from '@astrojs/starlight/components'; import ReadMore from '~/components/ReadMore.astro'; -## `Astro` global +페이지를 렌더링할 때 Astro는 현재 렌더링에 특정한 런타임 API를 제공합니다. 여기에는 현재 페이지 URL과 같은 유용한 정보와 다른 페이지로 리디렉션하는 등의 작업을 수행하는 API가 포함됩니다. -`Astro` global은 `.astro` 파일의 모든 컨텍스트에서 사용할 수 있습니다. 다음과 같은 기능이 있습니다: +`.astro` 컴포넌트에서 이 컨텍스트는 `Astro` 전역 객체에서 사용할 수 있습니다. 엔드포인트 함수도 이 동일한 컨텍스트 객체를 첫 번째 인수로 사용하여 호출되며, 그 속성은 Astro 전역 속성을 반영합니다. -### `Astro.glob()` +일부 속성은 요청 시 렌더링되는 경로에서만 사용할 수 있거나 미리 렌더링된 페이지에서 기능이 제한될 수 있습니다. -`Astro.glob()`은 정적 사이트 설정에 많은 로컬 파일을 로드하는 방법입니다. +`Astro` 전역 객체는 모든 `.astro` 파일에서 사용할 수 있습니다. 정적 또는 라이브 서버 엔드포인트를 제공하려면 [엔드포인트 함수](/ko/guides/endpoints/)에서, 페이지 또는 엔드포인트가 렌더링될 때 동작을 삽입하려면 [미들웨어](/ko/guides/middleware/)에서 `context` 객체를 사용합니다. -```astro +## 컨텍스트 객체 + +다음 프로퍼티는 `Astro` 전역(예: `Astro.props`, `Astro.redirect()`)에서 사용할 수 있으며 엔드포인트 함수 및 미들웨어에 전달되는 컨텍스트 객체(예: `context.props`, `context.redirect()`)에서도 사용할 수 있습니다. + +### `props` + +`props`는 [컴포넌트 속성](/ko/basics/astro-components/#컴포넌트-props)으로 전달된 값을 포함하는 객체입니다. + +```astro {3} --- -// src/components/my-component.astro -const posts = await Astro.glob('../pages/post/*.md'); // ./src/pages/post/*.md 파일에 있는 게시물 배열을 반환합니다. +// src/components/Heading.astro +const { title, date } = Astro.props; --- -
    -{posts.slice(0, 3).map((post) => ( -
    -

    {post.frontmatter.title}

    -

    {post.frontmatter.description}

    - Read more -
    -))} +

    {title}

    +

    {date}

    ``` -`.glob()`은 하나의 매개변수, 즉 가져오려는 로컬 파일의 상대 URL glob만 사용합니다. 비동기식이며 일치하는 파일에서 내보내기 배열을 반환합니다. +```astro "title=" "date=" +--- +// src/pages/index.astro +import Heading from '../components/Heading.astro'; +--- + +``` + +[Markdown 및 MDX 레이아웃](/ko/guides/markdown-content/#프런트매터-layout-속성)이 props를 처리하는 방법에 대해 자세히 알아보세요. -`.glob()`은 정적으로 분석할 수 없기 때문에 이를 보간하는 변수나 문자열을 사용할 수 없습니다. (해결 방법은 [문제 해결 안내서](/ko/guides/troubleshooting/#지원되는-값)를 참조하세요.) 이는 `Astro.glob()`이 Vite의 [`import.meta.glob()`의 래퍼이기 때문입니다.](https://ko.vite.dev/guide/features.html#glob-import). +`props` 객체에는 정적 경로를 렌더링할 때 `getStaticPaths()`에서 전달된 모든 `props`도 포함됩니다. + + + + ```astro title="src/pages/posts/[id].astro" "props:" {11} + --- + export function getStaticPaths() { + return [ + { params: { id: '1' }, props: { author: 'Blu' } }, + { params: { id: '2' }, props: { author: 'Erika' } }, + { params: { id: '3' }, props: { author: 'Matthew' } } + ]; + } + + const { id } = Astro.params; + const { author } = Astro.props; + --- + ``` + + + ```ts title="src/pages/posts/[id].json.ts" "props:" {11-15} + import type { APIContext } from 'astro'; + + export function getStaticPaths() { + return [ + { params: { id: '1' }, props: { author: 'Blu' } }, + { params: { id: '2' }, props: { author: 'Erika' } }, + { params: { id: '3' }, props: { author: 'Matthew' } } + ]; + } + + export function GET({ props }: APIContext) { + return new Response( + JSON.stringify({ author: props.author }), + ); + } + ``` + + + +더 보기: [`props`로 데이터 전달](/ko/reference/routing-reference/#props를-사용한-데이터-전달) -:::note -Astro 프로젝트에서 `import.meta.glob()` 자체를 사용할 수도 있습니다. 다음과 같은 경우에 이 작업을 수행할 수 있습니다. -- API 경로와 같이 `.astro`가 아닌 파일에 이 기능이 필요합니다. `Astro.glob()`은 `.astro` 파일에서만 사용할 수 있는 반면, `import.meta.glob()`은 프로젝트의 어느 곳에서나 사용할 수 있습니다. -- 각 파일을 즉시 로드하고 싶지는 않을 때 사용할 수 있습니다. `import.meta.glob()`은 콘텐츠 자체를 반환하는 대신 파일 콘텐츠를 가져오는 함수를 반환할 수 있습니다. 이 가져오기에는 가져온 파일의 모든 스타일과 스크립트가 포함됩니다. 이는 파일이 실제로 사용되는지 여부에 관계없이 번들로 묶여 페이지에 추가됩니다. 이는 런타임 시가 아닌 정적 분석에 의해 결정되기 때문입니다. -- 각 파일의 경로에 접근하고 싶을 때 사용할 수 있습니다. `import.meta.glob()`은 파일의 콘텐츠 경로 맵을 반환하는 반면 `Astro.glob()`은 콘텐츠 목록을 반환합니다. -- 여러 패턴을 전달하고 싶을 때 사용할 수 있습니다. 예를 들어 특정 파일을 필터링하는 "부정 패턴"을 추가하려고 합니다. `import.meta.glob()`은 선택적으로 단일 문자열이 아닌 glob 문자열 배열을 취할 수 있습니다. +### `params` -[Vite 문서](https://ko.vite.dev/guide/features.html#glob-import)에서 자세한 내용을 읽어보세요. -::: -#### Markdown 파일 +`params`는 요청과 일치하는 동적 경로 세그먼트의 값을 포함하는 객체입니다. 해당 키는 페이지 또는 엔드포인트 파일 경로의 [매개변수](/ko/guides/routing/#동적-경로)와 일치해야 합니다. + +정적 빌드에서는 [동적 경로](/ko/guides/routing/#동적-경로)를 미리 렌더링하는데 사용되는 `getStaticPaths()`가 반환하는 `params`가 됩니다. + + + + ```astro title="src/pages/posts/[id].astro" {9} "params:" + --- + export function getStaticPaths() { + return [ + { params: { id: '1' } }, + { params: { id: '2' } }, + { params: { id: '3' } } + ]; + } + const { id } = Astro.params; + --- +

    {id}

    + ``` +     + + ```ts title="src/pages/posts/[id].json.ts" "params:" {11-15} + import type { APIContext } from 'astro'; + + export function getStaticPaths() { + return [ + { params: { id: '1' } }, + { params: { id: '2' } }, + { params: { id: '3' } } + ]; + } + + export function GET({ params }: APIContext) { + return new Response( + JSON.stringify({ id: params.id }), + ); + } + ``` + +     + +경로가 요청 시 렌더링될 때 `params`는 동적 경로 패턴의 경로 세그먼트와 일치하는 임의의 값일 수 있습니다. + +```astro title="src/pages/posts/[id].astro" "Astro.params" +--- +import { getPost } from '../api'; -`Astro.glob()`으로 로드된 Markdown 파일은 다음과 같은 `MarkdownInstance` 인터페이스를 반환합니다: +const post = await getPost(Astro.params.id); -```ts -export interface MarkdownInstance> { - /* 이 파일의 YAML 프런트매터에 지정된 모든 데이터 */ - frontmatter: T; - /* 이 파일의 절대 파일 경로 */ - file: string; - /* 이 파일의 렌더링된 경로 */ - url: string | undefined; - /* 이 파일의 내용을 렌더링하는 Astro 컴포넌트 */ - Content: AstroComponentFactory; - /** (Markdown 전용) 레이아웃 HTML 및 YAML 프런트매터를 제외한 원시 Markdown 파일 콘텐츠 */ - rawContent(): string; - /** (Markdown 전용) 레이아웃 HTML을 제외한 HTML로 컴파일된 Markdown 파일 */ - compiledContent(): string; - /* 이 파일의 h1...h6 요소 배열을 반환하는 함수 */ - getHeadings(): Promise<{ depth: number; slug: string; text: string }[]>; - default: AstroComponentFactory; +// ID로 게시물을 찾을 수 없는 경우 +if (!post) { + return Astro.redirect("/404") } +--- + +

    {post.name}

    + ``` -TypeScript 제네릭을 사용하여 `frontmatter` 변수에 대한 타입을 선택적으로 제공할 수 있습니다. +더 보기: [`params`](/ko/reference/routing-reference/#params) -```astro ---- -interface Frontmatter { - title: string; - description?: string; -} -const posts = await Astro.glob('../pages/post/*.md'); ---- +### `url` -
      - {posts.map(post =>
    • {post.frontmatter.title}
      • )} -
    -``` +

    + +**타입:** `URL`
    + +

    -#### Astro 파일 +`url`은 현재 `request.url` 값으로 구성된 [URL](https://developer.mozilla.org/ko/docs/Web/API/URL) 객체입니다. pathname 및 origin과 같은 요청 URL의 개별 속성과 상호 작용할 때 유용합니다. -Astro 파일에는 다음과 같은 인터페이스가 있습니다: +`Astro.url`은 `new URL(Astro.request.url)`을 수행하는 것과 동일합니다. -```ts -export interface AstroInstance { - /* 이 파일의 파일 경로 */ - file: string; - /* 이 파일의 URL (page 디렉터리에 있는 경우) */ - url: string | undefined; - default: AstroComponentFactory; -} -``` +개발 모드에서 `url`은 `localhost` URL이 됩니다. 사이트를 빌드할 때 미리 렌더링된 경로는 [`site`](/ko/reference/configuration-reference/#site) 및 [`base`](/ko/reference/configuration-reference/#base) 옵션에 기반한 URL을 받게 됩니다. `site`가 구성되지 않은 경우 미리 렌더링된 페이지도 빌드 중에 `localhost` URL을 받게 됩니다. -#### 기타 파일 +```astro title="src/pages/index.astro" "Astro.url" +

    The current URL is: {Astro.url}

    +

    The current URL pathname is: {Astro.url.pathname}

    +

    The current URL origin is: {Astro.url.origin}

    +``` -다른 파일에는 다양한 인터페이스가 있을 수 있지만, 인식할 수 없는 파일 타입에 무엇이 포함되어 있는지 정확히 아는 경우 `Astro.glob()`은 TypeScript 제네릭을 허용합니다. +`url`을 [`new URL()`](https://developer.mozilla.org/ko/docs/Web/API/URL/URL)의 인자로 전달하여 새 URL을 만들 수도 있습니다. -```ts +```astro title="src/pages/index.astro" "Astro.url" --- -interface CustomDataFile { - default: Record; -} -const data = await Astro.glob('../data/**/*.js'); +// 예시: 프로덕션 도메인을 사용하여 canonical URL 생성 +const canonicalURL = new URL(Astro.url.pathname, Astro.site); +// 예시: 현재 도메인을 사용하여 SEO 메타 태그의 URL 생성 +const socialImageURL = new URL('/images/preview.png', Astro.url); --- + + ``` -### `Astro.props` +### `site` -`Astro.props`는 [컴포넌트 속성](/ko/basics/astro-components/#컴포넌트-props)으로 전달된 모든 값을 포함하는 객체입니다. `.md` 및 `.mdx` 파일의 레이아웃 컴포넌트는 프런트매터 값을 props로 받습니다. +

    -```astro {3} ---- -// src/components/Heading.astro -const { title, date } = Astro.props; ---- -

    -

    {title}

    -

    {date}

    -
    -``` +**타입:** `URL | undefined` +

    -```astro /title=".+"/ /date=".+"/ ---- -// src/pages/index.astro -import Heading from '../components/Heading.astro'; ---- - +`site`는 Astro 구성의 `site`에서 만든 `URL`을 반환합니다. Astro 구성에서 [`site`](/ko/reference/configuration-reference/#site)에 대한 값을 설정하지 않은 경우 `undefined`를 반환합니다. + +```astro title="src/pages/index.astro" "Astro.site" + ``` -[Markdown 및 MDX 레이아웃](/ko/guides/markdown-content/#프런트매터-layout-속성)이 props를 처리하는 방법에 대해 자세히 알아보세요. +### `clientAddress` -[props에 대한 TypeScript 타입 정의](/ko/guides/typescript/#컴포넌트-props)를 추가하는 방법을 알아보세요. +

    -### `Astro.params` +**타입:** `string`
    + +

    -`Astro.params`는 이 요청과 일치하는 동적 경로 세그먼트의 값을 포함하는 객체입니다. +`clientAddress`는 요청의 [IP 주소](https://en.wikipedia.org/wiki/IP_address)를 지정합니다. 이 속성은 요청 시 렌더링되는 경로에만 사용할 수 있으며 미리 렌더링된 페이지에는 사용할 수 없습니다. -정적 빌드에서 이 객체는 [동적 경로](/ko/guides/routing/#동적-경로) 사전 렌더링에 사용되는 `getStaticPaths()`에서 반환하는 `params`입니다. + + + ```astro title="src/pages/ip-address.astro" "Astro.clientAddress" + --- + export const prerender = false; // 'server' 모드에서는 필요하지 않음 + --- -```astro title="src/pages/posts/[id].astro" ---- -export function getStaticPaths() { - return [ - { params: { id: '1' } }, - { params: { id: '2' } }, - { params: { id: '3' } } - ]; -} +
    Your IP address is: {Astro.clientAddress}
    + ``` +     + + ```ts title="src/pages/ip-address.ts" "clientAddress" + export const prerender = false; // 'server' 모드에서는 필요하지 않음 + import type { APIContext } from 'astro'; -const { id } = Astro.params; ---- -

    {id}

    -``` + export function GET({ clientAddress }: APIContext) { + return new Response(`Your IP address is: ${clientAddress}`); + } + ``` +     +     -SSR 빌드에서는 동적 경로 패턴의 경로 세그먼트와 일치하는 모든 값이 될 수 있습니다. +### `isPrerendered` -```astro title="src/pages/posts/[id].astro" ---- -import { getPost } from '../api'; +

    -const post = await getPost(Astro.params.id); +**타입**: `boolean`
    + +

    -// 이 ID로 게시물을 찾을 수 없습니다. -if (!post) { - Astro.redirect("/404") -} ---- - -

    {post.name}

    - -``` +현재 페이지가 미리 렌더링된 페이지인지 여부를 나타내는 부울입니다. -함께 보기: [`params`](#params) +이 속성을 사용하여 미들웨어에서 조건부 로직을 실행할 수 있습니다(예: 미리 렌더링된 페이지의 헤더에 액세스하지 않도록 하기 위해). -### `Astro.request` +### `generator` + +

    + +**타입:** `string`
    + +

    + +`generator`는 프로젝트가 실행 중인 Astro의 현재 버전을 제공합니다. 현재 사용 중인 Astro 버전과 함께 [``](https://html.spec.whatwg.org/multipage/semantics.html#meta-generator) 태그를 추가하는 편리한 방법입니다. 이 태그는 `"Astro v5.x.x"` 형식을 따릅니다. + + + + ```astro title="src/pages/site-info.astro" "Astro.generator" + + + + + + + + + ``` + + + ```ts title="src/pages/site-info.json.ts" "generator" + import type { APIContext } from 'astro'; + + export function GET({ generator, site }: APIContext) { + const body = JSON.stringify({ generator, site }); + return new Response(body); + } + ``` + + + +### `request`

    **타입:** `Request`

    -`Astro.request`는 표준 [Request](https://developer.mozilla.org/ko/docs/Web/API/Request) 객체입니다. `url`, `headers`, `method` 및 요청 본문을 가져오는 데 사용할 수 있습니다. +`request`는 표준 [Request](https://developer.mozilla.org/ko/docs/Web/API/Request) 객체입니다. 요청의 `url`, `headers`, `method`, 본문을 가져오는 데 사용할 수 있습니다. -```astro -

    Received a {Astro.request.method} request to "{Astro.request.url}".

    -

    Received request headers: {JSON.stringify(Object.fromEntries(Astro.request.headers))} -``` + + + ```astro wrap title="src/pages/index.astro" "Astro.request" +

    Received a {Astro.request.method} request to "{Astro.request.url}".

    +

    Received request headers:

    +

    {JSON.stringify(Object.fromEntries(Astro.request.headers))}

    + ``` + + + ```ts "request" + import type { APIContext } from 'astro'; -함께 보기: [`Astro.url`](#astrourl) + export function GET({ request }: APIContext) { + return new Response(`Hello ${request.url}`); + } + ``` + + :::note -기본 `output: 'static'` 옵션을 사용하면 `Astro.request.url`에는 `?foo=bar`와 같은 검색 매개변수가 포함되지 않습니다. 정적 빌드 중에 매개변수를 미리 결정할 수 없기 때문입니다. 그러나 `output: 'server'` 모드에서 `Astro.request.url`은 서버 요청에서 확인할 수 있는 검색 매개변수를 포함합니다. +미리 렌더링된 페이지에서는 `request.url`에 `?type=new`와 같은 검색 매개변수가 포함되지 않습니다. 정적 빌드 중에 값을 미리 결정할 수 없기 때문입니다. 그러나 요청 시 렌더링되는 페이지에서는 `request.url`에 검색 매개변수가 포함됩니다. 서버 요청으로부터 값을 결정할 수 있기 때문입니다. ::: -### `Astro.response` +### `response`

    **타입:** `ResponseInit & { readonly headers: Headers }`

    -`Astro.response`는 표준 `ResponseInit` 객체입니다. 다음과 같은 구조를 가지고 있습니다. +`response`는 표준 `ResponseInit` 객체입니다. 다음과 같은 구조를 가집니다. - - `status`: 응답의 숫자 상태 코드입니다(예: `200`). - - `statusText`: 상태 코드와 관련된 상태 메시지입니다 (예: `'OK'`). - - `headers`: 응답의 HTTP 헤더를 설정하는 데 사용할 수 있는 [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) 인스턴스입니다. + - `status`: 응답의 숫자 상태 코드(예: `200`). + - `statusText`: 상태 코드와 연관된 상태 메시지(예: `'OK'`). + - `headers`: 응답의 HTTP 헤더를 설정하는 데 사용할 수 있는 [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) 인스턴스. -`Astro.response`는 페이지 응답에 대한 `status`, `statusText`, `headers`를 설정하는 데 사용됩니다. +`Astro.response`는 페이지의 응답의 `status`, `statusText`, `headers`를 설정하는 데 사용됩니다. -```astro +```astro "Astro.response" --- -if(condition) { +if (condition) { Astro.response.status = 404; Astro.response.statusText = 'Not found'; } --- ``` -또는 헤더를 설정하려면: +헤더를 설정할 수도 있습니다: -```astro +```astro "Astro.response" --- Astro.response.headers.set('Set-Cookie', 'a=b; Path=/;'); --- ``` -### `Astro.cookies` +### `redirect()` + +

    + +**타입:** `(path: string, status?: number) => Response` + +

    + +`redirect()`는 다른 페이지로 리디렉션할 수 있는 [Response](https://developer.mozilla.org/ko/docs/Web/API/Response) 객체를 반환하며, 선택적으로 [HTTP 응답 상태 코드](https://developer.mozilla.org/ko/docs/Web/HTTP/Status#%EB%A6%AC%EB%8B%A4%EC%9D%B4%EB%A0%89%EC%85%98_%EB%A9%94%EC%8B%9C%EC%A7%80)를 두 번째 파라미터로 제공합니다. + +리디렉션이 발생하려면 하위 컴포넌트가 아닌 페이지가 `Astro.redirect()`의 결과를 `반환`해야 합니다. + +정적으로 생성된 경로에서는 [`` 태그](https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta#http-equiv)를 사용하여 클라이언트 리디렉션을 생성하며 상태 코드는 지원하지 않습니다. + +요청 시 렌더링되는 경로에서는 리디렉션 시 사용자 지정 상태 코드를 설정하는 것이 지원됩니다. 지정하지 않으면 리디렉션은 `302` 상태 코드와 함께 제공됩니다. + +다음 예시는 사용자를 로그인 페이지로 리디렉션합니다: + + + + ```astro title="src/pages/account.astro" {8} "Astro.redirect" + --- + import { isLoggedIn } from '../utils'; + + const cookie = Astro.request.headers.get('cookie'); + + // 사용자가 로그인하지 않았다면 로그인 페이지로 리디렉션합니다. + if (!isLoggedIn(cookie)) { + return Astro.redirect('/login'); + } + --- + +

    User information

    + ``` +     + + ```ts "redirect" + import type { APIContext } from 'astro'; + + export function GET({ redirect, request }: APIContext) { + const cookie = request.headers.get('cookie'); + if (!isLoggedIn(cookie)) { + return redirect('/login', 302); + } else { + // 사용자의 정보를 반환합니다. + } + } + ``` + +     + +### `rewrite()` + +

    + +**타입:** `(rewritePayload: string | URL | Request) => Promise`
    + +

    + +`rewrite()`를 사용하면 브라우저를 새 페이지로 리디렉션하지 않고 다른 URL 또는 경로의 콘텐츠를 제공할 수 있습니다. + +이 메서드는 경로 위치에 대한 문자열, `URL` 또는 `Request`를 받습니다. + +명시적 경로를 제공하려면 문자열을 사용합니다: + + + + ```astro title="src/pages/index.astro" "Astro.rewrite" + --- + return Astro.rewrite("/login") + --- + ``` + + + ```ts "rewrite" + import type { APIContext } from 'astro'; + + export function GET({ rewrite }: APIContext) { + return rewrite('/login'); + } + ``` + + + +리라이트를 위한 URL 경로를 구성해야 한다면 `URL` 타입을 사용합니다. 다음 예시는 상대 `"../"` 경로에서 새 URL을 생성하여 페이지의 상위 경로를 렌더링합니다: + + + + ```astro title="src/pages/blog/index.astro" + --- + return Astro.rewrite(new URL("../", Astro.url)) + --- + ``` + + + ```ts + import type { APIContext } from 'astro'; + + export function GET({ rewrite }: APIContext) { + return rewrite(new URL("../", Astro.url)); + } + ``` + + + +새 경로에 대해 서버로 전송되는 `Request`를 완벽하게 제어하려면 `Request` 타입을 사용합니다. 다음 예시는 상위 페이지를 렌더링하는 요청에 헤더를 포함하여 전송합니다: + + + + ```astro title="src/pages/blog/index.astro" + --- + return Astro.rewrite(new Request(new URL("../", Astro.url), { + headers: { + "x-custom-header": JSON.stringify(Astro.locals.someValue) + } + })) + --- + ``` + + + ```ts + import type { APIContext } from 'astro'; + + export function GET({ rewrite }: APIContext) { + return rewrite(new Request(new URL("../", Astro.url), { + headers: { + "x-custom-header": JSON.stringify(Astro.locals.someValue) + } + })); + } + ``` + + + +### `locals` + +

    + + +

    + +`locals`는 요청의 수명 주기 동안 임의의 정보를 저장하고 액세스하는 데 사용되는 객체입니다. `Astro.locals`는 미들웨어가 설정한 `context.locals` 객체의 모든 값을 포함하는 객체입니다. 이를 사용하여 `.astro` 파일에서 미들웨어가 반환한 데이터에 액세스할 수 있습니다. + +미들웨어 함수는 `context.locals`의 값을 읽고 쓸 수 있습니다: + +```ts title="src/middleware.ts" "locals" +import type { MiddlewareHandler } from 'astro'; + +export const onRequest: MiddlewareHandler = ({ locals }, next) => { + if (!locals.title) { + locals.title = "Default Title"; + } + return next(); +} +``` + +Astro 컴포넌트와 API 엔드포인트는 렌더링할 때 `locals`에서 값을 읽을 수 있습니다: + + + + ```astro title="src/pages/Orders.astro" "Astro.locals" + --- + const title = Astro.locals.title; + --- +

    {title}

    + ``` +     + + ```ts title="src/pages/hello.ts" "locals" + import type { APIContext } from 'astro'; + + export function GET({ locals }: APIContext) { + return new Response(locals.title); // "Default Title" + } + ``` + +     + +### `preferredLocale` + +

    + +**타입:** `string | undefined`
    + +

    + +`preferredLocale`은 방문자의 브라우저 언어 기본 설정과 사이트에서 지원하는 로케일 간에 가장 잘 일치하는 것을 찾기 위해 계산된 값입니다. + +이 값은 [`i18n.locales`](/ko/reference/configuration-reference/#i18nlocales) 배열에 구성된 로케일과 `Accept-Language` 헤더를 통해 사용자의 브라우저에서 지원하는 로케일을 확인하여 계산됩니다. 일치하는 항목이 없으면 이 값은 `undefined`입니다. + +이 속성은 요청 시 렌더링되는 경로에서만 사용할 수 있으며 미리 렌더링된 정적 페이지에는 사용할 수 없습니다. + +### `preferredLocaleList` + +

    + +**타입:** `string[] | undefined`
    + +

    + +`preferredLocaleList`는 브라우저에서 요청하고 웹사이트에서 지원하는 모든 로케일의 배열을 나타냅니다. 이렇게 하면 사이트와 방문자 간에 호환되는 모든 언어의 목록이 생성됩니다. + +브라우저에서 요청한 언어가 로케일 배열에 없으면 값은 `[]`가 됩니다. 이는 방문자가 선호하는 로케일을 지원하지 않을 때 발생합니다. + +브라우저에 기본 설정 언어가 지정되지 않은 경우 이 값은 [`i18n.locales`](/ko/reference/configuration-reference/#i18nlocales)가 되며, 기본 설정이 없는 방문자에게는 지원되는 모든 로케일이 동일하게 기본 설정된 것으로 간주됩니다. + +이 속성은 요청 시 렌더링되는 경로에서만 사용할 수 있으며 미리 렌더링된 정적 페이지에는 사용할 수 없습니다. + +### `currentLocale` + +

    + +**타입:** `string | undefined`
    + +

    + +`locales` 구성에 지정된 구문을 사용하여 현재 URL에서 계산된 로케일입니다. URL에 `/[locale]/` 접두사가 포함되지 않았다면 기본값은 [`i18n.defaultLocale`](/ko/reference/configuration-reference/#i18ndefaultlocale)이 됩니다. + +### `getActionResult()` + +

    +**타입:** `(action: TAction) => ActionReturnType | undefined`
    + +

    + +`getActionResult()`는 [액션](/ko/guides/actions/) 제출의 결과를 반환하는 함수입니다. 이 함수는 액션 함수(예: `actions.logout`)를 인수로 받아 제출이 수신되면 `data` 또는 `error` 객체를 반환합니다. 그렇지 않으면 `undefined`을 반환합니다. + +```astro title="src/pages/index.astro" "Astro.getActionResult" +--- +import { actions } from 'astro:actions'; + +const result = Astro.getActionResult(actions.logout); +--- + +
    + +
    +{result?.error &&

    Failed to log out. Please try again.

    } +``` + +### `callAction()` + +

    + +

    + +`callAction()`은 Astro 컴포넌트에서 액션 핸들러를 직접 호출하는 데 사용되는 함수입니다. 이 함수는 액션 함수를 첫 번째 인수로 받고(예: `actions.logout`), 액션이 수신하는 모든 입력을 두 번째 인수로 받습니다. 이 함수는 액션의 결과를 프로미스로 반환합니다. + +```astro title="src/pages/index.astro" "Astro.callAction" +--- +import { actions } from 'astro:actions'; + +const { data, error } = await Astro.callAction(actions.logout, { userId: '123' }); +--- +``` + +### `routePattern` + +

    + +**타입**: `string`
    + +

    + +현재 페이지 또는 경로를 생성하는 경로 패턴입니다. 파일 기반 라우팅에서는 경로를 생성하는 데 사용되는 프로젝트의 파일 경로와 유사합니다. 통합이 프로젝트의 경로를 생성하는 경우 `context.routePattern`은 `injectRoute.pattern`의 값과 동일합니다. + +이 값은 선행 슬래시로 시작하며 파일 확장자가 없는 `src/pages/` 폴더를 기준으로 한 페이지 컴포넌트의 경로와 유사하게 표시됩니다. + +예를 들어, `src/pages/en/blog/[slug].astro` 파일은 `routePattern`에 대해 `/en/blog/[slug]`를 반환합니다. 해당 파일에 의해 생성된 사이트의 모든 페이지(예: `/en/blog/post-1/`, `/en/blog/post-2/` 등)는 `routePattern`에 대해 동일한 값을 공유합니다. `index.*` 경로의 경우, 경로 패턴에 "index."라는 단어가 포함되지 않습니다. 예를 들어 `src/pages/index.astro`는 `/`를 반환합니다. + +이 속성을 사용하여 컴포넌트를 렌더링하는 경로를 파악할 수 있습니다. 이를 통해 유사하게 생성된 페이지 URL을 함께 타겟팅하거나 분석할 수 있습니다. 예를 들어 특정 정보를 조건부로 렌더링하거나 어떤 경로가 느린지에 대한 메트릭을 수집하는 데 사용할 수 있습니다. + +### `cookies`

    @@ -242,67 +629,69 @@ Astro.response.headers.set('Set-Cookie', 'a=b; Path=/;');

    -`Astro.cookies`에는 [서버 측 렌더링](/ko/guides/on-demand-rendering/) 모드에서 쿠키를 읽고 조작하기 위한 유틸리티가 포함되어 있습니다. +`cookies`에는 [요청 시 렌더링되는 경로](/ko/guides/on-demand-rendering/)에 대한 쿠키를 읽고 조작하기 위한 유틸리티가 포함되어 있습니다. + +#### 쿠키 유틸리티 -##### `get` +##### `cookies.get()`

    -**타입:** (key: string, options?: AstroCookieGetOptions) => AstroCookie | undefined +**타입:** (key: string, options?: AstroCookieGetOptions) => AstroCookie | undefined

    -쿠키를 문자열이 아닌 타입으로 변환하기 위한 `value` 및 유틸리티 함수가 포함된 [`AstroCookie`](#astrocookie) 객체로 쿠키를 가져옵니다. +쿠키를 [`AstroCookie`](#astrocookie-타입) 객체로 가져옵니다. 이 객체에는 `value`와 쿠키를 문자열이 아닌 타입으로 변환하기 위한 유틸리티 함수가 포함되어 있습니다. -##### `has` +##### `cookies.has()`

    **타입:** (key: string, options?: AstroCookieGetOptions) => boolean

    -이 쿠키가 존재하는지 여부입니다. 쿠키가 `Astro.cookies.set()`을 통해 설정된 경우 true를 반환하고, 그렇지 않으면 `Astro.request`에서 쿠키를 확인합니다. +이 쿠키가 존재하는지 여부. 쿠키가 `Astro.cookies.set()`을 통해 설정된 경우 true를 반환하고, 그렇지 않으면 `Astro.request`에서 쿠키를 확인합니다. -##### `set` +##### `cookies.set()`

    **타입:** (key: string, value: string | object, options?: AstroCookieSetOptions) => void

    -쿠키의 `key`를 주어진 값으로 설정합니다. 그러면 쿠키 값을 문자열로 변환하려고 시도합니다. 옵션은 `maxAge` 또는 `httpOnly`와 같은 [쿠키 기능](https://www.npmjs.com/package/cookie#options-1)을 설정하는 방법을 제공합니다. +쿠키의 `key`를 지정된 값으로 설정합니다. 쿠키 값을 문자열로 변환하려고 시도합니다. 옵션은 `maxAge` 또는 `httpOnly`와 같은 [쿠키 기능](https://www.npmjs.com/package/cookie#options-1)을 설정하는 방법을 제공합니다. -##### `delete` +##### `cookies.delete()`

    **타입:** `(key: string, options?: AstroCookieDeleteOptions) => void`

    -만료 날짜를 과거 (Unix 시간에서는 0)로 설정하여 쿠키를 무효화합니다. +만료일을 과거(유닉스 시간 기준 0)로 설정하여 쿠키를 무효화합니다. -쿠키가 "제거되면" (만료되면) `Astro.cookies.has()`는 `false`를 반환하고 `Astro.cookies.get()`은 `value`가 `undefined`인 [`AstroCookie`](#astrocookie)를 반환합니다. 쿠키를 삭제할 때 사용할 수 있는 옵션은 `domain`, `path`, `httpOnly`, `sameSite` 및 `secure`입니다. +쿠키가 "삭제"(만료)되면 `Astro.cookies.has()`는 `false`를 반환하고 `Astro.cookies.get()`은 `value`가 `undefined`인 [`AstroCookie`](#astrocookie-타입)를 반환합니다. 쿠키를 삭제할 때 사용할 수 있는 옵션은 다음과 같습니다: `domain`, `path`, `httpOnly`, `sameSite`, `secure`. -##### `merge` +##### `cookies.merge()`

    **타입:** `(cookies: AstroCookies) => void`

    -새 `AstroCookies` 인스턴스를 현재 인스턴스에 병합합니다. 새 쿠키가 현재 인스턴스에 추가되고 같은 이름의 쿠키가 존재하면 기존 값을 덮어씁니다. +새 `AstroCookies` 인스턴스를 현재 인스턴스에 병합합니다. 새 쿠키가 현재 인스턴스에 추가되고 같은 이름의 쿠키가 있으면 기존 값을 덮어씁니다. -##### `headers` +##### `cookies.headers()`

    **타입:** `() => Iterator`

    -응답과 함께 전송될 `Set-Cookie`에 대한 헤더 값을 가져옵니다. +응답과 함께 전송될 `Set-Cookie`의 헤더 값을 가져옵니다. -#### `AstroCookie` +#### `AstroCookie` 타입 -`Astro.cookies.get()`을 통해 쿠키를 가져오면 `AstroCookie` 타입이 반환됩니다. 다음과 같은 구조를 가지고 있습니다. +`Astro.cookies.get()`을 통해 쿠키를 가져올 때 반환되는 타입입니다. 다음과 같은 속성을 가집니다: ##### `value` @@ -320,7 +709,7 @@ Astro.response.headers.set('Set-Cookie', 'a=b; Path=/;'); **타입:** `() => Record`

    -`JSON.parse()`를 통해 쿠키 값을 구문 분석하여 객체를 반환합니다. 쿠키 값이 유효한 JSON이 아닌 경우 예외가 발생합니다. +`JSON.parse()`를 통해 쿠키 값을 구문 분석하여 객체를 반환합니다. 쿠키 값이 유효한 JSON이 아닐 경우 오류가 발생합니다. ##### `number` @@ -338,13 +727,13 @@ Astro.response.headers.set('Set-Cookie', 'a=b; Path=/;'); **타입:** `() => boolean`

    -쿠키 값을 true 또는 false로 변환합니다. +쿠키 값을 부울로 변환합니다. #### `AstroCookieGetOptions`

    -쿠키를 얻으면 `AstroCookieGetOptions` 인터페이스를 통해 옵션을 지정할 수도 있습니다. +`AstroCookieGetOption` 인터페이스를 사용하면 쿠키를 받을 때 옵션을 지정할 수 있습니다. ##### `decode` @@ -352,13 +741,13 @@ Astro.response.headers.set('Set-Cookie', 'a=b; Path=/;'); **타입:** `(value: string) => string`

    -쿠키가 값으로 역직렬화되는 방식을 사용자 정의할 수 있습니다. +쿠키가 값으로 역직렬화되는 방식을 사용자 지정할 수 있습니다. #### `AstroCookieSetOptions`

    -`Astro.cookies.set()`을 통해 쿠키를 설정하면 `AstroCookieSetOptions`를 전달하여 쿠키 직렬화 방법을 맞춤설정할 수 있습니다. +`AstroCookieSetOptions`는 쿠키를 설정할 때 `Astro.cookies.set()`에 전달하여 쿠키 직렬화 방식을 사용자 지정할 수 있는 객체입니다. ##### `domain` @@ -367,7 +756,7 @@ Astro.response.headers.set('Set-Cookie', 'a=b; Path=/;'); **타입:** `string`

    -도메인을 지정합니다. 도메인이 설정되지 않은 경우 대부분의 클라이언트는 현재 도메인에 적용되도록 해석합니다. +도메인을 지정합니다. 도메인을 설정하지 않으면 대부분의 클라이언트는 현재 도메인에 적용되는 것으로 해석합니다. ##### `expires` @@ -385,7 +774,7 @@ Astro.response.headers.set('Set-Cookie', 'a=b; Path=/;'); **타입:** `boolean`

    -true인 경우 클라이언트 측에서 쿠키에 액세스할 수 없습니다. +true이면 클라이언트 측에서 쿠키에 액세스할 수 없습니다. ##### `maxAge` @@ -394,7 +783,7 @@ true인 경우 클라이언트 측에서 쿠키에 액세스할 수 없습니다 **타입:** `number`

    -쿠키가 유효한 시간 (초)을 지정합니다. +쿠키가 유효한 기간(초)을 숫자로 지정합니다. ##### `path` @@ -430,952 +819,119 @@ true인 경우 쿠키는 https 사이트에만 설정됩니다. **타입:** `(value: string) => string`

    -쿠키가 직렬화되는 방식을 사용자 정의할 수 있습니다. +쿠키가 직렬화되는 방식을 사용자 지정할 수 있습니다. -### `Astro.redirect()` -

    +### 더 이상 사용되지 않는 객체 속성 -**타입:** `(path: string, status?: number) => Response` -

    - -다른 페이지로 리디렉션할 수 있으며, 선택적으로 [HTTP 응답 상태 코드](https://developer.mozilla.org/ko/docs/Web/HTTP/Status#%EB%A6%AC%EB%8B%A4%EC%9D%B4%EB%A0%89%EC%85%98_%EB%A9%94%EC%8B%9C%EC%A7%80)를 두 번째 매개변수로 제공할 수 있습니다. - -페이지 (하위 컴포넌트는 아님)에 리디렉션이 발생하려면 `Astro.redirect()` 결과를 `return`해야 합니다. - -정적으로 생성된 사이트의 경우 [`` 태그](https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta#http-equiv)를 사용하여 클라이언트 리디렉션을 생성하며 상태 코드를 지원하지 않습니다. - -주문형 렌더링 모드를 사용할 경우 상태 코드가 지원됩니다. Astro는 다른 코드를 지정하지 않는 한 리디렉션된 요청을 기본 HTTP 응답 상태인 `302`로 처리합니다. - -다음 예시는 사용자를 로그인 페이지로 리디렉션합니다: - -```astro title="src/pages/account.astro" {8} ---- -import { isLoggedIn } from '../utils'; - -const cookie = Astro.request.headers.get('cookie'); - -// 사용자가 로그인되어 있지 않은 경우 로그인 페이지로 리디렉션 -if (!isLoggedIn(cookie)) { - return Astro.redirect('/login'); -} ---- -``` - -### `Astro.rewrite()` - -

    - -**타입:** `(rewritePayload: string | URL | Request) => Promise`
    - -

    - -브라우저를 새 페이지로 리디렉션하지 않고 다른 URL이나 경로에서 콘텐츠를 제공할 수 있습니다. - -이 메서드는 경로 위치에 대한 문자열, `URL` 또는 `Request` 중 하나를 허용합니다. - -문자열을 사용하여 명시적인 경로를 제공합니다: - -```astro title="src/pages/index.astro" ---- -return Astro.rewrite("/login") ---- -``` - -리라이트를 위한 URL 경로를 구성해야 하는 경우 `URL` 타입을 사용합니다. 다음 예시는 상대 `"../"` 경로에서 새 URL을 생성하여 페이지의 상위 경로를 렌더링합니다: - -```astro title="src/pages/blog/index.astro" ---- -return Astro.rewrite(new URL("../", Astro.url)) ---- -``` - -새 경로에 대해 서버로 전송되는 `Request`를 완벽하게 제어하려면 `Request` 타입을 사용합니다. 다음 예시는 헤더를 제공하면서 상위 페이지를 렌더링하도록 요청을 전송합니다: - -```astro title="src/pages/blog/index.astro" ---- -return Astro.rewrite(new Request(new URL("../", Astro.url), { - headers: { - "x-custom-header": JSON.stringify(Astro.locals.someValue) - } -})) ---- -``` - -### `Astro.url` - -

    - -**타입:** `URL`
    - -

    - -현재 `Astro.request.url` URL 문자열 값에서 생성된 [URL](https://developer.mozilla.org/ko/docs/Web/API/URL) 객체입니다. pathname 및 origin과 같은 요청 URL의 개별 속성과 상호 작용하는 데 유용합니다. - -`new URL(Astro.request.url)`을 수행하는 것과 동일합니다. - -정적 사이트 및 `server` 또는 `hybrid` 출력을 사용하는 주문형 렌더링 사이트에서 [site](/ko/reference/configuration-reference/#site)가 구성되지 않은 경우 개발 모드에서 `Astro.url`은 `localhost`가 됩니다. +#### `Astro.glob()` -```astro -

    The current URL is: {Astro.url}

    -

    The current URL pathname is: {Astro.url.pathname}

    -

    The current URL origin is: {Astro.url.origin}

    -``` - -`Astro.url`을 [`new URL()`](https://developer.mozilla.org/ko/docs/Web/API/URL/URL)에 인수로 전달하여 새 URL을 생성하는 데 사용할 수도 있습니다. - -```astro title="src/pages/index.astro" ---- -// 예: 프로덕션 도메인을 사용하여 canonical URL 구성 -const canonicalURL = new URL(Astro.url.pathname, Astro.site); -// Example: 현재 도메인을 사용하여 SEO 메타 태그용 URL을 구성 -const socialImageURL = new URL('/images/preview.png', Astro.url); ---- - - -``` +:::caution[v5.0에서 더 이상 사용되지 않음] +[Vite의 `import.meta.glob`](https://ko.vite.dev/guide/features.html#glob-import)을 사용하여 프로젝트 파일을 쿼리합니다. -### `Astro.clientAddress` +`Astro.glob('../pages/post/*.md')`를 다음과 같이 변환할 수 있습니다. -

    +`Object.values(import.meta.glob('../pages/post/*.md', { eager: true }));` -**타입:** `string`
    - -

    +더 많은 정보와 사용법은 [가져오기 가이드](/ko/guides/imports/#importmetaglob)를 참조하세요. +::: -요청의 [IP 주소](https://en.wikipedia.org/wiki/IP_address)를 지정합니다. 이 속성은 SSR (서버 측 렌더링)용으로 빌드할 때만 사용할 수 있으며 정적 사이트에는 사용하면 안 됩니다. +`Astro.glob()`은 정적 사이트 설정에 많은 로컬 파일을 로드하는 방법입니다. ```astro --- -const ip = Astro.clientAddress; +// src/components/my-component.astro +const posts = await Astro.glob('../pages/post/*.md'); // ./src/pages/post/*.md에 위치한 게시물의 배열을 반환합니다. --- -
    Your IP address is: { ip }
    -``` - -### `Astro.site` - -

    - -**타입:** `URL | undefined` -

    - -`Astro.site`는 Astro 구성의 `site`에서 만들어진 `URL`을 반환합니다. Astro 구성의 `site`가 정의되지 않은 경우 `Astro.site`가 정의되지 않습니다. - -### `Astro.generator` - -

    - -**타입:** `string`
    - -

    - -`Astro.generator`는 [``](https://html.spec.whatwg.org/multipage/semantics.html#meta-generator) 태그에 현재 버전의 Astro를 추가하는 편리한 방법입니다. `"Astro v1.x.x"` 형식을 따릅니다. - -```astro mark="Astro.generator" - - - - - - - - -``` - -### `Astro.slots` - -`Astro.slots`에는 Astro 컴포넌트의 슬롯 하위 항목을 수정하기 위한 유틸리티 함수가 포함되어 있습니다. - -#### `Astro.slots.has()` - -

    - -**타입:** `(slotName: string) => boolean` -

    - -`Astro.slots.has()`를 사용하면 특정 슬롯 이름에 대한 콘텐츠가 존재하는지 확인할 수 있습니다. 이는 슬롯 콘텐츠를 래핑하고 싶지만 슬롯이 사용될 때만 래퍼 요소를 렌더링하려는 경우에 유용할 수 있습니다. - -```astro title="src/pages/index.astro" ---- ---- - - -{Astro.slots.has('more') && ( - -)} +
    +{posts.slice(0, 3).map((post) => ( +
    +

    {post.frontmatter.title}

    +

    {post.frontmatter.description}

    + Read more +
    +))} +
    ``` -#### `Astro.slots.render()` - -

    - -**타입:** `(slotName: string, args?: any[]) => Promise` -

    - -`Astro.slots.render()`를 사용하여 슬롯의 내용을 HTML 문자열로 비동기적으로 렌더링할 수 있습니다. +`.glob()`은 하나의 매개변수만 받습니다: 가져오려는 로컬 파일의 상대 URL. 이 함수는 비동기식이며 일치하는 파일에서 내보낸 값들로 이루어진 배열을 반환합니다. -```astro ---- -const html = await Astro.slots.render('default'); ---- - -``` +`.glob()`은 통계적으로 분석할 수 없으므로 변수나 보간하는 문자열을 받을 수 없습니다. (해결 방법은 [가져오기 가이드](/ko/guides/imports/#지원되는-값)를 참조하세요.) 이는 `Astro.glob()`이 Vite의 [`import.meta.glob()`](https://ko.vite.dev/guide/features.html#glob-import)의 래퍼이기 때문입니다. :::note -이는 고급 사용 사례를 위한 것입니다! 대부분의 경우 [`` 요소](/ko/basics/astro-components/#슬롯)를 사용하여 슬롯 콘텐츠를 렌더링하는 것이 더 간단합니다. +다음과 같은 경우 Astro 프로젝트에서 `import.meta.glob()`를 사용할 수도 있습니다: +- API 라우트와 같이 `.astro`가 아닌 파일인 경우. `Astro.glob()`은 `.astro` 파일에서만 사용할 수 있지만 `import.meta.glob()`은 프로젝트의 어느 곳에서나 사용할 수 있습니다. +- 각 파일을 즉시 로드하고 싶지 않은 경우. `import.meta.glob()`은 콘텐츠 자체를 반환하는 대신 파일 콘텐츠를 가져오는 함수를 반환할 수 있습니다. 여기에는 가져온 파일에 대한 모든 스타일과 스크립트가 포함됩니다. 파일이 실제로 사용되는지 여부는 런타임이 아닌 정적 분석에 의해 결정되므로 이러한 파일은 번들로 묶여 페이지에 추가됩니다. +- 각 파일의 경로에 액세스하려는 경우. `import.meta.glob()`은 파일 경로의 콘텐츠 맵을 반환하고 `Astro.glob()`은 콘텐츠 목록을 반환합니다. +- 여러 패턴을 전달하려는 경우(예를 들어, 특정 파일을 필터링하기 위한 "네거티브 패턴" 등을 추가하려는 경우). `import.meta.glob()`는 선택적으로 단일 문자열이 아닌 문자열 배열을 받을 수 있습니다. + +[Vite 문서](https://ko.vite.dev/guide/features.html#glob-import)에서 더 자세히 알아보세요. ::: -`Astro.slots.render()`는 선택적으로 두 번째 인수, 즉 모든 함수 하위 항목에 전달될 매개변수 배열을 허용합니다. 이는 사용자 정의 유틸리티 컴포넌트에 유용할 수 있습니다. +##### Markdown 파일 -예를 들어, 이 `` 컴포넌트는 `message` prop을 대문자로 변환하고 이를 기본 슬롯에 전달합니다. +`Astro.glob()`으로 가져온 Markdown 파일은 다음과 같은 `MarkdownInstance` 인터페이스를 반환합니다: -```astro title="src/components/Shout.astro" "await Astro.slots.render('default', [message])" ---- -const message = Astro.props.message.toUpperCase(); -let html = ''; -if (Astro.slots.has('default')) { - html = await Astro.slots.render('default', [message]); +```ts +export interface MarkdownInstance> { + /* 이 파일의 YAML 프런트매터에 지정된 모든 데이터 */ + frontmatter: T; + /* 이 파일의 절대 경로 */ + file: string; + /* 이 파일의 렌더링 경로 */ + url: string | undefined; + /* 이 파일의 콘텐츠를 렌더링하는 Astro 컴포넌트 */ + Content: AstroComponentFactory; + /** (Markdown 전용) 원시 Markdown 파일 콘텐츠, 레이아웃 HTML 및 YAML 프런트매터 제외 */ + rawContent(): string; + /** (Markdown 전용) HTML로 컴파일된 Markdown 파일, 레이아웃 HTML 제외 */ + compiledContent(): string; + /* 이 파일의 h1...h6 요소의 배열을 반환하는 함수 */ + getHeadings(): Promise<{ depth: number; slug: string; text: string }[]>; + default: AstroComponentFactory; } ---- - -``` - -``의 하위 항목으로 전달된 콜백 함수는 모두 대문자인 `message` 매개변수를 받습니다: - -```astro title="src/pages/index.astro" ---- -import Shout from "../components/Shout.astro"; ---- - - {(message) =>
    {message}
    } -     - - -``` - -콜백 함수는 `slot` 속성이 있는 래핑 HTML 요소 태그 내부의 명명된 슬롯으로 전달할 수 있습니다. 이 요소는 콜백을 명명된 슬롯으로 전송하는 데만 사용되며 페이지에 렌더링되지 않습니다. - -```astro - - - {(message) =>
    {message}
    } -     -     -``` - -래핑 태그에는 표준 HTML 요소를 사용하거나 컴포넌트로 해석되지 않는 소문자 태그 (예: `` 대신 ``)를 사용하세요. HTML `` 요소는 Astro 슬롯으로 해석되므로 사용하지 마세요. - -### `Astro.self` - -`Astro.self`를 사용하면 Astro 컴포넌트를 재귀적으로 호출할 수 있습니다. 이 동작을 사용하면 컴포넌트 템플릿의 ``를 사용하여 Astro 컴포넌트 자체에서 Astro 컴포넌트를 렌더링할 수 있습니다. 이는 대규모 데이터 저장소와 중첩된 데이터 구조를 반복하는 데 도움이 될 수 있습니다. - -```astro ---- -// NestedList.astro -const { items } = Astro.props; ---- -
      - {items.map((item) => ( -
    • - - - {Array.isArray(item) ? ( - - ) : ( - item - )} -
      • - ))} -
    ``` -그러면 이 컴포넌트는 다음과 같이 사용될 수 있습니다. +선택적으로 TypeScript 제네릭을 사용하여 `frontmatter` 변수에 타입을 제공할 수 있습니다. ```astro --- -import NestedList from './NestedList.astro'; +interface Frontmatter { + title: string; + description?: string; +} +const posts = await Astro.glob('../pages/post/*.md'); --- - -``` - -그리고 HTML을 다음과 같이 렌더링합니다. - -```html -
      -
    • A
      • -
    • -
        -
      • B
        • -
      • C
        • -
      -
      • -
    • D
      • -
    -``` - -### `Astro.locals` -

    - - -

    - -`Astro.locals`는 미들웨어의 [`context.locals`](#contextlocals) 객체의 값을 포함하는 객체입니다. 이를 사용하여 `.astro` 파일의 미들웨어가 반환한 데이터에 액세스합니다. - -```astro title="src/pages/Orders.astro" ---- -const title = Astro.locals.welcomeTitle(); -const orders = Array.from(Astro.locals.orders.entries()); ---- -

    {title}

      - {orders.map(order => { - return
    • {/* 각 order마다 작업 수행 */}
      • - })} + {posts.map(post =>
    • {post.frontmatter.title}
      • )}
    ``` -### `Astro.preferredLocale` - -

    - -**타입:** `string | undefined`
    - -

    - -`Astro.preferredLocale`은 사용자가 선호하는 언어를 나타내는 계산된 값입니다. - -`i18n.locales` 배열에 구성된 언어와 `Accept-Language` 헤더를 통해 사용자 브라우저에서 지원하는 언어를 확인하여 계산됩니다. 일치하는 항목이 없으면 이 값은 `undefined`입니다. - -이 속성은 SSR (서버 측 렌더링)용으로 빌드할 때만 사용할 수 있으며 정적 사이트에는 사용하면 안 됩니다. - -### `Astro.preferredLocaleList` - -

    - -**타입:** `string[] | undefined`
    - -

    - -`Astro.preferredLocaleList`는 브라우저에서 요청하고 웹사이트에서 지원하는 모든 언어의 배열을 나타냅니다. 그러면 여러분의 사이트와 방문자 간에 호환되는 모든 언어 목록이 생성됩니다. - -브라우저에서 요청한 언어가 언어 배열에 없으면 값은 `[]`입니다. 즉, 방문자가 선호하는 언어을 지원하지 않습니다. - -브라우저가 선호하는 언어를 지정하지 않으면 이 값은 [`i18n.locales`](/ko/reference/configuration-reference/#i18nlocales)가 됩니다. 지원되는 모든 언어는 선호 사항이 없는 방문자가 동일하게 선호하는 것으로 간주됩니다. - -이 속성은 SSR(서버 측 렌더링)용으로 빌드할 때만 사용할 수 있으며 정적 사이트에는 사용하면 안 됩니다. - -### `Astro.currentLocale` - -

    - -**타입:** `string | undefined`
    - -

    - -`locales` 구성에 지정된 구문을 사용하여 현재 URL에서 계산된 언어입니다. URL에 `/[locale]/` 접두사가 포함되어 있지 않으면 값은 기본적으로 `i18n.defaultLocale`이 됩니다. - -### `Astro.getActionResult()` - -

    -**타입:** `(action: TAction) => ActionReturnType | undefined`
    - -

    - -`Astro.getActionResult()`는 [액션](/ko/guides/actions/) 제출의 결과를 반환하는 함수입니다. 이 함수는 액션 함수를 인수로 받아 (예: `actions.logout`) 제출이 수신되면 `data` 또는 `error` 객체를 반환합니다. 그렇지 않으면 `undefined`를 반환합니다. - -```astro title="src/pages/index.astro" ---- -import { actions } from 'astro:actions'; - -const result = Astro.getActionResult(actions.logout); ---- - -
    - -
    -{result?.error &&

    Failed to log out. Please try again.

    } -``` - -### `Astro.callAction()` - -

    - -

    - -`Astro.callAction()`은 Astro 컴포넌트에서 액션 핸들러를 직접 호출하는 데 사용되는 함수입니다. 이 함수는 액션 함수를 첫 번째 인수 (예: `actions.logout`)로 받고 액션이 수신하는 모든 입력을 두 번째 인수로 받습니다. 이 함수는 액션의 결과를 프로미스로 반환합니다. - -```astro title="src/pages/index.astro" ---- -import { actions } from 'astro:actions'; - -const { data, error } = await Astro.callAction(actions.logout, { userId: '123' }); ---- -``` - -## 엔드포인트 Context +##### Astro 파일 -[엔드포인트 함수](/ko/guides/endpoints/)는 첫 번째 매개변수로 context 객체를 받습니다. 이는 `Astro` global 속성의 많은 부분을 반영합니다. - -```ts title="endpoint.json.ts" -import type { APIContext } from 'astro'; +Astro 파일에는 다음과 같은 인터페이스가 있습니다: -export function GET(context: APIContext) { - // ... +```ts +export interface AstroInstance { + /* 이 파일의 파일 경로 */ + file: string; + /* 이 파일의 URL(pages 디렉터리에 있는 경우) */ + url: string | undefined; + default: AstroComponentFactory; } ``` -### `context.params` - -`context.params`는 이 요청과 일치하는 동적 경로 세그먼트의 값을 포함하는 객체입니다. - -정적 빌드에서 이 객체는 [동적 경로](/ko/guides/routing/#동적-경로) 사전 렌더링에 사용되는 `getStaticPaths()`에서 반환하는 `params`입니다. +##### 기타 파일 -SSR 빌드에서는 동적 경로 패턴의 경로 세그먼트와 일치하는 모든 값이 될 수 있습니다. +기타 파일에는 다양한 인터페이스가 있을 수 있지만 `Astro.glob()`은 인식할 수 없는 파일 형식이 정확히 무엇인지 알고 있는 경우 TypeScript 제네릭을 허용합니다. -```ts title="src/pages/posts/[id].json.ts" -import type { APIContext } from 'astro'; - -export function getStaticPaths() { - return [ - { params: { id: '1' } }, - { params: { id: '2' } }, - { params: { id: '3' } } - ]; -} - -export function GET({ params }: APIContext) { - return new Response( - JSON.stringify({ id: params.id }), - ); +```ts +--- +interface CustomDataFile { + default: Record; } +const data = await Astro.glob('../data/**/*.js'); +--- ``` - -함께 보기: [`params`](#params) - -### `context.props` - -

    - - -

    - -`context.props`는 `getStaticPaths()`에서 전달된 `props`를 포함하는 객체입니다. SSR (서버 측 렌더링)용으로 빌드할 때는 `getStaticPaths()`가 사용되지 않으므로 `context.props`는 정적 빌드에서만 사용할 수 있습니다. - -```ts title="src/pages/posts/[id].json.ts" -import type { APIContext } from 'astro'; - -export function getStaticPaths() { - return [ - { params: { id: '1' }, props: { author: 'Blu' } }, - { params: { id: '2' }, props: { author: 'Erika' } }, - { params: { id: '3' }, props: { author: 'Matthew' } } - ]; -} - -export function GET({ props }: APIContext) { - return new Response( - JSON.stringify({ author: props.author }), - ); -} -``` - -함께 보기: [`props`를 사용한 데이터 전달](#props를-사용한-데이터-전달) - -### `context.request` - -

    - -**타입:** `Request` -

    - -표준 [Request](https://developer.mozilla.org/ko/docs/Web/API/Request) 객체입니다. `url`, `headers`, `method` 및 요청 본문을 가져오는 데 사용할 수 있습니다. - -```ts -import type { APIContext } from 'astro'; - -export function GET({ request }: APIContext) { - return new Response(`Hello ${request.url}`); -} -``` - -함께 보기: [Astro.request](#astrorequest) - -### `context.cookies` - -

    - -**타입:** `AstroCookies` -

    - -`context.cookies`에는 쿠키를 읽고 조작하는 유틸리티가 포함되어 있습니다. - -함께 보기: [Astro.cookies](#astrocookies) - -### `context.url` - -

    - -**타입:** `URL`
    - -

    - -현재 `context.request.url` URL 문자열 값에서 생성된 [URL](https://developer.mozilla.org/ko/docs/Web/API/URL) 객체. - -함께 보기: [Astro.url](#astrourl) - -### `context.clientAddress` - -

    - -**타입:** `string`
    - -

    - -요청의 [IP 주소](https://en.wikipedia.org/wiki/IP_address)를 지정합니다. 이 속성은 SSR (서버 측 렌더링)용으로 빌드할 때만 사용할 수 있으며 정적 사이트에는 사용하면 안 됩니다. - -```ts -import type { APIContext } from 'astro'; - -export function GET({ clientAddress }: APIContext) { - return new Response(`Your IP address is: ${clientAddress}`); -} -``` - -함께 보기: [Astro.clientAddress](#astroclientaddress) - -### `context.site` - -

    - -**타입:** `URL | undefined`
    - -

    - -`context.site`는 Astro 구성의 `site`에서 만들어진 `URL`을 반환합니다. 정의되지 않은 경우 `localhost`에서 생성된 URL이 반환됩니다. - -함께 보기: [Astro.site](#astrosite) - -### `context.generator` - -

    - -**타입:** `string`
    - -

    - -`context.generator`는 프로젝트가 실행 중인 Astro 버전을 나타내는 편리한 방법입니다. `"Astro v1.x.x"` 형식을 따릅니다. - -```ts title="src/pages/site-info.json.ts" -import type { APIContext } from 'astro'; - -export function GET({ generator, site }: APIContext) { - const body = JSON.stringify({ generator, site }); - return new Response(body); -} -``` - -함께 보기: [Astro.generator](#astrogenerator) - -### `context.redirect()` - -

    - -**타입:** `(path: string, status?: number) => Response`
    - -

    - -`context.redirect()`는 다른 페이지로 리디렉션할 수 있는 [Response](https://developer.mozilla.org/ko/docs/Web/API/Response) 객체를 반환합니다. 이 기능은 SSR (서버 측 렌더링)용으로 빌드할 때만 사용할 수 있으며 정적 사이트에는 사용하면 안 됩니다. - -```ts -import type { APIContext } from 'astro'; - -export function GET({ redirect }: APIContext) { - return redirect('/login', 302); -} -``` - -함께 보기: [`Astro.redirect()`](#astroredirect) - -### `context.rewrite()` - -

    - -**타입:** `(rewritePayload: string | URL | Request) => Promise`
    - -

    - -브라우저를 새 페이지로 리디렉션하지 않고 다른 URL이나 경로에서 콘텐츠를 제공할 수 있습니다. - -이 메서드는 경로 위치에 대한 문자열, `URL`, 또는 `Request` 중 하나를 허용합니다. - -문자열을 사용하여 명시적인 경로를 제공합니다: - -```ts -import type { APIContext } from 'astro'; - -export function GET({ rewrite }: APIContext) { - return rewrite('/login'); -} -``` - -리라이트를 위한 URL 경로를 구성해야 하는 경우 `URL` 타입을 사용합니다. 다음 예시는 상대 `"../"` 경로에서 새 URL을 생성하여 페이지의 상위 경로를 렌더링합니다: - -```ts -import type { APIContext } from 'astro'; - -export function GET({ rewrite }: APIContext) { - return rewrite(new URL("../", Astro.url)); -} -``` - -새 경로에 대해 서버로 전송되는 `Request`를 완벽하게 제어하려면 `Request` 타입을 사용합니다. 다음 예시는 헤더를 제공하면서 상위 페이지를 렌더링하도록 요청을 전송합니다: - -```ts -import type { APIContext } from 'astro'; - -export function GET({ rewrite }: APIContext) { - return rewrite(new Request(new URL("../", Astro.url), { - headers: { - "x-custom-header": JSON.stringify(Astro.locals.someValue) - } - })); -} -``` - -함께 보기: [`Astro.rewrite()`](#astrorewrite) - -### `context.locals` - -

    - -`context.locals`는 요청 수명 주기 동안 임의의 정보를 저장하고 액세스하는 데 사용되는 객체입니다. - -미들웨어 함수는 `context.locals` 값을 읽고 쓸 수 있습니다. - -```ts title="src/middleware.ts" -import type { MiddlewareHandler } from 'astro'; - -export const onRequest: MiddlewareHandler = ({ locals }, next) => { - if (!locals.title) { - locals.title = "Default Title"; - } - return next(); -} -``` - -API 엔드포인트는 `context.locals`의 정보만 읽을 수 있습니다. - -```ts title="src/pages/hello.ts" -import type { APIContext } from 'astro'; - -export function GET({ locals }: APIContext) { - return new Response(locals.title); // "Default Title" -} -``` - -함께 보기: [`Astro.locals`](#astrolocals) - -### `context.getActionResult()` - -

    - -**타입:** `(action: TAction) => ActionReturnType | undefined`
    - -

    - -`context.getActionResult()`는 [액션](/ko/guides/actions/) 제출의 결과를 반환하는 함수입니다. 이 함수는 액션 함수를 인수 (예: `actions.logout`)로 받고, 제출이 수신되면 `data` 또는 `error` 객체를 반환합니다. 그렇지 않으면 `undefined`를 반환합니다. - - -[`Astro.getActionResult()`](#astrogetactionresult)도 확인하세요. - -### `context.callAction()` - -

    - -

    - -`context.callAction()`은 Astro 컴포넌트에서 액션 핸들러를 직접 호출하는 데 사용되는 함수입니다. 이 함수는 액션 함수를 첫 번째 인수로 받고 (예: `actions.logout`), 액션이 수신하는 모든 입력을 두 번째 인수로 받습니다. 이 함수는 액션의 결과를 프로미스로 반환합니다. - - -[`Astro.callAction()`](#astrocallaction)도 확인하세요. - -## `getStaticPaths()` - -**타입:** `(options: GetStaticPathsOptions) => Promise | GetStaticPathsResult` - -페이지가 파일 이름에 동적 매개변수를 사용하는 경우 해당 컴포넌트는 `getStaticPaths()` 함수를 내보내야 합니다. - -Astro는 정적 사이트 빌더이기 때문에 이 기능이 필요합니다. 이는 전체 사이트가 미리 빌드되었음을 의미합니다. Astro가 빌드 시 페이지를 생성하는 방법을 모른다면 사용자가 사이트를 방문할 때 해당 페이지를 볼 수 없습니다. - -```astro ---- -export async function getStaticPaths() { - return [ - { params: { /* 필수 */ }, props: { /* 선택사항 */ } }, - { params: { ... } }, - { params: { ... } }, - // ... - ]; -} ---- - -``` - -`getStaticPaths()` 함수는 Astro가 어떤 경로를 미리 렌더링할지 결정하기 위해 객체 배열을 반환해야 합니다. - -[동적 라우팅](/ko/guides/endpoints/#params-및-동적-라우팅)을 위한 정적 파일 엔드포인트에서도 사용할 수 있습니다. - -:::tip -TypeScript를 사용하는 경우, [`GetStaticPaths`](/ko/guides/typescript/#getstaticpaths-타입-추론) 타입 유틸리티를 사용하여 `params` 및 `props`의 타입 안전 액세스를 보장하세요. -::: - -:::caution -`getStaticPaths()` 함수는 페이지가 로드되기 전에 격리된 범위에서 한 번 실행됩니다. 따라서 파일 가져오기 외에는 상위 범위에서 어떤 것도 참조할 수 없습니다. 이 요구 사항을 위반하면 컴파일러에서 경고합니다. -::: - -### `params` - -반환된 모든 객체의 `params` 키는 Astro에게 어떤 경로를 빌드할지 알려줍니다. 반환된 매개변수는 컴포넌트 파일 경로에 정의된 동적 매개변수 및 나머지 매개변수에 다시 매핑되어야 합니다. - -`params`는 URL로 인코딩되므로 문자열만 값으로 지원됩니다. 각 `params` 객체의 값은 페이지 이름에 사용된 매개변수와 일치해야 합니다. - -예를 들어 `src/pages/posts/[id].astro`에 페이지가 있다고 가정합니다. 이 페이지에서 `getStaticPaths`를 내보내고 경로에 대해 다음을 반환하는 경우: - -```astro ---- -export async function getStaticPaths() { - return [ - { params: { id: '1' } }, - { params: { id: '2' } }, - { params: { id: '3' } } - ]; -} - -const { id } = Astro.params; ---- -

    {id}

    -``` - -그러면 Astro는 빌드 시 `posts/1`, `posts/2`, `posts/3`을 정적으로 생성합니다. - -### `props`를 사용한 데이터 전달 - -생성된 각 페이지에 추가 데이터를 전달하려면 반환된 모든 경로 객체에 `props` 값을 설정할 수도 있습니다. `params`와 달리 `props`는 URL로 인코딩되지 않으므로 문자열로만 제한되지 않습니다. - -예를 들어, 원격 API에서 가져온 데이터를 기반으로 페이지를 생성한다고 가정해 보겠습니다. `getStaticPaths`의 페이지 컴포넌트에 전체 데이터 객체를 전달할 수 있습니다. - -```astro ---- -export async function getStaticPaths() { - const data = await fetch('...').then(response => response.json()); - - return data.map((post) => { - return { - params: { id: post.id }, - props: { post }, - }; - }); -} - -const { id } = Astro.params; -const { post } = Astro.props; ---- -

    {id}: {post.name}

    -``` - -알려진 경로 목록을 생성하거나 스텁할 때 도움이 될 수 있는 일반 배열을 전달할 수도 있습니다. - -```astro ---- -export async function getStaticPaths() { - const posts = [ - {id: '1', category: "astro", title: "API Reference"}, - {id: '2', category: "react", title: "Creating a React Counter!"} - ]; - return posts.map((post) => { - return { - params: { id: post.id }, - props: { post } - }; - }); -} -const {id} = Astro.params; -const {post} = Astro.props; ---- - -

    {id}: {post.title}

    -

    Category: {post.category}

    - -``` - -그런 다음 Astro는 `pages/posts/[id].astro`의 페이지 컴포넌트를 사용하여 빌드 시 `posts/1`, `posts/2`를 정적으로 생성합니다. 페이지는 `Astro.props`를 사용하여 이 데이터를 참조할 수 있습니다. - -### `paginate()` - -페이지네이션은 Astro가 `paginate()` 함수를 통해 기본적으로 지원하는 웹사이트의 일반적인 사용 사례입니다. `paginate()`는 페이지가 매겨진 컬렉션의 모든 페이지에 대해 하나의 URL을 생성하는 `getStaticPaths()`에서 반환할 배열을 자동으로 생성합니다. 페이지 번호는 매개변수로 전달되고, 페이지 데이터는 `page` prop으로 전달됩니다. - -```js -export async function getStaticPaths({ paginate }) { - // fetch(), Astro.glob() 등을 사용하여 데이터를 로드합니다. - const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`); - const result = await response.json(); - const allPokemon = result.results; - - // 모든 게시물에 대해 페이지가 매겨진 경로 컬렉션을 반환합니다. - return paginate(allPokemon, { pageSize: 10 }); -} - -// 올바르게 설정되면 이제 page prop에 단일 페이지를 렌더링하는 데 필요한 모든 것이 포함됩니다 (다음 섹션 참조). -const { page } = Astro.props; -``` - -`paginate()`에는 다음 인수가 있습니다: -- `data` - `paginate()` 함수로 전달한 페이지의 데이터를 포함하는 배열 -- `options` - 다음 속성을 가진 선택적 객체입니다: - - `pageSize` - 페이지당 표시되는 항목 수 (기본값은 `10`) - - `params` - 동적 경로 생성을 위한 추가 매개변수 보내기 - - `props` - 각 페이지에서 사용할 수 있도록 추가 props 보내기 - -`paginate()`는 `[page].astro` 또는 `[...page].astro`라는 파일 이름을 가정합니다. `page` 매개변수는 URL의 페이지 번호가 됩니다. - -- `/posts/[page].astro`는 `/posts/1`, `/posts/2`, `/posts/3` 등의 URL을 생성합니다. -- `/posts/[...page].astro`는 `/posts`, `/posts/2`, `/posts/3` 등의 URL을 생성합니다. - -#### 페이지네이션의 `page` prop - -

    - -**타입:** `Page` -

    - -페이지네이션은 페이지 컬렉션의 단일 데이터 페이지를 나타내는 모든 렌더링된 페이지에 `page` prop을 전달합니다. 여기에는 페이지를 매긴 데이터 (`page.data`)와 페이지의 메타데이터 (`page.url`, `page.start`, `page.end`, `page.total` 등)가 포함됩니다. 이 메타데이터는 "다음 페이지" 버튼이나 "100개 중 1-10개 표시" 메시지 등을 표시하는데 유용합니다. - -##### `page.data` - -

    - -**타입:** `Array` -

    - -현재 페이지에 대해 `paginate()` 함수에서 반환된 데이터 배열입니다. - -##### `page.start` - -

    - -**타입:** `number` -

    - -현재 페이지의 첫 번째 항목 색인으로 `0`부터 시작합니다. (예: `pageSize: 25`인 경우 1페이지에서는 `0`, 2페이지에서는 `25`입니다.) - -##### `page.end` - -

    - -**타입:** `number` -

    - -현재 페이지의 마지막 항목 색인입니다. - -##### `page.size` - -

    - -**타입:** `number`
    -**기본값:** `10` -

    - -페이지당 항목 수입니다. - -##### `page.total` - -

    - -**타입:** `number` -

    - -모든 페이지의 총 항목 수입니다. - -##### `page.currentPage` - -

    - -**타입:** `number` -

    - -`1`부터 시작하는 현재 페이지 번호입니다. - -##### `page.lastPage` - -

    - -**타입:** `number` -

    - -총 페이지 수입니다. - -##### `page.url.current` - -

    - -**타입:** `string` -

    - -현재 페이지의 URL을 가져옵니다 (표준 URL에 유용함). - -##### `page.url.prev` - -

    - -**타입:** `string | undefined` -

    - -이전 페이지의 URL을 가져옵니다 (1페이지인 경우 `undefined`). [`base`](/ko/reference/configuration-reference/#base)에 값이 설정된 경우 기본 경로를 URL 앞에 추가하세요. - -##### `page.url.next` - -

    - -**타입:** `string | undefined` -

    - -다음 페이지의 URL을 가져옵니다 (더 이상 페이지가 없으면 `undefined`). [`base`](/ko/reference/configuration-reference/#base)에 값이 설정된 경우 기본 경로를 URL 앞에 추가하세요. - -##### `page.url.first` - -

    - -**타입:** `string | undefined`
    - -

    - -첫 페이지의 URL을 가져옵니다 (1페이지에 있는 경우 `undefined`). [`base`](/ko/reference/configuration-reference/#base)의 값이 설정된 경우 URL 앞에 기본 경로를 추가하세요. - -##### `page.url.last` - -

    - -**타입:** `string | undefined`
    - -

    - -마지막 페이지의 URL을 가져옵니다 (더이상의 페이지가 존재하지 않는 경우 `undefined`). [`base`](/ko/reference/configuration-reference/#base)의 값이 설정된 경우 URL 앞에 기본 경로를 추가하세요. - -## `import.meta` - -모든 ESM 모듈에는 `import.meta` 속성이 포함되어 있습니다. Astro는 [Vite](https://ko.vite.dev/guide/env-and-mode.html)를 통해 `import.meta.env`를 추가합니다. - -**`import.meta.env.SSR`** 을 사용하면 서버에서 렌더링할 때 알 수 있습니다. 때로는 클라이언트에서만 렌더링되어야 하는 컴포넌트와 같은 다른 로직을 원할 수도 있습니다. - -```jsx -export default function () { - return import.meta.env.SSR ? : ; -} -``` \ No newline at end of file diff --git a/src/content/docs/ko/reference/astro-syntax.mdx b/src/content/docs/ko/reference/astro-syntax.mdx index a9fbddf4a447c..0050a463b4649 100644 --- a/src/content/docs/ko/reference/astro-syntax.mdx +++ b/src/content/docs/ko/reference/astro-syntax.mdx @@ -1,12 +1,9 @@ --- -title: Astro 구문 -description: .astro 컴포넌트 구문을 소개합니다. +title: 템플릿 표현식 참조 i18nReady: true --- -**HTML을 안다면 첫 번째 Astro 컴포넌트를 작성할 준비가 된 것입니다.** - -Astro 컴포넌트 구문은 HTML의 상위 집합입니다. [HTML이나 JSX를 작성해 본 경험이 있다면 이 구문이 친숙하게 느껴질 것입니다.](#astro와-jsx의-차이점) 구문은 컴포넌트 및 JavaScript 표현식을 포함하는 것을 지원합니다. +Astro 컴포넌트 구문은 HTML의 상위 집합입니다. 이 구문은 HTML이나 JSX를 작성한 경험이 있는 사람이라면 누구나 친숙하게 느낄 수 있도록 설계되었으며, 컴포넌트와 JavaScript 표현식을 포함하기 위한 지원이 추가되었습니다. ## JSX와 유사한 표현식 @@ -174,3 +171,139 @@ Astro에서는 표준 HTML 주석이나 JavaScript 스타일 주석을 사용할 :::caution HTML 스타일 주석은 브라우저 DOM에 포함되지만 JS 스타일 주석은 포함되지 않습니다. TODO 메시지나 기타 개발 전용 설명을 남기려면 HTML 주석 대신 JavaScript 주석을 사용할 수 있습니다. ::: + +## 컴포넌트 유틸리티 + +### `Astro.slots` + +`Astro.slots`는 Astro 컴포넌트의 슬롯된 자식들을 수정하기 위한 유틸리티 함수들을 포함합니다. + +#### `Astro.slots.has()` + +

    + +**타입:** `(slotName: string) => boolean` +

    + +특정 슬롯 이름에 대한 콘텐츠가 존재하는지 `Astro.slots.has()`로 확인할 수 있습니다. 이는 슬롯 콘텐츠를 래핑하고 싶지만 슬롯이 사용될 때만 래퍼 요소를 렌더링하고 싶을 때 유용할 수 있습니다. + +```astro title="src/pages/index.astro" +--- +--- + + +{Astro.slots.has('more') && ( + +)} +``` + +#### `Astro.slots.render()` + +

    + +**타입:** `(slotName: string, args?: any[]) => Promise` +

    + +`Astro.slots.render()`를 사용하여 슬롯의 콘텐츠를 HTML 문자열로 비동기적으로 렌더링할 수 있습니다. + +```astro +--- +const html = await Astro.slots.render('default'); +--- + +``` + +:::note +이는 고급 사용 사례를 위한 것입니다! 대부분의 경우에는 [`` 요소](/ko/basics/astro-components/#슬롯)를 사용하여 슬롯 콘텐츠를 렌더링하는 것이 더 간단합니다. +::: + +`Astro.slots.render()`는 선택적으로 두 번째 인자를 받습니다: 함수 자식들에게 전달될 매개변수들의 배열입니다. 이는 사용자 정의 유틸리티 컴포넌트에 유용할 수 있습니다. + +예를 들어, 이 `` 컴포넌트는 `message` prop을 대문자로 변환하여 기본 슬롯에 전달합니다: + +```astro title="src/components/Shout.astro" "await Astro.slots.render('default', [message])" +--- +const message = Astro.props.message.toUpperCase(); +let html = ''; +if (Astro.slots.has('default')) { + html = await Astro.slots.render('default', [message]); +} +--- + +``` + +``의 자식으로 전달된 콜백 함수는 모두 대문자로 된 `message` 매개변수를 받습니다: + +```astro title="src/pages/index.astro" +--- +import Shout from "../components/Shout.astro"; +--- + + {(message) =>
    {message}
    } +     + + +``` + +콜백 함수는 `slot` 속성이 있는 래핑 HTML 요소 태그 내부의 명명된 슬롯으로 전달될 수 있습니다. 이 요소는 콜백을 명명된 슬롯으로 전달하는 데에만 사용되며 페이지에 렌더링되지 않습니다. + +```astro + + + {(message) =>
    {message}
    } +     +     +``` + +래핑 태그로는 표준 HTML 요소나 컴포넌트로 해석되지 않는 소문자 태그를 사용하세요(예: `` 대신 ``). `` 요소는 Astro 슬롯으로 해석되므로 HTML 사용하지 마세요. + +### `Astro.self` + +`Astro.self`는 Astro 컴포넌트가 재귀적으로 호출될 수 있게 합니다. 이 동작은 컴포넌트 템플릿에서 ``를 사용하여 Astro 컴포넌트를 자체적으로 렌더링할 수 있게 해줍니다. 이를 통해 대규모 데이터 저장소와 중첩된 데이터 구조를 반복 처리할 수 있습니다. + +```astro +--- +// NestedList.astro +const { items } = Astro.props; +--- +
      + {items.map((item) => ( +
    • + + + {Array.isArray(item) ? ( + + ) : ( + item + )} +
      • + ))} +
    +``` + +그러면 이 컴포넌트는 다음과 같이 사용될 수 있습니다: + +```astro +--- +import NestedList from './NestedList.astro'; +--- + +``` + +그리고 HTML은 다음과 같이 렌더링될 것입니다: + +```html +
      +
    • A
      • +
    • +
        +
      • B
        • +
      • C
        • +
      +
      • +
    • D
      • +
    +``` diff --git a/src/content/docs/ko/reference/cli-reference.mdx b/src/content/docs/ko/reference/cli-reference.mdx index 7a3bf2d62ad26..852592e9b7ba5 100644 --- a/src/content/docs/ko/reference/cli-reference.mdx +++ b/src/content/docs/ko/reference/cli-reference.mdx @@ -137,7 +137,6 @@ Flags { "scripts": { "dev": "astro dev", - "start": "astro dev", "build": "astro build", "preview": "astro preview" } @@ -149,8 +148,8 @@ Flags ```shell - # `package.json` 파일의 `start` 스크립트를 사용하여 포트 8080에서 개발 서버를 실행합니다. - npm run start -- --port 8080 + # `package.json` 파일의 `dev` 스크립트를 사용하여 포트 8080에서 개발 서버를 실행합니다. + npm run dev -- --port 8080 # `package.json` 파일의 `build` 스크립트를 사용하여 자세한 로그로 사이트를 빌드합니다. npm run build -- --verbose @@ -158,8 +157,8 @@ Flags ```shell - # `package.json` 파일의 `start` 스크립트를 사용하여 포트 8080에서 개발 서버를 실행합니다. - pnpm start --port 8080 + # `package.json` 파일의 `dev` 스크립트를 사용하여 포트 8080에서 개발 서버를 실행합니다. + pnpm dev --port 8080 # `package.json` 파일의 `build` 스크립트를 사용하여 자세한 로그로 사이트를 빌드합니다. pnpm build --verbose @@ -167,8 +166,8 @@ Flags ```shell - # `package.json` 파일의 `start` 스크립트를 사용하여 포트 8080에서 개발 서버를 실행합니다. - yarn start --port 8080 + # `package.json` 파일의 `dev` 스크립트를 사용하여 포트 8080에서 개발 서버를 실행합니다. + yarn dev --port 8080 # `package.json` 파일의 `build` 스크립트를 사용하여 자세한 로그로 사이트를 빌드합니다. yarn build --verbose @@ -176,76 +175,31 @@ Flags -{/* - -ORIGINAL CONTENT That We Can Always revert to if new stuff is too friendly - -You can use the Command-Line Interface (CLI) provided by Astro to develop, build, and preview your project from a terminal window. - -Use the CLI by running one of the **commands** documented on this page, optionally followed by any **flags**. Flags customize the behavior of a command. For example, to start the development server on port `8080`, you would combine the `astro dev` command with the `--port` flag: `astro dev --port 8080`. - -In most cases you will use the CLI via your package manager: - - - - ```shell - npx astro dev --port 8080 - ``` - - - ```shell - pnpm astro dev --port 8080 - ``` - - - ```shell - yarn astro dev --port 8080 - ``` - - +## `astro dev` -If you started your project using [the `create astro` wizard](/en/install-and-setup/), you can also use the scripts in `package.json` for a shorter version of these commands. See the `README.md` in your project for details of which commands are available. +Astro의 개발 서버를 실행합니다. 이는 자산을 번들링하지 않는 로컬 HTTP 서버입니다. 편집기에서 변경 사항을 저장할 때 핫 모듈 교체(HMR)를 사용하여 브라우저를 업데이트합니다. - - - ```shell - # run the dev server on port 8080 using the `start` script in `package.json` - npm run start -- --port 8080 - ``` - - - ```shell - # run the dev server on port 8080 using the `start` script in `package.json` - pnpm start --port 8080 - ``` - - - ```shell - # run the dev server on port 8080 using the `start` script in `package.json` - yarn start --port 8080 - ``` - - +## `astro build` -*/} +배포용 사이트를 빌드합니다. 기본적으로 이는 정적 파일을 생성하여 `dist/` 디렉터리에 저장합니다. 모든 라우트가 [요청 시 렌더링](/ko/guides/on-demand-rendering/)되는 경우, 사이트를 제공하는 데 필요한 서버 파일이 생성됩니다. -## `astro dev` +### 플래그 -Astro의 개발 서버를 실행합니다. 이는 자산을 번들로 묶지 않는 로컬 HTTP 서버입니다. HMR (Hot Module Replacement)을 사용하여 편집기에 변경 사항을 저장할 때 브라우저를 업데이트합니다. +이 명령어는 [공통 플래그](#공통-플래그)와 다음과 같은 추가 플래그를 허용합니다: -## `astro build` +#### `--devOutput` -배포용 사이트를 빌드합니다. 기본적으로 이는 정적 파일을 생성하여 `dist/` 디렉터리에 저장합니다. [SSR이 활성화된 경우](/ko/guides/on-demand-rendering/), 사이트를 제공하는 데 필요한 서버 파일이 생성됩니다. +

    -아래에 설명된 [공통 플래그](#공통-플래그)와 결합할 수 있습니다. +개발 기반 빌드를 출력하며 이는 `astro dev`에서 변환된 코드와 유사합니다. 이는 추가적인 디버깅 정보가 포함된 빌드 전용 문제를 테스트하는 데 유용할 수 있습니다. ## `astro preview` `astro build`를 실행하여 생성된 정적 디렉터리 (기본적으로 `dist/`)의 콘텐츠를 제공하기 위해 로컬 서버를 시작합니다. -이 명령을 사용하면 [빌드 후](#astro-build) 로컬에서 사이트를 미리 보고 배포하기 전에 빌드 출력에서 ​​오류를 확인할 수 있습니다. 프로덕션 환경에서 실행되도록 설계되지 않았습니다. 프로덕션 호스팅에 대한 도움이 필요하면 [Astro 웹사이트 배포](/ko/guides/deploy/) 안내서를 확인하세요. +이 명령을 사용하면 [빌드 후](#astro-build) 로컬에서 사이트를 미리 보고 배포하기 전에 빌드 출력에서 오류를 확인할 수 있습니다. 프로덕션 환경에서 실행되도록 설계되지 않았습니다. 프로덕션 호스팅에 대한 도움이 필요하면 [Astro 웹사이트 배포](/ko/guides/deploy/) 안내서를 확인하세요. -Astro 1.5.0부터 `astro preview`는 이를 지원하는 어댑터를 사용하는 경우 SSR 빌드에서도 작동합니다. 현재는 [Node 어댑터](/ko/guides/integrations-guide/node/)에서만 `astro preview`를 지원합니다. +Astro 1.5.0 이후부터 [Node 어댑터](/ko/guides/integrations-guide/node/)가 요청 시 렌더링으로 생성된 빌드에 대해 `astro preview`를 지원합니다. 아래에 설명된 [공통 플래그](#공통-플래그)와 결합할 수 있습니다. @@ -301,11 +255,11 @@ check 명령을 실행할 다른 루트 디렉터리를 지정합니다. 기본 `astro dev`, `astro build`, `astro check`를 실행하면 `sync` 명령도 실행됩니다. ::: -모든 Astro 모듈에 대한 TypeScript 타입을 생성합니다. 이는 타입 추론을 위한 [`src/env.d.ts` 파일](/ko/guides/typescript/#설정)을 설정하고 생성된 타입에 의존하는 기능에 대한 모듈을 정의합니다. +모든 Astro 모듈에 대한 TypeScript 타입을 생성합니다. 이는 타입 추론을 위한 [`.astro/types.d.ts` 파일](/ko/guides/typescript/#설정)을 설정하고 생성된 타입에 의존하는 기능에 대한 모듈을 정의합니다. - `astro:content` [콘텐츠 컬렉션 API](/ko/guides/content-collections/)를 위한 모듈 - `astro:db` [Astro DB](/ko/guides/astro-db/)를 위한 모듈 -- [실험적 Astro Env](/ko/reference/configuration-reference/#experimentalenv)를 위한 `astro:env` 모듈 +- [실험적 Astro Env](/ko/guides/environment-variables/)를 위한 `astro:env` 모듈 - [Astro Actions](/ko/guides/actions/)를 위한 `astro:actions` 모듈 ## `astro add` @@ -434,6 +388,12 @@ astro --root myRootFolder/myProjectFolder dev astro --config config/astro.config.mjs dev ``` +### `--mode ` + +

    + +프로젝트의 인라인 [`mode`](/ko/reference/programmatic-reference/#mode) 구성을 설정합니다. + ### `--outDir `

    @@ -488,207 +448,3 @@ Astro 버전 번호를 출력하고 종료합니다. ### `--help` 도움말 메시지를 출력하고 종료합니다. - -## 고급 API (실험적 기능) - -Astro를 실행할 때 더 많은 제어가 필요한 경우 `"astro"` 패키지는 프로그래밍 방식으로 CLI 명령을 실행하기 위해 API를 내보냅니다. - -이러한 API는 실험적이며 API 시그니처가 변경될 수 있습니다. 모든 업데이트는 [Astro 변경 로그](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md)에 언급되며 아래 정보는 항상 최신 정보를 표시합니다. - -### `AstroInlineConfig` - -`AstroInlineConfig` 타입은 아래의 모든 명령 API에서 사용됩니다. 이는 사용자 [Astro 구성](/ko/reference/configuration-reference/) 타입에서 확장됩니다. - -```ts -interface AstroInlineConfig extends AstroUserConfig { - configFile?: string | false; - mode?: "development" | "production"; - logLevel?: "debug" | "info" | "warn" | "error" | "silent"; -} -``` - -#### `configFile` - -

    - -**타입:** `string | false`
    -**기본값:** `undefined` -

    - -Astro 구성 파일의 사용자 정의 경로입니다. - -이 값이 undefined이거나 (기본값) 설정되지 않은 경우 Astro는 `root`를 기준으로 `astro.config.(js,mjs,ts,mts)` 파일을 검색하고 발견되면 구성 파일을 로드합니다. - -상대 경로가 설정되면 `root` 옵션을 기반으로 확인됩니다. - -구성 파일 로드를 비활성화하려면 `false`로 설정하세요. - -이 객체에 전달된 인라인 구성은 로드된 사용자 구성과 병합될 때 가장 높은 우선순위를 갖습니다. - -#### `mode` - -

    - -**타입:** `"development" | "production"`
    -**기본값:** `astro dev`를 실행할 때 `"development"`, `astro build`를 실행할 때 `"production"` -

    - -"development" 또는 "production" 코드를 생성하기 위해 사이트를 빌드할 때 사용되는 모드입니다. - -#### `logLevel` - -

    - -**타입:** `"debug" | "info" | "warn" | "error" | "silent"`
    -**기본값:** `"info"` -

    - -Astro가 기록한 메시지를 필터링하는 로깅 수준입니다. - -- `"debug"`: 자세한 디버깅 진단을 포함한 모든 것을 기록합니다. -- `"info"`: 정보 메시지, 경고, 오류를 기록합니다. -- `"warn"`: 경고 및 오류를 기록합니다. -- `"error"`: 오류만 기록합니다. -- `"silent"`: 아무것도 기록하지 않습니다. - -### `dev()` - -**타입:** `(inlineConfig: AstroInlineConfig) => Promise` - -[`astro dev`](#astro-dev)와 유사하게 Astro의 개발 서버를 실행합니다. - -```js -import { dev } from "astro"; - -const devServer = await dev({ - root: "./my-project", -}); - -// 필요한 경우 서버를 중지합니다. -await devServer.stop(); -``` - -#### `DevServer` - -```ts -export interface DevServer { - address: AddressInfo; - handle: (req: http.IncomingMessage, res: http.ServerResponse) => void; - watcher: vite.FSWatcher; - stop(): Promise; -} -``` - -##### `address` - -개발 서버가 수신 대기 중인 주소입니다. - -이 속성에는 Node의 [`net.Server#address()` 메서드](https://nodejs.org/api/net.html#serveraddress)가 반환한 값이 포함되어 있습니다. - -##### `handle()` - -원시 Node HTTP 요청에 대한 핸들입니다. 네트워크를 통해 요청을 보내는 대신 [`http.IncomingMessage`](https://nodejs.org/api/http.html#class-httpincomingmessage) 및 [`http.ServerResponse`](https://nodejs.org/api/http.html#class-httpserverresponse)를 사용하여 `handle()`을 호출할 수 있습니다. - -##### `watcher` - -[Vite의 개발 서버](https://ko.vite.dev/guide/api-javascript#vitedevserver)에서 노출되는 [Chokidar 파일 감시기](https://github.com/paulmillr/chokidar#getting-started)입니다. - -##### `stop()` - -개발 서버를 중지합니다. 그러면 모든 유휴 연결이 닫히고 새 연결에 대한 수신이 중지됩니다. - -보류 중인 모든 요청이 완료되고 모든 유휴 연결이 닫히면 해결되는 `Promise`를 반환합니다. - -### `build()` - -**타입:** `(inlineConfig: AstroInlineConfig) => Promise` - -[`astro build`](#astro-build)와 유사하게 배포용 사이트를 빌드합니다. - -```js -import { build } from "astro"; - -await build({ - root: "./my-project", -}); -``` - -### `preview()` - -**타입:** `(inlineConfig: AstroInlineConfig) => Promise` - -[`astro preview`](#astro-preview)와 유사하게 로컬 서버를 시작하여 빌드 출력을 제공합니다. - -구성에 어댑터가 설정되어 있지 않으면 미리보기 서버는 빌드된 정적 파일만 제공합니다. -구성에 어댑터가 설정되어 있으면 어댑터에서 미리보기 서버를 제공합니다. 미리 보기 서버를 제공하기 위해 어댑터가 필요하지 않으므로, 선택한 어댑터에 따라 이 기능을 사용하지 못할 수도 있습니다. - -```js -import { preview } from "astro"; - -const previewServer = await preview({ - root: "./my-project", -}); - -// 필요한 경우 서버를 중지합니다. -await previewServer.stop(); -``` - -#### `PreviewServer` - -```ts -export interface PreviewServer { - host?: string; - port: number; - closed(): Promise; - stop(): Promise; -} -``` - -##### `host` - -서버가 연결을 수신 대기 중인 호스트입니다. - -어댑터는 이 필드를 설정하지 않은 상태로 둘 수 있습니다. `host` 값은 구현에 따라 다릅니다. - -##### `port` - -서버가 연결을 수신 대기 중인 포트입니다. - -##### `stop()` - -미리보기 서버를 닫고, 요청 수신을 중지하고, 유휴 연결을 삭제하도록 요청합니다. - -반환된 `Promise`은 닫기 요청이 전송되면 해결됩니다. 이것은 아직 서버가 닫혔다는 것을 의미하지 않습니다. 서버가 완전히 닫혔는지 확인하려면 [`closed()`](#closed) 메서드를 사용하세요. - -##### `closed()` - -서버가 닫히면 해결하고 서버에서 오류가 발생하면 거부하는 `Promise`를 반환합니다. - -### `sync()` - -**타입:** `(inlineConfig: AstroInlineConfig) => Promise` - -[`astro sync`](#astro-sync)와 유사하게 모든 Astro 모듈에 대해 TypeScript 타입을 생성합니다. - -```js -import { sync } from "astro"; - -await sync({ - root: "./my-project", -}); -``` - -## Astro Studio CLI - - -### `astro login` - -Astro Studio로 인증합니다. 이는 [`astro link`](#astro-link)를 포함한 모든 데이터베이스 관리 명령을 실행하는 데 필요합니다. - -### `astro link` - -Studio에서 호스팅하는 데이터베이스에 연결합니다. 데이터베이스 관리를 위해 [Astro DB 명령](/ko/guides/integrations-guide/db/#astro-db-cli-참조)을 실행하는 데 필요합니다. 데이터베이스를 연결하려면 기존 데이터베이스를 선택하거나 새 데이터베이스를 생성하라는 메시지가 표시됩니다. - -### `astro logout` - -Astro Studio에서 로그아웃하고 로컬에 저장된 인증 키를 제거합니다. diff --git a/src/content/docs/ko/reference/configuration-reference.mdx b/src/content/docs/ko/reference/configuration-reference.mdx index 4e4d36983be72..babab474cbe21 100644 --- a/src/content/docs/ko/reference/configuration-reference.mdx +++ b/src/content/docs/ko/reference/configuration-reference.mdx @@ -1,10 +1,10 @@ --- title: 구성 참조 i18nReady: true -githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/%40types/astro.ts +githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/types/public/config.ts --- + import Since from '~/components/Since.astro'; -import DontEditWarning from '~/components/DontEditWarning.astro'; 다음 참조는 Astro에서 지원되는 모든 구성 옵션을 다룹니다. @@ -155,16 +155,15 @@ Astro는 `301` 상태로 리디렉션된 GET 요청을 처리하고 다른 요

    -**타입:** `'static' | 'server' | 'hybrid'`
    +**타입:** `'static' | 'server'`
    **기본값:** `'static'`

    빌드의 출력 대상을 지정합니다. -- `'static'` - 모든 정적 호스트에 배포될 정적 사이트를 구축합니다. -- `'server'` - SSR (서버 측 렌더링)을 지원하는 호스트에 배포할 앱을 구축합니다. -- `'hybrid'` - 몇 개의 서버 측 렌더링 페이지가 포함된 정적 사이트를 구축합니다. +- `'static'` - 기본적으로 모든 페이지를 사전 렌더링하여, 어떤 페이지도 사전 렌더링을 거부하지 않는 경우 완전히 정적인 사이트를 출력합니다. +- `'server'` - 기본적으로 모든 페이지에 서버 측 렌더링(SSR)을 사용하여, 항상 서버에서 렌더링된 사이트를 출력합니다. ```js import { defineConfig } from 'astro/config'; @@ -188,7 +187,7 @@ export default defineConfig({ 빌드 어댑터를 사용하여 선호하는 서버, 서버리스, 에지 호스트에 배포하세요. Astro SSR을 사용하려면 [Netlify](/ko/guides/deploy/netlify/#ssr용-어댑터), [Vercel](/ko/guides/deploy/vercel/#ssr용-어댑터) 등을 위한 자사 어댑터 중 하나를 가져오세요. -SSR에 대한 자세한 내용은 [서버 측 렌더링 안내서를 참조](/ko/guides/on-demand-rendering/)하고, 전체 호스트 목록은 [배포 안내서](/ko/guides/deploy/)를 참조하세요. +SSR에 대한 자세한 내용은 [요청 시 렌더링 가이드를 참조](/ko/guides/on-demand-rendering/)하고, 전체 호스트 목록은 [배포 가이드](/ko/guides/deploy/)를 참조하세요. ```js import netlify from '@astrojs/netlify'; @@ -202,11 +201,11 @@ import netlify from '@astrojs/netlify'; - output -## integrations +### integrations 맞춤형 통합으로 Astro를 확장하세요. 통합은 프레임워크 지원 (Solid.js 등), 새로운 기능 (사이트맵 등), 새 라이브러리(Partytown 등)를 한번에 추가하는 것을 도와줍니다. -Astro 통합을 시작하는 데 도움이 필요하면 [통합 안내서](/ko/guides/integrations-guide/)를 읽어보세요. +Astro 통합을 시작하는 데 도움이 필요하면 [통합 가이드](/ko/guides/integrations-guide/)를 읽어보세요. ```js import react from '@astrojs/react'; @@ -227,7 +226,7 @@ import tailwind from '@astrojs/tailwind';

    -프로젝트 루트 디렉터리가 아닌 디렉터리에서 `astro` CLI 명령을 실행하는 경우에만 이 옵션을 제공해야 합니다. 일반적으로 이 옵션은 [Astro 구성 파일](/ko/guides/configuring-astro/#지원하는-구성-파일-타입) 대신 CLI를 통해 제공됩니다. Astro가 구성 파일을 찾으려면 먼저 프로젝트 루트를 알아야 하기 때문입니다. +프로젝트 루트 디렉터리가 아닌 디렉터리에서 `astro` CLI 명령을 실행하는 경우에만 이 옵션을 제공해야 합니다. 일반적으로 이 옵션은 Astro 구성 파일 대신 CLI를 통해 제공됩니다. Astro가 구성 파일을 찾으려면 먼저 프로젝트 루트를 알아야 하기 때문입니다. 상대 경로를 제공하는 경우 (예: `--root: './my-project'`) Astro는 현재 작업 디렉터리를 기준으로 경로를 확인합니다. @@ -369,21 +368,23 @@ Astro 컴포넌트의 요소 선택기가 전역 스타일 기본값 (예: 전

    -**타입:** `object`
    -**기본값:** `{}`
    +**타입:** `Record.<"checkOrigin", boolean> | undefined`
    +**기본값:** `{checkOrigin: true}`

    Astro 웹사이트에 대한 보안 조치를 활성화합니다. -이러한 기능은 `server` 모드를 사용하여 요청 시 렌더링된 페이지 (SSR) 또는 `hybrid` 모드에서 사전 렌더링을 선택 해제한 페이지에만 존재합니다. +이러한 기능은 `server` 모드를 사용하여 요청 시 렌더링된 페이지 (SSR) 또는 `static` 모드에서 사전 렌더링을 선택 해제한 페이지에만 존재합니다. + +기본적으로 Astro는 요청 시 렌더링된 페이지의 각 요청에서 전송된 URL과 "origin" 헤더가 일치하는지 확인합니다. `checkOrigin`을 `false`로 설정하여 이 동작을 비활성화할 수 있습니다: ```js // astro.config.mjs export default defineConfig({ output: "server", security: { - checkOrigin: true + checkOrigin: false } }) ``` @@ -393,11 +394,11 @@ export default defineConfig({

    **타입:** `boolean`
    -**기본값:** `false`
    +**기본값:** `true`

    -활성화되면 모든 최신 브라우저에서 자동으로 전달되는 "origin" 헤더가 각 `Request`에서 보낸 URL과 일치하는지 확인합니다. 이는 CSRF (Cross-Site Request Forgery) 보호를 위해 사용됩니다. +모든 최신 브라우저에서 자동으로 전달되는 "origin" 헤더가 각 `Request`에서 보낸 URL과 일치하는지 확인합니다. 이는 CSRF (Cross-Site Request Forgery) 보호를 위해 사용됩니다. "origin" 확인은 요청 시 렌더링된 페이지에 대해서만 실행되며, `content-type` 헤더가 `'application/x-www-form-urlencoded'`, `'multipart/form-data'`, `'text/plain'` 중 하나인 `POST`, `PATCH`, `DELETE`, `PUT` 요청에 대해서만 실행됩니다. @@ -482,18 +483,17 @@ export default defineConfig({

    **타입:** `string`
    -**기본값:** `'./dist/client'` - +**기본값:** `'./client'`

    -`output: 'server'` 또는 `output: 'hybrid'`인 경우에만 클라이언트측 CSS 및 JavaScript의 출력 디렉터리를 제어합니다. +서버 렌더링 된 페이지로 사이트를 구축하는 경우, 클라이언트측 CSS 및 JavaScript의 출력 디렉터리를 제어합니다. `outDir`은 코드가 빌드되는 위치를 제어합니다. 이 값은 `outDir`을 기준으로 합니다. ```js { - output: 'server', // 또는 'hybrid' + output: 'server', build: { client: './client' } @@ -505,8 +505,7 @@ export default defineConfig({

    **타입:** `string`
    -**기본값:** `'./dist/server'` - +**기본값:** `'./server'`

    SSR로 빌드할 때 서버 JavaScript의 출력 디렉터리를 제어합니다. @@ -652,7 +651,7 @@ SSR로 빌드할 때 서버 엔트리포인트의 파일 이름을 지정합니 ```js { build: { - inlineStylesheets: 'never', + inlineStylesheets: `never`, }, } ``` @@ -691,7 +690,7 @@ SSR로 빌드할 때 서버 엔트리포인트의 파일 이름을 지정합니 ```js { - server: { port: 1234, host: true } + server: { port: 1234, host: true} } ``` @@ -799,7 +798,7 @@ Astro 개발 툴바를 활성화할지 여부입니다. 이 툴바를 사용하

    더 빠른 페이지 전환을 제공하려면 사이트의 링크에 대해 프리페치를 활성화하세요. -(`` 라우터를 사용하는 페이지에서는 기본적으로 활성화됩니다. 이 동작을 선택하지 않으려면 `prefetch: false`를 설정하세요.) +(`` 라우터를 사용하는 페이지에서는 기본적으로 활성화됩니다. 이 동작을 선택하지 않으려면 `prefetch: false`를 설정하세요.) 이 구성은 프로젝트의 모든 페이지에 프리페치 스크립트를 자동으로 추가하여 `data-astro-prefetch` 속성에 대한 액세스를 제공합니다. 해당 페이지에 대한 프리페칭을 활성화하려면 페이지의 `` 링크에 이 속성을 추가하세요. @@ -810,7 +809,7 @@ Astro 개발 툴바를 활성화할지 여부입니다. 이 툴바를 사용하 [`prefetch.defaultStrategy`](#prefetchdefaultstrategy) 및 [`prefetch.prefetchAll`](#prefetchprefetchall) 옵션을 사용하여 기본 프리페치 동작을 추가로 사용자 정의하세요. -자세한 내용은 [프리페치 안내서](/ko/guides/prefetch/)를 참조하세요. +자세한 내용은 [프리페치 가이드](/ko/guides/prefetch/)를 참조하세요. ### prefetch.prefetchAll @@ -821,7 +820,7 @@ Astro 개발 툴바를 활성화할지 여부입니다. 이 툴바를 사용하

    `data-astro-prefetch` 속성이 없는 링크를 포함하여 모든 링크에 대해 프리페치를 활성화합니다. -`` 라우터를 사용할 때 이 값의 기본값은 `true`입니다. 그렇지 않은 경우 기본값은 `false`입니다. +`` 라우터를 사용할 때 이 값의 기본값은 `true`입니다. 그렇지 않은 경우 기본값은 `false`입니다. ```js prefetch: { @@ -863,21 +862,21 @@ prefetch: {

    -**타입:** `string`
    -**기본값:** `undefined`
    - +**타입:** `Object`
    +**기본값:** `{route: '/_image', entrypoint: undefined}`

    -개발 및 SSR에서 이미지 최적화에 사용할 엔드포인트를 설정합니다. 기본 엔드포인트를 사용하려면 `undefined`로 설정하세요. - -엔드포인트는 항상 `/_image`에 삽입됩니다. +개발 및 SSR에서 이미지 최적화를 위해 사용할 엔드포인트를 설정합니다. `entrypoint` 속성을 `undefined`로 설정하여 기본 이미지 엔드포인트를 사용할 수 있습니다. ```js { image: { - // 예: 사용자 정의 이미지 엔드포인트 사용 - endpoint: './src/image-endpoint.ts', + // 예시: `/custom_endpoint`에서 사용자 지정 이미지 엔드포인트를 사용합니다. + endpoint: { + route: '/custom_endpoint', + entrypoint: 'src/my_endpoint.ts', + }, }, } ``` @@ -931,7 +930,7 @@ Sharp 이미지 서비스의 기본 이미지 크기 제한을 우회하고 큰

    **타입:** `Array.`
    -**기본값:** `[]`
    +**기본값:** `{domains: []}`

    @@ -981,17 +980,60 @@ Sharp 이미지 서비스의 기본 이미지 크기 제한을 우회하고 큰 ``` 아래 설명과 같이 와일드카드를 사용하여 허용되는 `hostname` 및 `pathname` 값을 정의할 수 있습니다. 그렇지 않으면 제공된 정확한 값만 구성됩니다. - `hostname`: - -- '\*\*' 로 시작하면 모든 하위 도메인 ('endsWith')을 허용합니다. -- '\*' 로 시작하면 한 수준의 하위 도메인만 허용합니다. +- '**.' 로 시작하면 모든 하위 도메인 ('endsWith')을 허용합니다. +- '*.' 로 시작하면 한 수준의 하위 도메인만 허용합니다. `pathname`: - - 모든 하위 경로 ('startsWith')를 허용하려면 '/\*\*' 로 끝납니다. - 한 수준의 하위 경로만 허용하려면 '/\*' 로 끝납니다. +### image.experimentalLayout + +

    + +**타입:** `ImageLayout`
    +**기본값:** `undefined` +

    + +반응형 이미지의 기본 레이아웃 타입입니다. 이미지 컴포넌트의 `layout` 속성으로 재정의할 수 있습니다. +`experimental.responsiveImages` 플래그를 활성화해야 합니다. +- `responsive` - 이미지가 지정된 크기를 초과하지 않으면서 종횡비를 유지한 채로 컨테이너에 맞게 크기가 조정됩니다. +- `fixed` - 이미지가 원래 크기를 유지합니다. +- `full-width` - 이미지가 종횡비를 유지한 채로 컨테이너에 맞게 크기가 조정됩니다. + +### image.experimentalObjectFit + +

    + +**타입:** `ImageFit`
    +**기본값:** `"cover"` +

    + +반응형 이미지의 기본 object-fit 값입니다. 이미지 컴포넌트의 `fit` 속성으로 재정의할 수 있습니다. +`experimental.responsiveImages` 플래그를 활성화해야 합니다. + +### image.experimentalObjectPosition + +

    + +**타입:** `string`
    +**기본값:** `"center"` +

    + +반응형 이미지의 기본 object-position 값입니다. 이미지 컴포넌트의 `position` 속성으로 재정의할 수 있습니다. +`experimental.responsiveImages` 플래그를 활성화해야 합니다. + +### image.experimentalBreakpoints + +

    + +**타입:** `Array.`
    +**기본값:** `[640, 750, 828, 1080, 1280, 1668, 2048, 2560] | [640, 750, 828, 960, 1080, 1280, 1668, 1920, 2048, 2560, 3200, 3840, 4480, 5120, 6016]` +

    + +반응형 이미지를 생성하는 데 사용되는 중단점입니다. `experimental.responsiveImages` 플래그를 활성화해야 합니다. 전체 목록은 일반적으로 사용되지 않으며, 소스 및 출력 크기에 따라 필터링됩니다. 사용되는 기본값은 로컬 또는 원격 이미지 서비스를 사용하는지에 따라 다릅니다. 원격 서비스의 경우 필요한 크기만 생성되므로 더 포괄적인 목록이 사용됩니다. 로컬 서비스의 경우 생성되는 이미지 수를 줄이기 위해 더 짧은 목록이 사용됩니다. + ## Markdown 옵션 ### markdown.shikiConfig @@ -1081,7 +1123,7 @@ Markdown 코드 블록 (\`\`\`)에 사용할 구문 강조기를 선택합니다 import remarkToc from 'remark-toc'; { markdown: { - remarkPlugins: [ [remarkToc, { heading: "contents" }] ] + remarkPlugins: [ [remarkToc, { heading: "contents"} ] ] } } ``` @@ -1159,7 +1201,7 @@ Astro는 기본적으로 [SmartyPants 포매터](https://daringfireball.net/proj { markdown: { // 예: 각주 텍스트를 다른 언어로 번역합니다. 기본 영어 값은 다음과 같습니다. - remarkRehype: { footnoteLabel: "Footnotes", footnoteBackLabel: "Back to reference 1" }, + remarkRehype: { footnoteLabel: "Footnotes", footnoteBackLabel: "Back to reference 1"}, }, }; ``` @@ -1175,35 +1217,33 @@ Astro는 기본적으로 [SmartyPants 포매터](https://daringfireball.net/proj i18n 라우팅을 구성하고 일부 맞춤 옵션을 지정할 수 있습니다. -[Astro의 국제화](/ko/guides/internationalization/)에 대한 자세한 내용은 안내서를 참조하세요. +[Astro의 국제화](/ko/guides/internationalization/)에 대한 자세한 내용은 가이드를 참조하세요. -### i18n.defaultLocale +### i18n.locales

    -**타입:** `string`
    - +**타입:** `Locales`

    -웹사이트/애플리케이션의 기본 언어입니다. 필수 필드입니다. +웹사이트가 지원하는 모든 로케일 목록입니다. 이는 필수 필드입니다. -특정 언어 형식이나 구문이 적용되지는 않지만 호환성을 극대화하려면 필요에 따라 소문자와 하이픈 (예: "es", "pt-br")을 사용하는 것이 좋습니다. +언어는 개별 코드(예: `['en', 'es', 'pt-br']`)로 나열하거나 공유된 `path` 코드에 매핑(예: `{ path: "english", codes: ["en", "en-US"]}`)할 수 있습니다. 이러한 코드는 배포된 사이트의 URL 구조를 결정하는 데 사용됩니다. -### i18n.locales +특정 언어 코드 형식이나 구문이 강제되지는 않지만, 콘텐츠 파일이 포함된 프로젝트 폴더는 목록의 `locales` 항목과 정확히 일치해야 합니다. 사용자 정의 URL 경로 접두사를 가리키는 여러 `codes`의 경우, 구성된 `path`와 동일한 이름의 폴더에 콘텐츠 파일을 저장하세요. -

    +### i18n.defaultLocale -**타입:** `Locales`
    +

    +**타입:** `string`

    -`defaultLocale`을 포함하여 웹사이트에서 지원하는 모든 언어의 목록입니다. 필수 필드입니다. - -언어는 개별 코드 (예: `['en', 'es', 'pt-br']`)로 나열되거나 공유된 코드 `path` (예: `{ path: "english", codes: ["en", "en-US"]}`)에 매핑될 수 있습니다. 이 코드는 배포된 사이트의 URL 구조를 결정하는 데 사용됩니다. +웹사이트/애플리케이션의 기본 로케일로, 지정된 `locales` 중 하나입니다. 이는 필수 필드입니다. -특정 언어 코드 형식이나 구문은 적용되지 않지만 콘텐츠 파일이 포함된 프로젝트 폴더는 목록의 `locales` 항목과 정확히 일치해야 합니다. 맞춤 URL 경로 접두사를 가리키는 여러 `codes`가 있는 경우 구성된 `path`와 동일한 이름을 가진 폴더에 콘텐츠 파일을 저장하세요. +특정 언어 형식이나 구문이 적용되지는 않지만 호환성을 극대화하려면 필요에 따라 소문자와 하이픈 (예: "es", "pt-br")을 사용하는 것이 좋습니다. ### i18n.fallback @@ -1363,246 +1403,92 @@ export default defineConfig({ }) ``` -## Legacy 플래그 - -일부 사용자가 Astro 버전 간에 마이그레이션할 수 있도록 돕기 위해 때때로 `legacy` 플래그를 도입합니다. -이러한 플래그를 사용하면 최신 버전에서 더 이상 사용되지 않거나 오래된 Astro의 동작을 선택할 수 있으므로 계속 업그레이드하고 새로운 Astro 릴리스를 활용할 수 있습니다. - -## Experimental 플래그 - -Astro는 사용자가 새로운 기능에 조기에 액세스할 수 있도록 experimental 플래그를 제공합니다. -이러한 플래그는 안정성이 보장되지 않습니다. - -### experimental.directRenderScript +## env

    -**타입:** `boolean`
    -**기본값:** `false`
    - - -

    - -스크립트가 사용되지 않는 페이지에서 스크립트가 실행되는 것을 방지하기 위해 보다 안정적인 전략을 가능하게 합니다. - -스크립트는 Astro 파일에 선언된 대로 직접 렌더링됩니다. (TypeScript, `node_modules` 가져오기, 중복 제거 스크립트 등 기존 기능 포함) 이제 Astro 파일에서 조건부로 스크립트를 렌더링할 수도 있습니다. -그러나 이는 스크립트가 더 이상 ``로 끌어올려지지 않으며 페이지의 여러 스크립트가 더 이상 번들링되지 않음을 의미합니다. -이 옵션을 활성화하면 모든 ` -``` - -환경 변수의 데이터 타입과 속성을 정의하려면 `experimental.env.schema` Astro 구성에 스키마를 선언하세요. `envField` 도우미를 사용하면 변수를 문자열, 숫자 또는 부울로 정의하고 객체에 속성을 전달할 수 있습니다. +`envField`를 사용하여 환경 변수의 데이터 타입과 속성을 정의하는 객체입니다: `context`(클라이언트 또는 서버), `access`(공개 또는 비밀), 사용할 `default` 값, 그리고 이 환경 변수가 `optional`인지 여부(기본값은 `false`). ```js // astro.config.mjs import { defineConfig, envField } from "astro/config" export default defineConfig({ - experimental: { - env: { - schema: { - API_URL: envField.string({ context: "client", access: "public", optional: true }), - PORT: envField.number({ context: "server", access: "public", default: 4321 }), - API_SECRET: envField.string({ context: "server", access: "secret" }), - } - } + env: { + schema: { + API_URL: envField.string({ context: "client", access: "public", optional: true }), + PORT: envField.number({ context: "server", access: "public", default: 4321 }), + API_SECRET: envField.string({ context: "server", access: "secret" }), } + } }) ``` -현재 지원되는 데이터 타입은 문자열, 숫자, 부울, 열거형 네 가지입니다. - -[`env.schema`](#experimentalenvschema)에 정의된 `context` (클라이언트 또는 서버) 및 `access`(비밀 또는 공개) 설정의 조합에 따라 결정되는 세 종류의 환경 변수가 있습니다. - -- **공개 클라이언트 변수**: 이러한 변수는 최종 클라이언트 및 서버 번들 모두에 포함되며 `astro:env/client` 모듈을 통해 클라이언트와 서버 모두에서 액세스할 수 있습니다. - - ```js - import { API_URL } from "astro:env/client" - ``` - -- **공개 서버 변수**: 이 변수는 최종 서버 번들에 포함되며 `astro:env/server` 모듈을 통해 서버에서 액세스할 수 있습니다. - - ```js - import { PORT } from "astro:env/server" - ``` - -- **비밀 서버 변수**: 이 변수는 최종 번들의 일부가 아니며 `astro:env/server` 모듈을 통해 서버에서 액세스할 수 있습니다. `getSecret()` 도우미 함수를 사용하면 스키마에 지정되지 않은 비밀을 검색할 수 있습니다. 이 구현은 어댑터에서 제공되며, 기본값은 `process.env`입니다: - - ```js - import { API_SECRET, getSecret } from "astro:env/server" - - const SECRET_NOT_IN_SCHEMA = getSecret("SECRET_NOT_IN_SCHEMA") // string | undefined - ``` - -**참고:** 이 데이터를 클라이언트에 보내는 안전한 방법이 없기 때문에 비밀 클라이언트 변수는 지원되지 않습니다. 따라서 스키마에서 `context: "client"`와 `access: "secret"`을 모두 구성하는 것은 불가능합니다. - -전체 개요를 확인하고 이 실험적 API에 대한 피드백을 제공하려면 [Astro Env RFC](https://github.com/withastro/roadmap/blob/main/proposals/0049-astro-env.md)를 참조하세요. - -#### experimental.env.schema - -

    - -**타입:** `EnvSchema`
    -**기본값:** `undefined`
    - -

    - -`envField`를 사용하여 데이터 타입 (`string`, `number`, `boolean`)과 환경 변수의 속성 (`context` (클라이언트 또는 서버), `access` (공개 또는 비밀), `default` (사용할 기본값)) 및 환경 변수의 선택 사항 여부 (기본 값은 `false`)를 정의하는 객체입니다. +`envField`는 문자열, 숫자, 열거형, 불리언의 네 가지 데이터 타입을 지원합니다. `context`와 `access`는 모든 데이터 타입에 필요한 속성입니다. 다음은 각 데이터 타입에 사용할 수 있는 전체 속성 목록입니다: ```js -// astro.config.mjs -import { defineConfig, envField } from "astro/config" - -export default defineConfig({ - experimental: { - env: { - schema: { - API_URL: envField.string({ context: "client", access: "public", optional: true }), - PORT: envField.number({ context: "server", access: "public", default: 4321 }), - API_SECRET: envField.string({ context: "server", access: "secret" }), - } - } - } +import { envField } from "astro/config" + +envField.string({ + // context & access + optional: true, + default: "foo", + max: 20, + min: 1, + length: 13, + url: true, + includes: "oo", + startsWith: "f", + endsWith: "o", +}) +envField.number({ + // context & access + optional: true, + default: 15, + gt: 2, + min: 1, + lt: 3, + max: 4, + int: true, +}) +envField.boolean({ + // context & access + optional: true, + default: true, +}) +envField.enum({ + // context & access + values: ['foo', 'bar', 'baz'], // 필수 + optional: true, + default: 'baz', }) ``` -#### experimental.env.validateSecrets +### env.validateSecrets

    **타입:** `boolean`
    **기본값:** `false`
    - +

    개발 서버를 시작하거나 빌드를 실행할 때 서버에서 비밀의 유효성을 검사할지 여부입니다. @@ -1614,297 +1500,11 @@ export default defineConfig({ import { defineConfig, envField } from "astro/config" export default defineConfig({ - experimental: { - env: { - schema: { - // ... - }, - validateSecrets: true - } + env: { + schema: { + // ... + }, + validateSecrets: true } }) ``` - -### experimental.serverIslands - -

    - -**타입:** `boolean`
    -**기본값:** `false`
    - -

    - -실험적인 서버 아일랜드 기능을 활성화합니다. -서버 아일랜드는 페이지가 이미 렌더링된 후, 비동기적으로 렌더링되도록 컴포넌트를 지연시키는 기능을 제공합니다. - -활성화하려면 어댑터를 사용하여 [주문형 서버 렌더링 `output` 모드](/ko/guides/on-demand-rendering/)를 구성하고 `experimental` 객체에 `serverIslands` 플래그를 추가합니다 - -```js -{ - output: 'hybrid', // 또는 'server' - adapter: nodejs({ mode: 'standalone' }), - experimental: { - serverIslands: true, - }, -} -``` - -Astro 컴포넌트에서 `server:defer` 지시어를 사용하면 초기 렌더링을 지연시킬 수 있습니다: - -```astro "server:defer" ---- -import Avatar from '~/components/Avatar.astro'; ---- - -``` - -외부 페이지는 빌드 타임 (`hybrid`) 또는 런타임(`server`)에 아일랜드 콘텐츠가 생략되고 그 자리에 ` @@ -166,8 +166,8 @@ import { Steps } from '@astrojs/starlight/components'; ```astro title="src/pages/index.astro" ins={7} del={3-5}