[i18nIgnore] [reference] new components page

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 `<Markdown />`-Komponente](#markdown-komponente).
-- Inhalte innerhalb der [eingebauten `<Code />`-Komponente](/de/reference/api-reference/#code-) (basierend auf Shiki) oder der [`<Prism />`-Komponente](/de/reference/api-reference/#prism-) (basierend auf Prism).
+- Inhalte innerhalb der [eingebauten `<Code />`-Komponente](/de/reference/components-reference/#code-) (basierend auf Shiki) oder der [`<Prism />`-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.
 

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 `<Debug />` Komponente
 
-Um dir das Debuggen deiner Astro-Komponenten zu erleichtern, bietet Astro eine eingebaute [`<Debug />`](/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 [`<Debug />`](/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}
 ---

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 `<slot name="my-slot" />` placeholder in your component.
 :::
 
-To pass multiple HTML elements into a component's `<slot/>` placeholder without a wrapping `<div>`, use the `slot=""` attribute on [Astro's `<Fragment/>` component](/en/reference/api-reference/#fragment-):
+To pass multiple HTML elements into a component's `<slot/>` placeholder without a wrapping `<div>`, use the `slot=""` attribute on [Astro's `<Fragment/>` component](/en/reference/components-reference/#fragment-):
 
 ```astro title="src/components/CustomTable.astro" "<slot name="header"/>" "<slot name="body"/>"
 ---

src/content/docs/en/guides/markdown-content.mdx

@@ -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 `<Code />` component](/en/reference/api-reference/#code-) (powered by Shiki).
-- content within the [`<Prism />` component](/en/reference/api-reference/#prism-) (powered by Prism).
+- content within the [built-in `<Code />` component](/en/reference/components-reference/#code-) (powered by Shiki).
+- content within the [`<Prism />` 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.
 

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 `<Debug />` component
 
-To help you debug your Astro components, Astro provides a built-in [`<Debug />`](/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 [`<Debug />`](/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}
 ---

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 `<Prism />` 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 `<Prism />` component API reference](/en/reference/components-reference/#prism-) for more.
 
 ### CSS Parser Upgrade
 

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 `<Image />` 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.
-
-### `<Code />`
-
-```astro 'theme="dark-plus"' /wrap\b/ /(inline) \/>/
----
-import { Code } from 'astro:components';
----
-<!-- Syntax highlight some JavaScript code. -->
-<Code code={`const foo = 'bar';`} lang="js" />
-<!-- Optional: Customize your theme. -->
-<Code code={`const foo = 'bar';`} lang="js" theme="dark-plus" />
-<!-- Optional: Enable word wrapping. -->
-<Code code={`const foo = 'bar';`} lang="js" wrap />
-<!-- Optional: Output inline code. -->
-<p>
-  <Code code={`const foo = 'bar';`} lang="js" inline />
-  will be rendered inline.
-</p>
-<!-- Optional: defaultColor -->
-<Code code={`const foo = 'bar';`} lang="js" defaultColor={false} />
-```
-
-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
-
-<p><Since v="4.11.0" /></p>
-
-[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]
-`
----
-<Code
-  code={code}
-  lang="js"
-  transformers={[transformerMetaHighlight()]}
-  meta="{1,3}" />
-
-  <style is:global>
-    pre.has-focused .line:not(.focused) {
-      filter: blur(1px);
-    }
-  </style>
-```
-
-### `<Fragment />`
-
-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 = '<p>Raw HTML content</p>';
----
-<Fragment set:html={htmlString} />
-```
-
-See more about [using fragments](/en/basics/astro-syntax/#fragments) in Astro syntax.
-
-### `<Prism />`
-
-To use the `Prism` highlighter component, first **install** the `@astrojs/prism` package:
-
-<PackageManagerTabs>
-  <Fragment slot="npm">
-  ```shell
-  npm install @astrojs/prism
-  ```
-  </Fragment>
-  <Fragment slot="pnpm">
-  ```shell
-  pnpm add @astrojs/prism
-  ```
-  </Fragment>
-  <Fragment slot="yarn">
-  ```shell
-  yarn add @astrojs/prism
-  ```
-  </Fragment>
-</PackageManagerTabs>
-
-```astro
----
-import { Prism } from '@astrojs/prism';
----
-<Prism lang="js" code={`const foo = 'bar';`} />
-```
-
-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"`!
-
-### `<Image />`
-
-```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
----
-
-<!-- `alt` is mandatory on the Image component -->
-<Image src={myImage} alt="A description of my image." />
-```
-
-```html
-<!-- Output -->
-<!-- Image is optimized, proper attributes are enforced -->
-<img
-  src="/_astro/my_image.hash.webp"
-  width="1600"
-  height="900"
-  decoding="async"
-  loading="lazy"
-  alt="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 `<Image />` component accepts all properties accepted by the HTML `<img>` tag.
-
-See more in the [Images Guide](/en/guides/images/#image--astroassets).
-
-### `<Picture />`
-
-<p><Since v="3.3.0" /></p>
-
-Use the built-in `<Picture />` 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
----
-
-<!-- `alt` is mandatory on the Picture component -->
-<Picture src={myImage} formats={['avif', 'webp']} alt="A description of my image." />
-```
-
-```html
-<!-- Output -->
-<picture>
-  <source srcset="/_astro/my_image.hash.avif" type="image/avif" />
-  <source srcset="/_astro/my_image.hash.webp" type="image/webp" />
-  <img
-    src="/_astro/my_image.hash.png"
-    width="1600"
-    height="900"
-    decoding="async"
-    loading="lazy"
-    alt="A description of my image."
-  />
-</picture>
-```
-
-See more in the [Images Guide](/en/guides/images/#picture-).
-
-#### Properties
-
-`<Picture />` accepts all the properties of the `<Image />` component, plus the following:
-
-##### `formats`
-
-An array of image formats to use for the `<source>` tags. By default, this is set to `['webp']`.
-
-##### `fallbackFormat`
-
-Format to use as a fallback value for the `<img>` 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 `<picture>` tag. Use this property to apply attributes to the outer `<picture>` element itself. Attributes applied to the `<Picture />` component directly will apply to the inner `<img>` element, except for those used for image transformation.
-
-
-### `<Content />`
-
-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 `<Content />` 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();
----
-<p>Published on: {entry.data.published.toDateString()}</p>
-<Content />
-```
-
-### `<ViewTransitions />`
-
-<p><Since v="2.9.0" /></p>
-
-Opt in to using view transitions on individual pages by importing and adding the `<ViewTransitions />` routing component to `<head>` on every desired page.
-
-```astro title="src/pages/index.astro" ins={2,7}
----
-import { ViewTransitions } from 'astro:transitions';
----
-<html lang="en">
-  <head>
-    <title>My Homepage</title>
-    <ViewTransitions />
-  </head>
-  <body>
-    <h1>Welcome to my website!</h1>
-  </body>
-</html>
-```
-
-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.
-
-### `<Debug />`
-
-```astro
----
-import { Debug } from 'astro:components';
-const serverObject = {
-  a: 0,
-  b: "string",
-  c: {
-    nested: "object"
-  }
-}
----
-<Debug {serverObject} />
-```
-
-This component provides a way to inspect values on the client-side, without any JavaScript.
-
-
 [canonical]: https://en.wikipedia.org/wiki/Canonical_link_element