style(docs): Update title styles on pages and more responsive on mobile

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

@@ -18,7 +18,8 @@ export async function SourceOnGitHub({ path }: SourceOnGitHubProps) {
         </span>
         <a
           href={`https://github.com/47ng/nuqs/tree/next/packages/docs/src/app/playground/(demos)/${path}`}
-          className="ml-auto text-sm"
+          className="ml-auto text-sm transition-opacity duration-300 hover:opacity-60"
+          target="_blank"
         >
           Source on GitHub
         </a>

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

@@ -11,7 +11,7 @@ export default function BasicCounterDemoPage() {
   )
   return (
     <>
-      <nav className="my-8 flex flex-wrap items-center gap-4">
+      <nav className="mb-4 flex flex-wrap items-center gap-4">
         <Button onClick={() => setCounter(x => x - 1)}>
           <Minus />
         </Button>

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

@@ -1,4 +1,4 @@
-import { Description, H1 } from '@/src/components/typography'
+import { DocsBody, DocsDescription, DocsTitle } from 'fumadocs-ui/page'
 import { Suspense } from 'react'
 import { SourceOnGitHub } from '../_components/source-on-github'
 import { getMetadata } from '../demos'
@@ -9,14 +9,14 @@ export const metadata = getMetadata('basic-counter')
 export default function BasicCounterDemoPage() {
   return (
     <>
-      <H1 className="mb-4 text-3xl font-bold text-foreground sm:text-4xl">
-        {metadata.title}
-      </H1>
-      <Description>{metadata.description}</Description>
-      <Suspense>
-        <Client />
-      </Suspense>
-      <SourceOnGitHub path="basic-counter/client.tsx" />
+      <DocsTitle>{metadata.title}</DocsTitle>
+      <DocsDescription>{metadata.description}</DocsDescription>
+      <DocsBody>
+        <Suspense>
+          <Client />
+        </Suspense>
+        <SourceOnGitHub path="basic-counter/client.tsx" />
+      </DocsBody>
     </>
   )
 }

packages/docs/src/app/playground/(demos)/batching/client.tsx

@@ -20,10 +20,11 @@ export default function BuilderPatternDemoPage() {
           console.log('Promise cached: ', p1 === p2)
           p1.then(search => console.log('Awaited: %s', search.toString()))
         }}
+        className="mb-2"
       >
         Random coordinates
       </Button>
-      <ul>
+      <ul className="mb-4 space-y-2">
         <li>Latitude: {lat}</li>
         <li>Longitude: {lng}</li>
       </ul>

packages/docs/src/app/playground/(demos)/batching/page.tsx

@@ -1,4 +1,4 @@
-import { Description } from '@/src/components/typography'
+import { Description, H1 } from '@/src/components/typography'
 import { Suspense } from 'react'
 import { SourceOnGitHub } from '../_components/source-on-github'
 import { getMetadata } from '../demos'
@@ -9,8 +9,10 @@ export const metadata = getMetadata('batching')
 export default function BuilderPatternDemoPage() {
   return (
     <>
-      <h1>{metadata.title}</h1>
-      <Description>{metadata.description}</Description>
+      <H1 className="text-foreground my-4 text-3xl font-bold sm:text-4xl">
+        {metadata.title}
+      </H1>
+      <Description className="mb-4">{metadata.description}</Description>
       <Suspense>
         <Client />
       </Suspense>

packages/docs/src/app/playground/(demos)/hex-colors/client.tsx

@@ -33,7 +33,7 @@ export default function HexColorsDemo() {
   )
   const asHex = '#' + hexColorSchema.serialize(color)
   return (
-    <div className="flex flex-wrap-reverse items-center gap-4">
+    <div className="mb-4 flex flex-wrap-reverse items-center gap-4">
       <div
         className="h-64 w-64 rounded border"
         style={{

packages/docs/src/app/playground/(demos)/hex-colors/page.tsx

@@ -1,4 +1,4 @@
-import { Description } from '@/src/components/typography'
+import { Description, H1 } from '@/src/components/typography'
 import { Suspense } from 'react'
 import { SourceOnGitHub } from '../_components/source-on-github'
 import { getMetadata } from '../demos'
@@ -9,8 +9,10 @@ export const metadata = getMetadata('hex-colors')
 export default function HexColorsDemoPage() {
   return (
     <>
-      <h1>{metadata.title}</h1>
-      <Description>{metadata.description}</Description>
+      <H1 className="text-foreground my-4 text-3xl font-bold sm:text-4xl">
+        {metadata.title}
+      </H1>
+      <Description className="mb-4">{metadata.description}</Description>
       <Suspense>
         <Client />
       </Suspense>

packages/docs/src/app/playground/(demos)/layout.tsx

@@ -1,5 +1,6 @@
 import { QuerySpy } from '@/src/components/query-spy'
 import { QuerystringSkeleton } from '@/src/components/querystring'
+import { DocsPage } from 'fumadocs-ui/page'
 import React, { Suspense } from 'react'
 
 export default function PlaygroundDemoLayout({
@@ -9,10 +10,12 @@ export default function PlaygroundDemoLayout({
 }) {
   return (
     <>
-      <Suspense fallback={<QuerystringSkeleton>&nbsp;</QuerystringSkeleton>}>
-        <QuerySpy />
-      </Suspense>
-      {children}
+      <DocsPage>
+        <Suspense fallback={<QuerystringSkeleton>&nbsp;</QuerystringSkeleton>}>
+          <QuerySpy />
+        </Suspense>
+        {children}
+      </DocsPage>
     </>
   )
 }

packages/docs/src/app/playground/(demos)/pagination/page.tsx

@@ -1,4 +1,4 @@
-import { Description } from '@/src/components/typography'
+import { Description, H1, H2 } from '@/src/components/typography'
 import { Separator } from '@/src/components/ui/separator'
 import type { SearchParams } from 'nuqs/server'
 import { Suspense } from 'react'
@@ -26,13 +26,15 @@ export default async function PaginationDemoPage({ searchParams }: PageProps) {
   const pagination = loadPagination(searchParams)
   return (
     <>
-      <h1>{metadata.title}</h1>
-      <Description>{metadata.description}</Description>
-      <h2>Rendering controls</h2>
+      <H1 className="text-foreground my-4 text-3xl font-bold sm:text-4xl">
+        {metadata.title}
+      </H1>
+      <Description className="mb-4">{metadata.description}</Description>
+      <H2 className="mb-2 text-xl">Rendering controls</H2>
       <Suspense>
         <RenderingControls />
       </Suspense>
-      <Separator className="my-8" />
+      <Separator className="my-4" />
       <Suspense>
         <PaginationRenderer pagination={pagination} />
       </Suspense>
@@ -76,16 +78,18 @@ async function ProductSection({ pagination }: PaginatedProps) {
   const { page, delay } = await pagination
   const products = await fetchProducts(page, delay)
   return (
-    <section>
-      <h2>
+    <section className="mb-4">
+      <h2 className="my-2">
         Product list{' '}
         <small className="text-sm font-medium text-zinc-500">
           (server-rendered)
         </small>
       </h2>
-      {products.map(product => (
-        <ProductView product={product} key={product.id} />
-      ))}
+      <div className="space-y-2">
+        {products.map(product => (
+          <ProductView product={product} key={product.id} />
+        ))}
+      </div>
     </section>
   )
 }

packages/docs/src/app/playground/(demos)/pagination/pagination-controls.client.tsx

@@ -24,7 +24,7 @@ export function ClientPaginationControls({
   const [isLoading, startTransition] = React.useTransition()
   const [page, setPage] = usePage({ startTransition })
   return (
-    <Pagination className="not-prose items-center gap-2">
+    <Pagination className="not-prose mt-2 items-center gap-2">
       <PaginationContent>
         <PaginationItem>
           <PaginationPrevious

packages/docs/src/app/playground/(demos)/pagination/pagination-controls.server.tsx

@@ -28,7 +28,7 @@ export async function ServerPaginationControls({
     })
   }
   return (
-    <Pagination className="not-prose items-center gap-2">
+    <Pagination className="not-prose mt-2 items-center gap-2">
       <PaginationContent>
         <PaginationItem>
           <PaginationPreviousLink

packages/docs/src/app/playground/(demos)/pagination/product.tsx

@@ -12,7 +12,9 @@ export function ProductView({ product, ...props }: ProductViewProps) {
         <span className="ml-auto">{product.price}</span>
         <span className="text-xs text-zinc-500">SKU-{product.id + 1}</span>
       </div>
-      <p className="mt-1">{product.description}</p>
+      <p className="text-muted-foreground mt-1 text-sm">
+        {product.description}
+      </p>
     </div>
   )
 }

packages/docs/src/app/playground/(demos)/tic-tac-toe/page.tsx

@@ -1,4 +1,4 @@
-import { Description } from '@/src/components/typography'
+import { Description, H1 } from '@/src/components/typography'
 import { Suspense } from 'react'
 import { SourceOnGitHub } from '../_components/source-on-github'
 import { getMetadata } from '../demos'
@@ -9,9 +9,11 @@ export const metadata = getMetadata('tic-tac-toe')
 export default function Page() {
   return (
     <>
-      <h1>{metadata.title}</h1>
-      <Description>{metadata.description}</Description>
-      <section className="my-12 flex flex-col items-start gap-4">
+      <H1 className="text-foreground my-4 text-3xl font-bold sm:text-4xl">
+        {metadata.title}
+      </H1>
+      <Description className="mb-4">{metadata.description}</Description>
+      <section className="mb-4 flex flex-col items-start gap-4">
         <Suspense>
           <Client />
         </Suspense>

turbo.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://turbo.build/schema.v2.json",
-  "concurrency": "11",
+  "concurrency": "12",
   "tasks": {
     "dev": {
       "cache": false,