refactor(docs): use starlight's tab component w/ sync

paularmstrong · Dec 10, 2024 · e3413e5 · e3413e5
1 parent 3d8cc77
commit e3413e5
Show file tree

Hide file tree

Showing 13 changed files with 31 additions and 126 deletions.
diff --git a/docs/src/components/Tabs.astro b/docs/src/components/Tabs.astro
diff --git a/docs/src/content/docs/concepts/primer.mdx b/docs/src/content/docs/concepts/primer.mdx
@@ -5,8 +5,7 @@ sidebar:
   order: 0
 ---
 
-import { FileTree, TabItem } from '@astrojs/starlight/components';
-import Tabs from '../../../components/Tabs.astro';
+import { FileTree, Tabs, TabItem } from '@astrojs/starlight/components';
 
 Modern software dependency graphs are complex and brittle. The following Graph shows a theoretical problem that we may currently face between our own internal and external dependencies.
 
@@ -85,7 +84,7 @@ flowchart RL
 
 When package managers are configured as monorepos, they follow an array of glob patterns to determine where to find other source-level `package.json` files for determining install dependencies for the repository.
 
-<Tabs>
+<Tabs syncKey="pkgmanager">
   <TabItem label="npm">
 
     npm is configured using the [`workspaces`](https://docs.npmjs.com/cli/v10/using-npm/workspaces) field in the root `package.json`:
@@ -99,7 +98,7 @@ When package managers are configured as monorepos, they follow an array of glob
     ```
 
   </TabItem>
-  <TabItem label="Yarn">
+  <TabItem label="yarn">
 
     Yarn, like npm, uses the [`workspaces`](https://yarnpkg.com/features/workspaces) field in the root `package.json`, but also enables additional features, like the `workspace:` protocol, focused installs, and parallel execution. It is recommended to set Yarn to use install modules using the [node-modules linker](https://yarnpkg.com/configuration/yarnrc#nodeLinker) to avoid compatibility issues
     .

diff --git a/docs/src/content/docs/core/changes.mdx b/docs/src/content/docs/core/changes.mdx
@@ -5,8 +5,7 @@ tableOfContents:
   maxHeadingLevel: 4
 ---
 
-import Tabs from '../../../components/Tabs.astro';
-import { FileTree, Steps, TabItem } from '@astrojs/starlight/components';
+import { FileTree, Steps } from '@astrojs/starlight/components';
 
 In a typical monorepo, we want to build up changes for publishable Workspaces over time while we work on features and major changes. Because we are using a monorepo with [_source dependencies_](/docs/source-dependencies/), we should not need to publish often, because our local Workspace's are benefitting from code changes immediately.
 

diff --git a/docs/src/content/docs/docs/config.mdx b/docs/src/content/docs/docs/config.mdx
@@ -7,14 +7,13 @@ sidebar:
   order: 1
 ---
 
-import Tabs from '../../../components/Tabs.astro';
-import { TabItem } from '@astrojs/starlight/components';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 ## Root configuration
 
 oneRepo configuration files can be any flavor of JavaScript or TypeScript, as long as they are parseable and have a valid `default` export. The only requirement for your repository's root config is that `root` must be set to `true`:
 
-<Tabs group="jsflavor">
+<Tabs syncKey="jsflavor">
   <TabItem label="ES Module">
 ```ts title="./onerepo.config.js" ins={2}
 export default {
@@ -459,7 +458,7 @@ config-root.d.ts:7
 
 Workspace configuration files are not required unless a workspace has explicit `tasks`, `codeowners`, or other needs. Workspace configuration files share the same name and format as the root configuration and are able to be any flavor of JavaScript or TypeScript:
 
-<Tabs group="jsflavor">
+<Tabs syncKey="jsflavor">
   <TabItem label="ES Module">
 ```ts title="./<workspace>/onerepo.config.js"
 export default {

diff --git a/docs/src/content/docs/docs/getting-started.mdx b/docs/src/content/docs/docs/getting-started.mdx
@@ -6,8 +6,7 @@ sidebar:
   order: 0
 ---
 
-import { Steps, TabItem } from '@astrojs/starlight/components';
-import Tabs from '../../../components/Tabs.astro';
+import { Steps, Tabs, TabItem } from '@astrojs/starlight/components';
 
 ## Quick start
 
@@ -17,7 +16,7 @@ import Tabs from '../../../components/Tabs.astro';
 
    First, install oneRepo's `one` command into your path:
 
-   <Tabs group="pkgmanager">
+   <Tabs syncKey="pkgmanager">
 
     <TabItem label="npm">
 
@@ -57,7 +56,7 @@ import Tabs from '../../../components/Tabs.astro';
 
    oneRepo is compatible with all major package managers for Node.js.
 
-   <Tabs group="pkgmanager">
+   <Tabs syncKey="pkgmanager">
 
     <TabItem label="npm">
 
@@ -100,7 +99,7 @@ import Tabs from '../../../components/Tabs.astro';
 
    Refer to the full [configuration documentation](/docs/config/) for more information.
 
-   <Tabs group="jsflavor">
+   <Tabs syncKey="jsflavor">
 
     <TabItem label="ES Module">
 
@@ -180,7 +179,7 @@ import Tabs from '../../../components/Tabs.astro';
 
     Install dependencies using your package manager of choice.
 
-    <Tabs group="pkgmanager">
+    <Tabs syncKey="pkgmanager">
 
      <TabItem label="npm">
 
@@ -212,7 +211,7 @@ import Tabs from '../../../components/Tabs.astro';
 
     Install the CLI into your system. This will create a command, `one`, that can be run from anywhere in your path. It will always pick up a local version of `onerepo`, if it exists, otherwise fall back on the current version.
 
-    <Tabs group="pkgmanager">
+    <Tabs syncKey="pkgmanager">
 
      <TabItem label="npm">
 
@@ -244,7 +243,7 @@ import Tabs from '../../../components/Tabs.astro';
 
     Configure your package manager to work with workspaces
 
-    <Tabs group="pkgmanager">
+    <Tabs syncKey="pkgmanager">
 
       <TabItem label="npm">
 
@@ -288,7 +287,7 @@ import Tabs from '../../../components/Tabs.astro';
 
     Refer to the full [configuration documentation](/docs/config/) for more information.
 
-    <Tabs group="jsflavor">
+    <Tabs syncKey="jsflavor">
 
       <TabItem label="ES Module">
 

diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
@@ -27,8 +27,7 @@ hero:
 import Aurora from '../../components/Aurora.astro';
 import { Card, CardGrid, Icon } from '@astrojs/starlight/components';
 import LinkCard from '../../components/LinkCard.astro';
-import { Steps, TabItem } from '@astrojs/starlight/components';
-import Tabs from '../../components/Tabs.astro';
+import { Steps, Tabs, TabItem } from '@astrojs/starlight/components';
 
 <Aurora bands={40} />
 
@@ -103,7 +102,7 @@ Logging output from every command and tool in oneRepo is carefully grouped, docu
 
     First, install oneRepo's `one` command into your path:
 
-    <Tabs group="pkgmanager">
+    <Tabs syncKey="pkgmanager">
 
         <TabItem label="npm">
 

diff --git a/docs/src/content/docs/plugins/docgen.mdx b/docs/src/content/docs/plugins/docgen.mdx
@@ -8,12 +8,11 @@ meta:
   stability: stable
 ---
 
-import { TabItem } from '@astrojs/starlight/components';
-import Tabs from '../../../components/Tabs.astro';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 ## Installation
 
-<Tabs group="pkgmanager">
+<Tabs syncKey="pkgmanager">
   <TabItem label="npm">
 
     ```sh title="Install via npm"

diff --git a/docs/src/content/docs/plugins/eslint.mdx b/docs/src/content/docs/plugins/eslint.mdx
@@ -8,12 +8,11 @@ meta:
   stability: stable
 ---
 
-import { TabItem } from '@astrojs/starlight/components';
-import Tabs from '../../../components/Tabs.astro';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 ## Installation
 
-<Tabs group="pkgmanager">
+<Tabs syncKey="pkgmanager">
   <TabItem label="npm">
 
     ```sh title="Install via npm"

diff --git a/docs/src/content/docs/plugins/jest.mdx b/docs/src/content/docs/plugins/jest.mdx
@@ -8,16 +8,15 @@ meta:
   stability: stable
 ---
 
-import { TabItem } from '@astrojs/starlight/components';
-import Tabs from '../../../components/Tabs.astro';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 Jest is a good framework for headless testing with oneRepo. Jest works well with monorepos because it allows a single runner that can use multiple project configurations. Each workspace in your repository can be a Jest project, enabling Jest to determine which tests to run.
 
 The added benefit of Jest is that as you are working, you can run this single command and it will automatically test appropriate files related to your changes across all workspaces. There's no need to determine which workspaces to run – and can all be done with `--watch` mode at the same time.
 
 ## Installation
 
-<Tabs group="pkgmanager">
+<Tabs syncKey="pkgmanager">
   <TabItem label="npm">
 
     ```sh title="Install via npm"

diff --git a/docs/src/content/docs/plugins/performance-writer.mdx b/docs/src/content/docs/plugins/performance-writer.mdx
@@ -8,8 +8,7 @@ meta:
   stability: experimental
 ---
 
-import { TabItem } from '@astrojs/starlight/components';
-import Tabs from '../../../components/Tabs.astro';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 This is a usable example plugin to demonstrate how to build your own telemetry and performance tracing plugin using the oneRepo plugin API and internal performance entries.
 
@@ -21,7 +20,7 @@ oneRepo does not send metrics, telemetry, or any other information anywhere –
 
 ## Installation
 
-<Tabs group="pkgmanager">
+<Tabs syncKey="pkgmanager">
   <TabItem label="npm">
 
     ```sh title="Install via npm"

diff --git a/docs/src/content/docs/plugins/prettier.mdx b/docs/src/content/docs/plugins/prettier.mdx
@@ -8,12 +8,11 @@ meta:
   stability: stable
 ---
 
-import { TabItem } from '@astrojs/starlight/components';
-import Tabs from '../../../components/Tabs.astro';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 ## Installation
 
-<Tabs group="pkgmanager">
+<Tabs syncKey="pkgmanager">
   <TabItem label="npm">
 
     ```sh title="Install via npm"

diff --git a/docs/src/content/docs/plugins/typescript.mdx b/docs/src/content/docs/plugins/typescript.mdx
@@ -8,16 +8,15 @@ meta:
   stability: stable
 ---
 
-import { TabItem } from '@astrojs/starlight/components';
-import Tabs from '../../../components/Tabs.astro';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 Let oneRepo handle running TypeScript across Workspaces.
 
 Avoid potential mistakes when using [project references](https://www.typescriptlang.org/docs/handbook/project-references.html), this plugin will automatically ensure references across all `tsconfig.json` files are kept in sync for every run.
 
 ## Installation
 
-<Tabs group="pkgmanager">
+<Tabs syncKey="pkgmanager">
   <TabItem label="npm">
 
     ```sh title="Install via npm"

diff --git a/docs/src/content/docs/plugins/vitest.mdx b/docs/src/content/docs/plugins/vitest.mdx
@@ -8,12 +8,11 @@ meta:
   stability: stable
 ---
 
-import { Steps, TabItem } from '@astrojs/starlight/components';
-import Tabs from '../../../components/Tabs.astro';
+import { Steps, Tabs, TabItem } from '@astrojs/starlight/components';
 
 ## Installation
 
-<Tabs group="pkgmanager">
+<Tabs syncKey="pkgmanager">
   <TabItem label="npm">
 
     ```sh title="Install via npm"