Merge branch 'main' into directives-reference

package.json

@@ -81,7 +81,7 @@
   "dependencies": {
     "@astrojs/check": "^0.3.1",
     "@astrojs/sitemap": "^3.0.3",
-    "@astrojs/starlight": "0.15.1",
+    "@astrojs/starlight": "0.16.0",
     "@docsearch/js": "^3.5.2",
     "@fontsource/ibm-plex-mono": "^4.5.10",
     "@lunariajs/core": "^0.0.25",

src/components/starlight/PageSidebar.astro

@@ -1,7 +1,8 @@
 ---
 import type { Props } from '@astrojs/starlight/props';
 
-import { TableOfContents, MobileTableOfContents } from 'virtual:starlight/components';
+import TableOfContents from 'virtual:starlight/components/TableOfContents';
+import MobileTableOfContents from 'virtual:starlight/components/MobileTableOfContents';
 import StarlightBanner from '~/components/StarlightBanner.astro';
 ---
 
@@ -33,21 +34,21 @@ import StarlightBanner from '~/components/StarlightBanner.astro';
 	.sl-container {
 		width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x));
 	}
-	.right-sidebar-panel :global(h2) {
+	.right-sidebar-panel :global(:where(h2)) {
 		color: var(--sl-color-white);
 		font-size: var(--sl-text-h5);
 		font-weight: 600;
 		line-height: var(--sl-line-height-headings);
 		margin-bottom: 0.5rem;
 	}
-	.right-sidebar-panel :global(a) {
+	.right-sidebar-panel :global(:where(a)) {
 		display: block;
 		font-size: var(--sl-text-xs);
 		text-decoration: none;
 		color: var(--sl-color-gray-3);
 		overflow-wrap: anywhere;
 	}
-	.right-sidebar-panel :global(a:hover) {
+	.right-sidebar-panel :global(:where(a):hover) {
 		color: var(--sl-color-white);
 	}
 	@media (min-width: 72rem) {

src/components/starlight/Sidebar.astro

@@ -1,7 +1,7 @@
 ---
 import type { Props } from '@astrojs/starlight/props';
 import SidebarSublist from '@astrojs/starlight/components/SidebarSublist.astro';
-import { MobileMenuFooter } from 'virtual:starlight/components';
+import MobileMenuFooter from 'virtual:starlight/components/MobileMenuFooter';
 import type { SidebarEntry } from 'node_modules/@astrojs/starlight/utils/navigation';
 
 import Sponsors from '../LeftSidebar/Sponsors.astro';

src/content/docs/de/editor-setup.mdx

@@ -3,7 +3,7 @@ title: Editor-Einrichtung
 description: 'Richte deinen Editor ein, um etwas mit Astro zu kreieren.'
 ---
 import Badge from '~/components/Badge.astro';
-
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
 
 Passe deinen Code-Editor an, um die Astro-Entwicklererfahrung zu verbessern und neue Funktionen freizuschalten.
@@ -20,14 +20,24 @@ Astro funktioniert mit jedem Code-Editor. VS Code ist jedoch der von uns empfohl
 
 Um loszulegen, installiere noch heute die [Astro VS Code-Erweiterung](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
 
-📚 Schau dir an, wie du in deinem Astro-Projekt [TypeScript einrichtest](/de/guides/typescript/).
+import ReadMore from '~/components/ReadMore.astro'
+
+<ReadMore>Schau dir an, wie du in deinem Astro-Projekt [TypeScript einrichtest](/de/guides/typescript/).</ReadMore>
+
+## JetBrains IDEs
+
+Erstmals kam Support für Astro auf WebStorm 2023.1. Du kannst das offizielle Plugin über den [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro) installieren oder indem du im Plugins Tab deiner IDE nach "Astro" suchst. Dieses Plugin bietet dir Syntaxhervorhebung, Code-Vervollständigung, Code-Formatierung, und wir planen in Zukunft weitere, fortschrittliche Features hinzuzufügen. Es ist auch für alle anderen [JetBrains IDEs mit JavaScript Support](https://www.jetbrains.com/de-de/products/#lang=js&type=ide) erhältlich.
 
 ## Andere Code-Editoren
 
 Unsere wunderbare Community stellt mehrere Erweiterungen für andere beliebte Editoren bereit, darunter auch:
 
 - [VS Code-Erweiterung auf Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge variant="accent">Offiziell</Badge></span> - Die offizielle Astro-Erweiterung für VS Code, verfügbar in der Open VSX Registry für quelloffene Plattformen wie [VSCodium](https://vscodium.com/)
 - [Nova-Erweiterung](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Syntaxhervorhebung, IntelliSense und Autovervollständigung für Astro
+- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Syntaxhervorhebung, Einzug, und Code-Faltungsunterstützung für Astro in Vim oder Neovim
+- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) und [TreeSitter](https://github.com/virchau13/tree-sitter-astro) Plugins <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Syntaxhervorhebung, treesitter Analyse, und Autovervollständigung für Astro in Neovim
+- Emacs - Siehe Anleitung für die [Konfiguration von Emacs und Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> um mit Astro zu arbeiten
+- [Astro Syntaxhervorhebung für Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Das Astro Paket für Sublime Text, verfügbar im Sublime Text package manager.
 
 ## Browser-Editoren
 
@@ -45,15 +55,37 @@ Zusätzlich zu lokalen Code-Editoren funktioniert Astro auch gut in browserbasie
 
 Sieh dir das [Benutzerhandbuch des Projekts](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/) an, um mehr über die Installation und Einrichtung von ESLint in deinem Projekt zu erfahren.
 
+### Stylelint
+
+[Stylelint](https://stylelint.io/) ist ein beliebter Linter für CSS. [Eine von der Community verwaltete Stylelint Konfiguration](https://github.com/ota-meshi/stylelint-config-html) verfügt über Astro Support.
+
+Eine Installationsanleitung, Editor Integration und weitere Informationen findest du im README des Projekts.
+
 ### Prettier
 
-[Prettier](https://prettier.io/) ist ein beliebtes Code-Formatierungs-Tool für JavaScript, HTML, CSS und mehr. Um das Formatieren von `.astro`-Dateien zu ermöglichen, kannst du das [offizielle Prettier-Plugin für Astro](https://github.com/withastro/prettier-plugin-astro) verwenden.
+[Prettier](https://prettier.io/) ist ein beliebtes Code-Formatierungs-Tool für JavaScript, HTML, CSS und mehr. Wenn du die [Astro VS Code Extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) oder [die Astro language server für andere Editoren](#andere-code-editoren) verwendest, ist Code-Formatierung mit Prettier integriert.
+
+Um das Formatieren von `.astro`-Dateien außerhalb des Editors (z.B. in der Kommandozeilen&shy;schnittstelle (CLI)) zu ermöglichen, kannst du das [offizielle Prettier-Plugin für Astro](https://github.com/withastro/prettier-plugin-astro) verwenden.
 
 Um loszulegen, installiere zuerst Prettier und das Plugin:
 
-```shell
-npm install --save-dev prettier prettier-plugin-astro
-```
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```shell
+  npm install --save-dev prettier prettier-plugin-astro
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```shell
+  pnpm add -D prettier prettier-plugin-astro
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```shell
+  yarn add --dev prettier prettier-plugin-astro
+  ```
+  </Fragment>
+</PackageManagerTabs>
 
 Wenn du Prettier dann ausführst, erkennt es automatisch das Plugin und verwendet es zur Verarbeitung von `.astro`-Dateien:
 

src/content/docs/en/editor-setup.mdx

@@ -28,7 +28,6 @@ import ReadMore from '~/components/ReadMore.astro';
 
 Initial support for Astro landed in WebStorm 2023.1. You can install the official plugin through [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro) or by searching for "Astro" in the IDE's Plugins tab. This plugin includes features like syntax highlighting, code completion, and formatting, and plans to add even more advanced features in the future. It is also available to all other [JetBrains IDEs with JavaScript support](https://www.jetbrains.com/products/#lang=js&type=ide).
 
-JetBrains' upcoming [Fleet IDE](https://www.jetbrains.com/fleet/) includes language server support and will be able to use the official Astro tooling.
 
 ## Other Code Editors
 

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

@@ -177,7 +177,7 @@ export default defineConfig({
 });
 ```
 
-The function will be called for every page on your site. The `page` function parameter is the full URL of the page currently under considering, including your `site` domain. Return `true` to include the page in your sitemap, and `false` to leave it out.
+The function will be called for every page on your site. The `page` function parameter is the full URL of the page currently under consideration, including your `site` domain. Return `true` to include the page in your sitemap, and `false` to leave it out.
 
 To filter multiple pages, add arguments with target URLs.
 

src/content/docs/en/guides/internationalization.mdx

@@ -54,7 +54,7 @@ This routing API helps you generate, use, and verify the URLs that your multi-la
 
 3. Organize your content folders with localized content by language. Your folder names must match the items in `locales` exactly, and your folder organization must match the URL paths chosen for your [`routing`](#routing).
 
-    Include a localized folder for your `defaultLocale` only if you configure `prefixDefaultLocale: false` to show a localized URL path.
+    Include a localized folder for your `defaultLocale` only if you configure `prefixDefaultLocale: true` to show a localized URL path.
 
     <FileTree>
     - src

src/content/docs/en/guides/view-transitions.mdx

@@ -309,7 +309,7 @@ The following example implements the same using `navigate()` in a React `<Form /
 import React from 'react';
 import { navigate } from 'astro:transitions/client';
 
-export default function ClickToNavigate({ to }) {
+export default function Form() {
   return <select onChange={(ev) => navigate(e.target.value)}>
     <option value="/play">Play</option>
     <option value="/blog">Blog</option>