Skip to content

Commit

Permalink
Merge branch 'main' into canary
Browse files Browse the repository at this point in the history
# Conflicts:
#	docs/pages/docs/environments/actions-metadata-route-handlers.mdx
#	docs/pages/docs/routing/navigation.mdx
#	pnpm-lock.yaml
  • Loading branch information
amannn committed Oct 17, 2024
2 parents a9a7391 + fe949a5 commit 126a420
Show file tree
Hide file tree
Showing 55 changed files with 7,576 additions and 7,221 deletions.
29 changes: 29 additions & 0 deletions docs/components/Button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import {Button as HeadlessButton} from '@headlessui/react';
import type {ButtonProps} from '@headlessui/react';
import clsx from 'clsx';
import type {ReactElement} from 'react';

export default function Button({
className,
variant = 'default',
...props
}: ButtonProps & {
variant?: 'outline' | 'default';
}): ReactElement {
return (
<HeadlessButton
className={(args) =>
clsx(
'transition',
args.focus && 'nextra-focusable',
variant === 'outline' && [
'border border-gray-300 dark:border-neutral-700',
'rounded-md p-1.5'
],
typeof className === 'function' ? className(args) : className
)
}
{...props}
/>
);
}
12 changes: 6 additions & 6 deletions docs/components/Callout.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import cn from 'clsx';
import clsx from 'clsx';
import {ReactNode} from 'react';

type Props = {
Expand All @@ -16,13 +16,13 @@ const TypeToEmoji = {
};

const classes = {
default: cn(
default: clsx(
'border-green-700/20 bg-green-50 text-green-800 dark:border-green-400/40 dark:bg-green-700/30 dark:text-white/90'
),
warning: cn(
warning: clsx(
'border-yellow-700/20 bg-yellow-50 text-yellow-900 dark:border-yellow-400/40 dark:bg-yellow-700/30 dark:text-white/90'
),
question: cn(
question: clsx(
'border-sky-700/20 bg-sky-50 text-sky-800 dark:border-sky-400/40 dark:bg-sky-700/30 dark:text-white/90'
)
};
Expand All @@ -36,7 +36,7 @@ export default function Callout({
}: Props) {
return (
<div
className={cn(
className={clsx(
className,
'nextra-callout mt-6 flex overflow-x-auto rounded-lg border py-3 ltr:pr-4 rtl:pl-4',
'contrast-more:border-current contrast-more:dark:border-current',
Expand All @@ -51,7 +51,7 @@ export default function Callout({
>
{emoji}
</div>
<div className="nx-w-full nx-min-w-0 nx-leading-7">
<div className="w-full min-w-0 leading-7">
{title && (
<p className="mb-1">
<strong>{title}</strong>
Expand Down
50 changes: 50 additions & 0 deletions docs/components/CopyToClipboard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import type {ComponentProps, ReactElement} from 'react';
import {useCallback, useEffect, useState} from 'react';
import Button from './Button';
import CheckIcon from './icons/CheckIcon';
import CopyIcon from './icons/CopyIcon';

export default function CopyToClipboard({
getValue,
...props
}: ComponentProps<typeof Button> & {
getValue(): string;
}): ReactElement {
const [isCopied, setCopied] = useState(false);

useEffect(() => {
if (!isCopied) return;
const timerId = setTimeout(() => {
setCopied(false);
}, 2000);

return () => {
clearTimeout(timerId);
};
}, [isCopied]);

const handleClick = useCallback(async () => {
setCopied(true);
if (!navigator?.clipboard) {
console.error('Access to clipboard rejected!');
}
try {
await navigator.clipboard.writeText(getValue());
} catch {
console.error('Failed to copy!');
}
}, [getValue]);

const IconToUse = isCopied ? CheckIcon : CopyIcon;

return (
<Button
onClick={handleClick}
title="Copy code"
variant="outline"
{...props}
>
<IconToUse className="nextra-copy-icon" height="16" />
</Button>
);
}
4 changes: 2 additions & 2 deletions docs/components/Details.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import useLocationHash from 'hooks/useLocationHash';
import {useMDXComponents} from 'nextra-theme-docs';
import {useMDXComponents} from 'nextra/mdx';
import {ComponentProps, useEffect, useReducer} from 'react';

type Props = ComponentProps<'details'>;
Expand Down Expand Up @@ -33,7 +33,7 @@ export default function Details({children, id, ...rest}: Props) {
{id && (
<a
aria-label="Permalink for this section"
className="subheading-anchor absolute right-3 top-3"
className="subheading-anchor absolute right-3 top-3 scroll-m-[5rem]"
href={`#${id}`}
id={id}
>
Expand Down
10 changes: 7 additions & 3 deletions docs/components/Example.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import {clsx} from 'clsx';
import useLocationHash from 'hooks/useLocationHash';
import Image from 'next/image';

Expand Down Expand Up @@ -41,7 +42,10 @@ export default function Example({
<div className="relative">
<a
aria-label="Permalink for this example"
className="subheading-anchor absolute right-0 top-0 scroll-m-[24rem]"
className={clsx(
'subheading-anchor absolute right-0 top-0',
image ? 'scroll-m-[28rem]' : 'scroll-m-[5rem]'
)}
href={`#${id}`}
id={id}
>
Expand All @@ -56,7 +60,7 @@ export default function Example({
</p>
<div className="mt-2">
<a
className="nx-text-primary-600 inline-block text-base underline"
className="inline-block text-base text-primary-600 underline"
href={sourceLink}
rel="noreferrer"
target="_blank"
Expand All @@ -69,7 +73,7 @@ export default function Example({
{' ・ '}
</span>
<a
className="nx-text-primary-600 inline-block text-base underline"
className="inline-block text-base text-primary-600 underline"
href={demoLink}
rel="noreferrer"
target="_blank"
Expand Down
31 changes: 31 additions & 0 deletions docs/components/GetStartedBackground.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
@keyframes pulsate {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

.dot1 {
animation: pulsate 4s infinite;
}

.dot2 {
animation: pulsate 4s infinite 1s;
}

.dot3 {
animation: pulsate 4s infinite 4s;
}

.dot4 {
animation: pulsate 4s infinite 3s;
}

.dot5 {
animation: pulsate 4s infinite 2s;
}
89 changes: 89 additions & 0 deletions docs/components/GetStartedBackground.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import styles from './GetStartedBackground.module.css';

export default function GetStartedBackground() {
const size = 530;
const radius = 2;
const className =
'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-screen';
const patternSize = 19;

return (
<>
<svg
className={className}
height={size}
viewBox="0 0 500 500"
width={size}
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<pattern
height={patternSize}
id="dots"
patternUnits="userSpaceOnUse"
width={patternSize}
>
<circle cx="3" cy="3" fill="#D0D3E2" r={radius} />
</pattern>
<radialGradient cx="50%" cy="50%" id="fade-out" r="50%">
<stop offset="0%" stopColor="white" stopOpacity="1" />
<stop offset="100%" stopColor="white" stopOpacity="0" />
</radialGradient>
<mask id="fade-mask">
<rect fill="url(#fade-out)" height="500" width="500" />
</mask>
</defs>
<rect
clipPath="url(#circle-clip)"
fill="url(#dots)"
height="500"
mask="url(#fade-mask)"
width="500"
/>
</svg>
<svg
className={className}
height={size}
viewBox="0 0 500 500"
width={size}
xmlns="http://www.w3.org/2000/svg"
>
<circle
className={styles.dot1}
cx="99"
cy="155"
fill="#7b42f6"
r={radius}
/>
<circle
className={styles.dot2}
cx="193"
cy="193"
fill="#0284c7"
r={radius}
/>
<circle
className={styles.dot3}
cx="307"
cy="98"
fill="#1E293C"
r={radius}
/>
<circle
className={styles.dot4}
cx="250"
cy="345"
fill="#5c9eff"
r={radius}
/>
<circle
className={styles.dot5}
cx="402"
cy="250"
fill="#7b42f6"
r={radius}
/>
</svg>
</>
);
}
2 changes: 1 addition & 1 deletion docs/components/Hero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function Hero({
<Wrapper>
<div className="flex flex-col gap-16 xl:flex-row xl:items-center xl:justify-between">
<div className="max-w-2xl">
<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">
<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">
{title}
</h1>

Expand Down
8 changes: 4 additions & 4 deletions docs/components/HeroCode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import clsx from 'clsx';
import {ReactNode, useState} from 'react';

function Tab({
function CodeTab({
active,
children,
onClick
Expand Down Expand Up @@ -333,16 +333,16 @@ export default function HeroCode() {
</svg>
<div className="mt-4 flex space-x-2 overflow-x-auto">
{files.map((file) => (
<Tab
<CodeTab
key={file.name}
active={fileIndex === files.indexOf(file)}
onClick={() => setFileIndex(files.indexOf(file))}
>
{file.name}
</Tab>
</CodeTab>
))}
</div>
<div className="mt-6 flex items-start lg:min-h-[260px] lg:w-[684px]">
<div className="mt-6 flex items-start lg:min-h-[275px] lg:w-[684px]">
<pre className="ml-[-16px] flex overflow-x-auto px-0" data-theme>
{files[fileIndex].code}
</pre>
Expand Down
2 changes: 1 addition & 1 deletion docs/components/LinkButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function LinkButton({
className={clsx(
'group inline-block rounded-full px-4 py-2 text-base font-semibold transition-colors lg:px-8 lg:py-4',
variant === 'primary'
? 'bg-slate-800 text-white hover:bg-slate-700 dark:bg-primary dark:text-slate-900 dark:hover:bg-sky-200'
? 'bg-slate-800 text-white hover:bg-slate-700 dark:bg-primary-400 dark:text-slate-900 dark:hover:bg-sky-200'
: 'bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-white/90 dark:hover:bg-slate-700'
)}
{...rest}
Expand Down
Loading

0 comments on commit 126a420

Please sign in to comment.