doc: Refactor playground (WIP)

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/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/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>
+  )
+}

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

@@ -3,6 +3,7 @@
 import { useSearchParams } from 'next/navigation'
 import { subscribeToQueryUpdates } from 'nuqs'
 import React from 'react'
+import { QuerySpySkeleton } from './query-spy.skeleton'
 
 export const QuerySpy: React.FC = () => {
   const initialSearchParams = useSearchParams()
@@ -26,21 +27,26 @@ export const QuerySpy: React.FC = () => {
     () => subscribeToQueryUpdates(({ search }) => setSearch(search)),
     []
   )
-  const qs = search.toString()
 
   return (
-    <pre
-      aria-label="Querystring spy"
-      aria-description="For browsers where the query is hard to see (eg: on mobile)"
-      style={{
-        padding: '4px 6px',
-        border: 'solid 1px gray',
-        borderRadius: '4px',
-        overflow: 'auto'
-      }}
-    >
-      {Boolean(qs) && <>?{qs}</>}
-      {!qs && <span style={{ fontStyle: 'italic' }}>{'<empty query>'}</span>}
-    </pre>
+    <QuerySpySkeleton>
+      {search.size > 0 && (
+        <span className="text-zinc-500">
+          ?
+          {Array.from(search.entries()).map(([key, value], i) => (
+            <React.Fragment key={key + i}>
+              <span className="text-[#005CC5] dark:text-[#79B8FF]">{key}</span>=
+              <span className="text-[#D73A49] dark:text-[#F97583]">
+                {value}
+              </span>
+              <span className="text-zinc-500 last:hidden">&</span>
+            </React.Fragment>
+          ))}
+        </span>
+      )}
+      {search.size === 0 && (
+        <span className="italic text-zinc-500">{'<empty query>'}</span>
+      )}
+    </QuerySpySkeleton>
   )
 }

packages/docs/src/app/playground/(demos)/_components/source-on-github.tsx

@@ -0,0 +1,38 @@
+import { CodeBlock } from '@/src/components/code-block'
+import { FileCode2 } from 'lucide-react'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'url'
+
+type SourceOnGitHubProps = {
+  path: string
+}
+
+export async function SourceOnGitHub({ path }: SourceOnGitHubProps) {
+  const source = await readSourceCode(path)
+  return (
+    <footer className="mt-2 space-y-2 border-t py-4">
+      <div className="flex items-baseline">
+        <span className="flex items-center gap-1 text-zinc-500">
+          <FileCode2 size={16} />
+          {path.split('/').slice(1).join('/')}
+        </span>
+        <a
+          href={`https://github.com/47ng/nuqs/tree/next/packages/docs/src/app/playground/(demos)/${path}`}
+          className="ml-auto text-sm"
+        >
+          Source on GitHub
+        </a>
+      </div>
+      <div className="not-prose overflow-hidden">
+        <CodeBlock code={source} />
+      </div>
+    </footer>
+  )
+}
+
+function readSourceCode(demoPath: string) {
+  const demosDir = path.resolve(fileURLToPath(import.meta.url), '../../')
+  const demoFilePath = path.resolve(demosDir, demoPath)
+  return fs.readFile(demoFilePath, 'utf8')
+}

packages/docs/src/app/playground/(demos)/basic-counter/client.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { Button } from '@/src/components/ui/button'
+import { Minus, Plus } from 'lucide-react'
+import { parseAsInteger, useQueryState } from 'nuqs'
+
+export default function BasicCounterDemoPage() {
+  const [counter, setCounter] = useQueryState(
+    'counter',
+    parseAsInteger.withDefault(0)
+  )
+  return (
+    <>
+      <nav className="my-8 flex flex-wrap gap-4">
+        <Button size="sm" onClick={() => setCounter(x => x - 1)}>
+          <Minus />
+        </Button>
+        <Button size="sm" onClick={() => setCounter(x => x + 1)}>
+          <Plus />
+        </Button>
+        <Button size="sm" onClick={() => setCounter(null)}>
+          Reset
+        </Button>
+        <span className="text-2xl font-semibold tabular-nums">
+          Counter: {counter}
+        </span>
+      </nav>
+    </>
+  )
+}