doc: Add React Paris banner

packages/docs/package.json

@@ -24,6 +24,7 @@
     "@headlessui/react": "2.2.0",
     "@headlessui/tailwindcss": "^0.2.1",
     "@icons-pack/react-simple-icons": "^11.2.0",
+    "@number-flow/react": "^0.5.5",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-select": "^2.1.5",

packages/docs/src/app/(pages)/stats/page.tsx

@@ -1,5 +1,4 @@
 import { Card } from '@tremor/react'
-import Image from 'next/image'
 import { SearchParams } from 'nuqs/server'
 import { Suspense } from 'react'
 import { NPMDownloads, NPMStats } from './_components/downloads'
@@ -33,7 +32,7 @@ export default async function StatsPage({ searchParams }: StatsPageProps) {
           <StarHistoryGraph />
         </Suspense>
         <Card className="flex flex-col gap-2 p-2 dark:bg-background">
-          <Image
+          <img
             width={814}
             height={318}
             alt="Project analytics and stats"

packages/docs/src/app/banners.tsx

@@ -0,0 +1,78 @@
+import { Banner } from 'fumadocs-ui/components/banner'
+import Link from 'next/link'
+import { Suspense } from 'react'
+import { Countdown } from '../components/countdown'
+import { ReactParisLogo } from '../components/react-paris'
+
+export function NuqsV2AnnouncementTopBanner() {
+  return (
+    <Banner
+      variant="rainbow"
+      className="text-md gap-4 font-semibold"
+      id="nuqs-2-announcement"
+    >
+      <span aria-hidden>🎉</span>
+      <Link
+        href="/blog/nuqs-2"
+        className="decoration-slice decoration-1 transition-all hover:underline hover:underline-offset-8 focus-visible:underline focus-visible:outline-none"
+        prefetch={false}
+      >
+        Announcing nuqs version 2
+      </Link>
+      <span aria-hidden>🎉</span>
+    </Banner>
+  )
+}
+
+export function NuqsV2AnnouncementSidebarBanner() {
+  return (
+    <div className="my-2 flex justify-center gap-2 rounded-lg border border-blue-500/40 bg-blue-100/50 py-2.5 font-semibold dark:bg-blue-700/10">
+      <span aria-hidden>🎉</span>
+      <Link
+        href="/blog/nuqs-2"
+        className="text-blue-900 hover:underline focus-visible:underline focus-visible:outline-none dark:text-blue-100"
+        prefetch={false}
+      >
+        Announcing nuqs v2 !
+      </Link>
+      <span aria-hidden>🎉</span>
+    </div>
+  )
+}
+
+export function ReactParis2025SideBanner() {
+  return (
+    <div className="my-2 flex flex-col items-center gap-1.5 rounded-lg border border-gray-500/40 bg-gray-100/50 px-2 py-4 dark:bg-gray-700/10">
+      <p className="text-muted-foreground">🗣️ nuqs will be featured at</p>
+      <div className="flex gap-2">
+        <ReactParisLogo className="h-12" />
+        <p className="mr-1">
+          <span className="text-lg font-bold uppercase text-[#002654] dark:text-[#00acff]">
+            React
+          </span>{' '}
+          <span className="text-lg uppercase text-[#cd1126] dark:text-[#fe6497]">
+            Paris
+          </span>{' '}
+          <span className="text-lg">'25</span>
+          <br />
+          <a
+            href="https://react.paris/#tickets"
+            className="text-sm hover:underline"
+          >
+            Get your ticket now!
+          </a>
+        </p>
+      </div>
+      <Suspense>
+        <Countdown
+          targetDate={new Date('2025-03-20T15:00:00+01:00')}
+          className="my-2"
+        />
+      </Suspense>
+      <p className="text-center text-xs text-muted-foreground">
+        Use the code <code>Francois_Paris</code> for a 20% discount on your
+        ticket.
+      </p>
+    </div>
+  )
+}

packages/docs/src/app/docs/layout.tsx

@@ -1,8 +1,8 @@
 import { source } from '@/src/app/source'
 import { getSharedLayoutProps } from '@/src/components/shared-layout'
 import { DocsLayout } from 'fumadocs-ui/layouts/docs'
-import Link from 'next/link'
 import { Suspense, type ReactNode } from 'react'
+import { ReactParis2025SideBanner } from '../banners'
 
 export default function RootDocsLayout({ children }: { children: ReactNode }) {
   return (
@@ -11,19 +11,7 @@ export default function RootDocsLayout({ children }: { children: ReactNode }) {
       {...getSharedLayoutProps()}
       sidebar={{
         collapsible: false,
-        banner: (
-          <div className="my-2 flex justify-center gap-2 rounded-lg border border-blue-500/40 bg-blue-100/50 py-2.5 font-semibold dark:bg-blue-700/10">
-            <span aria-hidden>🎉</span>
-            <Link
-              href="/blog/nuqs-2"
-              className="text-blue-900 hover:underline focus-visible:underline focus-visible:outline-none dark:text-blue-100"
-              prefetch={false}
-            >
-              Announcing nuqs v2 !
-            </Link>
-            <span aria-hidden>🎉</span>
-          </div>
-        ),
+        banner: <ReactParis2025SideBanner />,
         footer: (
           <Suspense>
             <SidebarFooter />

packages/docs/src/app/globals.css

@@ -129,3 +129,9 @@
     fill: currentColor;
   }
 }
+
+@layer components {
+  number-flow-react::part(suffix) {
+    @apply ml-0.5 text-sm font-medium text-muted-foreground;
+  }
+}

packages/docs/src/app/layout.tsx

@@ -1,13 +1,12 @@
-import { Banner } from 'fumadocs-ui/components/banner'
 import { RootProvider } from 'fumadocs-ui/provider'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
-import Link from 'next/link'
 import Script from 'next/script'
 import { NuqsAdapter } from 'nuqs/adapters/next'
 import type { ReactNode } from 'react'
 import { ResponsiveHelper } from '../components/responsive-helpers'
 import { cn } from '../lib/utils'
+import { NuqsV2AnnouncementTopBanner } from './banners'
 import './globals.css'
 
 const inter = Inter({
@@ -40,21 +39,7 @@ export default function Layout({ children }: { children: ReactNode }) {
       suppressHydrationWarning
     >
       <body>
-        <Banner
-          variant="rainbow"
-          className="text-md gap-4 font-semibold"
-          id="nuqs-2-announcement"
-        >
-          <span aria-hidden>🎉</span>
-          <Link
-            href="/blog/nuqs-2"
-            className="decoration-slice decoration-1 transition-all hover:underline hover:underline-offset-8 focus-visible:underline focus-visible:outline-none"
-            prefetch={false}
-          >
-            Announcing nuqs version 2
-          </Link>
-          <span aria-hidden>🎉</span>
-        </Banner>
+        <NuqsV2AnnouncementTopBanner />
         <RootProvider>
           <NuqsAdapter>{children}</NuqsAdapter>
         </RootProvider>

packages/docs/src/app/playground/layout.tsx

@@ -1,8 +1,8 @@
 import { getSharedLayoutProps } from '@/src/components/shared-layout'
 import { DocsLayout } from 'fumadocs-ui/layouts/docs'
 import { DocsBody, DocsPage } from 'fumadocs-ui/page'
-import Link from 'next/link'
 import React, { Suspense } from 'react'
+import { ReactParis2025SideBanner } from '../banners'
 import { getPlaygroundTree } from './(demos)/demos'
 import { DebugControl } from './debug-control'
 
@@ -25,19 +25,7 @@ export default function PlaygroundLayout({
         {...getSharedLayoutProps()}
         sidebar={{
           collapsible: false,
-          banner: (
-            <div className="my-2 flex justify-center gap-2 rounded-lg border border-blue-500/40 bg-blue-100/50 py-2.5 font-semibold dark:bg-blue-700/10">
-              <span aria-hidden>🎉</span>
-              <Link
-                href="/blog/nuqs-2"
-                className="text-blue-900 hover:underline focus-visible:underline focus-visible:outline-none dark:text-blue-100"
-                prefetch={false}
-              >
-                Announcing nuqs v2 !
-              </Link>
-              <span aria-hidden>🎉</span>
-            </div>
-          ),
+          banner: <ReactParis2025SideBanner />,
           footer: (
             <Suspense fallback={<DebugControlsSkeleton />}>
               <DebugControl />

packages/docs/src/components/countdown.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import NumberFlow, { NumberFlowGroup } from '@number-flow/react'
+import { ComponentProps, ReactNode, useEffect, useState } from 'react'
+import { cn } from '../lib/utils'
+
+type CountdownProps = ComponentProps<'div'> & {
+  targetDate: Date
+  expiredMessage?: ReactNode
+}
+
+export function Countdown({
+  targetDate,
+  expiredMessage = null,
+  className,
+  ...props
+}: CountdownProps) {
+  const remaining = targetDate.getTime() - Date.now()
+  const [days, setDays] = useState(() =>
+    Math.floor(remaining / 1000 / 60 / 60 / 24)
+  )
+  const [hours, setHours] = useState(
+    () => Math.floor(remaining / 1000 / 60 / 60) % 24
+  )
+  const [minutes, setMinutes] = useState(
+    () => Math.floor(remaining / 1000 / 60) % 60
+  )
+  const [seconds, setSeconds] = useState(() =>
+    Math.floor((remaining / 1000) % 60)
+  )
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const remaining = targetDate.getTime() - Date.now()
+      setDays(Math.floor(remaining / 1000 / 60 / 60 / 24))
+      setHours(Math.floor(remaining / 1000 / 60 / 60) % 24)
+      setMinutes(Math.floor(remaining / 1000 / 60) % 60)
+      setSeconds(Math.floor((remaining / 1000) % 60))
+      if (remaining <= 0) {
+        clearInterval(timer)
+      }
+    }, 500)
+
+    return () => clearInterval(timer)
+  }, [targetDate])
+
+  if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
+    return expiredMessage
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-baseline justify-center font-bold',
+        days > 0 ? 'gap-1 text-xl' : 'text-3xl',
+        className
+      )}
+      title={targetDate.toISOString()}
+      {...props}
+    >
+      <NumberFlowGroup>
+        {days > 0 && (
+          <NumberFlow
+            trend={-1}
+            value={days}
+            className="&::part(suffix):text-gray-400 tabular-nums"
+            suffix="d"
+          />
+        )}
+        <NumberFlow
+          trend={-1}
+          value={hours}
+          className={'tabular-nums'}
+          suffix={days > 0 ? 'h' : undefined}
+          digits={{ 1: { max: 2 } }}
+          format={{ minimumIntegerDigits: 2 }}
+        />
+        <NumberFlow
+          trend={-1}
+          value={minutes}
+          className="tabular-nums"
+          prefix={days > 0 ? undefined : ':'}
+          suffix={days > 0 ? 'm' : undefined}
+          digits={{ 1: { max: 5 } }}
+          format={{ minimumIntegerDigits: 2 }}
+        />
+        <NumberFlow
+          trend={-1}
+          value={seconds}
+          className="tabular-nums"
+          prefix={days > 0 ? undefined : ':'}
+          suffix={days > 0 ? 's' : undefined}
+          digits={{ 1: { max: 5 } }}
+          format={{ minimumIntegerDigits: 2 }}
+        />
+      </NumberFlowGroup>
+    </div>
+  )
+}