Merge branch 'main' into gui-dep-goo-clo

src/components/starlight/Sidebar.astro

@@ -45,7 +45,8 @@ function assertGroups(sidebar: SidebarEntry[]): asserts sidebar is Group[] {
 assertGroups(sidebar);
 
 /** Convert a group label to an `id` we can use to identify tab panels. */
-const makeId = (label: string) => label.toLowerCase().replaceAll(/\s+/g, '-');
+// The id is prefixed to avoid clashing with existing heading IDs on the page.
+const makeId = (label: string) => '__tab-' + label.toLowerCase().replaceAll(/\s+/g, '-');
 
 /** Get the icon for a group. Update the icon names in the array to change the icons associated with a group. */
 const getIcon = (index: number) =>

src/content/docs/de/basics/project-structure.mdx

@@ -1,6 +1,6 @@
 ---
 title: Projektstruktur
-description: Erfahre, wie du ein Projekt mit Astro strukturierst.
+description: Eine Einführung in die grundlegende Dateistruktur eines Astro-Projekts.
 i18nReady: true
 ---
 
@@ -14,7 +14,7 @@ Hier erfährst du, wie ein Astro-Projekt grundsätzlich organisiert ist, und wel
 
 Astro nutzt einige fest vorgegebene Verzeichnisse, um dein Projekt zu strukturieren. Das Stammverzeichnis jedes Astro-Projekts sollte die folgenden Verzeichnisse und Dateien enthalten:
 
-- `src/*` - Der Quellcode deines Projekts (Komponenten, Seiten, Stile, usw.)
+- `src/*` - Der Quellcode deines Projekts (Komponenten, Seiten, Stile, Bilder, usw.)
 - `public/*` - Nicht zu verarbeitende Inhalte, die kein Quellcode sind (Schriftarten, Symbole usw.)
 - `package.json` - Die Projektdatei deines Paketmanagers
 - `astro.config.mjs` - Eine Astro-Konfigurationsdatei (wird empfohlen)
@@ -28,17 +28,19 @@ Ein typischer Astro-Verzeichnisbaum könnte so aussehen:
 - public/
   - robots.txt
   - favicon.svg
-  - social-image.png
+  - mein-lebenslauf.pdf
 - src/
+  - blog/
+    - post1.md
+    - post2.md
+    - post3.md
   - components/
     - Header.astro
     - Button.jsx
-  - content/
-      - config.ts
-      - posts/
-        - post1.md
-        - post2.md
-        - post3.md
+  - images/
+    - image1.jpg
+    - image2.jpg
+    - image3.jpg
   - layouts/
     - PostLayout.astro
   - pages/
@@ -49,6 +51,7 @@ Ein typischer Astro-Verzeichnisbaum könnte so aussehen:
     - rss.xml.js
   - styles/
     - global.css
+  - content.config.ts
 - astro.config.mjs
 - package.json
 - tsconfig.json
@@ -64,13 +67,14 @@ Im `src/`-Verzeichnis befindet sich der Großteil deines Projektquellcodes. Dies
 - [UI-Framework-Komponenten (React usw.)](/de/guides/framework-components/)
 - [Stile (CSS, Sass)](/de/guides/styling/)
 - [Markdown](/de/guides/markdown-content/)
+- [Bilder, die von Astro optimiert und bearbeitet werden](/de/guides/images/)
 
 Astro verarbeitet, optimiert und bündelt deine Dateien in `src/`, um die endgültige Website zu erstellen, die an den Browser gesendet wird. Im Gegensatz zum statischen `public/`-Verzeichnis werden deine `src/`-Dateien von Astro für dich verarbeitet und optimiert:
 
 Einige Dateien (z.B. Astro-Komponenten) werden gar nicht so an den Browser gesendet, wie du sie geschrieben hast, sondern stattdessen in statisches HTML gerendert. Andere Dateien (z.B. CSS) werden zwar an den Browser gesendet, können aber zur Leistungsverbesserung vorher optimiert oder mit anderen CSS-Dateien gebündelt werden.
 
 :::tip
-Dieser Leitfaden beschreibt zwar einige gängige Konventionen, die in der Astro-Community verwendet werden, aber die einzigen Verzeichnisse, die von Astro reserviert sind, sind `src/pages/` und `src/content/`. Es steht dir frei, alle anderen Verzeichnisse so umzubenennen und umzugestalten, wie es für dich am besten ist.
+Dieser Leitfaden beschreibt zwar einige gängige Konventionen, die in der Astro-Community verwendet werden, aber das einzigen Verzeichnis, welches von Astro reserviert ist, ist `src/pages/`. Es steht dir frei, alle anderen Verzeichnisse so umzubenennen und umzugestalten, wie es für dich am besten ist.
 :::
 
 ### `src/pages`
@@ -87,10 +91,6 @@ Seitenrouten werden für deine Website erstellt, indem du [unterstützte Dateity
 
 Diese Vorgehensweise ist in Astro-Projekten üblich, aber nicht zwingend erforderlich. Du kannst deine Komponenten gerne auch anders organisieren!
 
-### `src/content`
-
-Das Verzeichnis `src/content/` ist für die Speicherung von [Inhaltssammlungen](/de/guides/content-collections/) und einer Konfigurationsdatei reserviert. Andere Dateien sind in diesem Verzeichnis nicht erlaubt.
-
 ### `src/layouts`
 
 [Layouts](/de/basics/layouts/) sind Astro-Komponenten, welche die UI-Struktur definieren, die von einer oder mehreren [Seiten](/de/basics/astro-pages/) gemeinsam genutzt wird.
@@ -105,7 +105,7 @@ Es ist eine übliche Vorgehensweise, deine CSS- oder Sass-Stile im Verzeichnis `
 
 Das Verzeichnis `public/` ist für Dateien und Inhalte vorgesehen, die Astro während des Buildvorgangs nicht verarbeiten muss. Die Dateien in diesem Ordner werden unverändert in den Build-Ordner kopiert, und dann wird deine Website gebaut.
 
-Dieses Verhalten macht `public/` ideal für verbreitete Inhalte wie Bilder und Schriftarten, sowie für besondere Dateien wie `robots.txt` und `manifest.webmanifest`.
+Dieses Verhalten macht `public/` ideal für allgemeine Inhalte, die keine Bearbeitung benötigen, wie z.B. einige Bilder und Schriftarten oder spezielle Dateien wie `robots.txt` und `manifest.webmanifest`.
 
 Du kannst zwar auch CSS- und JavaScript-Dateien in `public/` speichern, beachte aber bitte, dass diese dann während des Buildvorgangs weder gebündelt noch optimiert werden.
 
@@ -115,7 +115,7 @@ Als allgemeine Regel kann man sagen, dass jeglicher CSS- oder JavaScript-Code, d
 
 ### `package.json`
 
-Diese Datei wird von JavaScript-Paketmanagern verwendet, um die erforderlichen Pakete ("Abhängigkeiten") eines Projekts zu verwalten. Sie definiert auch die Skripte, die üblicherweise dazu verwendet werden, um Astro auszuführen (z.B. `npm start`, `npm run build`).
+Diese Datei wird von JavaScript-Paketmanagern verwendet, um die erforderlichen Pakete ("Abhängigkeiten") eines Projekts zu verwalten. Sie definiert auch die Skripte, die üblicherweise dazu verwendet werden, um Astro auszuführen (z.B. `npm run dev`, `npm run build`).
 
 Es gibt [zwei Arten von Abhängigkeiten](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file), die du in deiner `package.json`-Datei festlegen kannst: `dependencies` und `devDependencies`. In den meisten Fällen funktionieren sie auf die gleiche Weise: Astro benötigt zum Erzeugungszeitpunkt alle Abhängigkeiten, und auch dein Paketmanager wird beide Arten installieren. Wir empfehlen dir, all deine Abhängigkeiten zunächst in `dependencies` einzutragen, und `devDependencies` nur zu verwenden, wenn dein spezieller Anwendungsfall es erfordert.
 
@@ -129,7 +129,7 @@ Astro unterstützt mehrere Dateiformate für seine JavaScript-Konfigurationsdate
 
 Das Laden von TypeScript-Konfigurationsdateien wird mit [`tsm`](https://github.com/lukeed/tsm) gehandhabt und berücksichtigt die `tsconfig`-Optionen deines Projekts.
 
-In der [Astro-Konfigurationsanleitung](/de/reference/configuration-reference/) findest du weitere Informationen zum Einstellen der Konfigurationen.
+In der [Konfigurationsreferenz](/de/reference/configuration-reference/) findest du alle Einzelheiten.
 
 ### `tsconfig.json`
 

src/content/docs/en/guides/cms/cloudcannon.mdx

@@ -12,10 +12,12 @@ i18nReady: true
 import Grid from '~/components/FluidGrid.astro'
 import Card from '~/components/ShowcaseCard.astro'
 
-[CloudCannon](https://cloudcannon.com) is a Git-based content management system that provides a visual editor for your content.
+[CloudCannon](https://cloudcannon.com) is a Git-based headless content management system that provides a visual editor for your content.
 
 ## Official Resources
 
+- [Astro Starter Template](https://cloudcannon.com/templates/astro-starter/)
+- [Astro Multilingual Starter Template](https://cloudcannon.com/templates/astro-multilingual-starter/)
 - [Astro Starter Guide](https://cloudcannon.com/documentation/guides/astro-starter-guide/)
 - [Bookshop & Astro Guide](https://cloudcannon.com/documentation/guides/bookshop-astro-guide/)
 - [Astro Beginner Tutorial Series](https://cloudcannon.com/tutorials/astro-beginners-tutorial-series/)
@@ -30,4 +32,4 @@ import Card from '~/components/ShowcaseCard.astro'
 
 <Grid>
     <Card title="Sendit" href="https://astro.build/themes/details/sendit/" thumbnail="sendit.png"/>
-</Grid>
+</Grid>

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

@@ -165,7 +165,7 @@ The `parser` argument also allows you to load a single collection from a nested
 {"dogs": [{}], "cats": [{}]}
 ```
 
-You can seperate these collections by passing a custom `parser` to the `file()` loader for each collection:
+You can separate these collections by passing a custom `parser` to the `file()` loader for each collection:
 
 ```typescript title="src/content.config.ts"
 const dogs = defineCollection({

src/content/docs/en/guides/deploy/google-cloud.mdx

@@ -65,7 +65,7 @@ docker push HOSTNAME/PROJECT-ID/IMAGE:TAG
 Change the following values in the commands above to match your project:
 
 - `SOURCE_IMAGE`: the local image name or image ID.
-- `HOSTNAME`: the registry host (`gcr.io`, `eu.gcr.io`, `asia.gcr.io`, `us.gcr.io`).
+- `HOSTNAME`: the registry host (`gcr.io`, `eu.gcr.io`, `asia.gcr.io`, `us.gcr.io`, `docker.io`).
 - `PROJECT`: your Google Cloud project ID.
 - `TARGET-IMAGE`: the name for the image when it's stored in the registry.
 - `TAG` is the version associated with the image.

src/content/docs/en/guides/deploy/vercel.mdx

@@ -6,6 +6,7 @@ sidebar:
 type: deploy
 i18nReady: true
 ---
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 import ReadMore from '~/components/ReadMore.astro';
 import { Steps } from '@astrojs/starlight/components';
 
@@ -27,18 +28,46 @@ To enable SSR in your Astro project and deploy on Vercel:
 
 Add [the Vercel adapter](/en/guides/integrations-guide/vercel/) to enable SSR in your Astro project with the following `astro add` command. This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step.
 
-```bash
-npx astro add vercel
-```
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```shell
+  npx astro add vercel
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```shell
+  pnpm astro add vercel
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```shell
+  yarn astro add vercel
+  ```
+  </Fragment>
+</PackageManagerTabs>
 
 If you prefer to install the adapter manually instead, complete the following two steps:
 
 <Steps>
-1. Install [the `@astrojs/vercel` adapter](/en/guides/integrations-guide/vercel/) to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:
+1. Install [the `@astrojs/vercel` adapter](/en/guides/integrations-guide/vercel/) to your project’s dependencies using your preferred package manager.
 
-    ```bash
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
       npm install @astrojs/vercel
-    ```
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm add @astrojs/vercel
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn add @astrojs/vercel
+      ```
+      </Fragment>
+    </PackageManagerTabs>
 
 1. Add two new lines to your `astro.config.mjs` project configuration file.
 
@@ -78,10 +107,26 @@ After your project has been imported and deployed, all subsequent pushes to bran
 <Steps>
 1. Install the [Vercel CLI](https://vercel.com/cli) and run `vercel` to deploy.
 
-    ```bash
-    npm install -g vercel
-    vercel
-    ```
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      npm install -g vercel
+      vercel
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm add -g vercel
+      vercel
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn global add vercel
+      vercel
+      ```
+      </Fragment>
+    </PackageManagerTabs>
 
 2. Vercel will automatically detect Astro and configure the right settings.
 

src/content/docs/en/guides/integrations-guide/mdx.mdx

@@ -96,7 +96,7 @@ It also adds extra features to standard MDX, including support for Markdown-styl
 
 `.mdx` files must be written in [MDX syntax](https://mdxjs.com/docs/what-is-mdx/#mdx-syntax) rather than Astro’s HTML-like syntax.
 
-### Using MDX wth content collections
+### Using MDX with content collections
 
 To include MDX files in a content collection, make sure that your [collection loader](/en/guides/content-collections/#defining-the-collection-loader) is configured to load content from `.mdx` files:
 
@@ -111,6 +111,7 @@ const blog = defineCollection({
     description: z.string(),
     pubDate: z.coerce.date(),
   })
+});
 
 export const collections = { blog };
 ```

src/content/docs/en/recipes/rss.mdx

@@ -102,9 +102,9 @@ export async function GET(context) {
       title: post.data.title,
       pubDate: post.data.pubDate,
       description: post.data.description,
-      // Compute RSS link from post `slug`
-      // This example assumes all posts are rendered as `/blog/[slug]` routes
-      link: `/blog/${post.slug}/`,
+      // Compute RSS link from post `id`
+      // This example assumes all posts are rendered as `/blog/[id]` routes
+      link: `/blog/${post.id}/`,
     })),
   });
 }
@@ -185,7 +185,7 @@ export async function GET(context) {
     description: 'A humble Astronaut’s guide to the stars',
     site: context.site,
     items: blog.map((post) => ({
-      link: `/blog/${post.slug}/`,
+      link: `/blog/${post.id}/`,
       // Note: this will not process components or JSX expressions in MDX files.
       content: sanitizeHtml(parser.render(post.body), {
         allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img'])

src/content/docs/en/reference/routing-reference.mdx

@@ -183,6 +183,7 @@ A function that can be returned from [`getStaticPaths()`](#getstaticpaths) to di
 The following example fetches and passes 150 items to the `paginate` function, and creates static, prerendered pages at build time that will display 10 items per page:
 
 ```astro title="src/pages/pokemon/[page].astro"
+---
 export async function getStaticPaths({ paginate }) {
   // Load your data with fetch(), getCollection(), etc.
   const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`);
@@ -194,6 +195,7 @@ export async function getStaticPaths({ paginate }) {
 }
 
 const { page } = Astro.props;
+---
 ```
 
 `paginate()` has the following arguments:

src/content/docs/en/tutorial/5-astro-api/1.mdx

@@ -48,7 +48,7 @@ Now that you have a few blog posts to link to, it's time to configure the Blog p
     ```astro title="src/pages/blog.astro" del={9,10,11} ins={13}
     ---
     import BaseLayout from '../layouts/BaseLayout.astro'
-    const allPosts = await Object.values(import.meta.glob('./posts/*.md', { eager: true }));
+    const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
     const pageTitle = "My Astro Learning Blog";
     ---
     <BaseLayout pageTitle={pageTitle}>

src/content/docs/en/tutorial/6-islands/4.mdx

@@ -169,7 +169,7 @@ Upgrade to the latest version of Astro, and upgrade all integrations to their la
     import MarkdownPostLayout from '../../layouts/MarkdownPostLayout.astro';
 
     export async function getStaticPaths() {
-      const posts = await getCollection('posts');
+      const posts = await getCollection('blog');
       return posts.map(post => ({
         params: { slug: post.id }, props: { post },
       }));