Skip to content

Commit 749c5a7

Browse files
gkurtgkurt
committed
docs: refactor docs to use install tabs
1 parent 79a0e6a commit 749c5a7

11 files changed

Lines changed: 51 additions & 184 deletions

File tree

‎packages/website/src/components/InstallTabs.astro‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
import { TabItem, Tabs } from '@astrojs/starlight/components';
3+
import { Code } from 'astro:components';
4+
5+
interface Props {
6+
pkg?: string;
7+
}
8+
9+
const { pkg = 'tegaki' } = Astro.props;
10+
11+
const codeProps = {
12+
lang: 'sh' as const,
13+
themes: { light: 'one-light' as const, dark: 'github-dark-dimmed' as const },
14+
defaultColor: false as const,
15+
};
16+
---
17+
18+
<Tabs syncKey="pkg">
19+
<TabItem label="npm">
20+
<Code code={`npm install ${pkg}`} {...codeProps} />
21+
</TabItem>
22+
<TabItem label="pnpm">
23+
<Code code={`pnpm add ${pkg}`} {...codeProps} />
24+
</TabItem>
25+
<TabItem label="yarn">
26+
<Code code={`yarn add ${pkg}`} {...codeProps} />
27+
</TabItem>
28+
<TabItem label="bun">
29+
<Code code={`bun add ${pkg}`} {...codeProps} />
30+
</TabItem>
31+
</Tabs>

‎packages/website/src/content/docs/frameworks/astro.mdx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,14 @@ title: Astro
33
description: Using Tegaki with Astro for animated handwriting.
44
---
55

6-
import { Tabs, TabItem } from '@astrojs/starlight/components';
6+
import InstallTabs from '../../../components/InstallTabs.astro';
77
import LiveDemo from '../../../components/astro/LiveDemo.astro';
88

99
Tegaki provides a native Astro component that renders full HTML at build time and hydrates on the client. No JavaScript framework required — text is visible even before hydration.
1010

1111
## Installation
1212

13-
<Tabs>
14-
<TabItem label="npm">
15-
```sh
16-
npm install tegaki
17-
```
18-
</TabItem>
19-
<TabItem label="pnpm">
20-
```sh
21-
pnpm add tegaki
22-
```
23-
</TabItem>
24-
<TabItem label="bun">
25-
```sh
26-
bun add tegaki
27-
```
28-
</TabItem>
29-
</Tabs>
13+
<InstallTabs />
3014

3115
## Basic example
3216

‎packages/website/src/content/docs/frameworks/nuxt.mdx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,13 @@ title: Nuxt
33
description: Using Tegaki with Nuxt 3 / Nuxt 4 for animated handwriting.
44
---
55

6-
import { Tabs, TabItem } from '@astrojs/starlight/components';
6+
import InstallTabs from '../../../components/InstallTabs.astro';
77

88
Tegaki ships a Nuxt module (`tegaki/nuxt`) that wires up the Vue adapter for both SSR and client rendering, and auto-imports `<TegakiRenderer>` as a global component.
99

1010
## Installation
1111

12-
<Tabs>
13-
<TabItem label="npm">
14-
```sh
15-
npm install tegaki
16-
```
17-
</TabItem>
18-
<TabItem label="pnpm">
19-
```sh
20-
pnpm add tegaki
21-
```
22-
</TabItem>
23-
<TabItem label="bun">
24-
```sh
25-
bun add tegaki
26-
```
27-
</TabItem>
28-
</Tabs>
12+
<InstallTabs />
2913

3014
## Register the module
3115

‎packages/website/src/content/docs/frameworks/react.mdx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,14 @@ title: React
33
description: Using Tegaki with React for animated handwriting.
44
---
55

6-
import { Tabs, TabItem } from '@astrojs/starlight/components';
6+
import InstallTabs from '../../../components/InstallTabs.astro';
77
import { LiveDemo, LiveDemoControlled } from '../../../components/LiveDemo.tsx';
88

99
Tegaki's default export is a React component that supports SSR, streaming text, and imperative playback control.
1010

1111
## Installation
1212

13-
<Tabs>
14-
<TabItem label="npm">
15-
```sh
16-
npm install tegaki react react-dom
17-
```
18-
</TabItem>
19-
<TabItem label="pnpm">
20-
```sh
21-
pnpm add tegaki react react-dom
22-
```
23-
</TabItem>
24-
<TabItem label="bun">
25-
```sh
26-
bun add tegaki react react-dom
27-
```
28-
</TabItem>
29-
</Tabs>
13+
<InstallTabs pkg="tegaki react react-dom" />
3014

3115
## Basic example
3216

‎packages/website/src/content/docs/frameworks/remotion.mdx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,13 @@ title: Remotion
33
description: Using Tegaki with Remotion to render handwriting animations to video.
44
---
55

6-
import { Tabs, TabItem } from '@astrojs/starlight/components';
6+
import InstallTabs from '../../../components/InstallTabs.astro';
77

88
Tegaki integrates with [Remotion](https://remotion.dev) for programmatic video rendering. Because Remotion drives time via `useCurrentFrame()`, the trick is to put Tegaki in **controlled progress mode** and map `frame / durationInFrames` to a `0–1` progress value.
99

1010
## Installation
1111

12-
<Tabs>
13-
<TabItem label="npm">
14-
```sh
15-
npm install tegaki remotion @remotion/cli react react-dom
16-
```
17-
</TabItem>
18-
<TabItem label="pnpm">
19-
```sh
20-
pnpm add tegaki remotion @remotion/cli react react-dom
21-
```
22-
</TabItem>
23-
<TabItem label="bun">
24-
```sh
25-
bun add tegaki remotion @remotion/cli react react-dom
26-
```
27-
</TabItem>
28-
</Tabs>
12+
<InstallTabs pkg="tegaki remotion @remotion/cli react react-dom" />
2913

3014
## Basic example
3115

‎packages/website/src/content/docs/frameworks/solid.mdx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,15 @@ title: SolidJS
33
description: Using Tegaki with SolidJS for animated handwriting.
44
---
55

6-
import { Tabs, TabItem } from '@astrojs/starlight/components';
6+
import InstallTabs from '../../../components/InstallTabs.astro';
77
import { LiveDemo } from '../../../components/solid/LiveDemo.tsx';
88
import { LiveDemoControlled } from '../../../components/solid/LiveDemoControlled.tsx';
99

1010
Tegaki provides a SolidJS component with SSR support and fine-grained reactive updates.
1111

1212
## Installation
1313

14-
<Tabs>
15-
<TabItem label="npm">
16-
```sh
17-
npm install tegaki solid-js
18-
```
19-
</TabItem>
20-
<TabItem label="pnpm">
21-
```sh
22-
pnpm add tegaki solid-js
23-
```
24-
</TabItem>
25-
<TabItem label="bun">
26-
```sh
27-
bun add tegaki solid-js
28-
```
29-
</TabItem>
30-
</Tabs>
14+
<InstallTabs pkg="tegaki solid-js" />
3115

3216
## Basic example
3317

‎packages/website/src/content/docs/frameworks/svelte.mdx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,15 @@ title: Svelte
33
description: Using Tegaki with Svelte 5 for animated handwriting.
44
---
55

6-
import { Tabs, TabItem } from '@astrojs/starlight/components';
6+
import InstallTabs from '../../../components/InstallTabs.astro';
77
import LiveDemo from '../../../components/svelte/LiveDemo.svelte';
88
import LiveDemoControlled from '../../../components/svelte/LiveDemoControlled.svelte';
99

1010
Tegaki provides a Svelte 5 component with SSR support and reactive prop updates.
1111

1212
## Installation
1313

14-
<Tabs>
15-
<TabItem label="npm">
16-
```sh
17-
npm install tegaki svelte
18-
```
19-
</TabItem>
20-
<TabItem label="pnpm">
21-
```sh
22-
pnpm add tegaki svelte
23-
```
24-
</TabItem>
25-
<TabItem label="bun">
26-
```sh
27-
bun add tegaki svelte
28-
```
29-
</TabItem>
30-
</Tabs>
14+
<InstallTabs pkg="tegaki svelte" />
3115

3216
## Basic example
3317

‎packages/website/src/content/docs/frameworks/vanilla.mdx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,15 @@ title: Vanilla JS
33
description: Using TegakiEngine directly without a framework.
44
---
55

6-
import { Tabs, TabItem } from '@astrojs/starlight/components';
6+
import InstallTabs from '../../../components/InstallTabs.astro';
77
import LiveDemo from '../../../components/vanilla/LiveDemo.astro';
88
import LiveDemoControlled from '../../../components/vanilla/LiveDemoControlled.astro';
99

1010
You can use `TegakiEngine` directly with plain JavaScript or TypeScript — no framework needed.
1111

1212
## Installation
1313

14-
<Tabs>
15-
<TabItem label="npm">
16-
```sh
17-
npm install tegaki
18-
```
19-
</TabItem>
20-
<TabItem label="pnpm">
21-
```sh
22-
pnpm add tegaki
23-
```
24-
</TabItem>
25-
<TabItem label="bun">
26-
```sh
27-
bun add tegaki
28-
```
29-
</TabItem>
30-
</Tabs>
14+
<InstallTabs />
3115

3216
## Basic example
3317

‎packages/website/src/content/docs/frameworks/vue.mdx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,15 @@ title: Vue
33
description: Using Tegaki with Vue 3 for animated handwriting.
44
---
55

6-
import { Tabs, TabItem } from '@astrojs/starlight/components';
6+
import InstallTabs from '../../../components/InstallTabs.astro';
77
import LiveDemo from '../../../components/vue/LiveDemo.vue';
88
import LiveDemoControlled from '../../../components/vue/LiveDemoControlled.vue';
99

1010
Tegaki provides a Vue 3 component (Composition API) with SSR support and deep reactive prop watching.
1111

1212
## Installation
1313

14-
<Tabs>
15-
<TabItem label="npm">
16-
```sh
17-
npm install tegaki vue
18-
```
19-
</TabItem>
20-
<TabItem label="pnpm">
21-
```sh
22-
pnpm add tegaki vue
23-
```
24-
</TabItem>
25-
<TabItem label="bun">
26-
```sh
27-
bun add tegaki vue
28-
```
29-
</TabItem>
30-
</Tabs>
14+
<InstallTabs pkg="tegaki vue" />
3115

3216
## Basic example
3317

‎packages/website/src/content/docs/frameworks/web-components.mdx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,15 @@ title: Web Components
33
description: Using Tegaki as a custom element with the Web Components API.
44
---
55

6-
import { Tabs, TabItem } from '@astrojs/starlight/components';
6+
import InstallTabs from '../../../components/InstallTabs.astro';
77
import LiveDemo from '../../../components/wc/LiveDemo.astro';
88
import LiveDemoControlled from '../../../components/wc/LiveDemoControlled.astro';
99

1010
Tegaki provides a `<tegaki-renderer>` custom element that works in any browser — no framework required.
1111

1212
## Installation
1313

14-
<Tabs>
15-
<TabItem label="npm">
16-
```sh
17-
npm install tegaki
18-
```
19-
</TabItem>
20-
<TabItem label="pnpm">
21-
```sh
22-
pnpm add tegaki
23-
```
24-
</TabItem>
25-
<TabItem label="bun">
26-
```sh
27-
bun add tegaki
28-
```
29-
</TabItem>
30-
</Tabs>
14+
<InstallTabs />
3115

3216
## Setup
3317

0 commit comments

Comments
 (0)