+
+ )
+}
diff --git a/apps/docs/src/components/DocsHeader.tsx b/apps/docs/src/components/DocsHeader.tsx
new file mode 100644
index 0000000..964822e
--- /dev/null
+++ b/apps/docs/src/components/DocsHeader.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+
+import { navigation } from '@/lib/navigation'
+
+export function DocsHeader({ title }: { title?: string }) {
+ let pathname = usePathname()
+ let section = navigation.find((section) =>
+ section.links.find((link) => link.href === pathname),
+ )
+
+ if (!title && !section) {
+ return null
+ }
+
+ return (
+
+
+ + {title} +
+
+ {children}
+
+ + {section.title} +
+ )} + {title && ( ++ {title} +
+ )} +
+
+ {children}
+
+
+
+
+ {tokens.map((line, lineIndex) => (
+
+ {line
+ .filter((token) => !token.empty)
+ .map((token, tokenIndex) => (
+
+ ))}
+ {'\n'}
+
+ ))}
+
+
+ )}
+
+
+ )
+}
diff --git a/apps/docs/src/components/HeroBackground.tsx b/apps/docs/src/components/HeroBackground.tsx
new file mode 100644
index 0000000..5f0adb4
--- /dev/null
+++ b/apps/docs/src/components/HeroBackground.tsx
@@ -0,0 +1,188 @@
+import { useId } from 'react'
+
+export function HeroBackground(props: React.ComponentPropsWithoutRef<'svg'>) {
+ let id = useId()
+
+ return (
+
+ )
+}
diff --git a/apps/docs/src/components/Icon.tsx b/apps/docs/src/components/Icon.tsx
new file mode 100644
index 0000000..bea7e8a
--- /dev/null
+++ b/apps/docs/src/components/Icon.tsx
@@ -0,0 +1,96 @@
+import { useId } from 'react'
+import clsx from 'clsx'
+
+import { InstallationIcon } from '@/components/icons/InstallationIcon'
+import { LightbulbIcon } from '@/components/icons/LightbulbIcon'
+import { PluginsIcon } from '@/components/icons/PluginsIcon'
+import { PresetsIcon } from '@/components/icons/PresetsIcon'
+import { ThemingIcon } from '@/components/icons/ThemingIcon'
+import { WarningIcon } from '@/components/icons/WarningIcon'
+
+const icons = {
+ installation: InstallationIcon,
+ presets: PresetsIcon,
+ plugins: PluginsIcon,
+ theming: ThemingIcon,
+ lightbulb: LightbulbIcon,
+ warning: WarningIcon,
+}
+
+const iconStyles = {
+ blue: '[--icon-foreground:var(--color-slate-900)] [--icon-background:var(--color-white)]',
+ amber:
+ '[--icon-foreground:var(--color-amber-900)] [--icon-background:var(--color-amber-100)]',
+}
+
+export function Icon({
+ icon,
+ color = 'blue',
+ className,
+ ...props
+}: {
+ color?: keyof typeof iconStyles
+ icon: keyof typeof icons
+} & Omit
+
+
+
+
+
+
+
+ + Never miss the cache again. +
++ Cache every single thing your app could ever do ahead of time, + so your code never even has to run at all. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {tabs.map((tab) => (
+
+
+
+ ))}
+
+ {tab.name}
+
+
+
+
+ {({
+ className,
+ style,
+ tokens,
+ getLineProps,
+ getTokenProps,
+ }) => (
+
+
+
+
+ {tokens.map((line, lineIndex) => (
+
+ {line.map((token, tokenIndex) => (
+
+ ))}
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/docs/src/components/Logo.tsx b/apps/docs/src/components/Logo.tsx
new file mode 100644
index 0000000..5e5bdcf
--- /dev/null
+++ b/apps/docs/src/components/Logo.tsx
@@ -0,0 +1,25 @@
+function LogomarkPaths() {
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+ {dir === 'next' ? 'Next' : 'Previous'}
+
+
+
+ {title}
+
+
+ )
+}
+
+export function PrevNextLinks() {
+ let pathname = usePathname()
+ let allLinks = navigation.flatMap((section) => section.links)
+ let linkIndex = allLinks.findIndex((link) => link.href === pathname)
+ let previousPage = linkIndex > -1 ? allLinks[linkIndex - 1] : null
+ let nextPage = linkIndex > -1 ? allLinks[linkIndex + 1] : null
+
+ if (!nextPage && !previousPage) {
+ return null
+ }
+
+ return (
+ -
+ {previousPage &&
+ {children}
+
+ )
+}
+
+export function QuickLink({
+ title,
+ description,
+ href,
+ icon,
+}: {
+ title: string
+ description: string
+ href: string
+ icon: React.ComponentProps
+
+
+ )
+}
diff --git a/apps/docs/src/components/Search.tsx b/apps/docs/src/components/Search.tsx
new file mode 100644
index 0000000..3e3d14e
--- /dev/null
+++ b/apps/docs/src/components/Search.tsx
@@ -0,0 +1,464 @@
+'use client'
+
+import {
+ forwardRef,
+ Fragment,
+ Suspense,
+ useCallback,
+ useEffect,
+ useId,
+ useRef,
+ useState,
+} from 'react'
+import Highlighter from 'react-highlight-words'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import {
+ type AutocompleteApi,
+ type AutocompleteCollection,
+ type AutocompleteState,
+ createAutocomplete,
+} from '@algolia/autocomplete-core'
+import { Dialog, DialogPanel } from '@headlessui/react'
+import clsx from 'clsx'
+
+import { navigation } from '@/lib/navigation'
+import { type Result } from '@/markdoc/search.mjs'
+
+type EmptyObject = Record
+
+ + + + {title} + +
++ {description} +
++ No results for “ + + {query} + + ” +
+ ) + } + + return ( +-
+ {collection.items.map((result) => (
+
+
+ )
+})
+
+function CloseOnNavigation({
+ close,
+ autocomplete,
+}: {
+ close: (autocomplete: Autocomplete) => void
+ autocomplete: Autocomplete
+}) {
+ let pathname = usePathname()
+ let searchParams = useSearchParams()
+
+ useEffect(() => {
+ close(autocomplete)
+ }, [pathname, searchParams, close, autocomplete])
+
+ return null
+}
+
+function SearchDialog({
+ open,
+ setOpen,
+ className,
+}: {
+ open: boolean
+ setOpen: (open: boolean) => void
+ className?: string
+}) {
+ let formRef = useRef
+
+ )}
+
+
+
+ )
+}
diff --git a/apps/docs/src/components/ThemeSelector.tsx b/apps/docs/src/components/ThemeSelector.tsx
new file mode 100644
index 0000000..3ceeb23
--- /dev/null
+++ b/apps/docs/src/components/ThemeSelector.tsx
@@ -0,0 +1,125 @@
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+import {
+ Label,
+ Listbox,
+ ListboxButton,
+ ListboxOption,
+ ListboxOptions,
+} from '@headlessui/react'
+import clsx from 'clsx'
+
+const themes = [
+ { name: 'Light', value: 'light', icon: LightIcon },
+ { name: 'Dark', value: 'dark', icon: DarkIcon },
+ { name: 'System', value: 'system', icon: SystemIcon },
+]
+
+function LightIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+ return (
+
+ )
+}
+
+function DarkIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+ return (
+
+ )
+}
+
+function SystemIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+ return (
+
+ )
+}
+
+export function ThemeSelector(
+ props: React.ComponentPropsWithoutRef
+
+ {theme.name}
+
+ )}
+