diff --git a/src/content/docs/en/editor-setup.mdx b/src/content/docs/en/editor-setup.mdx index da8c813bdc4e8..2f8735999d32d 100644 --- a/src/content/docs/en/editor-setup.mdx +++ b/src/content/docs/en/editor-setup.mdx @@ -36,6 +36,7 @@ Our amazing community maintains several extensions for other popular editors, in - [Nova Extension](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) Community - Provides syntax highlighting and code completion for Astro inside of Nova - [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) Community - Provides syntax highlighting, indentation, and code folding support for Astro inside of Vim or Neovim - Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) and [TreeSitter](https://github.com/virchau13/tree-sitter-astro) Plugins Community - Provides syntax highlighting, treesitter parsing, and code completion for Astro inside of Neovim +- Emacs - See instructions for [Configuring Emacs and Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) Community to work with Astro ## In-Browser Editors diff --git a/src/content/docs/en/guides/cms/tina-cms.mdx b/src/content/docs/en/guides/cms/tina-cms.mdx index 3058a6d99b7a2..3d0ab8a6b546c 100644 --- a/src/content/docs/en/guides/cms/tina-cms.mdx +++ b/src/content/docs/en/guides/cms/tina-cms.mdx @@ -12,7 +12,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' ## Integrating with Astro -To get started, you'll need an existing Astro project. +To get started, you'll need an existing Astro project. 1. Run the following command to install Tina into your Astro project. @@ -38,8 +38,8 @@ To get started, you'll need an existing Astro project. - When prompted "What framework are you using", choose **Other**. - When asked where public assets are stored, press Enter. - After this has finished, you should now have a `.tina` folder in the root of your project and an `admin` folder in your public directory. It will also create a Markdown file at `content/posts/hello-world.md`. - + After this has finished, you should now have a `.tina` folder in the root of your project and a generated `hello-world.md` file at `content/posts`. + 2. Change the `dev` script in `package.json`: @@ -132,7 +132,7 @@ To get started, you'll need an existing Astro project. name: "body", label: "Body", isBody: true, - }, + }, ], }, ], @@ -148,7 +148,7 @@ To get started, you'll need an existing Astro project. - [TinaCMS Astro integration guide](https://tina.io/docs/frameworks/astro/). -## Community Resources +## Community Resources - [Astro Tina Starter with visual editing](https://github.com/dawaltconley/tina-astro) by Jeff See + Dylan Awalt-Conley - [Astro Tina Starter with basic editing](https://github.com/tombennet/astro-tina-starter/tree/main) by Tom Bennet diff --git a/src/content/docs/en/guides/content-collections.mdx b/src/content/docs/en/guides/content-collections.mdx index 7911970145fa0..10011a799e49f 100644 --- a/src/content/docs/en/guides/content-collections.mdx +++ b/src/content/docs/en/guides/content-collections.mdx @@ -7,7 +7,6 @@ i18nReady: true --- import FileTree from '~/components/FileTree.astro' import Since from '~/components/Since.astro' -import TypeScriptSettingTabs from '~/components/tabs/TypeScriptSettingTabs.astro' import RecipeLinks from "~/components/RecipeLinks.astro" import Badge from "~/components/Badge.astro" diff --git a/src/content/docs/en/guides/markdown-content.mdx b/src/content/docs/en/guides/markdown-content.mdx index 84e7e9ead6db0..5016e5b6f4fe8 100644 --- a/src/content/docs/en/guides/markdown-content.mdx +++ b/src/content/docs/en/guides/markdown-content.mdx @@ -570,7 +570,7 @@ export default defineConfig({ ### Syntax Highlighting -Astro comes with built-in support for [Shiki](https://shiki.matsu.io/) and [Prism](https://prismjs.com/). This provides syntax highlighting for: +Astro comes with built-in support for [Shiki](https://shiki.matsu.io/) (via [Shikiji](https://github.com/antfu/shikiji)) and [Prism](https://prismjs.com/). This provides syntax highlighting for: - all code fences (\`\`\`) used in a Markdown or MDX file. - content within the [built-in `` component](/en/reference/api-reference/#code-) (powered by Shiki). diff --git a/src/content/docs/en/reference/configuration-reference.mdx b/src/content/docs/en/reference/configuration-reference.mdx index e83e7527cf73a..9ff8e7543aebd 100644 --- a/src/content/docs/en/reference/configuration-reference.mdx +++ b/src/content/docs/en/reference/configuration-reference.mdx @@ -1089,7 +1089,7 @@ The fallback strategy when navigating to pages that do not exist (e.g. a transla Use this object to declare a fallback `locale` route for each language you support. If no fallback is specified, then unavailable pages will return a 404. -#### Example +##### Example The following example configures your content fallback strategy to redirect unavailable pages in `/pt-br/` to their `es` version, and unavailable pages in `/fr/` to their `en` version. Unavailable `/es/` pages will return a 404. diff --git a/src/content/docs/es/core-concepts/astro-components.mdx b/src/content/docs/es/core-concepts/astro-components.mdx index 1ff242da4c15f..8e2329fff6b74 100644 --- a/src/content/docs/es/core-concepts/astro-components.mdx +++ b/src/content/docs/es/core-concepts/astro-components.mdx @@ -253,6 +253,11 @@ Ten en cuenta que los slots con nombre deben ser hijos inmediatos del componente Los slots con nombre también se pueden pasar a [componentes de framework](/es/core-concepts/framework-components/) en archivos Astro. ::: +:::note +Un nombre de slot de Astro no puede ser generado dinámicamente, tal como dentro de una función map. Si esta característica es necesaria dentro de componentes de framework UI, podría ser mejor generar estos slots dinámicos dentro del framework mismo. +::: + + ### Contenido alternativo para slots Los slots también pueden renderizar **contenido alternativo** en el caso que no reciban datos con `` para emparejar, sea slot con nombre o no. diff --git a/src/content/docs/es/guides/cms/storyblok.mdx b/src/content/docs/es/guides/cms/storyblok.mdx index e8da0fa80206e..6247d8089c0f2 100644 --- a/src/content/docs/es/guides/cms/storyblok.mdx +++ b/src/content/docs/es/guides/cms/storyblok.mdx @@ -272,7 +272,7 @@ Para conectar los Bloks recién creados a los componentes de Astro, crea una nue ```astro title="src/storyblok/Page.astro" --- import { storyblokEditable } from '@storyblok/astro' -import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro' +import StoryblokComponent from '@storyblok/astro/components/StoryblokComponent'; const { blok } = Astro.props --- @@ -542,4 +542,4 @@ Ahora, cada vez que publiques una nueva historia, se desencadenará una nueva co - [Conseguir que el Editor Visual funcione para Storyblok + Astro](https://dev.to/sandrarodgers/getting-the-visual-editor-to-work-for-storyblok-astro-2gja) por Sandra Rodgers - [Astro + Storyblok: previsualización SSR para una edición visual instantánea](https://dev.to/jgierer12/astro-storyblok-ssr-preview-for-instant-visual-editing-3g9m) por Jonas Gierer -- [Astro-Storyblok previsualiza un sitio con la función Branch Deploys de Netlify](https://dev.to/sandrarodgers/astro-storyblok-previews-site-with-netlifys-branch-deploys-feature-44dh) por Sandra Rodgers \ No newline at end of file +- [Astro-Storyblok previsualiza un sitio con la función Branch Deploys de Netlify](https://dev.to/sandrarodgers/astro-storyblok-previews-site-with-netlifys-branch-deploys-feature-44dh) por Sandra Rodgers diff --git a/src/content/docs/es/guides/cms/tina-cms.mdx b/src/content/docs/es/guides/cms/tina-cms.mdx index 2de5cf00a8bcf..31fa1b26cff4c 100644 --- a/src/content/docs/es/guides/cms/tina-cms.mdx +++ b/src/content/docs/es/guides/cms/tina-cms.mdx @@ -49,7 +49,7 @@ Para empezar, necesitarás un proyecto Astro existente. { "scripts": { "dev": "astro dev", - "dev": "tinacms dev -c 'astro dev'" + "dev": "tinacms dev -c \"astro dev\"" } } ``` @@ -60,7 +60,7 @@ Para empezar, necesitarás un proyecto Astro existente. { "scripts": { "dev": "astro dev", - "dev": "tinacms dev -c 'astro dev'" + "dev": "tinacms dev -c \"astro dev\"" } } ``` @@ -71,7 +71,7 @@ Para empezar, necesitarás un proyecto Astro existente. { "scripts": { "dev": "astro dev", - "dev": "tinacms dev -c 'astro dev'" + "dev": "tinacms dev -c \"astro dev\"" } } ``` diff --git a/src/content/docs/fr/core-concepts/astro-components.mdx b/src/content/docs/fr/core-concepts/astro-components.mdx index bc41f9f8e4e12..32f649e66dffe 100644 --- a/src/content/docs/fr/core-concepts/astro-components.mdx +++ b/src/content/docs/fr/core-concepts/astro-components.mdx @@ -258,6 +258,11 @@ Les emplacements nommés peuvent aussi être passés aux [composants de framewor ::: +:::note +Le nom d'un emplacement (slot) Astro ne peut pas être généré dynamiquement, comme dans une fonction map. Si cette fonctionnalité est nécessaire dans les composants framework UI, il est préférable de générer ces emplacements (slots) dynamiques dans le framework lui-même. +::: + + ### Contenu par défaut pour les emplacements Les emplacements peuvent également restituer **du contenu par defaut**. Lorsqu'il n'y a pas d'enfants correspondants passés à un emplacement, un élément `` affichera ses propres enfants. diff --git a/src/content/docs/fr/guides/backend/xata.mdx b/src/content/docs/fr/guides/backend/xata.mdx index 1a8e146799a05..62b32f915f1b6 100644 --- a/src/content/docs/fr/guides/backend/xata.mdx +++ b/src/content/docs/fr/guides/backend/xata.mdx @@ -97,9 +97,9 @@ const { records } = await xata.db.Posts.getPaginated({ ---
    - {records.map(post) => ( + {records.map((post) => (
  • {post.title}
    • - )} + ))}
``` Il est important de noter que le SDK nécessite d'être régénéré à chaque fois que votre schéma change. Donc évitez de faire des modifications sur les fichiers générés par le CLI Xata, car une fois le schéma mis à jour, vos modifications seront écrasées. diff --git a/src/content/docs/fr/guides/cms/wordpress.mdx b/src/content/docs/fr/guides/cms/wordpress.mdx index c5c942a150f2f..f8f070fe35bd8 100644 --- a/src/content/docs/fr/guides/cms/wordpress.mdx +++ b/src/content/docs/fr/guides/cms/wordpress.mdx @@ -175,8 +175,8 @@ Pour déployer votre site web, consultez nos [guides de déploiement](/fr/guides - [Construire un site Astro avec WordPress comme CMS sans tête](https://blog.openreplay.com/building-an-astro-website-with-wordpress-as-a-headless-cms/) par Chris Bongers. - [Construire avec Astro x WordPress](https://www.youtube.com/watch?v=Jstqgklvfnc) sur le flux de Ben Holmes. -- [Construire un site WordPress sans tête avec Astro](https://developers.wpengine.com/blog/building-a-headless-wordpress-site-with-astro) par Jeff Everhart -- [Astro et WordPress en tant qu'API](https://darko.io/posts/wp-as-an-api/) +- [Construire un site WordPress sans tête avec Astro](https://developers.wpengine.com/blog/building-a-headless-wordpress-site-with-astro) par Jeff Everhart. +- [Astro et WordPress en tant qu'API](https://darko.io/posts/wp-as-an-api/) par Darko Bozhinovski. ## Sites web en production diff --git a/src/content/docs/fr/guides/configuring-astro.mdx b/src/content/docs/fr/guides/configuring-astro.mdx index bd1d39cac5515..3f0ab9bf10c34 100644 --- a/src/content/docs/fr/guides/configuring-astro.mdx +++ b/src/content/docs/fr/guides/configuring-astro.mdx @@ -117,7 +117,8 @@ export default defineConfig({ ``` :::note -Les propriétés `import.meta` spécifiques à Vite, comme `import.meta.env` ou `import.meta.glob`, ne sont _pas_ accessibles depuis votre fichier de configuration. Nous recommandons des alternatives comme [dotenv](https://github.com/motdotla/dotenv) ou [fast-glob](https://github.com/mrmlnc/fast-glob) pour ces cas d'utilisation respectifs. +{/* Il faut utiliser ici car Vite fait un remplacement automatique sur import-meta-env qui casse le rendu. */} +Les propriétés `import.meta` spécifiques à Vite, comme {'import.meta.env'} ou `import.meta.glob`, ne sont _pas_ accessibles depuis votre fichier de configuration. Nous recommandons des alternatives comme [dotenv](https://github.com/motdotla/dotenv) ou [fast-glob](https://github.com/mrmlnc/fast-glob) pour ces cas d'utilisation respectifs. ::: ## Personnalisation des noms de fichiers de sortie @@ -155,7 +156,7 @@ Vous pouvez également utiliser l'[aide `loadEnv` de Vite (EN)](https://main.vit :::note `pnpm` ne vous permet pas d'importer des modules qui ne sont pas directement installés dans votre projet. Si vous utilisez `pnpm`, vous devrez installer `vite` pour utiliser l'aide `loadEnv`. ```sh -pnpm install vite --save-dev +pnpm add vite --save-dev ``` ::: diff --git a/src/content/docs/fr/guides/deploy/github.mdx b/src/content/docs/fr/guides/deploy/github.mdx index 3b4882abe3761..71627af7c3cd8 100644 --- a/src/content/docs/fr/guides/deploy/github.mdx +++ b/src/content/docs/fr/guides/deploy/github.mdx @@ -29,6 +29,7 @@ Astro maintient l'action officielle `withastro/action` pour déployer vos projet :::note Ne mettez pas le paramètre `base` si : + - Votre page est servie à partir du dossier racine (root). - Votre dépôt s'appelle `.github.io`. - Vous utilisez un nom de domaine personnalisé. ::: diff --git a/src/content/docs/fr/guides/deploy/gitlab.mdx b/src/content/docs/fr/guides/deploy/gitlab.mdx index 08da914a100b4..5121e33ac7369 100644 --- a/src/content/docs/fr/guides/deploy/gitlab.mdx +++ b/src/content/docs/fr/guides/deploy/gitlab.mdx @@ -14,6 +14,7 @@ Consultez [le projet d'exemple officiel GitLab Pages Astro](https://gitlab.com/p ## Comment déployer 1. Définissez le bon `site` dans `astro.config.mjs`. +2. Renommez le répertoire `public/` en `static`. 2. Mettez `outDir:public` dans `astro.config.mjs`. Ce paramètre indique à Astro de placer la sortie statique de la compilation dans un dossier appelé `public`, qui est le dossier requis par GitLab Pages pour les fichiers exposés. Si vous utilisiez le répertoire [`public/`](/fr/core-concepts/project-structure/#public) comme source de fichiers statiques dans votre projet Astro, renommez-le et utilisez ce nouveau nom de dossier dans `astro.config.mjs` pour la valeur de `publicDir`. @@ -24,26 +25,25 @@ Par exemple, voici les paramètres corrects de `astro.config.mjs` lorsque le ré import { defineConfig } from 'astro/config'; export default defineConfig({ - sitemap: true, - site: 'https://astro.build/', + site: 'https://.gitlab.io', + base: '/' outDir: 'public', publicDir: 'static', }); ``` -3. Créez un fichier appelé `.gitlab-ci.yml` à la racine de votre projet avec le contenu ci-dessous. Cela permettra de construire et de déployer votre site à chaque fois que vous apporterez des modifications à votre contenu : +4. Créez un fichier appelé `.gitlab-ci.yml` à la racine de votre projet avec le contenu ci-dessous. Cela permettra de construire et de déployer votre site à chaque fois que vous apporterez des modifications à votre contenu : ```yaml - # L'image Docker qui sera utilisée pour construire votre application - image: node:lts - pages: - cache: - paths: - - node_modules/ + # L'image Docker qui sera utilisée pour construire votre application + image: node:lts + + before_script: + - npm ci + script: # Précisez ici les étapes de la construction de votre application - - npm install - npm run build artifacts: diff --git a/src/content/docs/fr/guides/deploy/netlify.mdx b/src/content/docs/fr/guides/deploy/netlify.mdx index 717ccdf4ba77f..99c593da45764 100644 --- a/src/content/docs/fr/guides/deploy/netlify.mdx +++ b/src/content/docs/fr/guides/deploy/netlify.mdx @@ -4,21 +4,21 @@ description: Comment déployer votre site Astro sur le web sur Netlify. type: deploy i18nReady: true --- -[Netlify](https://netlify.com) propose des services d'hébergement et de backend sans serveur (serverless) pour les applications web et les sites web statiques. Tout site Astro peut être hébergé sur Netlify ! +[Netlify](https://netlify.com) propose des services d'hébergement et de backend sans serveur (serverless) pour les applications web et les sites web statiques. Tout site Astro peut être hébergé sur Netlify ! Ce guide comprend des instructions pour le déploiement sur Netlify via l'interface utilisateur du site Web ou le CLI de Netlify. ## Configuration du projet -Votre projet Astro peut être déployé sur Netlify de trois manières différentes : en tant que site statique, en tant que site rendu côté serveur ou en tant que site edge-rendered (expérimental). +Votre projet Astro peut être déployé sur Netlify de trois manières différentes : en tant que site statique, en tant que site rendu côté serveur ou en tant que site edge-rendered. ### Site statique Votre projet Astro est un site statique par défaut. Vous n'avez besoin d'aucune configuration supplémentaire pour déployer un site Astro statique sur Netlify. -### Adaptateur pour SSR/Edge +### Adaptateur pour SSR -Pour activer le SSR dans votre projet Astro et le déployer sur Netlify : +Pour activer le SSR dans votre projet Astro et le déployer sur Netlify, y compris en utilisant les fonctions de bordure de Netlify : Ajoutez [l'adaptateur Netlify](/fr/guides/integrations-guide/netlify/) pour activer le SSR dans votre projet Astro avec la commande `astro add` suivante. Cela installera l'adaptateur et apportera les changements appropriés à votre fichier `astro.config.mjs` en une seule étape. @@ -46,17 +46,18 @@ export default defineConfig({ }); ``` -Pour faire le rendu de votre projet en utilisant les [fonctions expérimentales Edge de Netlify (EN)](https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/#app) à la place, changez l'import `netlify/functions` dans le fichier de configuration Astro pour utiliser `netlify/edge-functions`. - - ```js title="astro.config.mjs" ins={3} del={2} - import { defineConfig } from 'astro/config'; - import netlify from '@astrojs/netlify/functions'; - import netlify from '@astrojs/netlify/edge-functions'; - - export default defineConfig({ - output: 'server', - adapter: netlify(), - }); + Vous pouvez également déployer votre projet en utilisant les fonctions Edge de Netlify en ajoutant `edgeMiddleware : true` à la configuration de l'adatper Netlify : + + ```diff lang="js" + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import netlify from '@astrojs/netlify/functions'; + export default defineConfig({ + output: 'server', + adapter: netlify({ + + edgeMiddleware: true + }), + }); ``` ## Comment déployer @@ -111,7 +112,7 @@ Vous pouvez également créer un nouveau site sur Netlify et relier votre dépô 3. Lancez `netlify init` et suivez les instructions 4. Confirmez votre commande de build (`astro build`) - Le CLI détectera automatiquement les paramètres de build (`astro build`) et le répertoire de déploiement (`dist`), et proposera de générer automatiquement [un fichier `netlify.toml`](#le-fichier-netlifytoml) avec ces paramètres. + Le CLI détectera automatiquement les paramètres de build (`astro build`) et le répertoire de déploiement (`dist`), et proposera de générer automatiquement [un fichier `netlify.toml`](#le-fichier-netlifytoml) avec ces paramètres. 5. Construire (build) et déployer en poussant (push) vers Git diff --git a/src/content/docs/fr/guides/environment-variables.mdx b/src/content/docs/fr/guides/environment-variables.mdx index 1e752162ee152..52c24dace8dab 100644 --- a/src/content/docs/fr/guides/environment-variables.mdx +++ b/src/content/docs/fr/guides/environment-variables.mdx @@ -96,7 +96,8 @@ const data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`); ``` :::caution -Parce que Vite remplace statiquement `import.meta.env`, vous ne pouvez pas y accéder avec des clés dynamiques comme `import.meta.env[key]`. +{/* Il faut utiliser ici car Vite fait un remplacement automatique sur import-meta-env qui casse le rendu. */} +Parce que Vite remplace statiquement {'import.meta.env'}, vous ne pouvez pas y accéder avec des clés dynamiques comme {'import.meta.env[key]'}. ::: Lorsque vous utilisez SSR, les variables d'environnement peuvent être accédées au moment de l'exécution en fonction de l'adaptateur SSR utilisé. Avec la plupart des adaptateurs, vous pouvez accéder aux variables d'environnement avec `process.env`, mais certains adaptateurs fonctionnent différemment. Pour l'adaptateur Deno, vous utiliserez `Deno.env.get()`. Voir comment [accéder au runtime Cloudflare](/fr/guides/integrations-guide/cloudflare/#cloudflare-runtime) pour gérer les variables d'environnement lors de l'utilisation de l'adaptateur Cloudflare. Astro vérifiera d'abord l'environnement du serveur pour les variables, et si elles n'existent pas, Astro les cherchera dans les fichiers .env. diff --git a/src/content/docs/fr/guides/integrations-guide/tailwind.mdx b/src/content/docs/fr/guides/integrations-guide/tailwind.mdx index 0be43beeb385a..c9fc6f39525d6 100644 --- a/src/content/docs/fr/guides/integrations-guide/tailwind.mdx +++ b/src/content/docs/fr/guides/integrations-guide/tailwind.mdx @@ -95,7 +95,7 @@ Lorsque vous installez l'intégration, les classes utilitaires de Tailwind devra ### Configurer Tailwind -Si vous avez utilisé les instructions d'installation rapide et que vous avez répondu oui à chaque question, vous verrez un fichier `tailwind.config.cjs` dans le répertoire racine de votre projet. Utilisez ce fichier pour modifier la configuration de Tailwind. Vous pouvez apprendre à personnaliser Tailwind en utilisant ce fichier dans la [documentation de Tailwind](https://tailwindcss.com/docs/configuration). +Si vous avez utilisé les instructions d'installation rapide et que vous avez répondu oui à chaque question, vous verrez un fichier `tailwind.config.mjs` dans le répertoire racine de votre projet. Utilisez ce fichier pour modifier la configuration de Tailwind. Vous pouvez apprendre à personnaliser Tailwind en utilisant ce fichier dans la [documentation de Tailwind](https://tailwindcss.com/docs/configuration). S'il n'existe pas encore, vous pouvez ajoutez votre propre fichier `tailwind.config.(js|cjs|mjs)` dans le répertoire racine et l'intégration utilisera ses configurations. Cela peut être intéressant si vous avez déjà configuré Tailwind dans un autre projet et que vous souhaitez transférer ces paramètres dans celui-ci. @@ -180,8 +180,8 @@ error The `text-special` class does not exist. If `text-special` is a custom c [Au lieu d'utiliser les directives `@layer` dans une feuille de style globale](https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css), éfinissez vos styles personnalisés en ajoutant un plugin à votre configuration Tailwind pour y remédier : ```js -// tailwind.config.cjs -module.exports = { +// tailwind.config.mjs +export default { // ... plugins: [ function ({ addComponents, theme }) {