doc: Add hint to look at URL in demo

Author: franky47

packages/docs/components.json

@@ -6,7 +6,7 @@
   "tailwind": {
     "config": "tailwind.config.ts",
     "css": "src/app/globals.css",
-    "baseColor": "gray",
+    "baseColor": "zinc",
     "cssVariables": true,
     "prefix": ""
   },

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

@@ -11,16 +11,18 @@ export function Demo() {
   return (
     <>
       <button
-        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"
+        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"
         onClick={() => setCount(c => c + 1)}
+        data-interacted={count > 0}
       >
         Count: {count}
       </button>
       <input
         value={hello}
         placeholder="Enter your name"
-        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"
+        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"
         onChange={e => setHello(e.target.value || null)}
+        data-interacted={Boolean(hello)}
       />
       <p>Hello, {hello || 'anonymous visitor'}!</p>
     </>

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

@@ -14,7 +14,10 @@ export async function LandingDemo() {
   const demoCode = await codeToHtml(
     demoFile
       .split('\n')
-      .filter(line => !line.includes('className="'))
+      .filter(
+        line =>
+          !line.includes('className="') && !line.includes('data-interacted=')
+      )
       .join('\n')
       .replaceAll('next-usequerystate', 'nuqs'),
     {
@@ -48,11 +51,12 @@ export async function LandingDemo() {
     <>
       <Suspense
         fallback={
-          <div className="mb-4 h-10 animate-pulse rounded bg-gray-50 dark:bg-gray-900" />
+          <div className="mb-4 h-[136px] animate-pulse rounded bg-zinc-50 dark:bg-zinc-900 sm:h-10" />
         }
       >
         <div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center">
           <Demo />
+          <LookAtTheURL />
         </div>
       </Suspense>
       <div
@@ -62,3 +66,49 @@ export async function LandingDemo() {
     </>
   )
 }
+
+function LookAtTheURL() {
+  return (
+    <svg
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 270.7398884431316 71.55654506560859"
+      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"
+      // width="541.4797768862632"
+      // height="143.11309013121718"
+    >
+      <text
+        x="84.43988539137376"
+        y="33.319640699669435"
+        font-family="Virgil, Segoe UI Emoji"
+        font-size="20px"
+        fill="currentColor"
+        direction="ltr"
+        dominantBaseline="text-before-edge"
+      >
+        Look at the URL!
+      </text>
+      <g strokeLinecap="round" className="opacity-50">
+        <path
+          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"
+          stroke="currentColor"
+          strokeWidth="1"
+          fill="none"
+          strokeDasharray="3 4"
+        />
+        <path
+          d="m18 24-8-14m8 14-8-14"
+          stroke="currentColor"
+          strokeWidth="1"
+          fill="none"
+        />
+        <path
+          d="m7 26 3-16M7 26l3-16"
+          stroke="currentColor"
+          strokeWidth="1"
+          fill="none"
+        />
+      </g>
+    </svg>
+  )
+}

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

@@ -144,7 +144,7 @@ export function Feature({ title, description, icon, isNew }: FeatureProps) {
             )}
           </h3>
         </div>
-        <p className="text-gray-500 dark:text-gray-300 md:text-lg/relaxed xl:text-xl/relaxed">
+        <p className="text-zinc-500 dark:text-zinc-300 md:text-lg/relaxed xl:text-xl/relaxed">
           {description}
         </p>
       </div>

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

@@ -45,7 +45,7 @@ export function HeroSection() {
           </a>
         </nav>
       </aside>
-      <aside className="my-4 xl:my-8 xl:flex-1">
+      <aside className="relative my-4 xl:my-8 xl:flex-1">
         <LandingDemo />
       </aside>
       <div

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

@@ -114,7 +114,7 @@ export const SvgCurveGraph: React.FC<SvgCurveGraphProps> = ({
                 className={twJoin(
                   'opacity-0 transition-opacity ease-out group-hover/bar:opacity-100 group-hover/all:transition-none',
                   'stroke-current',
-                  'fill-white dark:fill-gray-900'
+                  'fill-white dark:fill-zinc-900'
                 )}
               />
               <text
@@ -136,7 +136,7 @@ export const SvgCurveGraph: React.FC<SvgCurveGraphProps> = ({
               </text>
               <text
                 className={twJoin(
-                  'select-none fill-gray-500 text-xs tabular-nums',
+                  'select-none fill-zinc-500 text-xs tabular-nums',
                   // Fade in and out when the whole graph is hovered, but
                   // don't fade between bars
                   '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> = ({
             {formatNumber(summaryValue)}
           </text>
           <text
-            className="fill-gray-500 text-xs tabular-nums"
+            className="fill-zinc-500 text-xs tabular-nums"
             strokeWidth={2.5}
             strokeLinejoin="round"
             x={w}

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

@@ -30,7 +30,7 @@ export default function RootDocsLayout({ children }: { children: ReactNode }) {
 async function SidebarFooter() {
   const version = await getLatestVersion()
   return (
-    <footer className="flex w-full items-baseline gap-2 text-gray-600 dark:text-gray-400">
+    <footer className="flex w-full items-baseline gap-2 text-zinc-600 dark:text-zinc-400">
       <a
         href={`https://npmjs.com/package/nuqs/v/${version}`}
         className="hover:underline"

packages/docs/src/app/globals.css

@@ -73,3 +73,10 @@
     text-decoration: var(--shiki-dark-text-decoration) !important;
   }
 }
+
+@layer base {
+  @font-face {
+    font-family: 'Virgil';
+    src: url(https://excalidraw.com/Virgil.woff2);
+  }
+}

packages/docs/src/components/logo.tsx

@@ -10,13 +10,13 @@ export function NuqsWordmark({
       className={cn('whitespace-nowrap', className)}
       {...props}
     >
-      <span className="font-light text-gray-300 dark:text-gray-700">?</span>
+      <span className="font-light text-zinc-300 dark:text-zinc-700">?</span>
       <span className="font-bold">n</span>
-      <span className="font-light text-gray-300 dark:text-gray-700">=</span>
+      <span className="font-light text-zinc-300 dark:text-zinc-700">=</span>
       <span className="font-bold">u</span>
-      <span className="font-light text-gray-300 dark:text-gray-700">&</span>
+      <span className="font-light text-zinc-300 dark:text-zinc-700">&</span>
       <span className="font-bold">q</span>
-      <span className="font-light text-gray-300 dark:text-gray-700">=</span>
+      <span className="font-light text-zinc-300 dark:text-zinc-700">=</span>
       <span className="font-bold">s</span>
     </span>
   )