From e97f88e639b1fdc44025c561c3c70a91d2d1fdbe Mon Sep 17 00:00:00 2001 From: Emanuele Stoppa Date: Wed, 30 Aug 2023 14:36:32 +0100 Subject: [PATCH 001/239] [i18nIgnore] feat: change default port (#3977) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: change default port * note that 4322 will be used when 4321 is in use * Generalise use of http://localhost * Generalise use of http:// * chore: update remaining ports * chore: remove https from localhost URL's --------- Co-authored-by: Elian ☕️ Co-authored-by: Sarah Rainsberger Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> --- old-translations/de/installation.md | 4 +-- old-translations/de/quick-start.md | 2 +- old-translations/es/installation.md | 4 +-- old-translations/es/quick-start.md | 2 +- old-translations/fi/quick-start.md | 2 +- old-translations/fr/installation.md | 6 ++-- old-translations/fr/quick-start.md | 2 +- old-translations/hu/installation.md | 4 +-- old-translations/hu/quick-start.md | 2 +- old-translations/ja/installation.md | 4 +-- old-translations/ja/quick-start.md | 2 +- old-translations/nl/quick-start.md | 2 +- old-translations/ru/quick-start.md | 2 +- old-translations/zh-CN/installation.md | 4 +-- old-translations/zh-CN/quick-start.md | 2 +- old-translations/zh-TW/installation.md | 4 +-- old-translations/zh-TW/quick-start.md | 2 +- .../docs/de/guides/deploy/google-cloud.mdx | 6 ++-- .../docs/de/guides/markdown-content.mdx | 2 +- src/content/docs/de/guides/testing.mdx | 8 ++--- src/content/docs/de/install/auto.mdx | 2 +- .../de/reference/configuration-reference.mdx | 4 +-- src/content/docs/en/guides/cms/contentful.mdx | 2 +- src/content/docs/en/guides/cms/keystatic.mdx | 2 +- src/content/docs/en/guides/cms/kontent-ai.mdx | 2 +- src/content/docs/en/guides/cms/payload.mdx | 10 +++--- src/content/docs/en/guides/testing.mdx | 12 +++---- src/content/docs/en/install/auto.mdx | 2 +- src/content/docs/en/recipes/docker.mdx | 12 +++---- .../docs/en/reference/cli-reference.mdx | 2 +- src/content/docs/en/tutorial/1-setup/2.mdx | 2 +- src/content/docs/en/tutorial/2-pages/1.mdx | 2 +- src/content/docs/en/tutorial/2-pages/2.mdx | 4 +-- src/content/docs/en/tutorial/4-layouts/2.mdx | 2 +- src/content/docs/en/tutorial/4-layouts/3.mdx | 4 +-- .../docs/en/tutorial/5-astro-api/1.mdx | 2 +- .../docs/en/tutorial/5-astro-api/2.mdx | 4 +-- .../docs/en/tutorial/5-astro-api/3.mdx | 6 ++-- .../docs/en/tutorial/5-astro-api/4.mdx | 2 +- src/content/docs/en/tutorial/6-islands/2.mdx | 4 +-- src/content/docs/es/guides/cms/contentful.mdx | 2 +- src/content/docs/es/guides/cms/kontent-ai.mdx | 2 +- src/content/docs/es/guides/cms/payload.mdx | 10 +++--- src/content/docs/es/guides/testing.mdx | 12 +++---- src/content/docs/es/install/auto.mdx | 2 +- src/content/docs/es/recipes/docker.mdx | 12 +++---- .../docs/es/reference/cli-reference.mdx | 2 +- src/content/docs/es/tutorial/1-setup/2.mdx | 2 +- src/content/docs/es/tutorial/2-pages/1.mdx | 2 +- src/content/docs/es/tutorial/2-pages/2.mdx | 4 +-- src/content/docs/es/tutorial/4-layouts/2.mdx | 2 +- src/content/docs/es/tutorial/4-layouts/3.mdx | 4 +-- .../docs/es/tutorial/5-astro-api/1.mdx | 2 +- .../docs/es/tutorial/5-astro-api/2.mdx | 4 +-- .../docs/es/tutorial/5-astro-api/3.mdx | 6 ++-- .../docs/es/tutorial/5-astro-api/4.mdx | 2 +- src/content/docs/es/tutorial/6-islands/2.mdx | 4 +-- src/content/docs/fr/guides/testing.mdx | 8 ++--- src/content/docs/fr/install/auto.mdx | 2 +- .../docs/fr/reference/cli-reference.mdx | 2 +- .../fr/reference/configuration-reference.mdx | 4 +-- src/content/docs/it/install/auto.mdx | 2 +- src/content/docs/ja/guides/cms/contentful.mdx | 2 +- src/content/docs/ja/guides/testing.mdx | 8 ++--- src/content/docs/ja/install/auto.mdx | 2 +- .../docs/ja/reference/cli-reference.mdx | 2 +- .../ja/reference/configuration-reference.mdx | 4 +-- src/content/docs/ja/tutorial/1-setup/2.mdx | 4 +-- src/content/docs/ja/tutorial/2-pages/1.mdx | 2 +- src/content/docs/ja/tutorial/2-pages/2.mdx | 4 +-- src/content/docs/ja/tutorial/4-layouts/2.mdx | 2 +- src/content/docs/ja/tutorial/4-layouts/3.mdx | 4 +-- .../docs/ja/tutorial/5-astro-api/1.mdx | 2 +- .../docs/ja/tutorial/5-astro-api/2.mdx | 4 +-- .../docs/ja/tutorial/5-astro-api/3.mdx | 6 ++-- .../docs/ja/tutorial/5-astro-api/4.mdx | 2 +- src/content/docs/ja/tutorial/6-islands/2.mdx | 4 +-- src/content/docs/ko/install/auto.mdx | 2 +- src/content/docs/pl/install/auto.mdx | 2 +- src/content/docs/pt-br/guides/testing.mdx | 12 +++---- src/content/docs/pt-br/install/auto.mdx | 2 +- .../docs/pt-br/reference/cli-reference.mdx | 2 +- src/content/docs/pt-br/tutorial/1-setup/2.mdx | 2 +- src/content/docs/pt-br/tutorial/2-pages/1.mdx | 2 +- src/content/docs/pt-br/tutorial/2-pages/2.mdx | 4 +-- .../docs/pt-br/tutorial/4-layouts/2.mdx | 2 +- .../docs/pt-br/tutorial/4-layouts/3.mdx | 4 +-- .../docs/pt-br/tutorial/5-astro-api/1.mdx | 2 +- .../docs/pt-br/tutorial/5-astro-api/2.mdx | 4 +-- .../docs/pt-br/tutorial/5-astro-api/3.mdx | 6 ++-- .../docs/pt-br/tutorial/5-astro-api/4.mdx | 2 +- .../docs/pt-br/tutorial/6-islands/2.mdx | 4 +-- .../docs/ru/guides/markdown-content.mdx | 2 +- src/content/docs/ru/guides/testing.mdx | 8 ++--- src/content/docs/ru/install/auto.mdx | 2 +- src/content/docs/ru/tutorial/1-setup/2.mdx | 4 +-- src/content/docs/ru/tutorial/2-pages/1.mdx | 2 +- src/content/docs/ru/tutorial/2-pages/2.mdx | 4 +-- src/content/docs/ru/tutorial/4-layouts/2.mdx | 2 +- src/content/docs/ru/tutorial/4-layouts/3.mdx | 4 +-- .../docs/ru/tutorial/5-astro-api/1.mdx | 2 +- .../docs/ru/tutorial/5-astro-api/2.mdx | 4 +-- .../docs/ru/tutorial/5-astro-api/3.mdx | 6 ++-- .../docs/ru/tutorial/5-astro-api/4.mdx | 2 +- src/content/docs/ru/tutorial/6-islands/2.mdx | 4 +-- .../docs/zh-cn/guides/cms/contentful.mdx | 4 +-- .../docs/zh-cn/guides/cms/kontent-ai.mdx | 4 +-- src/content/docs/zh-cn/guides/cms/payload.mdx | 10 +++--- src/content/docs/zh-cn/guides/testing.mdx | 36 +++++++++++++++---- src/content/docs/zh-cn/install/auto.mdx | 2 +- src/content/docs/zh-cn/recipes/docker.mdx | 12 +++---- .../docs/zh-cn/reference/cli-reference.mdx | 2 +- src/content/docs/zh-cn/tutorial/1-setup/2.mdx | 2 +- src/content/docs/zh-cn/tutorial/2-pages/1.mdx | 2 +- src/content/docs/zh-cn/tutorial/2-pages/2.mdx | 4 +-- .../docs/zh-cn/tutorial/4-layouts/2.mdx | 4 +-- .../docs/zh-cn/tutorial/4-layouts/3.mdx | 4 +-- .../docs/zh-cn/tutorial/5-astro-api/1.mdx | 2 +- .../docs/zh-cn/tutorial/5-astro-api/2.mdx | 4 +-- .../docs/zh-cn/tutorial/5-astro-api/3.mdx | 6 ++-- .../docs/zh-cn/tutorial/5-astro-api/4.mdx | 2 +- .../docs/zh-cn/tutorial/6-islands/2.mdx | 4 +-- src/content/docs/zh-tw/install/auto.mdx | 2 +- 123 files changed, 260 insertions(+), 236 deletions(-) diff --git a/old-translations/de/installation.md b/old-translations/de/installation.md index 78cc8b147dd9a..ac3640b433ec9 100644 --- a/old-translations/de/installation.md +++ b/old-translations/de/installation.md @@ -99,7 +99,7 @@ Jetzt kannst du den Platzhalter im Abschnitt "scripts" deiner `package.json`-Dat } ``` -Der Befehl [`dev`](#start-astro) startet den Astro Entwicklungsserver auf `http://localhost:3000`. Sobald dein Projekt fertig ist, gibt der Befehl [`build`](#build-astro) dein Projekt in das Verzeichnis `dist/` aus. [Lese mehr über das Veröffentlichen von Astro-Builds](/guides/deploy). +Der Befehl [`dev`](#start-astro) startet den Astro Entwicklungsserver auf `http://localhost:4321`. Sobald dein Projekt fertig ist, gibt der Befehl [`build`](#build-astro) dein Projekt in das Verzeichnis `dist/` aus. [Lese mehr über das Veröffentlichen von Astro-Builds](/guides/deploy). ### Erstelle deine erste Seite @@ -145,7 +145,7 @@ Du kannst weitere Seiten im Verzeichnis `src/pages` erstellen - Astro verwendet npm run dev ``` -Astro wird von nun an deine Anwendung unter `http://localhost:3000` bereitstellen. Wenn du diese URL in deinem Browser öffnest, solltest du Astros "Hello, World" sehen. +Astro wird von nun an deine Anwendung unter `http://localhost:4321` bereitstellen. Wenn du diese URL in deinem Browser öffnest, solltest du Astros "Hello, World" sehen. Falls du deinen Entwicklungsfortschritt im lokalen Netzwerk teilen oder die Anwendung von einem Telefon aus testen möchtest, füge einfach die folgende Option in `astro.config.mjs` hinzu: diff --git a/old-translations/de/quick-start.md b/old-translations/de/quick-start.md index bde325c103c4b..afac060b67ac1 100644 --- a/old-translations/de/quick-start.md +++ b/old-translations/de/quick-start.md @@ -41,7 +41,7 @@ In deinem Projektverzeichnis führe den folgenden Befehl in deinem Terminal aus: npm run dev ``` -Astro wird von nun an deine Anwendung unter [http://localhost:3000](http://localhost:3000) bereitstellen. Wenn du diese URL in deinem Browser öffnest, solltest du Astros "Hello, World" sehen. +Astro wird von nun an deine Anwendung unter [http://localhost:4321](http://localhost:4321) bereitstellen. Wenn du diese URL in deinem Browser öffnest, solltest du Astros "Hello, World" sehen. Der Server wird nun auf alle Änderungen in deinem `src/`-Verzeichnisch lauschen, sodass du deine Anwendung nicht nach jeder Änderung neu starten musst. diff --git a/old-translations/es/installation.md b/old-translations/es/installation.md index 3dbf57b7485b5..fbb81e4fb1340 100644 --- a/old-translations/es/installation.md +++ b/old-translations/es/installation.md @@ -98,7 +98,7 @@ Ahora, puedes reemplazar la sección de "scripts" del archivo `package.json` que } ``` -El comando [`dev`](#start-astro) inicia el servidor de desarrollo de Astro en `http://localhost:3000`. Una vez que tu proyecto esté listo, el comando [`build`](#build-astro) genera tu proyecto en el directorio `dist/`. [Lee más sobre cómo desplegar Astro en la guía de despliegue](/es/guides/deploy). +El comando [`dev`](#start-astro) inicia el servidor de desarrollo de Astro en `http://localhost:4321`. Una vez que tu proyecto esté listo, el comando [`build`](#build-astro) genera tu proyecto en el directorio `dist/`. [Lee más sobre cómo desplegar Astro en la guía de despliegue](/es/guides/deploy). ### Crear tu primera página @@ -144,7 +144,7 @@ Puedes crear más páginas en el directorio `src/pages` y Astro utilizará los a npm run dev ``` -Ahora Astro estará corriendo tu aplicación en `http://localhost:3000`. Al abrir esta URL en tu navegador, deberías ver el “¡Hola, Mundo!” de Astro. +Ahora Astro estará corriendo tu aplicación en `http://localhost:4321`. Al abrir esta URL en tu navegador, deberías ver el “¡Hola, Mundo!” de Astro. Si necesitas compartir tu progreso de desarrollo en la red local o revisar la aplicación desde un teléfono, sólo agrega la siguiente opción en `astro.config.mjs`: diff --git a/old-translations/es/quick-start.md b/old-translations/es/quick-start.md index cbb2863b6c842..3b662de4e8598 100644 --- a/old-translations/es/quick-start.md +++ b/old-translations/es/quick-start.md @@ -39,7 +39,7 @@ Dentro del directorio de tu proyecto, ingresa el siguiente comando en la termina npm run dev ``` -Astro comenzará a correr en el servidor de desarrollo en [http://localhost:3000](http://localhost:3000). Abre esta ubicación en tu navegador, deberías ver la página de "¡Hola Mundo!" de Astro. +Astro comenzará a correr en el servidor de desarrollo en [http://localhost:4321](http://localhost:4321). Abre esta ubicación en tu navegador, deberías ver la página de "¡Hola Mundo!" de Astro. El servidor escuchará los cambios en vivo de los archivos en tu carpeta `src/`, así que, no necesitarás reiniciar la aplicación cuando hagas cambios durante el desarrollo. diff --git a/old-translations/fi/quick-start.md b/old-translations/fi/quick-start.md index 237bfb5ff0d64..08d2eb8b84a57 100644 --- a/old-translations/fi/quick-start.md +++ b/old-translations/fi/quick-start.md @@ -37,7 +37,7 @@ Siirry takaisin komentoriville ja suorita tämä komento projektin hakemistossa: npm run dev ``` -Tämän jälkeen ohjelma on käynnissä osoitteessa [http://localhost:3000](http://localhost:3000). Avaa tämä URL selaimessa nähdäksesi viestin "Moi maailma!", jonka kopioimme edellisessä vaiheessa. +Tämän jälkeen ohjelma on käynnissä osoitteessa [http://localhost:4321](http://localhost:4321). Avaa tämä URL selaimessa nähdäksesi viestin "Moi maailma!", jonka kopioimme edellisessä vaiheessa. Astro seuraa muutoksia `src/`-hakemiston sisällä, joten ohjelmaa ei tarvitse käynnistää uudelleen tehdessäsi muutoksia siihen koodatessasi. diff --git a/old-translations/fr/installation.md b/old-translations/fr/installation.md index fe01ea1ba594e..cddb4a2251b78 100644 --- a/old-translations/fr/installation.md +++ b/old-translations/fr/installation.md @@ -96,7 +96,7 @@ Vous pouvez aussi remplacer la section "scripts" du fichier `package.json` avec } ``` -La commande [`dev`](#start-astro) démarre le serveur de développement Astro à l'adresse `http://localhost:3000`. Une fois votre projet terminé, la commande [`build`](#build-astro) produit votre site dans le dossier `dist/`. [En savoir plus sur le déploiement d'un site développé avec Astro.](/guides/deploy) +La commande [`dev`](#start-astro) démarre le serveur de développement Astro à l'adresse `http://localhost:4321`. Une fois votre projet terminé, la commande [`build`](#build-astro) produit votre site dans le dossier `dist/`. [En savoir plus sur le déploiement d'un site développé avec Astro.](/guides/deploy) ### Créer une première page @@ -133,7 +133,7 @@ console.log('Coucou dans le terminal') Vous venez de lire un exemple de syntaxe des composants Astro, inspirée par le HTML et le JSX. -Vous pouvez continuer à ajouter des fichiers dans le dossier `src/pages`, et Astro se servira du nom du fichier pour ajouter des pages à votre site. Par exemple, si vous ajoutez une page `src/pages/a-propos.astro` (par exemple en reprenant le code ci-dessus), Astro va générer une nouvelle page à l'adresse `http://localhost:3000/a-propos`. +Vous pouvez continuer à ajouter des fichiers dans le dossier `src/pages`, et Astro se servira du nom du fichier pour ajouter des pages à votre site. Par exemple, si vous ajoutez une page `src/pages/a-propos.astro` (par exemple en reprenant le code ci-dessus), Astro va générer une nouvelle page à l'adresse `http://localhost:4321/a-propos`. ## [Démarrer Astro](#démarrer-astro) @@ -141,7 +141,7 @@ Vous pouvez continuer à ajouter des fichiers dans le dossier `src/pages`, et As npm run dev ``` -Astro va démarrer votre site à l'adresse `http://localhost:3000`. En ouvrant cette URL dans votre navigateur, vous devriez voir s'afficher "Hello, World", ou bien la page créée précédemment. +Astro va démarrer votre site à l'adresse `http://localhost:4321`. En ouvrant cette URL dans votre navigateur, vous devriez voir s'afficher "Hello, World", ou bien la page créée précédemment. ## [Compiler avec Astro](#compiler-avec-astro) diff --git a/old-translations/fr/quick-start.md b/old-translations/fr/quick-start.md index 2391b3303951d..aee90f214aab0 100644 --- a/old-translations/fr/quick-start.md +++ b/old-translations/fr/quick-start.md @@ -35,7 +35,7 @@ Depuis un terminal ouvert dans votre projet, entrez la commande suivante : npm run dev ``` -Astro va lancer un serveur local sur [http://localhost:3000](http://localhost:3000). Ouvrez cette adresse dans votre navigateur, et vous devriez voir le "Hello, World" d'Astro. +Astro va lancer un serveur local sur [http://localhost:4321](http://localhost:4321). Ouvrez cette adresse dans votre navigateur, et vous devriez voir le "Hello, World" d'Astro. Vous n'avez jamais besoin de redémarrer Astro : à chaque modification dans le dossier `src/`, le serveur recompile votre site. diff --git a/old-translations/hu/installation.md b/old-translations/hu/installation.md index 99e91fe659b85..dc7d4e2a85427 100644 --- a/old-translations/hu/installation.md +++ b/old-translations/hu/installation.md @@ -99,7 +99,7 @@ Következő lépésben lecserélheted az ideiglenes "scripts" szekciót a `packa } ``` -A [`dev`](#start-astro) parancs elindítja az Astro Fejlesztői Szerverét a `http://localhost:3000` címen. Amikor a projekted elkészül a [`build`](#build-astro) parancs megépíti a projektedet a `dist/` mappába. [Az Astro kiépítéséről többet olvashatsz a Kiépítési útmutatónkban.](/en/guides/deploy) +A [`dev`](#start-astro) parancs elindítja az Astro Fejlesztői Szerverét a `http://localhost:4321` címen. Amikor a projekted elkészül a [`build`](#build-astro) parancs megépíti a projektedet a `dist/` mappába. [Az Astro kiépítéséről többet olvashatsz a Kiépítési útmutatónkban.](/en/guides/deploy) ### Hozd létre az első oldalad @@ -145,7 +145,7 @@ Létrehozhatsz több oldalt az `src/pages` mappában. Az Astro a fájlok nevét npm run dev ``` -Az Astro mostantól a `http://localhost:3000` címen futtatja az alkalmazásodat. Ha megnyitod ezt a linket a böngésződben, látnod kell az Astro "Hello, World" mintaprogramját. +Az Astro mostantól a `http://localhost:4321` címen futtatja az alkalmazásodat. Ha megnyitod ezt a linket a böngésződben, látnod kell az Astro "Hello, World" mintaprogramját. Ha meg kell osztanod a helyi hálózaton, hogy hogyan halad a fejlesztés, vagy megnéznéd a mobilodról, csak add hozzá a következő opciót az `astro.config.mjs` fájlhoz: diff --git a/old-translations/hu/quick-start.md b/old-translations/hu/quick-start.md index a9e30aad7576b..4237bea9b9fbb 100644 --- a/old-translations/hu/quick-start.md +++ b/old-translations/hu/quick-start.md @@ -40,7 +40,7 @@ A projekted mappájában, írd be az alábbi parancsot a terminálba: npm run dev ``` -Mostantól az Astro alkalmazásod elérhető a [http://localhost:3000](http://localhost:3000) címen. Ha megnyitod ezt a címet a böngésződben, látnod kell az Astro saját "Hello, World"-jét. +Mostantól az Astro alkalmazásod elérhető a [http://localhost:4321](http://localhost:4321) címen. Ha megnyitod ezt a címet a böngésződben, látnod kell az Astro saját "Hello, World"-jét. A szerver autómatikusan figyeli az `src/` mappában történő változásokat, így nem kell újraindítanod az alkalmazást ha bármit módosítasz. diff --git a/old-translations/ja/installation.md b/old-translations/ja/installation.md index 205c5398535f9..a81558b3122d0 100644 --- a/old-translations/ja/installation.md +++ b/old-translations/ja/installation.md @@ -100,7 +100,7 @@ npm install astro } ``` -[`dev`](#astro-の開始)コマンドは、Astro Dev Server（`http://localhost:3000`）を起動します。プロジェクトの準備ができたら、[`build`](#astro-のビルド)コマンドで、プロジェクトを`dist/`ディレクトリに出力します。Astro のデプロイについては、[デプロイガイド](/guides/deploy)をご覧ください。 +[`dev`](#astro-の開始)コマンドは、Astro Dev Server（`http://localhost:4321`）を起動します。プロジェクトの準備ができたら、[`build`](#astro-のビルド)コマンドで、プロジェクトを`dist/`ディレクトリに出力します。Astro のデプロイについては、[デプロイガイド](/guides/deploy)をご覧ください。 ### 最初のページを作る @@ -146,7 +146,7 @@ console.log('これはターミナルに表示されます') npm run dev ``` -これで Astro は、`http://localhost:3000`でアプリケーションのサービスを開始します。この URL をブラウザで開くと、Astro の「Hello, World」が表示されるはずです。 +これで Astro は、`http://localhost:4321`でアプリケーションのサービスを開始します。この URL をブラウザで開くと、Astro の「Hello, World」が表示されるはずです。 開発の進捗状況をローカルネットワーク上で共有したり、スマートフォンからアプリを確認したければ、以下の オプションを`astro.config.mjs`に追加してください。 diff --git a/old-translations/ja/quick-start.md b/old-translations/ja/quick-start.md index 06e0d61f20aa0..1f5d86c4e1919 100644 --- a/old-translations/ja/quick-start.md +++ b/old-translations/ja/quick-start.md @@ -37,7 +37,7 @@ npm run build npm run dev ``` -これで Astro は、 [http://localhost:3000](http://localhost:3000)で、アプリケーションの提供を開始します。この URL をブラウザで開くと、Astro の「Hello, World」が表示されるはずです。 +これで Astro は、 [http://localhost:4321](http://localhost:4321)で、アプリケーションの提供を開始します。この URL をブラウザで開くと、Astro の「Hello, World」が表示されるはずです。 サーバーは、あなたの`src/`ディレクトリにあるファイルの変更を常に監視しているので、開発中に変更してもアプリケーションを再起動する必要はありません。 diff --git a/old-translations/nl/quick-start.md b/old-translations/nl/quick-start.md index 0c1aa791e8f48..279792de30cd8 100644 --- a/old-translations/nl/quick-start.md +++ b/old-translations/nl/quick-start.md @@ -38,7 +38,7 @@ Navigeer naar je project folder, en voer het volgende commando uit in je termina npm run dev ``` -Astro start nu je applicatie op, je kan deze vinden op [http://localhost:3000](http://localhost:3000). Als je deze URL opent zie je de Astro versie van "Hello, World". +Astro start nu je applicatie op, je kan deze vinden op [http://localhost:4321](http://localhost:4321). Als je deze URL opent zie je de Astro versie van "Hello, World". De server luistert naar live wijzifgingen in je `src/` folder, dus je hoeft de applicatie niet handmatig te herstarten bij elke wijziging tijdens de ontwikkeling. diff --git a/old-translations/ru/quick-start.md b/old-translations/ru/quick-start.md index 8718058a9b497..3ac324e88be4b 100644 --- a/old-translations/ru/quick-start.md +++ b/old-translations/ru/quick-start.md @@ -37,7 +37,7 @@ npm run build npm run dev ``` -Astro запустит сервер для разработки по адресу [http://localhost:3000](http://localhost:3000). При открытии этого URL в вашем браузере, вы должны увидеть "Hello, World" от Astro. +Astro запустит сервер для разработки по адресу [http://localhost:4321](http://localhost:4321). При открытии этого URL в вашем браузере, вы должны увидеть "Hello, World" от Astro. Сервер будет следить за изменениями в директории `src/`, значит вам не нужно будет перезапускать сервер каждый раз после внесения изменений. diff --git a/old-translations/zh-CN/installation.md b/old-translations/zh-CN/installation.md index 80ffbe335187c..bfe6e5ffe3983 100644 --- a/old-translations/zh-CN/installation.md +++ b/old-translations/zh-CN/installation.md @@ -102,7 +102,7 @@ npm install astro } ``` -[`dev`](#start-dev) 命令在 `http://localhost:3000` 上启动 Astro 开发服务器。一旦你的项目准备好了。 +[`dev`](#start-dev) 命令在 `http://localhost:4321` 上启动 Astro 开发服务器。一旦你的项目准备好了。 [`build`](#build-astro)命令将你的项目输出到 `dist/` 目录。[在部署指南中阅读更多关于部署 Astro 的内容。](/guides/deploy) @@ -149,7 +149,7 @@ console.log('See me in the Terminal') npm run dev ``` -Astro 会开启预览服务器，地址为 [http://localhost:3000](http://localhost:3000)， +Astro 会开启预览服务器，地址为 [http://localhost:4321](http://localhost:4321)， 在浏览器打开这个网址，就会看到 Astro 的 HelloWorld 页面 服务器会实时监听 'src/' 目录下的文件改动，所以在开发过程的支持热更新，修改程序后，无需重启。 diff --git a/old-translations/zh-CN/quick-start.md b/old-translations/zh-CN/quick-start.md index 1a94d74581842..0df701509c0ad 100644 --- a/old-translations/zh-CN/quick-start.md +++ b/old-translations/zh-CN/quick-start.md @@ -35,7 +35,7 @@ npm run build npm run dev ``` -Astro 会开启预览服务器，地址为 [http://localhost:3000](http://localhost:3000)， +Astro 会开启预览服务器，地址为 [http://localhost:4321](http://localhost:4321)， 在浏览器打开这个网址，就会看到 Astro 的 HelloWorld 页面 服务器会实时监听 'src/' 目录下的文件改动，所以在开发过程的支持热更新，修改程序后，无需重启。 diff --git a/old-translations/zh-TW/installation.md b/old-translations/zh-TW/installation.md index ff3d1bb410100..dde217ea07d98 100644 --- a/old-translations/zh-TW/installation.md +++ b/old-translations/zh-TW/installation.md @@ -98,7 +98,7 @@ npm install astro } ``` -[`dev`](#start-astro) 指令在 `http://localhost:3000` 啟動 Astro 開發伺服器。一但專案已經準備好，[`build`](#build-astro) 指令將專案輸出至 `dist/` 資料夾。[在「部署指南」深入閱讀部署 Astro](/guides/deploy)。 +[`dev`](#start-astro) 指令在 `http://localhost:4321` 啟動 Astro 開發伺服器。一但專案已經準備好，[`build`](#build-astro) 指令將專案輸出至 `dist/` 資料夾。[在「部署指南」深入閱讀部署 Astro](/guides/deploy)。 ### 建立第一個頁面 @@ -144,7 +144,7 @@ console.log('See me in the Terminal') npm run dev ``` -Astro 會為應用程式打開 `http://localhost:3000` 的伺服器。在瀏覽器開啟網址，就會看到 Astro 的「Hello World」。 +Astro 會為應用程式打開 `http://localhost:4321` 的伺服器。在瀏覽器開啟網址，就會看到 Astro 的「Hello World」。 ## [Build Astro](#build-astro) diff --git a/old-translations/zh-TW/quick-start.md b/old-translations/zh-TW/quick-start.md index 5eeff6e625dbc..d6c072b7a6041 100644 --- a/old-translations/zh-TW/quick-start.md +++ b/old-translations/zh-TW/quick-start.md @@ -35,7 +35,7 @@ npm run build npm run dev ``` -現在，Astro 就會開啟應用程式的伺服器，位置是 [http://localhost:3000](http://localhost:3000)。在瀏覽器打開這網址，就會看到 Astro 的 「Hello, World」。 +現在，Astro 就會開啟應用程式的伺服器，位置是 [http://localhost:4321](http://localhost:4321)。在瀏覽器打開這網址，就會看到 Astro 的 「Hello, World」。 伺服器會即時監聽 `src/` 資料夾的檔案異動，所以在開發過程的更新毋需重新啟動應用程式。 diff --git a/src/content/docs/de/guides/deploy/google-cloud.mdx b/src/content/docs/de/guides/deploy/google-cloud.mdx index ab39084fbc61b..e861bd6e75b4a 100644 --- a/src/content/docs/de/guides/deploy/google-cloud.mdx +++ b/src/content/docs/de/guides/deploy/google-cloud.mdx @@ -69,7 +69,7 @@ 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 `3000` bereit. +Das folgende Dockerfile erstellt deine Website und stellt sie mit Node.js (SSR-Adapter) auf Port `4321` bereit. ```docker title="Dockerfile" FROM node:lts AS runtime @@ -81,8 +81,8 @@ RUN npm install RUN npm run build ENV HOST=0.0.0.0 -ENV PORT=3000 -EXPOSE 3000 +ENV PORT=4321 +EXPOSE 4321 CMD node ./dist/server/entry.mjs ``` diff --git a/src/content/docs/de/guides/markdown-content.mdx b/src/content/docs/de/guides/markdown-content.mdx index 91748fa192b88..954bd30eeb6c9 100644 --- a/src/content/docs/de/guides/markdown-content.mdx +++ b/src/content/docs/de/guides/markdown-content.mdx @@ -13,7 +13,7 @@ Astro behandelt jede `.md`-Datei innerhalb des Verzeichnisses `/src/pages` als e ### Einfaches Beispiel -Der einfachste Einstieg in die Verwendung von Markdown mit Astro besteht darin, die Datei `src/pages/index.md` als Startseiten-Route für dein Projekt zu erstellen. Kopiere dann den untenstehenden Beispielinhalt in die Datei und sieh dir den gerenderten HTML-Code auf der Startseite deines Projekts an. Du findest sie normalerweise unter [http://localhost:3000/](http://localhost:3000/). +Der einfachste Einstieg in die Verwendung von Markdown mit Astro besteht darin, die Datei `src/pages/index.md` als Startseiten-Route für dein Projekt zu erstellen. Kopiere dann den untenstehenden Beispielinhalt in die Datei und sieh dir den gerenderten HTML-Code auf der Startseite deines Projekts an. Du findest sie normalerweise unter [http://localhost:4321/](http://localhost:4321/). ```markdown --- diff --git a/src/content/docs/de/guides/testing.mdx b/src/content/docs/de/guides/testing.mdx index fc6e1c9df9541..70c9b824e948f 100644 --- a/src/content/docs/de/guides/testing.mdx +++ b/src/content/docs/de/guides/testing.mdx @@ -57,14 +57,14 @@ Alternativ kannst du Playwright in deinem Astro-Projekt mit dem von dir gewählt ```jsx title="src/test/index.spec.ts" "Astro ist fantastisch!" test('Metadaten sind korrekt', async ({ page }) => { - await page.goto("http://localhost:3000/"); + await page.goto("http://localhost:4321/"); await expect(page).toHaveTitle('Astro ist fantastisch!'); }); ``` :::tip[Eine Basis-URL setzen] -Du kannst [`"baseURL": "http://localhost:3000"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) in der `playwright.config.ts`-Konfigurationsdatei setzen, um `page.goto("/")` anstatt `page.goto("http://localhost:3000/")` als komfortablere URL zu nutzen. +Du kannst [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) in der `playwright.config.ts`-Konfigurationsdatei setzen, um `page.goto("/")` anstatt `page.goto("http://localhost:4321/")` als komfortablere URL zu nutzen. ::: ### Deine Playwright-Tests ausführen @@ -100,12 +100,12 @@ import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { webServer: { command: 'yarn preview', - url: 'http://localhost:3000/app/', + url: 'http://localhost:4321/app/', timeout: 120 * 1000, reuseExistingServer: !process.env.CI, }, use: { - baseURL: 'http://localhost:3000/app/', + baseURL: 'http://localhost:4321/app/', }, }; export default config; diff --git a/src/content/docs/de/install/auto.mdx b/src/content/docs/de/install/auto.mdx index dedc071526567..f4394a513e0b9 100644 --- a/src/content/docs/de/install/auto.mdx +++ b/src/content/docs/de/install/auto.mdx @@ -62,7 +62,7 @@ yarn run dev pnpm run dev ``` -Wenn alles gut geht, sollte dein Astro-Projekt jetzt unter [http://localhost:3000/](http://localhost:3000/) aufrufbar sein! +Wenn alles gut geht, sollte dein Astro-Projekt jetzt unter [http://localhost:4321/](http://localhost:4321/) aufrufbar sein! Astro überwacht zur Laufzeit alle Dateien im Verzeichnis `src/`, sodass du den Server nicht neu starten musst, wenn du während der Entwicklung Änderungen vornimmst. diff --git a/src/content/docs/de/reference/configuration-reference.mdx b/src/content/docs/de/reference/configuration-reference.mdx index 163ec637358a6..5a125469a8356 100644 --- a/src/content/docs/de/reference/configuration-reference.mdx +++ b/src/content/docs/de/reference/configuration-reference.mdx @@ -200,7 +200,7 @@ Um unterschiedliche Konfigurationen auf der Grundlage des ausgeführten Befehls { // Beispiel: Verwende die Funktionssyntax, um Anpassungen // auf der Grundlage des ausgeführten Befehls vorzunehmen - server: (command) => ({ port: command === 'dev' ? 3000 : 4000 }) + server: (command) => ({ port: command === 'dev' ? 4321 : 4000 }) } ``` @@ -224,7 +224,7 @@ Legt fest, unter welchen Netzwerk-IP-Adressen der Entwicklungsserver erreichbar

**Typ:** `number`
-**Standard:** `3000` +**Standard:** `4321`

Legt fest, unter welchem Port der Entwicklungsserver erreichbar sein soll. diff --git a/src/content/docs/en/guides/cms/contentful.mdx b/src/content/docs/en/guides/cms/contentful.mdx index 877b8f8e21885..491f8c5b2058c 100644 --- a/src/content/docs/en/guides/cms/contentful.mdx +++ b/src/content/docs/en/guides/cms/contentful.mdx @@ -424,7 +424,7 @@ const { content, title, date } = Astro.props; ``` -Navigate to http://localhost:3000/ and click on one of your posts to make sure your dynamic route is working! +Navigate to http://localhost:4321/ and click on one of your posts to make sure your dynamic route is working! #### Server side rendering diff --git a/src/content/docs/en/guides/cms/keystatic.mdx b/src/content/docs/en/guides/cms/keystatic.mdx index b08e9e13cd9df..ceab6817dc87d 100644 --- a/src/content/docs/en/guides/cms/keystatic.mdx +++ b/src/content/docs/en/guides/cms/keystatic.mdx @@ -161,7 +161,7 @@ The following steps will create a dashboard that lives in `src/pages/keystatic/` npm run dev ``` -5. Visit `http://127.0.0.1:3000/keystatic` in the browser to see the Keystatic Admin UI running. +5. Visit `http://127.0.0.1:4321/keystatic` in the browser to see the Keystatic Admin UI running. ## Creating a new post diff --git a/src/content/docs/en/guides/cms/kontent-ai.mdx b/src/content/docs/en/guides/cms/kontent-ai.mdx index 695dfd649cf75..ee79374e5457c 100644 --- a/src/content/docs/en/guides/cms/kontent-ai.mdx +++ b/src/content/docs/en/guides/cms/kontent-ai.mdx @@ -438,7 +438,7 @@ const blogPost: BlogPost = Astro.props.blogPost ``` -Navigate to your Astro preview (http://localhost:3000/blog/astro-is-amazing/ by default) to see the rendered blog post. +Navigate to your Astro preview (http://localhost:4321/blog/astro-is-amazing/ by default) to see the rendered blog post. #### Server-side rendering diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index a4bce5e1dbc2d..47d05fdd89fb0 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -73,7 +73,7 @@ import Users from "./collections/Users"; import Posts from "./collections/Posts"; export default buildConfig({ - serverURL: "http://localhost:3000", + serverURL: "http://localhost:4321", admin: { user: Users.slug, }, @@ -91,7 +91,7 @@ This will make a new collection called "Posts" appear in your PayloadCMS Dashboa 2. Enter the "Posts" collection and create a new post. After saving it, you will notice the API URL appear in the bottom right corner. -3. With the dev server running, open `http://localhost:3000/api/posts` in your browser. You should see a JSON file containing the post you have created as an object. +3. With the dev server running, open `http://localhost:4321/api/posts` in your browser. You should see a JSON file containing the post you have created as an object. ```json { @@ -118,7 +118,7 @@ This will make a new collection called "Posts" appear in your PayloadCMS Dashboa ``` :::tip -By default, both Astro and PayloadCMS will use port 3000. You might want to change the PayloadCMS port in the `src/server.ts` file. Don't forget to update the `serverURL` in `src/payload.config.ts` as well. +By default, both Astro and PayloadCMS will use port 4321. You might want to change the PayloadCMS port in the `src/server.ts` file. Don't forget to update the `serverURL` in `src/payload.config.ts` as well. ::: ### Fetching Data @@ -133,7 +133,7 @@ For example, to display a list of post titles and their content: --- import HomeLayout from "../layouts/HomeLayout.astro"; -const res = await fetch("https://localhost:5000/api/posts") // https://localhost:3000/api/posts by default +const res = await fetch("http://localhost:5000/api/posts") // http://localhost:4321/api/posts by default const posts = await res.json() --- @@ -161,7 +161,7 @@ Fetching via the API returns an array of objects (posts) that include, among oth --- import HomeLayout from "../layouts/HomeLayout.astro"; -const res = await fetch("http://localhost:5000/api/posts") // https://localhost:3000/api/posts by default +const res = await fetch("http://localhost:5000/api/posts") // http://localhost:4321/api/posts by default const posts = await res.json() --- diff --git a/src/content/docs/en/guides/testing.mdx b/src/content/docs/en/guides/testing.mdx index 41e35e1b3ba12..d35311b10c67e 100644 --- a/src/content/docs/en/guides/testing.mdx +++ b/src/content/docs/en/guides/testing.mdx @@ -80,7 +80,7 @@ export default defineConfig({ ```js title="cypress/e2e/index.cy.js" it('titles are correct', () => { - const page = cy.visit('http://localhost:3000'); + const page = cy.visit('http://localhost:4321'); page.get('title').should('have.text', 'Astro is awesome!') page.get('h1').should('have.text', 'Hello world from Astro'); @@ -88,7 +88,7 @@ export default defineConfig({ ``` :::tip[set a baseUrl] - You can set [`"baseUrl": "http://localhost:3000"`](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Step-3-Configure-Cypress) in the `cypress.config.js` configuration file to use `cy.visit("/")` instead of `cy.visit("http://localhost:3000/")` for a more convenient URL. + You can set [`"baseUrl": "http://localhost:4321"`](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Step-3-Configure-Cypress) in the `cypress.config.js` configuration file to use `cy.visit("/")` instead of `cy.visit("http://localhost:4321/")` for a more convenient URL. ::: ### Running your Cypress tests @@ -192,14 +192,14 @@ Alternatively, you can install Playwright within your Astro project using the pa import { test, expect } from '@playwright/test'; test('meta is correct', async ({ page }) => { - await page.goto("http://localhost:3000/"); + await page.goto("http://localhost:4321/"); await expect(page).toHaveTitle('Astro is awesome!'); }); ``` :::tip[set a baseurl] - You can set [`"baseURL": "http://localhost:3000"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) in the `playwright.config.ts` configuration file to use `page.goto("/")` instead of `page.goto("http://localhost:3000/")` for a more convenient URL. + You can set [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) in the `playwright.config.ts` configuration file to use `page.goto("/")` instead of `page.goto("http://localhost:4321/")` for a more convenient URL. ::: ### Running your Playwright tests @@ -237,12 +237,12 @@ Here is an example of the configuration and commands required when using npm: export default defineConfig({ webServer: { command: 'npm run preview', - url: 'http://localhost:3000/', + url: 'http://localhost:4321/', timeout: 120 * 1000, reuseExistingServer: !process.env.CI, }, use: { - baseURL: 'http://localhost:3000/', + baseURL: 'http://localhost:4321/', }, }); ``` diff --git a/src/content/docs/en/install/auto.mdx b/src/content/docs/en/install/auto.mdx index 1f196f7d2056b..18dbb26d3eb55 100644 --- a/src/content/docs/en/install/auto.mdx +++ b/src/content/docs/en/install/auto.mdx @@ -81,7 +81,7 @@ Every starter template comes with a pre-configured script that will run `astro d -If all goes well, Astro should now be serving your project on [http://localhost:3000/](http://localhost:3000/)! +If all goes well, Astro should now be serving your project on [http://localhost:4321/](http://localhost:4321/)! Astro will listen for live file changes in your `src/` directory, so you will not need to restart the server as you make changes during development. diff --git a/src/content/docs/en/recipes/docker.mdx b/src/content/docs/en/recipes/docker.mdx index 3c4c09ceafbb2..325843d751b08 100644 --- a/src/content/docs/en/recipes/docker.mdx +++ b/src/content/docs/en/recipes/docker.mdx @@ -22,7 +22,7 @@ If you're using another package manager than npm, you'll need to adjust the comm ### SSR -This Dockerfile will build your site and serve it using Node.js on port `3000` and therefore requires the [Node adapter](/en/guides/integrations-guide/node/) installed in your Astro project. +This Dockerfile will build your site and serve it using Node.js on port `4321` and therefore requires the [Node adapter](/en/guides/integrations-guide/node/) installed in your Astro project. ```docker title="Dockerfile" FROM node:lts AS runtime @@ -34,8 +34,8 @@ RUN npm install RUN npm run build ENV HOST=0.0.0.0 -ENV PORT=3000 -EXPOSE 3000 +ENV PORT=4321 +EXPOSE 4321 CMD node ./dist/server/entry.mjs ``` @@ -155,8 +155,8 @@ COPY --from=prod-deps /app/node_modules ./node_modules COPY --from=build /app/dist ./dist ENV HOST=0.0.0.0 -ENV PORT=3000 -EXPOSE 3000 +ENV PORT=4321 +EXPOSE 4321 CMD node ./dist/server/entry.mjs ``` @@ -172,7 +172,7 @@ This will output an image, which you can run locally or deploy to a platform of 2. To run your image as a local container, use the following command. -Replace `` with an open port on your machine. Replace `` with the port exposed by your Docker container (`3000`, `80`, or `8080` in the above examples.) +Replace `` with an open port on your machine. Replace `` with the port exposed by your Docker container (`4321`, `80`, or `8080` in the above examples.) ```bash docker run -p : diff --git a/src/content/docs/en/reference/cli-reference.mdx b/src/content/docs/en/reference/cli-reference.mdx index 146982a266b6f..df3c887d90a10 100644 --- a/src/content/docs/en/reference/cli-reference.mdx +++ b/src/content/docs/en/reference/cli-reference.mdx @@ -200,7 +200,7 @@ Use these flags to customize the behavior of the Astro dev server. For flags sha #### `--port ` -Specifies which port to run on. Defaults to `3000`. +Specifies which port to run on. Defaults to `4321`. #### `--host [optional host address]` diff --git a/src/content/docs/en/tutorial/1-setup/2.mdx b/src/content/docs/en/tutorial/1-setup/2.mdx index c6b210851a4e4..43a8caff4893a 100644 --- a/src/content/docs/en/tutorial/1-setup/2.mdx +++ b/src/content/docs/en/tutorial/1-setup/2.mdx @@ -120,7 +120,7 @@ Your project files contain all the code necessary to display an Astro website, b 1. Click on the `localhost` link in your terminal window to see a live preview of your new Astro website! - (Astro uses `http://localhost:3000` by default if port 3000 is available.) + (Astro uses `http://localhost:4322` by default if port `4321` is available.) Here's what the Astro "Empty Project" starter website should look like in the browser preview: diff --git a/src/content/docs/en/tutorial/2-pages/1.mdx b/src/content/docs/en/tutorial/2-pages/1.mdx index 38bc26b04b7e7..9c416d298fb87 100644 --- a/src/content/docs/en/tutorial/2-pages/1.mdx +++ b/src/content/docs/en/tutorial/2-pages/1.mdx @@ -32,7 +32,7 @@ Now that you know that `.astro` files are responsible for pages on your website, Your editor might show a solid white circle on the tab label for this file. This means that the file is not yet saved. Under the File menu in VS Code, enable "Auto Save" and you should no longer need to save any files manually. ::: -4. Add `/about` to the end of your website preview's URL in the address bar and check that you can see a page load there. (e.g. `http://localhost:3000/about`) +4. Add `/about` to the end of your website preview's URL in the address bar and check that you can see a page load there. (e.g. `http://localhost:4321/about`) Right now, your "About" page should look exactly the same as the first page, but we're going to change that! diff --git a/src/content/docs/en/tutorial/2-pages/2.mdx b/src/content/docs/en/tutorial/2-pages/2.mdx index 9dc6ff717519b..010a5f79d55d7 100644 --- a/src/content/docs/en/tutorial/2-pages/2.mdx +++ b/src/content/docs/en/tutorial/2-pages/2.mdx @@ -30,7 +30,7 @@ Now that you have built pages using `.astro` files, let's make some blog posts u 2. Add a new (empty) file `post-1.md` inside your new `/posts/` folder. -3. Look for this page in your browser preview by adding `/posts/post-1` to the end of your existing preview URL. (e.g. `localhost:3000/posts/post-1`) +3. Look for this page in your browser preview by adding `/posts/post-1` to the end of your existing preview URL. (e.g. `http://localhost:4321/posts/post-1`) 4. Change the browser preview URL to view `/posts/post-2` instead. (This is a page you have not yet created.) @@ -70,7 +70,7 @@ Now that you have built pages using `.astro` files, let's make some blog posts u I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come. ``` -2. Check your browser preview again at `localhost:3000/posts/post-1`. You should now see content on this page. +2. Check your browser preview again at `http://localhost:4321/posts/post-1`. You should now see content on this page. 3. Use your browser's Dev Tools to inspect this page. Notice that although you have not typed any HTML elements, your Markdown has been converted to HTML. You can see elements such as headings, paragraphs, and list items. diff --git a/src/content/docs/en/tutorial/4-layouts/2.mdx b/src/content/docs/en/tutorial/4-layouts/2.mdx index c3c6714b59e57..fd6aadb8bc8ef 100644 --- a/src/content/docs/en/tutorial/4-layouts/2.mdx +++ b/src/content/docs/en/tutorial/4-layouts/2.mdx @@ -55,7 +55,7 @@ When you include the `layout` frontmatter property in an `.md` file, all of your --- ``` -4. Check your browser preview again at `localhost:3000/posts/post-1` and notice what the layout has added to your page. +4. Check your browser preview again at `http://localhost:4321/posts/post-1` and notice what the layout has added to your page. 5. Add the same layout property to your two other blog posts `post-2.md` and `post-3.md`. Verify in your browser that your layout is also applied to these posts. diff --git a/src/content/docs/en/tutorial/4-layouts/3.mdx b/src/content/docs/en/tutorial/4-layouts/3.mdx index 273013338a3a3..3d4f6061f8b9c 100644 --- a/src/content/docs/en/tutorial/4-layouts/3.mdx +++ b/src/content/docs/en/tutorial/4-layouts/3.mdx @@ -45,7 +45,7 @@ You already have a `BaseLayout.astro` for defining the overall layout of your pa ``` -2. Check your browser preview at `localhost:3000/posts/post-1`. Now you should see content rendered by: +2. Check your browser preview at `http://localhost:4321/posts/post-1`. Now you should see content rendered by: - Your **main page layout**, including your styles, navigation links, and social footer. - Your **blog post layout**, including frontmatter properties like the description, date, title, and image @@ -66,7 +66,7 @@ You already have a `BaseLayout.astro` for defining the overall layout of your pa ``` -5. Check your browser preview again at `localhost:3000/posts/post-1` and verify that this line is no longer displayed and that your title is only displayed once. Make any other adjustments necessary to ensure that you do not have any duplicated content. +5. Check your browser preview again at `http://localhost:4321/posts/post-1` and verify that this line is no longer displayed and that your title is only displayed once. Make any other adjustments necessary to ensure that you do not have any duplicated content. Make sure that: 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 b30b394113064..ccb08ad05fc71 100644 --- a/src/content/docs/en/tutorial/5-astro-api/1.mdx +++ b/src/content/docs/en/tutorial/5-astro-api/1.mdx @@ -82,7 +82,7 @@ Now that you have a few blog posts to link to, let's configure the Blog page to This post should show up with my other blog posts, because `Astro.glob()` is returning a list of all my posts in order to create my list. ``` -4. Revisit your blog page in your browser preview at `localhost:3000/blog` and look for an updated list with four items, including your new blog post! +4. Revisit your blog page in your browser preview at `http://localhost:4321/blog` and look for an updated list with four items, including your new blog post! 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 e051675e0fcb4..f820085869e17 100644 --- a/src/content/docs/en/tutorial/5-astro-api/2.mdx +++ b/src/content/docs/en/tutorial/5-astro-api/2.mdx @@ -55,7 +55,7 @@ You can create entire sets of pages dynamically using `.astro` files that export 3. Make sure that every blog post contains at least one tag, written as an array, e.g. `tags: ["blogging"]`. -4. Visit `localhost:3000/tags/astro` in your browser preview and you should see a page, generated dynamically from `[tag].astro`. Check that you also have pages created for each of your tags at `/tags/successes`, `/tags/community`, and `/tags/learning%20in%20public`, etc., or at each of your custom tags. You may need to first quit and restart the dev server to see these new pages. +4. Visit `http://localhost:4321/tags/astro` in your browser preview and you should see a page, generated dynamically from `[tag].astro`. Check that you also have pages created for each of your tags at `/tags/successes`, `/tags/community`, and `/tags/learning%20in%20public`, etc., or at each of your custom tags. You may need to first quit and restart the dev server to see these new pages. ## Use props in dynamic routes @@ -268,7 +268,7 @@ const { posts } = Astro.props; Now, you should be able to visit any of your tag pages in your browser preview. -Navigate to `localhost:3000/tags/community` and you should see a list of only your blog posts with the tag `community`. Similarly `localhost:3000/tags/learning%20in%20public` should display a list of the blog posts tagged `learning in public`. +Navigate to `http://localhost:4321/tags/community` and you should see a list of only your blog posts with the tag `community`. Similarly `http://localhost:4321/tags/learning%20in%20public` should display a list of the blog posts tagged `learning in public`. In the next section, you will create navigation links to these pages. 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 5752df8e371dd..0d1550567d63b 100644 --- a/src/content/docs/en/tutorial/5-astro-api/3.mdx +++ b/src/content/docs/en/tutorial/5-astro-api/3.mdx @@ -34,7 +34,7 @@ But, since you already have the directory `/tags/`, you can take advantage of an 1. Create a new file `index.astro` in the directory `src/pages/tags/`. -2. Navigate to `localhost:3000/tags` and verify that your site now contains a page at this URL. It will be empty, but it will exist. +2. Navigate to `http://localhost:4321/tags` and verify that your site now contains a page at this URL. It will be empty, but it will exist. 3. Create a minimal page at `src/pages/tags/index.astro` that uses your layout. You have done this before! @@ -196,7 +196,7 @@ Instead of creating items in an unordered list this time, create one `

` for e ``` -3. Check your browser preview at `localhost:3000/tags` to verify that you have some new styles and that each of the tags on the page has a working link to its own individual tag page. +3. Check your browser preview at `http://localhost:4321/tags` to verify that you have some new styles and that each of the tags on the page has a working link to its own individual tag page. ### Code Check-In @@ -239,7 +239,7 @@ const pageTitle = "Tag Index"; ## Add this page to your navigation -Right now, you can navigate to `localhost:3000/tags` and see this page. From this page, you can click on links to your individual tag pages. +Right now, you can navigate to `http://localhost:4321/tags` and see this page. From this page, you can click on links to your individual tag pages. But, you still need to make these pages discoverable from other pages on your website. diff --git a/src/content/docs/en/tutorial/5-astro-api/4.mdx b/src/content/docs/en/tutorial/5-astro-api/4.mdx index ffea42e081416..c3d1e41f5f2f7 100644 --- a/src/content/docs/en/tutorial/5-astro-api/4.mdx +++ b/src/content/docs/en/tutorial/5-astro-api/4.mdx @@ -115,7 +115,7 @@ Individuals can subscribe to your feed in a feed reader, and receive a notificat -4. Visit `localhost:3000/rss.xml` and verify that you can see (unformatted) text on the page with an `item` for each of your `.md` files. Each item should contain blog post information such as `title`, `url`, and `description`. +4. Visit `http://localhost:4321/rss.xml` and verify that you can see (unformatted) text on the page with an `item` for each of your `.md` files. Each item should contain blog post information such as `title`, `url`, and `description`. :::tip[view your rss feed in a reader] Download a feed reader, or sign up for an online feed reader service and subscribe to your site by adding your own Netlify URL. You can also share this link with others so they can subscribe to your posts, and be notified when a new one is published. diff --git a/src/content/docs/en/tutorial/6-islands/2.mdx b/src/content/docs/en/tutorial/6-islands/2.mdx index bedddf25c715b..2bea18e66d51d 100644 --- a/src/content/docs/en/tutorial/6-islands/2.mdx +++ b/src/content/docs/en/tutorial/6-islands/2.mdx @@ -68,7 +68,7 @@ Let's build a clickable icon to let your users toggle between light or dark mode ``` -3. Visit your browser preview at `localhost:3000` to see the icon now on all your pages. You can try clicking it, but you have not written a script to make it interactive yet. +3. Visit your browser preview at `http://localhost:4321` to see the icon now on all your pages. You can try clicking it, but you have not written a script to make it interactive yet. ## Add CSS styling for a dark theme @@ -133,7 +133,7 @@ To add interactivity to an Astro component, you can use a ` ``` -2. Check your browser preview at `localhost:3000` and click the theme icon. Verify that you can change between light and dark modes. +2. Check your browser preview at `http://localhost:4321` and click the theme icon. Verify that you can change between light and dark modes. diff --git a/src/content/docs/es/guides/cms/contentful.mdx b/src/content/docs/es/guides/cms/contentful.mdx index 0170918336e90..ac7f0153675a6 100644 --- a/src/content/docs/es/guides/cms/contentful.mdx +++ b/src/content/docs/es/guides/cms/contentful.mdx @@ -426,7 +426,7 @@ const { content, title, date } = Astro.props; ``` -Navega a http://localhost:3000/ y haz clic en uno de tus artículos para asegurarte de que tu ruta dinámica esté funcionando. +Navega a http://localhost:4321/ y haz clic en uno de tus artículos para asegurarte de que tu ruta dinámica esté funcionando. #### Renderizado del lado del servidor diff --git a/src/content/docs/es/guides/cms/kontent-ai.mdx b/src/content/docs/es/guides/cms/kontent-ai.mdx index f8b527eb5653e..d41f8fc310d82 100644 --- a/src/content/docs/es/guides/cms/kontent-ai.mdx +++ b/src/content/docs/es/guides/cms/kontent-ai.mdx @@ -441,7 +441,7 @@ const blogPost: BlogPost = Astro.props.blogPost ``` -Navega a tu vista previa de Astro (http://localhost:3000/blog/astro-is-amazing/ de forma predeterminada) para ver la entrada de blog renderizada. +Navega a tu vista previa de Astro (http://localhost:4321/blog/astro-is-amazing/ de forma predeterminada) para ver la entrada de blog renderizada. #### Renderizado del lado del servidor diff --git a/src/content/docs/es/guides/cms/payload.mdx b/src/content/docs/es/guides/cms/payload.mdx index 6ecd32b6e1a28..55b3deb48b069 100644 --- a/src/content/docs/es/guides/cms/payload.mdx +++ b/src/content/docs/es/guides/cms/payload.mdx @@ -73,7 +73,7 @@ import Users from "./collections/Users"; import Posts from "./collections/Posts"; export default buildConfig({ - serverURL: "http://localhost:3000", + serverURL: "http://localhost:4321", admin: { user: Users.slug, }, @@ -91,7 +91,7 @@ Esto hará que aparezca una nueva colección llamada "Posts" en tu panel de cont 2. Ingresa a la colección "Posts" y crea una nueva publicación. Después de guardarla, notarás que la URL de la API aparece en la esquina inferior derecha. -3. Con el servidor de desarrollo en ejecución, abre `http://localhost:3000/api/posts` en tu navegador. Deberías ver un archivo JSON que contiene la publicación que has creado como un objeto. +3. Con el servidor de desarrollo en ejecución, abre `http://localhost:4321/api/posts` en tu navegador. Deberías ver un archivo JSON que contiene la publicación que has creado como un objeto. ```json { @@ -118,7 +118,7 @@ Esto hará que aparezca una nueva colección llamada "Posts" en tu panel de cont ``` :::tip -Por defecto, tanto Astro como PayloadCMS utilizarán el puerto 3000. Es posible que desees cambiar el puerto de PayloadCMS en el archivo `src/server.ts`. No olvides actualizar el `serverURL` en `src/payload.config.ts` también. +Por defecto, tanto Astro como PayloadCMS utilizarán el puerto 4321. Es posible que desees cambiar el puerto de PayloadCMS en el archivo `src/server.ts`. No olvides actualizar el `serverURL` en `src/payload.config.ts` también. ::: ### Obteniendo los datos @@ -133,7 +133,7 @@ Por ejemplo, para mostrar una lista de títulos de publicaciones y su contenido: --- import HomeLayout from "../layouts/HomeLayout.astro"; -const res = await fetch("https://localhost:5000/api/posts") // https://localhost:3000/api/posts by default +const res = await fetch("http://localhost:5000/api/posts") // http://localhost:4321/api/posts by default const posts = await res.json() --- @@ -161,7 +161,7 @@ La búsqueda a través de la API devuelve un arreglo de objetos (publicaciones) --- import HomeLayout from "../layouts/HomeLayout.astro"; -const res = await fetch("http://localhost:5000/api/posts") // https://localhost:3000/api/posts by default +const res = await fetch("http://localhost:5000/api/posts") // http://localhost:4321/api/posts by default const posts = await res.json() --- diff --git a/src/content/docs/es/guides/testing.mdx b/src/content/docs/es/guides/testing.mdx index 5dd2793c92211..51d3f76023a20 100644 --- a/src/content/docs/es/guides/testing.mdx +++ b/src/content/docs/es/guides/testing.mdx @@ -79,14 +79,14 @@ export default defineConfig({ ```js title="cypress/e2e/index.cy.ts" it('los titulos son correctos', () => { - const page = cy.visit('http://localhost:3000'); + const page = cy.visit('http://localhost:4321'); page.get('title').should('have.text', '¡Astro es increíble!') page.get('h1').should('have.text', 'Hola mundo desde Astro'); }); ``` :::tip[establecer una url base] - Puedes establecer [`"baseUrl": "http://localhost:3000"`](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Step-3-Configure-Cypress) en el archivo de configuración `cypress.config.ts` para usar `cy.visit("/")` en lugar de `cy.visit("http://localhost:3000/")` para una URL más conveniente. + Puedes establecer [`"baseUrl": "http://localhost:4321"`](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Step-3-Configure-Cypress) en el archivo de configuración `cypress.config.ts` para usar `cy.visit("/")` en lugar de `cy.visit("http://localhost:4321/")` para una URL más conveniente. ::: ### Ejecutando tus tests de Cypress @@ -187,14 +187,14 @@ Alternativamente, puedes instalar Playwright dentro de tu proyecto de Astro usan import { test, expect } from '@playwright/test'; test('el titulo es correcto', async ({ page }) => { - await page.goto("http://localhost:3000/"); + await page.goto("http://localhost:4321/"); await expect(page).toHaveTitle('¡Astro es increíble!'); }); ``` :::tip[Establecer una url base] - Puedes establecer [`"baseURL": "http://localhost:3000"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) en el archivo de configuración `playwright.config.ts` para usar `page.goto("/")` en lugar de `page.goto("http://localhost:3000/")` para una URL más conveniente. + Puedes establecer [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) en el archivo de configuración `playwright.config.ts` para usar `page.goto("/")` en lugar de `page.goto("http://localhost:4321/")` para una URL más conveniente. ::: ### Ejecutar los tests con Playwright @@ -232,12 +232,12 @@ import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { webServer: { command: 'npm run preview', - url: 'http://localhost:3000/', + url: 'http://localhost:4321/', timeout: 120 * 1000, reuseExistingServer: !process.env.CI, }, use: { - baseURL: 'http://localhost:3000/', + baseURL: 'http://localhost:4321/', }, }; export default config; diff --git a/src/content/docs/es/install/auto.mdx b/src/content/docs/es/install/auto.mdx index 8bd42e2ef24ff..78035023d1ffb 100644 --- a/src/content/docs/es/install/auto.mdx +++ b/src/content/docs/es/install/auto.mdx @@ -80,7 +80,7 @@ Cada plantilla de inicio posee un script preconfigurado que ejecutará `astro de -¡Si todo marcha bien, Astro deberá servir tu proyecto localmente en [http://localhost:3000](http://localhost:3000)! +¡Si todo marcha bien, Astro deberá servir tu proyecto localmente en [http://localhost:4321](http://localhost:4321)! Astro escuchará cualquier cambio en la carpeta `src/` y actualizará automáticamente tu proyecto. De esta forma, no será necesario reiniciar el servidor local durante el desarrollo. diff --git a/src/content/docs/es/recipes/docker.mdx b/src/content/docs/es/recipes/docker.mdx index 3a96e9df99023..84cc043ffdd1d 100644 --- a/src/content/docs/es/recipes/docker.mdx +++ b/src/content/docs/es/recipes/docker.mdx @@ -22,7 +22,7 @@ Si estás usando otro gestor de paquetes que no sea npm, deberás ajustar los co ### SSR -Este Dockerfile construirá tu sitio y lo servirá utilizando Node.js en el puerto `3000`, por lo tanto, requiere tener instalado el [adaptador de Node](/es/guides/integrations-guide/node/) en tu proyecto de Astro. +Este Dockerfile construirá tu sitio y lo servirá utilizando Node.js en el puerto `4321`, por lo tanto, requiere tener instalado el [adaptador de Node](/es/guides/integrations-guide/node/) en tu proyecto de Astro. ```docker title="Dockerfile" FROM node:lts AS runtime @@ -34,8 +34,8 @@ RUN npm install RUN npm run build ENV HOST=0.0.0.0 -ENV PORT=3000 -EXPOSE 3000 +ENV PORT=4321 +EXPOSE 4321 CMD node ./dist/server/entry.mjs ``` @@ -149,8 +149,8 @@ FROM base AS runtime COPY --from=prod-deps /app/node_modules ./node_modules COPY --from=build /app/dist ./dist ENV HOST=0.0.0.0 -ENV PORT=3000 -EXPOSE 3000 +ENV PORT=4321 +EXPOSE 4321 CMD node ./dist/server/entry.mjs ``` @@ -166,7 +166,7 @@ Esto generará una imagen que podrás ejecutar localmente o implementar en una p 2. Para ejecutar tu imagen como un contenedor local, utiliza el siguiente comando. -Reemplaza `` con un puerto abierto en tu máquina. Reemplaza `` con el puerto expuesto por tu contenedor Docker (`3000`, `80` o `8080` en los ejemplos anteriores). +Reemplaza `` con un puerto abierto en tu máquina. Reemplaza `` con el puerto expuesto por tu contenedor Docker (`4321`, `80` o `8080` en los ejemplos anteriores). ```bash docker run -p : diff --git a/src/content/docs/es/reference/cli-reference.mdx b/src/content/docs/es/reference/cli-reference.mdx index 7c314d1c35b3b..20f3bf7a219ec 100644 --- a/src/content/docs/es/reference/cli-reference.mdx +++ b/src/content/docs/es/reference/cli-reference.mdx @@ -192,7 +192,7 @@ Usa estas flags para personalizar el comportamiento del servidor de desarrollo d #### `--port ` -Especifica en qué puerto se ejecuta el servidor. El valor predeterminado es `3000`. +Especifica en qué puerto se ejecuta el servidor. El valor predeterminado es `4321`. #### `--host [dirección de host opcional]` diff --git a/src/content/docs/es/tutorial/1-setup/2.mdx b/src/content/docs/es/tutorial/1-setup/2.mdx index 10853eabc9452..c4780203ab736 100644 --- a/src/content/docs/es/tutorial/1-setup/2.mdx +++ b/src/content/docs/es/tutorial/1-setup/2.mdx @@ -119,7 +119,7 @@ Tus archivos de proyecto contienen todo el código necesario para mostrar un sit 1. Haz clic en el enlace `localhost` en la terminal para ver una vista previa en directo de tu nuevo sitio web Astro. - (Astro utiliza `http://localhost:3000` por defecto si el puerto 3000 está disponible). + (Astro utiliza `http://localhost:4322` por defecto si el puerto `4321` está disponible). Este es el aspecto que debería tener el sitio web de inicio del "Proyecto vacío" de Astro en la vista previa del navegador: diff --git a/src/content/docs/es/tutorial/2-pages/1.mdx b/src/content/docs/es/tutorial/2-pages/1.mdx index 7b2aa5abe6e10..aaa2916fdceb0 100644 --- a/src/content/docs/es/tutorial/2-pages/1.mdx +++ b/src/content/docs/es/tutorial/2-pages/1.mdx @@ -32,7 +32,7 @@ Ahora que ya sabes que los archivos `.astro` son los responsables de las página Tu editor puede mostrar un círculo blanco sólido en la etiqueta de este archivo. Esto significa que el archivo aún no se ha guardado. En el menú Archivo de VS Code, activa la opción "Guardar automáticamente" y ya no tendrás que guardar ningún archivo manualmente. ::: -4. Añade `/about` al final de la URL de la vista previa de tu sitio web en la barra de direcciones y compruebe que puede ver una página cargada allí. (por ejemplo, `http://localhost:3000/about`) +4. Añade `/about` al final de la URL de la vista previa de tu sitio web en la barra de direcciones y compruebe que puede ver una página cargada allí. (por ejemplo, `http://localhost:4321/about`) Ahora mismo, tu página "Acerca de" debería tener exactamente el mismo aspecto que la primera página, pero vamos a cambiarlo. diff --git a/src/content/docs/es/tutorial/2-pages/2.mdx b/src/content/docs/es/tutorial/2-pages/2.mdx index d61ab57847276..3d414f1eb56e6 100644 --- a/src/content/docs/es/tutorial/2-pages/2.mdx +++ b/src/content/docs/es/tutorial/2-pages/2.mdx @@ -30,7 +30,7 @@ Ahora que ya has creado páginas con archivos `.astro`, vamos a crear algunos po 2. Añade un nuevo fichero (vacío) `post-1.md` dentro de tu nueva carpeta `/posts/`. -3. Busca esta página en la vista previa de tu navegador añadiendo `/posts/post-1` al final de tu URL de vista previa. (por ejemplo, `localhost:3000/posts/post-1`) +3. Busca esta página en la vista previa de tu navegador añadiendo `/posts/post-1` al final de tu URL de vista previa. (por ejemplo, `http://localhost:4321/posts/post-1`) 4. Cambia la URL de vista previa del navegador para ver `/posts/post-2` en tu lugar. (Se trata de una página que aún no ha sido creada). @@ -70,7 +70,7 @@ Ahora que ya has creado páginas con archivos `.astro`, vamos a crear algunos po Terminaré el tutorial de Astro, y luego seguiré añadiendo más posts. Mira este espacio para más por venir. ``` -2. Comprueba de nuevo la vista previa de tu navegador en `localhost:3000/posts/post-1`. Ahora deberías ver el contenido de esta página. +2. Comprueba de nuevo la vista previa de tu navegador en `http://localhost:4321/posts/post-1`. Ahora deberías ver el contenido de esta página. 3. Utiliza las herramientas de desarrollo de tu navegador para inspeccionar esta página. Observa que, aunque no has escrito ningún elemento HTML, tu Markdown se ha convertido a HTML. Puedes ver elementos como encabezados, párrafos y elementos de lista. diff --git a/src/content/docs/es/tutorial/4-layouts/2.mdx b/src/content/docs/es/tutorial/4-layouts/2.mdx index 10167b7904431..25c687a8a6fb1 100644 --- a/src/content/docs/es/tutorial/4-layouts/2.mdx +++ b/src/content/docs/es/tutorial/4-layouts/2.mdx @@ -55,7 +55,7 @@ Al incluir la propiedad frontmatter `layout` en un archivo `.md`, todos los valo --- ``` -4. Comprueba de nuevo la vista previa de tu navegador en `localhost:3000/posts/post-1` y observa lo que la plantilla ha añadido a tu página. +4. Comprueba de nuevo la vista previa de tu navegador en `http://localhost:4321/posts/post-1` y observa lo que la plantilla ha añadido a su página. 5. Añade la misma propiedad plantilla a tus otros dos post `post-2.md` y `post-3.md`. Comprueba en tu navegador que el plantilla también se aplica a estos post. diff --git a/src/content/docs/es/tutorial/4-layouts/3.mdx b/src/content/docs/es/tutorial/4-layouts/3.mdx index ec051eb345995..8a883085fb1ae 100644 --- a/src/content/docs/es/tutorial/4-layouts/3.mdx +++ b/src/content/docs/es/tutorial/4-layouts/3.mdx @@ -45,7 +45,7 @@ El `MarkdownPostLayout.astro` te proporciona algunas plantillas adicionales para ``` -2. Comprueba la vista previa de tu navegador en `localhost:3000/posts/post-1`. Ahora debería ver el contenido renderizado por: +2. Comprueba la vista previa de tu navegador en `http://localhost:4321/posts/post-1`. Ahora debería ver el contenido renderizado por: - Tu ** plantilla de página principal**, incluyendo tus estilos, enlaces de navegación y pie de página social. - Tu **plantilla de blog post**, incluyendo propiedades frontmatter como la descripción, fecha, título e imagen. @@ -66,7 +66,7 @@ El `MarkdownPostLayout.astro` te proporciona algunas plantillas adicionales para ``` -5. Comprueba de nuevo la vista previa de tu navegador en `localhost:3000/posts/post-1` y verifica que esta línea ya no aparece y que su título sólo se muestra una vez. Realice cualquier otro ajuste necesario para asegurarse de que no tiene contenido duplicado. +5. Comprueba de nuevo la vista previa de tu navegador en `http://localhost:4321/posts/post-1` y verifica que esta línea ya no aparece y que su título sólo se muestra una vez. Realice cualquier otro ajuste necesario para asegurarse de que no tiene contenido duplicado. Asegúrese de que: diff --git a/src/content/docs/es/tutorial/5-astro-api/1.mdx b/src/content/docs/es/tutorial/5-astro-api/1.mdx index 2d6cc574c2896..cc024a129ae10 100644 --- a/src/content/docs/es/tutorial/5-astro-api/1.mdx +++ b/src/content/docs/es/tutorial/5-astro-api/1.mdx @@ -82,7 +82,7 @@ Ahora que ya tienes unas cuantas entradas de blog a las que enlazar, vamos a con Esta entrada debería aparecer con las demás entradas de mi blog, porque `Astro.glob()` está devolviendo una lista de todas mis entradas para crear mi lista. ``` -4. Vuelve a visitar la página de tu blog en la vista previa de tu navegador en `localhost:3000/blog` y busca una lista actualizada con cuatro elementos, incluida tu nueva entrada de blog +4. Vuelve a visitar la página de tu blog en la vista previa de tu navegador en `http://localhost:4321/blog` y busca una lista actualizada con cuatro elementos, incluida tu nueva entrada de blog diff --git a/src/content/docs/es/tutorial/5-astro-api/2.mdx b/src/content/docs/es/tutorial/5-astro-api/2.mdx index f998db1c33459..f39d5b200b2c5 100644 --- a/src/content/docs/es/tutorial/5-astro-api/2.mdx +++ b/src/content/docs/es/tutorial/5-astro-api/2.mdx @@ -55,7 +55,7 @@ Puedes crear conjuntos completos de páginas de forma dinámica utilizando archi 3. Asegúrate de que cada entrada del blog contiene al menos una etiqueta, escrita como un array, por ejemplo `tags: ["bloguear"]`. -4. Visita `localhost:3000/tags/astro` en la vista previa de tu navegador y deberías ver una página, generada dinámicamente a partir de `[tag].astro`. Comprueba que también tienes páginas creadas para cada una de tus etiquetas en `/tags/éxitos`, `/tags/comunidad`, y `/tags/aprender%20en%20publico`, etc., o en cada una de tus etiquetas personalizadas. Es posible que primero tengas que salir y reiniciar el servidor de desarrollo para ver estas nuevas páginas. +4. Visita `http://localhost:4321/tags/astro` en la vista previa de tu navegador y deberías ver una página, generada dinámicamente a partir de `[tag].astro`. Comprueba que también tienes páginas creadas para cada una de tus etiquetas en `/tags/éxitos`, `/tags/comunidad`, y `/tags/aprender%20en%20publico`, etc., o en cada una de tus etiquetas personalizadas. Es posible que primero tengas que salir y reiniciar el servidor de desarrollo para ver estas nuevas páginas. ## Utilizar props en rutas dinámicas @@ -269,7 +269,7 @@ const { posts } = Astro.props; Ahora, deberías poder visitar cualquiera de tus páginas de etiquetas en la vista previa de tu navegador. -Navega a `localhost:3000/tags/community` y verás una lista sólo de las entradas de tu blog con la etiqueta `comunidad`. Del mismo modo, `localhost:3000/tags/learn%20in%20public` debería mostrar una lista de las entradas del blog con la etiqueta `aprender en público`. +Navega a `http://localhost:4321/tags/community` y verás una lista sólo de las entradas de tu blog con la etiqueta `comunidad`. Del mismo modo, `http://localhost:4321/tags/learn%20in%20public` debería mostrar una lista de las entradas del blog con la etiqueta `aprender en público`. En la siguiente sección, crearás enlaces de navegación a estas páginas. diff --git a/src/content/docs/es/tutorial/5-astro-api/3.mdx b/src/content/docs/es/tutorial/5-astro-api/3.mdx index ae020f19d33d1..313c2dde96291 100644 --- a/src/content/docs/es/tutorial/5-astro-api/3.mdx +++ b/src/content/docs/es/tutorial/5-astro-api/3.mdx @@ -34,7 +34,7 @@ Pero, como ya tienes el directorio `/tags/`, puedes aprovechar otro patrón de e 1. Crea un nuevo fichero `index.astro` en el directorio `src/pages/tags/`. -2. Vaya a `localhost:3000/tags` y compruebe que su sitio contiene ahora una página en esta URL. Estará vacía, pero existirá. +2. Vaya a `http://localhost:4321/tags` y compruebe que su sitio contiene ahora una página en esta URL. Estará vacía, pero existirá. 3. Crea una página mínima en `src/pages/tags/index.astro` que utilice tu diseño. Esto ya lo has hecho antes. @@ -196,7 +196,7 @@ En lugar de crear elementos en una lista desordenada esta vez, crea un `

` par ``` -3. Comprueba la vista previa de tu navegador en `localhost:3000/tags` para verificar que tienes algunos estilos nuevos y que cada una de las etiquetas de la página tiene un enlace que funciona a su propia página de etiquetas individual. +3. Comprueba la vista previa de tu navegador en `http://localhost:4321/tags` para verificar que tienes algunos estilos nuevos y que cada una de las etiquetas de la página tiene un enlace que funciona a su propia página de etiquetas individual. ### Registro de códigos @@ -240,7 +240,7 @@ const pageTitle = "Tag Index"; ## Añade esta página a tu navegación -En este momento, puedes navegar a `localhost:3000/tags` y ver esta página. Desde esta página, puedes hacer clic en los enlaces a sus páginas de etiquetas individuales. +En este momento, puedes navegar a `http://localhost:4321/tags` y ver esta página. Desde esta página, puedes hacer clic en los enlaces a sus páginas de etiquetas individuales. Pero aún así, debes hacer que estas páginas se puedan descubrir desde otras páginas de tu sitio web. diff --git a/src/content/docs/es/tutorial/5-astro-api/4.mdx b/src/content/docs/es/tutorial/5-astro-api/4.mdx index 8c0dfe10f1efc..529a29decc36a 100644 --- a/src/content/docs/es/tutorial/5-astro-api/4.mdx +++ b/src/content/docs/es/tutorial/5-astro-api/4.mdx @@ -115,7 +115,7 @@ Las personas pueden suscribirse a tu feed en un lector de feeds y recibir una no -4. Visita `localhost:3000/rss.xml` y comprueba que puedes ver texto (sin formato) en la página con un `item` para cada uno de tus archivos `.md`. Cada elemento debe contener información sobre la entrada del blog, como `title`, `url` y `description`. +4. Visita `http://localhost:4321/rss.xml` y comprueba que puedes ver texto (sin formato) en la página con un `item` para cada uno de tus archivos `.md`. Cada elemento debe contener información sobre la entrada del blog, como `title`, `url` y `description`. :::tip[ver tu feed rss en un lector] Descarga un lector de feeds, o regístrate en un servicio de lector de feeds online y suscríbete a tu sitio añadiendo tu propia URL de Netlify. También puedes compartir este enlace con otras personas para que puedan suscribirse a tus entradas y recibir una notificación cuando se publique una nueva. diff --git a/src/content/docs/es/tutorial/6-islands/2.mdx b/src/content/docs/es/tutorial/6-islands/2.mdx index 3c44d9f180ba6..e2b60031ea997 100644 --- a/src/content/docs/es/tutorial/6-islands/2.mdx +++ b/src/content/docs/es/tutorial/6-islands/2.mdx @@ -68,7 +68,7 @@ Vamos a crear un icono en el que se pueda hacer clic para que los usuarios pueda ``` -3. Visita la vista previa de tu navegador en `localhost:3000` para ver el icono ahora en todas tus páginas. Puedes intentar hacer clic en él, pero aún no has escrito un script para hacerlo interactivo. +3. Visita la vista previa de tu navegador en `http://localhost:4321` para ver el icono ahora en todas tus páginas. Puedes intentar hacer clic en él, pero aún no has escrito un script para hacerlo interactivo. ## Añadir estilos CSS para un tema oscuro @@ -133,7 +133,7 @@ Para añadir interactividad a un componente de Astro, puedes utilizar una etique ``` -2. Comprueba la vista previa de tu navegador en `localhost:3000` y haz clic en el icono del tema. Comprueba que puedes cambiar entre los modos claro y oscuro. +2. Comprueba la vista previa de tu navegador en `http://localhost:4321` y haz clic en el icono del tema. Comprueba que puedes cambiar entre los modos claro y oscuro. diff --git a/src/content/docs/fr/guides/testing.mdx b/src/content/docs/fr/guides/testing.mdx index a47c14e30082a..b549795c02408 100644 --- a/src/content/docs/fr/guides/testing.mdx +++ b/src/content/docs/fr/guides/testing.mdx @@ -66,14 +66,14 @@ Alternativement, vous pouvez aussi installer Playwright dans votre projet Astro import { test, expect } from '@playwright/test'; test('meta is correct', async ({ page }) => { - await page.goto("http://localhost:3000/"); + await page.goto("http://localhost:4321/"); await expect(page).toHaveTitle('Astro is awesome!'); }); ``` :::tip[Mettre un lien de base] -Pour un lien plus pratique, vous pouvez définir le [`"baseURL": "http://localhost:3000"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) dans le fichier de configuration `playwright.config.ts` pour pouvoir utiliser `page.goto("/")` au lieu de `page.goto("http://localhost:3000/")`. +Pour un lien plus pratique, vous pouvez définir le [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) dans le fichier de configuration `playwright.config.ts` pour pouvoir utiliser `page.goto("/")` au lieu de `page.goto("http://localhost:4321/")`. ::: ### Exécuter vos tests Playwright @@ -110,12 +110,12 @@ import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { webServer: { command: 'yarn preview', - url: 'http://localhost:3000/app/', + url: 'http://localhost:4321/app/', timeout: 120 * 1000, reuseExistingServer: !process.env.CI, }, use: { - baseURL: 'http://localhost:3000/app/', + baseURL: 'http://localhost:4321/app/', }, }; export default config; diff --git a/src/content/docs/fr/install/auto.mdx b/src/content/docs/fr/install/auto.mdx index 68d00016f2088..e0be382796370 100644 --- a/src/content/docs/fr/install/auto.mdx +++ b/src/content/docs/fr/install/auto.mdx @@ -81,7 +81,7 @@ Chaque modèle de départ est livré avec un script préconfiguré qui exécuter -Si tout se passe comme prévu, Astro devrait maintenant être en train de faire tourner votre projet à l'addresse [http://localhost:3000/](http://localhost:3000/) ! +Si tout se passe comme prévu, Astro devrait maintenant être en train de faire tourner votre projet à l'addresse [http://localhost:4321/](http://localhost:4321/) ! Astro va également suivre les modifications de fichiers dans le répertoire `src/`, vous n'aurez donc pas besoin de redémarrer le serveur à chaque fois que vous apporterez des modifications au cours du développement. diff --git a/src/content/docs/fr/reference/cli-reference.mdx b/src/content/docs/fr/reference/cli-reference.mdx index af03fb9cc7057..c7936552393ae 100644 --- a/src/content/docs/fr/reference/cli-reference.mdx +++ b/src/content/docs/fr/reference/cli-reference.mdx @@ -198,7 +198,7 @@ Utilisez ces options pour personnaliser le comportement du serveur de développe #### `--port ` -Spécifie le port sur lequel se démarrer. Il est défini par défaut sur `3000`. +Spécifie le port sur lequel se démarrer. Il est défini par défaut sur `4321`. #### `--host [adresse IP facultative]` diff --git a/src/content/docs/fr/reference/configuration-reference.mdx b/src/content/docs/fr/reference/configuration-reference.mdx index 3956b3e2aec4a..b6bfef03a53ca 100644 --- a/src/content/docs/fr/reference/configuration-reference.mdx +++ b/src/content/docs/fr/reference/configuration-reference.mdx @@ -251,7 +251,7 @@ Pour définir une configuration différente basée sur la commande run ("dev", " ```js { // Exemple: Utiliser la syntaxe de fonction pour personnaliser le serveur en fonction de la commande - server: (command) => ({ port: command === 'dev' ? 3000 : 4000 }) + server: (command) => ({ port: command === 'dev' ? 4321 : 4000 }) } ``` @@ -275,7 +275,7 @@ Définir les adresses IP réseau sur lesquelles le serveur doit écouter (c.-à-

**Type:** `number`
-**Par défaut:** `3000` +**Par défaut:** `4321`

Définissez le port sur lequel le serveur doit écouter. diff --git a/src/content/docs/it/install/auto.mdx b/src/content/docs/it/install/auto.mdx index 29f0978608ac2..ed2dc9309420c 100644 --- a/src/content/docs/it/install/auto.mdx +++ b/src/content/docs/it/install/auto.mdx @@ -79,7 +79,7 @@ Ogni template ufficiale arriva con uno script preconfigurato che eseguirà il co -Se tutto va bene, ora Astro dovrebbe servire il tuo progetto all'indirizzo [http://localhost:3000/](http://localhost:3000/)! +Se tutto va bene, ora Astro dovrebbe servire il tuo progetto all'indirizzo [http://localhost:4321/](http://localhost:4321/)! Astro osserverà ogni cambiamento ai file nella cartella `src/`, perciò non dovrai far ripartire il server ad ogni modifica nel progetto durante lo sviluppo. diff --git a/src/content/docs/ja/guides/cms/contentful.mdx b/src/content/docs/ja/guides/cms/contentful.mdx index 6b31ad2942705..b09f79a15b077 100644 --- a/src/content/docs/ja/guides/cms/contentful.mdx +++ b/src/content/docs/ja/guides/cms/contentful.mdx @@ -419,7 +419,7 @@ const { content, title, date } = Astro.props; ``` -http://localhost:3000/posts/astro-is-amazing/にアクセスすると動的ルーティングが動作していることが分かります！ +http://localhost:4321/posts/astro-is-amazing/にアクセスすると動的ルーティングが動作していることが分かります！ #### サーバーサイドレンダリング diff --git a/src/content/docs/ja/guides/testing.mdx b/src/content/docs/ja/guides/testing.mdx index 091d344e4b0f0..1c3820765cd4e 100644 --- a/src/content/docs/ja/guides/testing.mdx +++ b/src/content/docs/ja/guides/testing.mdx @@ -64,14 +64,14 @@ Playwrightは、モダンなウェブアプリケーションのためのE2Eテ ```jsx title="src/test/index.spec.ts" "Astro最高!" test('メタ情報が正しい', async ({ page }) => { - await page.goto("http://localhost:3000/"); + await page.goto("http://localhost:4321/"); await expect(page).toHaveTitle('Astro最高!'); }); ``` :::tip[baseurlをセットする] -設定ファイル`playwright.config.ts`で[`"baseURL": "http://localhost:3000"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url)と設定すると、`page.goto("http://localhost:3000/")`の代わりに、より便利なURLとして`page.goto("/")`を使用できます。 +設定ファイル`playwright.config.ts`で[`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url)と設定すると、`page.goto("http://localhost:4321/")`の代わりに、より便利なURLとして`page.goto("/")`を使用できます。 ::: ### Playwrightのテストを実行する @@ -108,12 +108,12 @@ import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { webServer: { command: 'yarn preview', - url: 'http://localhost:3000/app/', + url: 'http://localhost:4321/app/', timeout: 120 * 1000, reuseExistingServer: !process.env.CI, }, use: { - baseURL: 'http://localhost:3000/app/', + baseURL: 'http://localhost:4321/app/', }, }; export default config; diff --git a/src/content/docs/ja/install/auto.mdx b/src/content/docs/ja/install/auto.mdx index 0b70b09881346..622dd3a6ff8a0 100644 --- a/src/content/docs/ja/install/auto.mdx +++ b/src/content/docs/ja/install/auto.mdx @@ -81,7 +81,7 @@ Astroには、プロジェクト開発に必要なものをすべて備えた開 -うまくいけば、Astroは[http://localhost:3000](http://localhost:3000)でプロジェクトの開発サーバーを起動します！ +うまくいけば、Astroは[http://localhost:4321](http://localhost:4321)でプロジェクトの開発サーバーを起動します！ Astroは `src/` ディレクトリのファイル変更を自動検出するので、開発中に変更を加えてもサーバーを再起動する必要はありません。 diff --git a/src/content/docs/ja/reference/cli-reference.mdx b/src/content/docs/ja/reference/cli-reference.mdx index bc01b15c1849f..9bff36e9c6ad6 100644 --- a/src/content/docs/ja/reference/cli-reference.mdx +++ b/src/content/docs/ja/reference/cli-reference.mdx @@ -64,7 +64,7 @@ Astro の開発サーバーの動作をカスタマイズするためにこれ #### `--port <ポート番号>` -どのポートで起動するかを指定します。デフォルト値は `3000` です。 +どのポートで起動するかを指定します。デフォルト値は `4321` です。 #### `--host [任意のホストのアドレス]` diff --git a/src/content/docs/ja/reference/configuration-reference.mdx b/src/content/docs/ja/reference/configuration-reference.mdx index 87c28fdd1267f..679c98d6d0797 100644 --- a/src/content/docs/ja/reference/configuration-reference.mdx +++ b/src/content/docs/ja/reference/configuration-reference.mdx @@ -200,7 +200,7 @@ Astro がサイトを読み込むディレクトリを設定します。 ```js { // 例: コマンドに応じてカスタマイズするためには関数の構文を使用します - server: (command) => ({ port: command === 'dev' ? 3000 : 4000 }) + server: (command) => ({ port: command === 'dev' ? 4321 : 4000 }) } ``` @@ -223,7 +223,7 @@ Astro がサイトを読み込むディレクトリを設定します。

**データ型:** `number`
-**デフォルト値:** `3000` +**デフォルト値:** `4321`

ポートがリッスンするポートを設定する。 diff --git a/src/content/docs/ja/tutorial/1-setup/2.mdx b/src/content/docs/ja/tutorial/1-setup/2.mdx index 4bcf8f420b324..31c402e358617 100644 --- a/src/content/docs/ja/tutorial/1-setup/2.mdx +++ b/src/content/docs/ja/tutorial/1-setup/2.mdx @@ -117,9 +117,9 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; プロジェクトファイルには、Astroウェブサイトを表示するために必要なすべてのコードが含まれていますが、コードをウェブページとして表示するのはブラウザの役割です。 -1. ターミナルウィンドウの`localhost`リンクをクリックして、新しいAstroウェブサイトのライブプレビューを確認します！ +1. ターミナルウィンドウの`http://localhost`リンクをクリックして、新しいAstroウェブサイトのライブプレビューを確認します！ - （Astroは、ポート3000が使用可能な場合、デフォルトで`http://localhost:3000`を使用します。） + （Astroは、ポート4321が使用可能な場合、デフォルトで`http://localhost:4321`を使用します。） Astroの「Empty Project」スターターウェブサイトは、ブラウザ上では以下のように表示されます。 diff --git a/src/content/docs/ja/tutorial/2-pages/1.mdx b/src/content/docs/ja/tutorial/2-pages/1.mdx index e1c17f32c6331..27a57ec1a3097 100644 --- a/src/content/docs/ja/tutorial/2-pages/1.mdx +++ b/src/content/docs/ja/tutorial/2-pages/1.mdx @@ -32,7 +32,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; エディタ上で、このファイルのタブラベルに白丸が表示される場合があります。これは、ファイルがまだ保存されていないことを意味します。VS Codeのファイルメニューで「自動保存」を有効にすると、ファイルを手動で保存する必要はなくなります。 ::: -4. `/about`をアドレスバーのURL末尾に追加し、ページがロードされることを確認します。(たとえば`http://localhost:3000/about`) +4. `/about`をアドレスバーのURL末尾に追加し、ページがロードされることを確認します。(たとえば`http://localhost:4321/about`) 現在、「概要」ページは最初のページとまったく同じに見えるはずですが、これを変更していきます！ diff --git a/src/content/docs/ja/tutorial/2-pages/2.mdx b/src/content/docs/ja/tutorial/2-pages/2.mdx index cbf10848e13a2..7a224b4092978 100644 --- a/src/content/docs/ja/tutorial/2-pages/2.mdx +++ b/src/content/docs/ja/tutorial/2-pages/2.mdx @@ -30,7 +30,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 2. `post-1.md`という新しい（空の）ファイルを`/posts/`フォルダに追加します。 -3. プレビュー用URLの末尾に`/posts/post-1`を追加して、このページをブラウザで確認します。（たとえば`localhost:3000/posts/post-1`） +3. プレビュー用URLの末尾に`/posts/post-1`を追加して、このページをブラウザで確認します。（たとえば`http://localhost:4321/posts/post-1`） 4. ブラウザのプレビュー用URLを変更して、代わりに`/posts/post-2`を表示します。（これはまだ作成していないページです。） @@ -70,7 +70,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; Astroチュートリアルを終え、さらに記事を追加していきます。これからもこの場所をご覧ください。 ``` -2. `localhost:3000/posts/post-1`でブラウザのプレビューを再度確認します。今度はこのページにコンテンツが表示されるはずです。 +2. `http://localhost:4321/posts/post-1`でブラウザのプレビューを再度確認します。今度はこのページにコンテンツが表示されるはずです。 3. ブラウザの開発者ツールを使用して、このページを検査します。HTML要素を何も入力していないにもかかわらず、MarkdownがHTMLに変換されていることに注意してください。見出し、段落、リスト項目などの要素が表示されます。 diff --git a/src/content/docs/ja/tutorial/4-layouts/2.mdx b/src/content/docs/ja/tutorial/4-layouts/2.mdx index 92dea9dd9fb56..2ffcbf84a5312 100644 --- a/src/content/docs/ja/tutorial/4-layouts/2.mdx +++ b/src/content/docs/ja/tutorial/4-layouts/2.mdx @@ -53,7 +53,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; --- ``` -4. ブラウザのプレビューで`localhost:3000/posts/post-1`を再度確認し、レイアウトによりページに追加された内容を確認します。 +4. ブラウザのプレビューで`http://localhost:4321/posts/post-1`を再度確認し、レイアウトによりページに追加された内容を確認します。 5. 同じレイアウトプロパティを他のブログ記事`post-2.md`と`post-3.md`にも追加します。ブラウザで、これらの記事にもレイアウトが適用されていることを確認します。 diff --git a/src/content/docs/ja/tutorial/4-layouts/3.mdx b/src/content/docs/ja/tutorial/4-layouts/3.mdx index e87c228096c1c..27542e788d7b8 100644 --- a/src/content/docs/ja/tutorial/4-layouts/3.mdx +++ b/src/content/docs/ja/tutorial/4-layouts/3.mdx @@ -45,7 +45,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ``` -2. `localhost:3000/posts/post-1`をブラウザのプレビューで確認します。コンテンツは現在、以下によってレンダリングされています。 +2. `http://localhost:4321/posts/post-1`をブラウザのプレビューで確認します。コンテンツは現在、以下によってレンダリングされています。 - スタイル、ナビゲーションリンク、ソーシャルフッターを含む**メインのページレイアウト** - 記事の説明文、日付、タイトル、画像などのフロントマタープロパティを含む**ブログ記事レイアウト** @@ -66,7 +66,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ``` -5. `localhost:3000/posts/post-1`をブラウザのプレビューで再度確認し、上で削除した行が表示されなくなり、タイトルが1回だけ表示されていることを確認します。コンテンツが重複しないよう、必要に応じて他の調整をおこなってください。 +5. `http://localhost:4321/posts/post-1`をブラウザのプレビューで再度確認し、上で削除した行が表示されなくなり、タイトルが1回だけ表示されていることを確認します。コンテンツが重複しないよう、必要に応じて他の調整をおこなってください。 以下のことを確認してください。 diff --git a/src/content/docs/ja/tutorial/5-astro-api/1.mdx b/src/content/docs/ja/tutorial/5-astro-api/1.mdx index d248da635f371..3860ddf1cedd8 100644 --- a/src/content/docs/ja/tutorial/5-astro-api/1.mdx +++ b/src/content/docs/ja/tutorial/5-astro-api/1.mdx @@ -82,7 +82,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 記事のリストを作成するために`Astro.glob()`がすべての記事データのリストを返しているので、この記事は他のブログ記事と一緒に表示されるはずです。 ``` -4. ブラウザのプレビューで`localhost:3000/blog`のブログページに再度アクセスし、新しいブログ記事を含む4つの項目のリストへと更新されているのを確認してください。 +4. ブラウザのプレビューで`http://localhost:4321/blog`のブログページに再度アクセスし、新しいブログ記事を含む4つの項目のリストへと更新されているのを確認してください。 diff --git a/src/content/docs/ja/tutorial/5-astro-api/2.mdx b/src/content/docs/ja/tutorial/5-astro-api/2.mdx index fe3f8bfc448d9..49f060fdf9f13 100644 --- a/src/content/docs/ja/tutorial/5-astro-api/2.mdx +++ b/src/content/docs/ja/tutorial/5-astro-api/2.mdx @@ -55,7 +55,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 3. すべてのブログ記事が少なくとも1つのタグを含んでいることを確認します。`tags: ["ブログ"]`のように、配列として書く必要があります。 -4. ブラウザのプレビューで`localhost:3000/tags/astro`にアクセスすると、`[tag].astro`から動的に生成されたページが表示されるはずです。`/tags/成功`、`/tags/コミュニティ`、`/tags/公開学習`など、その他の各カスタムタグについてページが作成されていることも確認してください。これらの新しいページを表示するには、まず開発サーバーを終了して再起動する必要があるかもしれません。 +4. ブラウザのプレビューで`http://localhost:4321/tags/astro`にアクセスすると、`[tag].astro`から動的に生成されたページが表示されるはずです。`/tags/成功`、`/tags/コミュニティ`、`/tags/公開学習`など、その他の各カスタムタグについてページが作成されていることも確認してください。これらの新しいページを表示するには、まず開発サーバーを終了して再起動する必要があるかもしれません。 ## 動的ルートでpropsを使用する @@ -268,7 +268,7 @@ const { posts } = Astro.props; これで、ブラウザのプレビューで任意のタグページを表示できるようになりました。 -`localhost:3000/tags/コミュニティ`に移動すると、`コミュニティ`というタグが付いたブログ記事のリストが表示されるはずです。同様に、`localhost:3000/tags/公開学習`では、`公開学習`というタグが付いたブログ記事のリストが表示されます。 +`http://localhost:4321/tags/コミュニティ`に移動すると、`コミュニティ`というタグが付いたブログ記事のリストが表示されるはずです。同様に、`http://localhost:4321/tags/公開学習`では、`公開学習`というタグが付いたブログ記事のリストが表示されます。 次のセクションでは、これらのページへのナビゲーションリンクを作成します。 diff --git a/src/content/docs/ja/tutorial/5-astro-api/3.mdx b/src/content/docs/ja/tutorial/5-astro-api/3.mdx index 40e1d5dadb903..3a64e8ca4d039 100644 --- a/src/content/docs/ja/tutorial/5-astro-api/3.mdx +++ b/src/content/docs/ja/tutorial/5-astro-api/3.mdx @@ -34,7 +34,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 1. `src/pages/tags/`ディレクトリに新しいファイル`index.astro`を作成します。 -2. `localhost:3000/tags`に移動して、サイトにこのURLのページが含まれていることを確認します。中身は空ですが、ページは存在します。 +2. `http://localhost:4321/tags`に移動して、サイトにこのURLのページが含まれていることを確認します。中身は空ですが、ページは存在します。 3. `src/pages/tags/index.astro`に、レイアウトを使用して最小限のページを作成します。これは以前にもやりましたね！ @@ -195,7 +195,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ``` -3. ブラウザのプレビューで`localhost:3000/tags`を開き、新しいスタイルが適用されていること、ページの各タグがそれぞれのタグページへのリンクとして機能していることを確認します。 +3. ブラウザのプレビューで`http://localhost:4321/tags`を開き、新しいスタイルが適用されていること、ページの各タグがそれぞれのタグページへのリンクとして機能していることを確認します。 ### コードの確認 @@ -239,7 +239,7 @@ const pageTitle = "Tag Index"; ## このページをナビゲーションに追加する -今の時点で、`localhost:3000/tags`に移動してこのページを表示できます。そしてこのページから、個々のタグページへのリンクをクリックできます。 +今の時点で、`http://localhost:4321/tags`に移動してこのページを表示できます。そしてこのページから、個々のタグページへのリンクをクリックできます。 しかし、このページをウェブサイトの他のページから見つけられるようにする必要がまだあります。 diff --git a/src/content/docs/ja/tutorial/5-astro-api/4.mdx b/src/content/docs/ja/tutorial/5-astro-api/4.mdx index 45437fc3aafb8..9a7d554295a09 100644 --- a/src/content/docs/ja/tutorial/5-astro-api/4.mdx +++ b/src/content/docs/ja/tutorial/5-astro-api/4.mdx @@ -113,7 +113,7 @@ Astroは、ウェブサイトにRSSフィードを素早く追加するための -4. `localhost:3000/rss.xml`にアクセスし、各`.md`ファイルに対応する`item`を含んだページに（フォーマットされていない）テキストが表示されることを確認します。各アイテムには、`title`、`url`、`description`など、ブログ記事の情報が含まれているはずです。 +4. `http://localhost:4321/rss.xml`にアクセスし、各`.md`ファイルに対応する`item`を含んだページに（フォーマットされていない）テキストが表示されることを確認します。各アイテムには、`title`、`url`、`description`など、ブログ記事の情報が含まれているはずです。 :::tip[リーダーでrssフィードを表示する] フィードリーダーをダウンロードするか、オンラインのフィードリーダーサービスにサインアップし、自分のNetlify URLを追加してサイトを購読します。このリンクを他の人に共有すれば、記事に購読し、新しい記事が公開されたときに通知を受け取ってもらうようにもできます。 diff --git a/src/content/docs/ja/tutorial/6-islands/2.mdx b/src/content/docs/ja/tutorial/6-islands/2.mdx index e55c65d947db0..838c98d5b3847 100644 --- a/src/content/docs/ja/tutorial/6-islands/2.mdx +++ b/src/content/docs/ja/tutorial/6-islands/2.mdx @@ -68,7 +68,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ``` -3. ブラウザのプレビューで`localhost:3000`にアクセスし、すべてのページにアイコンが表示されていることを確認します。クリックしてみても構いませんが、まだこれをインタラクティブにするためのスクリプトを書いていないため、何も起こりません。 +3. ブラウザのプレビューで`http://localhost:4321`にアクセスし、すべてのページにアイコンが表示されていることを確認します。クリックしてみても構いませんが、まだこれをインタラクティブにするためのスクリプトを書いていないため、何も起こりません。 ## ダークテーマのためのCSSスタイルを追加する @@ -133,7 +133,7 @@ Astroコンポーネントにインタラクティブな機能を追加するに ``` -2. ブラウザのプレビューで`localhost:3000`を開き、テーマアイコンをクリックします。ライトモードとダークモードが切り替わることを確認してください。 +2. ブラウザのプレビューで`http://localhost:4321`を開き、テーマアイコンをクリックします。ライトモードとダークモードが切り替わることを確認してください。 diff --git a/src/content/docs/ko/install/auto.mdx b/src/content/docs/ko/install/auto.mdx index 8ab31077c4b5e..bf920f74bc969 100644 --- a/src/content/docs/ko/install/auto.mdx +++ b/src/content/docs/ko/install/auto.mdx @@ -81,7 +81,7 @@ Astro에는 프로젝트 개발에 필요한 모든 것을 갖춘 개발 서버 -서버가 정상적으로 실행됐다면 [http://localhost:3000/](http://localhost:3000/)에서 동작하는 프로젝트를 확인할 수 있습니다. +서버가 정상적으로 실행됐다면 [http://localhost:4321/](http://localhost:4321/)에서 동작하는 프로젝트를 확인할 수 있습니다. Astro는 `src/` 디렉터리 안의 변경 사항을 자동으로 감지합니다. 따라서 개발 중에 변경 사항을 적용하기 위해 서버를 재시작할 필요가 없습니다. diff --git a/src/content/docs/pl/install/auto.mdx b/src/content/docs/pl/install/auto.mdx index 5a45a10ffc1f2..5102f3308c630 100644 --- a/src/content/docs/pl/install/auto.mdx +++ b/src/content/docs/pl/install/auto.mdx @@ -81,7 +81,7 @@ Każdy szablon startowy posiada wstępnie skonfigurowany skrypt, który uruchomi -Jeśli wszystko pójdzie dobrze, Astro powinno teraz wyświetlać twój projekt na [http://localhost:3000/](http://localhost:3000/)! +Jeśli wszystko pójdzie dobrze, Astro powinno teraz wyświetlać twój projekt na [http://localhost:4321/](http://localhost:4321/)! Astro będzie nasłuchiwał zmian plików w katalogu `src/`, więc nie będziesz musiał restartować serwera, gdy będziesz dokonywał zmian podczas tworzenia. diff --git a/src/content/docs/pt-br/guides/testing.mdx b/src/content/docs/pt-br/guides/testing.mdx index 6ee001637da54..8ec8574886baa 100644 --- a/src/content/docs/pt-br/guides/testing.mdx +++ b/src/content/docs/pt-br/guides/testing.mdx @@ -80,7 +80,7 @@ export default defineConfig({ ```js title="cypress/e2e/index.cy.js" it('títulos estão corretos', () => { - const pagina = cy.visit('http://localhost:3000'); + const pagina = cy.visit('http://localhost:4321'); pagina.get('title').should('have.text', 'Astro e incrível!') pagina.get('h1').should('have.text', 'Olá mundo do Astro'); @@ -88,7 +88,7 @@ export default defineConfig({ ``` :::tip[defina um baseUrl] - Você pode definir [`"baseUrl": "http://localhost:3000"`](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Step-3-Configure-Cypress) no arquivo de configuração `cypress.config.js` para usar `cy.visit("/")` ao invés de `cy.visit("http://localhost:3000/")` para uma URL mais conveniente. + Você pode definir [`"baseUrl": "http://localhost:4321"`](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Step-3-Configure-Cypress) no arquivo de configuração `cypress.config.js` para usar `cy.visit("/")` ao invés de `cy.visit("http://localhost:4321/")` para uma URL mais conveniente. ::: ### Executando seus testes do Cypress @@ -192,14 +192,14 @@ Como alternativa, você pode instalar o Playwright dentro do seu projeto Astro u import { test, expect } from '@playwright/test'; test('metadados estão corretos', async ({ page }) => { - await page.goto("http://localhost:3000/"); + await page.goto("http://localhost:4321/"); await expect(page).toHaveTitle('Astro é incrível'); }); ``` :::tip[Defina a URL base] - Você pode definir [`"baseURL": "http://localhost:3000"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) no arquivo de configuração `playwright.config.ts` para usar `page.goto("/")` ao invés de `page.goto("http://localhost:3000/")` em prol de uma URL mais conveniente. + Você pode definir [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) no arquivo de configuração `playwright.config.ts` para usar `page.goto("/")` ao invés de `page.goto("http://localhost:4321/")` em prol de uma URL mais conveniente. ::: ### Executando seus testes com Playwright @@ -237,12 +237,12 @@ Aqui está um exemplo da configuração e dos comandos necessários utilizando o export default defineConfig({ webServer: { command: 'npm run preview', - url: 'http://localhost:3000/', + url: 'http://localhost:4321/', timeout: 120 * 1000, reuseExistingServer: !process.env.CI, }, use: { - baseURL: 'http://localhost:3000/', + baseURL: 'http://localhost:4321/', }, }); ``` diff --git a/src/content/docs/pt-br/install/auto.mdx b/src/content/docs/pt-br/install/auto.mdx index 1713104ea8123..c32d77c925412 100644 --- a/src/content/docs/pt-br/install/auto.mdx +++ b/src/content/docs/pt-br/install/auto.mdx @@ -82,7 +82,7 @@ Todos os templates iniciais vem com um script pré-configurado que irá executar -Se tudo ocorrer bem, Astro deve estar servindo o seu projeto em [http://localhost:3000](http://localhost:3000)! +Se tudo ocorrer bem, Astro deve estar servindo o seu projeto em [http://localhost:4321](http://localhost:4321)! Astro irá observar as mudanças em arquivos no seu diretório `src/`, logo você não precisa reiniciar o servidor enquanto faz mudanças durante o desenvolvimento. diff --git a/src/content/docs/pt-br/reference/cli-reference.mdx b/src/content/docs/pt-br/reference/cli-reference.mdx index 778abc1cd90b8..1879be57df06f 100644 --- a/src/content/docs/pt-br/reference/cli-reference.mdx +++ b/src/content/docs/pt-br/reference/cli-reference.mdx @@ -200,7 +200,7 @@ Utilize essas flags para customizar o comportamento do servidor de desenvolvimen #### `--port` -Especifica em qual porta executar. Por padrão, `3000`. +Especifica em qual porta executar. Por padrão, `4321`. #### `--host [endereço opcional do host]` diff --git a/src/content/docs/pt-br/tutorial/1-setup/2.mdx b/src/content/docs/pt-br/tutorial/1-setup/2.mdx index ca4a9b496f6fa..dfc3b5cbfe082 100644 --- a/src/content/docs/pt-br/tutorial/1-setup/2.mdx +++ b/src/content/docs/pt-br/tutorial/1-setup/2.mdx @@ -119,7 +119,7 @@ Seus arquivos do projeto contém todo o código necessário para mostrar um webs 1. Clique no link `localhost` em sua janela do terminal para ver uma pré-visualização ao vivo do seu novo website Astro! - (Astro utiliza `http://localhost:3000` por padrão se a porta 3000 estiver disponível.) + (Astro utiliza `http://localhost:4321` por padrão se a porta 4321 estiver disponível.) É assim que o template inicial "Empty Project" do Astro deve se parecer no seu navegador: diff --git a/src/content/docs/pt-br/tutorial/2-pages/1.mdx b/src/content/docs/pt-br/tutorial/2-pages/1.mdx index 95921f83052ab..abb3b02b3f5f5 100644 --- a/src/content/docs/pt-br/tutorial/2-pages/1.mdx +++ b/src/content/docs/pt-br/tutorial/2-pages/1.mdx @@ -32,7 +32,7 @@ Agora que você sabe que arquivos `.astro` são responsáveis pelas páginas no Seu editor pode mostrar um círculo branco sólido no rótulo da aba para esse arquivo. Isso significa que o arquivo ainda não foi salvo. Dentro do menu Arquivo no VS Code, habilite "Salvamento Automático" e você não deve mais precisar salvar quaisquer arquivos manualmente. ::: -4. Adicione `/sobre` ao final da URL de pré-visualização do seu website na barra de endereço e verifique que você consegue ver uma página carregando lá. (e.x. `http://localhost:3000/sobre`) +4. Adicione `/sobre` ao final da URL de pré-visualização do seu website na barra de endereço e verifique que você consegue ver uma página carregando lá. (e.x. `http://localhost:4321/sobre`) Agora, sua página "Sobre" deve se parecer exatamente com a primeira página, mas nós iremos mudar isso! diff --git a/src/content/docs/pt-br/tutorial/2-pages/2.mdx b/src/content/docs/pt-br/tutorial/2-pages/2.mdx index b86b1fa791656..312d8405bfcb6 100644 --- a/src/content/docs/pt-br/tutorial/2-pages/2.mdx +++ b/src/content/docs/pt-br/tutorial/2-pages/2.mdx @@ -29,7 +29,7 @@ Agora que você construiu páginas utilizando arquivos `.astro`, vamos fazer alg 2. Adicione um novo arquivo `post-1.md` (vazio) dentro da sua nova pasta `/postagens/`. -3. Procure por essa página na pré-visualização do seu navegador adicionando `/postagens/post-1` ao fim da sua URL de pré-visualização existente. (e.x. `localhost:3000/postagens/post-1`) +3. Procure por essa página na pré-visualização do seu navegador adicionando `/postagens/post-1` ao fim da sua URL de pré-visualização existente. (e.x. `localhost:4321/postagens/post-1`) 4. Modifique a URL de pré-visualização do navegador para ver `/postagens/post-2` ao invés disso. (Essa é uma página que você ainda não criou.) @@ -69,7 +69,7 @@ Agora que você construiu páginas utilizando arquivos `.astro`, vamos fazer alg Eu irei completar o tutorial do Astro, e então continuarei adicionando mais postagens. Olhe por aqui para o que vem a frente. ``` -2. Verifique a pré-visualização do seu navegador novamente em `localhost:3000/postagens/post-1`. Você deve agora ver conteúdo nessa página. +2. Verifique a pré-visualização do seu navegador novamente em `http://localhost:4321/postagens/post-1`. Você deve agora ver conteúdo nessa página. 3. Use as Ferramentas do Desenvolvedor do seu navegador para inspecionar nessa página. Perceba que apesar de você não ter digitado quaisquer elementos HTML, seu Markdown foi convertido para HTML. Você pode ver elementos assim como cabeçalhos, parágrafos e itens de listas. diff --git a/src/content/docs/pt-br/tutorial/4-layouts/2.mdx b/src/content/docs/pt-br/tutorial/4-layouts/2.mdx index 8a4ceeff2767c..eb8d246d22678 100644 --- a/src/content/docs/pt-br/tutorial/4-layouts/2.mdx +++ b/src/content/docs/pt-br/tutorial/4-layouts/2.mdx @@ -54,7 +54,7 @@ Quando você inclui a propriedade frontmatter `layout` em um arquivo `.md`, todo --- ``` -4. Verifique a pré-visualização do seu navegador novamente em `localhost:3000/posts/post-1` e note o que o layout adicionou a sua página. +4. Verifique a pré-visualização do seu navegador novamente em `http://localhost:4321/posts/post-1` e note o que o layout adicionou a sua página. 5. Adicione a mesma propriedade de layout para suas duas outras postagens do blog `post-2.md` e `post-3.md`. Verifique em seu navegador que seu layout também é aplicado nessas postagens. diff --git a/src/content/docs/pt-br/tutorial/4-layouts/3.mdx b/src/content/docs/pt-br/tutorial/4-layouts/3.mdx index c2982d7031354..6319684098047 100644 --- a/src/content/docs/pt-br/tutorial/4-layouts/3.mdx +++ b/src/content/docs/pt-br/tutorial/4-layouts/3.mdx @@ -44,7 +44,7 @@ Você já tem um `LayoutBase.astro` para definir o layout geral da suas páginas ``` -2. Verifique a pré-visualização do seu navegador `localhost:3000/posts/post-1`. Agora você deve ver conteúdo renderizado pelo: +2. Verifique a pré-visualização do seu navegador `http://localhost:4321/posts/post-1`. Agora você deve ver conteúdo renderizado pelo: - Seu **layout de página principal**, incluindo seus estilos, links de navegação e rodapé de redes sociais. - Seu **layout de postagem do blog**, incluindo propriedades frontmatter como a descrição, data, título e imagem @@ -65,7 +65,7 @@ Você já tem um `LayoutBase.astro` para definir o layout geral da suas páginas ``` -5. Verifique sua pré-visualização do navegador novamente em `localhost:3000/posts/post-1` e cheque que essa linha não é mais mostrada e seu título é mostrado apenas uma vez. Faça quaisquer outros ajustes necessários para garantir que você não tenha nenhum conteúdo duplicado. +5. Verifique sua pré-visualização do navegador novamente em `http://localhost:4321/posts/post-1` e cheque que essa linha não é mais mostrada e seu título é mostrado apenas uma vez. Faça quaisquer outros ajustes necessários para garantir que você não tenha nenhum conteúdo duplicado. Certifique-se de que: diff --git a/src/content/docs/pt-br/tutorial/5-astro-api/1.mdx b/src/content/docs/pt-br/tutorial/5-astro-api/1.mdx index 825eb58aff15a..9b0ae421f4209 100644 --- a/src/content/docs/pt-br/tutorial/5-astro-api/1.mdx +++ b/src/content/docs/pt-br/tutorial/5-astro-api/1.mdx @@ -81,7 +81,7 @@ Agora que você tem algumas postagens do blog para adicionar links para, vamos c Esta postagem deve aparecer junto das minhas outras postagens do blog, pois `Astro.glob()` está retornando uma lista de todas as minhas postagens para criar minha lista. ``` -4. Revisite a página do seu blog na pré-visualização do seu navegador em `localhost:3000/blog` e procure por uma lista atualizada com quatro itens, incluindo sua nova postagem no blog! +4. Revisite a página do seu blog na pré-visualização do seu navegador em `http://localhost:4321/blog` e procure por uma lista atualizada com quatro itens, incluindo sua nova postagem no blog! diff --git a/src/content/docs/pt-br/tutorial/5-astro-api/2.mdx b/src/content/docs/pt-br/tutorial/5-astro-api/2.mdx index 98ba537b37ff3..4cecec99cafdb 100644 --- a/src/content/docs/pt-br/tutorial/5-astro-api/2.mdx +++ b/src/content/docs/pt-br/tutorial/5-astro-api/2.mdx @@ -55,7 +55,7 @@ Você pode criar conjuntos inteiros de páginas dinamicamente utilizando arquivo 3. Certifique-se de que toda postagem do blog contém pelo menos uma tag, escrito como um array, e.x. `tags: ["blogueirando"]`. -4. Visite `localhost:3000/tags/astro` na pré-visualização do seu navegador e você deve ver uma página, gerada dinamicamente de `[tag].astro`. Verifique que você também tem páginas criadas para cada uma das suas tags em `/tags/sucessos`, `/tags/comunidade`, `/tags/aprendendo%20em%20público`, etc., ou para cada uma de suas tags customizadas. Você pode precisar fechar e reiniciar o servidor de desenvolvimento primeiro para ver essas novas páginas. +4. Visite `http://localhost:4321/tags/astro` na pré-visualização do seu navegador e você deve ver uma página, gerada dinamicamente de `[tag].astro`. Verifique que você também tem páginas criadas para cada uma das suas tags em `/tags/sucessos`, `/tags/comunidade`, `/tags/aprendendo%20em%20público`, etc., ou para cada uma de suas tags customizadas. Você pode precisar fechar e reiniciar o servidor de desenvolvimento primeiro para ver essas novas páginas. ## Utilize props em rotas dinâmicas @@ -268,7 +268,7 @@ const { posts } = Astro.props; Agora, você deve ser capaz de visitar qualquer uma das suas páginas de tag na sua pré-visualização do navegador. -Navegue para `localhost:3000/tags/comunidade` e você deve ver uma lista com apenas suas postagens do blog com a tag `comunidade`. Da mesma forma que `localhost:3000/tags/aprendendo%20em%20publico` deve apenas mostrar uma lista de postagens do blog com a tag `aprendendo em público`. +Navegue para `http://localhost:4321/tags/comunidade` e você deve ver uma lista com apenas suas postagens do blog com a tag `comunidade`. Da mesma forma que `http://localhost:4321/tags/aprendendo%20em%20publico` deve apenas mostrar uma lista de postagens do blog com a tag `aprendendo em público`. Na próxima seção, você irá criar links de navegação para essas páginas. diff --git a/src/content/docs/pt-br/tutorial/5-astro-api/3.mdx b/src/content/docs/pt-br/tutorial/5-astro-api/3.mdx index 5b978fb2f9686..39eae1d3dc57f 100644 --- a/src/content/docs/pt-br/tutorial/5-astro-api/3.mdx +++ b/src/content/docs/pt-br/tutorial/5-astro-api/3.mdx @@ -33,7 +33,7 @@ Porém, já que você já tem o diretório `/tags/`, você pode se aproveitar de 1. Crie um novo arquivo `index.astro` no diretório `src/pages/tags/`. -2. Navegue para `localhost:3000/tags` e verifique que seu site agora contém uma página nessa URL. Ela estará vazia, mas vai existir. +2. Navegue para `http://localhost:4321/tags` e verifique que seu site agora contém uma página nessa URL. Ela estará vazia, mas vai existir. 3. Crie uma página mínima em `src/pages/tags/index.astro` que utiliza seu layout. Você já fez isso anteriormente! @@ -195,7 +195,7 @@ Ao invés de criar items em uma lista desordenada dessa vez, crie um `

` para ``` -3. Cheque a pré-visualização do seu navegador em `localhost:3000/tags` para verificar que você tem uns novos estilos e que cada uma das tags na página tem um link funcional para sua própria página de tag individual. +3. Cheque a pré-visualização do seu navegador em `http://localhost:4321/tags` para verificar que você tem uns novos estilos e que cada uma das tags na página tem um link funcional para sua própria página de tag individual. ### Check In de Código @@ -238,7 +238,7 @@ const tituloPagina = "Índice de Tags"; ## Adicione essa página à sua navegação -Neste momento, você pode navegar para `localhost:3000/tags` e ver essa página. A partir dessa página, você pode clicar em links para suas páginas individuais de tags. +Neste momento, você pode navegar para `http://localhost:4321/tags` e ver essa página. A partir dessa página, você pode clicar em links para suas páginas individuais de tags. Porém, você ainda precisa fazer com que essas páginas possam ser encontradas a partir de outras páginas no seu website. diff --git a/src/content/docs/pt-br/tutorial/5-astro-api/4.mdx b/src/content/docs/pt-br/tutorial/5-astro-api/4.mdx index c9da8fbd79d47..7729f8805734e 100644 --- a/src/content/docs/pt-br/tutorial/5-astro-api/4.mdx +++ b/src/content/docs/pt-br/tutorial/5-astro-api/4.mdx @@ -114,7 +114,7 @@ Indivíduos podem se inscrever em seu feed em um leitor de feed, e receber uma n -4. Visite `localhost:3000/rss.xml` e verifique que você pode ver texto (não formatado) na página com um `item` para cada um dos seus arquivos `.md`. Cada item deve conter informação sobre a postagem do blog como um `title`, `url`, e `description`. +4. Visite `http://localhost:4321/rss.xml` e verifique que você pode ver texto (não formatado) na página com um `item` para cada um dos seus arquivos `.md`. Cada item deve conter informação sobre a postagem do blog como um `title`, `url`, e `description`. :::tip[veja seu feed rss em um leitor] Baixe um leitor de feed, ou se cadastre em um serviço de leitura de feed online e se inscreva ao seu site adicionando sua própria URL da Netlify. Você também pode compartilhar esse link com outros para que eles possam se inscrever para suas postagens, e ser notificado quando um novo é publicado. diff --git a/src/content/docs/pt-br/tutorial/6-islands/2.mdx b/src/content/docs/pt-br/tutorial/6-islands/2.mdx index 1438bc5398a45..3f49fa119cf68 100644 --- a/src/content/docs/pt-br/tutorial/6-islands/2.mdx +++ b/src/content/docs/pt-br/tutorial/6-islands/2.mdx @@ -67,7 +67,7 @@ Vamos construir um ícone clicável para permitir usuários alternarem entre um ``` -3. Visite a sua pré-visualização do navegador em `localhost:3000` para ver o ícone em todas as suas páginas agora. Você pode tentar clicá-lo, mas você ainda não escreveu um script para fazê-lo interativo. +3. Visite a sua pré-visualização do navegador em `http://localhost:4321` para ver o ícone em todas as suas páginas agora. Você pode tentar clicá-lo, mas você ainda não escreveu um script para fazê-lo interativo. ## Adicione estilos CSS para um tema escuro @@ -132,7 +132,7 @@ Para adicionar interatividade para um componente Astro, você pode utilizar uma ``` -2. Verifique sua pré-visualização do navegador em `localhost:3000` e clique no ícone de tema. Verifique que você pode mudar entre os modos claro e escuro. +2. Verifique sua pré-visualização do navegador em `http://localhost:4321` e clique no ícone de tema. Verifique que você pode mudar entre os modos claro e escuro. diff --git a/src/content/docs/ru/guides/markdown-content.mdx b/src/content/docs/ru/guides/markdown-content.mdx index d2a3d35d10d9b..17f25688d0733 100644 --- a/src/content/docs/ru/guides/markdown-content.mdx +++ b/src/content/docs/ru/guides/markdown-content.mdx @@ -25,7 +25,7 @@ Astro определяет любые `.md` или `.mdx` файлы внутр Чтобы начать использовать Markdown в Astro, добавьте новый файл `page-1.md` к вашему проекту в папке `src/pages/`. Скопируйте приведенный ниже базовый шаблон в свой файл, а затем просмотрите отрисованный HTML-код в предварительном просмотре вашего браузера. -Обычно, это [http://localhost:3000/page-1](http://localhost:3000/page-1). +Обычно, это [http://localhost:4321/page-1](http://localhost:4321/page-1). diff --git a/src/content/docs/ru/guides/testing.mdx b/src/content/docs/ru/guides/testing.mdx index db31d6b749aae..c6305a8291761 100644 --- a/src/content/docs/ru/guides/testing.mdx +++ b/src/content/docs/ru/guides/testing.mdx @@ -66,14 +66,14 @@ Playwright - фреймворк для end-to-end тестирования ве import { test, expect } from '@playwright/test'; test('meta is correct', async ({ page }) => { - await page.goto("http://localhost:3000/"); + await page.goto("http://localhost:4321/"); await expect(page).toHaveTitle('Astro is awesome!'); }); ``` :::tip[Укажите baseurl] -Вы можете указать [`"baseURL": "http://localhost:3000"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) в конфигурационном файле `playwright.config.ts`, чтобы использовать `page.goto("/")` вместо `page.goto("http://localhost:3000/")` для более удобного URL. +Вы можете указать [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) в конфигурационном файле `playwright.config.ts`, чтобы использовать `page.goto("/")` вместо `page.goto("http://localhost:4321/")` для более удобного URL. ::: ### Запуск ваших Playwright тестов @@ -110,12 +110,12 @@ import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { webServer: { command: 'yarn preview', - url: 'http://localhost:3000/app/', + url: 'http://localhost:4321/app/', timeout: 120 * 1000, reuseExistingServer: !process.env.CI, }, use: { - baseURL: 'http://localhost:3000/app/', + baseURL: 'http://localhost:4321/app/', }, }; export default config; diff --git a/src/content/docs/ru/install/auto.mdx b/src/content/docs/ru/install/auto.mdx index c10447e8253b4..efde37809fd49 100644 --- a/src/content/docs/ru/install/auto.mdx +++ b/src/content/docs/ru/install/auto.mdx @@ -86,7 +86,7 @@ Astro идет со встроенным сервером для разрабо -Если все пройдет хорошо, Astro будет использовать [http://localhost:3000/](http://localhost:3000/) для вашего проекта! +Если все пройдет хорошо, Astro будет использовать [http://localhost:4321/](http://localhost:4321/) для вашего проекта! Astro будет следить за изменениями файлов в вашей директории `src/`, так что, вам не нужно перезапускать сервер после внесения изменений во время разработки. diff --git a/src/content/docs/ru/tutorial/1-setup/2.mdx b/src/content/docs/ru/tutorial/1-setup/2.mdx index 6bba0f160958f..58dc18ae7ba7a 100644 --- a/src/content/docs/ru/tutorial/1-setup/2.mdx +++ b/src/content/docs/ru/tutorial/1-setup/2.mdx @@ -118,9 +118,9 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; Ваши проектные файлы содержат весь необходимый код для отображения веб-сайта Astro, но браузер отвечает за отображение вашего кода в виде веб-страниц. -1. Щелкните ссылку `localhost` в окне терминала, чтобы увидеть живой предварительный просмотр вашего нового веб-сайта Astro! +1. Щелкните ссылку `http://localhost` в окне терминала, чтобы увидеть живой предварительный просмотр вашего нового веб-сайта Astro! - (Astro по умолчанию использует `http://localhost:3000`, если порт 3000 доступен.) + (Astro по умолчанию использует `http://localhost:4322`, если порт 4321 доступен.) Вот как должен выглядеть стартовый сайт Astro «Empty Project» в браузерном предварительном просмотре: diff --git a/src/content/docs/ru/tutorial/2-pages/1.mdx b/src/content/docs/ru/tutorial/2-pages/1.mdx index bf91c303a616c..4b1f7d784a2ed 100644 --- a/src/content/docs/ru/tutorial/2-pages/1.mdx +++ b/src/content/docs/ru/tutorial/2-pages/1.mdx @@ -33,7 +33,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; Ваш редактор может показывать круглую белую иконку на вкладке для этого файла. Это означает, что файл еще не сохранен. В меню Файл в VS Code включите «Автоматическое сохранение», и вам больше не нужно будет сохранять файлы вручную. ::: -4. Добавьте `/about` в конце URL-адреса просмотра вашего сайта в строке адреса и проверьте, что вы можете загрузить страницу. (например, `http://localhost:3000/about`) +4. Добавьте `/about` в конце URL-адреса просмотра вашего сайта в строке адреса и проверьте, что вы можете загрузить страницу. (например, `http://localhost:4321/about`) Сейчас ваша страница «О сайте» должна выглядеть точно так же, как первая страница, но мы это изменим! diff --git a/src/content/docs/ru/tutorial/2-pages/2.mdx b/src/content/docs/ru/tutorial/2-pages/2.mdx index ca3caf87fc84b..c36de5905a983 100644 --- a/src/content/docs/ru/tutorial/2-pages/2.mdx +++ b/src/content/docs/ru/tutorial/2-pages/2.mdx @@ -32,7 +32,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 3. Найти эту страницу в браузерном предпросмотре, добавив `/posts/post-1` в конец вашего существующего URL-адреса предварительного просмотра. - (например, `localhost:3000/posts/post-1`) + (например, `http://localhost:4321/posts/post-1`) 4. Измените URL-адрес предварительного просмотра в браузере, чтобы просмотреть `/posts/post-2` вместо этого. (Это страница, которую вы еще не создали.) @@ -72,7 +72,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; Я завершу учебник Astro, а затем продолжу добавлять новые записи. Следите за обновлениями. ``` -2. Проверьте предварительный просмотр в браузере снова `localhost:3000/posts/post-1`. Теперь на этой странице должно быть содержимое. +2. Проверьте предварительный просмотр в браузере снова `http://localhost:4321/posts/post-1`. Теперь на этой странице должно быть содержимое. 3. Используйте инструменты разработчика вашего браузера, чтобы проверить эту страницу. Обратите внимание, что хотя вы не ввели никаких элементов HTML, ваш Markdown был преобразован в HTML. Вы можете увидеть элементы, такие как заголовки, абзацы и пункты списка. diff --git a/src/content/docs/ru/tutorial/4-layouts/2.mdx b/src/content/docs/ru/tutorial/4-layouts/2.mdx index 4c33b01c6db17..fb5b43648a7e7 100644 --- a/src/content/docs/ru/tutorial/4-layouts/2.mdx +++ b/src/content/docs/ru/tutorial/4-layouts/2.mdx @@ -54,7 +54,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; --- ``` -4. Проверьте свой проект в браузере по адресу `localhost:3000/posts/post-1` и обратите внимание, что макет добавился на вашу страницу. +4. Проверьте свой проект в браузере по адресу `http://localhost:4321/posts/post-1` и обратите внимание, что макет добавился на вашу страницу. 5. Добавьте то же свойство макета к вашим двум другим постам блога (`post-2.md` и `post-3.md`). Проверьте в вашем браузере, что макет также применен к этим постам. diff --git a/src/content/docs/ru/tutorial/4-layouts/3.mdx b/src/content/docs/ru/tutorial/4-layouts/3.mdx index 1f27aaf107af4..d6b701eedd193 100644 --- a/src/content/docs/ru/tutorial/4-layouts/3.mdx +++ b/src/content/docs/ru/tutorial/4-layouts/3.mdx @@ -44,7 +44,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ``` -2. Проверьте предварительный просмотр в браузере по адресу `localhost:3000/posts/post-1`. Теперь вы должны видеть содержимое, отрендеренное: +2. Проверьте предварительный просмотр в браузере по адресу `http://localhost:4321/posts/post-1`. Теперь вы должны видеть содержимое, отрендеренное: - Вашим **основным макетом страницы**, включая стили, ссылки для навигации и социальные подвалы. - Вашим **макетом поста в блоге**, включая свойства frontmatter, такие как описание, дата, заголовок и изображение @@ -65,7 +65,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ``` -5. Снова проверьте предварительный просмотр в браузере по адресу `localhost:3000/posts/post-1` и убедитесь, что эта строка больше не отображается и что ваш заголовок отображается только один раз. Внесите все необходимые корректировки, чтобы убедиться, что у вас нет дублирующегося контента. +5. Снова проверьте предварительный просмотр в браузере по адресу `http://localhost:4321/posts/post-1` и убедитесь, что эта строка больше не отображается и что ваш заголовок отображается только один раз. Внесите все необходимые корректировки, чтобы убедиться, что у вас нет дублирующегося контента. Убедитесь, что: diff --git a/src/content/docs/ru/tutorial/5-astro-api/1.mdx b/src/content/docs/ru/tutorial/5-astro-api/1.mdx index 39efb47aa8f9c..a2c9845362738 100644 --- a/src/content/docs/ru/tutorial/5-astro-api/1.mdx +++ b/src/content/docs/ru/tutorial/5-astro-api/1.mdx @@ -82,7 +82,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; Этот пост должен появиться с моими другими блог-постами, потому что `Astro.glob()` возвращает список всех моих постов, чтобы создать мой список. ``` -4. Посетите страницу вашего блога в предварительном просмотре браузера по адресу `localhost:3000/blog` и поищите обновленный список из четырех элементов, включая ваш новый блог-пост! +4. Посетите страницу вашего блога в предварительном просмотре браузера по адресу `http://localhost:4321/blog` и поищите обновленный список из четырех элементов, включая ваш новый блог-пост! diff --git a/src/content/docs/ru/tutorial/5-astro-api/2.mdx b/src/content/docs/ru/tutorial/5-astro-api/2.mdx index 9cbbde78cdece..61917f49335d6 100644 --- a/src/content/docs/ru/tutorial/5-astro-api/2.mdx +++ b/src/content/docs/ru/tutorial/5-astro-api/2.mdx @@ -53,7 +53,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 3. Убедитесь, что каждый блог-пост содержит хотя бы один тег, написанный в виде массива, например, `tags: ["blogging"]`. -4. Перейдите по адресу `localhost:3000/tags/astro` в предварительном просмотре вашего браузера, и вы должны увидеть страницу, созданную динамически из `[tag].astro`. Проверьте, созданы ли у вас страницы для каждого из ваших тегов по адресам `/tags/successes`, `/tags/community` и `/tags/learning%20in%20public` и т.д., или для каждого из ваших пользовательских тегов. Возможно, вам придется сначала выйти и перезапустить сервер разработки, чтобы увидеть эти новые страницы. +4. Перейдите по адресу `http://localhost:4321/tags/astro` в предварительном просмотре вашего браузера, и вы должны увидеть страницу, созданную динамически из `[tag].astro`. Проверьте, созданы ли у вас страницы для каждого из ваших тегов по адресам `/tags/successes`, `/tags/community` и `/tags/learning%20in%20public` и т.д., или для каждого из ваших пользовательских тегов. Возможно, вам придется сначала выйти и перезапустить сервер разработки, чтобы увидеть эти новые страницы. ## Использование props в динамических маршрутах @@ -266,7 +266,7 @@ const { posts } = Astro.props; Теперь вы должны быть в состоянии посетить любую из ваших страниц с тегами в предварительном просмотре браузера. -Перейдите к `localhost:3000/tags/community` и вы должны увидеть список только ваших блог-постов с тегом `community`. Аналогично `localhost:3000/tags/learning%20in%20public` должен отображать список блог-постов с тегом `learning in public`. +Перейдите к `http://localhost:4321/tags/community` и вы должны увидеть список только ваших блог-постов с тегом `community`. Аналогично `http://localhost:4321/tags/learning%20in%20public` должен отображать список блог-постов с тегом `learning in public`. В следующем разделе вы создадите навигационные ссылки на эти страницы. diff --git a/src/content/docs/ru/tutorial/5-astro-api/3.mdx b/src/content/docs/ru/tutorial/5-astro-api/3.mdx index 21036df2bbdc8..471304ea6dbb3 100644 --- a/src/content/docs/ru/tutorial/5-astro-api/3.mdx +++ b/src/content/docs/ru/tutorial/5-astro-api/3.mdx @@ -34,7 +34,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 1. Создайте новый файл `index.astro` в каталоге `src/pages/tags/`. -2. Перейдите по адресу `localhost:3000/tags` и убедитесь, что ваш сайт теперь содержит страницу по этому URL. Она будет пустой, но она будет существовать. +2. Перейдите по адресу `http://localhost:4321/tags` и убедитесь, что ваш сайт теперь содержит страницу по этому URL. Она будет пустой, но она будет существовать. 3. Создайте минимальную страницу в `src/pages/tags/index.astro`, которая использует ваш макет. Вы уже делали это раньше! @@ -195,7 +195,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ``` -3. Проверьте предварительный просмотр в браузере по адресу `localhost:3000/tags`, чтобы убедиться, что у вас есть новые стили и что каждый из тегов на странице имеет рабочую ссылку на свою собственную страницу тега. +3. Проверьте предварительный просмотр в браузере по адресу `http://localhost:4321/tags`, чтобы убедиться, что у вас есть новые стили и что каждый из тегов на странице имеет рабочую ссылку на свою собственную страницу тега. ### Проверка кода @@ -239,7 +239,7 @@ const pageTitle = "Tag Index"; ## Добавьте эту страницу в вашу навигацию -В данный момент вы можете перейти по адресу `localhost:3000/tags` и увидеть эту страницу. С этой страницы вы можете переходить по ссылкам на отдельные страницы тегов. +В данный момент вы можете перейти по адресу `http://localhost:4321/tags` и увидеть эту страницу. С этой страницы вы можете переходить по ссылкам на отдельные страницы тегов. Но вам все еще нужно сделать эти страницы доступными с других страниц вашего веб-сайта. diff --git a/src/content/docs/ru/tutorial/5-astro-api/4.mdx b/src/content/docs/ru/tutorial/5-astro-api/4.mdx index 59537a4a4dc10..a3d2df5c261ba 100644 --- a/src/content/docs/ru/tutorial/5-astro-api/4.mdx +++ b/src/content/docs/ru/tutorial/5-astro-api/4.mdx @@ -115,7 +115,7 @@ Astro предоставляет специальный пакет для быс -4. Перейдите на `localhost:3000/rss.xml` и убедитесь, что вы видите (неформатированный) текст на странице с `item` для каждого из ваших файлов `.md`. Каждый элемент должен содержать информацию о посте в блоге, такую как `title`, `url` и `description`. +4. Перейдите на `http://localhost:4321/rss.xml` и убедитесь, что вы видите (неформатированный) текст на странице с `item` для каждого из ваших файлов `.md`. Каждый элемент должен содержать информацию о посте в блоге, такую как `title`, `url` и `description`. :::tip[просмотрите вашу rss-ленту в читателе] Загрузите читатель лент, или зарегистрируйтесь на онлайн-сервисе чтения лент и подпишитесь на свой сайт, добавив свой собственный URL Netlify. Вы также можете поделиться этой ссылкой с другими, чтобы они могли подписаться на ваши посты и получать уведомления при публикации нового. diff --git a/src/content/docs/ru/tutorial/6-islands/2.mdx b/src/content/docs/ru/tutorial/6-islands/2.mdx index b63bd0671c8df..05dfc09e206fe 100644 --- a/src/content/docs/ru/tutorial/6-islands/2.mdx +++ b/src/content/docs/ru/tutorial/6-islands/2.mdx @@ -68,7 +68,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ``` -3. Посетите предварительный просмотр в браузере по адресу `localhost:3000`, чтобы увидеть иконку теперь на всех ваших страницах. Вы можете попробовать нажать на нее, но вы еще не написали скрипт, чтобы сделать ее интерактивной. +3. Посетите предварительный просмотр в браузере по адресу `http://localhost:4321`, чтобы увидеть иконку теперь на всех ваших страницах. Вы можете попробовать нажать на нее, но вы еще не написали скрипт, чтобы сделать ее интерактивной. ## Добавьте стили CSS для темной темы @@ -133,7 +133,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ``` -2. Проверьте предварительный просмотр в браузере по адресу `localhost:3000` и нажмите на иконку темы. Убедитесь, что вы можете переключаться между светлым и темным режимами. +2. Проверьте предварительный просмотр в браузере по адресу `http://localhost:4321` и нажмите на иконку темы. Убедитесь, что вы можете переключаться между светлым и темным режимами. diff --git a/src/content/docs/zh-cn/guides/cms/contentful.mdx b/src/content/docs/zh-cn/guides/cms/contentful.mdx index 37e6511d67332..a188a7509809a 100644 --- a/src/content/docs/zh-cn/guides/cms/contentful.mdx +++ b/src/content/docs/zh-cn/guides/cms/contentful.mdx @@ -421,7 +421,7 @@ const { content, title, date } = Astro.props; ``` -在浏览器中导航到 http://localhost:3000/， 然后点击其中一篇文章，以确保你的动态路由正常工作！ +在浏览器中导航到 http://localhost:4321/， 然后点击其中一篇文章，以确保你的动态路由正常工作！ #### 服务器端渲染 @@ -561,4 +561,4 @@ try { 在你的 Contentful 空间的**设置**中，点击 **Webhooks** 选项卡，然后通过点击 **Add Webhook** 按钮创建一个新的 Webhook。为你的 Webhook 提供一个名称，并粘贴你在上一节中复制的 Webhook URL。最后，点击 **Save** 创建 Webhook。 -现在，每当你在 Contentful 中发布新的博客文章时，都会触发新的构建，并更新你的博客。 \ No newline at end of file +现在，每当你在 Contentful 中发布新的博客文章时，都会触发新的构建，并更新你的博客。 diff --git a/src/content/docs/zh-cn/guides/cms/kontent-ai.mdx b/src/content/docs/zh-cn/guides/cms/kontent-ai.mdx index 5aba7f6c67356..a66254979572f 100644 --- a/src/content/docs/zh-cn/guides/cms/kontent-ai.mdx +++ b/src/content/docs/zh-cn/guides/cms/kontent-ai.mdx @@ -438,7 +438,7 @@ const blogPost: BlogPost = Astro.props.blogPost ``` -切换到 Astro 预览以查看渲染的博客文章。默认情况下是：http://localhost:3000/blog/astro-is-amazing/ +切换到 Astro 预览以查看渲染的博客文章。默认情况下是：http://localhost:4321/blog/astro-is-amazing/ #### 服务端渲染 @@ -545,4 +545,4 @@ try { 在 [Kontent.ai 应用程序](https://kontent.ai/learn/docs/webhooks/javascript) 中，转到 **Environment settings -> Webhooks**。点击 **Create new webhook** 并为你的新 Webhook 提供一个名称。接着，粘贴你从 Netlify 或 Vercel 复制的 URL，并选择哪些事件应触发 Webhook。默认情况下，为了在发布的内容发生更改时重新构建你的网站，你只需要在 **Delivery API triggers** 下选择 **Publish** 和 **Unpublish** 事件。完成后，点击保存。 -现在，每当你在 Kontent.ai 中发布一篇新博客文章时，就会触发新的构建，并更新你的博客。 \ No newline at end of file +现在，每当你在 Kontent.ai 中发布一篇新博客文章时，就会触发新的构建，并更新你的博客。 diff --git a/src/content/docs/zh-cn/guides/cms/payload.mdx b/src/content/docs/zh-cn/guides/cms/payload.mdx index eb93aa6786867..7395a6b1fba04 100644 --- a/src/content/docs/zh-cn/guides/cms/payload.mdx +++ b/src/content/docs/zh-cn/guides/cms/payload.mdx @@ -74,7 +74,7 @@ import Users from "./collections/Users"; import Posts from "./collections/Posts"; export default buildConfig({ - serverURL: "http://localhost:3000", + serverURL: "http://localhost:4321", admin: { user: Users.slug, }, @@ -93,7 +93,7 @@ export default buildConfig({ 2. 进入 “Posts” 集合并创建一篇新文章。在保存后，你会注意到 API URL 出现在右下角。 -3. 在本地 PayloadCMS 服务运行的情况下，在浏览器中打开 `http://localhost:3000/api/posts` 。你应该看到一个包含你创建的文章作为对象的 JSON 文件。 +3. 在本地 PayloadCMS 服务运行的情况下，在浏览器中打开 `http://localhost:4321/api/posts` 。你应该看到一个包含你创建的文章作为对象的 JSON 文件。 ```json { @@ -120,7 +120,7 @@ export default buildConfig({ ``` :::tip[提示] -默认情况下，Astro 和 PayloadCMS 都会使用 3000 端口。你可能想要在 `src/server.ts` 文件中更改 PayloadCMS 的端口，别忘了也同时更新 `src/payload.config.ts` 中的 `serverURL` 。 +默认情况下，Astro 和 PayloadCMS 都会使用 4321 端口。你可能想要在 `src/server.ts` 文件中更改 PayloadCMS 的端口，别忘了也同时更新 `src/payload.config.ts` 中的 `serverURL` 。 ::: ### 获取数据 @@ -135,7 +135,7 @@ export default buildConfig({ --- import HomeLayout from "../layouts/HomeLayout.astro"; -const res = await fetch("https://localhost:5000/api/posts") // https://localhost:3000/api/posts 默认端口 +const res = await fetch("http://localhost:5000/api/posts") // http://localhost:4321/api/posts 默认端口 const posts = await res.json() --- @@ -163,7 +163,7 @@ const posts = await res.json() --- import HomeLayout from "../layouts/HomeLayout.astro"; -const res = await fetch("http://localhost:5000/api/posts") // https://localhost:3000/api/posts 默认端口 +const res = await fetch("http://localhost:5000/api/posts") // http://localhost:4321/api/posts 默认端口 const posts = await res.json() --- diff --git a/src/content/docs/zh-cn/guides/testing.mdx b/src/content/docs/zh-cn/guides/testing.mdx index 45478def5435f..69fc8c32a3217 100644 --- a/src/content/docs/zh-cn/guides/testing.mdx +++ b/src/content/docs/zh-cn/guides/testing.mdx @@ -80,7 +80,7 @@ export default defineConfig({ ```js title="cypress/e2e/index.cy.js" it('titles are correct', () => { - const page = cy.visit('http://localhost:3000'); + const page = cy.visit('http://localhost:4321'); page.get('title').should('have.text', 'Astro is awesome!') page.get('h1').should('have.text', 'Hello world from Astro'); @@ -88,7 +88,7 @@ export default defineConfig({ ``` :::tip[设置一个 baseUrl] - 你可以在名为 `cypress.config.js` 的配置文件中设置 [`"baseUrl": "http://localhost:3000"`](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Step-3-Configure-Cypress) ，以便使用 `cy.visit("/")` 而不是 `cy.visit("http://localhost:3000/")` 来使用更便捷的 URL。 + 你可以在名为 `cypress.config.js` 的配置文件中设置 [`"baseUrl": "http://localhost:4321"`](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Step-3-Configure-Cypress) ，以便使用 `cy.visit("/")` 而不是 `cy.visit("http://localhost:4321/")` 来使用更便捷的 URL。 ::: ### 运行你的 Cypress 测试 @@ -191,14 +191,15 @@ Playwright 是一个针对现代网络应用的端到端测试框架。使用 Ja import { test, expect } from '@playwright/test'; test('meta is correct', async ({ page }) => { - await page.goto("http://localhost:3000/"); + await page.goto("http://localhost:4321/"); await expect(page).toHaveTitle('Astro is awesome!'); }); ``` :::tip[设置默认网址] -你可以在 `playwright.config.ts` 配置文件中配置 [`"baseURL": "http://localhost:3000"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) 以使用 `page.goto("/")` 来替代 `page.goto("http://localhost:3000/")` 以使用更便捷的 URL。 + +你可以在 `playwright.config.ts` 配置文件中配置 [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) 以使用 `page.goto("/")` 来替代 `page.goto("http://localhost:4321/")` 以使用更便捷的 URL。 ::: ### 运行你的 Playwright 测试 @@ -225,6 +226,29 @@ Playwright 是一个针对现代网络应用的端到端测试框架。使用 Ja 当你使用 Playwright 配置文件中的 [`webServer`](https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests) 选项运行测试脚本时，你也可以让 Playwright 启动服务器。 +下面是使用 Yarn 时所需的配置和命令示例： + +1. 向项目根目录中的 package.json 文件添加一个测试脚本，例如 `"test:e2e": "playwright test"`。 + +2. 在 `playwright.config.ts` 中，添加 `webServer` 对象并更改命令为 `yarn preview`。 + +```js title="playwright.config.ts" ins={3-8} "yarn preview" +import type { PlaywrightTestConfig } from '@playwright/test'; +const config: PlaywrightTestConfig = { + webServer: { + command: 'yarn preview', + url: 'http://localhost:4321/app/', + timeout: 120 * 1000, + reuseExistingServer: !process.env.CI, + }, + use: { + baseURL: 'http://localhost:4321/app/', + }, +}; +export default config; +``` + +3. 执行 `yarn build`，然后执行 `yarn test:e2e` 运行 `Playwright` 测试。 下面是使用 npm 时所需的配置和命令示例： 1. 向项目根目录中的 `package.json` 文件添加一个测试脚本，例如 `"test:e2e": "playwright test"`。 @@ -237,12 +261,12 @@ Playwright 是一个针对现代网络应用的端到端测试框架。使用 Ja export default defineConfig({ webServer: { command: 'npm run preview', - url: 'http://localhost:3000/', + url: 'http://localhost:4321/', timeout: 120 * 1000, reuseExistingServer: !process.env.CI, }, use: { - baseURL: 'http://localhost:3000/', + baseURL: 'http://localhost:4321/', }, }); ``` diff --git a/src/content/docs/zh-cn/install/auto.mdx b/src/content/docs/zh-cn/install/auto.mdx index 79c0f588af21d..d81a41483204e 100644 --- a/src/content/docs/zh-cn/install/auto.mdx +++ b/src/content/docs/zh-cn/install/auto.mdx @@ -80,7 +80,7 @@ Astro 带有一个内置的开发服务器，拥有项目开发所需的一切 -如果一切顺利，Astro 现在应该可以在 [http://localhost:3000/](http://localhost:3000/) 上为你的项目提供服务了！ +如果一切顺利，Astro 现在应该可以在 [http://localhost:4321/](http://localhost:4321/) 上为你的项目提供服务了！ Astro 将实时监听 `src/` 目录中的文件更改，因此你在开发过程中进行更改时无需重新启动服务器。 diff --git a/src/content/docs/zh-cn/recipes/docker.mdx b/src/content/docs/zh-cn/recipes/docker.mdx index b9ab0e67d1104..6c2922b5a72ee 100644 --- a/src/content/docs/zh-cn/recipes/docker.mdx +++ b/src/content/docs/zh-cn/recipes/docker.mdx @@ -22,7 +22,7 @@ Docker 镜像和容器可以部署到许多不同的平台，例如 AWS、Azure ### 服务端渲染模式（SSR） -以下是一个 Dockerfile 示例，它将使用 Node.js 构建你的网站，并在端口 `3000` 上进行服务。这要求在 Astro 项目中安装了 [Node 适配器](/zh-cn/guides/integrations-guide/node/)。 +以下是一个 Dockerfile 示例，它将使用 Node.js 构建你的网站，并在端口 `4321` 上进行服务。这要求在 Astro 项目中安装了 [Node 适配器](/zh-cn/guides/integrations-guide/node/)。 ```docker title="Dockerfile" FROM node:lts AS runtime @@ -34,8 +34,8 @@ RUN npm install RUN npm run build ENV HOST=0.0.0.0 -ENV PORT=3000 -EXPOSE 3000 +ENV PORT=4321 +EXPOSE 4321 CMD node ./dist/server/entry.mjs ``` @@ -149,8 +149,8 @@ FROM base AS runtime COPY --from=prod-deps /app/node_modules ./node_modules COPY --from=build /app/dist ./dist ENV HOST=0.0.0.0 -ENV PORT=3000 -EXPOSE 3000 +ENV PORT=4321 +EXPOSE 4321 CMD node ./dist/server/entry.mjs ``` @@ -166,7 +166,7 @@ docker build -t . 2. 要将镜像作为本地容器运行，请使用以下命令。 -将 `` 替换为你本地机器上的空闲端口。将 `` 替换为你的 Docker 容器暴露的端口号（如上面示例中的 `3000`、`80` 或 `8080`）。 +将 `` 替换为你本地机器上的空闲端口。将 `` 替换为你的 Docker 容器暴露的端口号（如上面示例中的 `4321`、`80` 或 `8080`）。 ```bash docker run -p : diff --git a/src/content/docs/zh-cn/reference/cli-reference.mdx b/src/content/docs/zh-cn/reference/cli-reference.mdx index 2b974dc46d2fd..8f3c81dca9ab7 100644 --- a/src/content/docs/zh-cn/reference/cli-reference.mdx +++ b/src/content/docs/zh-cn/reference/cli-reference.mdx @@ -143,7 +143,7 @@ Global Flags #### `--port ` -指定运行在哪个端口。默认为 `3000`。 +指定运行在哪个端口。默认为 `4321`。 #### `--host [可选主机地址]` diff --git a/src/content/docs/zh-cn/tutorial/1-setup/2.mdx b/src/content/docs/zh-cn/tutorial/1-setup/2.mdx index 8d4de188b16a0..e0a492a07d815 100644 --- a/src/content/docs/zh-cn/tutorial/1-setup/2.mdx +++ b/src/content/docs/zh-cn/tutorial/1-setup/2.mdx @@ -115,7 +115,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 1. 点击终端窗口中的 `localhost` 链接，查看 Astro 网站的实时预览！ - （如果端口 3000 可用，Astro 默认使用 `http://localhost:3000`。） + （如果端口 4321 可用，Astro 默认使用 `http://localhost:4321`。） 以下是 Astro “初始项目” 入门网站在浏览器预览中的样子： diff --git a/src/content/docs/zh-cn/tutorial/2-pages/1.mdx b/src/content/docs/zh-cn/tutorial/2-pages/1.mdx index c53122b38461f..0f3ee10c78ec7 100644 --- a/src/content/docs/zh-cn/tutorial/2-pages/1.mdx +++ b/src/content/docs/zh-cn/tutorial/2-pages/1.mdx @@ -30,7 +30,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 你的代码编辑器可能会在这个文件的导航标签上显示一个白色的圆点。这意味着该文件还没有保存。你可以在 VS Code 的文件菜单下，启用 “自动保存”，这样应该不再需要手动保存任何文件。 ::: -4. 在地址栏中的网站预览的URL末尾添加 `/about`，并检查你是否能在那里看到一个页面加载。(例如：`http://localhost:3000/about`) +4. 在地址栏中的网站预览的URL末尾添加 `/about`，并检查你是否能在那里看到一个页面加载。(例如：`http://localhost:4321/about`) 现在，你的 “关于” 页面看起来应该和第一页完全一样，但我们现在要更改一下！ diff --git a/src/content/docs/zh-cn/tutorial/2-pages/2.mdx b/src/content/docs/zh-cn/tutorial/2-pages/2.mdx index 79a4c0f53e81a..e79cc5e9967eb 100644 --- a/src/content/docs/zh-cn/tutorial/2-pages/2.mdx +++ b/src/content/docs/zh-cn/tutorial/2-pages/2.mdx @@ -27,7 +27,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 2. 在新的 `/posts/` 文件夹中添加一个新的（空）文件 `post-1.md`。 -3. 通过将 `/posts/post-1` 拼接到现有预览 URL 的末尾，并在浏览器中预览此页面。（例如 `localhost:3000/posts/post-1`） +3. 通过将 `/posts/post-1` 拼接到现有预览 URL 的末尾，并在浏览器中预览此页面。（例如 `http://localhost:4321/posts/post-1`） 4. 将浏览器预览 URL 更改为查看 `/posts/post-2`。（这是你尚未创建的页面。） @@ -68,7 +68,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 我将完成 Astro 教程，然后继续编写更多内容。关注我以获取更多信息。 ``` -2. 在 `localhost:3000/posts/post-1` 再次查看你的浏览器上的页面预览。你现在应该可以在此页面上看到文章内容。 +2. 在 `localhost:4321/posts/post-1` 再次查看你的浏览器上的页面预览。你现在应该可以在此页面上看到文章内容。 3. 使用浏览器的开发工具检查此页面。请注意，虽然你没有键入任何 HTML 元素，但你的 Markdown 已转换为 HTML。你可以看到标题、段落和列表项等元素。 diff --git a/src/content/docs/zh-cn/tutorial/4-layouts/2.mdx b/src/content/docs/zh-cn/tutorial/4-layouts/2.mdx index ed6a9610db3db..3c631a3a9777b 100644 --- a/src/content/docs/zh-cn/tutorial/4-layouts/2.mdx +++ b/src/content/docs/zh-cn/tutorial/4-layouts/2.mdx @@ -50,7 +50,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; --- ``` -4. 再次检查 `localhost:3000/posts/post-1` 上的浏览器预览，并注意布局为页面添加了什么内容。 +4. 再次检查 `localhost:4321/posts/post-1` 上的浏览器预览，并注意布局为页面添加了什么内容。 5. 将相同的布局属性添加到你的另外两篇博客文章 `post-2.md` 和 `post-3.md` 中。在浏览器中验证你的布局是否也应用于这些文章。 @@ -171,4 +171,4 @@ const { frontmatter } = Astro.props; - [Astro 中的 Markdown 布局](/zh-cn/guides/markdown-content/#frontmatter-layout) - [Markdown 布局属性](/zh-cn/core-concepts/layouts/#markdown-布局的-props) -- [YAML 介绍](https://dev.to/paulasantamaria/introduction-to-yaml-125f) 外部链接 \ No newline at end of file +- [YAML 介绍](https://dev.to/paulasantamaria/introduction-to-yaml-125f) 外部链接 diff --git a/src/content/docs/zh-cn/tutorial/4-layouts/3.mdx b/src/content/docs/zh-cn/tutorial/4-layouts/3.mdx index de7b8471bbe59..69e5c7b3c9d64 100644 --- a/src/content/docs/zh-cn/tutorial/4-layouts/3.mdx +++ b/src/content/docs/zh-cn/tutorial/4-layouts/3.mdx @@ -41,7 +41,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ``` -2. 在浏览器预览中查看 `localhost:3000/posts/post-1`。现在，你应该看到以下内容的渲染： +2. 在浏览器预览中查看 `http://localhost:4321/posts/post-1`。现在，你应该看到以下内容的渲染： - 你的**主页面布局**，包括样式、导航链接和社交页脚。 - 你的**博客文章布局**，包括描述、日期、标题和图片等前置属性。 @@ -62,7 +62,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ``` -5. 再次检查浏览器预览 `localhost:3000/posts/post-1`，验证该行不再显示（你的标题只显示一次）。根据需要进行其他调整，确保没有重复的内容。 +5. 再次检查浏览器预览 `http://localhost:4321/posts/post-1`，验证该行不再显示（你的标题只显示一次）。根据需要进行其他调整，确保没有重复的内容。 请确保： diff --git a/src/content/docs/zh-cn/tutorial/5-astro-api/1.mdx b/src/content/docs/zh-cn/tutorial/5-astro-api/1.mdx index b589ca81a1a5b..774759432a41e 100644 --- a/src/content/docs/zh-cn/tutorial/5-astro-api/1.mdx +++ b/src/content/docs/zh-cn/tutorial/5-astro-api/1.mdx @@ -78,7 +78,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 这篇文章应该会与其他的博客文章一起显示，因为 `Astro.glob()` 会返回一个包含所有文章的列表，以创建这个文章列表。 ``` -4. 在浏览器预览中重新访问博客页面 `localhost:3000/blog`，并查看更新后的包含四篇文章的列表，其中包括你的新博客文章！ +4. 在浏览器预览中重新访问博客页面 `http://localhost:4321/blog`，并查看更新后的包含四篇文章的列表，其中包括你的新博客文章！ diff --git a/src/content/docs/zh-cn/tutorial/5-astro-api/2.mdx b/src/content/docs/zh-cn/tutorial/5-astro-api/2.mdx index 4dabe0f5ee0f9..993722636673a 100644 --- a/src/content/docs/zh-cn/tutorial/5-astro-api/2.mdx +++ b/src/content/docs/zh-cn/tutorial/5-astro-api/2.mdx @@ -52,7 +52,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 3. 确保每篇博客文章至少包含一个标签，以数组的形式编写，例如 `tags: ["blogging"]`。 -4. 在浏览器中访问 `localhost:3000/tags/astro`，你应该能看到一个页面，它是从 `[tag].astro` 动态生成的。检查是否还为每个标签创建了页面，例如 `/tags/successes`、`/tags/community`、`/tags/learning%20in%20public` 等，或者你自定义的标签。你可能需要先退出并重新启动开发服务器才能看到这些新页面。 +4. 在浏览器中访问 `http://localhost:4321/tags/astro`，你应该能看到一个页面，它是从 `[tag].astro` 动态生成的。检查是否还为每个标签创建了页面，例如 `/tags/successes`、`/tags/community`、`/tags/learning%20in%20public` 等，或者你自定义的标签。你可能需要先退出并重新启动开发服务器才能看到这些新页面。 ## 在动态路由中使用 props @@ -264,7 +264,7 @@ const { posts } = Astro.props; 现在，你应该能够在浏览器预览中访问任何一个标签页面。 -在浏览器中导航到 `localhost:3000/tags/community`，你应该看到一个包含标签为 `community` 的博文列表。同样地，`localhost:3000/tags/learning%20in%20public` 应该显示一个包含标签为 `learning in public` 的博文列表。 +在浏览器中导航到 `http://localhost:4321/tags/community`，你应该看到一个包含标签为 `community` 的博文列表。同样地，`http://localhost:4321/tags/learning%20in%20public` 应该显示一个包含标签为 `learning in public` 的博文列表。 在接下来的部分，你将创建导航链接到这些页面。 diff --git a/src/content/docs/zh-cn/tutorial/5-astro-api/3.mdx b/src/content/docs/zh-cn/tutorial/5-astro-api/3.mdx index 041c9eff4eabb..2954d3df916d6 100644 --- a/src/content/docs/zh-cn/tutorial/5-astro-api/3.mdx +++ b/src/content/docs/zh-cn/tutorial/5-astro-api/3.mdx @@ -31,7 +31,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 1. 在 `src/pages/tags/` 目录中创建一个新文件 `index.astro`。 -2. 访问 `localhost:3000/tags` 并验证你的网站现在是否包含这个 URL 的页面。它将是空的，但是它已经存在了。 +2. 访问 `http://localhost:4321/tags` 并验证你的网站现在是否包含这个 URL 的页面。它将是空的，但是它已经存在了。 3. 在 `src/pages/tags/index.astro` 中创建一个使用你的布局的最小页面。你之前已经做过这个！ @@ -191,7 +191,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ``` -3. 在 `localhost:3000/tags` 上检查你的浏览器的预览，确认这些新的样式正确应用了，并且页面上的每个标签都有链接到自己独立标签页面的功能。 +3. 在 `http://localhost:4321/tags` 上检查你的浏览器的预览，确认这些新的样式正确应用了，并且页面上的每个标签都有链接到自己独立标签页面的功能。 ### 检查代码 @@ -235,7 +235,7 @@ const pageTitle = "Tag Index"; ## 将此页面添加到你的导航 -现在，你可以导航到 `localhost:3000/tags` 并查看此页面。通过这个页面，你可以点击链接进入各个标签页面。 +现在，你可以导航到 `http://localhost:4321/tags` 并查看此页面。通过这个页面，你可以点击链接进入各个标签页面。 但是，你仍然需要让访问者在其他页面也能够发现这个页面。 diff --git a/src/content/docs/zh-cn/tutorial/5-astro-api/4.mdx b/src/content/docs/zh-cn/tutorial/5-astro-api/4.mdx index ca15465943210..94f47bfdf4ee8 100644 --- a/src/content/docs/zh-cn/tutorial/5-astro-api/4.mdx +++ b/src/content/docs/zh-cn/tutorial/5-astro-api/4.mdx @@ -110,7 +110,7 @@ Astro 提供了一个可自定义包，用于快速为你的网站添加一个 R -4. 访问 `localhost:3000/rss.xml`，验证你是否可以在页面上看到（未格式化的）文本，每个 `.md` 文件都有一个 `item`。每个 `item` 应包含博客文章的信息，例如 `title`、`url` 和 `description`。 +4. 访问 `http://localhost:4321/rss.xml`，验证你是否可以在页面上看到（未格式化的）文本，每个 `.md` 文件都有一个 `item`。每个 `item` 应包含博客文章的信息，例如 `title`、`url` 和 `description`。 :::tip[在阅读器中查看你的 RSS 订阅源] 下载一个订阅源阅读器，或者注册一个在线订阅源阅读器服务，并通过添加你自己的 Netlify URL 订阅你的网站。你也可以将此链接分享给他人，让他们订阅你的文章，并在发布新文章时收到通知。 diff --git a/src/content/docs/zh-cn/tutorial/6-islands/2.mdx b/src/content/docs/zh-cn/tutorial/6-islands/2.mdx index 6b1d188d14896..adeb30f25d15d 100644 --- a/src/content/docs/zh-cn/tutorial/6-islands/2.mdx +++ b/src/content/docs/zh-cn/tutorial/6-islands/2.mdx @@ -65,7 +65,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ``` -3. 访问 `localhost:3000` 上的浏览器预览，查看图标是否出现在所有页面上。你可以尝试点击它，但你还没有编写脚本使其具有交互性。 +3. 访问 `http://localhost:4321` 上的浏览器预览，查看图标是否出现在所有页面上。你可以尝试点击它，但你还没有编写脚本使其具有交互性。 ## 添加用于暗黑主题的 CSS 样式 @@ -130,7 +130,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ``` -2. 检查 `localhost:3000` 上的浏览器预览，并单击主题图标。验证是否可以在浅色和暗黑模式之间进行切换。 +2. 检查 `http://localhost:4321` 上的浏览器预览，并单击主题图标。验证是否可以在浅色和暗黑模式之间进行切换。 diff --git a/src/content/docs/zh-tw/install/auto.mdx b/src/content/docs/zh-tw/install/auto.mdx index 0ee3d6c0c8722..bcde9c35c4828 100644 --- a/src/content/docs/zh-tw/install/auto.mdx +++ b/src/content/docs/zh-tw/install/auto.mdx @@ -79,7 +79,7 @@ Astro 本身即內建了一個開發伺服器，其附帶你在開發專案時 -若一切順利，Astro 現在應該會在 [http://localhost:3000/](http://localhost:3000/) 執行你的專案了！ +若一切順利，Astro 現在應該會在 [http://localhost:4321/](http://localhost:4321/) 執行你的專案了！ Astro 會偵測你 `src/` 目錄底下檔案的即時變動，所以在開發中你不需要重啟伺服器來檢視更動後的結果。 From 9d110640ff4d1c7894e2672977bb6e3889160ea5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elian=20=E2=98=95=EF=B8=8F?= Date: Wed, 30 Aug 2023 15:53:38 +0200 Subject: [PATCH 002/239] [i18nIgnore] chore: remove references to MPA vs SPA page (#4425) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sarah Rainsberger Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> Co-authored-by: Chris Swithinbank Co-authored-by: Elian ☕️ Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> Co-authored-by: Kevin Zuniga Cuellar <46791833+kevinzunigacuellar@users.noreply.github.com> Co-authored-by: Bjorn Lu Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com> Co-authored-by: Shinya Fujino Co-authored-by: Matthew Phillips Co-authored-by: J. B. Rainsberger Co-authored-by: Emanuele Stoppa Co-authored-by: Nate Moore Co-authored-by: Nate Moore Co-authored-by: Waxer59 <78129249+Waxer59@users.noreply.github.com> Co-authored-by: delucis Co-authored-by: 李瑞丰 Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Co-authored-by: Alisson Nunes Co-authored-by: Luiz Ferraz Co-authored-by: Kyosuke Nakamura Co-authored-by: Genteure Co-authored-by: Xiaoyue Lin <36526527+100gle@users.noreply.github.com> Co-authored-by: Camol Co-authored-by: Arsh <69170106+lilnasy@users.noreply.github.com> Co-authored-by: = Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> --- netlify.toml | 4 + .../de/concepts/mpa-vs-spa.mdx | 0 .../es/concepts/mpa-vs-spa.mdx | 0 .../fr/concepts/mpa-vs-spa.mdx | 0 .../it/concepts/mpa-vs-spa.mdx | 0 .../ja/concepts/mpa-vs-spa.mdx | 0 .../ko/concepts/mpa-vs-spa.mdx | 0 .../pt-br/concepts/mpa-vs-spa.mdx | 0 .../ru/concepts/mpa-vs-spa.mdx | 0 .../zh-CN}/concepts/mpa-vs-spa.mdx | 0 src/content/docs/ar/concepts/why-astro.mdx | 3 - src/content/docs/de/concepts/why-astro.mdx | 3 - src/content/docs/en/concepts/mpa-vs-spa.mdx | 75 ------------------- src/content/docs/en/concepts/why-astro.mdx | 3 - .../from-create-react-app.mdx | 2 +- .../migrate-to-astro/from-docusaurus.mdx | 2 +- .../guides/migrate-to-astro/from-eleventy.mdx | 2 - .../guides/migrate-to-astro/from-gatsby.mdx | 2 +- .../guides/migrate-to-astro/from-gridsome.mdx | 2 +- .../guides/migrate-to-astro/from-nextjs.mdx | 2 +- .../guides/migrate-to-astro/from-nuxtjs.mdx | 2 +- .../migrate-to-astro/from-sveltekit.mdx | 2 +- .../guides/migrate-to-astro/from-vuepress.mdx | 2 +- src/content/docs/es/concepts/why-astro.mdx | 2 - .../from-create-react-app.mdx | 2 +- .../migrate-to-astro/from-docusaurus.mdx | 2 +- .../guides/migrate-to-astro/from-eleventy.mdx | 2 +- .../guides/migrate-to-astro/from-gatsby.mdx | 2 +- .../guides/migrate-to-astro/from-gridsome.mdx | 4 +- .../guides/migrate-to-astro/from-nextjs.mdx | 2 +- .../guides/migrate-to-astro/from-nuxtjs.mdx | 2 +- .../migrate-to-astro/from-sveltekit.mdx | 2 +- .../guides/migrate-to-astro/from-vuepress.mdx | 2 +- src/content/docs/fr/concepts/why-astro.mdx | 4 - src/content/docs/it/concepts/why-astro.mdx | 2 - src/content/docs/ja/concepts/why-astro.mdx | 3 - src/content/docs/ko/concepts/why-astro.mdx | 5 +- src/content/docs/pl/concepts/why-astro.mdx | 3 - src/content/docs/pt-br/concepts/why-astro.mdx | 3 - src/content/docs/ru/concepts/why-astro.mdx | 3 - src/content/docs/zh-cn/concepts/why-astro.mdx | 7 +- .../from-create-react-app.mdx | 2 +- .../migrate-to-astro/from-docusaurus.mdx | 4 +- .../guides/migrate-to-astro/from-eleventy.mdx | 4 +- .../guides/migrate-to-astro/from-gatsby.mdx | 2 +- .../guides/migrate-to-astro/from-gridsome.mdx | 4 +- .../guides/migrate-to-astro/from-nextjs.mdx | 2 +- .../guides/migrate-to-astro/from-nuxtjs.mdx | 2 +- .../migrate-to-astro/from-sveltekit.mdx | 2 +- .../guides/migrate-to-astro/from-vuepress.mdx | 4 +- src/content/docs/zh-tw/concepts/why-astro.mdx | 3 - src/i18n/de/nav.ts | 1 - src/i18n/en/nav.ts | 1 - src/i18n/es/nav.ts | 1 - src/i18n/fr/nav.ts | 1 - src/i18n/it/nav.ts | 1 - src/i18n/ja/nav.ts | 1 - src/i18n/pl/nav.ts | 1 - src/i18n/pt-br/nav.ts | 1 - src/i18n/ru/nav.ts | 1 - src/i18n/zh-cn/nav.ts | 1 - src/i18n/zh-tw/nav.ts | 1 - 62 files changed, 40 insertions(+), 158 deletions(-) rename {src/content/docs => old-translations}/de/concepts/mpa-vs-spa.mdx (100%) rename {src/content/docs => old-translations}/es/concepts/mpa-vs-spa.mdx (100%) rename {src/content/docs => old-translations}/fr/concepts/mpa-vs-spa.mdx (100%) rename {src/content/docs => old-translations}/it/concepts/mpa-vs-spa.mdx (100%) rename {src/content/docs => old-translations}/ja/concepts/mpa-vs-spa.mdx (100%) rename {src/content/docs => old-translations}/ko/concepts/mpa-vs-spa.mdx (100%) rename {src/content/docs => old-translations}/pt-br/concepts/mpa-vs-spa.mdx (100%) rename {src/content/docs => old-translations}/ru/concepts/mpa-vs-spa.mdx (100%) rename {src/content/docs/zh-cn => old-translations/zh-CN}/concepts/mpa-vs-spa.mdx (100%) delete mode 100644 src/content/docs/en/concepts/mpa-vs-spa.mdx diff --git a/netlify.toml b/netlify.toml index e4174d26a996d..495f7a389d319 100644 --- a/netlify.toml +++ b/netlify.toml @@ -107,3 +107,7 @@ from = "/:lang/*" to = "/:lang/404/" status = 404 + + [[redirects]] + from = "/en/concepts/mpa-vs-spa" + to = "/en/concepts/why-astro" diff --git a/src/content/docs/de/concepts/mpa-vs-spa.mdx b/old-translations/de/concepts/mpa-vs-spa.mdx similarity index 100% rename from src/content/docs/de/concepts/mpa-vs-spa.mdx rename to old-translations/de/concepts/mpa-vs-spa.mdx diff --git a/src/content/docs/es/concepts/mpa-vs-spa.mdx b/old-translations/es/concepts/mpa-vs-spa.mdx similarity index 100% rename from src/content/docs/es/concepts/mpa-vs-spa.mdx rename to old-translations/es/concepts/mpa-vs-spa.mdx diff --git a/src/content/docs/fr/concepts/mpa-vs-spa.mdx b/old-translations/fr/concepts/mpa-vs-spa.mdx similarity index 100% rename from src/content/docs/fr/concepts/mpa-vs-spa.mdx rename to old-translations/fr/concepts/mpa-vs-spa.mdx diff --git a/src/content/docs/it/concepts/mpa-vs-spa.mdx b/old-translations/it/concepts/mpa-vs-spa.mdx similarity index 100% rename from src/content/docs/it/concepts/mpa-vs-spa.mdx rename to old-translations/it/concepts/mpa-vs-spa.mdx diff --git a/src/content/docs/ja/concepts/mpa-vs-spa.mdx b/old-translations/ja/concepts/mpa-vs-spa.mdx similarity index 100% rename from src/content/docs/ja/concepts/mpa-vs-spa.mdx rename to old-translations/ja/concepts/mpa-vs-spa.mdx diff --git a/src/content/docs/ko/concepts/mpa-vs-spa.mdx b/old-translations/ko/concepts/mpa-vs-spa.mdx similarity index 100% rename from src/content/docs/ko/concepts/mpa-vs-spa.mdx rename to old-translations/ko/concepts/mpa-vs-spa.mdx diff --git a/src/content/docs/pt-br/concepts/mpa-vs-spa.mdx b/old-translations/pt-br/concepts/mpa-vs-spa.mdx similarity index 100% rename from src/content/docs/pt-br/concepts/mpa-vs-spa.mdx rename to old-translations/pt-br/concepts/mpa-vs-spa.mdx diff --git a/src/content/docs/ru/concepts/mpa-vs-spa.mdx b/old-translations/ru/concepts/mpa-vs-spa.mdx similarity index 100% rename from src/content/docs/ru/concepts/mpa-vs-spa.mdx rename to old-translations/ru/concepts/mpa-vs-spa.mdx diff --git a/src/content/docs/zh-cn/concepts/mpa-vs-spa.mdx b/old-translations/zh-CN/concepts/mpa-vs-spa.mdx similarity index 100% rename from src/content/docs/zh-cn/concepts/mpa-vs-spa.mdx rename to old-translations/zh-CN/concepts/mpa-vs-spa.mdx diff --git a/src/content/docs/ar/concepts/why-astro.mdx b/src/content/docs/ar/concepts/why-astro.mdx index 87faaa3656870..277aaf6dbf73b 100644 --- a/src/content/docs/ar/concepts/why-astro.mdx +++ b/src/content/docs/ar/concepts/why-astro.mdx @@ -37,9 +37,6 @@ description: "أسترو هو إطار عمل ويب شامل لبناء موا نموذج SPA له فوائده. ومع ذلك، تأتي هذه الفوائد مع تعقيدات إضافية ومساومات للأداء. مما يضر بسرعة الصفحة -- انظر على سبيل المثال مقياس [الوقت المستغرق للتفاعل (TTI)](https://web.dev/interactive/) -- وهو أمر غير منطقي بالنسبة للمواقع التي تركز على المحتوى حيث تكون سرعة التحميل الأولية ضرورية. -📚 [اعرف اكثر عن ما يجعل بنية MPA من أسترو فريدة من نوعها.](/ar/concepts/mpa-vs-spa/) - - ## سريع افتراضيًا الأداء السريع دائمًا مهم، ولكنه *بالغ* الأهمية لمواقع الويب التي تركز على المحتوى. لقد ثبت أنّ ضَعف الأداء يفقدك المشاركات، الزوار، والمال. على سبيل المثال: diff --git a/src/content/docs/de/concepts/why-astro.mdx b/src/content/docs/de/concepts/why-astro.mdx index 6ec78601c6976..4d6bc7504df41 100644 --- a/src/content/docs/de/concepts/why-astro.mdx +++ b/src/content/docs/de/concepts/why-astro.mdx @@ -42,9 +42,6 @@ Dieser Ansatz steht im Gegensatz zu anderen modernen JavaScript-Web-Frameworks w Das SPA-Modell hat seine Vorteile, diese kommen jedoch zum Preis zusätzlicher Komplexität und reduzierter Leistung. Solche Kompromisse schaden der Website-Leistung — einschließlich kritischer Metriken wie [Time to Interactive (TTI)](https://web.dev/interactive/). Gerade für inhaltsfokussierte Websites ist dies nicht sehr sinnvoll, da hier die Leistung beim ersten Laden entscheidend ist. -📚 [Erfahre mehr darüber, was die MPA-Architektur von Astro einzigartig macht](/de/concepts/mpa-vs-spa/) - - ## Standardmäßig schnell Eine gute Leistung ist immer wichtig, aber sie ist *besonders* wichtig für inhaltsfokussierte Websites. Es ist erwiesen, dass eine schlechte Leistung zu einem Verlust an Engagement, Konversionen und Einnahmen führt. Ein Beispiel: diff --git a/src/content/docs/en/concepts/mpa-vs-spa.mdx b/src/content/docs/en/concepts/mpa-vs-spa.mdx deleted file mode 100644 index 5de012cbe2016..0000000000000 --- a/src/content/docs/en/concepts/mpa-vs-spa.mdx +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: MPAs vs. SPAs -description: "Understanding the tradeoffs between Multi-Page Application (MPA) and Single-Page Application (SPA) architecture is key to understanding what makes Astro different from other web frameworks." -i18nReady: true ---- - -Understanding the tradeoffs between Multi-Page Application (MPA) and Single-Page Application (SPA) architecture is key to understanding what makes Astro different from other web frameworks like Next.js and Remix. - -## Terminology - -**A Multi-Page Application (MPA)** is a website consisting of multiple HTML pages, mostly rendered on a server. When you navigate to a new page, your browser requests a new page of HTML from the server. **Astro is an MPA framework.** Traditional MPA frameworks also include Ruby on Rails, Python Django, PHP Laravel, WordPress, Joomla, Drupal and static site builders like Eleventy or Hugo. - -**A Single-Page Application (SPA)** is a website consisting of a single JavaScript application that loads in the user's browser and then renders HTML locally. SPAs may *also* generate HTML on the server, but SPAs are unique in their ability to run your website as a JavaScript application in the browser to render a new page of HTML when you navigate. Next.js, Nuxt, SvelteKit, Remix, Gatsby, and Create React App are all examples of SPA frameworks. - -## Astro vs. other MPAs - -Astro is an MPA framework. However, Astro is also unique from other MPA frameworks. Its main difference is that it uses JavaScript as its server language and runtime. Traditional MPA frameworks would have you write a different language on the server (Ruby, PHP, etc.) and JavaScript on the browser. In Astro, you're always just writing JavaScript, HTML and CSS. That way, you can render your UI components (like React and Svelte) on both the server and the client. - -The result is a developer experience that feels a lot like Next.js and other modern web frameworks, but with performance characteristics of a more traditional MPA site architecture. - -## MPAs vs. SPAs - -There are three main differences to be aware of when comparing MPAs vs. SPAs: - -#### Server rendering (MPA) vs. client rendering (SPA) - -In MPAs, most of your page's HTML is rendered on the server. In SPAs, most HTML is rendered locally by running JavaScript in the browser. This has a dramatic impact on site behavior, performance, and SEO. - -Rendering your HTML in the browser may sound like the faster option vs. requesting it from a remote server. However, the opposite is true. An SPA will consistently perform slower on first page load vs. an MPA, unless server rendering is used. This is because an SPA needs to download, parse, and run an entire JavaScript application in the browser just to render any HTML on the page. Then, your SPA will likely need to fetch remote data anyway, introducing even more wait time before your page is finished loading. - -Most SPA frameworks will attempt to mitigate this performance problem by adding basic server rendering on the first page load. This is an improvement, but it introduces new complexity due to the fact that your website can now render in multiple ways and in multiple environments (server, browser). This also introduces a new "uncanny valley" problem where your site appears loaded (HTML) but is unresponsive since the application JavaScript logic is still loading in the background. - -MPAs render all HTML on a remote server and often don't require much (if any) JavaScript to run. This gives MPAs a much faster first load experience than SPAs, which is essential for content-focused websites. But this comes with a tradeoff: future page navigation can't benefit from local rendering, so long-lived user experiences won't benefit as much after the first page load. - - -#### Server routing (MPA) vs. client routing (SPA) - -Where does your website router live? In an MPA, every request to the server decides which HTML to respond with, so the routing logic lives in the server. In an SPA, your router locally runs in the browser and hijacks any navigation to render the new page without ever hitting a server. - -This is a similar tradeoff to the one described above: MPAs offer a faster first load experience, while SPAs may offer a faster second or third page load once the JavaScript application is fully loaded in the browser. - -SPAs can also offer more powerful transitions across page navigation because they control so much about page rendering. To match this support, MPAs leverage tools like Hotwire's [Turbo](https://turbo.hotwired.dev/) that mimic client routing by also controlling navigation in the browser. The HTML is still rendered on the server, but Turbo can now display a seamless transition between pages similar to client routing in an SPA. - -#### Server state management (MPA) vs. client state management (SPA) - -SPAs are the superior architecture for websites that deal with complex, multi-page state management (think: Gmail). This is because an SPA runs the entire website as a single JavaScript application, which lets the application maintain state and memory across multiple pages. Interactive, data-driven experiences like inboxes and admin dashboards do well as SPAs because the website itself is inherently "app-like". - - -## Are MPAs Better than SPAs? - -When comparing MPAs vs SPAs, there is no "better" or "worse" choice. It all comes down to tradeoffs. - -**Astro prioritizes the performance and simplicity of MPAs because it makes the most sense for our usecase of content-focused websites.** More stateful, interaction-heavy websites may benefit more from the app-like architecture that SPAs bring at the expense of first-load performance. - -:::note[Accessibility] -MPAs use the standard `` element for navigation. This provides important accessibility features such as managing focus states and announcing route changes by default. -::: - -## Case Studies - -Below are all of the public Astro comparisons that we are aware of: - -- [Astro vs. SPA (Next.js)](https://twitter.com/t3dotgg/status/1437195415439360003) - 94% less JavaScript -- [Astro vs. SPA (Next.js)](https://twitter.com/jlengstorf/status/1442707241627385860?lang=en) - 34% faster load -- [Astro vs. SPA (Next.js)](https://vanntile.com/blog/next-to-astro) – 65% network usage reduction -- [Astro vs. SPA (Remix, SvelteKit)](https://www.youtube.com/watch?v=2ZEMb_H-LYE&t=8163s) - "That [Lighthouse score] is incredible." -- [Astro vs. Qwik](https://www.youtube.com/watch?v=2ZEMb_H-LYE&t=8504s) - 43% faster TTI - - -If you know a public migration or benchmark and don't see it listed here, please create a PR to add it. -## More Resources - -If you'd like to learn more, Surma (Google) and Jake Archibald (Google) recorded a great back-and-forth discussion [on this exact topic.](https://www.youtube.com/watch?v=ivLhf3hq7eM) - - diff --git a/src/content/docs/en/concepts/why-astro.mdx b/src/content/docs/en/concepts/why-astro.mdx index 759ba2f542478..460d2b9c8cbe9 100644 --- a/src/content/docs/en/concepts/why-astro.mdx +++ b/src/content/docs/en/concepts/why-astro.mdx @@ -37,9 +37,6 @@ This approach stands in contrast to other modern JavaScript web frameworks like The SPA model has its benefits. However, these come at the expense of additional complexity and performance tradeoffs. These tradeoffs harm page performance -- including critical metrics like [Time to Interactive (TTI)](https://web.dev/interactive/) -- which doesn't make much sense for content-focused websites where first-load performance is essential. -📚 [Learn more about what makes Astro's MPA architecture unique.](/en/concepts/mpa-vs-spa/) - - ## Fast by default Good performance is always important, but it is *especially* critical for content-focused websites. It has been well-proven that poor performance loses you engagement, conversions, and money. For example: 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 eb5d964c2a892..023e0f034469c 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 @@ -43,7 +43,7 @@ Here are some key concepts and migration strategies to help you get started. Use When you rebuild your CRA site in Astro, you will notice some important differences: -- [MPA vs SPA](/en/concepts/mpa-vs-spa/): CRA is a single-page application that uses `index.js` as your project's root. Astro is a multi-page site, and `index.astro` is your home page. +- CRA is a single-page application that uses `index.js` as your project's root. Astro is a multi-page site, and `index.astro` is your home page. - [`.astro` components](/en/core-concepts/astro-components/) are not written as exported functions that return page templating. Instead, you'll split your code into a "code fence" for your JavaScript and a body exclusively for the HTML you generate. diff --git a/src/content/docs/en/guides/migrate-to-astro/from-docusaurus.mdx b/src/content/docs/en/guides/migrate-to-astro/from-docusaurus.mdx index b02b0b753112a..5d685f3f9e901 100644 --- a/src/content/docs/en/guides/migrate-to-astro/from-docusaurus.mdx +++ b/src/content/docs/en/guides/migrate-to-astro/from-docusaurus.mdx @@ -33,7 +33,7 @@ Docusaurus and Astro share some similarities that will help you migrate your pro When you rebuild your Docusaurus site in Astro, you will notice some important differences: -- [MPA vs SPA](/en/concepts/mpa-vs-spa/): Docusaurus is a React-based single-page application (SPA). Astro sites are multi-page apps built using [`.astro` components](/en/core-concepts/astro-components/), but can also support [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/en/core-concepts/framework-components/) and raw HTML templating. +- Docusaurus is a React-based single-page application (SPA). Astro sites are multi-page apps built using [`.astro` components](/en/core-concepts/astro-components/), but can also support [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/en/core-concepts/framework-components/) and raw HTML templating. - Docusaurus was designed to build documentation websites and has some built-in, documentation-specific website features that you would have to build yourself in Astro. Instead, Astro offers some of these features through an [official docs theme](https://starlight.astro.build). This website was the inspiration for that template! You can also find more [community docs themes](https://astro.build/themes?search=&categories%5B%5D=docs) with built-in features in our Themes Showcase. diff --git a/src/content/docs/en/guides/migrate-to-astro/from-eleventy.mdx b/src/content/docs/en/guides/migrate-to-astro/from-eleventy.mdx index 38631f7935ae5..f1feb93d836b4 100644 --- a/src/content/docs/en/guides/migrate-to-astro/from-eleventy.mdx +++ b/src/content/docs/en/guides/migrate-to-astro/from-eleventy.mdx @@ -19,8 +19,6 @@ Eleventy (11ty) and Astro share some similarities that will help you migrate you - Astro and Eleventy both allow you to use a [headless CMS, APIs or Markdown files for data](/en/guides/data-fetching/). You can continue to use your preferred [content authoring](/en/guides/content/) system, and will be able to keep your existing content. -- Both Astro and Eleventy build [multi-page apps](/en/concepts/mpa-vs-spa/). - ## Key Differences between Eleventy (11ty) and Astro When you rebuild your Eleventy (11ty) site in Astro, you will notice some important differences: 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 9496bc43dbbd3..d4d3b6c55b002 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 @@ -29,7 +29,7 @@ Gatsby and Astro share some similarities that will help you migrate your project When you rebuild your Gatsby site in Astro, you will notice some important differences: -- [MPA vs SPA](/en/concepts/mpa-vs-spa/): Gatsby projects are React single-page apps and use `index.js` as your project's root. Astro projects are multi-page sites, and `index.astro` is your home page. +- Gatsby projects are React single-page apps and use `index.js` as your project's root. Astro projects are multi-page sites, and `index.astro` is your home page. - [Astro components](/en/core-concepts/astro-components/) are not written as exported functions that return page templating. Instead, you'll split your code into a "code fence" for your JavaScript and a body exclusively for the HTML you generate. diff --git a/src/content/docs/en/guides/migrate-to-astro/from-gridsome.mdx b/src/content/docs/en/guides/migrate-to-astro/from-gridsome.mdx index 5ee1a2f37d8a2..3ac0c223a651a 100644 --- a/src/content/docs/en/guides/migrate-to-astro/from-gridsome.mdx +++ b/src/content/docs/en/guides/migrate-to-astro/from-gridsome.mdx @@ -27,7 +27,7 @@ Gridsome and Astro share some similarities that will help you migrate your proje When you rebuild your Gridsome site in Astro, you will notice some important differences: -- [MPA vs SPA](/en/concepts/mpa-vs-spa/): Gridsome is a Vue-based single-page application (SPA). Astro sites are multi-page apps built using [`.astro` components](/en/core-concepts/astro-components/), but can also support [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/en/core-concepts/framework-components/) and raw HTML templating. +- Gridsome is a Vue-based single-page application (SPA). Astro sites are multi-page apps built using [`.astro` components](/en/core-concepts/astro-components/), but can also support [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/en/core-concepts/framework-components/) and raw HTML templating. - As an SPA, Gridsome uses `vue-router` for SPA routing, and `vue-meta` for managing ``. In Astro, you will create separate HTML pages and control your page `` directly, or in a [layout component](/en/core-concepts/layouts/). 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 6dfd7798e88d8..11041b32ad4b1 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 @@ -26,7 +26,7 @@ Next.js and Astro share some similarities that will help you migrate your projec When you rebuild your Next.js site in Astro, you will notice some important differences: -- [MPA vs SPA](/en/concepts/mpa-vs-spa/): Next.js is a React single-page app, and uses `index.js` as your project's root. Astro is a multi-page site, and `index.astro` is your home page. +- Next.js is a React single-page app, and uses `index.js` as your project's root. Astro is a multi-page site, and `index.astro` is your home page. - [`.astro` components](/en/core-concepts/astro-components/) are not written as exported functions that return page templating. Instead, you'll split your code into a "code fence" for your JavaScript and a body exclusively for the HTML you generate. diff --git a/src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx b/src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx index d95736d2148ca..86f4f1f5c92c8 100644 --- a/src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx +++ b/src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx @@ -28,7 +28,7 @@ Nuxt and Astro share some similarities that will help you migrate your project: When you rebuild your Nuxt site in Astro, you will notice some important differences: -- [MPA vs SPA](/en/concepts/mpa-vs-spa/): Nuxt is a Vue-based SPA (single-page application). Astro sites are multi-page apps built using `.astro` components, but can also support React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit and raw HTML templating. +- Nuxt is a Vue-based SPA (single-page application). Astro sites are multi-page apps built using `.astro` components, but can also support React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit and raw HTML templating. - [Page Routing](/en/core-concepts/astro-pages/#file-based-routing): Nuxt uses `vue-router` for SPA routing, and `vue-meta` for managing ``. In Astro, you will create separate HTML page routes and control your page `` directly, or in a layout component. diff --git a/src/content/docs/en/guides/migrate-to-astro/from-sveltekit.mdx b/src/content/docs/en/guides/migrate-to-astro/from-sveltekit.mdx index 29608a67f9431..29351a9cce8a8 100644 --- a/src/content/docs/en/guides/migrate-to-astro/from-sveltekit.mdx +++ b/src/content/docs/en/guides/migrate-to-astro/from-sveltekit.mdx @@ -27,7 +27,7 @@ SvelteKit and Astro share some similarities that will help you migrate your proj When you rebuild your SvelteKit site in Astro, you will notice some important differences: -- [MPA vs alternatives](/en/concepts/mpa-vs-spa/): Astro sites are multi-page apps, whereas SvelteKit defaults to SPAs (single-page applications) with server-side rendering, but can also create MPAs, traditional SPAs, or you can mix and match these techniques within an app. +- Astro sites are multi-page apps, whereas SvelteKit defaults to SPAs (single-page applications) with server-side rendering, but can also create MPAs, traditional SPAs, or you can mix and match these techniques within an app. - [Components](/en/core-concepts/astro-components/): SvelteKit uses [Svelte](https://svelte.dev). Astro pages are built using [`.astro` components](/en/core-concepts/astro-components/), but can also support [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/en/core-concepts/framework-components/) and raw HTML templating. diff --git a/src/content/docs/en/guides/migrate-to-astro/from-vuepress.mdx b/src/content/docs/en/guides/migrate-to-astro/from-vuepress.mdx index 037d853680ff9..dd0771534421e 100644 --- a/src/content/docs/en/guides/migrate-to-astro/from-vuepress.mdx +++ b/src/content/docs/en/guides/migrate-to-astro/from-vuepress.mdx @@ -25,7 +25,7 @@ VuePress and Astro share some similarities that will help you migrate your proje When you rebuild your VuePress site in Astro, you will notice some important differences. -- [MPA vs SPA](/en/concepts/mpa-vs-spa/): VuePress is a Vue-based single-page application (SPA). Astro sites are multi-page apps built using [`.astro` components](/en/core-concepts/astro-components/), but can also support [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/en/core-concepts/framework-components/) and raw HTML templating. +- VuePress is a Vue-based single-page application (SPA). Astro sites are multi-page apps built using [`.astro` components](/en/core-concepts/astro-components/), but can also support [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/en/core-concepts/framework-components/) and raw HTML templating. - [Layout templates](/en/core-concepts/layouts/): VuePress sites are created using Markdown (`.md`) files for page content and HTML (`.html`) templates for layout. Astro is component-based, and uses Astro components, which include HTML templating for pages, layouts and individual UI elements. Astro can also create [pages from `.md` and `.mdx` files](/en/guides/markdown-content/), using an Astro layout component for wrapping Markdown content in a page template. diff --git a/src/content/docs/es/concepts/why-astro.mdx b/src/content/docs/es/concepts/why-astro.mdx index b03d9c6c14645..5e4b1b6fe95fd 100644 --- a/src/content/docs/es/concepts/why-astro.mdx +++ b/src/content/docs/es/concepts/why-astro.mdx @@ -38,8 +38,6 @@ Este enfoque entra en contraste con otros frameworks web JavaScript modernos com El modelo _SPA_ tiene sus ventajas. Sin embargo, esto se logra a expensas de una complejidad adicional y compensaciones de rendimiento. Estas compensaciones perjudican el rendimiento de la página, incluidas métricas críticas como [Tiempo para interactuar (en inglés: _TTI_ o _Time to Interactive_)](https://web.dev/interactive/), lo que no tiene mucho sentido para los sitios web enfocados en el contenido, donde el rendimiento de la primera carga es esencial. -📚 [Obtén más información sobre qué hace que la arquitectura _MPA_ de Astro sea única](/es/concepts/mpa-vs-spa/) - ## Rápido por defecto El rendimiento siempre es importante, pero es *especialmente* crítico para los sitios web enfocados en el contenido. Se ha comprobado que un bajo rendimiento te hace perder retención, conversiones y dinero. Por ejemplo: diff --git a/src/content/docs/es/guides/migrate-to-astro/from-create-react-app.mdx b/src/content/docs/es/guides/migrate-to-astro/from-create-react-app.mdx index fa5ade491e4cc..7d88f18a3082f 100644 --- a/src/content/docs/es/guides/migrate-to-astro/from-create-react-app.mdx +++ b/src/content/docs/es/guides/migrate-to-astro/from-create-react-app.mdx @@ -43,7 +43,7 @@ Aquí tienes algunos conceptos clave y estrategias de migración para ayudarte a Cuando reconstruyas tu sitio de CRA en Astro, notarás algunas diferencias importantes: -- [MPA vs SPA](/es/concepts/mpa-vs-spa/): CRA es una aplicación de una sola página que utiliza `index.js` como la raíz de tu proyecto. Astro es un sitio de múltiples páginas, y `index.astro` es tu página de inicio. +- CRA es una aplicación de una sola página que utiliza `index.js` como la raíz de tu proyecto. Astro es un sitio de múltiples páginas, y `index.astro` es tu página de inicio. - Los [componentes `.astro`](/es/core-concepts/astro-components/) no se escriben como funciones exportadas que devuelven plantillas de página. En su lugar, dividirás tu código en una "valla de código" para tu JavaScript y un cuerpo exclusivo para el HTML que generas. diff --git a/src/content/docs/es/guides/migrate-to-astro/from-docusaurus.mdx b/src/content/docs/es/guides/migrate-to-astro/from-docusaurus.mdx index 532c97650f551..94d4d3137a0c7 100644 --- a/src/content/docs/es/guides/migrate-to-astro/from-docusaurus.mdx +++ b/src/content/docs/es/guides/migrate-to-astro/from-docusaurus.mdx @@ -32,7 +32,7 @@ Docusaurus y Astro comparten algunas similitudes que te ayudarán a migrar tu pr Cuando reconstruyas tu sitio de Docusaurus a Astro, notarás algunas diferencias importantes: -- [MPA vs SPA](/es/concepts/mpa-vs-spa/): Docusaurus es una aplicación de una sola página (SPA) construida en React. Los sitios de Astro son aplicaciones de varias páginas construidas utilizando [componentes `.astro`](/es/core-concepts/astro-components/), pero también puede admitir [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/es/core-concepts/framework-components/) y plantillas de HTML sin procesar. +- Docusaurus es una aplicación de una sola página (SPA) construida en React. Los sitios de Astro son aplicaciones de varias páginas construidas utilizando [componentes `.astro`](/es/core-concepts/astro-components/), pero también puede admitir [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/es/core-concepts/framework-components/) y plantillas de HTML sin procesar. - Docusaurus fue diseñado para construir sitios web de documentación y tiene algunas características integradas, específicas para sitios web de documentación que tendrás que construir por ti mismo en Astro. En cambio, Astro ofrece algunas de estas características a través de un [tema oficial de documentación](https://starlight.astro.build). ¡Este sitio web fue la inspiración para esa plantilla! También puedes encontrar más [temas de documentación de la comunidad](https://astro.build/themes?search=&categories%5B%5D=docs) con características integradas en nuestro mostrador de temas. diff --git a/src/content/docs/es/guides/migrate-to-astro/from-eleventy.mdx b/src/content/docs/es/guides/migrate-to-astro/from-eleventy.mdx index f4cb4b415adde..cdf29e3779901 100644 --- a/src/content/docs/es/guides/migrate-to-astro/from-eleventy.mdx +++ b/src/content/docs/es/guides/migrate-to-astro/from-eleventy.mdx @@ -19,7 +19,7 @@ Eleventy (11ty) y Astro comparten algunas similitudes que te ayudarán a migrar - Astro y Eleventy te permiten usar un [CMS headless, APIs o archivos Markdown para datos](/es/guides/data-fetching/). Puedes continuar usando tu sistema de [autoría de contenido](/es/guides/content/) preferido, y podrás mantener tu contenido existente. -- Astro y Eleventy construyen [aplicaciones de múltiples páginas](/es/concepts/mpa-vs-spa/). +- Astro y Eleventy construyen aplicaciones de múltiples páginas. ## Principales diferencias entre Eleventy (11ty) y Astro diff --git a/src/content/docs/es/guides/migrate-to-astro/from-gatsby.mdx b/src/content/docs/es/guides/migrate-to-astro/from-gatsby.mdx index f176ef5c7a79f..80668769a199a 100644 --- a/src/content/docs/es/guides/migrate-to-astro/from-gatsby.mdx +++ b/src/content/docs/es/guides/migrate-to-astro/from-gatsby.mdx @@ -29,7 +29,7 @@ Gatsby y Astro comparten algunas similitudes que te ayudarán a migrar tu proyec Cuando reconstruyes tu sitio de Gatsby en Astro, notarás algunas diferencias importantes: -- [MPA vs SPA](/es/concepts/mpa-vs-spa/): Los proyectos de Gatsby son aplicaciones de una sola página (SPA) de React y utilizan `index.js` como raíz del proyecto. Los proyectos de Astro son sitios multipágina y `index.astro` es tu página de inicio. +- Los proyectos de Gatsby son aplicaciones de una sola página (SPA) de React y utilizan `index.js` como raíz del proyecto. Los proyectos de Astro son sitios multipágina y `index.astro` es tu página de inicio. - [Componentes Astro](/es/core-concepts/astro-components/) No se escriben como funciones exportadas que devuelven plantillas de páginas. En su lugar, dividirás tu código en un "bloque de codigo" para tu JavaScript y un cuerpo exclusivamente para el HTML que generes. diff --git a/src/content/docs/es/guides/migrate-to-astro/from-gridsome.mdx b/src/content/docs/es/guides/migrate-to-astro/from-gridsome.mdx index 5dcaca95674b2..7fc57d55fed58 100644 --- a/src/content/docs/es/guides/migrate-to-astro/from-gridsome.mdx +++ b/src/content/docs/es/guides/migrate-to-astro/from-gridsome.mdx @@ -27,7 +27,7 @@ Gridsome y Astro comparten algunas similitudes que te ayudarán a migrar tu proy Cuando reconstruyas tu sitio de Gridsome a Astro, notarás algunas diferencias importantes: -- [MPA vs SPA](/es/concepts/mpa-vs-spa/): Gridsome es una aplicación de una sola página (SPA) construida en Vue. Los sitios de Astro son aplicaciones de varias páginas construidas utilizando [componentes `.astro`](/es/core-concepts/astro-components/), pero también puede admitir [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/es/core-concepts/framework-components/) y plantillas de HTML sin procesar. +- Gridsome es una aplicación de una sola página (SPA) construida en Vue. Los sitios de Astro son aplicaciones de varias páginas construidas utilizando [componentes `.astro`](/es/core-concepts/astro-components/), pero también puede admitir [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/es/core-concepts/framework-components/) y plantillas de HTML sin procesar. - Como una SPA, Gridsome utiliza `vue-router` para el enrutamiento SPA, y `vue-meta` para gestionar la etiqueta ``. En Astro, crearás páginas HTML separadas y controlarás la etiqueta `` de cada página directamente, o a través de un [componente de diseño](/es/core-concepts/layouts/). @@ -67,4 +67,4 @@ Para convertir otros tipos de sitios, como un portafolio o sitio de documentaci ## Recursos de la comunidad -- Artículo de blog: [Migración de Gridsome a Astro](https://fyodor.io/migration-from-gridsome-to-astro/). \ No newline at end of file +- Artículo de blog: [Migración de Gridsome a Astro](https://fyodor.io/migration-from-gridsome-to-astro/). diff --git a/src/content/docs/es/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/es/guides/migrate-to-astro/from-nextjs.mdx index d7d5c75291a1d..9133fb69ad8c0 100644 --- a/src/content/docs/es/guides/migrate-to-astro/from-nextjs.mdx +++ b/src/content/docs/es/guides/migrate-to-astro/from-nextjs.mdx @@ -26,7 +26,7 @@ Next.js y Astro comparten algunas similitudes que te ayudarán a migrar tu proye Cuando reconstruyas tu sitio de Next.js a Astro, notarás algunas diferencias importantes: -- [MPA vs SPA](/es/concepts/mpa-vs-spa/): Next.js es una aplicación de página única de React, y utiliza `index.js` como raíz de tu proyecto. Astro es un sitio multipágina, y `index.astro` es tu página de inicio. +- Next.js es una aplicación de página única de React, y utiliza `index.js` como raíz de tu proyecto. Astro es un sitio multipágina, y `index.astro` es tu página de inicio. - [Los Componentes `.astro`](/es/core-concepts/astro-components/) no se escriben como funciones exportadas que devuelven plantillas de página. En su lugar, dividirás tu código en "bloques de código" para tu JavaScript y un cuerpo exclusivamente para el HTML que generes. diff --git a/src/content/docs/es/guides/migrate-to-astro/from-nuxtjs.mdx b/src/content/docs/es/guides/migrate-to-astro/from-nuxtjs.mdx index ec0dcb116d1c1..c05ead43aba31 100644 --- a/src/content/docs/es/guides/migrate-to-astro/from-nuxtjs.mdx +++ b/src/content/docs/es/guides/migrate-to-astro/from-nuxtjs.mdx @@ -28,7 +28,7 @@ Nuxt y Astro comparten algunas similitudes que te ayudarán a migrar tu proyecto Cuando reconstruyas tu sitio Nuxt en Astro, notarás algunas diferencias importantes: -- [MPA vs SPA](/es/concepts/mpa-vs-spa/): Nuxt es una SPA basada en Vue (aplicación de una sola página). Los sitios de Astro son aplicaciones multipágina construidas usando componentes `.astro`, pero también pueden admitir React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit y plantillas HTML sin procesar. +- Nuxt es una SPA basada en Vue (aplicación de una sola página). Los sitios de Astro son aplicaciones multipágina construidas usando componentes `.astro`, pero también pueden admitir React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit y plantillas HTML sin procesar. - [Enrutamiento de Página](/es/core-concepts/astro-pages/#enrutamiento-basado-en-archivos): Nuxt usa `vue-router` para el enrutamiento SPA, y `vue-meta` para administrar ``. En Astro, crearás rutas de página HTML separadas y controlarás tu `` directamente o en un componente plantilla. diff --git a/src/content/docs/es/guides/migrate-to-astro/from-sveltekit.mdx b/src/content/docs/es/guides/migrate-to-astro/from-sveltekit.mdx index 85be8ea62a82c..4381567ca79b5 100644 --- a/src/content/docs/es/guides/migrate-to-astro/from-sveltekit.mdx +++ b/src/content/docs/es/guides/migrate-to-astro/from-sveltekit.mdx @@ -27,7 +27,7 @@ SvelteKit y Astro comparten algunas similitudes que te ayudarán a migrar tu pro Cuando reconstruyas tu sitio de SvelteKit a Astro, notarás algunas diferencias importantes: -- [MPA vs alternativas](/es/concepts/mpa-vs-spa/): Los sitios de Astro son aplicaciones de varias páginas, mientras que en SvelteKit se enfoca en aplicaciones de una sola página (SPA) con renderizado en el lado del servidor, pero también puede crear aplicaciones de varias páginas (MPA), SPAs tradicionales, o mezclar y combinar estas técnicas dentro de una misma aplicación. +- Los sitios de Astro son aplicaciones de varias páginas, mientras que en SvelteKit se enfoca en aplicaciones de una sola página (SPA) con renderizado en el lado del servidor, pero también puede crear aplicaciones de varias páginas (MPA), SPAs tradicionales, o mezclar y combinar estas técnicas dentro de una misma aplicación. - [Componentes](/es/core-concepts/astro-components/): SvelteKit usa [Svelte](https://svelte.dev). Las páginas de Astro se construyen utilizando [componentes `.astro`](/es/core-concepts/astro-components/), pero también puede admitir [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/es/core-concepts/framework-components/) y plantillas HTML sin procesar. diff --git a/src/content/docs/es/guides/migrate-to-astro/from-vuepress.mdx b/src/content/docs/es/guides/migrate-to-astro/from-vuepress.mdx index d5b035896dc70..d15d57cefcab3 100644 --- a/src/content/docs/es/guides/migrate-to-astro/from-vuepress.mdx +++ b/src/content/docs/es/guides/migrate-to-astro/from-vuepress.mdx @@ -25,7 +25,7 @@ VuePress y Astro comparten algunas similitudes que te ayudarán a migrar tu proy Cuando reconstruyas tu sitio VuePress en Astro, notarás algunas diferencias importantes. -- [MPA vs SPA](/es/concepts/mpa-vs-spa/): VuePress es una aplicación de página única (SPA) basada en Vue. Los sitios de Astro son aplicaciones de varias páginas construidas usando [componentes `.astro`](/es/core-concepts/astro-components/), pero también pueden admitir [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/es/core-concepts/framework-components/) y plantillas HTML sin procesar. +- VuePress es una aplicación de página única (SPA) basada en Vue. Los sitios de Astro son aplicaciones de varias páginas construidas usando [componentes `.astro`](/es/core-concepts/astro-components/), pero también pueden admitir [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/es/core-concepts/framework-components/) y plantillas HTML sin procesar. - [Plantillas de diseño](/es/core-concepts/layouts/): los sitios de VuePress se crean usando archivos Markdown (`.md`) para el contenido de la página y plantillas HTML (`.html`) para el diseño. Astro está basado en componentes y usa componentes Astro, que incluyen plantillas HTML para páginas, diseños y elementos de interfaz de usuario individuales. Astro también puede crear [páginas a partir de archivos `.md` y `.mdx`](/es/guides/markdown-content/), usando un componente de diseño Astro para envolver el contenido Markdown en una plantilla de página. diff --git a/src/content/docs/fr/concepts/why-astro.mdx b/src/content/docs/fr/concepts/why-astro.mdx index 244eec6c273ec..a3798d66e2805 100644 --- a/src/content/docs/fr/concepts/why-astro.mdx +++ b/src/content/docs/fr/concepts/why-astro.mdx @@ -40,10 +40,6 @@ Cette approche s'oppose à d'autres frameworks web JavaScript modernes tels que Le modèle SPA a ses avantages. Cependant, ceux-ci sont obtenus au prix d'une complexité supplémentaire et de compromis en matière de performances. Ces compromis nuisent aux performances de la page - y compris à des mesures critiques comme le [Time to Interactive (TTI)](https://web.dev/interactive/) - ce qui n'a pas beaucoup de sens pour les sites Web axés sur le contenu où les performances au premier chargement sont essentielles. -📚 [En savoir plus sur ce qui rend l'architecture MPA unique architecture](/fr/concepts/mpa-vs-spa/) - - - ## Rapide par défaut De bonnes performances sont toujours importantes, mais elles sont *spécialement* critiques pour les sites Web axés sur le contenu. Il a été prouvé qu'une mauvaise performance vous fait perdre de l'engagement, des conversions et de l'argent. Par exemple : diff --git a/src/content/docs/it/concepts/why-astro.mdx b/src/content/docs/it/concepts/why-astro.mdx index 4f2f14fe0b0a8..71b5395a2f454 100644 --- a/src/content/docs/it/concepts/why-astro.mdx +++ b/src/content/docs/it/concepts/why-astro.mdx @@ -36,8 +36,6 @@ Questo approccio si contrappone ad altri web framework JavaScript moderni come N Il modello SPA ha i suoi vantaggi. Tuttavia, ciò comporta un maggiore livello di complessità e compromessi sulle prestazioni. Questi compromessi danneggiano le prestazioni delle pagine, comprese le metriche critiche come il [Time to Interactive (TTI)](https://web.dev/interactive/), il che non ha molto senso per siti web orientati al contenuto in cui le prestazioni del primo caricamento sono essenziali. -📚 [Scopri di più su cosa rende unica l'architettura MPA di Astro.](/it/concepts/mpa-vs-spa/) - ## Veloce per default Buone prestazioni sono sempre importanti, ma sono *particolarmente* critiche per i siti web orientati al contenuto. È stato ampiamente dimostrato che le prestazioni scadenti comportano una perdita di coinvolgimento, conversioni e denaro. Ad esempio: diff --git a/src/content/docs/ja/concepts/why-astro.mdx b/src/content/docs/ja/concepts/why-astro.mdx index 9cdddfeb631d6..729d34f63c43c 100644 --- a/src/content/docs/ja/concepts/why-astro.mdx +++ b/src/content/docs/ja/concepts/why-astro.mdx @@ -38,9 +38,6 @@ Astroは、**コンテンツにフォーカスした高速なWebサイト**を SPAモデルには利点があります。しかし、その代償として、さらなる複雑さとパフォーマンスのトレードオフが生じます。これらのトレードオフは、[インタラクティブになるまでの時間（TTI: Time To Interactive）](https://web.dev/interactive/)のような重要な指標を含むページパフォーマンスに悪影響を及ぼし、ファーストロードのパフォーマンスが不可欠なコンテンツ重視のWebサイトではあまり意味を成しません。 -📚 [AstroのMPAアーキテクチャの特徴について、詳しくはこちらをご覧ください。](/ja/concepts/mpa-vs-spa/) - - ## デフォルトで高速 優れたパフォーマンスは常に重要ですが、コンテンツを重視したWebサイトでは**とくに**重要です。パフォーマンスが低いと、エンゲージメント、コンバージョン、お金が失われることは、十分に証明されています。たとえば、次のような例があります。 diff --git a/src/content/docs/ko/concepts/why-astro.mdx b/src/content/docs/ko/concepts/why-astro.mdx index 48f0d826bef3e..4c1968be90056 100644 --- a/src/content/docs/ko/concepts/why-astro.mdx +++ b/src/content/docs/ko/concepts/why-astro.mdx @@ -36,9 +36,6 @@ Astro는 **빠른**, **콘텐츠 중심** 웹사이트를 구축하기 위한 ** SPA 모델에는 장점이 있지만, 이는 추가 복잡성과 성능 트레이드오프를 수반합니다. 이러한 트레이드오프는 페이지 성능 -- 특히 [Time to Interactive (TTI)](https://web.dev/interactive/)와 같은 중요한 지표를 포함하여 -- 에 영향을 미치며, 첫 로드 성능이 중요한 콘텐츠 중심 웹사이트에서는 별로 의미가 없습니다. -📚 [Astro의 MPA 아키텍처가 독특한 이유에 대해 자세히 알아보세요!](/ko/concepts/mpa-vs-spa/) - - ## 빠른 성능 좋은 성능은 항상 중요하지만 콘텐츠 중심 웹사이트의 경우 특히 더 중요합니다. @@ -76,4 +73,4 @@ Astro는 다른 UI 프레임워크 및 언어보다 덜 복잡하도록 설계 만약 Astro를 더 많이 직접 제어하고 싶다면 [React](https://www.npmjs.com/package/@astrojs/react), [Svelte](https://www.npmjs.com/package/@astrojs/svelte), [Vue](https://www.npmjs.com/package/@astrojs/vue), [Tailwind CSS](https://www.npmjs.com/package/@astrojs/tailwind), [MDX](https://www.npmjs.com/package/@astrojs/mdx), [이미지 최적화](https://www.npmjs.com/package/@astrojs/image) 등과 같은 [100개 이상의 인터그레이션 기능](https://astro.build/integrations/)으로 Astro를 확장할 수도 있습니다. [자주 사용하는 CMS 연결](https://astro.build/integrations/)하거나 또는 [자주 사용하는 호스트에 배포](/ko/guides/deploy/)하는 것도 명령어 한 줄으로 가능합니다. -Astro는 UI에 구애받지 않으므로 **여러분이 원하는 UI 프레임워크**를 가져올 수 있습니다. React, Preact, Solid, Svelte, Vue, Lit는 모두 Astro에서 공식적으로 지원됩니다. 동일한 페이지에서 서로 다른 프레임워크를 조합하여 사용할 수도 있으므로 향후 마이그레이션이 더 쉬워지고 프로젝트가 단일 프레임워크에 종속되는 것을 방지할 수 있습니다. \ No newline at end of file +Astro는 UI에 구애받지 않으므로 **여러분이 원하는 UI 프레임워크**를 가져올 수 있습니다. React, Preact, Solid, Svelte, Vue, Lit는 모두 Astro에서 공식적으로 지원됩니다. 동일한 페이지에서 서로 다른 프레임워크를 조합하여 사용할 수도 있으므로 향후 마이그레이션이 더 쉬워지고 프로젝트가 단일 프레임워크에 종속되는 것을 방지할 수 있습니다. diff --git a/src/content/docs/pl/concepts/why-astro.mdx b/src/content/docs/pl/concepts/why-astro.mdx index 33a126d9a546d..994a2be4dcc71 100644 --- a/src/content/docs/pl/concepts/why-astro.mdx +++ b/src/content/docs/pl/concepts/why-astro.mdx @@ -37,9 +37,6 @@ To podejście stoi w kontrze do innych współczesnych JavaScriptowych framework Model SPA ma swoje korzyści. Jednak są one okupione dodatkową złożonością i kompromisami związanymi z wydajnością. Te kompromisy obniżają wydajność strony — włączając w to istotne metryki, jak [Czas do Interaktywności (ang. *Time to Interactive* — TTI)](https://web.dev/interactive/) — i nie mają one większego sensu dla stron opartych na treści, gdzie szybkość pierwszego ładowania jest kluczowa. -📚 [Dowiedz się więcej o tym, co czyni architekturę MPA Astro wyjątkową.](/pl/concepts/mpa-vs-spa/) - - ## Domyślnie szybki Dobra wydajność zawsze jest ważna, lecz dla stron opartych o treści jest *wyjątkowo* krytyczna. To, że niska wydajność negatywnie wpływa na zaangażowanie, konwersje i potencjalny zysk, zostało dobrze sprawdzone. Na przykład: diff --git a/src/content/docs/pt-br/concepts/why-astro.mdx b/src/content/docs/pt-br/concepts/why-astro.mdx index b7a38ebfe64b3..776742166fb00 100644 --- a/src/content/docs/pt-br/concepts/why-astro.mdx +++ b/src/content/docs/pt-br/concepts/why-astro.mdx @@ -37,9 +37,6 @@ Esta abordagem se destaca em contraste com outros frameworks web JavaScript como O modelo SPA tem seus benefícios. Porém, eles vem com o custo de complexidade adicional e tradeoffs de performance. Esses tradeoffs prejudicam a performance da página -- incluindo métricas críticas como [Time to Interactive (TTI)](https://web.dev/interactive/) -- que não fazem muito sentido para websites focados em conteúdo onde a performance do primeiro carregamento é essencial. -📚 [Aprenda mais sobre o que faz a arquitetura MPA do Astro única.](/pt-br/concepts/mpa-vs-spa/) - - ## Rápido por padrão Boa performance é sempre importante, mas é *especialmente* crítica para websites focados em conteúdo. Já foi bem provado de que uma performance ruim te faz perder engajamento, conversões e dinheiro. Por exemplo: diff --git a/src/content/docs/ru/concepts/why-astro.mdx b/src/content/docs/ru/concepts/why-astro.mdx index 993e8d73e5820..bc20bf21316ee 100644 --- a/src/content/docs/ru/concepts/why-astro.mdx +++ b/src/content/docs/ru/concepts/why-astro.mdx @@ -58,9 +58,6 @@ SPA имеет свои преимущества. Однако это проис как [Время взаимодействия (TTI)](https://web.dev/interactive/) - что не имеет особого смысла для веб-сайтов, ориентированных на контент, где важна производительность при первой загрузке. -📚 [Узнайте больше о том, что делает архитектуру MPA Astro уникальной.](/ru/concepts/mpa-vs-spa/) - - ## Быстрый по-умолчанию Хорошая производительность важна всегда, но это *особенно* важно для веб-сайтов, ориентированных на контент. diff --git a/src/content/docs/zh-cn/concepts/why-astro.mdx b/src/content/docs/zh-cn/concepts/why-astro.mdx index a8ead377df02c..817e7473a713f 100644 --- a/src/content/docs/zh-cn/concepts/why-astro.mdx +++ b/src/content/docs/zh-cn/concepts/why-astro.mdx @@ -27,16 +27,17 @@ Astro 是**集多功能于一体的 Web 框架**，用于构建**快速、以内 ::: ## 服务器优先 + **Astro 尽可能利用服务器渲染而不是客户端渲染。** 这与传统服务器端框架（PHP、WordPress、Laravel、Ruby on Rails等）使用的方法相同，你不需要学习第二种服务端语言。 Astro 仍然使用 HTML、CSS和JavaScript(或TypeScript)。 这种方法与其他现代 JavaScript Web 框架 形成鲜明对比，如 Next.JS、SvelteKit、Nuxt、Remix 等。这些框架需要整个网站的客户端和服务器端渲染，以解决性能问题，这种方法被称为**单页应用程序(SPA)，** 与 Astro 的**多页应用程序（MPA）** 方式形成鲜明对比。 SPA模式有它的优势。然而，这些都是以牺牲额外的复杂性和性能权衡为代价，这些权衡会损坏页面性能——包括[可交互时间(TTI)](https://web.dev/interactive/) 等关键指标——这对于以内容为中心的网站没有多大意义，因为这些网站的首次加载性能至关重要。 -📚 [进一步了解 **Astro MPA** 架构的独特之处](/zh-cn/concepts/mpa-vs-spa/) - ## 默认快速 -良好的性能很重要，对于以内容为中心的网站尤其至关重要。事实证明，糟糕的表现会让你失去参与度、转化率和金钱。列如： + +良好的性能很重要，对于以内容为中心的网站尤其至关重要。事实证明，糟糕的表现会让您失去参与度、转化率和金钱。列如： + - 每快 100ms → 转化率增加 1% ([Mobify](https://web.dev/why-speed-matters/), 收入 +$380,000/年) - 每快 50% → 销售额增加 12% ([AutoAnything](https://www.digitalcommerce360.com/2010/08/19/web-accelerator-revs-conversion-and-sales-autoanything/)) - 每快 20% → 转换率增加 10% ([Furniture Village](https://www.thinkwithgoogle.com/intl/en-gb/marketing-strategies/app-and-mobile/furniture-village-and-greenlight-slash-page-load-times-boosting-user-experience/)) diff --git a/src/content/docs/zh-cn/guides/migrate-to-astro/from-create-react-app.mdx b/src/content/docs/zh-cn/guides/migrate-to-astro/from-create-react-app.mdx index d7e56de83cb80..eb0320529eb28 100644 --- a/src/content/docs/zh-cn/guides/migrate-to-astro/from-create-react-app.mdx +++ b/src/content/docs/zh-cn/guides/migrate-to-astro/from-create-react-app.mdx @@ -43,7 +43,7 @@ import App from '../cra-project/App.jsx' 在用 Astro 重新构建 CRA 站点时，你会注意到一些重要的差异： -- [MPA vs SPA](/zh-cn/concepts/mpa-vs-spa/)：CRA 是一个使用 `index.js` 作为项目根目录的单页面应用程序。Astro 是一个多页面站点，其中 `index.astro` 是你的首页。 +- CRA 是一个使用 `index.js` 作为项目根目录的单页面应用程序。Astro 是一个多页面站点，其中 `index.astro` 是你的首页。 - [`.astro` 组件](/zh-cn/core-concepts/astro-components/) 不是作为返回页面模板的导出函数而被构建。相反，你需要将代码分割到一个用于 JavaScript 的“代码围栏”和一个专门用于生成的 HTML 的“body”中。 diff --git a/src/content/docs/zh-cn/guides/migrate-to-astro/from-docusaurus.mdx b/src/content/docs/zh-cn/guides/migrate-to-astro/from-docusaurus.mdx index f9b18dfd0a290..532eafc1b3366 100644 --- a/src/content/docs/zh-cn/guides/migrate-to-astro/from-docusaurus.mdx +++ b/src/content/docs/zh-cn/guides/migrate-to-astro/from-docusaurus.mdx @@ -31,7 +31,7 @@ Docusaurus 和 Astro 之间有一些相似之处，这将有助于你迁移你 当你在 Astro 中重建你的 Docusaurus 站点时，你会注意到一些重要的区别： -- [MPA vs SPA](/zh-cn/concepts/mpa-vs-spa/)：Docusaurus 是一个基于React的单页应用程序(SPA)。Astro 站点是使用[`.astro`组件](/zh-cn/core-concepts/astro-components/)构建的多页应用程序，但也可以支持[React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/zh-cn/core-concepts/framework-components/)和原始 HTML 模板。 +- Docusaurus 是一个基于React的单页应用程序(SPA)。Astro 站点是使用[`.astro`组件](/zh-cn/core-concepts/astro-components/)构建的多页应用程序，但也可以支持[React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/zh-cn/core-concepts/framework-components/)和原始 HTML 模板。 - Docusaurus 设计用于构建文档网站，并且有一些内置的，特定于文档的网站功能，你需要在 Astro 中自己构建。相反，Astro 通过一个[官方的文档主题](https://starlight.astro.build)提供其中一些功能。这个网站就是该模板的灵感来源！你还可以在我们的主题展示中找到更多具有内置功能的[社区文档主题](https://astro.build/themes?search=&categories%5B%5D=docs)。 @@ -69,4 +69,4 @@ Docusaurus 可能处理了你的许多网站布局和元数据。你可能希望 ## 社区资源 -- 添加你自己的! \ No newline at end of file +- 添加你自己的! diff --git a/src/content/docs/zh-cn/guides/migrate-to-astro/from-eleventy.mdx b/src/content/docs/zh-cn/guides/migrate-to-astro/from-eleventy.mdx index fef3dfd162676..89b0a5b2dd88f 100644 --- a/src/content/docs/zh-cn/guides/migrate-to-astro/from-eleventy.mdx +++ b/src/content/docs/zh-cn/guides/migrate-to-astro/from-eleventy.mdx @@ -18,7 +18,7 @@ Eleventy (11ty) 和 Astro 有一些相似之处，这将帮助你迁移你的项 - Astro 和 Eleventy 都允许你使用[无头（headless）CMS，API 或 Markdown 文件获取数据](/zh-cn/guides/data-fetching/)。你可以继续使用你喜欢的[内容创作](/zh-cn/guides/content/)系统，并能保留你现有的内容。 -- Astro 和 Eleventy 都能构建[多页面应用](/zh-cn/concepts/mpa-vs-spa/)。 +- Astro 和 Eleventy 都能构建多页面应用。 ## Eleventy (11ty) 和 Astro 主要差异 @@ -64,4 +64,4 @@ Eleventy (11ty) 和 Astro 有一些相似之处，这将帮助你迁移你的项 ## 社区资源 -- 添加你自己！ \ No newline at end of file +- 添加你自己！ diff --git a/src/content/docs/zh-cn/guides/migrate-to-astro/from-gatsby.mdx b/src/content/docs/zh-cn/guides/migrate-to-astro/from-gatsby.mdx index c4dd8722d7241..195ef04eda2bc 100644 --- a/src/content/docs/zh-cn/guides/migrate-to-astro/from-gatsby.mdx +++ b/src/content/docs/zh-cn/guides/migrate-to-astro/from-gatsby.mdx @@ -30,7 +30,7 @@ Gatsby 和 Astro 共享一些相似性，这将帮助你迁移你的项目： 当你在 Astro 中重建你的 Gatsby 站点时，你会注意到一些重要的差异： -- [MPA vs SPA](/zh-cn/concepts/mpa-vs-spa/)：Gatsby 项目是 React 单页应用，并使用 `index.js` 作为你的项目的根。Astro 项目是多页站点，`index.astro` 是你的主页。 +- Gatsby 项目是 React 单页应用，并使用 `index.js` 作为你的项目的根。Astro 项目是多页站点，`index.astro` 是你的主页。 - [Astro 组件](/zh-cn/core-concepts/astro-components/)不是以返回页面模板的出口函数形式编写的。相反，你将你的代码分割为专门为你的 JavaScript 设计的 "代码围栏" 和专门为你生成的 HTML 设计的主体。 diff --git a/src/content/docs/zh-cn/guides/migrate-to-astro/from-gridsome.mdx b/src/content/docs/zh-cn/guides/migrate-to-astro/from-gridsome.mdx index 25e6ee39ee730..fe097985d278c 100644 --- a/src/content/docs/zh-cn/guides/migrate-to-astro/from-gridsome.mdx +++ b/src/content/docs/zh-cn/guides/migrate-to-astro/from-gridsome.mdx @@ -27,7 +27,7 @@ Gridsome 和 Astro 有一些相似之处，这将帮助你迁移你的项目： 当你在 Astro 中重建你的 Gridsome 网站时，你会注意到一些重要的差别： -- [MPA vs SPA](/zh-cn/concepts/mpa-vs-spa/)：Gridsome 是一个基于 Vue的单页应用程序（SPA）。而 Astro 站点是多页应用程序，它们使用[`.astro` 组件](/zh-cn/core-concepts/astro-components/)构建，但也可以支持 [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/zh-cn/core-concepts/framework-components/) 和原生HTML模板。 +- Gridsome 是一个基于 Vue的单页应用程序（SPA）。而 Astro 站点是多页应用程序，它们使用[`.astro` 组件](/zh-cn/core-concepts/astro-components/)构建，但也可以支持 [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/zh-cn/core-concepts/framework-components/) 和原生HTML模板。 - 作为 SPA，Gridsome 使用`vue-router`进行 SPA 路由，并使用`vue-meta`管理``。在 Astro 中，你将创建独立的 HTML 页面，并直接控制你的页面``，或在[布局组件](/zh-cn/core-concepts/layouts/)中控制。 @@ -67,4 +67,4 @@ Gridsome 和 Astro 有一些相似之处，这将帮助你迁移你的项目： ## 社区资源 -- 博客文章：[从 Gridsome 迁移到 Astro](https://fyodor.io/migration-from-gridsome-to-astro/). \ No newline at end of file +- 博客文章：[从 Gridsome 迁移到 Astro](https://fyodor.io/migration-from-gridsome-to-astro/). diff --git a/src/content/docs/zh-cn/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/zh-cn/guides/migrate-to-astro/from-nextjs.mdx index ff5cccf2181ae..354b7fd8adbd7 100644 --- a/src/content/docs/zh-cn/guides/migrate-to-astro/from-nextjs.mdx +++ b/src/content/docs/zh-cn/guides/migrate-to-astro/from-nextjs.mdx @@ -26,7 +26,7 @@ Next.js 和 Astro 有一些相似之处，可以帮助你迁移你的项目： 当你在 Astro 中重建你的 Next.js 网站时，你会发现一些重要的区别： -- [MPA vs SPA](/zh-cn/concepts/mpa-vs-spa/)：Next.js 是一个 React 单页面应用，使用`index.js`作为项目的 root 。Astro 是一个多页面的网站，`index.astro`是你的主页。 +- Next.js 是一个 React 单页面应用，使用`index.js`作为项目的 root 。Astro 是一个多页面的网站，`index.astro`是你的主页。 - [`.astro` 组件](/zh-cn/core-concepts/astro-components/)：不是作为返回页面模板的导出函数去编写的。相反，会把你的代码分成一个 JavaScript 的"代码栅栏"和一个专门用于生成 HTML 的主体。 diff --git a/src/content/docs/zh-cn/guides/migrate-to-astro/from-nuxtjs.mdx b/src/content/docs/zh-cn/guides/migrate-to-astro/from-nuxtjs.mdx index 285e8cf355180..ec1e74c624f61 100644 --- a/src/content/docs/zh-cn/guides/migrate-to-astro/from-nuxtjs.mdx +++ b/src/content/docs/zh-cn/guides/migrate-to-astro/from-nuxtjs.mdx @@ -28,7 +28,7 @@ Nuxt 和 Astro 有一些相似之处，这些相似性能够帮助你完成迁 当你使用 Astro 来重构 Nuxt 项目时，你会注意到一些重要的差异： -- [MPA 和 SPA](/zh-cn/concepts/mpa-vs-spa/)： Nuxt 是一个基于 Vue 的 SPA (单页应用程序)。而 Astro 站点是使用 `.astro` 组件构建的多页应用，但也支持 React、Preact、Vue.js、Svelte、SolidJS、AlpineJS、Lit 和原生 HTML 模板。 +- Nuxt 是一个基于 Vue 的 SPA (单页应用程序)。而 Astro 站点是使用 `.astro` 组件构建的多页应用，但也支持 React、Preact、Vue.js、Svelte、SolidJS、AlpineJS、Lit 和原生 HTML 模板。 - [页面路由](/zh-cn/core-concepts/astro-pages/#基于文件的路由)： Nuxt 使用 `vue-router` 进行 SPA 路由，并且使用 `vue-meta` 来管理 ``。在 Astro 中，你将创建单独的 HTML 页面路由，并直接控制页面的 ``，或者在布局组件中控制。 diff --git a/src/content/docs/zh-cn/guides/migrate-to-astro/from-sveltekit.mdx b/src/content/docs/zh-cn/guides/migrate-to-astro/from-sveltekit.mdx index 82004bdd62919..30d673b7176ce 100644 --- a/src/content/docs/zh-cn/guides/migrate-to-astro/from-sveltekit.mdx +++ b/src/content/docs/zh-cn/guides/migrate-to-astro/from-sveltekit.mdx @@ -26,7 +26,7 @@ SvelteKit 和 Astro 有一些相似之处，可以帮助你迁移你的项目： 当你将 SvelteKit 网站重构为 Astro 时，你会注意到一些重要的不同之处： -- [MPA vs 其它方案](/zh-cn/concepts/mpa-vs-spa/)：Astro 网站是多页面应用程序，而 SvelteKit 默认为支持服务器端渲染的 SPA（单页面应用程序），但也可以创建 MPA、传统 SPA，或者你可以在应用程序中混合使用这些技术。 +- Astro 网站是多页面应用程序，而 SvelteKit 默认为支持服务器端渲染的 SPA（单页面应用程序），但也可以创建 MPA、传统 SPA，或者你可以在应用程序中混合使用这些技术。 - [组件](/zh-cn/core-concepts/astro-components/)：SvelteKit 使用 [Svelte](https://svelte.dev)。Astro 页面使用 [`.astro` 组件](/zh-cn/core-concepts/astro-components/) 构建，但也可以支持 [React、Preact、Vue.js、Svelte、SolidJS、AlpineJS、Lit](/zh-cn/core-concepts/framework-components/) 和原始 HTML 模板。 diff --git a/src/content/docs/zh-cn/guides/migrate-to-astro/from-vuepress.mdx b/src/content/docs/zh-cn/guides/migrate-to-astro/from-vuepress.mdx index 0d33107a91452..1d6b7d7207493 100644 --- a/src/content/docs/zh-cn/guides/migrate-to-astro/from-vuepress.mdx +++ b/src/content/docs/zh-cn/guides/migrate-to-astro/from-vuepress.mdx @@ -25,7 +25,7 @@ VuePress 和 Astro 有一些共同的特点，这些相似之处将有助于你 当你将 VuePress 站点重构为 Astro 站点时，你会注意到一些重要的差异： -- [MPA 和 SPA](/zh-cn/concepts/mpa-vs-spa/): VuePress 是基于 Vue 的单页面应用（SPA）。而 Astro 站点是使用 [`.astro`组件](/zh-cn/core-concepts/astro-components/)构建的多页面应用（MPA），同时也支持 [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/zh-cn/core-concepts/framework-components/) 和原生 HTML 模板。 +- VuePress 是基于 Vue 的单页面应用（SPA）。而 Astro 站点是使用 [`.astro`组件](/zh-cn/core-concepts/astro-components/)构建的多页面应用（MPA），同时也支持 [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/zh-cn/core-concepts/framework-components/) 和原生 HTML 模板。 - [模板布局](/zh-cn/core-concepts/layouts/): VuePress 站点使用 Markdown (`.md`) 文件作为页面内容，同时使用 HTML (`.html`) 模板作为布局。而 Astro 则是基于组件的，使用了 Astro 组件来构建页面的HTML模板、布局以及单个的 UI 元素。Astro 也可以通过[`.md` and `.mdx` 文件](/zh-cn/guides/markdown-content/) 来创建页面，通过 Astro 布局组件将 Markdown 内容封装在页面模板中。 @@ -63,4 +63,4 @@ VuePress 或你安装的其他任意主题可能已经为你处理了大部分 ## 社区资源 -- 欢迎添加你自己的资源！ \ No newline at end of file +- 欢迎添加你自己的资源！ diff --git a/src/content/docs/zh-tw/concepts/why-astro.mdx b/src/content/docs/zh-tw/concepts/why-astro.mdx index 335aeac4fbfb1..874e1b6b8ec6c 100644 --- a/src/content/docs/zh-tw/concepts/why-astro.mdx +++ b/src/content/docs/zh-tw/concepts/why-astro.mdx @@ -37,9 +37,6 @@ Astro 是個 **多合一** 的 **web 框架**，用於打造 **快速** 且 ** SPA 模型有它的優勢但這也是犧牲額外複雜度以及效能表現做為代價而來的。這些考量下會重創網頁的效能（包括重要的指標如[可互動時間（TTI）](https://web.dev/interactive/)），不過這對首次載入效能比較重要的內容為主網站並沒有太大的意義。 -📚 [進一步了解是甚麼造就 Astro's MPA 架構的獨特性。](/zh-tw/concepts/mpa-vs-spa/) - - ## 預設即迅速 擁有良好效能一直都是重要的，但對內容為主的網站來說 *特別* 關鍵。差勁的效能也被證實說會讓你失去參與度、轉換率以及金錢。舉例來說： diff --git a/src/i18n/de/nav.ts b/src/i18n/de/nav.ts index 35311a95637cd..d64d545164d33 100644 --- a/src/i18n/de/nav.ts +++ b/src/i18n/de/nav.ts @@ -11,7 +11,6 @@ export default NavDictionary({ coreConcepts: 'Kernkonzepte', 'concepts/islands': 'Astro-Inseln', 'concepts/why-astro': 'Warum Astro', - 'concepts/mpa-vs-spa': 'MPA vs. SPA', // Basics basics: 'Grundlagen', diff --git a/src/i18n/en/nav.ts b/src/i18n/en/nav.ts index 06ac52dff3d7b..9732395321a07 100644 --- a/src/i18n/en/nav.ts +++ b/src/i18n/en/nav.ts @@ -16,7 +16,6 @@ export default [ { text: 'Core Concepts', header: true, type: 'learn', key: 'coreConcepts' }, { text: 'Why Astro', slug: 'concepts/why-astro', key: 'concepts/why-astro' }, - { text: 'MPA vs. SPA', slug: 'concepts/mpa-vs-spa', key: 'concepts/mpa-vs-spa' }, { text: 'Astro Islands', slug: 'concepts/islands', key: 'concepts/islands' }, { text: 'Tutorials', header: true, type: 'learn', key: 'tutorials' }, diff --git a/src/i18n/es/nav.ts b/src/i18n/es/nav.ts index b00c0de3b872c..3e48e64b8e795 100644 --- a/src/i18n/es/nav.ts +++ b/src/i18n/es/nav.ts @@ -9,7 +9,6 @@ export default NavDictionary({ coreConcepts: 'Conceptos Básicos', 'concepts/why-astro': 'Por qué Astro', - 'concepts/mpa-vs-spa': 'MPA vs. SPA', 'concepts/islands': 'Islas de Astro', tutorials: 'Tutoriales', diff --git a/src/i18n/fr/nav.ts b/src/i18n/fr/nav.ts index 85f2e4758883c..4715818322934 100644 --- a/src/i18n/fr/nav.ts +++ b/src/i18n/fr/nav.ts @@ -14,7 +14,6 @@ export default NavDictionary({ // Core Concepts coreConcepts: 'Concepts Fondamentaux', 'concepts/why-astro': 'Pourquoi Astro ?', - 'concepts/mpa-vs-spa': 'MPA vs. SPA', 'concepts/islands': 'Les îles Astro', // Basics diff --git a/src/i18n/it/nav.ts b/src/i18n/it/nav.ts index 8167b811c9ef5..f29e3be769590 100644 --- a/src/i18n/it/nav.ts +++ b/src/i18n/it/nav.ts @@ -9,7 +9,6 @@ export default NavDictionary({ coreConcepts: 'Concetti Chiave', 'concepts/why-astro': 'Perché Astro', - 'concepts/mpa-vs-spa': 'MPA vs. SPA', 'concepts/islands': 'Le Isole Astro', tutorials: 'Tutorial', diff --git a/src/i18n/ja/nav.ts b/src/i18n/ja/nav.ts index ed506ad768311..c274823af2550 100644 --- a/src/i18n/ja/nav.ts +++ b/src/i18n/ja/nav.ts @@ -11,7 +11,6 @@ export default NavDictionary({ // Core Concepts coreConcepts: 'コアコンセプト', 'concepts/why-astro': 'Astroを選ぶ理由', - 'concepts/mpa-vs-spa': 'MPA vs. SPA', 'concepts/islands': 'Astroアイランド', // Tutorials diff --git a/src/i18n/pl/nav.ts b/src/i18n/pl/nav.ts index 86772e32cf2bc..c82675fe56643 100644 --- a/src/i18n/pl/nav.ts +++ b/src/i18n/pl/nav.ts @@ -13,7 +13,6 @@ export default NavDictionary({ coreConcepts: 'Podstawowe pojęcia', 'concepts/why-astro': 'Dlaczego Astro?', 'concepts/islands': 'Wyspy Astro', - 'concepts/mpa-vs-spa': 'MPA vs. SPA', basics: 'Podstawy', 'core-concepts/project-structure': 'Struktura projektu', 'core-concepts/astro-components': 'Komponenty Astro', diff --git a/src/i18n/pt-br/nav.ts b/src/i18n/pt-br/nav.ts index d41ff1c98c555..c3e51b35cdadc 100644 --- a/src/i18n/pt-br/nav.ts +++ b/src/i18n/pt-br/nav.ts @@ -8,7 +8,6 @@ export default NavDictionary({ 'guides/upgrade-to/v3': 'Atualize para a v3', coreConcepts: 'Principais Conceitos', 'concepts/why-astro': 'Por que Astro?', - 'concepts/mpa-vs-spa': 'MPA vs. SPA', 'concepts/islands': 'Ilhas Astro', tutorials: 'Tutoriais', diff --git a/src/i18n/ru/nav.ts b/src/i18n/ru/nav.ts index b6385d627a950..c9e306e8a2ce5 100644 --- a/src/i18n/ru/nav.ts +++ b/src/i18n/ru/nav.ts @@ -2,7 +2,6 @@ import { NavDictionary } from '../translation-checkers'; export default NavDictionary({ 'concepts/islands': 'Острова', - 'concepts/mpa-vs-spa': 'MPA против SPA', 'concepts/why-astro': 'Почему Astro', 'core-concepts/astro-components': 'Astro компоненты', 'core-concepts/astro-pages': 'Astro страницы', diff --git a/src/i18n/zh-cn/nav.ts b/src/i18n/zh-cn/nav.ts index 8964b218d0b44..54eff08d5804f 100644 --- a/src/i18n/zh-cn/nav.ts +++ b/src/i18n/zh-cn/nav.ts @@ -9,7 +9,6 @@ export default NavDictionary({ coreConcepts: '核心理念', 'concepts/why-astro': '为什么选择Astro', - 'concepts/mpa-vs-spa': 'MPA vs. SPA', 'concepts/islands': 'Astro群岛', tutorials: '教程', diff --git a/src/i18n/zh-tw/nav.ts b/src/i18n/zh-tw/nav.ts index f0f6b0ecacebd..839f1feda8830 100644 --- a/src/i18n/zh-tw/nav.ts +++ b/src/i18n/zh-tw/nav.ts @@ -9,7 +9,6 @@ export default NavDictionary({ // Core Concepts coreConcepts: '主要概念', 'concepts/why-astro': '為何選擇 Astro', - 'concepts/mpa-vs-spa': 'MPA vs. SPA', 'concepts/islands': 'Astro Islands', // Basics From 50c19003a91c1f06c7281ac3b0d40810b276fd70 Mon Sep 17 00:00:00 2001 From: Shinya Fujino Date: Wed, 30 Aug 2023 23:27:47 +0900 Subject: [PATCH 003/239] i18n(ja): Update getting-started.mdx (#4433) --- src/content/docs/ja/getting-started.mdx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/content/docs/ja/getting-started.mdx b/src/content/docs/ja/getting-started.mdx index 62b8e6ca6af8f..44883e99235f2 100644 --- a/src/content/docs/ja/getting-started.mdx +++ b/src/content/docs/ja/getting-started.mdx @@ -8,6 +8,11 @@ import TranslatorList from '~/components/TranslatorList.astro' import ContributorList from '~/components/ContributorList.astro' import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +:::tip[Astroバージョン3が登場！] +**Astro v3の新機能は？**[アナウンスメントのブログ記事を確認してください](https://astro.build/blog/astro-3/)。 +**アップグレードの準備はできましたか？**[アップグレードガイドを参照してください](/ja/guides/upgrade-to/v3/)。 +::: +

Astroとは？

Astroは、**コンテンツにフォーカスした高速なWebサイト**を構築するための**オールインワンWebフレームワーク**です。 From 5688fcfff053cc83e7c7a7ac4e4a89d54611f772 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Wed, 30 Aug 2023 16:28:09 +0200 Subject: [PATCH 004/239] Create deprecation notices in config reference docgen script (#4432) --- scripts/docgen.mjs | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/scripts/docgen.mjs b/scripts/docgen.mjs index 9456c2b3d10d9..0160ed6559bad 100644 --- a/scripts/docgen.mjs +++ b/scripts/docgen.mjs @@ -89,6 +89,7 @@ export async function run() { result += [ `### ${comment.longname}`, ``, + getDeprecatedAside(comment.deprecated), `

`, ``, [ @@ -121,4 +122,15 @@ export async function run() { ); } +function getDeprecatedAside(tag) { + if (!tag) return undefined; + return [ + '', + ':::caution[Deprecated]', + typeof tag === 'string' ? tag : 'This option is deprecated.', + ':::', + '', + ].join('\n'); +} + run(); From 097920bd894cc71c9a76205a1b5b6f50df08ce97 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Wed, 30 Aug 2023 12:02:29 -0300 Subject: [PATCH 005/239] [i18nIgnore] udate node versions (#4436) --- src/content/docs/de/install/manual.mdx | 2 +- src/content/docs/fr/guides/deploy/netlify.mdx | 2 +- src/content/docs/fr/install/auto.mdx | 2 +- src/content/docs/fr/install/manual.mdx | 2 +- src/content/docs/it/install/auto.mdx | 2 +- src/content/docs/it/install/manual.mdx | 2 +- src/content/docs/ko/install/auto.mdx | 2 +- src/content/docs/ko/install/manual.mdx | 2 +- src/content/docs/pl/install/auto.mdx | 2 +- src/content/docs/pl/install/manual.mdx | 2 +- src/content/docs/ru/install/auto.mdx | 2 +- src/content/docs/ru/tutorial/1-setup/1.mdx | 8 ++++---- src/content/docs/zh-tw/install/auto.mdx | 2 +- src/content/docs/zh-tw/install/manual.mdx | 2 +- 14 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/content/docs/de/install/manual.mdx b/src/content/docs/de/install/manual.mdx index c563a6e8bd824..dc8006a0b7883 100644 --- a/src/content/docs/de/install/manual.mdx +++ b/src/content/docs/de/install/manual.mdx @@ -8,7 +8,7 @@ Bist du bereit, Astro zu installieren? In dieser Installationsanleitung findest #### Voraussetzungen -- **Node.js** - `v16.12.0` oder höher. +- **Node.js** - `v18.14.1` oder höher. - **Texteditor** - Wir empfehlen [VS Code](https://code.visualstudio.com/) mit unserer [offiziellen Astro-Erweiterung](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). - **Terminal** - Astro wird über seine Befehlszeilenschnittstelle (CLI) gesteuert. diff --git a/src/content/docs/fr/guides/deploy/netlify.mdx b/src/content/docs/fr/guides/deploy/netlify.mdx index 980129a3ef374..8e2f5e6a4e59f 100644 --- a/src/content/docs/fr/guides/deploy/netlify.mdx +++ b/src/content/docs/fr/guides/deploy/netlify.mdx @@ -129,7 +129,7 @@ Vous pouvez également créer un nouveau site sur Netlify et relier votre dépô ### Définir une version de Node.js -Si vous utilisez une ancienne [image de build](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) (Xenial) sur Netlify, assurez-vous que votre version de Node.js est définie. Astro requiert la version `v16.12.0` ou une version plus récente. +Si vous utilisez une ancienne [image de build](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) (Xenial) sur Netlify, assurez-vous que votre version de Node.js est définie. Astro requiert la version `v18.14.1` ou une version plus récente. Vous pouvez [spécifier votre version de Node.js dans Netlify](https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript) en utilisant : - un fichier [`.nvmrc`](https://github.com/nvm-sh/nvm#nvmrc) dans votre répertoire de base. diff --git a/src/content/docs/fr/install/auto.mdx b/src/content/docs/fr/install/auto.mdx index e0be382796370..53c6b4bdee24f 100644 --- a/src/content/docs/fr/install/auto.mdx +++ b/src/content/docs/fr/install/auto.mdx @@ -14,7 +14,7 @@ Lisez plutôt notre [guide d'installation manuelle étape par étape](/fr/instal #### Prérequis -- **Node.js** - version `v16.12.0` ou supérieure. +- **Node.js** - version `v18.14.1` ou supérieure. - **Éditeur de code** - Nous recommandons [VS Code](https://code.visualstudio.com/) avec notre [extension officielle Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). - **Console de terminal** - Astro est accessible via son interface par ligne de commande (ILC). diff --git a/src/content/docs/fr/install/manual.mdx b/src/content/docs/fr/install/manual.mdx index 6b0944d9cda9d..fbe5bca5390f8 100644 --- a/src/content/docs/fr/install/manual.mdx +++ b/src/content/docs/fr/install/manual.mdx @@ -16,7 +16,7 @@ Prêt à installer Astro ? Suivez notre guide d'installation automatique ou manu #### Prérequis -- **Node.js** - version `v16.12.0` ou supérieure. +- **Node.js** - version `v18.14.1` ou supérieure. - **Éditeur de code** - Nous recommandons [VS Code](https://code.visualstudio.com/) avec notre [extension officielle Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). - **Console de terminal** - Astro est accessible via son interface de ligne de commande (ILC). diff --git a/src/content/docs/it/install/auto.mdx b/src/content/docs/it/install/auto.mdx index ed2dc9309420c..bc9d9b706c884 100644 --- a/src/content/docs/it/install/auto.mdx +++ b/src/content/docs/it/install/auto.mdx @@ -11,7 +11,7 @@ Leggi invece la nostra [guida passo per passo all'installazione manuale](/it/ins ::: #### Prerequisiti -- **Node.js** - `v16.12.0` o superiore. +- **Node.js** - `v18.14.1` o superiore. - **Editor di testo** - Raccomandiamo [VS Code](https://code.visualstudio.com/) con la nostra [Estensione Ufficiale Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). - **Terminale** - Astro viene utilizzato tramite la sua interfaccia da riga di comando (CLI). diff --git a/src/content/docs/it/install/manual.mdx b/src/content/docs/it/install/manual.mdx index 147ff4c740f6e..cf8959f01a4cf 100644 --- a/src/content/docs/it/install/manual.mdx +++ b/src/content/docs/it/install/manual.mdx @@ -15,7 +15,7 @@ Questa guida ti mostrerà come installare e configurare un nuovo progetto Astro #### Prerequisiti -- **Node.js** - `v16.12.0` o superiore. +- **Node.js** - `v18.14.1` o superiore. - **Editor di testo** - Raccomandiamo [VS Code](https://code.visualstudio.com/) con la nostra [Estensione Ufficiale Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). - **Terminale** - Astro viene utilizzato tramite la sua interfaccia da riga di comando (CLI). diff --git a/src/content/docs/ko/install/auto.mdx b/src/content/docs/ko/install/auto.mdx index bf920f74bc969..793d18b0579b7 100644 --- a/src/content/docs/ko/install/auto.mdx +++ b/src/content/docs/ko/install/auto.mdx @@ -13,7 +13,7 @@ Astro를 설치할 준비가 되었나요? 이 가이드를 따라 `create astro ::: #### 기본 요구 사항 -- **Node.js** - `v16.12.0` 또는 상위 버전. +- **Node.js** - `v18.14.1` 또는 상위 버전. - **텍스트 에디터** - [VS Code](https://code.visualstudio.com/)와 [공식 Astro 확장 프로그램](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)을 함께 사용하는 것을 추천해요. - **터미널** - Astro를 제어할 명령줄 인터페이스(CLI)가 필요합니다. diff --git a/src/content/docs/ko/install/manual.mdx b/src/content/docs/ko/install/manual.mdx index 84ae53c390a2a..d39edc22ce948 100644 --- a/src/content/docs/ko/install/manual.mdx +++ b/src/content/docs/ko/install/manual.mdx @@ -16,7 +16,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' #### 기본 요구 사항 -- **Node.js** - `v16.12.0` 또는 상위 버전. +- **Node.js** - `v18.14.1` 또는 상위 버전. - **텍스트 에디터** - [VS Code](https://code.visualstudio.com/)와 [공식 Astro 확장 프로그램](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)을 함께 사용하는 것을 추천해요. - **터미널** - Astro를 제어할 명령줄 인터페이스(CLI)가 필요합니다. diff --git a/src/content/docs/pl/install/auto.mdx b/src/content/docs/pl/install/auto.mdx index 5102f3308c630..83fda86fa20e9 100644 --- a/src/content/docs/pl/install/auto.mdx +++ b/src/content/docs/pl/install/auto.mdx @@ -13,7 +13,7 @@ Przeczytaj zamiast tego naszą [instrukcję instalacji krok po kroku](/pl/instal #### Wymagania -- **Node.js** - `v16.12.0` lub wyższa. +- **Node.js** - `v18.14.1` lub wyższa. - **Edytor tekstu** - Polecamy [VS Code](https://code.visualstudio.com/) z naszym [Oficjalnym rozszerzeniem Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). - **Terminal** - Dostęp do Astro uzyskuje się poprzez interfejs wiersza poleceń (CLI). diff --git a/src/content/docs/pl/install/manual.mdx b/src/content/docs/pl/install/manual.mdx index bb43efc34d36b..7343b13f14412 100644 --- a/src/content/docs/pl/install/manual.mdx +++ b/src/content/docs/pl/install/manual.mdx @@ -17,7 +17,7 @@ Ten przewodnik przeprowadzi Cię przez kroki niezbędne do ręcznej instalacji i #### Wymagania -- **Node.js** - `v16.12.0` lub wyższa. +- **Node.js** - `v18.14.1` lub wyższa. - **Edytor tekstu** - Polecamy [VS Code](https://code.visualstudio.com/) z naszym [Oficjalnym rozszerzeniem Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). - **Terminal** - Dostęp do Astro uzyskuje się poprzez interfejs wiersza poleceń (CLI). diff --git a/src/content/docs/ru/install/auto.mdx b/src/content/docs/ru/install/auto.mdx index efde37809fd49..67b8b652714e4 100644 --- a/src/content/docs/ru/install/auto.mdx +++ b/src/content/docs/ru/install/auto.mdx @@ -11,7 +11,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' #### Требования -- **Node.js** - `v16.12.0` или выше. +- **Node.js** - `v18.14.1` или выше. - **Текстовый редактор** - Мы рекомендуем [VS Code](https://code.visualstudio.com/) с нашим [Официальным расширением для Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). - **Терминал** - Для работы с Astro через command-line interface (CLI). diff --git a/src/content/docs/ru/tutorial/1-setup/1.mdx b/src/content/docs/ru/tutorial/1-setup/1.mdx index 5271a02f470e9..0061320813caa 100644 --- a/src/content/docs/ru/tutorial/1-setup/1.mdx +++ b/src/content/docs/ru/tutorial/1-setup/1.mdx @@ -28,7 +28,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ### Node.js -Для работы Astro на вашей системе вам также потребуется установить [**Node.js**](https://nodejs.org/ru/), версия v16.12.0 или выше. +Для работы Astro на вашей системе вам также потребуется установить [**Node.js**](https://nodejs.org/ru/), версия v18.14.1 или выше. Чтобы проверить, установлена ли на вашем компьютере совместимая версия, выполните следующую команду в терминале: @@ -36,11 +36,11 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; node -v // Пример вывода -v16.14.0 +v18.14.1 ``` -Если команда возвращает номер версии выше, чем `v16.12.0`, вы готовы к работе! +Если команда возвращает номер версии выше, чем `v18.14.1`, вы готовы к работе! -Если команда возвращает сообщение об ошибке типа `Command 'node' not found` или номер версии ниже, чем `v16.12.0`, то вам нужно [установить совместимую версию Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). +Если команда возвращает сообщение об ошибке типа `Command 'node' not found` или номер версии ниже, чем `v18.14.1`, то вам нужно [установить совместимую версию Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). ### Редактор кода diff --git a/src/content/docs/zh-tw/install/auto.mdx b/src/content/docs/zh-tw/install/auto.mdx index bcde9c35c4828..d3532d22a6313 100644 --- a/src/content/docs/zh-tw/install/auto.mdx +++ b/src/content/docs/zh-tw/install/auto.mdx @@ -11,7 +11,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' #### 事前準備 -- **Node.js** - `v16.12.0` 或更高版本。 +- **Node.js** - `v18.14.1` 或更高版本。 - **文字編輯器** - 我們推薦使用 [VS Code](https://code.visualstudio.com/) 以及我們的 [官方 Astro 延伸模組](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). - **終端機** - Astro 可藉由命令行介面（CLI）來使用。 diff --git a/src/content/docs/zh-tw/install/manual.mdx b/src/content/docs/zh-tw/install/manual.mdx index 0ea14e528aef0..fd86aae8b606a 100644 --- a/src/content/docs/zh-tw/install/manual.mdx +++ b/src/content/docs/zh-tw/install/manual.mdx @@ -11,7 +11,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' #### 事前準備 -- **Node.js** - `v16.12.0` 或更高版本。 +- **Node.js** - `v18.14.1` 或更高版本。 - **文字編輯器** - 我們推薦使用 [VS Code](https://code.visualstudio.com/) 以及我們的 [官方 Astro 延伸模組](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). - **終端機** - Astro 可藉由命令行介面（CLI）來使用。 From d88837585ae83f2ebb1c0ecce0d0d41838eaa43c Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Wed, 30 Aug 2023 12:13:29 -0500 Subject: [PATCH 006/239] add import source note to v3 upgrade guide (#4441) --- .../docs/en/guides/view-transitions.mdx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/content/docs/en/guides/view-transitions.mdx b/src/content/docs/en/guides/view-transitions.mdx index 81193b5cc1b92..0bcedefd8de45 100644 --- a/src/content/docs/en/guides/view-transitions.mdx +++ b/src/content/docs/en/guides/view-transitions.mdx @@ -388,6 +388,25 @@ export default defineConfig({ }); ``` +#### Update import source + +The `` component has been moved from `astro:components` to `astro:transitions`. Update the import source across all occurrences in your project. + +```astro title="src/layouts/BaseLayout.astro" del="astro:components" ins="astro:transitions" +--- +import { ViewTransitions } from "astro:components astro:transitions" +--- + + + My Homepage + + + +

Welcome to my website!

+ + +``` + #### Update `transition:animate` directives **Changed:** The `transition:animate` value `morph` has been renamed to `initial`. Also, this is no longer the default animation. If no `transition:animate` directive is specified, your animations will now default to `fade`. From 12f310214062e3de199ab9fed25c586680df16e7 Mon Sep 17 00:00:00 2001 From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Date: Wed, 30 Aug 2023 11:31:28 -0600 Subject: [PATCH 007/239] i18n(es): update client-side-scripts (#4435) Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> --- src/content/docs/es/guides/client-side-scripts.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/es/guides/client-side-scripts.mdx b/src/content/docs/es/guides/client-side-scripts.mdx index 4461272528ae6..4bf08d8e05770 100644 --- a/src/content/docs/es/guides/client-side-scripts.mdx +++ b/src/content/docs/es/guides/client-side-scripts.mdx @@ -158,7 +158,7 @@ En este ejemplo, definimos un nuevo elemento HTML `` que rastrea cu // Cada vez que el button es clickeado, actualiza el contador. heartButton.addEventListener('click', () => { count++; - countSpan.textContent = count; + countSpan.textContent = count.toString(); }); } } From d1bb0095d51c21355c50d4751b4eb56e8c03c29a Mon Sep 17 00:00:00 2001 From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Date: Wed, 30 Aug 2023 11:46:15 -0600 Subject: [PATCH 008/239] i18n(es): update markdoc (#4438) Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> --- .../es/guides/integrations-guide/markdoc.mdx | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/content/docs/es/guides/integrations-guide/markdoc.mdx b/src/content/docs/es/guides/integrations-guide/markdoc.mdx index 6e34c6c39cb26..f65a6fb3abfa7 100644 --- a/src/content/docs/es/guides/integrations-guide/markdoc.mdx +++ b/src/content/docs/es/guides/integrations-guide/markdoc.mdx @@ -373,6 +373,36 @@ Ahora, puedes llamar a esta función desde cualquier entrada de contenido de Mar 📚 [Consulta la documentación de Markdoc](https://markdoc.dev/docs/functions#creating-a-custom-function) para más información sobre el uso de variables o funciones en tu contenido. +### Servidor de lenguaje Markdoc + +Si estás usando VS Code, hay una [extensión de lenguaje Markdoc](https://marketplace.visualstudio.com/items?itemName=Stripe.markdoc-language-support) que incluye resaltado de sintaxis y autocompletado para etiquetas configuradas. [Consulta el servidor de lenguaje en GitHub](https://github.com/markdoc/language-server.git) para más información. + +Para configurar la extensión, crea un archivo `markdoc.config.json` en la raíz del proyecto con el siguiente contenido: + +```json +[ + { + "id": "my-site", + "path": "src/content", + "schema": { + "path": "markdoc.config.mjs", + "type": "esm", + "property": "default", + "watch": true + } + } +] +``` + +La propiedad `schema` contiene toda la información para configurar el servidor de lenguaje para las colecciones de contenido de Astro. Acepta las siguientes propiedades: + +* `path`: La ruta al archivo de configuración. +* `type`: El tipo de módulo que usa tu archivo de configuración (`esm` permite la sintaxis `import`). +* `property`: La propiedad exportada que contiene el objeto de configuración. +* `watch`: Indica al servidor que observe los cambios en la configuración. + +La propiedad `path` de nivel superior le indica al servidor dónde se encuentra el contenido. Dado que Markdoc es específico para las colecciones de contenido, puedes usar `src/content`. + ### Pasa variables de Markdoc Es posible que necesites pasar [variables][markdoc-variables] a tu contenido. Esto es útil cuando pasas parámetros SSR como pruebas A/B. From b87fbf0dedc39b416a4df8ed613d8b104b903908 Mon Sep 17 00:00:00 2001 From: Scott Gallant Date: Wed, 30 Aug 2023 15:05:19 -0300 Subject: [PATCH 009/239] Added Community Resource Link (#4443) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Elian ☕️ --- src/content/docs/en/guides/cms/tina-cms.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/cms/tina-cms.mdx b/src/content/docs/en/guides/cms/tina-cms.mdx index a607974e48322..50375db718796 100644 --- a/src/content/docs/en/guides/cms/tina-cms.mdx +++ b/src/content/docs/en/guides/cms/tina-cms.mdx @@ -150,4 +150,5 @@ To get started, you'll need an existing Astro project. ## Community Resources -- [Astro Tina Starter](https://github.com/tombennet/astro-tina-starter/tree/main) by Tom Bennet +- [Astro Tina Starter with visual editing](https://github.com/dawaltconley/tina-astro) by Jeff See + Dylan Awalt-Conley +- [Astro Tina Starter with basic editing](https://github.com/tombennet/astro-tina-starter/tree/main) by Tom Bennet From 06776c9c23fdae2d4d5c53fe98e01aed3dd25924 Mon Sep 17 00:00:00 2001 From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Date: Wed, 30 Aug 2023 12:18:09 -0600 Subject: [PATCH 010/239] i18n(es): update /tutorial/5-astro-api/3 (#4439) Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> --- src/content/docs/es/tutorial/5-astro-api/3.mdx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/content/docs/es/tutorial/5-astro-api/3.mdx b/src/content/docs/es/tutorial/5-astro-api/3.mdx index 313c2dde96291..cfc08573f9104 100644 --- a/src/content/docs/es/tutorial/5-astro-api/3.mdx +++ b/src/content/docs/es/tutorial/5-astro-api/3.mdx @@ -90,7 +90,8 @@ Anteriormente has mostrado elementos en una lista desde un array usando `map()`. ```astro title="src/pages/tags/index.astro" --- import BaseLayout from '../../layouts/BaseLayout.astro'; - const tags = ["astro", "successes", "community", "setbacks", "learning in public"]; + const allPosts = await Astro.glob("../posts/*.md"); + const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())]; const pageTitle = "Tag Index"; --- @@ -182,7 +183,6 @@ En lugar de crear elementos en una lista desordenada esta vez, crea un `

` par .tags { display: flex; flex-wrap: wrap; - margin: 0 auto; } .tag { @@ -224,7 +224,6 @@ const pageTitle = "Tag Index"; .tags { display: flex; flex-wrap: wrap; - margin: 0 auto; } .tag { @@ -294,8 +293,7 @@ Sigue los pasos que se indican a continuación y comprueba tu trabajo comparánd .tags { display: flex; - flex-wrap: wrap; - margin: 0 auto; + flex-wrap: wrap; } .tag { @@ -370,7 +368,6 @@ const { frontmatter } = Astro.props; .tags { display: flex; flex-wrap: wrap; - margin: 0 auto; } .tag { From 47f3ed50fc3bbccc3025f0a6284fad9311ffcec9 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Wed, 30 Aug 2023 13:23:19 -0500 Subject: [PATCH 011/239] [v3] clarify which v1.x APIs were removed (#4447) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Elian ☕️ --- src/content/docs/en/guides/upgrade-to/v3.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/en/guides/upgrade-to/v3.mdx b/src/content/docs/en/guides/upgrade-to/v3.mdx index fd3fba8213159..2ae6eed3edfc4 100644 --- a/src/content/docs/en/guides/upgrade-to/v3.mdx +++ b/src/content/docs/en/guides/upgrade-to/v3.mdx @@ -169,9 +169,9 @@ Otherwise, delete all references to importing Astro's `` component a ### Removed: deprecated 1.x APIs -In Astro v1.x, Astro deprecated config options as well as script/style `global` and `hoist` attributes types. These were kept for backwards compatibility. +In Astro v1.x, Astro deprecated our original configuration settings as well as ` +``` + +### 削除: `getStaticPaths()`の戻り値の自動フラット化 + +Astro v2.xでは、[`getStaticPaths()`](/ja/reference/api-reference/#getstaticpaths)の戻り値は、配列の配列を返してもエラーとならないように、自動的にフラット化されていました。 + +Astro v3.0では、`getStaticPaths()`の結果に対する自動フラット化が削除されます。 + +#### どうすればいいですか？ + +期待されているオブジェクトの配列ではなく、配列の配列を返している場合は、`.flatMap`と`.flat`を使用して、フラットな配列を返すようにしてください。 + +コードを更新する必要がある場合は、[`getStaticPath()`の戻り値はオブジェクトの配列でなければならないことを示すエラーメッセージ](/ja/reference/errors/invalid-get-static-paths-entry/#what-went-wrong)が表示されます。 + +### 移動: `astro check`は外部パッケージが必要になりました + +Astro v2.xでは、[`astro check`](/ja/reference/cli-reference/#astro-check)はAstroにデフォルトで含まれており、その依存関係はAstroにバンドルされていました。これは、`astro check`を使用するかどうかにかかわらず、パッケージが肥大化することを意味していました。また、TypeScriptとAstro Language Serverのバージョンを制御できないという問題もありました。 + + +Astro v3.0では、`astro check`コマンドをAstroのコアから外に移動し、外部パッケージ`@astrojs/check`が必要になりました。さらに、`astro check`コマンドを使用するには、プロジェクトに`typescript`をインストールする必要があります。 + +#### どうすればいいですか？ + +Astro v3.0にアップグレードして`astro check`コマンドを実行し、必要な依存関係をインストールしようとするプロンプトに従うか、`@astrojs/check`と`typescript`を手動でプロジェクトにインストールしてください。 + +### 非推奨: `build.excludeMiddleware`と`build.split` + +Astro v2.xでは、`build.excludeMiddleware`と`build.split`は、SSRモードでアダプターを使用する場合に、特定のファイルがどのように出力されるかを変更するために使用されました。 + +Astro v3.0では、これらのビルド設定オプションは、`edgeMiddleware`と`functionPerRoute`という、同様のタスクを実行するための新しい[SSRアダプター設定オプション](/ja/guides/integrations-guide/#公式インテグレーション)に置き換えられます。 + +#### どうすればいいですか？ + +Astroの設定ファイルを更新して、**アダプターの設定**で新しいオプションを直接使用するようにします。 + +```js title="astro.config.mjs" del={5-7} ins={9} +import { defineConfig } from "astro/config"; +import vercel from "@astrojs/vercel/serverless"; + +export default defineConfig({ + build: { + excludeMiddleware: true + }, + adapter: vercel({ + edgeMiddleware: true + }), +}); +``` + +```js title="astro.config.mjs" del={5-7} ins={9} +import { defineConfig } from "astro/config"; +import netlify from "@astrojs/netlify/functions"; + +export default defineConfig({ + build: { + split: true + }, + adapter: netlify({ + functionPerRoute: true + }), +}); +``` + +### 非推奨: `markdown.drafts` + +Astro v2.xでは、`markdown.drafts`の設定を使用すると、開発サーバーでは閲覧可能ですが、本番環境ではビルドされないドラフトページを作成できました。 + +Astro v3.0では、この機能は非推奨となり、代わりにコンテンツコレクションにより手動でドラフトページをフィルタリングする方法が採用されました。これにより、より細かな制御が可能となりました。 + +#### どうすればいいですか？ + +プロジェクト内の一部のページをドラフトとして扱い続けるには、[コンテンツコレクションに移行](/ja/guides/content-collections/#ファイルベースのルーティングからの移行)し、フロントマターで`draft: true`を使用して[ページを手動でフィルタリング](/ja/guides/content-collections/#コレクションクエリのフィルタリング)します。 + +### 非推奨: エンドポイントでのプレーンオブジェクトの返却 + +Astro v2.xでは、エンドポイントはプレーンオブジェクトを返すことができ、これはJSONレスポンスに変換されました。 + +Astro v3.0では、`Response`オブジェクトを直接返すことが推奨され、この動作は非推奨となりました。 + +#### どうすればいいですか？ + +エンドポイントを更新して、`Response`オブジェクトを直接返すようにします。 + +```ts title="endpoint.json.ts" del={2} ins={3} +export async function GET() { + return { body: { "title": "Bobのブログ" }}; + return new Response(JSON.stringify({ "title": "Bobのブログ" })); +} +``` + +以前のフォーマットを維持する必要がある場合は、`ResponseWithEncoding`オブジェクトを使用できますが、将来的には非推奨となります。 + +```ts title="endpoint.json.ts" del={2} ins={3} +export async function GET() { + return { body: { "title": "Bob's blog" } }; + return new ResponseWithEncoding({ body: { "title": "Bob's blog" }}); +} +``` + +### デフォルトの変更: tsconfig.jsonプリセットの`verbatimModuleSyntax` + +Astro v2.xでは、[`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax)の設定はデフォルトでオフになっており、これに相当するTypeScript 4.xの`importsNotUsedAsValues`が`strict`プリセットで有効になっていました。 + +Astro v3.0では、`verbatimModuleSyntax`はすべてのプリセットで有効になっています。 + +#### どうすればいいですか？ + +このオプションでは、`import type`構文を使用して型をインポートする必要があります。 + +```astro title="src/components/MyAstroComponent.astro" "type" +--- +import { type CollectionEntry, getEntry } from "astro:content"; +--- +``` + +上記のように`type`を使用して型をインポートすることを推奨しますが、問題が発生する場合は、`tsconfig.json`ファイルで`verbatimModuleSyntax: false`を設定して無効にすることもできます。 + +```json title="tsconfig.json" "false" +{ + "compilerOptions": { + "verbatimModuleSyntax": false + } +} +``` + +### デフォルトの変更: `3000`番ポート + +Astro v2.xでは、Astroはデフォルトで`3000`番ポートで実行されていました。 + +{/* cli-referenceを更新したらリンク先を#--port-numberにする */} + +Astro v3.0では、[デフォルトのポート](/ja/reference/cli-reference/)が`4321`に変更されました。🚀 + +#### どうすればいいですか？ + +テストや`README`などで`localhost:3000`を参照している場合は、新しいポート`localhost:4321`を反映するように更新します。 + + +### デフォルトの変更: import.meta.env.BASE_URLの`trailingSlash` + +Astro v2.xでは、`import.meta.env.BASE_URL`はデフォルトで[`base`](/ja/reference/configuration-reference/#base)の設定値の[末尾にスラッシュ](/ja/reference/configuration-reference/#trailingslash)を追加していました。`trailingSlash: "ignore"`も末尾にスラッシュを追加していました。 + +Astro v3.0では、`import.meta.env.BASE_URL`に末尾のスラッシュを追加しなくなりました。`trailingSlash: "ignore"`が設定されている場合も同様です。（`base`と`trailingSlash: "always"`または`trailingSlash: "never"`を組み合わせた場合の既存動作は変更されていません。） + +#### どうすればいいですか？ + +`base`にすでに末尾のスラッシュがある場合は、変更は必要ありません。 + +`base`に末尾のスラッシュがなく、以前のデフォルト（または`trailingSlash: "ignore"`）の動作を維持したい場合は、末尾にスラッシュを追加します。 + +```js title="astro.config.mjs" del={4} ins={5} +import { defineConfig } from "astro/config"; + +export default defineConfig({ + base: 'my-base', + base: 'my-base/', +}); +``` + +### デフォルトの変更: `compressHTML` + +{/* configuration-referenceを更新したらリンク先を#compresshtmlにする */} + +Astro v2.xでは、[`compressHTML`](/ja/reference/configuration-reference/)が明示的に`true`に設定されている場合にのみ、Astroは出力されたHTMLを圧縮しました。デフォルト値は`false`でした。 + +Astro v3.0では、出力されたHTMLをデフォルトで圧縮します。 + +#### どうすればいいですか？ + +`compressHTML: true`を設定している場合は、これが新しいデフォルトの動作となったため、削除できます。 + +```js title="astro.config.mjs" del={4} +import { defineConfig } from "astro/config"; + +export default defineConfig({ + compressHTML: true +}) +``` + +HTMLの圧縮を無効にするには、`compressHTML: false`を設定する必要があります。 + +### デフォルトの変更: `scopedStyleStrategy` + +{/* configuration-referenceを更新したらリンク先を#scopedstylestrategyにする */} + +Astro v2.xでは、[`scopedStyleStrategy`](/ja/reference/configuration-reference/)のデフォルト値は`"where"`でした。 + +Astro v3.0では、新しいデフォルト値`"attribute"`が導入されました。デフォルトでは、スタイルは`data-*`属性を使用して適用されます。 + +#### どうすればいいですか？ + +プロジェクトで現在の[スタイルのスコープ](/ja/guides/styling/#スコープされたスタイル)を維持するには、設定ファイルを以前のデフォルト値に更新します。 + + +```js title="astro.config.mjs" ins={4} +import { defineConfig } from "astro/config"; + +export default defineConfig({ + scopedStyleStrategy: "where" +}) +``` + +### デフォルトの変更: `inlineStyleSheets` + +{/* configuration-referenceを更新したらリンク先を#buildinlinestylesheetsにする */} + +Astro v2.xでは、プロジェクトのすべてのスタイルシートはデフォルトでリンクタグとして送信されていました。[`build.inlineStylesheets`](/ja/reference/configuration-reference/)の設定を使用して、`"always"`で常に` diff --git a/src/components/internal/rehype-file-tree.ts b/src/components/internal/rehype-file-tree.ts index b3ce7cffe42a9..b932914c86676 100644 --- a/src/components/internal/rehype-file-tree.ts +++ b/src/components/internal/rehype-file-tree.ts @@ -1,7 +1,7 @@ import { fromHtml } from 'hast-util-from-html'; import { toString } from 'hast-util-to-string'; -import { h } from 'hastscript'; -import type { Element, HChild } from 'hastscript/lib/core'; +import { h, type Child } from 'hastscript'; +import type { Element } from 'hast'; import { rehype } from 'rehype'; import { CONTINUE, SKIP, visit } from 'unist-util-visit'; import { getIcon } from './file-tree-icons'; @@ -48,7 +48,7 @@ export const fileTreeProcessor = rehype().use(function fileTree() { const [firstChild, ...otherChildren] = node.children; - const comment: HChild[] = []; + const comment: Child[] = []; if (firstChild.type === 'text') { const [filename, ...fragments] = firstChild.value.split(' '); firstChild.value = filename; diff --git a/src/components/tabs/AstroJSXTabs.astro b/src/components/tabs/AstroJSXTabs.astro index 5832006548ecf..ffe233a3eee87 100644 --- a/src/components/tabs/AstroJSXTabs.astro +++ b/src/components/tabs/AstroJSXTabs.astro @@ -2,7 +2,7 @@ import Tabs from './Tabs'; --- - + JSX Astro diff --git a/src/components/tabs/AstroVueTabs.astro b/src/components/tabs/AstroVueTabs.astro index f1dc5c7284842..b5dad38a80077 100644 --- a/src/components/tabs/AstroVueTabs.astro +++ b/src/components/tabs/AstroVueTabs.astro @@ -2,7 +2,7 @@ import Tabs from './Tabs'; --- - + Vue Astro diff --git a/src/components/tabs/JavascriptFlavorTabs.astro b/src/components/tabs/JavascriptFlavorTabs.astro index 6c2a7394d96f9..b43d3c348cd20 100644 --- a/src/components/tabs/JavascriptFlavorTabs.astro +++ b/src/components/tabs/JavascriptFlavorTabs.astro @@ -2,7 +2,7 @@ import Tabs from './Tabs'; --- - + JavaScript TypeScript diff --git a/src/components/tabs/PackageManagerTabs.astro b/src/components/tabs/PackageManagerTabs.astro index 3f9e7ccc3138c..a04f947cfd39e 100644 --- a/src/components/tabs/PackageManagerTabs.astro +++ b/src/components/tabs/PackageManagerTabs.astro @@ -2,7 +2,7 @@ import Tabs from './Tabs'; --- - + npm pnpm Yarn diff --git a/src/components/tabs/StaticSsrTabs.astro b/src/components/tabs/StaticSsrTabs.astro index 0752bc7804dd5..b990aefc5f305 100644 --- a/src/components/tabs/StaticSsrTabs.astro +++ b/src/components/tabs/StaticSsrTabs.astro @@ -2,7 +2,7 @@ import Tabs from './Tabs'; --- - + Static SSR diff --git a/src/components/tabs/TypeScriptSettingTabs.astro b/src/components/tabs/TypeScriptSettingTabs.astro index ea1ea73126cf4..40e8c6ffb073c 100644 --- a/src/components/tabs/TypeScriptSettingTabs.astro +++ b/src/components/tabs/TypeScriptSettingTabs.astro @@ -2,7 +2,7 @@ import Tabs from './Tabs'; --- - + base ("relaxed") strict or strictest custom diff --git a/src/components/tabs/UIFrameworkTabs.astro b/src/components/tabs/UIFrameworkTabs.astro index 87df61da4eda6..eda59f7ad38c4 100644 --- a/src/components/tabs/UIFrameworkTabs.astro +++ b/src/components/tabs/UIFrameworkTabs.astro @@ -2,18 +2,18 @@ import Tabs from './Tabs'; --- - - Preact - React - Solid - Svelte - Vue - Lit + + Preact + React + Solid + Svelte + Vue + Lit - - - - - - + + + + + + diff --git a/src/components/tutorial/FeedbackButton.astro b/src/components/tutorial/FeedbackButton.astro index b71e4a92de017..f9f8b777c3f23 100644 --- a/src/components/tutorial/FeedbackButton.astro +++ b/src/components/tutorial/FeedbackButton.astro @@ -113,7 +113,7 @@ const instanceId = Math.round(Math.random() * 10e9).toString(36);