feat: use Starlight's Tabs (#8196)

* feat: upgrade Starlight to 0.22.2 & use Starlight's Tabs * fix tabs in mdx
withastro · May 21, 2024 · d825b1c · d825b1c
1 parent e128bc9
commit d825b1c
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 118 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/tabs/AstroJSXTabs.astro b/src/components/tabs/AstroJSXTabs.astro
@@ -1,9 +1,8 @@
 ---
-import Tabs from './Tabs.astro';
-import { TabItem } from '@astrojs/starlight/components';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 ---
 
-<Tabs group="astro-jsx">
+<Tabs syncKey="astro-jsx">
 	<TabItem label="JSX">
 		<slot name="jsx" />
 	</TabItem>

diff --git a/src/components/tabs/AstroVueTabs.astro b/src/components/tabs/AstroVueTabs.astro
@@ -1,9 +1,8 @@
 ---
-import Tabs from './Tabs.astro';
-import { TabItem } from '@astrojs/starlight/components';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 ---
 
-<Tabs group="astro-vue">
+<Tabs syncKey="astro-vue">
 	<TabItem label="Vue">
 		<slot name="vue" />
 	</TabItem>

diff --git a/src/components/tabs/JavascriptFlavorTabs.astro b/src/components/tabs/JavascriptFlavorTabs.astro
@@ -1,9 +1,8 @@
 ---
-import Tabs from './Tabs.astro';
-import { TabItem } from '@astrojs/starlight/components';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 ---
 
-<Tabs group="javascript-flavors">
+<Tabs syncKey="javascript-flavors">
 	<TabItem label="JavaScript">
 		<slot name="js" />
 	</TabItem>

diff --git a/src/components/tabs/PackageManagerTabs.astro b/src/components/tabs/PackageManagerTabs.astro
@@ -1,9 +1,8 @@
 ---
-import Tabs from './Tabs.astro';
-import { TabItem } from '@astrojs/starlight/components';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 ---
 
-<Tabs group="package-managers">
+<Tabs syncKey="package-managers">
 	<TabItem label="npm">
 		<slot name="npm" />
 	</TabItem>

diff --git a/src/components/tabs/StaticSsrTabs.astro b/src/components/tabs/StaticSsrTabs.astro
@@ -1,9 +1,8 @@
 ---
-import Tabs from './Tabs.astro';
-import { TabItem } from '@astrojs/starlight/components';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 ---
 
-<Tabs group="deploy-type">
+<Tabs syncKey="deploy-type">
 	<TabItem label="Static">
 		<slot name="static" />
 	</TabItem>

diff --git a/src/components/tabs/Tabs.astro b/src/components/tabs/Tabs.astro
diff --git a/src/components/tabs/UIFrameworkTabs.astro b/src/components/tabs/UIFrameworkTabs.astro
@@ -1,9 +1,8 @@
 ---
-import Tabs from './Tabs.astro';
-import { TabItem } from '@astrojs/starlight/components';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 ---
 
-<Tabs group="package-managers">
+<Tabs syncKey="ui-frameworks">
 	{
 		Astro.slots.has('preact') && (
 			<TabItem label="Preact">

diff --git a/src/content/docs/de/guides/typescript.mdx b/src/content/docs/de/guides/typescript.mdx
@@ -5,8 +5,7 @@ i18nReady: true
 ---
 import Since from '~/components/Since.astro'
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-import Tabs from '~/components/tabs/Tabs.astro'
-import { TabItem } from '@astrojs/starlight/components'
+import { Tabs, TabItem } from '@astrojs/starlight/components'
 
 
 Astro wird mit integrierter Unterstützung für [TypeScript](https://www.typescriptlang.org/) ausgeliefert. Du kannst `.ts`- und `.tsx`-Dateien in dein Astro-Projekt importieren, TypeScript-Code direkt in deiner [Astro-Komponente](/de/basics/astro-components/#das-komponentenskript) schreiben und sogar eine [`astro.config.ts`](/de/guides/configuring-astro/#die-astro-konfigurationsdatei)-Datei verwenden, wenn du möchtest.
@@ -88,7 +87,7 @@ Auf diese Weise vermeidest du Fälle, in denen der Astro-Bundler versucht, deine
 
 Du kannst TypeScript so konfigurieren, dass Typ-Importe in deiner `.tsconfig`-Datei erzwungen werden.
 
-<Tabs group="typescript-version">
+<Tabs syncKey="typescript-version">
   <TabItem label="TypeScript ≤4.9">
 		Setze [`importsNotUsedAsValues`](https://www.typescriptlang.org/tsconfig#importsNotUsedAsValues) auf `"error"`. TypeScript prüft dann deine Importe und sagt dir, wann `import type` verwendet werden sollte. Diese Einstellung ist standardmäßig in unseren Vorlagen `strict` und `strictest` enthalten.