Skip to content

Commit

Permalink
doc: Refactor playground
Browse files Browse the repository at this point in the history
* doc: Ignore analytics for stats page

* doc: Refactor playground (WIP)

* doc: Add RGB demo

* doc: Add pagination demo

* doc: Fix relative imports on Vercel

* doc: Trying a simpler approach

* chore: Log the file path

* chore: Go for the official tutorial

* chore: Rename renderOn search param

* doc: Use serializer

* doc: Auto-compute bundle size

* doc: Go through PNPM

* doc: Use direct CLI path

* doc: Cleanup

* doc: Add more quotes
  • Loading branch information
franky47 authored Jan 27, 2024
1 parent 995a016 commit 7908c93
Show file tree
Hide file tree
Showing 59 changed files with 1,352 additions and 318 deletions.
8 changes: 7 additions & 1 deletion packages/docs/next.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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/**'
}
]
}
Expand Down
8 changes: 8 additions & 0 deletions packages/docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
11 changes: 11 additions & 0 deletions packages/docs/src/app/(pages)/_landing/bundle-size.tsx
Original file line number Diff line number Diff line change
@@ -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)
}
51 changes: 10 additions & 41 deletions packages/docs/src/app/(pages)/_landing/demo.tsx
Original file line number Diff line number Diff line change
@@ -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() {
Expand All @@ -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
Expand All @@ -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} />
</>
)
}
Expand Down
7 changes: 6 additions & 1 deletion packages/docs/src/app/(pages)/_landing/features.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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} />}
Expand Down
32 changes: 30 additions & 2 deletions packages/docs/src/app/(pages)/_landing/quotes/quotes-section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}}
Expand All @@ -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'
}}
Expand All @@ -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>
)
}

This file was deleted.

42 changes: 0 additions & 42 deletions packages/docs/src/app/(pages)/playground/basic-counter/page.tsx

This file was deleted.

37 changes: 0 additions & 37 deletions packages/docs/src/app/(pages)/playground/layout.tsx

This file was deleted.

46 changes: 0 additions & 46 deletions packages/docs/src/app/(pages)/playground/page.tsx

This file was deleted.

9 changes: 3 additions & 6 deletions packages/docs/src/app/docs/[[...slug]]/page.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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>
Expand Down
1 change: 1 addition & 0 deletions packages/docs/src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
)
}
Loading

0 comments on commit 7908c93

Please sign in to comment.