From fbcc6a2743568179bf1db770bfa91e9098de96c7 Mon Sep 17 00:00:00 2001 From: Francois Best Date: Wed, 24 Jan 2024 09:36:13 +0100 Subject: [PATCH 01/15] doc: Ignore analytics for stats page --- packages/docs/src/app/layout.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/docs/src/app/layout.tsx b/packages/docs/src/app/layout.tsx index 004eec45..1c12f46a 100644 --- a/packages/docs/src/app/layout.tsx +++ b/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" /> )} From 931fafe41fc508d5e18bd5604593349dfe98d022 Mon Sep 17 00:00:00 2001 From: Francois Best Date: Thu, 25 Jan 2024 00:55:52 +0100 Subject: [PATCH 02/15] doc: Refactor playground (WIP) --- .../docs/src/app/(pages)/_landing/demo.tsx | 51 ++++--------------- .../_components/playground-page-layout.tsx | 16 ------ .../(pages)/playground/basic-counter/page.tsx | 42 --------------- .../src/app/(pages)/playground/layout.tsx | 37 -------------- .../docs/src/app/(pages)/playground/page.tsx | 46 ----------------- .../docs/src/app/docs/[[...slug]]/page.tsx | 9 ++-- .../_components/query-spy.skeleton.tsx | 21 ++++++++ .../(demos)}/_components/query-spy.tsx | 34 ++++++++----- .../(demos)/_components/source-on-github.tsx | 38 ++++++++++++++ .../(demos)/basic-counter/client.tsx | 30 +++++++++++ .../playground/(demos)/basic-counter/page.tsx | 22 ++++++++ .../(demos)/batching/client.tsx} | 31 ++++------- .../app/playground/(demos)/batching/page.tsx | 20 ++++++++ .../docs/src/app/playground/(demos)/demos.ts | 36 +++++++++++++ .../src/app/playground/(demos)/layout.tsx | 18 +++++++ .../_demos}/builder-pattern/page.tsx | 0 .../_demos}/compound-parsers/page.tsx | 0 .../_demos}/crosslink/page.tsx | 0 .../_demos}/custom-parser/page.tsx | 0 .../_demos}/hex-colors/page.tsx | 0 .../_demos}/parsers/page.tsx | 0 .../_demos}/pretty-urls/page.tsx | 0 .../_demos}/repro-359/page.tsx | 0 .../_demos}/repro-376/page.tsx | 0 .../_demos}/server-side-parsing/client.tsx | 0 .../_demos}/server-side-parsing/page.tsx | 0 .../_demos}/server-side-parsing/parser.ts | 0 .../_demos}/subscribeToQueryUpdates/page.tsx | 0 .../_demos}/throttling/client.tsx | 0 .../_demos}/throttling/page.tsx | 0 .../_demos}/throttling/parsers.ts | 0 .../debug-control.tsx | 6 +-- packages/docs/src/app/playground/layout.tsx | 44 ++++++++++++++++ packages/docs/src/app/playground/page.tsx | 28 ++++++++++ packages/docs/src/components/code-block.tsx | 50 ++++++++++++++++++ packages/docs/src/components/typography.tsx | 27 ++++++++++ .../playground/pages/server-side-counter.tsx | 42 --------------- 37 files changed, 379 insertions(+), 269 deletions(-) delete mode 100644 packages/docs/src/app/(pages)/playground/_components/playground-page-layout.tsx delete mode 100644 packages/docs/src/app/(pages)/playground/basic-counter/page.tsx delete mode 100644 packages/docs/src/app/(pages)/playground/layout.tsx delete mode 100644 packages/docs/src/app/(pages)/playground/page.tsx create mode 100644 packages/docs/src/app/playground/(demos)/_components/query-spy.skeleton.tsx rename packages/docs/src/app/{(pages)/playground => playground/(demos)}/_components/query-spy.tsx (50%) create mode 100644 packages/docs/src/app/playground/(demos)/_components/source-on-github.tsx create mode 100644 packages/docs/src/app/playground/(demos)/basic-counter/client.tsx create mode 100644 packages/docs/src/app/playground/(demos)/basic-counter/page.tsx rename packages/docs/src/app/{(pages)/playground/batching/page.tsx => playground/(demos)/batching/client.tsx} (54%) create mode 100644 packages/docs/src/app/playground/(demos)/batching/page.tsx create mode 100644 packages/docs/src/app/playground/(demos)/demos.ts create mode 100644 packages/docs/src/app/playground/(demos)/layout.tsx rename packages/docs/src/app/{(pages)/playground => playground/_demos}/builder-pattern/page.tsx (100%) rename packages/docs/src/app/{(pages)/playground => playground/_demos}/compound-parsers/page.tsx (100%) rename packages/docs/src/app/{(pages)/playground => playground/_demos}/crosslink/page.tsx (100%) rename packages/docs/src/app/{(pages)/playground => playground/_demos}/custom-parser/page.tsx (100%) rename packages/docs/src/app/{(pages)/playground => playground/_demos}/hex-colors/page.tsx (100%) rename packages/docs/src/app/{(pages)/playground => playground/_demos}/parsers/page.tsx (100%) rename packages/docs/src/app/{(pages)/playground => playground/_demos}/pretty-urls/page.tsx (100%) rename packages/docs/src/app/{(pages)/playground => playground/_demos}/repro-359/page.tsx (100%) rename packages/docs/src/app/{(pages)/playground => playground/_demos}/repro-376/page.tsx (100%) rename packages/docs/src/app/{(pages)/playground => playground/_demos}/server-side-parsing/client.tsx (100%) rename packages/docs/src/app/{(pages)/playground => playground/_demos}/server-side-parsing/page.tsx (100%) rename packages/docs/src/app/{(pages)/playground => playground/_demos}/server-side-parsing/parser.ts (100%) rename packages/docs/src/app/{(pages)/playground => playground/_demos}/subscribeToQueryUpdates/page.tsx (100%) rename packages/docs/src/app/{(pages)/playground => playground/_demos}/throttling/client.tsx (100%) rename packages/docs/src/app/{(pages)/playground => playground/_demos}/throttling/page.tsx (100%) rename packages/docs/src/app/{(pages)/playground => playground/_demos}/throttling/parsers.ts (100%) rename packages/docs/src/app/{(pages)/playground/_components => playground}/debug-control.tsx (84%) create mode 100644 packages/docs/src/app/playground/layout.tsx create mode 100644 packages/docs/src/app/playground/page.tsx create mode 100644 packages/docs/src/components/code-block.tsx create mode 100644 packages/docs/src/components/typography.tsx delete mode 100644 packages/docs/src/pages/playground/pages/server-side-counter.tsx diff --git a/packages/docs/src/app/(pages)/_landing/demo.tsx b/packages/docs/src/app/(pages)/_landing/demo.tsx index 685601d0..297d0b44 100644 --- a/packages/docs/src/app/(pages)/_landing/demo.tsx +++ b/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 ( <> -
+ ) } diff --git a/packages/docs/src/app/(pages)/playground/_components/playground-page-layout.tsx b/packages/docs/src/app/(pages)/playground/_components/playground-page-layout.tsx deleted file mode 100644 index 5f71cabb..00000000 --- a/packages/docs/src/app/(pages)/playground/_components/playground-page-layout.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import Link from 'next/link' -import { QuerySpy } from './query-spy' - -export function PlaygroundPageLayout({ - children -}: { - children: React.ReactNode -}) { - return ( -
- ⬅️ Home - - {children} -
- ) -} diff --git a/packages/docs/src/app/(pages)/playground/basic-counter/page.tsx b/packages/docs/src/app/(pages)/playground/basic-counter/page.tsx deleted file mode 100644 index c95572ab..00000000 --- a/packages/docs/src/app/(pages)/playground/basic-counter/page.tsx +++ /dev/null @@ -1,42 +0,0 @@ -'use client' - -import { parseAsInteger, useQueryState } from 'nuqs' - -export default function BasicCounterDemoPage() { - const [counter, setCounter] = useQueryState( - 'counter', - parseAsInteger.withDefault(0) - ) - - return ( - <> -

Basic counter

-

- State is stored in the URL query string -

- -

Counter: {counter}

-

- - Source on GitHub - -

- - ) -} diff --git a/packages/docs/src/app/(pages)/playground/layout.tsx b/packages/docs/src/app/(pages)/playground/layout.tsx deleted file mode 100644 index df0dc100..00000000 --- a/packages/docs/src/app/(pages)/playground/layout.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import dynamic from 'next/dynamic' -import React, { Suspense } from 'react' -import { PlaygroundPageLayout } from './_components/playground-page-layout' - -export const metadata = { - title: 'Playground' -} - -const DebugControlsSkeleton = () => ( - - - - -) - -const DebugControl = dynamic(() => import('./_components/debug-control'), { - ssr: false, - loading: DebugControlsSkeleton -}) - -export default function PlaygroundLayout({ - children -}: { - children: React.ReactNode -}) { - return ( - <> -
- }> - - -
-
- {children} - - ) -} diff --git a/packages/docs/src/app/(pages)/playground/page.tsx b/packages/docs/src/app/(pages)/playground/page.tsx deleted file mode 100644 index 68d5726f..00000000 --- a/packages/docs/src/app/(pages)/playground/page.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import Link from 'next/link' -import fs from 'node:fs/promises' -import path from 'node:path' -import { fileURLToPath } from 'node:url' - -export default async function PlaygroundIndexPage() { - const appRouterLinks = await getDemoLinks() - return ( - <> -

Playground

-

Demos

-

App router

-
    - {appRouterLinks.map(link => ( -
  • - {link.split('/').at(-1)} -
  • - ))} -
-

Pages router

-
    -
  • - - Server-side counter (with gSSP) - -
  • -
-
- - - ) -} - -async function getDemoLinks() { - const filePath = fileURLToPath(import.meta.url) - const dirname = path.dirname(filePath) - const demos = await fs.readdir(dirname) - return demos - .filter(dir => !dir.startsWith('_')) - .map(dir => `/playground/${dir}`) -} diff --git a/packages/docs/src/app/docs/[[...slug]]/page.tsx b/packages/docs/src/app/docs/[[...slug]]/page.tsx index 62871cad..4010ea8c 100644 --- a/packages/docs/src/app/docs/[[...slug]]/page.tsx +++ b/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({
-

- {page.matter.title} -

-

- {page.matter.description} -

+

{page.matter.title}

+ {page.matter.description}
diff --git a/packages/docs/src/app/playground/(demos)/_components/query-spy.skeleton.tsx b/packages/docs/src/app/playground/(demos)/_components/query-spy.skeleton.tsx new file mode 100644 index 00000000..bd642bf0 --- /dev/null +++ b/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 ( +
+      {children}
+    
+ ) +} diff --git a/packages/docs/src/app/(pages)/playground/_components/query-spy.tsx b/packages/docs/src/app/playground/(demos)/_components/query-spy.tsx similarity index 50% rename from packages/docs/src/app/(pages)/playground/_components/query-spy.tsx rename to packages/docs/src/app/playground/(demos)/_components/query-spy.tsx index fd4c15bc..6e7fda3f 100644 --- a/packages/docs/src/app/(pages)/playground/_components/query-spy.tsx +++ b/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 ( -
-      {Boolean(qs) && <>?{qs}}
-      {!qs && {''}}
-    
+ + {search.size > 0 && ( + + ? + {Array.from(search.entries()).map(([key, value], i) => ( + + {key}= + + {value} + + & + + ))} + + )} + {search.size === 0 && ( + {''} + )} + ) } diff --git a/packages/docs/src/app/playground/(demos)/_components/source-on-github.tsx b/packages/docs/src/app/playground/(demos)/_components/source-on-github.tsx new file mode 100644 index 00000000..9d95afb4 --- /dev/null +++ b/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 ( + + ) +} + +function readSourceCode(demoPath: string) { + const demosDir = path.resolve(fileURLToPath(import.meta.url), '../../') + const demoFilePath = path.resolve(demosDir, demoPath) + return fs.readFile(demoFilePath, 'utf8') +} diff --git a/packages/docs/src/app/playground/(demos)/basic-counter/client.tsx b/packages/docs/src/app/playground/(demos)/basic-counter/client.tsx new file mode 100644 index 00000000..2cc68dc7 --- /dev/null +++ b/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 ( + <> + + + ) +} diff --git a/packages/docs/src/app/playground/(demos)/basic-counter/page.tsx b/packages/docs/src/app/playground/(demos)/basic-counter/page.tsx new file mode 100644 index 00000000..2333c893 --- /dev/null +++ b/packages/docs/src/app/playground/(demos)/basic-counter/page.tsx @@ -0,0 +1,22 @@ +import { Description, H1 } from '@/src/components/typography' +import { Suspense } from 'react' +import { SourceOnGitHub } from '../_components/source-on-github' +import { getMetadata } from '../demos' +import Client from './client' + +export const metadata = getMetadata('basic-counter') + +export default function BasicCounterDemoPage() { + return ( + <> +

+ {metadata.title} +

+ {metadata.description} + + + + + + ) +} diff --git a/packages/docs/src/app/(pages)/playground/batching/page.tsx b/packages/docs/src/app/playground/(demos)/batching/client.tsx similarity index 54% rename from packages/docs/src/app/(pages)/playground/batching/page.tsx rename to packages/docs/src/app/playground/(demos)/batching/client.tsx index d8ac02e0..520b22a0 100644 --- a/packages/docs/src/app/(pages)/playground/batching/page.tsx +++ b/packages/docs/src/app/playground/(demos)/batching/client.tsx @@ -1,5 +1,6 @@ 'use client' +import { Button } from '@/src/components/ui/button' import { parseAsFloat, useQueryState } from 'nuqs' const parser = parseAsFloat.withDefault(0) @@ -7,39 +8,25 @@ const parser = parseAsFloat.withDefault(0) export default function BuilderPatternDemoPage() { const [lat, setLat] = useQueryState('lat', parser) const [lng, setLng] = useQueryState('lng', parser) - - const latStr = lat.toString().split('.') - const lngStr = lng.toString().split('.') - return ( <> -

Batching

- -
-        
-          {/* Aligning the decimals */}
-          Lat {latStr[0].padStart(4) + '.' + (latStr[1] ?? '00')}
-          {'\n'}
-          Lng {lngStr[0].padStart(4) + '.' + (lngStr[1] ?? '00')}
-        
-      
-

- - Source on GitHub - -

+ Random coordinates + +
    +
  • Latitude: {lat}
  • +
  • Longitude: {lng}
  • +
) } diff --git a/packages/docs/src/app/playground/(demos)/batching/page.tsx b/packages/docs/src/app/playground/(demos)/batching/page.tsx new file mode 100644 index 00000000..c8b4ef60 --- /dev/null +++ b/packages/docs/src/app/playground/(demos)/batching/page.tsx @@ -0,0 +1,20 @@ +import { Description } from '@/src/components/typography' +import { Suspense } from 'react' +import { SourceOnGitHub } from '../_components/source-on-github' +import { getMetadata } from '../demos' +import Client from './client' + +export const metadata = getMetadata('batching') + +export default function BuilderPatternDemoPage() { + return ( + <> +

{metadata.title}

+ {metadata.description} + + + + + + ) +} diff --git a/packages/docs/src/app/playground/(demos)/demos.ts b/packages/docs/src/app/playground/(demos)/demos.ts new file mode 100644 index 00000000..ddf234f4 --- /dev/null +++ b/packages/docs/src/app/playground/(demos)/demos.ts @@ -0,0 +1,36 @@ +import type { PageTree } from 'next-docs-zeta/server' + +type DemoMetadata = { + title: string + description: string +} + +export const demos = { + 'basic-counter': { + title: 'Basic counter', + description: 'State is stored in the URL query string' + }, + batching: { + title: 'Batching', + description: + 'State updates are collected and batched into one update on the next tick.' + } +} as const satisfies Record + +export function getMetadata(path: keyof typeof demos): DemoMetadata { + return demos[path] +} + +// -- + +export function getPlaygroundTree(): PageTree { + return { + name: 'Playground', + children: Object.entries(demos).map(([path, { title, description }]) => ({ + type: 'page', + name: title, + description, + url: `/playground/${path}` + })) + } +} diff --git a/packages/docs/src/app/playground/(demos)/layout.tsx b/packages/docs/src/app/playground/(demos)/layout.tsx new file mode 100644 index 00000000..a5ab3ef5 --- /dev/null +++ b/packages/docs/src/app/playground/(demos)/layout.tsx @@ -0,0 +1,18 @@ +import React, { Suspense } from 'react' +import { QuerySpy } from './_components/query-spy' +import { QuerySpySkeleton } from './_components/query-spy.skeleton' + +export default function PlaygroundDemoLayout({ + children +}: { + children: React.ReactNode +}) { + return ( + <> +  }> + + +
{children}
+ + ) +} diff --git a/packages/docs/src/app/(pages)/playground/builder-pattern/page.tsx b/packages/docs/src/app/playground/_demos/builder-pattern/page.tsx similarity index 100% rename from packages/docs/src/app/(pages)/playground/builder-pattern/page.tsx rename to packages/docs/src/app/playground/_demos/builder-pattern/page.tsx diff --git a/packages/docs/src/app/(pages)/playground/compound-parsers/page.tsx b/packages/docs/src/app/playground/_demos/compound-parsers/page.tsx similarity index 100% rename from packages/docs/src/app/(pages)/playground/compound-parsers/page.tsx rename to packages/docs/src/app/playground/_demos/compound-parsers/page.tsx diff --git a/packages/docs/src/app/(pages)/playground/crosslink/page.tsx b/packages/docs/src/app/playground/_demos/crosslink/page.tsx similarity index 100% rename from packages/docs/src/app/(pages)/playground/crosslink/page.tsx rename to packages/docs/src/app/playground/_demos/crosslink/page.tsx diff --git a/packages/docs/src/app/(pages)/playground/custom-parser/page.tsx b/packages/docs/src/app/playground/_demos/custom-parser/page.tsx similarity index 100% rename from packages/docs/src/app/(pages)/playground/custom-parser/page.tsx rename to packages/docs/src/app/playground/_demos/custom-parser/page.tsx diff --git a/packages/docs/src/app/(pages)/playground/hex-colors/page.tsx b/packages/docs/src/app/playground/_demos/hex-colors/page.tsx similarity index 100% rename from packages/docs/src/app/(pages)/playground/hex-colors/page.tsx rename to packages/docs/src/app/playground/_demos/hex-colors/page.tsx diff --git a/packages/docs/src/app/(pages)/playground/parsers/page.tsx b/packages/docs/src/app/playground/_demos/parsers/page.tsx similarity index 100% rename from packages/docs/src/app/(pages)/playground/parsers/page.tsx rename to packages/docs/src/app/playground/_demos/parsers/page.tsx diff --git a/packages/docs/src/app/(pages)/playground/pretty-urls/page.tsx b/packages/docs/src/app/playground/_demos/pretty-urls/page.tsx similarity index 100% rename from packages/docs/src/app/(pages)/playground/pretty-urls/page.tsx rename to packages/docs/src/app/playground/_demos/pretty-urls/page.tsx diff --git a/packages/docs/src/app/(pages)/playground/repro-359/page.tsx b/packages/docs/src/app/playground/_demos/repro-359/page.tsx similarity index 100% rename from packages/docs/src/app/(pages)/playground/repro-359/page.tsx rename to packages/docs/src/app/playground/_demos/repro-359/page.tsx diff --git a/packages/docs/src/app/(pages)/playground/repro-376/page.tsx b/packages/docs/src/app/playground/_demos/repro-376/page.tsx similarity index 100% rename from packages/docs/src/app/(pages)/playground/repro-376/page.tsx rename to packages/docs/src/app/playground/_demos/repro-376/page.tsx diff --git a/packages/docs/src/app/(pages)/playground/server-side-parsing/client.tsx b/packages/docs/src/app/playground/_demos/server-side-parsing/client.tsx similarity index 100% rename from packages/docs/src/app/(pages)/playground/server-side-parsing/client.tsx rename to packages/docs/src/app/playground/_demos/server-side-parsing/client.tsx diff --git a/packages/docs/src/app/(pages)/playground/server-side-parsing/page.tsx b/packages/docs/src/app/playground/_demos/server-side-parsing/page.tsx similarity index 100% rename from packages/docs/src/app/(pages)/playground/server-side-parsing/page.tsx rename to packages/docs/src/app/playground/_demos/server-side-parsing/page.tsx diff --git a/packages/docs/src/app/(pages)/playground/server-side-parsing/parser.ts b/packages/docs/src/app/playground/_demos/server-side-parsing/parser.ts similarity index 100% rename from packages/docs/src/app/(pages)/playground/server-side-parsing/parser.ts rename to packages/docs/src/app/playground/_demos/server-side-parsing/parser.ts diff --git a/packages/docs/src/app/(pages)/playground/subscribeToQueryUpdates/page.tsx b/packages/docs/src/app/playground/_demos/subscribeToQueryUpdates/page.tsx similarity index 100% rename from packages/docs/src/app/(pages)/playground/subscribeToQueryUpdates/page.tsx rename to packages/docs/src/app/playground/_demos/subscribeToQueryUpdates/page.tsx diff --git a/packages/docs/src/app/(pages)/playground/throttling/client.tsx b/packages/docs/src/app/playground/_demos/throttling/client.tsx similarity index 100% rename from packages/docs/src/app/(pages)/playground/throttling/client.tsx rename to packages/docs/src/app/playground/_demos/throttling/client.tsx diff --git a/packages/docs/src/app/(pages)/playground/throttling/page.tsx b/packages/docs/src/app/playground/_demos/throttling/page.tsx similarity index 100% rename from packages/docs/src/app/(pages)/playground/throttling/page.tsx rename to packages/docs/src/app/playground/_demos/throttling/page.tsx diff --git a/packages/docs/src/app/(pages)/playground/throttling/parsers.ts b/packages/docs/src/app/playground/_demos/throttling/parsers.ts similarity index 100% rename from packages/docs/src/app/(pages)/playground/throttling/parsers.ts rename to packages/docs/src/app/playground/_demos/throttling/parsers.ts diff --git a/packages/docs/src/app/(pages)/playground/_components/debug-control.tsx b/packages/docs/src/app/playground/debug-control.tsx similarity index 84% rename from packages/docs/src/app/(pages)/playground/_components/debug-control.tsx rename to packages/docs/src/app/playground/debug-control.tsx index d5641866..3fd07cea 100644 --- a/packages/docs/src/app/(pages)/playground/_components/debug-control.tsx +++ b/packages/docs/src/app/playground/debug-control.tsx @@ -26,9 +26,9 @@ export default function DebugControl() { }, []) return ( - + + Console debugging + ) } diff --git a/packages/docs/src/app/playground/layout.tsx b/packages/docs/src/app/playground/layout.tsx new file mode 100644 index 00000000..dba4d1de --- /dev/null +++ b/packages/docs/src/app/playground/layout.tsx @@ -0,0 +1,44 @@ +import { NuqsWordmark } from '@/src/components/logo' +import { navItems } from '@/src/components/nav' +import { DocsLayout } from 'next-docs-ui/layout' +import { DocsBody } from 'next-docs-ui/page' +import dynamic from 'next/dynamic' +import React from 'react' +import { getPlaygroundTree } from './(demos)/demos' + +const DebugControlsSkeleton = () => ( + +) + +const DebugControl = dynamic(() => import('./debug-control'), { + ssr: false, + loading: DebugControlsSkeleton +}) + +export default function PlaygroundLayout({ + children +}: { + children: React.ReactNode +}) { + return ( + <> + , + items: navItems, + githubUrl: 'https://github.com/47ng/nuqs' + }} + sidebar={{ + collapsible: false, + footer: + }} + > + {children} + + + ) +} diff --git a/packages/docs/src/app/playground/page.tsx b/packages/docs/src/app/playground/page.tsx new file mode 100644 index 00000000..baf9c383 --- /dev/null +++ b/packages/docs/src/app/playground/page.tsx @@ -0,0 +1,28 @@ +import { Description, H1 } from '@/src/components/typography' +import { Card } from 'next-docs-ui/mdx/card' +import { demos } from './(demos)/demos' + +export const metadata = { + title: 'Playground', + description: 'Examples and demos of nuqs in action.' +} + +export default function PlaygroundIndexPage() { + return ( +
+

{metadata.title}

+ {metadata.description} +
    + {Object.entries(demos).map(([path, { title, description }]) => ( +
  • + +
  • + ))} +
+
+ ) +} diff --git a/packages/docs/src/components/code-block.tsx b/packages/docs/src/components/code-block.tsx new file mode 100644 index 00000000..198e306d --- /dev/null +++ b/packages/docs/src/components/code-block.tsx @@ -0,0 +1,50 @@ +import { codeToHtml } from 'shikiji' +import { twMerge } from 'tailwind-merge' + +type CodeBlockProps = React.ComponentProps<'div'> & { + code: string + lang?: 'tsx' +} + +export async function CodeBlock({ + code, + lang = 'tsx', + className, + ...props +}: CodeBlockProps) { + const demoCode = await codeToHtml(code, { + lang, + 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 + } + } + ] + }) + return ( +
+ ) +} diff --git a/packages/docs/src/components/typography.tsx b/packages/docs/src/components/typography.tsx new file mode 100644 index 00000000..88bef9e9 --- /dev/null +++ b/packages/docs/src/components/typography.tsx @@ -0,0 +1,27 @@ +import { twMerge } from 'tailwind-merge' + +export const H1: React.FC> = ({ + children, + className, + ...props +}) => ( +

+ {children} +

+) + +export const Description: React.FC> = ({ + children, + className, + ...props +}) => ( +

+ {children} +

+) diff --git a/packages/docs/src/pages/playground/pages/server-side-counter.tsx b/packages/docs/src/pages/playground/pages/server-side-counter.tsx deleted file mode 100644 index 491bae3d..00000000 --- a/packages/docs/src/pages/playground/pages/server-side-counter.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { PlaygroundPageLayout } from '@/src/app/(pages)/playground/_components/playground-page-layout' -import type { GetServerSideProps, InferGetServerSidePropsType } from 'next' -import { parseAsInteger, useQueryState } from 'nuqs' - -export default function ServerSideCounterPage({ - counter: serverSideCounter -}: InferGetServerSidePropsType) { - const [counter, setCounter] = useQueryState( - 'counter', - parseAsInteger.withOptions({ shallow: false }).withDefault(0) - ) - return ( - -

Server-side counter

-

- - Using pages router & getServerSideProps - -

- - - -

Client counter: {counter}

-

Server counter: {serverSideCounter}

-

- - Source on GitHub - -

-
- ) -} - -export const getServerSideProps = (async ctx => { - return { - props: { - counter: parseAsInteger.withDefault(0).parseServerSide(ctx.query.counter) - } - } -}) satisfies GetServerSideProps<{ - counter: number -}> From 9ed063e8dcf0f4c8dfa130a7cff2059e8698a172 Mon Sep 17 00:00:00 2001 From: Francois Best Date: Fri, 26 Jan 2024 06:11:34 +0100 Subject: [PATCH 03/15] doc: Add RGB demo --- .../(demos)/basic-counter/client.tsx | 10 ++--- .../docs/src/app/playground/(demos)/demos.ts | 4 ++ .../hex-colors/client.tsx} | 37 ++++++------------- .../playground/(demos)/hex-colors/page.tsx | 20 ++++++++++ .../src/app/playground/(demos)/layout.tsx | 2 +- 5 files changed, 40 insertions(+), 33 deletions(-) rename packages/docs/src/app/playground/{_demos/hex-colors/page.tsx => (demos)/hex-colors/client.tsx} (84%) create mode 100644 packages/docs/src/app/playground/(demos)/hex-colors/page.tsx diff --git a/packages/docs/src/app/playground/(demos)/basic-counter/client.tsx b/packages/docs/src/app/playground/(demos)/basic-counter/client.tsx index 2cc68dc7..ca7e324a 100644 --- a/packages/docs/src/app/playground/(demos)/basic-counter/client.tsx +++ b/packages/docs/src/app/playground/(demos)/basic-counter/client.tsx @@ -11,16 +11,14 @@ export default function BasicCounterDemoPage() { ) return ( <> -