Skip to content

Commit 42ee563

Browse files
BlankeosBlankeos
committed
docs: better docs performance.
(that was painful, mdx and markdown in solid is painful).
1 parent 5f521f8 commit 42ee563

28 files changed

+267
-317
lines changed

‎apps/site/components/demos/base-demo.tsx‎

Lines changed: 5 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
// Tabs
22
import { Tabs } from "@kobalte/core/tabs"
3-
import { useClipboard } from "bagon-hooks"
43
import { clsx } from "clsx"
54
import {
65
type ComponentProps,
@@ -13,6 +12,7 @@ import {
1312
onMount,
1413
Show,
1514
splitProps,
15+
type Component,
1616
} from "solid-js"
1717
import { MDXContent } from "@/components/mdx-content"
1818
import { cn } from "@/utils/cn"
@@ -48,7 +48,7 @@ export type DemoProps = {
4848
children: JSX.Element
4949
class?: string
5050
defaultValue?: TabValue
51-
code?: string
51+
code?: Component
5252
minHeight?: string
5353
title?: JSX.Element
5454
}
@@ -69,8 +69,6 @@ function Demo(props: FlowProps<Props>) {
6969
const [knowsToClick, setKnowsToClick] = createSignal(false)
7070
const [active, setActive] = createSignal(_props.defaultValue)
7171

72-
const { copy, copied } = useClipboard()
73-
7472
function handleClick() {
7573
if (!_props.onClick) return
7674

@@ -170,54 +168,9 @@ function Demo(props: FlowProps<Props>) {
170168
</div>
171169
</Tabs.Content>
172170
</Show>
173-
<Show when={active() === "code" && _props.code}>
174-
<Tabs.Content value="code" class="relative overflow-hidden p-3 text-sm">
171+
<Show when={_props.code}>
172+
<Tabs.Content value="code" class={clsx("min-h-25 relative overflow-hidden text-sm", active() !== "code" && "hidden")} forceMount>
175173
<MDXContent code={_props.code!} />
176-
<button
177-
onClick={() => {
178-
const code = _props.code || ""
179-
const trimmedCode = code
180-
.replace(/^\s*```tsx\s*\n?/, "") // Remove ```tsx from beginning
181-
.replace(/\n?\s*```\s*$/, "") // Remove ``` from end
182-
copy(trimmedCode)
183-
}}
184-
class="absolute right-2 bottom-2 animate-fadeIn rounded-md bg-white/10 p-1 transition-colors hover:bg-white/20"
185-
>
186-
<Show
187-
when={!copied()}
188-
fallback={
189-
<svg
190-
class="h-4 w-4 animate-scale-in text-white"
191-
fill="none"
192-
stroke="currentColor"
193-
viewBox="0 0 24 24"
194-
xmlns="http://www.w3.org/2000/svg"
195-
>
196-
<path
197-
stroke-linecap="round"
198-
stroke-linejoin="round"
199-
stroke-width="2"
200-
d="M5 13l4 4L19 7"
201-
/>
202-
</svg>
203-
}
204-
>
205-
<svg
206-
class="h-4 w-4 animate-scale-in text-white"
207-
fill="none"
208-
stroke="currentColor"
209-
viewBox="0 0 24 24"
210-
xmlns="http://www.w3.org/2000/svg"
211-
>
212-
<path
213-
stroke-linecap="round"
214-
stroke-linejoin="round"
215-
stroke-width="2"
216-
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
217-
></path>
218-
</svg>
219-
</Show>
220-
</button>
221174
</Tabs.Content>
222175
</Show>
223176
</Collapsible>
@@ -415,7 +368,7 @@ export function Collapsible(props: CollapsibleProps) {
415368
return (
416369
<div
417370
style={{ height: heightStyle() }}
418-
class={cn("overflow-hidden transition-[width,height] duration-400", local.containerClass)}
371+
class={cn("overflow-hidden transition-[width,height] duration-350 ease-in-out", local.containerClass)}
419372
aria-hidden={!local.open}
420373
{...others}
421374
>

‎apps/site/components/demos/continuous.tsx‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { continuous } from "number-flow/plugins"
22
import { createSignal } from "solid-js"
33
import NumberFlow from "solid-number-flow"
44
import Demo, { type DemoProps, DemoSwitch } from "@/components/demos/base-demo"
5+
import Code from "@/components/demos/snippets/continuous.mdx"
56
import { useCycle } from "@/hooks/use-cycle"
67

78
const NUMBERS = [120, 140]
@@ -10,21 +11,10 @@ export default function ContinuousDemo(props: Omit<DemoProps, "children" | "code
1011
const [value, cycleValue] = useCycle(NUMBERS)
1112
const [isContinuous, setContinuous] = createSignal(true)
1213

13-
const code = `
14-
\`\`\`tsx
15-
import NumberFlow, { continuous } from 'solid-number-flow'
16-
17-
<NumberFlow
18-
plugins={[continuous]}
19-
value={value}
20-
/>
21-
\`\`\`
22-
`
23-
2414
return (
2515
<Demo
2616
{...props}
27-
code={code}
17+
code={Code}
2818
title={
2919
<DemoSwitch checked={isContinuous()} onChange={setContinuous}>
3020
<code class="font-semibold">continuous</code>

‎apps/site/components/demos/group.tsx‎

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import NumberFlow, { NumberFlowGroup } from "solid-number-flow"
22
import Demo, { type DemoProps } from "@/components/demos/base-demo"
3+
import Code from "@/components/demos/snippets/group.mdx"
34
import { useCycle } from "@/hooks/use-cycle"
45
import { cn } from "@/utils/cn"
56

@@ -12,37 +13,8 @@ const DATA = [
1213
export default function GroupDemo(props: Omit<DemoProps, "children" | "code">) {
1314
const [data, cycleData] = useCycle(DATA)
1415

15-
const code = `
16-
\`\`\`tsx
17-
import NumberFlow, { NumberFlowGroup } from 'solid-number-flow'
18-
19-
<NumberFlowGroup>
20-
<div
21-
style={{ "--number-flow-char-height": "0.85em" }}
22-
class="flex items-center gap-4 font-semibold"
23-
>
24-
<NumberFlow
25-
value={value}
26-
locales="en-US"
27-
format={{ style: 'currency', currency: 'USD' }}
28-
class="~text-2xl/4xl"
29-
/>
30-
<NumberFlow
31-
value={diff}
32-
locales="en-US"
33-
format={{ style: 'percent', maximumFractionDigits: 2, signDisplay: 'always' }}
34-
class={cn(
35-
"~text-lg/2xl transition-colors duration-300",
36-
diff < 0 ? "text-red-500" : "text-emerald-500"
37-
)}
38-
/>
39-
</div>
40-
</NumberFlowGroup>
41-
\`\`\`
42-
`
43-
4416
return (
45-
<Demo {...props} code={code} onClick={cycleData}>
17+
<Demo {...props} code={Code} onClick={cycleData}>
4618
<NumberFlowGroup>
4719
<div
4820
style={{ "--number-flow-char-height": "0.85em" }}

‎apps/site/components/demos/isolate.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,16 @@
11
import { createSignal } from "solid-js"
22
import NumberFlow from "solid-number-flow"
33
import Demo, { type DemoProps, DemoSwitch } from "@/components/demos/base-demo"
4+
import Code from "@/components/demos/snippets/isolate.mdx"
45

56
export default function IsolateDemo(props: Omit<DemoProps, "children" | "code">) {
67
const [increased, setIncreased] = createSignal(false)
78
const [isolate, setIsolate] = createSignal(false)
89

9-
const code = `
10-
\`\`\`tsx
11-
<NumberFlow
12-
isolate={${isolate()}}
13-
value={${increased() ? 1.2423 : 0.4175}}
14-
format={{ style: 'percent' }}
15-
/>
16-
\`\`\`
17-
`
18-
1910
return (
2011
<Demo
2112
{...props}
22-
code={code}
13+
code={Code}
2314
title={
2415
<DemoSwitch checked={isolate()} onChange={setIsolate}>
2516
<code class="font-semibold">isolate</code>

‎apps/site/components/demos/snippets/continuous.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
```tsx
2+
import NumberFlow, { continuous } from 'solid-number-flow'
3+
4+
<NumberFlow
5+
plugins={[continuous]}
6+
value={value}
7+
/>
8+
```

‎apps/site/components/demos/snippets/group.mdx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
```tsx
2+
import NumberFlow, { NumberFlowGroup } from 'solid-number-flow'
3+
4+
<NumberFlowGroup>
5+
<div
6+
style={{ "--number-flow-char-height": "0.85em" }}
7+
class="flex items-center gap-4 font-semibold"
8+
>
9+
<NumberFlow
10+
value={value}
11+
locales="en-US"
12+
format={{ style: 'currency', currency: 'USD' }}
13+
class="~text-2xl/4xl"
14+
/>
15+
<NumberFlow
16+
value={diff}
17+
locales="en-US"
18+
format={{ style: 'percent', maximumFractionDigits: 2, signDisplay: 'always' }}
19+
class={cn(
20+
"~text-lg/2xl transition-colors duration-300",
21+
diff < 0 ? "text-red-500" : "text-emerald-500"
22+
)}
23+
/>
24+
</div>
25+
</NumberFlowGroup>
26+
```

‎apps/site/components/demos/snippets/isolate.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
```tsx
2+
<NumberFlow
3+
isolate={isolate}
4+
value={value}
5+
format={{ style: 'percent' }}
6+
/>
7+
```

‎apps/site/components/demos/snippets/styling.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
```css
2+
number-flow::part(suffix) {
3+
margin-left: .0625em;
4+
font-weight: normal;
5+
font-size: 0.75em;
6+
color: var(--muted);
7+
}
8+
```

‎apps/site/components/demos/snippets/suffix.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
```tsx
2+
<NumberFlow
3+
value={value}
4+
format={{ style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }}
5+
suffix="/mo"
6+
/>
7+
```

‎apps/site/components/demos/snippets/tabular-nums.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
```tsx
2+
<NumberFlow
3+
style={{
4+
fontVariantNumeric: tabularNums ? 'tabular-nums' : undefined
5+
}}
6+
value={value}
7+
/>
8+
```

0 commit comments

Comments
 (0)