Skip to content

Commit f0f6de7

Browse files
franky47franky47
committed
doc: Add hint to look at URL in demo
1 parent c61b06d commit f0f6de7

File tree

9 files changed

+74
-15
lines changed

9 files changed

+74
-15
lines changed

‎packages/docs/components.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"tailwind": {
77
"config": "tailwind.config.ts",
88
"css": "src/app/globals.css",
9-
"baseColor": "gray",
9+
"baseColor": "zinc",
1010
"cssVariables": true,
1111
"prefix": ""
1212
},

‎packages/docs/src/app/(pages)/_landing/demo.client.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,18 @@ export function Demo() {
1111
return (
1212
<>
1313
<button
14-
className="inline-flex h-10 items-center justify-center whitespace-nowrap rounded-md bg-primary px-4 py-2 text-sm font-medium tabular-nums text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
14+
className="peer inline-flex h-10 items-center justify-center whitespace-nowrap rounded-md bg-primary px-4 py-2 text-sm font-medium tabular-nums text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
1515
onClick={() => setCount(c => c + 1)}
16+
data-interacted={count > 0}
1617
>
1718
Count: {count}
1819
</button>
1920
<input
2021
value={hello}
2122
placeholder="Enter your name"
22-
className="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
23+
className="peer flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
2324
onChange={e => setHello(e.target.value || null)}
25+
data-interacted={Boolean(hello)}
2426
/>
2527
<p>Hello, {hello || 'anonymous visitor'}!</p>
2628
</>

‎packages/docs/src/app/(pages)/_landing/demo.tsx‎

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ export async function LandingDemo() {
1414
const demoCode = await codeToHtml(
1515
demoFile
1616
.split('\n')
17-
.filter(line => !line.includes('className="'))
17+
.filter(
18+
line =>
19+
!line.includes('className="') && !line.includes('data-interacted=')
20+
)
1821
.join('\n')
1922
.replaceAll('next-usequerystate', 'nuqs'),
2023
{
@@ -48,11 +51,12 @@ export async function LandingDemo() {
4851
<>
4952
<Suspense
5053
fallback={
51-
<div className="mb-4 h-10 animate-pulse rounded bg-gray-50 dark:bg-gray-900" />
54+
<div className="mb-4 h-[136px] animate-pulse rounded bg-zinc-50 dark:bg-zinc-900 sm:h-10" />
5255
}
5356
>
5457
<div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center">
5558
<Demo />
59+
<LookAtTheURL />
5660
</div>
5761
</Suspense>
5862
<div
@@ -62,3 +66,49 @@ export async function LandingDemo() {
6266
</>
6367
)
6468
}
69+
70+
function LookAtTheURL() {
71+
return (
72+
<svg
73+
version="1.1"
74+
xmlns="http://www.w3.org/2000/svg"
75+
viewBox="0 0 270.7398884431316 71.55654506560859"
76+
className="pointer-events-none absolute -top-20 left-0 right-0 mx-auto w-64 select-none opacity-0 transition-opacity peer-data-[interacted=true]:opacity-100 sm:left-16 sm:right-auto sm:mx-0 xl:-left-72 xl:-top-6 xl:mx-0"
77+
// width="541.4797768862632"
78+
// height="143.11309013121718"
79+
>
80+
<text
81+
x="84.43988539137376"
82+
y="33.319640699669435"
83+
font-family="Virgil, Segoe UI Emoji"
84+
font-size="20px"
85+
fill="currentColor"
86+
direction="ltr"
87+
dominantBaseline="text-before-edge"
88+
>
89+
Look at the URL!
90+
</text>
91+
<g strokeLinecap="round" className="opacity-50">
92+
<path
93+
d="M72 50c-3 2-11 10-18 11s-17 1-23-3c-6-3-10-8-14-16-3-8-6-27-7-32m62 40c-3 2-11 10-18 11s-17 1-23-3c-6-3-10-8-14-16-3-8-6-27-7-32"
94+
stroke="currentColor"
95+
strokeWidth="1"
96+
fill="none"
97+
strokeDasharray="3 4"
98+
/>
99+
<path
100+
d="m18 24-8-14m8 14-8-14"
101+
stroke="currentColor"
102+
strokeWidth="1"
103+
fill="none"
104+
/>
105+
<path
106+
d="m7 26 3-16M7 26l3-16"
107+
stroke="currentColor"
108+
strokeWidth="1"
109+
fill="none"
110+
/>
111+
</g>
112+
</svg>
113+
)
114+
}

‎packages/docs/src/app/(pages)/_landing/features.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ export function Feature({ title, description, icon, isNew }: FeatureProps) {
144144
)}
145145
</h3>
146146
</div>
147-
<p className="text-gray-500 dark:text-gray-300 md:text-lg/relaxed xl:text-xl/relaxed">
147+
<p className="text-zinc-500 dark:text-zinc-300 md:text-lg/relaxed xl:text-xl/relaxed">
148148
{description}
149149
</p>
150150
</div>

‎packages/docs/src/app/(pages)/_landing/hero.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export function HeroSection() {
4545
</a>
4646
</nav>
4747
</aside>
48-
<aside className="my-4 xl:my-8 xl:flex-1">
48+
<aside className="relative my-4 xl:my-8 xl:flex-1">
4949
<LandingDemo />
5050
</aside>
5151
<div

‎packages/docs/src/app/(pages)/stats/_components/svg-curve-graph.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export const SvgCurveGraph: React.FC<SvgCurveGraphProps> = ({
114114
className={twJoin(
115115
'opacity-0 transition-opacity ease-out group-hover/bar:opacity-100 group-hover/all:transition-none',
116116
'stroke-current',
117-
'fill-white dark:fill-gray-900'
117+
'fill-white dark:fill-zinc-900'
118118
)}
119119
/>
120120
<text
@@ -136,7 +136,7 @@ export const SvgCurveGraph: React.FC<SvgCurveGraphProps> = ({
136136
</text>
137137
<text
138138
className={twJoin(
139-
'select-none fill-gray-500 text-xs tabular-nums',
139+
'select-none fill-zinc-500 text-xs tabular-nums',
140140
// Fade in and out when the whole graph is hovered, but
141141
// don't fade between bars
142142
'opacity-0 transition-opacity ease-out group-hover/bar:opacity-100 group-hover/all:transition-none'
@@ -170,7 +170,7 @@ export const SvgCurveGraph: React.FC<SvgCurveGraphProps> = ({
170170
{formatNumber(summaryValue)}
171171
</text>
172172
<text
173-
className="fill-gray-500 text-xs tabular-nums"
173+
className="fill-zinc-500 text-xs tabular-nums"
174174
strokeWidth={2.5}
175175
strokeLinejoin="round"
176176
x={w}

‎packages/docs/src/app/docs/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default function RootDocsLayout({ children }: { children: ReactNode }) {
3030
async function SidebarFooter() {
3131
const version = await getLatestVersion()
3232
return (
33-
<footer className="flex w-full items-baseline gap-2 text-gray-600 dark:text-gray-400">
33+
<footer className="flex w-full items-baseline gap-2 text-zinc-600 dark:text-zinc-400">
3434
<a
3535
href={`https://npmjs.com/package/nuqs/v/${version}`}
3636
className="hover:underline"

‎packages/docs/src/app/globals.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,10 @@
7373
text-decoration: var(--shiki-dark-text-decoration) !important;
7474
}
7575
}
76+
77+
@layer base {
78+
@font-face {
79+
font-family: 'Virgil';
80+
src: url(https://excalidraw.com/Virgil.woff2);
81+
}
82+
}

‎packages/docs/src/components/logo.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ export function NuqsWordmark({
1010
className={cn('whitespace-nowrap', className)}
1111
{...props}
1212
>
13-
<span className="font-light text-gray-300 dark:text-gray-700">?</span>
13+
<span className="font-light text-zinc-300 dark:text-zinc-700">?</span>
1414
<span className="font-bold">n</span>
15-
<span className="font-light text-gray-300 dark:text-gray-700">=</span>
15+
<span className="font-light text-zinc-300 dark:text-zinc-700">=</span>
1616
<span className="font-bold">u</span>
17-
<span className="font-light text-gray-300 dark:text-gray-700">&</span>
17+
<span className="font-light text-zinc-300 dark:text-zinc-700">&</span>
1818
<span className="font-bold">q</span>
19-
<span className="font-light text-gray-300 dark:text-gray-700">=</span>
19+
<span className="font-light text-zinc-300 dark:text-zinc-700">=</span>
2020
<span className="font-bold">s</span>
2121
</span>
2222
)

0 commit comments

Comments
 (0)