doc: Refactor playground

packages/docs/next.config.mjs

@@ -26,12 +26,18 @@ const config = {
       },
       {
         protocol: 'https',
-        hostname: 'avatars.githubusercontent.com'
+        hostname: 'avatars.githubusercontent.com',
+        pathname: '/u/**'
       },
       {
         protocol: 'https',
         hostname: 'media.licdn.com',
         pathname: '/dms/image/**'
+      },
+      {
+        protocol: 'https',
+        hostname: 'i.redd.it',
+        pathname: '/snoovatar/avatars/**'
       }
     ]
   }

packages/docs/package.json

@@ -9,16 +9,24 @@
     "start": "next start"
   },
   "dependencies": {
+    "@faker-js/faker": "^8.4.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-toggle-group": "^1.0.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "dayjs": "^1.11.10",
+    "execa": "^8.0.1",
     "lucide-react": "^0.298.0",
     "next": "14.0.4",
     "next-docs-mdx": "^6.0.2",
     "next-docs-ui": "^6.0.2",
     "next-docs-zeta": "^6.0.2",
     "nuqs": "workspace:*",
+    "pretty-bytes": "^6.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "recharts": "^2.10.3",

packages/docs/src/app/(pages)/_landing/bundle-size.tsx

@@ -0,0 +1,11 @@
+import { execa } from 'execa'
+import path from 'node:path'
+import prettyBytes from 'pretty-bytes'
+
+export async function BundleSize() {
+  const { stdout } = await execa('./node_modules/.bin/size-limit', ['--json'], {
+    cwd: path.resolve(process.cwd(), '../../packages/nuqs')
+  })
+  const [{ size }] = JSON.parse(stdout)
+  return prettyBytes(size)
+}

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

@@ -1,8 +1,8 @@
+import { CodeBlock } from '@/src/components/code-block'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { Suspense } from 'react'
-import { codeToHtml } from 'shikiji'
 import { Demo } from './demo.client'
 
 export async function LandingDemo() {
@@ -11,42 +11,14 @@ export async function LandingDemo() {
     './demo.client.tsx'
   )
   const demoFile = await fs.readFile(demoFilePath, 'utf8')
-  const demoCode = await codeToHtml(
-    demoFile
-      .split('\n')
-      .filter(
-        line =>
-          !line.includes('className="') && !line.includes('data-interacted=')
-      )
-      .join('\n')
-      .replaceAll('next-usequerystate', 'nuqs'),
-    {
-      lang: 'tsx',
-      themes: {
-        dark: 'github-dark',
-        light: 'github-light'
-      },
-      transformers: [
-        {
-          name: 'transparent background',
-          pre(node) {
-            if (typeof node.properties.style !== 'string') {
-              return node
-            }
-            node.properties.style = node.properties.style
-              .split(';')
-              .filter(style => !style.includes('-bg:'))
-              .concat([
-                '--shiki-dark-bg:transparent',
-                '--shiki-light-bg:transparent'
-              ])
-              .join(';')
-            return node
-          }
-        }
-      ]
-    }
-  )
+  const demoCode = demoFile
+    .split('\n')
+    .filter(
+      line =>
+        !line.includes('className="') && !line.includes('data-interacted=')
+    )
+    .join('\n')
+    .replaceAll('next-usequerystate', 'nuqs')
   return (
     <>
       <Suspense
@@ -59,10 +31,7 @@ export async function LandingDemo() {
           <LookAtTheURL />
         </div>
       </Suspense>
-      <div
-        className="overflow-x-auto rounded-lg border bg-background p-3 text-xs shadow-inner dark:bg-zinc-900 sm:text-sm"
-        dangerouslySetInnerHTML={{ __html: demoCode }}
-      />
+      <CodeBlock code={demoCode} />
     </>
   )
 }

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

@@ -13,6 +13,7 @@ import {
   TestTube2
 } from 'lucide-react'
 import React from 'react'
+import { BundleSize } from './bundle-size'
 
 export function FeaturesSection(props: React.ComponentProps<'section'>) {
   return (
@@ -101,7 +102,11 @@ export function FeaturesSection(props: React.ComponentProps<'section'>) {
       <Feature
         icon={<Feather size={32} />}
         title="Tiny"
-        description="Only 3.9kb gzipped."
+        description={
+          <>
+            Only <BundleSize /> gzipped.
+          </>
+        }
       />
       <Feature
         icon={<TestTube2 size={32} />}

packages/docs/src/app/(pages)/_landing/quotes/quotes-section.tsx

@@ -18,7 +18,7 @@ export function QuotesSection() {
         }
         author={{
           name: 'N8',
-          handle: 'nathanbrachotte',
+          handle: '@nathanbrachotte',
           avatar:
             'https://pbs.twimg.com/profile_images/1589918605977722882/Iu7GZSZ9_400x400.jpg'
         }}
@@ -28,7 +28,7 @@ export function QuotesSection() {
         text="The DX improvement using nuqs for me has been amazing."
         author={{
           name: 'Kingsley O.',
-          handle: 'Kingsley_codes',
+          handle: '@Kingsley_codes',
           avatar:
             'https://pbs.twimg.com/profile_images/1679549288689352704/RqDBl9w1_400x400.jpg'
         }}
@@ -48,6 +48,34 @@ export function QuotesSection() {
           </>
         }
       />
+      <Quote
+        author={{
+          name: 'Acropolis1111',
+          handle: '/u/Acropolis1111',
+          avatar:
+            'https://i.redd.it/snoovatar/avatars/nftv2_bmZ0X2VpcDE1NToxMzdfZWI5NTlhNzE1ZGZmZmU2ZjgyZjQ2MDU1MzM5ODJjNDg1OWNiMTRmZV8yNTI4MjUxOA_rare_41d7bb59-a0cc-4579-9823-72042de422e3-headshot.png'
+        }}
+        text="This package is dope"
+        url="https://www.reddit.com/r/nextjs/comments/196g6kp/comment/khtdy3j"
+      />
+      <Quote
+        author={{
+          name: 'Darathor17',
+          avatar: 'https://avatars.githubusercontent.com/u/24258247?v=4'
+        }}
+        text="thx a lot for this awesome library! I was syncing with URL like nextjs recommends .. performance are awful and I was about to move back to useState."
+        url="https://github.com/47ng/nuqs/discussions/444"
+      />
+      <Quote
+        author={{
+          name: 'KafKa',
+          handle: '@KafKa303',
+          avatar:
+            'https://pbs.twimg.com/profile_images/703581659543654400/7WNdakTi_400x400.jpg'
+        }}
+        text="This is a great idea, way better than calling useSearchParam and cook my own stuff! nuqs is such a important last piece for app router! An extremely underrated lib!"
+        url="https://twitter.com/KafKa303/status/1751058161740693694"
+      />
     </section>
   )
 }

packages/docs/src/app/docs/[[...slug]]/page.tsx

@@ -1,4 +1,5 @@
 import { getPage, pages } from '@/src/app/source'
+import { Description, H1 } from '@/src/components/typography'
 import type { Metadata } from 'next'
 import { DocsBody, DocsPage } from 'next-docs-ui/page'
 import { notFound } from 'next/navigation'
@@ -20,12 +21,8 @@ export default async function Page({
     <DocsPage url={page.url} toc={page.data.toc}>
       <DocsBody>
         <div className="not-prose mb-12">
-          <h1 className="mb-4 text-3xl font-bold text-foreground sm:text-4xl">
-            {page.matter.title}
-          </h1>
-          <p className="text-lg text-muted-foreground">
-            {page.matter.description}
-          </p>
+          <H1>{page.matter.title}</H1>
+          <Description>{page.matter.description}</Description>
         </div>
         <MDX />
       </DocsBody>

packages/docs/src/app/layout.tsx

@@ -39,6 +39,7 @@ export default function Layout({ children }: { children: ReactNode }) {
             data-chiffre-public-key="pk.3EPMj_faODyzisb0UNmZnzhIkG9sbj7zR5em6lf7Olk"
             referrerPolicy="origin"
             crossOrigin="anonymous"
+            data-chiffre-ignore-paths="/stats"
           />
         )}
       </body>

packages/docs/src/app/playground/(demos)/_components/query-spy.skeleton.tsx

@@ -0,0 +1,21 @@
+import { twMerge } from 'tailwind-merge'
+
+export function QuerySpySkeleton({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'pre'>) {
+  return (
+    <pre
+      aria-label="Querystring spy"
+      aria-description="For browsers where the query is hard to see (eg: on mobile)"
+      className={twMerge(
+        'mt-4 block w-full overflow-x-auto rounded-lg border bg-background px-3 py-2 text-xs dark:bg-zinc-900 dark:shadow-inner sm:text-sm',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </pre>
+  )
+}