Skip to content

Commit 323ef22

Browse files
amannnamannn
authored
docs: Upgrade to Nextra 3 (#1427)
Necessary in preparation for React 19. Also add dynamic OG images.
1 parent fa341f3 commit 323ef22

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+7785
-7311
lines changed

‎docs/components/Button.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {Button as HeadlessButton} from '@headlessui/react';
2+
import type {ButtonProps} from '@headlessui/react';
3+
import clsx from 'clsx';
4+
import type {ReactElement} from 'react';
5+
6+
export default function Button({
7+
className,
8+
variant = 'default',
9+
...props
10+
}: ButtonProps & {
11+
variant?: 'outline' | 'default';
12+
}): ReactElement {
13+
return (
14+
<HeadlessButton
15+
className={(args) =>
16+
clsx(
17+
'transition',
18+
args.focus && 'nextra-focusable',
19+
variant === 'outline' && [
20+
'border border-gray-300 dark:border-neutral-700',
21+
'rounded-md p-1.5'
22+
],
23+
typeof className === 'function' ? className(args) : className
24+
)
25+
}
26+
{...props}
27+
/>
28+
);
29+
}

‎docs/components/Callout.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import cn from 'clsx';
1+
import clsx from 'clsx';
22
import {ReactNode} from 'react';
33

44
type Props = {
@@ -16,13 +16,13 @@ const TypeToEmoji = {
1616
};
1717

1818
const classes = {
19-
default: cn(
19+
default: clsx(
2020
'border-green-700/20 bg-green-50 text-green-800 dark:border-green-400/40 dark:bg-green-700/30 dark:text-white/90'
2121
),
22-
warning: cn(
22+
warning: clsx(
2323
'border-yellow-700/20 bg-yellow-50 text-yellow-900 dark:border-yellow-400/40 dark:bg-yellow-700/30 dark:text-white/90'
2424
),
25-
question: cn(
25+
question: clsx(
2626
'border-sky-700/20 bg-sky-50 text-sky-800 dark:border-sky-400/40 dark:bg-sky-700/30 dark:text-white/90'
2727
)
2828
};
@@ -36,7 +36,7 @@ export default function Callout({
3636
}: Props) {
3737
return (
3838
<div
39-
className={cn(
39+
className={clsx(
4040
className,
4141
'nextra-callout mt-6 flex overflow-x-auto rounded-lg border py-3 ltr:pr-4 rtl:pl-4',
4242
'contrast-more:border-current contrast-more:dark:border-current',
@@ -51,7 +51,7 @@ export default function Callout({
5151
>
5252
{emoji}
5353
</div>
54-
<div className="nx-w-full nx-min-w-0 nx-leading-7">
54+
<div className="w-full min-w-0 leading-7">
5555
{title && (
5656
<p className="mb-1">
5757
<strong>{title}</strong>

‎docs/components/CopyToClipboard.tsx

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import type {ComponentProps, ReactElement} from 'react';
2+
import {useCallback, useEffect, useState} from 'react';
3+
import Button from './Button';
4+
import CheckIcon from './icons/CheckIcon';
5+
import CopyIcon from './icons/CopyIcon';
6+
7+
export default function CopyToClipboard({
8+
getValue,
9+
...props
10+
}: ComponentProps<typeof Button> & {
11+
getValue(): string;
12+
}): ReactElement {
13+
const [isCopied, setCopied] = useState(false);
14+
15+
useEffect(() => {
16+
if (!isCopied) return;
17+
const timerId = setTimeout(() => {
18+
setCopied(false);
19+
}, 2000);
20+
21+
return () => {
22+
clearTimeout(timerId);
23+
};
24+
}, [isCopied]);
25+
26+
const handleClick = useCallback(async () => {
27+
setCopied(true);
28+
if (!navigator?.clipboard) {
29+
console.error('Access to clipboard rejected!');
30+
}
31+
try {
32+
await navigator.clipboard.writeText(getValue());
33+
} catch {
34+
console.error('Failed to copy!');
35+
}
36+
}, [getValue]);
37+
38+
const IconToUse = isCopied ? CheckIcon : CopyIcon;
39+
40+
return (
41+
<Button
42+
onClick={handleClick}
43+
title="Copy code"
44+
variant="outline"
45+
{...props}
46+
>
47+
<IconToUse className="nextra-copy-icon" height="16" />
48+
</Button>
49+
);
50+
}

‎docs/components/Details.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import useLocationHash from 'hooks/useLocationHash';
2-
import {useMDXComponents} from 'nextra-theme-docs';
2+
import {useMDXComponents} from 'nextra/mdx';
33
import {ComponentProps, useEffect, useReducer} from 'react';
44

55
type Props = ComponentProps<'details'>;
@@ -33,7 +33,7 @@ export default function Details({children, id, ...rest}: Props) {
3333
{id && (
3434
<a
3535
aria-label="Permalink for this section"
36-
className="subheading-anchor absolute right-3 top-3"
36+
className="subheading-anchor absolute right-3 top-3 scroll-m-[5rem]"
3737
href={`#${id}`}
3838
id={id}
3939
>

‎docs/components/Example.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {clsx} from 'clsx';
12
import useLocationHash from 'hooks/useLocationHash';
23
import Image from 'next/image';
34

@@ -41,7 +42,10 @@ export default function Example({
4142
<div className="relative">
4243
<a
4344
aria-label="Permalink for this example"
44-
className="subheading-anchor absolute right-0 top-0 scroll-m-[24rem]"
45+
className={clsx(
46+
'subheading-anchor absolute right-0 top-0',
47+
image ? 'scroll-m-[28rem]' : 'scroll-m-[5rem]'
48+
)}
4549
href={`#${id}`}
4650
id={id}
4751
>
@@ -56,7 +60,7 @@ export default function Example({
5660
</p>
5761
<div className="mt-2">
5862
<a
59-
className="nx-text-primary-600 inline-block text-base underline"
63+
className="inline-block text-base text-primary-600 underline"
6064
href={sourceLink}
6165
rel="noreferrer"
6266
target="_blank"
@@ -69,7 +73,7 @@ export default function Example({
6973
{' ・ '}
7074
</span>
7175
<a
72-
className="nx-text-primary-600 inline-block text-base underline"
76+
className="inline-block text-base text-primary-600 underline"
7377
href={demoLink}
7478
rel="noreferrer"
7579
target="_blank"

‎docs/components/GetStartedBackground.module.css

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@keyframes pulsate {
2+
0% {
3+
opacity: 0;
4+
}
5+
50% {
6+
opacity: 1;
7+
}
8+
100% {
9+
opacity: 0;
10+
}
11+
}
12+
13+
.dot1 {
14+
animation: pulsate 4s infinite;
15+
}
16+
17+
.dot2 {
18+
animation: pulsate 4s infinite 1s;
19+
}
20+
21+
.dot3 {
22+
animation: pulsate 4s infinite 4s;
23+
}
24+
25+
.dot4 {
26+
animation: pulsate 4s infinite 3s;
27+
}
28+
29+
.dot5 {
30+
animation: pulsate 4s infinite 2s;
31+
}

‎docs/components/GetStartedBackground.tsx

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import styles from './GetStartedBackground.module.css';
2+
3+
export default function GetStartedBackground() {
4+
const size = 530;
5+
const radius = 2;
6+
const className =
7+
'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-screen';
8+
const patternSize = 19;
9+
10+
return (
11+
<>
12+
<svg
13+
className={className}
14+
height={size}
15+
viewBox="0 0 500 500"
16+
width={size}
17+
xmlns="http://www.w3.org/2000/svg"
18+
>
19+
<defs>
20+
<pattern
21+
height={patternSize}
22+
id="dots"
23+
patternUnits="userSpaceOnUse"
24+
width={patternSize}
25+
>
26+
<circle cx="3" cy="3" fill="#D0D3E2" r={radius} />
27+
</pattern>
28+
<radialGradient cx="50%" cy="50%" id="fade-out" r="50%">
29+
<stop offset="0%" stopColor="white" stopOpacity="1" />
30+
<stop offset="100%" stopColor="white" stopOpacity="0" />
31+
</radialGradient>
32+
<mask id="fade-mask">
33+
<rect fill="url(#fade-out)" height="500" width="500" />
34+
</mask>
35+
</defs>
36+
<rect
37+
clipPath="url(#circle-clip)"
38+
fill="url(#dots)"
39+
height="500"
40+
mask="url(#fade-mask)"
41+
width="500"
42+
/>
43+
</svg>
44+
<svg
45+
className={className}
46+
height={size}
47+
viewBox="0 0 500 500"
48+
width={size}
49+
xmlns="http://www.w3.org/2000/svg"
50+
>
51+
<circle
52+
className={styles.dot1}
53+
cx="99"
54+
cy="155"
55+
fill="#7b42f6"
56+
r={radius}
57+
/>
58+
<circle
59+
className={styles.dot2}
60+
cx="193"
61+
cy="193"
62+
fill="#0284c7"
63+
r={radius}
64+
/>
65+
<circle
66+
className={styles.dot3}
67+
cx="307"
68+
cy="98"
69+
fill="#1E293C"
70+
r={radius}
71+
/>
72+
<circle
73+
className={styles.dot4}
74+
cx="250"
75+
cy="345"
76+
fill="#5c9eff"
77+
r={radius}
78+
/>
79+
<circle
80+
className={styles.dot5}
81+
cx="402"
82+
cy="250"
83+
fill="#7b42f6"
84+
r={radius}
85+
/>
86+
</svg>
87+
</>
88+
);
89+
}

‎docs/components/Hero.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default function Hero({
2828
<Wrapper>
2929
<div className="flex flex-col gap-16 xl:flex-row xl:items-center xl:justify-between">
3030
<div className="max-w-2xl">
31-
<h1 className="inline bg-gradient-to-r from-white via-sky-100 to-primary bg-clip-text text-3xl font-semibold leading-tight tracking-tight text-transparent lg:text-5xl">
31+
<h1 className="inline bg-gradient-to-r from-white via-sky-100 to-primary-400 bg-clip-text text-3xl font-semibold leading-tight tracking-tight text-transparent lg:text-5xl">
3232
{title}
3333
</h1>
3434

‎docs/components/HeroCode.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import clsx from 'clsx';
33
import {ReactNode, useState} from 'react';
44

5-
function Tab({
5+
function CodeTab({
66
active,
77
children,
88
onClick
@@ -333,16 +333,16 @@ export default function HeroCode() {
333333
</svg>
334334
<div className="mt-4 flex space-x-2 overflow-x-auto">
335335
{files.map((file) => (
336-
<Tab
336+
<CodeTab
337337
key={file.name}
338338
active={fileIndex === files.indexOf(file)}
339339
onClick={() => setFileIndex(files.indexOf(file))}
340340
>
341341
{file.name}
342-
</Tab>
342+
</CodeTab>
343343
))}
344344
</div>
345-
<div className="mt-6 flex items-start lg:min-h-[260px] lg:w-[684px]">
345+
<div className="mt-6 flex items-start lg:min-h-[275px] lg:w-[684px]">
346346
<pre className="ml-[-16px] flex overflow-x-auto px-0" data-theme>
347347
{files[fileIndex].code}
348348
</pre>

‎docs/components/LinkButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function LinkButton({
1616
className={clsx(
1717
'group inline-block rounded-full px-4 py-2 text-base font-semibold transition-colors lg:px-8 lg:py-4',
1818
variant === 'primary'
19-
? 'bg-slate-800 text-white hover:bg-slate-700 dark:bg-primary dark:text-slate-900 dark:hover:bg-sky-200'
19+
? 'bg-slate-800 text-white hover:bg-slate-700 dark:bg-primary-400 dark:text-slate-900 dark:hover:bg-sky-200'
2020
: 'bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-white/90 dark:hover:bg-slate-700'
2121
)}
2222
{...rest}

0 commit comments

Comments
 (0)