From e54dec5d5d830d6eab4e86286dd9d63cf7818880 Mon Sep 17 00:00:00 2001 From: Sam Hulick Date: Wed, 15 Mar 2023 09:43:47 -0500 Subject: [PATCH 01/26] Update data-fetching.mdx (#2854) Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> Co-authored-by: Chris Swithinbank --- src/content/docs/en/guides/data-fetching.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/data-fetching.mdx b/src/content/docs/en/guides/data-fetching.mdx index 824c4dc589efc..0dbf2c5468d3e 100644 --- a/src/content/docs/en/guides/data-fetching.mdx +++ b/src/content/docs/en/guides/data-fetching.mdx @@ -8,7 +8,7 @@ i18nReady: true ## `fetch()` in Astro -All [Astro components](/en/core-concepts/astro-components/) have access to the [global `fetch()` function](https://developer.mozilla.org/en-US/docs/Web/API/fetch) in their component script to make HTTP requests to APIs. This fetch call will be executed at build time, and the data will be available to the component template for generating dynamic HTML. +All [Astro components](/en/core-concepts/astro-components/) have access to the [global `fetch()` function](https://developer.mozilla.org/en-US/docs/Web/API/fetch) in their component script to make HTTP requests to APIs. This fetch call will be executed at build time, and the data will be available to the component template for generating dynamic HTML. If [SSR](/en/guides/server-side-rendering/) mode is enabled, any fetch calls will be executed at runtime. 💡 Take advantage of [**top-level await**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#top_level_await) inside of your Astro component script. From ad74e8de2fba906f745b3fc404c23f4b4e09b803 Mon Sep 17 00:00:00 2001 From: Dan Jutan Date: Wed, 15 Mar 2023 10:56:40 -0400 Subject: [PATCH 02/26] You probably don't need to install Prettier (#2845) Co-authored-by: Chris Swithinbank Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> Co-authored-by: WintrCodes <110974960+WintrCodes@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/editor-setup.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/content/docs/en/editor-setup.mdx b/src/content/docs/en/editor-setup.mdx index 07257de114fd6..190b6b71862d7 100644 --- a/src/content/docs/en/editor-setup.mdx +++ b/src/content/docs/en/editor-setup.mdx @@ -55,7 +55,9 @@ See [the project's User Guide](https://ota-meshi.github.io/eslint-plugin-astro/u ### Prettier -[Prettier](https://prettier.io/) is a popular formatter for JavaScript, HTML, CSS and more. To add support for formatting `.astro` files, use [the official Astro Prettier plugin](https://github.com/withastro/prettier-plugin-astro). +[Prettier](https://prettier.io/) is a popular formatter for JavaScript, HTML, CSS, and more. If you're using the [Astro VS Code Extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) or [the Astro language server within another editor](#other-code-editors), code formatting with Prettier is included. + +To add support for formatting `.astro` files outside of the editor (e.g. CLI) or inside editors that don't support our editor tooling, install [the official Astro Prettier plugin](https://github.com/withastro/prettier-plugin-astro). To get started, first install Prettier and the plugin: From 7d3b03223cd4c6fd3d4dd34869568687d33c186d Mon Sep 17 00:00:00 2001 From: Fahimnur Alam Date: Wed, 15 Mar 2023 10:59:05 -0400 Subject: [PATCH 03/26] Update build-forms.mdx (#2857) --- src/content/docs/en/recipes/build-forms.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/recipes/build-forms.mdx b/src/content/docs/en/recipes/build-forms.mdx index eca65338207d4..27f71ef378591 100644 --- a/src/content/docs/en/recipes/build-forms.mdx +++ b/src/content/docs/en/recipes/build-forms.mdx @@ -112,7 +112,7 @@ In SSR mode, Astro pages can both display and handle forms. In this recipe, you' const data = await Astro.request.formData(); const name = data.get("username"); const email = data.get("email"); - const message = data.get("password"); + const password = data.get("password"); // Do something with the data } catch (error) { if (error instanceof Error) { From 5a63116eadb2e9260afa5b3af12835c198cbbf18 Mon Sep 17 00:00:00 2001 From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Date: Wed, 15 Mar 2023 12:34:57 -0600 Subject: [PATCH 04/26] i18n(es): Update of `configuration-reference.mdx`, `server-side-rendering.mdx` & `integrations-guide.mdx` (#2858) * updates * applied suggestions * updated nav.ts --------- Co-authored-by: Vick Vasquez Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> --- .../docs/es/guides/integrations-guide.mdx | 6 +- .../docs/es/guides/server-side-rendering.mdx | 3 +- .../es/reference/configuration-reference.mdx | 64 +++++++++++++++++++ src/i18n/es/nav.ts | 2 +- 4 files changed, 70 insertions(+), 5 deletions(-) diff --git a/src/content/docs/es/guides/integrations-guide.mdx b/src/content/docs/es/guides/integrations-guide.mdx index 5a6babc78a8b6..782258f6b9943 100644 --- a/src/content/docs/es/guides/integrations-guide.mdx +++ b/src/content/docs/es/guides/integrations-guide.mdx @@ -1,5 +1,5 @@ --- -title: Usando integraciones +title: Agrega integraciones i18nReady: true --- import IntegrationsNav from '~/components/IntegrationsNav.astro'; @@ -7,7 +7,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -Las **integraciones de Astro** agregan nuevas funcionalidades a su proyecto con solo unas pocas líneas de código. Tú mismo puedes escribir una integración personalizada, utilizar una integración oficial o utilizar integraciones desarrolladas por la comunidad. +Las **Integraciones de Astro** agregan nuevas funcionalidades a su proyecto con solo unas pocas líneas de código. Tú mismo puedes escribir una integración personalizada, utilizar una integración oficial o utilizar integraciones desarrolladas por la comunidad. Usando integraciones puedes... @@ -44,7 +44,7 @@ Puedes correr el comando `astro add` utilizando el gestor de paquetes de tu pref -¡Incluso es posible configurar múltiples integraciones al mismo tiempo! +¡Incluso es posible agregar múltiples integraciones al mismo tiempo! diff --git a/src/content/docs/es/guides/server-side-rendering.mdx b/src/content/docs/es/guides/server-side-rendering.mdx index 4d747ca672750..5d7154eb92a7f 100644 --- a/src/content/docs/es/guides/server-side-rendering.mdx +++ b/src/content/docs/es/guides/server-side-rendering.mdx @@ -224,4 +224,5 @@ if (!product) { ### Server Endpoints -Un server endpoint, también conocido como una **ruta API**, es un archivo `.js` o `.ts` dentro de la carpeta `src/pages/` que recibe una [Request](https://developer.mozilla.org/es/docs/Web/API/Request) y devuelve una [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response). Una característica poderosa de SSR: Las rutas API permiten ejecutar código del lado del servidor de forma segura. Para aprender más consulta nuestra [guía de Endpoints](/es/core-concepts/endpoints/#endpoints-del-servidor-rutas-de-api). +Un server endpoint, también conocido como una **ruta API**, es una función exportada desde un archivo `.js` o `.ts` dentro de la carpeta `src/pages/`. +La función recibe un [contexto del endpoint](/es/reference/api-reference/#contexto-del-endpoint) y devuelve una [Response](https://developer.mozilla.org/es/docs/Web/API/Response). Una característica poderosa de SSR, las rutas API son capaces de ejecutar código de forma segura en el servidor. Para aprender más, consulta nuestra [guía de endpoints](/es/core-concepts/endpoints/#endpoints-del-servidor-rutas-de-api). diff --git a/src/content/docs/es/reference/configuration-reference.mdx b/src/content/docs/es/reference/configuration-reference.mdx index 13f06fb269c16..10a2fd77d6288 100644 --- a/src/content/docs/es/reference/configuration-reference.mdx +++ b/src/content/docs/es/reference/configuration-reference.mdx @@ -391,6 +391,45 @@ Si el puerto dado ya está en uso, Astro probará automáticamente el siguiente ``` +### server.headers + +

+ +**Tipo:** `OutgoingHttpHeaders`
+**Por defecto:** `{}`
+ +

+ +Establece encabezados de respuesta HTTP personalizados para enviar en `astro dev` y `astro preview`. + + +## Opciones de Imagen + +### image.service (Experimental) + +

+ +**Tipo:** `'astro/assets/services/sharp' | 'astro/assets/services/squoosh' | string`
+**Por defecto:** `'astro/assets/services/squoosh'`
+ +

+ +Establece qué servicio de imágenes se utiliza para el soporte experimental de activos de Astro. + +El valor debe ser un especificador de módulo para el servicio de imágenes que se utilizará: +uno de los dos servicios incorporados de Astro o una implementación de terceros. + + +```js +{ + image: { + // Ejemplo: Habilita el servicio de imágenes basado en Sharp + service: 'astro/assets/services/sharp', + }, +} +``` + + ## Opciones de Markdown ### markdown.drafts @@ -593,3 +632,28 @@ Para ayudar a algunos usuarios a migrar entre versiones de Astro, ocasionalmente Estas flags te permiten optar por algunos comportamientos desactualizados u obsoletos de Astro en la última versión, para que pueda continuar actualizándose y aprovechar los nuevos lanzamientos de Astro. +## Flags Experimentales + +Astro ofrece flags experimentales para dar a los usuarios acceso temprano a nuevas características. + +Estas flags no son garantía de ser estables. + +### experimental.assets + +

+ +**Tipo:** `boolean`
+**Por defecto:** `false`
+ +

+ +Habilita soporte experimental para optimizar y cambiar el tamaño de las imágenes. Con esto habilitado, se expondrá un nuevo módulo `astro:assets`. + +Para habilitar esta característica, establezca `experimental.assets` en `true` en la configuración de Astro: + +```js +{ + experimental: { + assets: true, + }, +} diff --git a/src/i18n/es/nav.ts b/src/i18n/es/nav.ts index f1604f324ff3d..0e00f53bfdc36 100644 --- a/src/i18n/es/nav.ts +++ b/src/i18n/es/nav.ts @@ -30,7 +30,7 @@ export default NavDictionary({ examples: 'Recetas', 'guides/migrate-to-astro': 'Migrar a Astro', 'guides/cms': 'Conectando un CMS', - 'guides/integrations-guide': 'Integraciones', + 'guides/integrations-guide': 'Agrega integraciones', 'guides/deploy': 'Desplegar', 'guides/recipes': 'Más recetas', From cfea3870353a35db6eb3e4a71b3bb2a7342ccee5 Mon Sep 17 00:00:00 2001 From: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> Date: Thu, 16 Mar 2023 09:41:33 -0300 Subject: [PATCH 05/26] Tutorial Styling Improvements (#2852) * Add RTL support to `` component * Add RTL support to `` component * Increase `line-height` of lists with `` * Improve tutorial to-do steps contrast ratio * Add focus outline to Tutorial Tracker Tab * Tweak `line-height` and `` styles * Tweak `` colors * Fix double outline issue in Firefox Co-authored-by: Chris Swithinbank --- public/index.css | 8 ++++---- src/components/Checklist.astro | 5 +++-- src/components/tutorial/Box.astro | 8 +++++--- src/components/tutorial/TutorialNav.astro | 5 +++++ src/components/tutorial/UnitProgressIcon.astro | 8 ++++++++ 5 files changed, 25 insertions(+), 9 deletions(-) diff --git a/public/index.css b/public/index.css index afe058bb1149c..9ee6440ff58ee 100644 --- a/public/index.css +++ b/public/index.css @@ -234,8 +234,8 @@ h5 { } p, -.content ul { - line-height: 1.65; +.content ul, .content ol { + line-height: 1.75; } p, @@ -360,9 +360,9 @@ pre { font-family: var(--font-body); font-size: 0.9375rem; border-radius: 0.25rem; - padding: 0.125rem 0.375rem; + padding: 0.0625rem 0.375rem; border: 1px solid var(--theme-shade-subtle); - box-shadow: 0 3px var(--theme-shade-subtle); + box-shadow: 0 2px var(--theme-shade-subtle); background-color: var(--theme-bg-offset); white-space: nowrap; } diff --git a/src/components/Checklist.astro b/src/components/Checklist.astro index d0e0b5e965127..d3a8a6d089d78 100644 --- a/src/components/Checklist.astro +++ b/src/components/Checklist.astro @@ -39,7 +39,8 @@ const { key = 'default' } = Astro.props as Props; position: relative; margin: 0 -1rem; border-radius: 0.5rem; - padding: 0.5rem 0.5rem 0.5rem 4rem; + padding-block: 0.5rem; + padding-inline: 4rem 0.5rem; cursor: pointer; /* Compensate for space between checkbox and text. */ text-indent: -0.4ch; @@ -62,7 +63,7 @@ const { key = 'default' } = Astro.props as Props; check-list :global(input[type='checkbox']::after) { content: '✔︎'; position: absolute; - left: 1rem; + inset-inline-start: 1rem; top: 50%; transform: translateY(-50%) translate(3px, -3px); transform-origin: center; diff --git a/src/components/tutorial/Box.astro b/src/components/tutorial/Box.astro index 926e335a94e0d..91be13197237d 100644 --- a/src/components/tutorial/Box.astro +++ b/src/components/tutorial/Box.astro @@ -18,8 +18,10 @@ const { icon } = Astro.props; } .highlight-box { - position: relative; - padding: 2rem 4rem 2rem 2rem; + position: relative; + padding-block: 2rem; + padding-inline-start: 2rem; + padding-inline-end: 4rem; border: 1px solid var(--theme-shade-subtle); box-shadow: -0.5rem 0.5rem 0 -1px var(--theme-bg), -0.5rem 0.5rem var(--theme-shade-subtle), -1rem 1rem 0 -1px var(--theme-bg), -1rem 1rem var(--theme-shade-subtle); @@ -32,7 +34,7 @@ const { icon } = Astro.props; content: ''; position: absolute; top: 0.5rem; - right: 0.5rem; + inset-inline-end: 0.5rem; width: 5rem; height: 5rem; background-color: var(--theme-divider); diff --git a/src/components/tutorial/TutorialNav.astro b/src/components/tutorial/TutorialNav.astro index 4573d9da51a57..f769c45108d28 100644 --- a/src/components/tutorial/TutorialNav.astro +++ b/src/components/tutorial/TutorialNav.astro @@ -106,6 +106,11 @@ const isCurrentUnit = (unit: typeof units[number]) => font-weight: bold; } + :global(a:focus unit-progress-icon) { + outline: 2px solid var(--theme-accent-secondary); + outline-offset: 0.25em; + } + .header-link { border: 0; padding: 0; diff --git a/src/components/tutorial/UnitProgressIcon.astro b/src/components/tutorial/UnitProgressIcon.astro index 36a855a2f2d19..e5c530cfc2612 100644 --- a/src/components/tutorial/UnitProgressIcon.astro +++ b/src/components/tutorial/UnitProgressIcon.astro @@ -122,6 +122,14 @@ const t = useTranslations(Astro); background-color: var(--theme-bg-offset); } + :global([aria-selected='true']) .segment:not(.done) { + stroke: hsl(var(--color-gray-95)); + } + + :global(.theme-dark [aria-selected='true']) .segment:not(.done) { + stroke: hsl(var(--color-gray-20)); + } + .segment { fill: none; stroke: var(--theme-bg-offset); From 1c1aee26d1846ca584c1bfece59ce1c495c5a3a3 Mon Sep 17 00:00:00 2001 From: Yan-Thomas Date: Thu, 16 Mar 2023 12:42:14 +0000 Subject: [PATCH 06/26] [ci] format --- public/index.css | 3 ++- src/components/tutorial/Box.astro | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/public/index.css b/public/index.css index 9ee6440ff58ee..9fe6b6432c475 100644 --- a/public/index.css +++ b/public/index.css @@ -234,7 +234,8 @@ h5 { } p, -.content ul, .content ol { +.content ul, +.content ol { line-height: 1.75; } diff --git a/src/components/tutorial/Box.astro b/src/components/tutorial/Box.astro index 91be13197237d..065c1845f0f15 100644 --- a/src/components/tutorial/Box.astro +++ b/src/components/tutorial/Box.astro @@ -18,7 +18,7 @@ const { icon } = Astro.props; } .highlight-box { - position: relative; + position: relative; padding-block: 2rem; padding-inline-start: 2rem; padding-inline-end: 4rem; From 73df5dfa622715cc3a6ef1398650926088720187 Mon Sep 17 00:00:00 2001 From: Tc001 <55956895+Tc-001@users.noreply.github.com> Date: Thu, 16 Mar 2023 14:57:49 +0200 Subject: [PATCH 07/26] Fix astro logo in readme (#2860) * Fix broken image, make dynamic * Make part of heading, fix size * Try and get around markdown parsing * Make logo smaller --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d8ac082659476..a5dd3b5b3fd24 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ -# Astro Docs Astro logo +# Astro Docs Astro logo + To all who come to this happy place: welcome. From a2101a45ee4a89cf704676b5ef3dc8e2d6284019 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Thu, 16 Mar 2023 23:03:10 +0100 Subject: [PATCH 08/26] Bump `astro-og-canvas` to 0.1.7 (#2870) --- package.json | 2 +- pnpm-lock.yaml | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 9805cc349bb35..4e563cc2480ef 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "astro": "^2.0.17", "astro-auto-import": "^0.2.1", "astro-eslint-parser": "^0.9.2", - "astro-og-canvas": "^0.1.6", + "astro-og-canvas": "^0.1.7", "bcp-47-normalize": "^2.1.0", "canvaskit-wasm": "^0.37.0", "chroma-js": "^2.4.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d6acc13a56bd0..5596368d8f5c2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,7 +23,7 @@ specifiers: astro: ^2.0.17 astro-auto-import: ^0.2.1 astro-eslint-parser: ^0.9.2 - astro-og-canvas: ^0.1.6 + astro-og-canvas: ^0.1.7 bcp-47-normalize: ^2.1.0 canvas-confetti: ^1.6.0 canvaskit-wasm: ^0.37.0 @@ -105,7 +105,7 @@ devDependencies: astro: 2.0.17_lo4g36gygrjg64j6jydpsd7m54 astro-auto-import: 0.2.1_astro@2.0.17 astro-eslint-parser: 0.9.2 - astro-og-canvas: 0.1.6_astro@2.0.17 + astro-og-canvas: 0.1.7_astro@2.0.17 bcp-47-normalize: 2.1.0 canvaskit-wasm: 0.37.0 chroma-js: 2.4.2 @@ -1712,8 +1712,8 @@ packages: - supports-color dev: true - /astro-og-canvas/0.1.6_astro@2.0.17: - resolution: {integrity: sha512-yDmS2dtCeN+gr6X/Y7N8ieupUTXwfs4L72w6Mx1xLtzkhuzTDf4W29vPZKMtKFU6N+T6Cjx6aDXwIG2k5A2GVA==} + /astro-og-canvas/0.1.7_astro@2.0.17: + resolution: {integrity: sha512-agUArDfxLPnoz+3fqQaKy8NkDGK3JpNdES0Z82OLyOnRTppv2E6pNR+sR9lpiX4RH+3jMpmuD6b/i4dR6MMcMg==} engines: {node: '>=16.0.0'} peerDependencies: astro: ^1.0.0 || ^2.0.0-beta From 449b62c70caaa57b4762755936f293795f805cf7 Mon Sep 17 00:00:00 2001 From: feraleyebrows <26926272+feraleyebrows@users.noreply.github.com> Date: Thu, 16 Mar 2023 22:16:25 +0000 Subject: [PATCH 09/26] Add information on manually installing Typescript plugin. (#2727) (#2728) Co-authored-by: Dan Jutan --- src/content/docs/en/guides/typescript.mdx | 36 ++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/typescript.mdx b/src/content/docs/en/guides/typescript.mdx index 4290fd306d25d..a03af64ba4cb2 100644 --- a/src/content/docs/en/guides/typescript.mdx +++ b/src/content/docs/en/guides/typescript.mdx @@ -4,7 +4,7 @@ description: Learn how to use Astro's built-in TypeScript support. i18nReady: true --- import Since from '~/components/Since.astro' - +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' Astro ships with built-in support for [TypeScript](https://www.typescriptlang.org/). You can import `.ts` and `.tsx` files in your Astro project, write TypeScript code directly inside your [Astro component](/en/core-concepts/astro-components/#the-component-script), and even use an [`astro.config.ts`](/en/guides/configuring-astro/#the-astro-config-file) file if you like. @@ -34,6 +34,40 @@ Additionally, our templates include an `env.d.ts` file inside the `src` folder t /// ``` +If you are not using VSCode, you can install the [Astro TypeScript plugin](https://www.npmjs.com/package/@astrojs/ts-plugin) to support importing `.astro` files from `.ts` files (which can be useful for re-exporting). + + + + ```shell + npm install @astrojs/ts-plugin + ``` + + + ```shell + pnpm install @astrojs/ts-plugin + ``` + + + ```shell + yarn add @astrojs/ts-plugin + ``` + + + +Then, add the following to your `tsconfig.json`: + +```json title="tsconfig.json" + "compilerOptions": { + "plugins": [ + { + "name": "@astrojs/ts-plugin" + }, + ], +``` + +To check that the plugin is working, create a `.ts` file and import an Astro component into it. You should have no warning messages from your editor. + + ### UI Frameworks If your project uses a [UI framework](/en/core-concepts/framework-components/), additional settings depending on the framework might be needed. Please see your framework's TypeScript documentation for more information. ([Vue](https://vuejs.org/guide/typescript/overview.html#using-vue-with-typescript), [React](https://reactjs.org/docs/static-type-checking.html), [Preact](https://preactjs.com/guide/v10/typescript), [Solid](https://www.solidjs.com/guides/typescript)) From c2bcbbd1bae8c82054af8658eb54d9de1e704e88 Mon Sep 17 00:00:00 2001 From: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> Date: Thu, 16 Mar 2023 19:37:34 -0300 Subject: [PATCH 10/26] Make more pages ready for translation (#2855) --- scripts/generate-integration-pages.ts | 10 ++++-- src/content/docs/en/guides/cms/buttercms.mdx | 1 + src/content/docs/en/guides/cms/contentful.mdx | 1 + src/content/docs/en/guides/cms/ghost.mdx | 1 + src/content/docs/en/guides/cms/storyblok.mdx | 1 + src/content/docs/en/guides/cms/tina-cms.mdx | 1 + src/content/docs/en/guides/cms/wordpress.mdx | 1 + .../en/guides/integrations-guide/alpinejs.mdx | 2 +- .../guides/integrations-guide/cloudflare.mdx | 2 +- .../en/guides/integrations-guide/deno.mdx | 2 +- .../en/guides/integrations-guide/image.mdx | 4 +-- .../docs/en/guides/integrations-guide/lit.mdx | 2 +- .../en/guides/integrations-guide/markdoc.mdx | 36 +++++++++---------- .../docs/en/guides/integrations-guide/mdx.mdx | 2 +- .../en/guides/integrations-guide/netlify.mdx | 2 +- .../en/guides/integrations-guide/node.mdx | 2 +- .../guides/integrations-guide/partytown.mdx | 2 +- .../en/guides/integrations-guide/preact.mdx | 2 +- .../en/guides/integrations-guide/prefetch.mdx | 2 +- .../en/guides/integrations-guide/react.mdx | 2 +- .../en/guides/integrations-guide/sitemap.mdx | 4 +-- .../en/guides/integrations-guide/solid-js.mdx | 2 +- .../en/guides/integrations-guide/svelte.mdx | 4 +-- .../en/guides/integrations-guide/tailwind.mdx | 2 +- .../en/guides/integrations-guide/vercel.mdx | 2 +- .../docs/en/guides/integrations-guide/vue.mdx | 2 +- .../migrate-to-astro/from-docusaurus.mdx | 1 + .../guides/migrate-to-astro/from-eleventy.mdx | 1 + .../guides/migrate-to-astro/from-gatsby.mdx | 1 + .../guides/migrate-to-astro/from-gridsome.mdx | 1 + .../en/guides/migrate-to-astro/from-hugo.mdx | 1 + .../guides/migrate-to-astro/from-jekyll.mdx | 1 + .../guides/migrate-to-astro/from-nextjs.mdx | 1 + .../guides/migrate-to-astro/from-nuxtjs.mdx | 1 + .../guides/migrate-to-astro/from-pelican.mdx | 1 + .../migrate-to-astro/from-sveltekit.mdx | 1 + .../guides/migrate-to-astro/from-vuepress.mdx | 1 + .../migrate-to-astro/from-wordpress.mdx | 1 + .../docs/en/tutorial/0-introduction/1.mdx | 1 + .../docs/en/tutorial/0-introduction/index.mdx | 1 + src/content/docs/en/tutorial/1-setup/1.mdx | 1 + src/content/docs/en/tutorial/1-setup/2.mdx | 1 + src/content/docs/en/tutorial/1-setup/3.mdx | 1 + src/content/docs/en/tutorial/1-setup/4.mdx | 1 + src/content/docs/en/tutorial/1-setup/5.mdx | 1 + .../docs/en/tutorial/1-setup/index.mdx | 1 + src/content/docs/en/tutorial/2-pages/1.mdx | 1 + src/content/docs/en/tutorial/2-pages/2.mdx | 1 + src/content/docs/en/tutorial/2-pages/3.mdx | 1 + src/content/docs/en/tutorial/2-pages/4.mdx | 1 + src/content/docs/en/tutorial/2-pages/5.mdx | 1 + .../docs/en/tutorial/2-pages/index.mdx | 1 + .../docs/en/tutorial/3-components/1.mdx | 1 + .../docs/en/tutorial/3-components/2.mdx | 1 + .../docs/en/tutorial/3-components/3.mdx | 1 + .../docs/en/tutorial/3-components/4.mdx | 1 + .../docs/en/tutorial/3-components/index.mdx | 1 + src/content/docs/en/tutorial/4-layouts/1.mdx | 1 + src/content/docs/en/tutorial/4-layouts/2.mdx | 1 + src/content/docs/en/tutorial/4-layouts/3.mdx | 1 + .../docs/en/tutorial/4-layouts/index.mdx | 1 + .../docs/en/tutorial/5-astro-api/1.mdx | 1 + .../docs/en/tutorial/5-astro-api/2.mdx | 1 + .../docs/en/tutorial/5-astro-api/3.mdx | 1 + .../docs/en/tutorial/5-astro-api/4.mdx | 1 + .../docs/en/tutorial/5-astro-api/index.mdx | 1 + src/content/docs/en/tutorial/6-islands/1.mdx | 1 + src/content/docs/en/tutorial/6-islands/2.mdx | 1 + src/content/docs/en/tutorial/6-islands/3.mdx | 1 + .../docs/en/tutorial/6-islands/index.mdx | 1 + 70 files changed, 96 insertions(+), 42 deletions(-) diff --git a/scripts/generate-integration-pages.ts b/scripts/generate-integration-pages.ts index 1f0e2e93c18e5..08f9a7e829b4d 100644 --- a/scripts/generate-integration-pages.ts +++ b/scripts/generate-integration-pages.ts @@ -24,6 +24,7 @@ interface IntegrationData { category: 'renderer' | 'adapter' | 'other'; readme: string; srcdir: string; + i18nReady: string; } const prettyCategoryDescription: Record = { @@ -31,11 +32,13 @@ const prettyCategoryDescription: Record = { adapter: 'SSR adapter to deploy your Astro project', other: 'integration in your Astro project', }; + class IntegrationPagesBuilder { readonly #githubToken?: string; readonly #sourceBranch: string; readonly #sourceRepo: string; readonly #deprecatedIntegrations = new Set(['turbolinks']); + readonly #i18nNotReadyIntegrations = new Set(['markdoc']); constructor(opts: { githubToken?: string; sourceBranch: string; sourceRepo: string }) { this.#githubToken = opts.githubToken; @@ -88,8 +91,9 @@ class IntegrationPagesBuilder { : keywords.includes('astro-adapter') ? 'adapter' : 'other'; + const i18nReady = (!this.#i18nNotReadyIntegrations.has(pkg.name)).toString(); const readme = await (await fetch(readmeURL)).text(); - return { name, category, readme, srcdir: pkg.name }; + return { name, category, readme, srcdir: pkg.name, i18nReady }; }) ); } @@ -101,7 +105,7 @@ class IntegrationPagesBuilder { * - Add the correct base to any relative links * - _Remove_ the base from any docs links */ - async #processReadme({ name, readme, srcdir, category }: IntegrationData): Promise { + async #processReadme({ name, readme, srcdir, category, i18nReady }: IntegrationData): Promise { // Remove title from body readme = readme.replace(/^# (.+)/, ''); const githubLink = `https://github.com/${this.#sourceRepo}/tree/${ @@ -135,7 +139,7 @@ description: ${createDescription(name, category)} githubURL: '${githubLink}' hasREADME: true category: ${category} -i18nReady: false +i18nReady: ${i18nReady} --- import Video from '~/components/Video.astro'; diff --git a/src/content/docs/en/guides/cms/buttercms.mdx b/src/content/docs/en/guides/cms/buttercms.mdx index 32cc67c1ba2bb..2467a544630dd 100644 --- a/src/content/docs/en/guides/cms/buttercms.mdx +++ b/src/content/docs/en/guides/cms/buttercms.mdx @@ -4,6 +4,7 @@ description: Add content to your Astro project using ButterCMS type: cms service: ButterCMS stub: false +i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' diff --git a/src/content/docs/en/guides/cms/contentful.mdx b/src/content/docs/en/guides/cms/contentful.mdx index ec4cd49e87fde..7e2f23851a925 100644 --- a/src/content/docs/en/guides/cms/contentful.mdx +++ b/src/content/docs/en/guides/cms/contentful.mdx @@ -3,6 +3,7 @@ title: Contentful & Astro description: Add content to your Astro project using Contentful as a CMS type: cms service: Contentful +i18nReady: true --- import FileTree from '~/components/FileTree.astro' import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' diff --git a/src/content/docs/en/guides/cms/ghost.mdx b/src/content/docs/en/guides/cms/ghost.mdx index bd61eba824545..71d2c3e1c266c 100644 --- a/src/content/docs/en/guides/cms/ghost.mdx +++ b/src/content/docs/en/guides/cms/ghost.mdx @@ -4,6 +4,7 @@ description: Add content to your Astro project using Ghost as a CMS type: cms stub: false service: Ghost +i18nReady: true --- import FileTree from '~/components/FileTree.astro' diff --git a/src/content/docs/en/guides/cms/storyblok.mdx b/src/content/docs/en/guides/cms/storyblok.mdx index 65d0aae72015a..1a9bc22bb8705 100644 --- a/src/content/docs/en/guides/cms/storyblok.mdx +++ b/src/content/docs/en/guides/cms/storyblok.mdx @@ -4,6 +4,7 @@ description: Add content to your Astro project using Storyblok as a CMS type: cms service: Storyblok stub: false +i18nReady: true --- import FileTree from '~/components/FileTree.astro' import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' diff --git a/src/content/docs/en/guides/cms/tina-cms.mdx b/src/content/docs/en/guides/cms/tina-cms.mdx index 52edd2571618b..1f2b6fddf1ca3 100644 --- a/src/content/docs/en/guides/cms/tina-cms.mdx +++ b/src/content/docs/en/guides/cms/tina-cms.mdx @@ -4,6 +4,7 @@ description: Add content to your Astro project using Tina as a CMS type: cms stub: false service: Tina CMS +i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' diff --git a/src/content/docs/en/guides/cms/wordpress.mdx b/src/content/docs/en/guides/cms/wordpress.mdx index 7d926a78652b4..f72132ef330fa 100644 --- a/src/content/docs/en/guides/cms/wordpress.mdx +++ b/src/content/docs/en/guides/cms/wordpress.mdx @@ -4,6 +4,7 @@ description: Add content to your Astro project using WordPress as a CMS type: cms stub: false service: WordPress +i18nReady: true --- import FileTree from '~/components/FileTree.astro' diff --git a/src/content/docs/en/guides/integrations-guide/alpinejs.mdx b/src/content/docs/en/guides/integrations-guide/alpinejs.mdx index 835c220839751..973bec5cb5e69 100644 --- a/src/content/docs/en/guides/integrations-guide/alpinejs.mdx +++ b/src/content/docs/en/guides/integrations-guide/alpinejs.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/alpinejs framework integration to ext githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/alpinejs/' hasREADME: true category: renderer -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; diff --git a/src/content/docs/en/guides/integrations-guide/cloudflare.mdx b/src/content/docs/en/guides/integrations-guide/cloudflare.mdx index c85159f939a5a..07fba66d86941 100644 --- a/src/content/docs/en/guides/integrations-guide/cloudflare.mdx +++ b/src/content/docs/en/guides/integrations-guide/cloudflare.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/cloudflare SSR adapter to deploy your githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/cloudflare/' hasREADME: true category: adapter -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; diff --git a/src/content/docs/en/guides/integrations-guide/deno.mdx b/src/content/docs/en/guides/integrations-guide/deno.mdx index 2deee77c1fcef..7f0080409b1fa 100644 --- a/src/content/docs/en/guides/integrations-guide/deno.mdx +++ b/src/content/docs/en/guides/integrations-guide/deno.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/deno SSR adapter to deploy your Astro githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/deno/' hasREADME: true category: adapter -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; diff --git a/src/content/docs/en/guides/integrations-guide/image.mdx b/src/content/docs/en/guides/integrations-guide/image.mdx index ab83be3bbd949..0f3bb87092e83 100644 --- a/src/content/docs/en/guides/integrations-guide/image.mdx +++ b/src/content/docs/en/guides/integrations-guide/image.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/image integration in your Astro proje githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/image/' hasREADME: true category: other -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; @@ -535,7 +535,7 @@ import { defineConfig } from 'astro/config'; import image from '@astrojs/image'; export default defineConfig({ - integrations: [image({ + integrations: [image({ // may be useful if your hosting provider allows caching between CI builds cacheDir: "./.cache/image" })] diff --git a/src/content/docs/en/guides/integrations-guide/lit.mdx b/src/content/docs/en/guides/integrations-guide/lit.mdx index e1b747bc88dbe..e9c897be66c23 100644 --- a/src/content/docs/en/guides/integrations-guide/lit.mdx +++ b/src/content/docs/en/guides/integrations-guide/lit.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/lit framework integration to extend c githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/lit/' hasREADME: true category: renderer -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; diff --git a/src/content/docs/en/guides/integrations-guide/markdoc.mdx b/src/content/docs/en/guides/integrations-guide/markdoc.mdx index e70a8d6ca52f7..5c344a3a03aeb 100644 --- a/src/content/docs/en/guides/integrations-guide/markdoc.mdx +++ b/src/content/docs/en/guides/integrations-guide/markdoc.mdx @@ -123,21 +123,21 @@ import markdoc from '@astrojs/markdoc'; // https://astro.build/config export default defineConfig({ - integrations: [ - markdoc({ - tags: { - aside: { - render: 'Aside', + integrations: [ + markdoc({ + tags: { + aside: { + render: 'Aside', attributes: { // Component props as attribute definitions // See Markdoc's documentation on defining attributes // https://markdoc.dev/docs/attributes#defining-attributes type: { type: String }, } - }, - }, - }), - ], + }, + }, + }), + ], }); ``` @@ -168,11 +168,11 @@ import markdoc from '@astrojs/markdoc'; // https://astro.build/config export default defineConfig({ - integrations: [ - markdoc({ - nodes: { - heading: { - render: 'Heading', + integrations: [ + markdoc({ + nodes: { + heading: { + render: 'Heading', // Markdoc requires type defs for each attribute. // These should mirror the `Props` type of the component // you are rendering. @@ -181,10 +181,10 @@ export default defineConfig({ attributes: { level: { type: String }, } - }, - }, - }), - ], + }, + }, + }), + ], }); ``` diff --git a/src/content/docs/en/guides/integrations-guide/mdx.mdx b/src/content/docs/en/guides/integrations-guide/mdx.mdx index bf42c1244403b..ce0a51b74754a 100644 --- a/src/content/docs/en/guides/integrations-guide/mdx.mdx +++ b/src/content/docs/en/guides/integrations-guide/mdx.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/mdx integration in your Astro project githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/mdx/' hasREADME: true category: other -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; diff --git a/src/content/docs/en/guides/integrations-guide/netlify.mdx b/src/content/docs/en/guides/integrations-guide/netlify.mdx index 04df3065cf088..6455bf9131ae3 100644 --- a/src/content/docs/en/guides/integrations-guide/netlify.mdx +++ b/src/content/docs/en/guides/integrations-guide/netlify.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/netlify SSR adapter to deploy your As githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/netlify/' hasREADME: true category: adapter -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; diff --git a/src/content/docs/en/guides/integrations-guide/node.mdx b/src/content/docs/en/guides/integrations-guide/node.mdx index 6dcc9f62b0855..7d492bb9864c4 100644 --- a/src/content/docs/en/guides/integrations-guide/node.mdx +++ b/src/content/docs/en/guides/integrations-guide/node.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/node SSR adapter to deploy your Astro githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/node/' hasREADME: true category: adapter -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; diff --git a/src/content/docs/en/guides/integrations-guide/partytown.mdx b/src/content/docs/en/guides/integrations-guide/partytown.mdx index 7787161757e69..d6784d6a88b99 100644 --- a/src/content/docs/en/guides/integrations-guide/partytown.mdx +++ b/src/content/docs/en/guides/integrations-guide/partytown.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/partytown integration in your Astro p githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/partytown/' hasREADME: true category: other -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; diff --git a/src/content/docs/en/guides/integrations-guide/preact.mdx b/src/content/docs/en/guides/integrations-guide/preact.mdx index 930fc5eca4cfa..178c431ac84f4 100644 --- a/src/content/docs/en/guides/integrations-guide/preact.mdx +++ b/src/content/docs/en/guides/integrations-guide/preact.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/preact framework integration to exten githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/preact/' hasREADME: true category: renderer -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; diff --git a/src/content/docs/en/guides/integrations-guide/prefetch.mdx b/src/content/docs/en/guides/integrations-guide/prefetch.mdx index cc5bab79df240..2311daacefaee 100644 --- a/src/content/docs/en/guides/integrations-guide/prefetch.mdx +++ b/src/content/docs/en/guides/integrations-guide/prefetch.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/prefetch integration in your Astro pr githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/prefetch/' hasREADME: true category: other -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; diff --git a/src/content/docs/en/guides/integrations-guide/react.mdx b/src/content/docs/en/guides/integrations-guide/react.mdx index b79d6a133c2d8..a51eb2996991a 100644 --- a/src/content/docs/en/guides/integrations-guide/react.mdx +++ b/src/content/docs/en/guides/integrations-guide/react.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/react framework integration to extend githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/react/' hasREADME: true category: renderer -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; diff --git a/src/content/docs/en/guides/integrations-guide/sitemap.mdx b/src/content/docs/en/guides/integrations-guide/sitemap.mdx index 80bf582755a1b..99e55e9e4b34d 100644 --- a/src/content/docs/en/guides/integrations-guide/sitemap.mdx +++ b/src/content/docs/en/guides/integrations-guide/sitemap.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/sitemap integration in your Astro pro githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/sitemap/' hasREADME: true category: other -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; @@ -100,7 +100,7 @@ After verifying that the sitemaps are built, you can add them to your site's ` - + ``` diff --git a/src/content/docs/en/guides/integrations-guide/solid-js.mdx b/src/content/docs/en/guides/integrations-guide/solid-js.mdx index a833b8cda25bb..9de00bddac651 100644 --- a/src/content/docs/en/guides/integrations-guide/solid-js.mdx +++ b/src/content/docs/en/guides/integrations-guide/solid-js.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/solid-js framework integration to ext githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/solid/' hasREADME: true category: renderer -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; diff --git a/src/content/docs/en/guides/integrations-guide/svelte.mdx b/src/content/docs/en/guides/integrations-guide/svelte.mdx index cc1102a7e0bdc..fc8c581f367a9 100644 --- a/src/content/docs/en/guides/integrations-guide/svelte.mdx +++ b/src/content/docs/en/guides/integrations-guide/svelte.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/svelte framework integration to exten githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/svelte/' hasREADME: true category: renderer -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; @@ -150,7 +150,7 @@ If you're using a preprocessor like TypeScript or SCSS in your Svelte files, you import { vitePreprocess } from '@astrojs/svelte'; export default { - preprocess: vitePreprocess(), + preprocess: vitePreprocess(), }; ``` diff --git a/src/content/docs/en/guides/integrations-guide/tailwind.mdx b/src/content/docs/en/guides/integrations-guide/tailwind.mdx index f2cf41df189e6..f2f08f3f83f20 100644 --- a/src/content/docs/en/guides/integrations-guide/tailwind.mdx +++ b/src/content/docs/en/guides/integrations-guide/tailwind.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/tailwind integration in your Astro pr githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/tailwind/' hasREADME: true category: other -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; diff --git a/src/content/docs/en/guides/integrations-guide/vercel.mdx b/src/content/docs/en/guides/integrations-guide/vercel.mdx index e3a15bc217f03..17110aa62a28f 100644 --- a/src/content/docs/en/guides/integrations-guide/vercel.mdx +++ b/src/content/docs/en/guides/integrations-guide/vercel.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/vercel SSR adapter to deploy your Ast githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/vercel/' hasREADME: true category: adapter -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; diff --git a/src/content/docs/en/guides/integrations-guide/vue.mdx b/src/content/docs/en/guides/integrations-guide/vue.mdx index ad87968d457c5..2b9f8d2ce33c4 100644 --- a/src/content/docs/en/guides/integrations-guide/vue.mdx +++ b/src/content/docs/en/guides/integrations-guide/vue.mdx @@ -13,7 +13,7 @@ description: Learn how to use the @astrojs/vue framework integration to extend c githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/vue/' hasREADME: true category: renderer -i18nReady: false +i18nReady: true --- import Video from '~/components/Video.astro'; 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 cbb5c2cc61edf..bfb10dfd55700 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 @@ -4,6 +4,7 @@ description: Tips for migrating an existing Docusaurus project to Astro type: migration stub: true framework: Docusaurus +i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' 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 22aa34b96f99e..38631f7935ae5 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 @@ -4,6 +4,7 @@ description: Tips for migrating an existing Eleventy project to Astro type: migration stub: true framework: Eleventy +i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' 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 b28847477e8b1..7e20a6b1e203b 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 @@ -4,6 +4,7 @@ description: Tips for migrating an existing Gatsby project to Astro type: migration stub: false framework: Gatsby +i18nReady: true --- import AstroJSXTabs from '~/components/tabs/AstroJSXTabs.astro' import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' 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 44ca94b379f3e..5ee1a2f37d8a2 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 @@ -4,6 +4,7 @@ description: Tips for migrating an existing Gridsome project to Astro type: migration stub: true framework: Gridsome +i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' diff --git a/src/content/docs/en/guides/migrate-to-astro/from-hugo.mdx b/src/content/docs/en/guides/migrate-to-astro/from-hugo.mdx index 5390e1e4f130d..3dceae8ddb89f 100644 --- a/src/content/docs/en/guides/migrate-to-astro/from-hugo.mdx +++ b/src/content/docs/en/guides/migrate-to-astro/from-hugo.mdx @@ -4,6 +4,7 @@ description: Tips for migrating an existing Hugo project to Astro type: migration stub: true framework: Hugo +i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' diff --git a/src/content/docs/en/guides/migrate-to-astro/from-jekyll.mdx b/src/content/docs/en/guides/migrate-to-astro/from-jekyll.mdx index 15ff5d6624b47..f1de9980f93fd 100644 --- a/src/content/docs/en/guides/migrate-to-astro/from-jekyll.mdx +++ b/src/content/docs/en/guides/migrate-to-astro/from-jekyll.mdx @@ -4,6 +4,7 @@ description: Tips for migrating an existing Jekyll project to Astro type: migration stub: true framework: Jekyll +i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' 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 0830d50a04a7e..067b0398cc673 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 @@ -4,6 +4,7 @@ description: Tips for migrating an existing Next.js project to Astro type: migration stub: false framework: Next.js +i18nReady: true --- import AstroJSXTabs from '~/components/tabs/AstroJSXTabs.astro' import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' 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 093e6ae53e5ca..87c8b74786c3b 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 @@ -4,6 +4,7 @@ description: Tips for migrating an existing NuxtJS project to Astro type: migration stub: false framework: NuxtJS +i18nReady: true --- import AstroVueTabs from '~/components/tabs/AstroVueTabs.astro' import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' diff --git a/src/content/docs/en/guides/migrate-to-astro/from-pelican.mdx b/src/content/docs/en/guides/migrate-to-astro/from-pelican.mdx index 57b99678e428f..ae8cbd3e1170a 100644 --- a/src/content/docs/en/guides/migrate-to-astro/from-pelican.mdx +++ b/src/content/docs/en/guides/migrate-to-astro/from-pelican.mdx @@ -4,6 +4,7 @@ description: Tips for migrating an existing Pelican project to Astro type: migration stub: true framework: Pelican +i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' 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 cd727783c162f..5782811f7da6e 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 @@ -4,6 +4,7 @@ description: Tips for migrating an existing SvelteKit project to Astro type: migration stub: true framework: SvelteKit +i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' 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 297f1a130d9a0..c78cf6e43cccd 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 @@ -4,6 +4,7 @@ description: Tips for migrating an existing VuePress project to Astro type: migration stub: true framework: VuePress +i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' diff --git a/src/content/docs/en/guides/migrate-to-astro/from-wordpress.mdx b/src/content/docs/en/guides/migrate-to-astro/from-wordpress.mdx index 97f7f1a0ca8d0..aa0a9eef68e61 100644 --- a/src/content/docs/en/guides/migrate-to-astro/from-wordpress.mdx +++ b/src/content/docs/en/guides/migrate-to-astro/from-wordpress.mdx @@ -4,6 +4,7 @@ description: Tips for migrating an existing WordPress project to Astro type: migration stub: true framework: WordPress +i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' diff --git a/src/content/docs/en/tutorial/0-introduction/1.mdx b/src/content/docs/en/tutorial/0-introduction/1.mdx index 3a93ecf2caa79..428380517ad0b 100644 --- a/src/content/docs/en/tutorial/0-introduction/1.mdx +++ b/src/content/docs/en/tutorial/0-introduction/1.mdx @@ -2,6 +2,7 @@ type: tutorial title: About this Tutorial description: How to get started with the "Build your first Astro blog" tutorial. +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Checklist from '~/components/Checklist.astro'; diff --git a/src/content/docs/en/tutorial/0-introduction/index.mdx b/src/content/docs/en/tutorial/0-introduction/index.mdx index 0675626cda711..6f766910c48a6 100644 --- a/src/content/docs/en/tutorial/0-introduction/index.mdx +++ b/src/content/docs/en/tutorial/0-introduction/index.mdx @@ -5,6 +5,7 @@ title: Build your first Astro Blog description: >- Learn the basics of Astro with a project-based tutorial. All the background knowledge you need to get started! +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Checklist from '~/components/Checklist.astro'; diff --git a/src/content/docs/en/tutorial/1-setup/1.mdx b/src/content/docs/en/tutorial/1-setup/1.mdx index 5677d7c13fd45..18c22ec86899f 100644 --- a/src/content/docs/en/tutorial/1-setup/1.mdx +++ b/src/content/docs/en/tutorial/1-setup/1.mdx @@ -4,6 +4,7 @@ title: Prepare your dev environment description: |- Tutorial: Build your first Astro blog — Install the local tools that you’ll need to complete the tutorial +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Checklist from '~/components/Checklist.astro'; diff --git a/src/content/docs/en/tutorial/1-setup/2.mdx b/src/content/docs/en/tutorial/1-setup/2.mdx index 55daae038986c..c6b210851a4e4 100644 --- a/src/content/docs/en/tutorial/1-setup/2.mdx +++ b/src/content/docs/en/tutorial/1-setup/2.mdx @@ -4,6 +4,7 @@ title: Create your first Astro project description: |- Tutorial: Build your first Astro blog — Create a new project for the Astro tutorial and get ready to code +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Checklist from '~/components/Checklist.astro'; diff --git a/src/content/docs/en/tutorial/1-setup/3.mdx b/src/content/docs/en/tutorial/1-setup/3.mdx index e578024a1ae1c..6bfe2ed1ce5e8 100644 --- a/src/content/docs/en/tutorial/1-setup/3.mdx +++ b/src/content/docs/en/tutorial/1-setup/3.mdx @@ -4,6 +4,7 @@ title: Write your first line of Astro description: |- Tutorial: Build your first Astro blog — Make your first edits to your tutorial project's home page +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Checklist from '~/components/Checklist.astro'; diff --git a/src/content/docs/en/tutorial/1-setup/4.mdx b/src/content/docs/en/tutorial/1-setup/4.mdx index 5b5ad7f82aca5..380bed3a3f631 100644 --- a/src/content/docs/en/tutorial/1-setup/4.mdx +++ b/src/content/docs/en/tutorial/1-setup/4.mdx @@ -4,6 +4,7 @@ title: Store your repository online description: |- Tutorial: Build your first Astro blog — Create a GitHub repo for your tutorial project +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Checklist from '~/components/Checklist.astro'; diff --git a/src/content/docs/en/tutorial/1-setup/5.mdx b/src/content/docs/en/tutorial/1-setup/5.mdx index c05d46293c70b..e7e1aee88cb43 100644 --- a/src/content/docs/en/tutorial/1-setup/5.mdx +++ b/src/content/docs/en/tutorial/1-setup/5.mdx @@ -4,6 +4,7 @@ title: Deploy your site to the web description: |- Tutorial: Build your first Astro blog — Connect your tutorial project's GitHub repo to Netlify and deploy to the web +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Checklist from '~/components/Checklist.astro'; diff --git a/src/content/docs/en/tutorial/1-setup/index.mdx b/src/content/docs/en/tutorial/1-setup/index.mdx index 652cf8969842e..502eec3428af2 100644 --- a/src/content/docs/en/tutorial/1-setup/index.mdx +++ b/src/content/docs/en/tutorial/1-setup/index.mdx @@ -7,6 +7,7 @@ description: >- Prepare your development environment, and create and deploy your first Astro site +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Checklist from '~/components/Checklist.astro'; diff --git a/src/content/docs/en/tutorial/2-pages/1.mdx b/src/content/docs/en/tutorial/2-pages/1.mdx index eac9aa5df588d..38bc26b04b7e7 100644 --- a/src/content/docs/en/tutorial/2-pages/1.mdx +++ b/src/content/docs/en/tutorial/2-pages/1.mdx @@ -4,6 +4,7 @@ title: Create your first Astro page description: |- Tutorial: Build your first Astro blog — Add new pages to your site with navigation links between them +i18nReady: true --- import Checklist from '~/components/Checklist.astro'; import Blanks from '~/components/tutorial/Blanks.astro'; diff --git a/src/content/docs/en/tutorial/2-pages/2.mdx b/src/content/docs/en/tutorial/2-pages/2.mdx index ee039a55c6a87..24d71ddecc534 100644 --- a/src/content/docs/en/tutorial/2-pages/2.mdx +++ b/src/content/docs/en/tutorial/2-pages/2.mdx @@ -4,6 +4,7 @@ title: Write your first Markdown blog post description: |- Tutorial: Build your first Astro blog — Add Markdown pages to your site +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Checklist from '~/components/Checklist.astro'; diff --git a/src/content/docs/en/tutorial/2-pages/3.mdx b/src/content/docs/en/tutorial/2-pages/3.mdx index b3765c1f3413c..44777e4a3a2da 100644 --- a/src/content/docs/en/tutorial/2-pages/3.mdx +++ b/src/content/docs/en/tutorial/2-pages/3.mdx @@ -4,6 +4,7 @@ title: Add dynamic content about you description: |- Tutorial: Build your first Astro blog — Use variables and conditional rendering on your Astro pages +i18nReady: true --- import Checklist from '~/components/Checklist.astro'; import Spoiler from '~/components/Spoiler.astro'; diff --git a/src/content/docs/en/tutorial/2-pages/4.mdx b/src/content/docs/en/tutorial/2-pages/4.mdx index 11d4d21478585..e03c68cc88fcc 100644 --- a/src/content/docs/en/tutorial/2-pages/4.mdx +++ b/src/content/docs/en/tutorial/2-pages/4.mdx @@ -4,6 +4,7 @@ title: Style your About page description: |- Tutorial: Build your first Astro blog — Add an Astro style tag for scoped styling on the page +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Checklist from '~/components/Checklist.astro'; diff --git a/src/content/docs/en/tutorial/2-pages/5.mdx b/src/content/docs/en/tutorial/2-pages/5.mdx index 6309208cfff85..57ab2d067d4c9 100644 --- a/src/content/docs/en/tutorial/2-pages/5.mdx +++ b/src/content/docs/en/tutorial/2-pages/5.mdx @@ -4,6 +4,7 @@ title: Add site-wide styling description: |- Tutorial: Build your first Astro blog — Create a global stylesheet for site-wide styling +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Checklist from '~/components/Checklist.astro'; diff --git a/src/content/docs/en/tutorial/2-pages/index.mdx b/src/content/docs/en/tutorial/2-pages/index.mdx index 7c08eb0603fde..8f706bb3a4259 100644 --- a/src/content/docs/en/tutorial/2-pages/index.mdx +++ b/src/content/docs/en/tutorial/2-pages/index.mdx @@ -5,6 +5,7 @@ title: 'Check in: Unit 2 - Pages' description: |- Tutorial: Build your first Astro blog — Create, style, and link to pages posts on your site +i18nReady: true --- import Checklist from '~/components/Checklist.astro'; import Badge from '~/components/Badge.astro'; diff --git a/src/content/docs/en/tutorial/3-components/1.mdx b/src/content/docs/en/tutorial/3-components/1.mdx index 6502d7ac41055..86483fee38484 100644 --- a/src/content/docs/en/tutorial/3-components/1.mdx +++ b/src/content/docs/en/tutorial/3-components/1.mdx @@ -4,6 +4,7 @@ title: Make a reusable Navigation component description: |- Tutorial: Build your first Astro blog — Replace elements repeated on multiple pages with a reusable component +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Blanks from '~/components/tutorial/Blanks.astro'; diff --git a/src/content/docs/en/tutorial/3-components/2.mdx b/src/content/docs/en/tutorial/3-components/2.mdx index 9a8fa21aebe71..fbf1c63e5fdd4 100644 --- a/src/content/docs/en/tutorial/3-components/2.mdx +++ b/src/content/docs/en/tutorial/3-components/2.mdx @@ -4,6 +4,7 @@ title: Create a social media footer description: |- Tutorial: Build your first Astro blog — Build a new component from scratch, then add it to your pages +i18nReady: true --- import Checklist from '~/components/Checklist.astro'; import Box from '~/components/tutorial/Box.astro'; diff --git a/src/content/docs/en/tutorial/3-components/3.mdx b/src/content/docs/en/tutorial/3-components/3.mdx index 2520101f45ea6..161afbb99c823 100644 --- a/src/content/docs/en/tutorial/3-components/3.mdx +++ b/src/content/docs/en/tutorial/3-components/3.mdx @@ -6,6 +6,7 @@ description: >- Use everything you've learned so far to build a header with responsive navigation +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Box from '~/components/tutorial/Box.astro'; diff --git a/src/content/docs/en/tutorial/3-components/4.mdx b/src/content/docs/en/tutorial/3-components/4.mdx index 2e54ce69192f8..ed0e7be7477a1 100644 --- a/src/content/docs/en/tutorial/3-components/4.mdx +++ b/src/content/docs/en/tutorial/3-components/4.mdx @@ -6,6 +6,7 @@ description: >- Add client-side interactivity to your mobile navigation with an Astro script tag +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Blanks from '~/components/tutorial/Blanks.astro'; diff --git a/src/content/docs/en/tutorial/3-components/index.mdx b/src/content/docs/en/tutorial/3-components/index.mdx index 2f3cf379fb2d3..70f4d7c3c6274 100644 --- a/src/content/docs/en/tutorial/3-components/index.mdx +++ b/src/content/docs/en/tutorial/3-components/index.mdx @@ -5,6 +5,7 @@ title: 'Check in: Unit 3 - Components' description: |- Tutorial: Build your first Astro blog — Build Astro components to reuse code for common elements across your website +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Box from '~/components/tutorial/Box.astro'; diff --git a/src/content/docs/en/tutorial/4-layouts/1.mdx b/src/content/docs/en/tutorial/4-layouts/1.mdx index 962f879b75d1c..cbe6a6f6a580d 100644 --- a/src/content/docs/en/tutorial/4-layouts/1.mdx +++ b/src/content/docs/en/tutorial/4-layouts/1.mdx @@ -4,6 +4,7 @@ title: Build your first layout description: |- Tutorial: Build your first Astro blog — Refactor common elements into a reusable page layout +i18nReady: true --- import Box from '~/components/tutorial/Box.astro'; import Checklist from '~/components/Checklist.astro'; diff --git a/src/content/docs/en/tutorial/4-layouts/2.mdx b/src/content/docs/en/tutorial/4-layouts/2.mdx index 1eba007e3aecf..e875bc884fb37 100644 --- a/src/content/docs/en/tutorial/4-layouts/2.mdx +++ b/src/content/docs/en/tutorial/4-layouts/2.mdx @@ -6,6 +6,7 @@ description: >- Create a blog post layout for your Markdown files and pass it frontmatter values as props +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Box from '~/components/tutorial/Box.astro'; diff --git a/src/content/docs/en/tutorial/4-layouts/3.mdx b/src/content/docs/en/tutorial/4-layouts/3.mdx index 346ac73aaaed6..3a9ebf06399a3 100644 --- a/src/content/docs/en/tutorial/4-layouts/3.mdx +++ b/src/content/docs/en/tutorial/4-layouts/3.mdx @@ -4,6 +4,7 @@ title: Combine layouts to get the best of both worlds description: |- Tutorial: Build your first Astro blog — Add your basic page layout to the layout that formats your blog posts +i18nReady: true --- import Blanks from '~/components/tutorial/Blanks.astro'; import Box from '~/components/tutorial/Box.astro'; diff --git a/src/content/docs/en/tutorial/4-layouts/index.mdx b/src/content/docs/en/tutorial/4-layouts/index.mdx index 64083e84adfa7..60fc85263e20a 100644 --- a/src/content/docs/en/tutorial/4-layouts/index.mdx +++ b/src/content/docs/en/tutorial/4-layouts/index.mdx @@ -7,6 +7,7 @@ description: >- Use Astro layouts to share common elements and styles across your pages and posts +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Box from '~/components/tutorial/Box.astro'; 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 4d5ad1cbb926d..b30b394113064 100644 --- a/src/content/docs/en/tutorial/5-astro-api/1.mdx +++ b/src/content/docs/en/tutorial/5-astro-api/1.mdx @@ -4,6 +4,7 @@ title: Create a blog post archive description: |- Tutorial: Build your first Astro blog — Use Astro.glob() to access data from files in your project +i18nReady: true --- import Box from '~/components/tutorial/Box.astro'; import Checklist from '~/components/Checklist.astro'; 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 8f0c22bd9c1ae..f0e0ba5bba3c7 100644 --- a/src/content/docs/en/tutorial/5-astro-api/2.mdx +++ b/src/content/docs/en/tutorial/5-astro-api/2.mdx @@ -4,6 +4,7 @@ title: Generate tag pages description: |- Tutorial: Build your first Astro blog — Use getStaticPaths() to create multiple pages (routes) at once +i18nReady: true --- import Box from '~/components/tutorial/Box.astro'; import Checklist from '~/components/Checklist.astro'; 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 f050d94f48d30..ab3ece2cb0670 100644 --- a/src/content/docs/en/tutorial/5-astro-api/3.mdx +++ b/src/content/docs/en/tutorial/5-astro-api/3.mdx @@ -4,6 +4,7 @@ title: Build a tag index page description: |- Tutorial: Build your first Astro blog — Use everything you've learned so far to build a Tag Index page +i18nReady: true --- import Box from '~/components/tutorial/Box.astro'; import Checklist from '~/components/Checklist.astro'; 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 8c6cd73f0e713..b964d81fd4052 100644 --- a/src/content/docs/en/tutorial/5-astro-api/4.mdx +++ b/src/content/docs/en/tutorial/5-astro-api/4.mdx @@ -6,6 +6,7 @@ description: >- Install Astro's official package for creating a feed that your readers can subscribe to +i18nReady: true --- import Box from '~/components/tutorial/Box.astro'; import Checklist from '~/components/Checklist.astro'; diff --git a/src/content/docs/en/tutorial/5-astro-api/index.mdx b/src/content/docs/en/tutorial/5-astro-api/index.mdx index acd539e9d2b78..7df4eba887e73 100644 --- a/src/content/docs/en/tutorial/5-astro-api/index.mdx +++ b/src/content/docs/en/tutorial/5-astro-api/index.mdx @@ -7,6 +7,7 @@ description: >- Fetching and using data from project files to dynamically generate pages content and routes +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Box from '~/components/tutorial/Box.astro'; diff --git a/src/content/docs/en/tutorial/6-islands/1.mdx b/src/content/docs/en/tutorial/6-islands/1.mdx index f1f6da4e5b5a8..7778c35328a72 100644 --- a/src/content/docs/en/tutorial/6-islands/1.mdx +++ b/src/content/docs/en/tutorial/6-islands/1.mdx @@ -4,6 +4,7 @@ title: Build your first Astro island description: |- Tutorial: Build your first Astro blog — Use a Preact component to greet your visitors with a randomly-selected message +i18nReady: true --- import Box from '~/components/tutorial/Box.astro'; import Checklist from '~/components/Checklist.astro'; diff --git a/src/content/docs/en/tutorial/6-islands/2.mdx b/src/content/docs/en/tutorial/6-islands/2.mdx index b2728aa264f00..29a1adc869bf2 100644 --- a/src/content/docs/en/tutorial/6-islands/2.mdx +++ b/src/content/docs/en/tutorial/6-islands/2.mdx @@ -4,6 +4,7 @@ title: 'Back on dry land. Take your blog from day to night, no island required!' description: |- Tutorial: Build your first Astro blog — Build a light/dark theme toggle using only JavaScript and CSS +i18nReady: true --- import Box from '~/components/tutorial/Box.astro'; import Checklist from '~/components/Checklist.astro'; diff --git a/src/content/docs/en/tutorial/6-islands/3.mdx b/src/content/docs/en/tutorial/6-islands/3.mdx index 2af43f0e0bd16..26c454f8cd6db 100644 --- a/src/content/docs/en/tutorial/6-islands/3.mdx +++ b/src/content/docs/en/tutorial/6-islands/3.mdx @@ -6,6 +6,7 @@ description: >- Check out the final version of your project and find out what’s next with Astro! +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Box from '~/components/tutorial/Box.astro'; diff --git a/src/content/docs/en/tutorial/6-islands/index.mdx b/src/content/docs/en/tutorial/6-islands/index.mdx index 222a2c47f4058..1a23a3efc1a63 100644 --- a/src/content/docs/en/tutorial/6-islands/index.mdx +++ b/src/content/docs/en/tutorial/6-islands/index.mdx @@ -5,6 +5,7 @@ title: 'Check in: Unit 6 - Astro Islands' description: |- Tutorial: Build your first Astro blog — Use Astro islands to bring frontend framework components into your Astro site +i18nReady: true --- import Badge from '~/components/Badge.astro'; import Box from '~/components/tutorial/Box.astro'; From 50ac15aee1456a7630bfa457470c883f1465e018 Mon Sep 17 00:00:00 2001 From: Jutanium Date: Thu, 16 Mar 2023 22:38:30 +0000 Subject: [PATCH 11/26] [ci] format --- scripts/generate-integration-pages.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/scripts/generate-integration-pages.ts b/scripts/generate-integration-pages.ts index 08f9a7e829b4d..8f233b08aa2c4 100644 --- a/scripts/generate-integration-pages.ts +++ b/scripts/generate-integration-pages.ts @@ -105,7 +105,13 @@ class IntegrationPagesBuilder { * - Add the correct base to any relative links * - _Remove_ the base from any docs links */ - async #processReadme({ name, readme, srcdir, category, i18nReady }: IntegrationData): Promise { + async #processReadme({ + name, + readme, + srcdir, + category, + i18nReady, + }: IntegrationData): Promise { // Remove title from body readme = readme.replace(/^# (.+)/, ''); const githubLink = `https://github.com/${this.#sourceRepo}/tree/${ From 9b16a329f95c0cfd2f3bae2e19876661cf66057a Mon Sep 17 00:00:00 2001 From: Nikolai Grushkovsky Date: Fri, 17 Mar 2023 06:00:24 +0700 Subject: [PATCH 12/26] Fix `getEntryBySlug` function usage example (#2850) --- src/content/docs/en/reference/api-reference.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/docs/en/reference/api-reference.mdx b/src/content/docs/en/reference/api-reference.mdx index 3278591bd00e5..bb6bf5d1cbca7 100644 --- a/src/content/docs/en/reference/api-reference.mdx +++ b/src/content/docs/en/reference/api-reference.mdx @@ -780,7 +780,7 @@ const draftBlogPosts = await getCollection('blog', ({ data }) => { ### `getEntryBySlug()` -**Type:** `(collection: string, id: string) => CollectionEntry` +**Type:** `(collection: string, slug: string) => CollectionEntry` `getEntryBySlug()` is a function that retrieves a single collection entry by collection name and entry `slug`. @@ -789,7 +789,7 @@ const draftBlogPosts = await getCollection('blog', ({ data }) => { --- import { getEntryBySlug } from 'astro:content'; -const enterprise = await getEntryBySlug('blog', 'enterprise.md'); +const enterprise = await getEntryBySlug('blog', 'enterprise'); --- ``` @@ -842,7 +842,7 @@ A function to compile a given Markdown or MDX document for rendering. This retur ```astro --- import { getEntryBySlug } from 'astro:content'; -const entry = await getEntryBySlug('blog', 'entry-1.md'); +const entry = await getEntryBySlug('blog', 'entry-1'); const { Content, headings, remarkPluginFrontmatter } = await entry.render(); --- From 1329c366446f2428024365763e9f8a5df71ce261 Mon Sep 17 00:00:00 2001 From: Michael Jolley Date: Thu, 16 Mar 2023 18:45:07 -0500 Subject: [PATCH 13/26] [i18nIgnore] Fix link in integration API reference (#2862) * Fixing wrong link in integration API reference * Updating link based on feedback from @delucis --- src/content/docs/en/reference/integrations-reference.mdx | 4 ++-- src/content/docs/es/reference/integrations-reference.mdx | 4 ++-- src/content/docs/pt-br/reference/integrations-reference.mdx | 4 ++-- src/content/docs/zh-cn/reference/integrations-reference.mdx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/content/docs/en/reference/integrations-reference.mdx b/src/content/docs/en/reference/integrations-reference.mdx index d5fd5ec5bd550..0a0aec7729b8b 100644 --- a/src/content/docs/en/reference/integrations-reference.mdx +++ b/src/content/docs/en/reference/integrations-reference.mdx @@ -359,7 +359,7 @@ export default function myIntegration() { #### `routes` option -**Type:** [`RouteData[]`](https://github.com/withastro/astro/blob/main/packages/astro/src/%40types/astro.ts#L973) +**Type:** [`RouteData[]`](#routedata-type-reference) A list of all generated routes alongside their associated metadata. **This will be empty when using an SSR adapter!** @@ -368,7 +368,7 @@ You can reference the full `RouteData` type below, but the most common propertie - `component` - the input file path relative to the project root - `pathname` - the output file URL (undefined for routes using `[dynamic]` and `[...spread]` params) -**`RouteData` type reference** +##### `RouteData` type reference ```ts interface RouteData { diff --git a/src/content/docs/es/reference/integrations-reference.mdx b/src/content/docs/es/reference/integrations-reference.mdx index f0efea7879c13..4f9192b1c4032 100644 --- a/src/content/docs/es/reference/integrations-reference.mdx +++ b/src/content/docs/es/reference/integrations-reference.mdx @@ -357,7 +357,7 @@ export default function myIntegration() { #### Opción `routes` -**Tipo:** [`RouteData[]`](https://github.com/withastro/astro/blob/main/packages/astro/src/%40types/astro.ts#L973) +**Tipo:** [`RouteData[]`](#referencia-del-tipo-routedata) Una lista de todas las rutas generadas junto con sus metadatos asociados. **¡Estará vacío cuando uses un adaptador SSR!** @@ -366,7 +366,7 @@ Puedes consultar la referencia completa del tipo `RouteData` a continuación, pe - `component` - la ruta del archivo de entrada relativa a la raíz del proyecto - `pathname` - la URL del archivo de salida (indefinido para rutas que usan parámetros `[dynamic]` y `[...spread]`) -**Referencia del tipo `RouteData`** +##### Referencia del tipo `RouteData` ```ts interface RouteData { diff --git a/src/content/docs/pt-br/reference/integrations-reference.mdx b/src/content/docs/pt-br/reference/integrations-reference.mdx index 5039723973c76..d9584e87fb9a3 100644 --- a/src/content/docs/pt-br/reference/integrations-reference.mdx +++ b/src/content/docs/pt-br/reference/integrations-reference.mdx @@ -357,7 +357,7 @@ export default function minhaIntegracao() { #### Opção `routes` -**Tipo:** [`RouteData[]`](https://github.com/withastro/astro/blob/main/packages/astro/src/%40types/astro.ts#L973) +**Tipo:** [`RouteData[]`](#referência-do-tipo-routedata) Uma lista de todas as rotas geradas junto de seus metadados associados. **Isso estará vazio quando estiver utilizando um adaptador de SSR!** @@ -366,7 +366,7 @@ Você pode ver a referência completa do tipo `RouteData` abaixo, mas as proprie - `component` - o caminho do arquivo de entrada relativo à raiz do projeto - `pathname` - a URL de saída do arquivo (undefined para rotas utilizando parâmetros `[dinâmicos]` e `[...spread]`) -**Referência do tipo `RouteData`** +##### Referência do tipo `RouteData` ```ts interface RouteData { diff --git a/src/content/docs/zh-cn/reference/integrations-reference.mdx b/src/content/docs/zh-cn/reference/integrations-reference.mdx index 008438909c985..5de7e2760cdc0 100644 --- a/src/content/docs/zh-cn/reference/integrations-reference.mdx +++ b/src/content/docs/zh-cn/reference/integrations-reference.mdx @@ -356,7 +356,7 @@ export default function myIntegration() { #### `routes` option -**类型**：[`RouteData[]`](https://github.com/withastro/astro/blob/main/packages/astro/src/%40types/astro.ts#L973) +**类型**：[`RouteData[]`](#routedata-类型参考) 所有生成的路由及其相关元数据的列表。**使用SSR适配器时，这将是空的！** @@ -365,7 +365,7 @@ export default function myIntegration() { - `component` - 相对于项目根的输入文件路径 - `pathname` - 输出文件的URL（对于使用 `[dynamic]` 和 `[...spread]` 参数的路由未定义）。 -**`RouteData` 类型参考** +##### `RouteData` 类型参考 ```ts interface RouteData { From c154c9512cfd2236fcca3fc1dec1b699aebb05e1 Mon Sep 17 00:00:00 2001 From: WintrCodes <110974960+WintrCodes@users.noreply.github.com> Date: Sat, 18 Mar 2023 00:45:53 +0000 Subject: [PATCH 14/26] Correcting script command in package.json (#2875) Removing erroneous 'npm', 'pnpm', and 'yarn' word from the 'dev' script in package.json --- src/content/docs/en/guides/cms/tina-cms.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/docs/en/guides/cms/tina-cms.mdx b/src/content/docs/en/guides/cms/tina-cms.mdx index 1f2b6fddf1ca3..3181a7e05cac7 100644 --- a/src/content/docs/en/guides/cms/tina-cms.mdx +++ b/src/content/docs/en/guides/cms/tina-cms.mdx @@ -49,7 +49,7 @@ To get started, you'll need an existing Astro project. { "scripts": { "dev": "astro dev", - "dev": "npm tinacms dev -c 'astro dev'" + "dev": "tinacms dev -c 'astro dev'" } } ``` @@ -60,7 +60,7 @@ To get started, you'll need an existing Astro project. { "scripts": { "dev": "astro dev", - "dev": "pnpm tinacms dev -c 'astro dev'" + "dev": "tinacms dev -c 'astro dev'" } } ``` @@ -71,7 +71,7 @@ To get started, you'll need an existing Astro project. { "scripts": { "dev": "astro dev", - "dev": "yarn tinacms dev -c 'astro dev'" + "dev": "tinacms dev -c 'astro dev'" } } ``` From 56b06013f7a00b9cd12ca49306e81d4b61ecdc5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20H=C3=B6fer?= Date: Sat, 18 Mar 2023 12:17:35 +0100 Subject: [PATCH 15/26] i18n(de): `sharing-state.mdx` translation (#2822) * Add `sharing-state.mdx` translation (de) * fix: anchor links * fix: review recommendations * fix: review reommendations --- .../docs/de/core-concepts/sharing-state.mdx | 694 ++++++++++++++++++ 1 file changed, 694 insertions(+) create mode 100644 src/content/docs/de/core-concepts/sharing-state.mdx diff --git a/src/content/docs/de/core-concepts/sharing-state.mdx b/src/content/docs/de/core-concepts/sharing-state.mdx new file mode 100644 index 0000000000000..e6664fd4c3629 --- /dev/null +++ b/src/content/docs/de/core-concepts/sharing-state.mdx @@ -0,0 +1,694 @@ +--- +title: Zustand zwischen Astro-Inseln teilen +description: Lerne, wie du den Zustand von Komponenten - und Frameworks! - mit Nano Stores teilst. +i18nReady: true +type: recipe +--- + +import UIFrameworkTabs from '~/components/tabs/UIFrameworkTabs.astro' +import LoopingVideo from '~/components/LoopingVideo.astro' +import JavascriptFlavorTabs from '~/components/tabs/JavascriptFlavorTabs.astro' + +Wenn du eine Astro-Website mit [Insel-Architektur / Partieller Hydratation](/de/concepts/islands/) aufbaust, bist du vielleicht schon auf dieses Problem gestoßen: **Ich möchte den Zustand zwischen meinen Komponenten teilen.** + +UI-Frameworks wie React oder Vue nutzen ["Kontext"-Anbieter](https://reactjs.org/docs/context.html), die von anderen Komponenten konsumiert werden können. Bei der [partiellen Hydratation von Komponenten](/de/core-concepts/framework-components/#interaktive-komponenten-hydratisieren) in Astro oder Markdown kannst du diese Kontext-Wrapper jedoch nicht verwenden. + +Astro empfiehlt eine andere Lösung für die gemeinsame Speicherung auf der Client-Seite: [**Nano Stores**](https://github.com/nanostores/nanostores). + +## Warum Nano Stores? + +Die [Nano Stores](https://github.com/nanostores/nanostores) Bibliothek ermöglicht es dir, Stores zu erstellen, mit denen jede Komponente interagieren kann. Wir empfehlen Nano Stores aus folgenden Gründen: +- **Sie sind leichtgewichtig.** Nano Stores liefern das Minimum an JS, das du brauchst (weniger als 1 KB), ohne jegliche Abhängigkeiten. +- **Sie sind Framework-agnostisch.** Das bedeutet, dass die gemeinsame Nutzung von Zuständen zwischen Frameworks nahtlos ist! Astro ist auf Flexibilität ausgelegt, daher lieben wir Lösungen, die unabhängig von deiner Präferenz eine ähnliche Entwicklererfahrung bieten. + +Dennoch gibt es eine Reihe von Alternativen, die du ausprobieren kannst. Dazu gehören: +- [Svelte's eingebaute Stores](https://svelte.dev/tutorial/writable-stores) +- [Solid signals](https://www.solidjs.com/docs/latest) außerhalb eines Komponentenkontextes +- [Vue's Reaktivitäts-API](https://vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api) +- [Senden von benutzerdefinierten Browser-Ereignissen](https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events) zwischen Komponenten + +:::note[FAQ] + +
+**🙋 Kann ich Nano Stores in `.astro`-Dateien oder anderen serverseitigen Komponenten verwenden?** + +Nano Stores _können_ in serverseitigen Komponenten importiert, beschrieben und gelesen werden, **aber wir empfehlen es nicht!** Das liegt an einigen Einschränkungen: +- Das Schreiben in einen Store aus einer `.astro`-Datei oder einer [nicht-hydratisierten Komponente](/de/core-concepts/framework-components/#interaktive-komponenten-hydratisieren) hat _keine_ Auswirkung auf den Wert, der von [Client-seitigen Komponenten](/de/reference/directives-reference/#client-directives) empfangen wird. +- Du kannst einen Nano Store nicht als "prop" an clientseitige Komponenten übergeben. +- Du kannst keine Änderungen aus einer `Astro`-Datei abonnieren, da Astro-Komponenten nicht neu gerendert werden. + +Wenn du diese Einschränkungen verstehst und trotzdem einen Anwendungsfall findest, kannst du Nano Stores ausprobieren! Denke daran, dass Nano Stores speziell für die Reaktivität auf Änderungen auf dem **Client** konzipiert sind. + +
+ +
+**🙋 Wie unterscheiden sich die Svelte Stores von den Nano Stores?** + +**Nano Stores und [Svelte Stores](https://svelte.dev/tutorial/writable-stores) sind sich sehr ähnlich!** Tatsächlich kannst du in [Nanostores die gleiche `$`-Verknüpfung](https://github.com/nanostores/nanostores#svelte) für Subscriptions verwenden, die du auch in Svelte Stores benutzen kannst. + +Wenn du Bibliotheken von Drittanbietern vermeiden willst, sind [Svelte Stores](https://svelte.dev/tutorial/writable-stores) ein großartiges Werkzeug für die inselübergreifende Kommunikation. Dennoch könntest du Nano Stores bevorzugen, wenn dir a) die Add-ons für ["objects"](https://github.com/nanostores/nanostores#maps) und [async state](https://github.com/nanostores/nanostores#lazy-stores) gefallen oder b) du zwischen Svelte und anderen UI-Frameworks wie Preact oder Vue kommunizieren möchtest. +
+ +
+**🙋 Wie unterscheiden sich Solid Signals von Nano Stores?** + +Wenn du schon eine Weile mit Solid arbeitest, hast du vielleicht schon versucht, [signals](https://www.solidjs.com/docs/latest#createsignal) oder [stores](https://www.solidjs.com/docs/latest#createstore) außerhalb deiner Komponenten zu verschieben. Dies ist eine großartige Möglichkeit, den Zustand zwischen Solid-Inseln zu teilen! Versuche, Signals aus einer gemeinsamen Datei zu exportieren: + +```js +// sharedStore.js +import { createSignal } from 'solid-js'; + +export const sharedCount = createSignal(0); +``` +...und alle Komponenten, die `sharedCount` importieren, teilen sich denselben Zustand. Obwohl dies gut funktioniert, könntest du Nano Stores bevorzugen, wenn du a) die Add-ons für ["objects"](https://github.com/nanostores/nanostores#maps) und [async state](https://github.com/nanostores/nanostores#lazy-stores) magst, oder b) zwischen Solid und anderen UI-Frameworks wie Preact oder Vue kommunizieren möchtest. +
+::: + +## Nano Stores installieren + +Um loszulegen, installiere Nano Stores zusammen mit dem Hilfspaket für dein bevorzugtes UI-Framework: + + + + ```shell + npm install nanostores @nanostores/preact + ``` + + + ```shell + npm install nanostores @nanostores/react + ``` + + + ```shell + npm install nanostores @nanostores/solid + ``` + + + ```shell + npm install nanostores + ``` + :::note + Hier gibt es kein Hilfspaket! Nano Stores können wie normale Svelte Stores verwendet werden. + ::: + + + ```shell + npm install nanostores @nanostores/vue + ``` + + + +Du kannst die [Nano-Stores-Anleitung](https://github.com/nanostores/nanostores#guide) von hier aus aufrufen oder unserem Beispiel unten folgen! + +## Anwendungsbeispiel - E-Commerce Warenkorb-Flyout + +Nehmen wir an, wir bauen eine einfache E-Commerce-Oberfläche mit drei interaktiven Elementen: +- Ein "In den Warenkorb"-Formular +- Ein Warenkorb-Flyout, um die hinzugefügten Artikel anzuzeigen +- Ein Flyout-Knopf für den Einkaufswagen + + + +_[**Teste das fertige Beispiel**](https://github.com/withastro/astro/tree/main/examples/with-nanostores) auf deinem Rechner oder online über Stackblitz._ + +Deine Basis-Astro-Datei könnte so aussehen: + +```astro +--- +// Beispiel: src/pages/index.astro +import CartFlyoutToggle from '../components/CartFlyoutToggle'; +import CartFlyout from '../components/CartFlyout'; +import AddToCartForm from '../components/AddToCartForm'; +--- + + + +... + +
+ +
+
+ + + +
+ + + +``` + +### "Atoms" verwenden + +Beginnen wir damit, dass wir unser `CartFlyout` öffnen, wenn `CartFlyoutToggle` angeklickt wird. + +Erstelle zunächst eine neue JS- oder TS-Datei, die unseren Store enthält. Wir verwenden dafür ein ["Atom"](https://github.com/nanostores/nanostores#atoms): + +```js +// src/cartStore.js +import { atom } from 'nanostores'; + +export const isCartOpen = atom(false); +``` + +Jetzt können wir diesen Store in jede Datei importieren, die lesen oder schreiben muss. Wir beginnen damit, unser `CartFlyoutToggle` zu verknüpfen: + + + +```jsx +// src/components/CartFlyoutToggle.jsx +import { useStore } from '@nanostores/preact'; +import { isCartOpen } from '../cartStore'; + +export default function CartButton() { + // lies den Speicherwert mit dem `useStore`-Hook + const $isCartOpen = useStore(isCartOpen); + // schreibe in den importierten Speicher mit `.set` + return ( + + ) +} +``` + + +```jsx +// src/components/CartFlyoutToggle.jsx +import { useStore } from '@nanostores/react'; +import { isCartOpen } from '../cartStore'; + +export default function CartButton() { + // lies den Speicherwert mit dem `useStore`-Hook + const $isCartOpen = useStore(isCartOpen); + // schreibe in den importierten Speicher mit `.set` + return ( + + ) +} +``` + + +```jsx +// src/components/CartFlyoutToggle.jsx +import { useStore } from '@nanostores/solid'; +import { isCartOpen } from '../cartStore'; + +export default function CartButton() { + // lies den Speicherwert mit dem `useStore`-Hook + const $isCartOpen = useStore(isCartOpen); + // schreibe in den importierten Speicher mit `.set` + return ( + + ) +} +``` + + +```svelte + + + + + +``` + + +```vue + + + + +``` + + + +Dann können wir `isCartOpen` von unserer `CartFlyout`-Komponente lesen: + + + +```jsx +// src/components/CartFlyout.jsx +import { useStore } from '@nanostores/preact'; +import { isCartOpen } from '../cartStore'; + +export default function CartFlyout() { + const $isCartOpen = useStore(isCartOpen); + + return $isCartOpen ? : null; +} +``` + + +```jsx +// src/components/CartFlyout.jsx +import { useStore } from '@nanostores/react'; +import { isCartOpen } from '../cartStore'; + +export default function CartFlyout() { + const $isCartOpen = useStore(isCartOpen); + + return $isCartOpen ? : null; +} +``` + + +```jsx +// src/components/CartFlyout.jsx +import { useStore } from '@nanostores/solid'; +import { isCartOpen } from '../cartStore'; + +export default function CartFlyout() { + const $isCartOpen = useStore(isCartOpen); + + return $isCartOpen() ? : null; +} +``` + + +```svelte + + + +{#if $isCartOpen} + +{/if} +``` + + +```vue + + + + +``` + + + +### "Maps" verwenden + +:::tip +**[Maps](https://github.com/nanostores/nanostores#maps) sind eine gute Wahl für Objekte, in die du regelmäßig schreibst!** Neben den standardmäßigen `get()`- und `set()`-Hilfen, die ein `atom` bietet, hast du auch eine `.setKey()`-Funktion, um einzelne Objektschlüssel effizient zu aktualisieren. +::: + +Jetzt wollen wir den Überblick über die Artikel in deinem Warenkorb behalten. Um Duplikate zu vermeiden und den Überblick über die "Menge" zu behalten, können wir deinen Warenkorb als Objekt mit der ID des Artikels als Schlüssel speichern. Wir verwenden dafür eine [Map](https://github.com/nanostores/nanostores#maps). + +Jetzt fügen wir einen `cartItem`-Store zu unserer `cartStore.js` von vorhin hinzu. Du kannst auch zu einer TypeScript-Datei wechseln, um die Form zu definieren, wenn du das möchtest. + + + + ```js + // src/cartStore.js + import { atom, map } from 'nanostores'; + + export const isCartOpen = atom(false); + + /** + * @typedef {Object} CartItem + * @property {string} id + * @property {string} name + * @property {string} imageSrc + * @property {number} quantity + */ + + /** @type {import('nanostores').MapStore>} */ + export const cartItems = map({}); + + ``` + + + ```ts + // src/cartStore.ts + import { atom, map } from 'nanostores'; + + export const isCartOpen = atom(false); + + export type CartItem = { + id: string; + name: string; + imageSrc: string; + quantity: number; + } + + export const cartItems = map>({}); + ``` + + + +Jetzt exportieren wir einen `addCartItem`-Helper (Hilfsfunktion), den unsere Komponenten verwenden können. +- **Wenn dieser Artikel nicht in deinem Warenkorb ist**, füge den Artikel mit einer Startmenge von 1 hinzu. +- **Wenn es diesen Artikel _doch_ schon gibt**, erhöhe die Menge um 1. + + + + ```js + // src/cartStore.js + ... + export function addCartItem({ id, name, imageSrc }) { + const existingEntry = cartItems.get()[id]; + if (existingEntry) { + cartItems.setKey(id, { + ...existingEntry, + quantity: existingEntry.quantity + 1, + }) + } else { + cartItems.setKey( + id, + { id, name, imageSrc, quantity: 1 } + ); + } + } + ``` + + + ```ts + // src/cartStore.ts + ... + type ItemDisplayInfo = Pick; + export function addCartItem({ id, name, imageSrc }: ItemDisplayInfo) { + const existingEntry = cartItems.get()[id]; + if (existingEntry) { + cartItems.setKey(id, { + ...existingEntry, + quantity: existingEntry.quantity + 1, + }); + } else { + cartItems.setKey( + id, + { id, name, imageSrc, quantity: 1 } + ); + } + } + ``` + + + +:::note +
+ +**🙋 Warum wird hier `.get()` anstelle eines `useStore`-Helpers verwendet?** + +Du hast vielleicht bemerkt, dass wir hier `cartItems.get()` aufrufen, anstatt den `useStore`-Helper aus unseren React / Preact / Solid / Vue-Beispielen zu verwenden. Das liegt daran, dass **useStore dafür gedacht ist, die Komponenten neu zu rendern**. Mit anderen Worten, `useStore` sollte immer dann verwendet werden, wenn der Wert des Shops auf der Benutzeroberfläche dargestellt wird. Da wir den Wert auslesen, wenn ein **Ereignis** ausgelöst wird (in diesem Fall `AddToCart`), und wir nicht versuchen, den Wert zu rendern, brauchen wir `useStore` hier nicht. +
+::: + +Wenn unser Shop eingerichtet ist, können wir diese Funktion in unserem `AddToCartForm` aufrufen, sobald das Formular abgeschickt wird. Außerdem öffnen wir das Warenkorb-Flyout, damit du eine vollständige Warenkorbübersicht siehst. + + + +```jsx +// src/components/AddToCartForm.jsx +import { addCartItem, isCartOpen } from '../cartStore'; + +export default function AddToCartForm({ children }) { + // der Einfachheit halber codieren wir die Artikelinformationen fest! + const hardcodedItemInfo = { + id: 'astronaut-figurine', + name: 'Astronaut Figurine', + imageSrc: '/images/astronaut-figurine.png', + } + + function addToCart(e) { + e.preventDefault(); + isCartOpen.set(true); + addCartItem(hardcodedItemInfo); + } + + return ( +
+ {children} +
+ ) +} +``` + + +```jsx +// src/components/AddToCartForm.jsx +import { addCartItem, isCartOpen } from '../cartStore'; + +export default function AddToCartForm({ children }) { + // der Einfachheit halber codieren wir die Artikelinformationen fest! + const hardcodedItemInfo = { + id: 'astronaut-figurine', + name: 'Astronaut Figurine', + imageSrc: '/images/astronaut-figurine.png', + } + + function addToCart(e) { + e.preventDefault(); + isCartOpen.set(true); + addCartItem(hardcodedItemInfo); + } + + return ( +
+ {children} +
+ ) +} +``` + + +```jsx +// src/components/AddToCartForm.jsx +import { addCartItem, isCartOpen } from '../cartStore'; + +export default function AddToCartForm({ children }) { + // der Einfachheit halber codieren wir die Artikelinformationen fest! + const hardcodedItemInfo = { + id: 'astronaut-figurine', + name: 'Astronaut Figurine', + imageSrc: '/images/astronaut-figurine.png', + } + + function addToCart(e) { + e.preventDefault(); + isCartOpen.set(true); + addCartItem(hardcodedItemInfo); + } + + return ( +
+ {children} +
+ ) +} +``` + + +```svelte + +
+ +
+ + +``` + + +```vue + + + + +``` + + + +Zum Schluss stellen wir die Artikel im Warenkorb in unserem `CartFlyout` dar: + + + +```jsx +// src/components/CartFlyout.jsx +import { useStore } from '@nanostores/preact'; +import { isCartOpen, cartItems } from '../cartStore'; + +export default function CartFlyout() { + const $isCartOpen = useStore(isCartOpen); + const $cartItems = useStore(cartItems); + + return $isCartOpen ? ( + + ) : null; +} +``` + + +```jsx +// src/components/CartFlyout.jsx +import { useStore } from '@nanostores/react'; +import { isCartOpen, cartItems } from '../cartStore'; + +export default function CartFlyout() { + const $isCartOpen = useStore(isCartOpen); + const $cartItems = useStore(cartItems); + + return $isCartOpen ? ( + + ) : null; +} +``` + + +```jsx +// src/components/CartFlyout.jsx +import { useStore } from '@nanostores/solid'; +import { isCartOpen, cartItems } from '../cartStore'; + +export default function CartFlyout() { + const $isCartOpen = useStore(isCartOpen); + const $cartItems = useStore(cartItems); + + return $isCartOpen() ? ( + + ) : null; +} +``` + + +```svelte + + + +{#if $isCartOpen} + {#if Object.values($cartItems).length} + + {#else} +

Dein Warenkorb ist leer!

+ {/if} +{/if} +``` + + +```vue + + + + +``` + + + +Jetzt solltest du ein vollständig interaktives E-Commerce-Beispiel mit dem kleinsten JS-Bündel der Galaxis haben 🚀 + +[**Probiere das fertige Beispiel**](https://github.com/withastro/astro/tree/main/examples/with-nanostores) auf deinem Rechner oder online über Stackblitz aus! From e5311729f8c87ee708c07d5b7a83555be86a2c00 Mon Sep 17 00:00:00 2001 From: Joshua Blum Date: Sun, 19 Mar 2023 19:47:39 +0100 Subject: [PATCH 16/26] fix typo: missing apostrophe (#2880) --- src/content/docs/en/concepts/why-astro.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/concepts/why-astro.mdx b/src/content/docs/en/concepts/why-astro.mdx index de2d33b286f55..e0bbc8bb5ed6f 100644 --- a/src/content/docs/en/concepts/why-astro.mdx +++ b/src/content/docs/en/concepts/why-astro.mdx @@ -51,7 +51,7 @@ Good performance is always important, but it is *especially* critical for conten - 850ms faster → 7% more conversions ([COOK](https://web.dev/why-speed-matters/)) - Every 1 second slower → 10% fewer users ([BBC](https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale)) -In many web frameworks, it is easy to build a website that looks great during development only to load painfully slow once deployed. JavaScript is often the culprit, since users phones and lower-powered devices rarely match the speed of a developer's laptop. +In many web frameworks, it is easy to build a website that looks great during development only to load painfully slow once deployed. JavaScript is often the culprit, since users’ phones and lower-powered devices rarely match the speed of a developer's laptop. Astro's magic is in how it combines the two values explained above -- a content focus with a server-first MPA architecture -- to make tradeoffs and deliver features that other frameworks cannot. The result is amazing web performance for every website, out of the box. Our goal: **It should be nearly impossible to build a slow website with Astro.** From af375708927c0605b8650f79ac1afe651cad94f9 Mon Sep 17 00:00:00 2001 From: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> Date: Sun, 19 Mar 2023 22:23:22 +0000 Subject: [PATCH 17/26] Fix links to theme categories (#2888) --- .../docs/en/guides/migrate-to-astro/from-docusaurus.mdx | 4 ++-- src/content/docs/en/guides/migrate-to-astro/from-jekyll.mdx | 2 +- src/content/docs/en/guides/migrate-to-astro/from-vuepress.mdx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) 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 bfb10dfd55700..7d25a4ede389d 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 @@ -35,14 +35,14 @@ When you rebuild your Docusaurus site in Astro, you will notice some important d - [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 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://github.com/withastro/astro/tree/latest/examples/docs). This website was built using that template! You can also find more [community docs themes](https://astro.build/themes/docs/) with built-in features in our Themes Showcase. +- 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://github.com/withastro/astro/tree/latest/examples/docs). This website was built using 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. - Docusaurus sites use MDX pages for content. Astro's docs theme uses Markdown (`.md`) files by default and does not require you to use MDX. You can optionally [install Astro's MDX integration](/en/guides/integrations-guide/mdx/) and use `.mdx` files in addition to standard Markdown files. ## Switch from Docusaurus to Astro -To convert a Docusaurus documentation site to Astro, start with our official docs theme starter template, or explore more community docs themes in our [theme showcase](https://astro.build/themes/docs/). +To convert a Docusaurus documentation site to Astro, start with our official docs theme starter template, or explore more community docs themes in our [theme showcase](https://astro.build/themes?search=&categories%5B%5D=docs). You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install/auto/#starter-templates). diff --git a/src/content/docs/en/guides/migrate-to-astro/from-jekyll.mdx b/src/content/docs/en/guides/migrate-to-astro/from-jekyll.mdx index f1de9980f93fd..58429a19991d5 100644 --- a/src/content/docs/en/guides/migrate-to-astro/from-jekyll.mdx +++ b/src/content/docs/en/guides/migrate-to-astro/from-jekyll.mdx @@ -26,7 +26,7 @@ Jekyll and Astro share some similarities that will help you migrate your project When you rebuild your Jekyll site in Astro, you will notice some important differences: -- As Jekyll is primarily a blogging platform, several blog features are built-in that you may have to build yourself in Astro. Or, choose a [blog starter template theme](https://astro.build/themes/blog/) that includes these features. For example, Jekyll has built-in support for tags and categories which you will find in several Astro blog themes, but is not included in a minimal Astro project. +- As Jekyll is primarily a blogging platform, several blog features are built-in that you may have to build yourself in Astro. Or, choose a [blog starter template theme](https://astro.build/themes?search=&categories%5B%5D=blog) that includes these features. For example, Jekyll has built-in support for tags and categories which you will find in several Astro blog themes, but is not included in a minimal Astro project. - Jekyll uses Liquid templates for reusable layout elements and templating. Astro uses JSX-like [`.astro` files for templating and components](/en/core-concepts/astro-components/). Any `.astro` file can be a component, a layout or an entire page, and can import and render any other Astro components. You can also build using [other UI framework components (e.g. React, Svelte, Vue, Solid)](/en/core-concepts/framework-components/) as well as content or metadata from [other files in your project](/en/guides/imports/), such as Markdown or MDX. 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 c78cf6e43cccd..2635b31420ec1 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 @@ -29,11 +29,11 @@ When you rebuild your VuePress site in Astro, you will notice some important dif - [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. -- VuePress was designed to build content-heavy, Markdown-centric sites and has some built-in, documentation-specific website features that you would have to build yourself in Astro. Instead, Astro offers some documentation-specific features through an [official docs theme](https://github.com/withastro/astro/tree/latest/examples/docs?on=github). This website was built using that template! You can also find more [community docs themes](https://astro.build/themes/docs/) with built-in features in our Themes Showcase. +- VuePress was designed to build content-heavy, Markdown-centric sites and has some built-in, documentation-specific website features that you would have to build yourself in Astro. Instead, Astro offers some documentation-specific features through an [official docs theme](https://github.com/withastro/astro/tree/latest/examples/docs?on=github). This website was built using 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. ## Switch from VuePress to Astro -To convert a VuePress documentation site to Astro, start with our official docs theme starter template, or explore more community docs themes in our [theme showcase](https://astro.build/themes/docs/). +To convert a VuePress documentation site to Astro, start with our official docs theme starter template, or explore more community docs themes in our [theme showcase](https://astro.build/themes?search=&categories%5B%5D=docs). You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install/auto/#starter-templates). From 1a75354b9cc92e6cad2ddb09b1a6d31fbd4185a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20H=C3=B6fer?= Date: Mon, 20 Mar 2023 13:59:07 +0100 Subject: [PATCH 18/26] i18n(de): translate multiple deploy guides (#2832) * i18n(de): translate edgio.mdx * i18n(de): translate flightcontrol.mdx * i18n(de): translate google-cloud.mdx * i18n(de): translate google-firebase.mdx * i18n(de): translate heroku.mdx * i18n(de): translate kinsta.mdx * fix: review recommendations * Apply final fixes --------- Co-authored-by: Hippo <6137925+hippotastic@users.noreply.github.com> --- src/content/docs/de/guides/deploy/edgio.mdx | 49 ++++++ .../docs/de/guides/deploy/flightcontrol.mdx | 27 ++++ .../docs/de/guides/deploy/google-cloud.mdx | 141 ++++++++++++++++++ .../docs/de/guides/deploy/google-firebase.mdx | 37 +++++ src/content/docs/de/guides/deploy/heroku.mdx | 57 +++++++ src/content/docs/de/guides/deploy/kinsta.mdx | 47 ++++++ 6 files changed, 358 insertions(+) create mode 100644 src/content/docs/de/guides/deploy/edgio.mdx create mode 100644 src/content/docs/de/guides/deploy/flightcontrol.mdx create mode 100644 src/content/docs/de/guides/deploy/google-cloud.mdx create mode 100644 src/content/docs/de/guides/deploy/google-firebase.mdx create mode 100644 src/content/docs/de/guides/deploy/heroku.mdx create mode 100644 src/content/docs/de/guides/deploy/kinsta.mdx diff --git a/src/content/docs/de/guides/deploy/edgio.mdx b/src/content/docs/de/guides/deploy/edgio.mdx new file mode 100644 index 0000000000000..3f86ec58ceefc --- /dev/null +++ b/src/content/docs/de/guides/deploy/edgio.mdx @@ -0,0 +1,49 @@ +--- +title: Veröffentliche deine Astro-Website auf Edgio +description: Wie du deine Astro-Website auf Edgio im Internet veröffentlichst. +type: deploy +i18nReady: true +--- + +Du kannst dein Astro-Projekt auf [Edgio](https://www.edg.io/) veröffentlichen, einer Edge- und CDN-Plattform zum Bereitstellen, Schützen und Beschleunigen von Websites und APIs. + +:::tip +Schau dir [die Astro-Anleitung in Edgios Dokumentation](https://docs.edg.io/guides/astro) an! +::: + +## So funktioniert die Veröffentlichung + +1. Installiere die Kommandozeilen­schnittstelle [Edgio CLI](https://docs.edg.io/guides/cli) global über dein Terminal, falls du das noch nicht getan hast. + + ```bash + npm install -g @edgio/cli + ``` + +2. Füge Edgio deiner Astro-Seite hinzu + + ```bash + edgio init + ``` + +3. (Optional) Aktiviere das serverseitige Rendering + + Nachdem du [@astrojs/node mit Astro](/de/guides/integrations-guide/node/) eingerichtet hast, gibst du den Pfad zur Serverdatei in der Datei `edgio.config.js` wie folgt an: + + ```js ins={2,5-9} + // edgio.config.js + import { join } from 'path' + + module.exports = { + astro: { + // Der Pfad des Standalone-Servers, auf dem Astro SSR läuft. + // Die Abhängigkeiten für diese Datei werden automatisch gebündelt. + appPath: join(process.cwd(), 'dist', 'server', 'entry.mjs'), + }, + }; + ``` + +4. Veröffentliche deine Website auf Edgio + + ```bash + edgio deploy + ``` diff --git a/src/content/docs/de/guides/deploy/flightcontrol.mdx b/src/content/docs/de/guides/deploy/flightcontrol.mdx new file mode 100644 index 0000000000000..8d86339a2d9cf --- /dev/null +++ b/src/content/docs/de/guides/deploy/flightcontrol.mdx @@ -0,0 +1,27 @@ +--- +title: Veröffentliche deine Astro-Website mit Flightcontrol auf AWS +description: Wie du deine Astro-Website mit Flightcontrol auf AWS veröffentlichst +type: deploy +i18nReady: true +--- + +Du kannst eine Astro-Website mit [Flightcontrol](https://www.flightcontrol.dev?ref=astro) veröffentlichen, das vollautomatische Bereitstellungen in deinem AWS-Konto ermöglicht. + +Es werden sowohl statische als auch SSR-basierte Astro-Websites unterstützt. + +## So funktioniert die Veröffentlichung + +1. Erstelle ein Flightcontrol-Konto unter [app.flightcontrol.dev/signup](https://app.flightcontrol.dev/signup?ref=astro) +1. Gehe zu [app.flightcontrol.dev/projects/new/1](https://app.flightcontrol.dev/projects/new/1) +1. Verbinde dein GitHub-Konto und wähle dein Repo aus +1. Wähle deinen gewünschten "Config Type": + - `GUI` (alle Einstellungen werden über das Flightcontrol-Dashboard verwaltet), wo du die Voreinstellung `Astro Static` oder `Astro SSR` auswählst + - `flightcontrol.json` ("Infrastruktur als Code"-Option, bei der sich alle Konfigurationen in deinem Repo befinden), bei der du eine Astro-Beispielkonfiguration auswählst und sie dann als `flightcontrol.json` zu deiner Codebasis hinzufügst +1. Passe die Konfiguration nach Bedarf an +1. Klicke auf "Projekt erstellen" und führe alle erforderlichen Schritte durch, z. B. die Verknüpfung deines AWS-Kontos. + + +### SSR-Einrichtung + +Für die Bereitstellung mit SSR-Unterstützung musst du zunächst den Adapter [`@astro/node`](/de/guides/integrations-guide/node/) einrichten. Befolge dann die oben genannten Schritte und wähle die passenden Konfigurationen für Astro SSR. + diff --git a/src/content/docs/de/guides/deploy/google-cloud.mdx b/src/content/docs/de/guides/deploy/google-cloud.mdx new file mode 100644 index 0000000000000..85b1b5e57b5f6 --- /dev/null +++ b/src/content/docs/de/guides/deploy/google-cloud.mdx @@ -0,0 +1,141 @@ +--- +title: Veröffentliche deine Astro-Website auf Google Cloud +description: Wie du deine Astro-Website auf Google Cloud im Internet veröffentlichst. +type: deploy +i18nReady: true +--- + +[Google Cloud](https://cloud.google.com/) ist eine voll ausgestattete Web-App-Hosting-Plattform, die für die Veröffentlichung einer Astro-Website verwendet werden kann. + +## So funktioniert die Veröffentlichung + +### Cloud Storage (nur statisch) + +1. [Erstelle ein neues GCP-Projekt]() oder wähle ein bereits vorhandenes Projekt aus. + +2. Erstelle einen neuen Bucket unter [Cloud Storage](https://cloud.google.com/storage). + +3. Gib ihm einen Namen und nimm alle anderen erforderlichen Einstellungen vor. + +4. Lade deinen `dist`-Ordner entweder manuell oder unter Verwendung von [Cloud Build](https://cloud.google.com/build) hoch. + +5. Aktiviere den öffentlichen Zugriff, indem du `allUsers` eine neue Berechtigung namens `Storage Object Viewer` hinzufügst. + +6. Bearbeite die Website-Konfiguration und füge `ìndex.html` als Einstiegspunkt und `404.html` als Fehlerseite hinzu. + +### Cloud Run (SSR und statisch) + +Cloud Run ist eine serverlose Plattform, die es dir ermöglicht, einen Container zu betreiben, ohne dass du eine Infrastruktur verwalten musst. Sie kann sowohl für statische als auch für SSR-Websites genutzt werden. + +#### Bereite den Dienst vor + +1. [Erstelle ein neues GCP-Projekt]() oder wähle ein bereits vorhandenes Projekt aus. + +2. Stelle sicher, dass die [Cloud Run API]() aktiviert ist. + +3. Erstelle einen neuen Dienst. + +#### Die Dockerdatei erstellen + +##### Dockerfile für statische Websites (Beispiel) + +Das folgende Dockerfile erstellt deine Website und stellt sie mit Apache HTTPD (Standardkonfiguration) auf Port `80` bereit. + +```docker title="Dockerfile" +FROM node:lts AS build +WORKDIR /app +COPY . . +RUN npm i +RUN npm run build + +FROM httpd:2.4 AS runtime +COPY --from=build /app/dist /usr/local/apache2/htdocs/ +EXPOSE 80 +``` + +:::note +Wenn du einen anderen Paketmanager als `npm` verwendest, musst du die Befehle ändern: + +```docker title="Dockerfile" add={4} "pnpm" +FROM node:lts AS build +WORKDIR /app +COPY . . +RUN npm i -g pnpm@latest +RUN pnpm i +RUN pnpm run build +# ... +``` +::: + +##### Dockerfile für SSR-Websites (Beispiel) + +Das folgende Dockerfile erstellt deine Website und stellt sie mit Node.js (SSR-Adapter) auf Port `3000` bereit. + +```docker title="Dockerfile" +FROM node:lts AS runtime +WORKDIR /app + +COPY . . + +RUN npm install +RUN npm run build + +ENV HOST=0.0.0.0 +ENV PORT=3000 +EXPOSE 3000 +CMD node ./dist/server/entry.mjs +``` + +:::tip[Bitte bedenke Folgendes:] +Dies sind nur Beispiele für Dockerdateien. Du kannst sie an deine Bedürfnisse anpassen. Du könntest zum Beispiel ein anderes Docker-Image wie `node:lts-alpine` verwenden. + +```docker title="Dockerfile" del={1} add={2} +FROM node:lts AS runtime +FROM node:lts-alpine AS runtime +``` +::: + +#### Erstelle den Container + +Sobald das Dockerfile erstellt ist, erstellst du ein Image und überträgst es zu Google Cloud. Es gibt mehrere Möglichkeiten, dies zu tun: + +**Lokale Erstellung mit Docker**: + +Verwende den Befehl `docker build`, um das Image zu erstellen, `docker tag`, um ihm einen Tag zu geben, und dann `docker push`, um es an eine Registry zu übergeben. Im Fall von Google Cloud ist [Google Cloud Registry](https://cloud.google.com/container-registry/docs/pushing-and-pulling#add-registry) die einfachste Option, aber du kannst auch [Docker Hub]() verwenden. + +```bash +# Erstelle deinen Container +docker build . + +docker tag SOURCE_IMAGE HOSTNAME/PROJECT-ID/TARGET-IMAGE:TAG + +# Übertrage dein Image in eine Registry +docker push HOSTNAME/PROJECT-ID/IMAGE:TAG +``` + +Ändere die folgenden Werte in den obigen Befehlen, damit sie zu deinem Projekt passen: + +- `SOURCE_IMAGE`: Der lokalen Image-Namen oder die Image-ID. +- `HOSTNAME`: Der Registry-Host (`gcr.io`, `eu.grc.io`, `asia.gcr.io`, `us.gcr.io`). +- `PROJECT`: Deine Google Cloud Projekt-ID. +- `TARGET-IMAGE`: Der Name für das Image, wenn es in der Registry gespeichert wird. +- `TAG` Die Version, die mit dem Image verknüpft ist + + +[Erfahre mehr in der Google-Cloud-Dokumentation](https://cloud.google.com/container-registry/docs/pushing-and-pulling) + +**Ein anderes Tool verwenden**: + +Du kannst ein CI/CD-Tool verwenden, das Docker unterstützt, z.B. [GitHub Actions](https://github.com/marketplace/actions/push-to-gcr-github-action). + +**Erstelle mit [Cloud Build](https://cloud.google.com/build)**: + +Anstatt die Dockerdatei lokal zu erstellen, kannst du Google Cloud anweisen, das Image per Fernzugriff zu erstellen. Siehe dazu die [Google Cloud Build-Dokumentation](). + +#### Den Container erstellen + +Das Deployment kann manuell in deinem Terminal [mit `gcloud`]() oder automatisch mit [Cloud Build](https://cloud.google.com/build) oder einem anderen CI/CD-System durchgeführt werden. + +:::note[Benötigst du öffentlichen Zugang?] +Vergiss nicht, die Berechtigung `Cloud Run Invoker` zur Gruppe `allUsers` in den Cloud Run-Berechtigungseinstellungen hinzuzufügen! +::: diff --git a/src/content/docs/de/guides/deploy/google-firebase.mdx b/src/content/docs/de/guides/deploy/google-firebase.mdx new file mode 100644 index 0000000000000..dd7ed8fefb6de --- /dev/null +++ b/src/content/docs/de/guides/deploy/google-firebase.mdx @@ -0,0 +1,37 @@ +--- +title: Veröffentliche deine Astro-Website auf Google's Firebase Hosting +description: Wie du deine Astro-Website auf Firebase-Hosting von Google im Internet veröffentlichst. +type: deploy +i18nReady: true +--- + +[Firebase Hosting](https://firebase.google.com/products/hosting) ist ein Dienst der App-Entwicklungsplattform [Firebase](https://firebase.google.com/) von Google, der für die Veröffentlichung einer Astro-Website genutzt werden kann. + +## So funktioniert die Veröffentlichung + +1. Stelle sicher, dass du [firebase-tools](https://www.npmjs.com/package/firebase-tools) installiert hast. + +2. Erstelle `firebase.json` und `.firebaserc` im Stammverzeichnis deines Projekts mit dem folgenden Inhalt: + + `firebase.json`: + + ```json + { + "hosting": { + "public": "dist", + "ignore": [] + } + } + ``` + + `.firebaserc`: + + ```json + { + "projects": { + "default": "" + } + } + ``` + +3. Nachdem du `npm run build` ausgeführt hast, veröffentliche deine Website mit dem Befehl `firebase deploy`. diff --git a/src/content/docs/de/guides/deploy/heroku.mdx b/src/content/docs/de/guides/deploy/heroku.mdx new file mode 100644 index 0000000000000..4727449b73363 --- /dev/null +++ b/src/content/docs/de/guides/deploy/heroku.mdx @@ -0,0 +1,57 @@ +--- +title: Veröffentliche deine Astro-Website auf Heroku +description: Wie du deine Astro-Website auf Heroku im Internet veröffentlichst. +type: deploy +i18nReady: true +--- + +[Heroku](https://www.heroku.com/) ist eine Platform-as-a-Service für die Erstellung, den Betrieb und die Verwaltung moderner Apps in der Cloud. Mit dieser Anleitung kannst du eine Astro-Website auf Heroku veröffentlichen. + +## So funktioniert die Veröffentlichung + +1. Installiere die Kommandozeilen­schnittstelle [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli). + +2. Erstelle ein Heroku-Konto, indem du dich [anmeldest](https://signup.heroku.com/). + +3. Führe `heroku login` aus und gib deine Heroku-Anmeldedaten ein: + + ```bash + $ heroku login + ``` + +4. Erstelle im Stammverzeichnis deines Projekts eine Datei namens `static.json` mit dem folgenden Inhalt: + + `static.json`: + + ```json + { + "root": "./dist" + } + ``` + + Dies ist die Konfiguration deiner Website; mehr dazu findest du unter [heroku-buildpack-static](https://github.com/heroku/heroku-buildpack-static). + +5. Richte deine Heroku Git remote ein: + + ```bash + # Versionsnummer aktualisieren + $ git init + $ git add . + $ git commit -m "Meine Website ist bereit für die Veröffentlichung." + + # Eine neue App mit einem bestimmten Namen erstellen + $ heroku apps:create example + + # Buildpack für statische Websites einstellen + $ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git + ``` + +6. Veröffentliche deine Website: + + ```bash + # Website veröffentlichen + $ git push heroku master + + # Browser öffnen, um die Dashboard-Version von Heroku CI anzuzeigen + $ heroku open + ``` diff --git a/src/content/docs/de/guides/deploy/kinsta.mdx b/src/content/docs/de/guides/deploy/kinsta.mdx new file mode 100644 index 0000000000000..f1fbfe16a086e --- /dev/null +++ b/src/content/docs/de/guides/deploy/kinsta.mdx @@ -0,0 +1,47 @@ +--- +title: Veröffentliche deine Astro-Website auf Kinsta Application Hosting +description: So veröffentlichst du deine Astro-Website auf Kinsta Application Hosting im Internet. +type: deploy +i18nReady: true +--- + +Du kannst [Kinsta Application Hosting](https://kinsta.com/application-hosting/) nutzen, um eine Astro-Website auf deren Cloud-Hosting zu veröffentlichen. + +:::tip[Suchst du ein Beispiel?] +Schau dir [das offizielle Kinsta Application Hosting Starter-Projekt für Astro](https://github.com/kinsta/hello-world-astro) an! +::: + +## Konfigurieren deines Astro-Projekts +Um dein Projekt auf **Kinsta Application Hosting** zu hosten, musst du Folgendes tun: +- Füge ein Feld `name` in deine `package.json` ein. (Der Wert ist frei definierbar und hat keinen Einfluss auf deine Bereitstellung.) +- Füge ein `build`-Skript in deine `package.json` ein. (Dein Astro-Projekt sollte es bereits enthalten.) +- Installiere das [`serve`](https://www.npmjs.com/package/serve)-Paket und setze das `start`-Skript auf `serve dist/`. + +Hier sind die notwendigen Zeilen in deiner `package.json` Datei: +```json title="package.json" {2,6} ins={12} "serv dist/" +{ + "name": "anything", // Dies ist erforderlich, aber der Wert spielt keine Rolle. + "scripts": { + "dev": "astro dev", + "start": "serve dist/", + "build": "astro build", + "preview": "astro preview", + "astro": "astro" + }, + "dependencies": { + "astro": "^1.6.10", + "serve": "^14.0.1" + }, +} +``` + +## So funktioniert die Veröffentlichung +Sobald das GitHub-Repository deines Projekts verbunden ist, kannst du im **MyKinsta Admin Panel** manuelle Deployments zum Kinsta Application Hosting auslösen. Du kannst auch automatische Deployments in deinem Admin-Panel einrichten. + +### Konfiguration einer neuen Kinsta-Anwendung +1. Gehe zum [My Kinsta](https://my.kinsta.com/)-Verwaltungsbereich. +2. Gehe auf die Registerkarte **Anwendungen**. +3. Verbinde dein GitHub-Repository. +4. Drücke auf die Schaltfläche **Dienst hinzufügen** > **Anwendung**. +5. Folge den Schritten des Assistenten. +6. Deine Anwendung wird bereitgestellt. From 450d18a1dbb2810b389714fd6686f8d59c07642c Mon Sep 17 00:00:00 2001 From: Bryce Russell Date: Mon, 20 Mar 2023 08:13:12 -0500 Subject: [PATCH 19/26] Remove old `extendDefaultPlugins` from examples (#2876) Co-authored-by: BryceRussell <19967622+BryceRussell@users.noreply.github.com> --- src/content/docs/en/guides/markdown-content.mdx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/content/docs/en/guides/markdown-content.mdx b/src/content/docs/en/guides/markdown-content.mdx index 8405b0473c31c..005266295b745 100644 --- a/src/content/docs/en/guides/markdown-content.mdx +++ b/src/content/docs/en/guides/markdown-content.mdx @@ -543,8 +543,7 @@ You can add frontmatter properties to all of your Markdown and MDX files by usin export default defineConfig({ markdown: { - remarkPlugins: [exampleRemarkPlugin], - extendDefaultPlugins: true, + remarkPlugins: [exampleRemarkPlugin] }, }); ``` @@ -601,8 +600,7 @@ import { remarkReadingTime } from './remark-reading-time.mjs'; export default defineConfig({ markdown: { - remarkPlugins: [remarkReadingTime], - extendDefaultPlugins: true, + remarkPlugins: [remarkReadingTime] }, }); ``` From 33f040af2e541e6861198f5c832373b30d2456a9 Mon Sep 17 00:00:00 2001 From: jamesli2021 <95068031+jamesli2021@users.noreply.github.com> Date: Mon, 20 Mar 2023 21:29:56 +0800 Subject: [PATCH 20/26] Fixed incorrect code example (#2889) --- src/content/docs/en/guides/cms/wordpress.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/docs/en/guides/cms/wordpress.mdx b/src/content/docs/en/guides/cms/wordpress.mdx index f72132ef330fa..2e05d455eb954 100644 --- a/src/content/docs/en/guides/cms/wordpress.mdx +++ b/src/content/docs/en/guides/cms/wordpress.mdx @@ -33,7 +33,7 @@ There are no dependencies required to fetch your WordPress data from Astro via t ### Fetching Data -Fetch your WordPress data through your site's unique REST API URL and the route for your content. (For a blog, this will commonly be `posts`.) Then, you can render your data properties using Astro's `set:html=""` directive. +Fetch your WordPress data through your site's unique REST API URL and the route for your content. (For a blog, this will commonly be `posts`.) Then, you can render your data properties using Astro's `set:html={}` directive. For example, to display a list of post titles and their content: @@ -45,8 +45,8 @@ const posts = await res.json()

Astro + WordPress 🚀

{ posts.map((post) => ( -

-

+

+

)) } ``` @@ -103,9 +103,9 @@ let posts = await res.json(); posts.map((post) => (

)) } From 9b615f307fb71028ed8b1caed4cdf88a0218fea6 Mon Sep 17 00:00:00 2001 From: Sandra Rodgers <45321563+SandraRodgers@users.noreply.github.com> Date: Mon, 20 Mar 2023 13:14:12 -0500 Subject: [PATCH 21/26] Update storyblok.mdx (#2893) --- src/content/docs/en/guides/cms/storyblok.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/docs/en/guides/cms/storyblok.mdx b/src/content/docs/en/guides/cms/storyblok.mdx index 1a9bc22bb8705..688b33a7dfc01 100644 --- a/src/content/docs/en/guides/cms/storyblok.mdx +++ b/src/content/docs/en/guides/cms/storyblok.mdx @@ -536,3 +536,4 @@ Now, whenever you publish a new story, a new build will be triggered and your bl - [Getting the Visual Editor to work for Storyblok + Astro](https://dev.to/sandrarodgers/getting-the-visual-editor-to-work-for-storyblok-astro-2gja) by Sandra Rodgers - [Astro + Storyblok: SSR preview for instant visual editing](https://dev.to/jgierer12/astro-storyblok-ssr-preview-for-instant-visual-editing-3g9m) by Jonas Gierer +- [Astro-Storyblok Previews Site with Netlify's Branch Deploys Feature](https://dev.to/sandrarodgers/astro-storyblok-previews-site-with-netlifys-branch-deploys-feature-44dh) by Sandra Rodgers From 8f583585da048de4286149c0fa9743181097e04b Mon Sep 17 00:00:00 2001 From: Dan Jutan Date: Mon, 20 Mar 2023 14:59:40 -0400 Subject: [PATCH 22/26] Add inline styles section to Styling (#2873) Co-authored-by: WintrCodes <110974960+WintrCodes@users.noreply.github.com> Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/styling.mdx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/content/docs/en/guides/styling.mdx b/src/content/docs/en/guides/styling.mdx index 099153d8d27f8..22a98448c055d 100644 --- a/src/content/docs/en/guides/styling.mdx +++ b/src/content/docs/en/guides/styling.mdx @@ -148,6 +148,15 @@ This pattern lets you style child components directly. Astro will pass the paren Because the `class` prop includes the child in its parent’s scope, it is possible for styles to cascade from parent to child. To avoid this having unintended side effects, ensure you use unique class names in the child component. ::: +### Inline styles + +You can style HTML elements inline using the `style` attribute. This can be a CSS string or an object of CSS properties: + +```astro title="src/pages/index.astro" +// These are equivalent: +

My text

+

My text

+``` ## External Styles From bbbcfece4ecefeac4f2e0682a23bcb3e6b8dc647 Mon Sep 17 00:00:00 2001 From: Trevor Lee <49603972+boogerbuttcheeks@users.noreply.github.com> Date: Mon, 20 Mar 2023 14:31:00 -0700 Subject: [PATCH 23/26] Update assets.mdx (en-only) (#2890) Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/assets.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/assets.mdx b/src/content/docs/en/guides/assets.mdx index c90d4c09069be..83880d01c4c2e 100644 --- a/src/content/docs/en/guides/assets.mdx +++ b/src/content/docs/en/guides/assets.mdx @@ -47,7 +47,7 @@ When you next run Astro, it will update your `src/env.d.ts` file to configure ty ### Move your images to `src/assets/` -Create an `src/assets/` folder, which Astro will recognize as your new assets folder. +Create `src/assets/`, which Astro will recognize as your new assets folder. We recommend storing all images to be optimized in the `src/assets/` directory, although this location is optional. From d423121357783879a967f56c99f2eb1e4c30d704 Mon Sep 17 00:00:00 2001 From: "Fred K. Schott" Date: Mon, 20 Mar 2023 14:31:24 -0700 Subject: [PATCH 24/26] update perf (#2892) --- netlify.toml | 5 +++++ src/components/HeadCommon.astro | 22 +++++++++++++------- src/components/LeftSidebar/LeftSidebar.astro | 17 ++++++++++----- src/layouts/BaseLayout.astro | 18 ---------------- 4 files changed, 32 insertions(+), 30 deletions(-) diff --git a/netlify.toml b/netlify.toml index 2d53c3ef2b2c7..4a050467206a8 100644 --- a/netlify.toml +++ b/netlify.toml @@ -1,3 +1,8 @@ +[[headers]] + for = "/_astro/*" + [headers.values] + Cache-Control = "public, max-age=604800, immutable" + [build] command = "NODE_OPTIONS=--max_old_space_size=4096 pnpm netlify:build" ignore = "git diff --quiet $COMMIT_REF $CACHED_COMMIT_REF -- /" diff --git a/src/components/HeadCommon.astro b/src/components/HeadCommon.astro index 9443e93445791..40acb3fd3a71a 100644 --- a/src/components/HeadCommon.astro +++ b/src/components/HeadCommon.astro @@ -20,20 +20,28 @@ import '@fontsource/ibm-plex-mono/400-italic.css'; - - - From 4df8ae1eec7d76f215e89e6709b5e9f59e3f9735 Mon Sep 17 00:00:00 2001 From: j$ <55032731+60fov@users.noreply.github.com> Date: Mon, 20 Mar 2023 16:34:10 -0500 Subject: [PATCH 25/26] content collection SSR code snippet update (#2773) Co-authored-by: 60fov <9984529-60fov@users.noreply.gitlab.com> Co-authored-by: Dan Jutan --- .../docs/en/guides/content-collections.mdx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/content/docs/en/guides/content-collections.mdx b/src/content/docs/en/guides/content-collections.mdx index b1e18d31aa7db..1a041060feea5 100644 --- a/src/content/docs/en/guides/content-collections.mdx +++ b/src/content/docs/en/guides/content-collections.mdx @@ -397,16 +397,21 @@ If you are building a dynamic website (using Astro's SSR support), you are not e ```astro --- // src/pages/posts/[...slug].astro -import { getEntryBySlug } from 'astro:content'; +import { getEntryBySlug } from "astro:content"; // 1. Get the slug from the incoming server request const { slug } = Astro.params; +if (slug === undefined) { + throw new Error("Slug is required"); +} // 2. Query for the entry directly using the request slug -const entry = await getEntryBySlug('blog', slug); -// 3. (Optional) render the entry to HTML in the template +const entry = await getEntryBySlug("blog", slug); +// 3. Redirect if the entry does not exist +if (entry === undefined) { + return Astro.redirect("/404"); +} +// 4. (Optional) Render the entry to HTML in the template const { Content } = await entry.render(); --- -

{entry.data.title}

- ``` ## Migrating from File-Based Routing From 1864a2d045105b847d30bdf988564e0c7c7356aa Mon Sep 17 00:00:00 2001 From: Dan Jutan Date: Mon, 20 Mar 2023 17:38:44 -0400 Subject: [PATCH 26/26] Remove dev dependency flag from CSS preprocessor installation (#2872) --- src/content/docs/en/guides/styling.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/docs/en/guides/styling.mdx b/src/content/docs/en/guides/styling.mdx index 22a98448c055d..f39da7a429bd3 100644 --- a/src/content/docs/en/guides/styling.mdx +++ b/src/content/docs/en/guides/styling.mdx @@ -424,7 +424,7 @@ Astro supports CSS preprocessors such as [Sass][sass], [Stylus][stylus], and [Le ### Sass and SCSS ```shell - npm install -D sass + npm install sass ``` Use `