From d825b1c51c77409002ad79ea59280af77a1a47a9 Mon Sep 17 00:00:00 2001
From: liruifengv <liruifeng1024@gmail.com>
Date: Tue, 21 May 2024 09:38:26 +0800
Subject: [PATCH] feat:  use Starlight's Tabs (#8196)

* feat:  upgrade Starlight to 0.22.2 & use Starlight's Tabs

* fix tabs in mdx
---
 pnpm-lock.yaml                                | 26 +++---
 src/components/tabs/AstroJSXTabs.astro        |  5 +-
 src/components/tabs/AstroVueTabs.astro        |  5 +-
 .../tabs/JavascriptFlavorTabs.astro           |  5 +-
 src/components/tabs/PackageManagerTabs.astro  |  5 +-
 src/components/tabs/StaticSsrTabs.astro       |  5 +-
 src/components/tabs/Tabs.astro                | 84 -------------------
 src/components/tabs/UIFrameworkTabs.astro     |  5 +-
 src/content/docs/de/guides/typescript.mdx     |  5 +-
 9 files changed, 27 insertions(+), 118 deletions(-)
 delete mode 100644 src/components/tabs/Tabs.astro

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0c70fc4914faf..a95397c69a6ff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2051,7 +2051,7 @@ packages:
   /@types/nlcst@1.0.0:
     resolution: {integrity: sha512-3TGCfOcy8R8mMQ4CNSNOe3PG66HttvjcLzCoOpvXvDtfWOTi+uT/rxeOKm/qEwbM4SNe1O/PjdiBK2YcTjU4OQ==}
     dependencies:
-      '@types/unist': 3.0.0
+      '@types/unist': 3.0.2
 
   /@types/nlcst@2.0.3:
     resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==}
@@ -4210,7 +4210,7 @@ packages:
     resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}
     dependencies:
       '@types/hast': 3.0.3
-      '@types/unist': 3.0.0
+      '@types/unist': 3.0.2
       devlop: 1.1.0
       hastscript: 8.0.0
       property-information: 6.2.0
@@ -4259,7 +4259,7 @@ packages:
     resolution: {integrity: sha512-5m1gmba658Q+lO5uqL5YNGQWeh1MYWZbZmWrM5lncdcuiXuo5E2HT/CIOp0rLF8ksfSwiCVJ3twlgVRyTGThGA==}
     dependencies:
       '@types/hast': 3.0.3
-      '@types/unist': 3.0.0
+      '@types/unist': 3.0.2
       '@ungap/structured-clone': 1.2.0
       hast-util-from-parse5: 8.0.1
       hast-util-to-parse5: 8.0.0
@@ -4965,7 +4965,7 @@ packages:
     resolution: {integrity: sha512-JUpYOqKI4mM3sZcNxmF/ox04XYFFkNwr0CFlrQIkCwbvH0xzMCqkMqAde9wRd80VAhaUrwFwKm2nxretdT1h7Q==}
     dependencies:
       '@types/mdast': 4.0.3
-      '@types/unist': 3.0.0
+      '@types/unist': 3.0.2
       devlop: 1.1.0
       mdast-util-from-markdown: 2.0.0
       mdast-util-to-markdown: 2.1.0
@@ -5144,7 +5144,7 @@ packages:
     resolution: {integrity: sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==}
     dependencies:
       '@types/mdast': 4.0.3
-      '@types/unist': 3.0.0
+      '@types/unist': 3.0.2
       longest-streak: 3.1.0
       mdast-util-phrasing: 4.0.0
       mdast-util-to-string: 4.0.0
@@ -5983,7 +5983,7 @@ packages:
     dependencies:
       nanoid: 3.3.7
       picocolors: 1.0.0
-      source-map-js: 1.0.2
+      source-map-js: 1.2.0
     dev: true
 
   /postcss@8.4.38:
@@ -7078,7 +7078,7 @@ packages:
   /unist-util-is@6.0.0:
     resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
     dependencies:
-      '@types/unist': 3.0.0
+      '@types/unist': 3.0.2
 
   /unist-util-modify-children@2.0.0:
     resolution: {integrity: sha512-HGrj7JQo9DwZt8XFsX8UD4gGqOsIlCih9opG6Y+N11XqkBGKzHo8cvDi+MfQQgiZ7zXRUiQREYHhjOBHERTMdg==}
@@ -7101,7 +7101,7 @@ packages:
   /unist-util-position@5.0.0:
     resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
     dependencies:
-      '@types/unist': 3.0.0
+      '@types/unist': 3.0.2
 
   /unist-util-remove-position@5.0.0:
     resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==}
@@ -7125,7 +7125,7 @@ packages:
   /unist-util-stringify-position@4.0.0:
     resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
     dependencies:
-      '@types/unist': 3.0.0
+      '@types/unist': 3.0.2
 
   /unist-util-visit-children@1.1.4:
     resolution: {integrity: sha512-sA/nXwYRCQVRwZU2/tQWUqJ9JSFM1X3x7JIOsIgSzrFHcfVt6NkzDtKzyxg2cZWkCwGF9CO8x4QNZRJRMK8FeQ==}
@@ -7145,7 +7145,7 @@ packages:
   /unist-util-visit-parents@6.0.1:
     resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
     dependencies:
-      '@types/unist': 3.0.0
+      '@types/unist': 3.0.2
       unist-util-is: 6.0.0
 
   /unist-util-visit@4.1.2:
@@ -7207,7 +7207,7 @@ packages:
   /vfile-location@5.0.2:
     resolution: {integrity: sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==}
     dependencies:
-      '@types/unist': 3.0.0
+      '@types/unist': 3.0.2
       vfile: 6.0.1
 
   /vfile-message@3.1.4:
@@ -7219,7 +7219,7 @@ packages:
   /vfile-message@4.0.2:
     resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
     dependencies:
-      '@types/unist': 3.0.0
+      '@types/unist': 3.0.2
       unist-util-stringify-position: 4.0.0
 
   /vfile@5.3.7:
@@ -7233,7 +7233,7 @@ packages:
   /vfile@6.0.1:
     resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==}
     dependencies:
-      '@types/unist': 3.0.0
+      '@types/unist': 3.0.2
       unist-util-stringify-position: 4.0.0
       vfile-message: 4.0.2
 
diff --git a/src/components/tabs/AstroJSXTabs.astro b/src/components/tabs/AstroJSXTabs.astro
index 7cb8455befa56..038c5919720ef 100644
--- 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
index f378485cb033c..a6015091cd227 100644
--- 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
index d41b08bdc3a6b..cb8457612477c 100644
--- 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
index 0afeac9025cb3..390a407ce6496 100644
--- 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
index cfea36da23eae..f2d0943f5feb1 100644
--- 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
deleted file mode 100644
index 4d73f28fcd0a0..0000000000000
--- a/src/components/tabs/Tabs.astro
+++ /dev/null
@@ -1,84 +0,0 @@
----
-import { Tabs as StarlightTabs } from '@astrojs/starlight/components';
-
-export interface Props {
-	group?: string;
-}
----
-
-<astro-docs-tabs data-group={Astro.props.group}>
-	<StarlightTabs>
-		<slot />
-	</StarlightTabs>
-</astro-docs-tabs>
-
-<style>
-	astro-docs-tabs {
-		display: block;
-	}
-</style>
-
-<script>
-	class AstroDocsTabs extends HTMLElement {
-		tabs: HTMLAnchorElement[];
-		panels: HTMLElement[];
-
-		constructor() {
-			super();
-
-			const tablist = this.querySelector('[role="tablist"]')!;
-			const starlightTab = this.querySelector('starlight-tabs')!;
-			this.tabs = [...tablist.querySelectorAll<HTMLAnchorElement>('[role="tab"]')];
-			this.panels = [...this.querySelectorAll<HTMLElement>('starlight-tabs > [role="tabpanel"]')];
-
-			if (!this.dataset.group) return;
-
-			const newSwitchTab = (a: HTMLAnchorElement, index: number) => {
-				// Track distance between tab and viewport top
-				const distanceToTop = starlightTab.getBoundingClientRect().top;
-
-				// @ts-expect-error __proto__ isn't typed
-				starlightTab.__proto__.switchTab.bind(starlightTab)(a, index);
-
-				const starlightTabs = document.querySelectorAll(
-					`[data-group="${this.dataset.group}"] starlight-tabs`
-				)!;
-				starlightTabs.forEach((tab) => {
-					// @ts-ignore
-					tab.parentElement.switchTab(
-						tab.firstElementChild?.firstElementChild?.children.item(index)?.firstElementChild,
-						index
-					);
-				});
-
-				const newDistanceToTop = starlightTab.getBoundingClientRect().top;
-				window.scrollTo(0, window.scrollY + (newDistanceToTop - distanceToTop));
-			};
-			// @ts-expect-error starlightTab isn't typed as a custom element
-			starlightTab.switchTab = newSwitchTab;
-		}
-
-		// modified version to not scroll on switch (/~https://github.com/withastro/starlight/blob/201eb88f42069e5e575cba578b9cd6a3dfbbc5a9/packages/starlight/user-components/Tabs.astro#L116)
-		switchTab(newTab: HTMLAnchorElement | null | undefined, index: number) {
-			if (!newTab) return;
-
-			// Mark all tabs as unselected and hide all tab panels.
-			this.tabs.forEach((tab) => {
-				tab.removeAttribute('aria-selected');
-				tab.setAttribute('tabindex', '-1');
-			});
-			this.panels.forEach((oldPanel) => {
-				oldPanel.hidden = true;
-			});
-
-			// Show new panel and mark new tab as selected.
-			const newPanel = this.panels[index];
-			if (newPanel) newPanel.hidden = false;
-			// Restore active tab to the default tab order.
-			newTab.removeAttribute('tabindex');
-			newTab.setAttribute('aria-selected', 'true');
-		}
-	}
-
-	customElements.define('astro-docs-tabs', AstroDocsTabs);
-</script>
diff --git a/src/components/tabs/UIFrameworkTabs.astro b/src/components/tabs/UIFrameworkTabs.astro
index 31fe3becbb199..3ec496c54f08d 100644
--- 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
index 0ebbd7973e183..32c8c4616a960 100644
--- 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.