diff --git a/src/content/docs/de/guides/markdown-content.mdx b/src/content/docs/de/guides/markdown-content.mdx index f9ab092cc5e53..ec673a33384f6 100644 --- a/src/content/docs/de/guides/markdown-content.mdx +++ b/src/content/docs/de/guides/markdown-content.mdx @@ -501,7 +501,7 @@ Die von Astro standardmäßig verwendeten Plugins sind [GitHub-flavored Markdown Astro unterstützt von Haus aus [Shiki](https://shiki.matsu.io/) und [Prism](https://prismjs.com/) und ermöglicht so die Syntaxhervorhebung in folgenden Bereichen: - Mit Code-Zäunen (\`\`\`) umgebene Inhalte innerhalb von Markdown-Dateien (`.md`) und der [eingebauten ``-Komponente](#markdown-komponente). -- Inhalte innerhalb der [eingebauten ``-Komponente](/de/reference/api-reference/#code-) (basierend auf Shiki) oder der [``-Komponente](/de/reference/api-reference/#prism-) (basierend auf Prism). +- Inhalte innerhalb der [eingebauten ``-Komponente](/de/reference/components-reference/#code-) (basierend auf Shiki) oder der [``-Komponente](/de/reference/components-reference/#prism-) (basierend auf Prism). Shiki ist standardmäßig aktiviert und mit dem Design `github-dark` vorkonfiguriert. Die kompilierte Ausgabe wird auf Inline-Stile ohne überflüssige CSS-Klassen, Stylesheets oder clientseitigen JavaScript-Code beschränkt. diff --git a/src/content/docs/de/guides/troubleshooting.mdx b/src/content/docs/de/guides/troubleshooting.mdx index 4cd409cef0d1b..2912d668ec9e6 100644 --- a/src/content/docs/de/guides/troubleshooting.mdx +++ b/src/content/docs/de/guides/troubleshooting.mdx @@ -173,7 +173,7 @@ Dies kann nützlich sein, um Unterschiede zwischen der SSR-Ausgabe und den hydra ### Astro `` Komponente -Um dir das Debuggen deiner Astro-Komponenten zu erleichtern, bietet Astro eine eingebaute [``](/de/reference/api-reference/#debug-) Komponente, die jeden Wert direkt in die HTML-Vorlage deiner Komponente überträgt. Das ist nützlich für das schnelle Debugging im Browser, ohne dass du zwischen deinem Terminal und deinem Browser hin- und herwechseln musst. +Um dir das Debuggen deiner Astro-Komponenten zu erleichtern, bietet Astro eine eingebaute [``](/de/reference/components-reference/#debug-) Komponente, die jeden Wert direkt in die HTML-Vorlage deiner Komponente überträgt. Das ist nützlich für das schnelle Debugging im Browser, ohne dass du zwischen deinem Terminal und deinem Browser hin- und herwechseln musst. ```astro {2,7} --- diff --git a/src/content/docs/en/basics/astro-components.mdx b/src/content/docs/en/basics/astro-components.mdx index eea643c1769bc..11ccd4550f84e 100644 --- a/src/content/docs/en/basics/astro-components.mdx +++ b/src/content/docs/en/basics/astro-components.mdx @@ -252,7 +252,7 @@ import Wrapper from '../components/Wrapper.astro'; Use a `slot="my-slot"` attribute on the child element that you want to pass through to a matching `` placeholder in your component. ::: -To pass multiple HTML elements into a component's `` placeholder without a wrapping `
`, use the `slot=""` attribute on [Astro's `` component](/en/reference/api-reference/#fragment-): +To pass multiple HTML elements into a component's `` placeholder without a wrapping `
`, use the `slot=""` attribute on [Astro's `` component](/en/reference/components-reference/#fragment-): ```astro title="src/components/CustomTable.astro" "" "" --- diff --git a/src/content/docs/en/guides/markdown-content.mdx b/src/content/docs/en/guides/markdown-content.mdx index cc2347e8961ed..7fb3844dc6c0b 100644 --- a/src/content/docs/en/guides/markdown-content.mdx +++ b/src/content/docs/en/guides/markdown-content.mdx @@ -11,7 +11,7 @@ import { Steps } from '@astrojs/starlight/components'; [Markdown](https://daringfireball.net/projects/markdown/) is commonly used to author text-heavy content like blog posts and documentation. Astro includes built-in support for Markdown files that can also include [frontmatter YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) to define custom properties such as a title, description, and tags. -In Astro, you can author content in Markdown, then render it in `.astro` components. This combines a familiar writing format designed for content with the flexibility of Astro's component syntax and architecture. +In Astro, you can author content in [GitHub Flavored Markdown](https://github.github.com/gfm/), then render it in `.astro` components. This combines a familiar writing format designed for content with the flexibility of Astro's component syntax and architecture. :::tip For additional functionality, such as including components and JSX expressions in Markdown, add the [`@astrojs/mdx` integration](/en/guides/integrations-guide/mdx/) to write your Markdown content using [MDX](https://mdxjs.com/). @@ -323,8 +323,8 @@ export default defineConfig({ Astro comes with built-in support for [Shiki](https://shiki.style/) 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). -- content within the [`` component](/en/reference/api-reference/#prism-) (powered by Prism). +- content within the [built-in `` component](/en/reference/components-reference/#code-) (powered by Shiki). +- content within the [`` component](/en/reference/components-reference/#prism-) (powered by Prism). Shiki is enabled by default, preconfigured with the `github-dark` theme. The compiled output will be limited to inline `style`s without any extraneous CSS classes, stylesheets, or client-side JS. 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 bfb4bdbfdd831..db4379005933f 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 @@ -67,6 +67,21 @@ To convert other types of sites, such as a portfolio or documentation site, see ## Community Resources -- Blog Post: [Why I switched from WordPress to Astro](https://dev.to/fratzinger/why-i-switched-from-wordpress-to-astro-5ge) by fratzinger +- [Why I switched from WordPress to Astro](https://dev.to/fratzinger/why-i-switched-from-wordpress-to-astro-5ge) +- [Shattering Headless WordPress Build Times with Astro’s Content Layer API](https://andrewkepson.com/blog/headless-wordpress/build-time-astro-content-layer-api/) +- [Building an Astro Website with WordPress as a Headless CMS](https://blog.openreplay.com/building-an-astro-website-with-wordpress-as-a-headless-cms/) +- [Building a Headless WordPress Site with Astro](https://wpengine.com/builders/building-headless-wordpress-site-astro/) +- [Headless WordPress with Astro – Build a Simple Blog from Scratch with Tailwind CSS](https://fullstackdigital.io/blog/headless-wordpress-with-astro-build-a-simple-blog/) +- [Leveraging WordPress as a Headless CMS for Your Astro Website: API Configuration & Data Fetching](https://medium.com/@bangemann.dev/configure-wordpress-rest-api-setup-data-fetching-4af5161095f6) +- [Build a static site with WordPress and Astro](https://kinsta.com/blog/wordpress-astro/) +- [How to Set Up a Headless WordPress Site with Astro](https://dev.to/mathiasahlgren/how-to-set-up-a-headless-wordpress-site-with-astro-3a2h) +- [Building an E-commerce Website with Headless WordPress and Astro](https://shaxadd.medium.com/building-an-e-commerce-website-with-headless-wordpress-and-astro-2712d8c8b735) +- [Astro WordPress Starter Theme](https://astro.build/themes/details/astro-wordpress-starter/) +- [Kubric Astro Theme](https://astro.build/themes/details/kubrick-astro/) +- 📺 [Make a Headless WordPress Site with Astro](https://www.youtube.com/watch?v=54U7dVmhyxE) +- 📺 [Astro Headless WordPress Starter Demo](https://www.youtube.com/watch?v=BcoxZZIfESI) +- 📺 [Astro + WPGraphQL for more secure WordPress sites](https://www.youtube.com/watch?v=fWxn-r83ygQ) +- 📺 [WordPress Headless with Astro - Installing Astro and Fetching posts with WP-GraphQL](https://www.youtube.com/watch?v=2PSqABrME28) +- 📺 [Going Headless WordPress with Astro](https://www.youtube.com/watch?v=MP2TR6Z_YTc) - Add your own! diff --git a/src/content/docs/en/guides/routing.mdx b/src/content/docs/en/guides/routing.mdx index 80a49ab7f352c..19f4317cd3a52 100644 --- a/src/content/docs/en/guides/routing.mdx +++ b/src/content/docs/en/guides/routing.mdx @@ -300,7 +300,7 @@ if (!isLoggedIn(cookie)) {

-A rewrite allows you serve a different route without redirecting the browser to a different page. The browser will show the original address in the URL bar, but will instead display the content of the URL provided to [`Astro.rewrite()`](/en/reference/api-reference/#astrorewrite). +A rewrite allows you to serve a different route without redirecting the browser to a different page. The browser will show the original address in the URL bar, but will instead display the content of the URL provided to [`Astro.rewrite()`](/en/reference/api-reference/#astrorewrite). :::tip For content that has permanently moved, or to direct your user to a different page with a new URL (e.g. a user dashboard after logging in), use a [redirect](#redirects) instead. diff --git a/src/content/docs/en/guides/troubleshooting.mdx b/src/content/docs/en/guides/troubleshooting.mdx index dccc1704e9bae..36c7ed13c62a9 100644 --- a/src/content/docs/en/guides/troubleshooting.mdx +++ b/src/content/docs/en/guides/troubleshooting.mdx @@ -34,7 +34,7 @@ This can be useful for debugging differences between the SSR output and the hydr ### Astro `` component -To help you debug your Astro components, Astro provides a built-in [``](/en/reference/api-reference/#debug-) component which renders any value directly into your component HTML template. This is useful for quick debugging in the browser without having to flip back-and-forth between your terminal and your browser. +To help you debug your Astro components, Astro provides a built-in [``](/en/reference/components-reference/#debug-) component which renders any value directly into your component HTML template. This is useful for quick debugging in the browser without having to flip back-and-forth between your terminal and your browser. ```astro {2,7} --- diff --git a/src/content/docs/en/guides/upgrade-to/v1.mdx b/src/content/docs/en/guides/upgrade-to/v1.mdx index b2aa43da09584..3cbd0f02feeed 100644 --- a/src/content/docs/en/guides/upgrade-to/v1.mdx +++ b/src/content/docs/en/guides/upgrade-to/v1.mdx @@ -342,7 +342,7 @@ import { Prism } from '@astrojs/prism'; --- ``` -Since the `@astrojs/prism` package is still bundled with `astro` core, you won't need to install anything new, nor add Prism as an integration! However, note that we _do_ plan to extract `@astrojs/prism` (and Prism syntax highlighting in general) to a separate, installable package in the future. See [the `` component API reference](/en/reference/api-reference/#prism-) for more. +Since the `@astrojs/prism` package is still bundled with `astro` core, you won't need to install anything new, nor add Prism as an integration! However, note that we _do_ plan to extract `@astrojs/prism` (and Prism syntax highlighting in general) to a separate, installable package in the future. See [the `` component API reference](/en/reference/components-reference/#prism-) for more details. ### CSS Parser Upgrade diff --git a/src/content/docs/en/reference/api-reference.mdx b/src/content/docs/en/reference/api-reference.mdx index 5f41c7de4dbf5..c74c15dbb890f 100644 --- a/src/content/docs/en/reference/api-reference.mdx +++ b/src/content/docs/en/reference/api-reference.mdx @@ -1369,7 +1369,7 @@ export default function () { The `getImage()` function is intended for generating images destined to be used somewhere else than directly in HTML, for example in an [API Route](/en/guides/endpoints/#server-endpoints-api-routes). It also allows you to create your own custom `` component. -`getImage()` takes an options object with the [same properties as the Image component](#properties) (except `alt`). +`getImage()` takes an options object with the [same properties as the Image component](/en/reference/components-reference/#properties) (except `alt`). ```astro --- @@ -2636,261 +2636,4 @@ The `code` property accepts human-readable versions of all HTTP status codes. Th The `message` property accepts a string. (e.g. "User must be logged in.") -## Built-in Components - -Astro includes several built-in components for you to use in your projects. All built-in components are available in `.astro` files via `import {} from 'astro:components';`. - -You can reference the `Props` of these components using the [`ComponentProp` type](/en/guides/typescript/#componentprops-type) utility. - -### `` - -```astro 'theme="dark-plus"' /wrap\b/ /(inline) \/>/ ---- -import { Code } from 'astro:components'; ---- - - - - - - - -

- - will be rendered inline. -

- - -``` - -This component provides syntax highlighting for code blocks at build time (no client-side JavaScript included). The component is powered internally by Shiki and it supports all popular [themes](https://shiki.style/themes) and [languages](https://shiki.style/languages). Plus, you can add your custom themes, languages, [transformers](#transformers), and [default colors](https://shiki.style/guide/dual-themes#without-default-color) by passing them to the `theme`, `lang`, `transformers`, and `defaultColor` attributes respectively. - -:::note -This component **does not** inherit the settings from your [Shiki configuration](/en/guides/markdown-content/#shiki-configuration). You will have to set them using the component props. -::: - -#### Transformers - -

- -[Shiki transformers](https://shiki.style/packages/transformers#shikijs-transformers) can optionally be applied to code by passing them in through the `transformers` property as an array. Since Astro v4.14.0, you can also provide a string for [Shiki's `meta` attribute](https://shiki.style/guide/transformers#meta) to pass options to transformers. - -Note that `transformers` only applies classes and you must provide your own CSS rules to target the elements of your code block. - -```astro title="src/pages/index.astro" {12-13} ---- -import { transformerNotationFocus, transformerMetaHighlight } from '@shikijs/transformers' -import { Code } from 'astro:components' -const code = `const foo = 'hello' -const bar = ' world' -console.log(foo + bar) // [!code focus] -` ---- - - - -``` - -### `` - -A component used with [`set:*` directives](/en/reference/directives-reference/#sethtml) to render HTML content without any additional wrapping elements: - -```astro title="src/components/SetHtml.astro" "Fragment" ---- -const htmlString = '

Raw HTML content

'; ---- - -``` - -See more about [using fragments](/en/basics/astro-syntax/#fragments) in Astro syntax. - -### `` - -To use the `Prism` highlighter component, first **install** the `@astrojs/prism` package: - - - - ```shell - npm install @astrojs/prism - ``` - - - ```shell - pnpm add @astrojs/prism - ``` - - - ```shell - yarn add @astrojs/prism - ``` - - - -```astro ---- -import { Prism } from '@astrojs/prism'; ---- - -``` - -This component provides language-specific syntax highlighting for code blocks by applying Prism's CSS classes. Note that **you need to provide a Prism CSS stylesheet** (or bring your own) for syntax highlighting to appear! See the [Prism configuration section](/en/guides/markdown-content/#prism-configuration) for more details. - -See the [list of languages supported by Prism](https://prismjs.com/#supported-languages) where you can find a language’s corresponding alias. And, you can also display your Astro code blocks with `lang="astro"`! - -### `` - -```astro title="src/components/MyComponent.astro" ---- -// import the Image component and the image -import { Image } from 'astro:assets'; -import myImage from "../assets/my_image.png"; // Image is 1600x900 ---- - - -A description of my image. -``` - -```html - - -A description of my image. -``` -#### Properties - -- src (required) -- alt (required) -- width and height (required for `public/` and remote images) -- format -- quality -- densities -- widths - -In addition to the properties above, the `` component accepts all properties accepted by the HTML `` tag. - -See more in the [Images Guide](/en/guides/images/#image--astroassets). - -### `` - -

- -Use the built-in `` Astro component to display a responsive image with multiple formats and/or sizes. - -```astro title="src/pages/index.astro" ---- -import { Picture } from 'astro:assets'; -import myImage from "../assets/my_image.png"; // Image is 1600x900 ---- - - - -``` - -```html - - - - - A description of my image. - -``` - -See more in the [Images Guide](/en/guides/images/#picture-). - -#### Properties - -`` accepts all the properties of the `` component, plus the following: - -##### `formats` - -An array of image formats to use for the `` tags. By default, this is set to `['webp']`. - -##### `fallbackFormat` - -Format to use as a fallback value for the `` tag. Defaults to `.png` for static images, `.gif` for animated images, and `.svg` for SVG files. - -##### `pictureAttributes` - -An object of attributes to be added to the `` tag. Use this property to apply attributes to the outer `` element itself. Attributes applied to the `` component directly will apply to the inner `` element, except for those used for image transformation. - - -### `` - -A generic component used to render the content of a [content collection entry](/en/guides/content-collections/#what-are-content-collections). - -First, query one or more entries using `getCollection()` or `getEntry()`. Then, the `entry.render()` function can return the `` component for use in a `.astro` file template. - -```astro title="src/pages/render-example.astro" {4, 7} ---- -import { getEntry } from 'astro:content'; -const entry = await getEntry('blog', 'post-1'); -const { Content } = await entry.render(); ---- -

Published on: {entry.data.published.toDateString()}

- -``` - -### `` - -

- -Opt in to using view transitions on individual pages by importing and adding the `` routing component to `` on every desired page. - -```astro title="src/pages/index.astro" ins={2,7} ---- -import { ViewTransitions } from 'astro:transitions'; ---- - - - My Homepage - - - -

Welcome to my website!

- - -``` - -See more about how to [control the router](/en/guides/view-transitions/#router-control) and [add transition directives](/en/guides/view-transitions/#transition-directives) to page elements and components. - -### `` - -```astro ---- -import { Debug } from 'astro:components'; -const serverObject = { - a: 0, - b: "string", - c: { - nested: "object" - } -} ---- - -``` - -This component provides a way to inspect values on the client-side, without any JavaScript. - - [canonical]: https://en.wikipedia.org/wiki/Canonical_link_element diff --git a/src/content/docs/en/reference/components-reference.mdx b/src/content/docs/en/reference/components-reference.mdx new file mode 100644 index 0000000000000..20fae00a095f9 --- /dev/null +++ b/src/content/docs/en/reference/components-reference.mdx @@ -0,0 +1,265 @@ +--- +title: Built-in Components Reference +i18nReady: true +tableOfContents: + minHeadingLevel: 2 + maxHeadingLevel: 2 +--- +import Since from '~/components/Since.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import ReadMore from '~/components/ReadMore.astro'; + +Astro includes several built-in components for you to use in your projects. All built-in components are available in `.astro` files and may require an import statement. + +You can reference the `Props` of these components using the [`ComponentProps` type](/en/guides/typescript/#componentprops-type) utility. + +## `` + +```astro 'theme="dark-plus"' /wrap\b/ /(inline) \/>/ 'defaultColor={false}' +--- +import { Code } from 'astro:components'; +--- + + + + + + + +

+ + will be rendered inline. +

+ + +``` + +This component provides syntax highlighting for code blocks at build time (no client-side JavaScript included). The component is powered internally by Shiki and it supports all popular [themes](https://shiki.style/themes) and [languages](https://shiki.style/languages). Plus, you can add your custom themes, languages, [transformers](#transformers), and [default colors](https://shiki.style/guide/dual-themes#without-default-color) by passing them to the `theme`, `lang`, `transformers`, and `defaultColor` attributes respectively. + +:::note +This component **does not** inherit the settings from your [Shiki configuration](/en/guides/markdown-content/#shiki-configuration). You will have to set them using the component props. +::: + +### Transformers + +

+ +[Shiki transformers](https://shiki.style/packages/transformers#shikijs-transformers) can optionally be applied to code by passing them in through the `transformers` property as an array. Since Astro v4.14.0, you can also provide a string for [Shiki's `meta` attribute](https://shiki.style/guide/transformers#meta) to pass options to transformers. + +Note that `transformers` only applies classes and you must provide your own CSS rules to target the elements of your code block. + +```astro title="src/pages/index.astro" {12-13} +--- +import { transformerNotationFocus, transformerMetaHighlight } from '@shikijs/transformers' +import { Code } from 'astro:components' +const code = `const foo = 'hello' +const bar = ' world' +console.log(foo + bar) // [!code focus] +` +--- + + + +``` + +## `` + +A component used with [`set:*` directives](/en/reference/directives-reference/#sethtml) to render HTML content without any additional wrapping elements: + +```astro title="src/components/SetHtml.astro" "Fragment" +--- +const htmlString = '

Raw HTML content

'; +--- + +``` + +See more about [using fragments](/en/basics/astro-syntax/#fragments) in Astro syntax. + +## `` + +To use the `Prism` highlighter component, first **install** the `@astrojs/prism` package: + + + + ```shell + npm install @astrojs/prism + ``` + + + ```shell + pnpm add @astrojs/prism + ``` + + + ```shell + yarn add @astrojs/prism + ``` + + + +```astro +--- +import { Prism } from '@astrojs/prism'; +--- + +``` + +This component provides language-specific syntax highlighting for code blocks by applying Prism's CSS classes. Note that **you need to provide a Prism CSS stylesheet** (or bring your own) for syntax highlighting to appear! See the [Prism configuration section](/en/guides/markdown-content/#prism-configuration) for more details. + +See the [list of languages supported by Prism](https://prismjs.com/#supported-languages) where you can find a language’s corresponding alias. And, you can also display your Astro code blocks with `lang="astro"`! + +## `` + +```astro title="src/components/MyComponent.astro" +--- +// import the Image component and the image +import { Image } from 'astro:assets'; +import myImage from "../assets/my_image.png"; // Image is 1600x900 +--- + + +A description of my image. +``` + +```html + + +A description of my image. +``` +### Properties + +- src (required) +- alt (required) +- width and height (required for `public/` and remote images) +- format +- quality +- densities +- widths + +In addition to the properties above, the `` component accepts all properties accepted by the HTML `` tag. + +See more in the [Images Guide](/en/guides/images/#image--astroassets). + +## `` + +

+ +Use the built-in `` Astro component to display a responsive image with multiple formats and/or sizes. + +```astro title="src/pages/index.astro" +--- +import { Picture } from 'astro:assets'; +import myImage from "../assets/my_image.png"; // Image is 1600x900 +--- + + + +``` + +```html + + + + + A description of my image. + +``` + +See more in the [Images Guide](/en/guides/images/#picture-). + +### Properties + +`` accepts all the properties of the `` component, plus the following: + +#### `formats` + +An array of image formats to use for the `` tags. By default, this is set to `['webp']`. + +#### `fallbackFormat` + +Format to use as a fallback value for the `` tag. Defaults to `.png` for static images, `.gif` for animated images, and `.svg` for SVG files. + +#### `pictureAttributes` + +An object of attributes to be added to the `` tag. Use this property to apply attributes to the outer `` element itself. Attributes applied to the `` component directly will apply to the inner `` element, except for those used for image transformation. + + +## `` + +A generic component used to render the content of a [content collection entry](/en/guides/content-collections/#what-are-content-collections). + +First, query one or more entries using `getCollection()` or `getEntry()`. Then, the `entry.render()` function can return the `` component for use in a `.astro` file template. + +```astro title="src/pages/render-example.astro" {4, 7} +--- +import { getEntry } from 'astro:content'; +const entry = await getEntry('blog', 'post-1'); +const { Content } = await entry.render(); +--- +

Published on: {entry.data.published.toDateString()}

+ +``` + +## `` + +

+ +Opt in to using view transitions on individual pages by importing and adding the `` routing component to `` on every desired page. + +```astro title="src/pages/index.astro" ins={2,7} +--- +import { ViewTransitions } from 'astro:transitions'; +--- + + + My Homepage + + + +

Welcome to my website!

+ + +``` + +See more about how to [control the router](/en/guides/view-transitions/#router-control) and [add transition directives](/en/guides/view-transitions/#transition-directives) to page elements and components. + +## `` + +```astro +--- +import { Debug } from 'astro:components'; +const serverObject = { + a: 0, + b: "string", + c: { + nested: "object" + } +} +--- + +``` + +This component provides a way to inspect values on the client-side, without any JavaScript. diff --git a/src/content/docs/es/basics/astro-components.mdx b/src/content/docs/es/basics/astro-components.mdx index 01a637ec43944..2b97a64486da0 100644 --- a/src/content/docs/es/basics/astro-components.mdx +++ b/src/content/docs/es/basics/astro-components.mdx @@ -249,7 +249,7 @@ import Wrapper from '../components/Wrapper.astro'; Utiliza un atributo `slot="mi-slot"` en el elemento hijo que quieras enviar junto con su `` emparejado en tu componente. ::: -Para pasar múltiples elementos HTML dentro del placeholder `` de un componente sin un `
` envolvente, usa el atributo `slot=""` en el [componente `` de Astro](/es/reference/api-reference/#fragment-): +Para pasar múltiples elementos HTML dentro del placeholder `` de un componente sin un `
` envolvente, usa el atributo `slot=""` en el [componente `` de Astro](/es/reference/components-reference/#fragment-): ```astro title="src/components/CustomTable.astro" "" "" --- diff --git a/src/content/docs/es/guides/markdown-content.mdx b/src/content/docs/es/guides/markdown-content.mdx index e3a8ebae05325..9d4f0892d4038 100644 --- a/src/content/docs/es/guides/markdown-content.mdx +++ b/src/content/docs/es/guides/markdown-content.mdx @@ -568,8 +568,8 @@ export default defineConfig({ Astro viene con soporte integrado para [Shiki](https://shiki.style/) y [Prism](https://prismjs.com/). Esto proporciona un resaltado de sintaxis instantáneo para: - todas las vallas de código (\`\`\`) usadas en Markdown o archivos MDX. -- el contenido dentro del [componente incorporado ``](/es/reference/api-reference/#code-) (con la tecnología de Shiki) -- el contenido dentro del [componente ``](/es/reference/api-reference/#prism-) (con la tecnología de Prism). +- el contenido dentro del [componente incorporado ``](/es/reference/components-reference/#code-) (con la tecnología de Shiki) +- el contenido dentro del [componente ``](/es/reference/components-reference/#prism-) (con la tecnología de Prism). Shiki está habilitado de forma predeterminada, preconfigurado con el tema `github-dark`. La salida compilada se limitará a estilos en línea sin clases CSS externas, hojas de estilo o JS del lado del cliente. diff --git a/src/content/docs/es/guides/troubleshooting.mdx b/src/content/docs/es/guides/troubleshooting.mdx index 0a5b790e6a120..28d49b05eb12e 100644 --- a/src/content/docs/es/guides/troubleshooting.mdx +++ b/src/content/docs/es/guides/troubleshooting.mdx @@ -33,7 +33,7 @@ Esto puede ser útil para depurar las diferencias entre la salida del SSR y los ### Componente `` de Astro -Para ayudarte a depurar tus componentes de Astro, Astro proporciona un componente incorporado [``](/es/reference/api-reference/#debug-) que renderiza cualquier valor directamente en la plantilla HTML de tu componente. Esto es útil para depuración rápida en el navegador sin tener que alternar entre tu terminal y tu navegador. +Para ayudarte a depurar tus componentes de Astro, Astro proporciona un componente incorporado [``](/es/reference/components-reference/#debug-) que renderiza cualquier valor directamente en la plantilla HTML de tu componente. Esto es útil para depuración rápida en el navegador sin tener que alternar entre tu terminal y tu navegador. ```astro {2,7} --- diff --git a/src/content/docs/fr/guides/markdown-content.mdx b/src/content/docs/fr/guides/markdown-content.mdx index e6cfea1269415..a63248ee8b4fb 100644 --- a/src/content/docs/fr/guides/markdown-content.mdx +++ b/src/content/docs/fr/guides/markdown-content.mdx @@ -323,8 +323,8 @@ export default defineConfig({ Astro est livré avec un support intégré pour [Shiki](https://shiki.style/) et [Prism](https://prismjs.com/). Cela permet de mettre en évidence la syntaxe pour : - tous les blocs de code (\`\`\`) utilisés dans un fichier Markdown ou MDX. -- dans le [composant `` intégré](/fr/reference/api-reference/#code-) (alimenté par Shiki). -- dans le composant [``](/fr/reference/api-reference/#prism-) (alimenté par Prism). +- dans le [composant `` intégré](/fr/reference/components-reference/#code-) (alimenté par Shiki). +- dans le composant [``](/fr/reference/components-reference/#prism-) (alimenté par Prism). Shiki est activé par défaut, préconfiguré avec le thème `github-dark`. La sortie compilée sera limitée à des `styles` intégrés au HTML sans classes CSS, feuilles de style ou JS côté client supplémentaires. diff --git a/src/content/docs/fr/guides/troubleshooting.mdx b/src/content/docs/fr/guides/troubleshooting.mdx index 9c2ac8afa5ca2..519e02f3469c0 100644 --- a/src/content/docs/fr/guides/troubleshooting.mdx +++ b/src/content/docs/fr/guides/troubleshooting.mdx @@ -34,7 +34,7 @@ Cela peut être utile pour déboguer les différences entre la sortie SSR et les ### Le composant `` d'Astro -Pour vous aider à déboguer vos composants Astro, Astro propose un composant [``](/fr/reference/api-reference/#debug-) qui affiche directement une valeur dans votre template HTML de composant. Cela est utile pour un débogage rapide dans le navigateur sans avoir à faire des allers-retours entre votre terminal et votre navigateur. +Pour vous aider à déboguer vos composants Astro, Astro propose un composant [``](/fr/reference/components-reference/#debug-) qui affiche directement une valeur dans votre template HTML de composant. Cela est utile pour un débogage rapide dans le navigateur sans avoir à faire des allers-retours entre votre terminal et votre navigateur. ```astro {2,7} --- diff --git a/src/content/docs/fr/guides/upgrade-to/v1.mdx b/src/content/docs/fr/guides/upgrade-to/v1.mdx index 78ef920f3860f..40c166682ccc3 100644 --- a/src/content/docs/fr/guides/upgrade-to/v1.mdx +++ b/src/content/docs/fr/guides/upgrade-to/v1.mdx @@ -343,7 +343,7 @@ import { Prism } from '@astrojs/prism'; --- ``` -Étant donné que le paquet `@astrojs/prism` est toujours fourni avec le noyau `astro`, vous n'aurez pas besoin d'installer quoi que ce soit de nouveau, ni d'ajouter Prism en tant qu'intégration ! Cependant, notez que nous _prévoyons_ d'extraire `@astrojs/prism` (et la coloration syntaxique de Prism en général) dans un paquet distinct et installable à l'avenir. Consultez [la référence de l'API du composant ``](/fr/reference/api-reference/#prism-) pour en savoir plus. +Étant donné que le paquet `@astrojs/prism` est toujours fourni avec le noyau `astro`, vous n'aurez pas besoin d'installer quoi que ce soit de nouveau, ni d'ajouter Prism en tant qu'intégration ! Cependant, notez que nous _prévoyons_ d'extraire `@astrojs/prism` (et la coloration syntaxique de Prism en général) dans un paquet distinct et installable à l'avenir. Consultez [la référence de l'API du composant ``](/fr/reference/components-reference/#prism-) pour en savoir plus. ### Mise à niveau de l'analyseur CSS diff --git a/src/content/docs/hi/basics/astro-components.mdx b/src/content/docs/hi/basics/astro-components.mdx index 6ee91b4034971..8dee11b31083f 100644 --- a/src/content/docs/hi/basics/astro-components.mdx +++ b/src/content/docs/hi/basics/astro-components.mdx @@ -252,7 +252,7 @@ Use a `slot="my-slot"` attribute on the child element that you want to pass thro उस चाइल्ड तत्व पर `slot="my-slot"` विशेषता का उपयोग करें जिसे आप अपने अवयव में मिलान वाले `` प्लेसहोल्डर तक पहुंचाना चाहते हैं। ::: -एक अवयव के `` प्लेसहोल्डर में `
` लपेटे बगैर एकाधिक HTML तत्वों को पास करने के लिए, [Astro के `` अवयव](/hi/reference/api-reference/#fragment-) पर `slot=""` विशेषता का उपयोग करें: +एक अवयव के `` प्लेसहोल्डर में `
` लपेटे बगैर एकाधिक HTML तत्वों को पास करने के लिए, [Astro के `` अवयव](/hi/reference/components-reference/#fragment-) पर `slot=""` विशेषता का उपयोग करें: ```astro title="src/components/CustomTable.astro" "" "" --- diff --git a/src/content/docs/it/basics/astro-components.mdx b/src/content/docs/it/basics/astro-components.mdx index 60589d38b79c4..44138fd369e44 100644 --- a/src/content/docs/it/basics/astro-components.mdx +++ b/src/content/docs/it/basics/astro-components.mdx @@ -252,7 +252,7 @@ import Wrapper from '../components/Wrapper.astro'; Utilizza un attributo `slot="my-slot"` sull'elemento figlio che desideri passare a un segnaposto `` corrispondente nel tuo componente. ::: -Per inserire elementi HTML dentro il placeholder `` di un componente senza inserirlo dentro ad un `
`, una l'attributo `slot=""` nel [componente Astro ``](/it/reference/api-reference/#fragment-): +Per inserire elementi HTML dentro il placeholder `` di un componente senza inserirlo dentro ad un `
`, una l'attributo `slot=""` nel [componente Astro ``](/it/reference/components-reference/#fragment-): ```astro title="src/components/CustomTable.astro" "" "" --- diff --git a/src/content/docs/ja/basics/astro-components.mdx b/src/content/docs/ja/basics/astro-components.mdx index e5481c128b47e..3a5378dd03b70 100644 --- a/src/content/docs/ja/basics/astro-components.mdx +++ b/src/content/docs/ja/basics/astro-components.mdx @@ -248,7 +248,7 @@ import Wrapper from '../components/Wrapper.astro'; 子要素の `slot="my-slot"` 属性を使用して、コンポーネント内の `` にマッチするプレースホルダに渡します。 ::: -`
`でラップせずに複数のHTML要素をコンポーネントの``プレースホルダーに渡すには、[Astroの``コンポーネント](/ja/reference/api-reference/#fragment-)の`slot=""`属性を使用します。 +`
`でラップせずに複数のHTML要素をコンポーネントの``プレースホルダーに渡すには、[Astroの``コンポーネント](/ja/reference/components-reference/#fragment-)の`slot=""`属性を使用します。 ```astro title="src/components/CustomTable.astro" "" "" --- diff --git a/src/content/docs/ja/guides/markdown-content.mdx b/src/content/docs/ja/guides/markdown-content.mdx index 80b57f9bbe438..e97c86ef76fb6 100644 --- a/src/content/docs/ja/guides/markdown-content.mdx +++ b/src/content/docs/ja/guides/markdown-content.mdx @@ -567,8 +567,8 @@ export default defineConfig({ Astroは、[Shiki](https://shiki.matsu.io/)と[Prism](https://prismjs.com/)をビルトインでサポートしています。これは、次のようなシンタックスハイライトを提供します。 - MarkdownまたはMDXファイルで使用されているすべてのコードフェンス(```)。 -- [組み込みの``コンポーネント](/ja/reference/api-reference/#code-)内のコンテンツ (Shikiを使用）。 -- [``コンポーネント](/ja/reference/api-reference/#prism-)内のコンテンツ (Prismを使用）。 +- [組み込みの``コンポーネント](/ja/reference/components-reference/#code-)内のコンテンツ (Shikiを使用）。 +- [``コンポーネント](/ja/reference/components-reference/#prism-)内のコンテンツ (Prismを使用）。 Shikiはデフォルトで有効になっており、`github-dark`テーマであらかじめ設定されています。コンパイルされた出力は、余計なCSSクラス、スタイルシート、クライアントサイドJSのないインライン`style`に限定されます。 diff --git a/src/content/docs/ja/guides/troubleshooting.mdx b/src/content/docs/ja/guides/troubleshooting.mdx index 6ab51c2ebfbba..349647c337474 100644 --- a/src/content/docs/ja/guides/troubleshooting.mdx +++ b/src/content/docs/ja/guides/troubleshooting.mdx @@ -156,7 +156,7 @@ Astroの`