boltdocs 2.7.10 → 2.8.0

package/src/client/components/ui-base/navbar.tsx

@@ -1,266 +0,0 @@
-import { Suspense, lazy, useState } from 'react'
-import { cn } from '../../utils/cn'
-import { useNavbar } from '../../hooks/use-navbar'
-import { useRoutes } from '../../hooks/use-routes'
-import NavbarPrimitive from '../primitives/navbar'
-import { ThemeToggle } from './theme-toggle'
-import { GithubStars } from './github-stars'
-import { Tabs } from './tabs'
-import { useLocation } from 'react-router-dom'
-import type { BoltdocsSocialLink } from '../../../shared/types'
-import { Button } from '../primitives/button'
-import { Menu as MenuIcon, X } from './icons'
-import { useLocalizedTo } from '../../hooks/use-localized-to'
-import type { NavbarLink as NavbarLinkType } from '../../types'
-import { useUI } from '../../app/ui-context'
-import { VersionSelector, I18nSelector } from './version-i18n'
-
-const SearchDialog = lazy(() =>
-  import('./search-dialog').then((m) => ({
-    default: m.SearchDialog,
-  })),
-)
-
-export function Navbar() {
-  const { links, title, logo, logoProps, github, social, config } = useNavbar()
-  const { routes, allRoutes, currentRoute, currentVersion, currentLocale } = useRoutes()
-  const { pathname } = useLocation()
-  const { isSidebarOpen, toggleSidebar } = useUI()
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
-
-  const themeConfig = config.theme || {}
-  const isDocs = !!currentRoute?.filePath
-  const hasTabs = themeConfig?.tabs && themeConfig.tabs.length > 0
-
-  return (
-    <NavbarPrimitive.Root
-      className={cn(
-        'border-b border-subtle bg-main/80 backdrop-blur-md',
-        hasTabs && 'border-b-0',
-      )}
-    >
-      <NavbarPrimitive.Content>
-        <NavbarPrimitive.Left>
-          {isDocs && (
-            <Button
-              onPress={toggleSidebar}
-              className="mr-2 lg:hidden p-1.5 h-8 w-8 flex items-center justify-center bg-transparent border-none outline-none select-none cursor-pointer rounded-xl hover:bg-primary-50/50 transition-colors"
-              aria-label={isSidebarOpen ? 'Close sidebar' : 'Open sidebar'}
-            >
-              {isSidebarOpen ? (
-                <X className="w-5 h-5 text-body" />
-              ) : (
-                <MenuIcon className="w-5 h-5 text-body" />
-              )}
-            </Button>
-          )}
-          {logo && (
-            <NavbarPrimitive.Logo
-              src={logo}
-              alt={logoProps?.alt || title}
-              width={logoProps?.width ?? 24}
-              height={logoProps?.height ?? 24}
-              href="site:/"
-            />
-          )}
-          <NavbarPrimitive.Title href="site:/">{title}</NavbarPrimitive.Title>
-
-          <div className="hidden sm:block">
-            {config.versions && currentVersion && <VersionSelector />}
-          </div>
-        </NavbarPrimitive.Left>
-        <NavbarPrimitive.Center>
-          <Suspense
-            fallback={
-              <div className="h-9 w-32 animate-pulse rounded-md bg-surface" />
-            }
-          >
-            <SearchDialog routes={routes || []} />
-          </Suspense>
-        </NavbarPrimitive.Center>
-        <NavbarPrimitive.Right>
-          <Suspense fallback={null}>
-            <div className="lg:hidden">
-              <SearchDialog routes={routes || []} />
-            </div>
-          </Suspense>
-          <NavbarPrimitive.Links>
-            {links.map((link) => (
-              <NavbarLinkItem key={link.href} link={link} />
-            ))}
-          </NavbarPrimitive.Links>
-
-          <div className="hidden sm:flex items-center gap-2">
-            {config.i18n && currentLocale && <I18nSelector />}
-            <NavbarPrimitive.Split className="bg-subtle" />
-          </div>
-
-          <div className="hidden md:block">
-            <ThemeToggle />
-          </div>
-
-          {github && (
-            <div className="hidden md:block">
-              <GithubStars repo={themeConfig?.githubRepo ?? ''} />
-            </div>
-          )}
-          {social.length > 0 && (
-            <div className="hidden md:block">
-              <NavbarPrimitive.Split className="bg-subtle" />
-            </div>
-          )}
-          <div className="hidden md:flex items-center gap-1">
-            {social.map(({ icon, link }: BoltdocsSocialLink) => (
-              <NavbarPrimitive.Socials
-                key={link}
-                icon={icon}
-                link={link}
-                className="p-1.5 text-muted hover:text-body hover:bg-surface rounded-md transition-all focus-visible:ring-2 focus-visible:ring-primary-500/30"
-              />
-            ))}
-          </div>
-
-          <NavbarPrimitive.More
-            onPress={() => setIsMobileMenuOpen(true)}
-            className="text-muted hover:text-body active:scale-90 transition-all focus-visible:ring-2 focus-visible:ring-primary-500/30"
-          />
-        </NavbarPrimitive.Right>
-      </NavbarPrimitive.Content>
-
-      <NavbarPrimitive.MobileMenu
-        isOpen={isMobileMenuOpen}
-        onClose={() => setIsMobileMenuOpen(false)}
-        className="bg-main/98 backdrop-blur-2xl"
-      >
-        <div className="flex flex-col gap-1">
-          {links.map((link) => (
-            <NavbarMobileLinkItem
-              key={link.href}
-              link={link}
-              onClose={() => setIsMobileMenuOpen(false)}
-            />
-          ))}
-        </div>
-
-        {social.length > 0 && (
-          <div className="mt-6">
-            <div className="px-4 mb-4 text-xs font-bold uppercase tracking-widest text-muted/50">
-              Connect
-            </div>
-            <div className="flex flex-wrap gap-2 px-2">
-              {social.map(({ icon, link }: BoltdocsSocialLink) => (
-                <NavbarPrimitive.Socials
-                  key={link}
-                  icon={icon}
-                  link={link}
-                  className="p-3 bg-surface border border-subtle rounded-xl flex-1 justify-center"
-                />
-              ))}
-            </div>
-          </div>
-        )}
-      </NavbarPrimitive.MobileMenu>
-
-      {isDocs && hasTabs && themeConfig?.tabs && (
-        <div className="w-full border-b border-subtle bg-main">
-          <Tabs tabs={themeConfig.tabs} routes={allRoutes || routes || []} />
-        </div>
-      )}
-    </NavbarPrimitive.Root>
-  )
-}
-
-function NavbarLinkItem({ link }: { link: NavbarLinkType }) {
-  const localizedHref = useLocalizedTo(link.href || '')
-  const { pathname } = useLocation()
-  const active =
-    pathname === localizedHref || pathname.startsWith(localizedHref + '/')
-  const hasItems = link.items && link.items.length > 0
-
-  if (hasItems) {
-    return (
-      <NavbarPrimitive.Dropdown
-        label={
-          <span
-            className={cn(
-              'transition-colors outline-none font-medium focus-visible:ring-2 focus-visible:ring-primary-500/30 rounded-sm px-2 py-1',
-              active ? 'text-primary-500' : 'text-muted hover:text-body',
-            )}
-          >
-            {link.label as any}
-          </span>
-        }
-      >
-        {link.items?.map((item) => (
-          <NavbarPrimitive.DropdownItem
-            key={item.href}
-            href={useLocalizedTo(item.href || '')}
-            label={item.label as any}
-          />
-        ))}
-      </NavbarPrimitive.Dropdown>
-    )
-  }
-
-  return (
-    <NavbarPrimitive.Link
-      {...(link as any)}
-      href={localizedHref}
-      active={active}
-      className={cn(
-        'transition-colors outline-none font-medium focus-visible:ring-2 focus-visible:ring-primary-500/30 rounded-sm',
-        active ? 'text-primary-500' : 'text-muted hover:text-body',
-      )}
-    />
-  )
-}
-
-function NavbarMobileLinkItem({
-  link,
-  onClose,
-}: {
-  link: NavbarLinkType
-  onClose: () => void
-}) {
-  const localizedHref = useLocalizedTo(link.href || '')
-  const { pathname } = useLocation()
-  const active = pathname === localizedHref
-  const hasItems = link.items && link.items.length > 0
-
-  if (hasItems) {
-    return (
-      <div className="flex flex-col gap-1">
-        <div
-          className={cn(
-            'px-3 py-2 text-sm transition-all',
-            active ? 'text-body' : 'text-muted/80 hover:text-body',
-          )}
-        >
-          {link.label as any}
-        </div>
-        <div className="flex flex-col gap-1 pl-4">
-          {link.items?.map((item) => (
-            <NavbarMobileLinkItem
-              key={item.href}
-              link={item}
-              onClose={onClose}
-            />
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <NavbarPrimitive.MobileLink
-      {...(link as any)}
-      href={localizedHref}
-      active={active}
-      onPress={onClose}
-      className={cn(
-        'transition-all',
-        active ? 'text-body' : 'text-muted/80 hover:text-body',
-      )}
-    />
-  )
-}

package/src/client/components/ui-base/not-found.tsx

@@ -1,26 +0,0 @@
-import { ArrowLeft } from './icons'
-import { Link } from '../primitives/link'
-
-export function NotFound() {
-  return (
-    <div className="flex items-center justify-center min-h-[65vh] text-center px-4">
-      <div className="space-y-6 max-w-md mx-auto p-8 border border-subtle bg-surface rounded-2xl shadow-xs">
-        <span className="block text-7xl font-extrabold tracking-tight text-primary-500">
-          404
-        </span>
-        <div className="space-y-2">
-          <h1 className="text-xl font-bold text-body">Page Not Found</h1>
-          <p className="text-sm text-muted leading-relaxed">
-            The page you're looking for doesn't exist or has been moved.
-          </p>
-        </div>
-        <Link
-          href="/"
-          className="inline-flex items-center gap-2 rounded-xl border border-subtle bg-main px-6 py-2.5 text-xs font-semibold text-body hover:bg-primary-50/50 hover:border-primary-500/50 transition-all duration-300 outline-none select-none"
-        >
-          <ArrowLeft size={14} /> Go to Home
-        </Link>
-      </div>
-    </div>
-  )
-}

package/src/client/components/ui-base/on-this-page.tsx

@@ -1,57 +0,0 @@
-import { OnThisPage as OTP } from '../primitives/on-this-page'
-import type { OnThisPageProps } from '../../types'
-import { Pencil, CircleHelp, TextAlignStart } from './icons'
-
-export function OnThisPage({
-  headings = [],
-  editLink,
-  communityHelp,
-  filePath,
-}: OnThisPageProps) {
-  if (headings.length === 0) return null
-
-  return (
-    <OTP.Root>
-      <OTP.Header className="flex flex-row gap-x-2">
-        <TextAlignStart size={16} />
-        On this page
-      </OTP.Header>
-
-      <OTP.Tree headings={headings} />
-
-      {(editLink || communityHelp) && (
-        <div className="mt-8 pt-8 border-t border-subtle space-y-4">
-          <p className="text-xs font-bold text-body">Need help?</p>
-          <ul className="space-y-3">
-            {editLink && filePath && (
-              <li>
-                <a
-                  href={editLink.replace(':path', filePath)}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center gap-2 text-sm text-muted hover:text-body transition-colors"
-                >
-                  <Pencil size={16} />
-                  Edit this page
-                </a>
-              </li>
-            )}
-            {communityHelp && (
-              <li>
-                <a
-                  href={communityHelp}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center gap-2 text-sm text-muted hover:text-body transition-colors"
-                >
-                  <CircleHelp size={16} />
-                  Community help
-                </a>
-              </li>
-            )}
-          </ul>
-        </div>
-      )}
-    </OTP.Root>
-  )
-}

package/src/client/components/ui-base/page-nav.tsx

@@ -1,50 +0,0 @@
-import { usePageNav } from '../../hooks/use-page-nav'
-import { PageNav as PageNavPrimitive } from '../primitives/page-nav'
-
-/**
- * Component to display the previous and next page navigation buttons.
- * Enhanced with subtle entrance animations, modern card layout, and hover highlights.
- */
-export function PageNav() {
-  const { prevPage, nextPage } = usePageNav()
-
-  if (!prevPage && !nextPage) return null
-
-  return (
-    <PageNavPrimitive.Root className="pt-8 border-t border-subtle grid sm:grid-cols-2 gap-4 animate-in fade-in slide-in-from-bottom-4 duration-700 select-none">
-      {prevPage ? (
-        <PageNavPrimitive.Link
-          to={prevPage.path}
-          direction="prev"
-          className="group border border-subtle bg-surface p-5 rounded-2xl transition-all duration-300 hover:border-primary-500/50 hover:bg-primary-50/20"
-        >
-          <PageNavPrimitive.Title className="text-xs font-bold uppercase tracking-wider text-muted/60 mb-1">
-            Previous
-          </PageNavPrimitive.Title>
-          <PageNavPrimitive.Description className="text-sm sm:text-base font-bold text-body group-hover:text-primary-500 transition-colors">
-            {prevPage.title}
-          </PageNavPrimitive.Description>
-        </PageNavPrimitive.Link>
-      ) : (
-        <div />
-      )}
-
-      {nextPage ? (
-        <PageNavPrimitive.Link
-          to={nextPage.path}
-          direction="next"
-          className="group border border-subtle bg-surface p-5 rounded-2xl transition-all duration-300 hover:border-primary-500/50 hover:bg-primary-50/20"
-        >
-          <PageNavPrimitive.Title className="text-xs font-bold uppercase tracking-wider text-muted/60 mb-1">
-            Next
-          </PageNavPrimitive.Title>
-          <PageNavPrimitive.Description className="text-sm sm:text-base font-bold text-body group-hover:text-primary-500 transition-colors">
-            {nextPage.title}
-          </PageNavPrimitive.Description>
-        </PageNavPrimitive.Link>
-      ) : (
-        <div />
-      )}
-    </PageNavPrimitive.Root>
-  )
-}

package/src/client/components/ui-base/search-dialog.tsx

@@ -1,163 +0,0 @@
-import { useEffect, useCallback } from 'react'
-import { Search } from './icons'
-import { useSearch } from '../../hooks/use-search'
-import { SearchDialog as SearchDialogPrimitive } from '../primitives/search-dialog'
-import Navbar from '../primitives/navbar'
-import { useNavigate } from 'react-router-dom'
-import type { ComponentRoute } from '../../types'
-
-interface SearchResult {
-  id: string
-  title: string
-  path: string
-  bio: string
-  groupTitle?: string
-  isHeading?: boolean
-}
-
-function Highlight({ text, query }: { text: string; query: string }) {
-  if (!query || !text) return <>{text}</>
-  const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-  const regex = new RegExp(`(${escapedQuery})`, 'gi')
-  const parts = text.split(regex)
-  return (
-    <>
-      {parts.map((part, i) =>
-        regex.test(part) ? (
-          <mark
-            key={i}
-            className="bg-primary-500/20 text-primary-600 dark:text-primary-400 font-bold px-0.5 rounded-sm"
-          >
-            {part}
-          </mark>
-        ) : (
-          part
-        ),
-      )}
-    </>
-  )
-}
-
-export function SearchDialog({ routes }: { routes: ComponentRoute[] }) {
-  const { isOpen, setIsOpen, query, setQuery, list } = useSearch(routes)
-  const navigate = useNavigate()
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      const isMac = /Mac/.test(navigator.userAgent)
-      const isMeta = isMac ? e.metaKey : e.ctrlKey
-
-      if (isMeta && (e.key === 'k' || e.key === 'j')) {
-        e.preventDefault()
-        setIsOpen((prev) => !prev)
-      }
-    }
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [setIsOpen])
-
-  const handleSelect = useCallback(
-    (key: React.Key) => {
-      const path = String(key)
-      setIsOpen(false)
-
-      const [baseUrl, hash] = path.split('#')
-      const search = query ? `?hl=${encodeURIComponent(query)}` : ''
-      const finalPath = `${baseUrl}${search}${hash ? `#${hash}` : ''}`
-
-      navigate(finalPath)
-
-      if (hash) {
-        setTimeout(() => {
-          const el = document.getElementById(hash)
-          if (el) el.scrollIntoView({ behavior: 'smooth' })
-        }, 100)
-      }
-    },
-    [navigate, setIsOpen, query],
-  )
-
-  return (
-    <>
-      <Navbar.SearchTrigger.Desktop
-        onPress={() => setIsOpen(true)}
-        className="rounded-xl border border-subtle bg-surface text-muted transition-all duration-200 hover:border-primary-500/50 hover:text-body hover:bg-soft/50 hover:shadow-sm active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-primary-500/30"
-      >
-        <div className="flex items-center gap-2">
-          <Search size={16} />
-          <span className="hidden sm:inline-block">Search docs...</span>
-        </div>
-        <Navbar.SearchTrigger.Kbd className="[&_kbd]:bg-main [&_kbd]:border [&_kbd]:border-subtle [&_kbd]:rounded [&_kbd]:px-1.5 [&_kbd]:h-5 [&_kbd]:w-5" />
-      </Navbar.SearchTrigger.Desktop>
-
-      <Navbar.SearchTrigger.Mobile
-        onPress={() => setIsOpen(true)}
-        className="rounded-xl text-muted transition-all duration-200 hover:text-body active:scale-95 focus-visible:ring-2 focus-visible:ring-primary-500/30"
-      >
-        <Search size={20} />
-      </Navbar.SearchTrigger.Mobile>
-
-      <SearchDialogPrimitive.Overlay
-        isOpen={isOpen}
-        isDismissable
-        onOpenChange={() => setIsOpen(false)}
-        className="fixed inset-0 z-100 flex items-center justify-center p-4 bg-black/40 backdrop-blur-xs animate-fade-in"
-      >
-        <SearchDialogPrimitive.Content className="w-full max-w-lg bg-main border border-subtle shadow-md rounded-2xl overflow-hidden p-6">
-          <SearchDialogPrimitive.Dialog
-            aria-label="Search documentation"
-            className="flex flex-col min-h-0 h-[450px]"
-          >
-            <SearchDialogPrimitive.Autocomplete
-              onSelectionChange={handleSelect}
-              className="flex flex-col min-h-0"
-            >
-              <SearchDialogPrimitive.Input
-                value={query}
-                onChange={setQuery}
-                className="flex items-center gap-2 border border-subtle bg-surface px-4 py-2.5 rounded-xl focus-within:border-primary-500 mb-4"
-              >
-                <SearchDialogPrimitive.Input.SearchInput
-                  placeholder="Search documentation..."
-                  className="w-full bg-transparent outline-none text-body text-sm"
-                />
-                {query && (
-                  <SearchDialogPrimitive.Input.Button
-                    onPress={() => setQuery('')}
-                    className="text-muted hover:text-body text-xs cursor-pointer select-none"
-                  >
-                    ✕
-                  </SearchDialogPrimitive.Input.Button>
-                )}
-              </SearchDialogPrimitive.Input>
-
-              <SearchDialogPrimitive.List items={list as SearchResult[]}>
-                {(item: SearchResult) => (
-                  <SearchDialogPrimitive.Item
-                    key={item.id}
-                    onPress={() => handleSelect(item.id)}
-                    textValue={item.title}
-                    className="flex items-center gap-3 px-4 py-2 rounded-xl group dark:hover:bg-primary-300/40 hover:bg-primary-200/50 transition-colors duration-100"
-                  >
-                    <SearchDialogPrimitive.Item.Icon
-                      isHeading={item.isHeading}
-                      className="text-muted group-hover:text-primary-500 group-focus:text-primary-500"
-                    />
-                    <div className="flex flex-col justify-center min-w-0">
-                      <SearchDialogPrimitive.Item.Title className="text-sm font-medium text-body truncate dark:group-hover:text-primary-100">
-                        <Highlight text={item.title} query={query} />
-                      </SearchDialogPrimitive.Item.Title>
-                      <SearchDialogPrimitive.Item.Bio className="text-xs text-muted truncate">
-                        <Highlight text={item.bio} query={query} />
-                      </SearchDialogPrimitive.Item.Bio>
-                    </div>
-                  </SearchDialogPrimitive.Item>
-                )}
-              </SearchDialogPrimitive.List>
-            </SearchDialogPrimitive.Autocomplete>
-          </SearchDialogPrimitive.Dialog>
-        </SearchDialogPrimitive.Content>
-      </SearchDialogPrimitive.Overlay>
-    </>
-  )
-}

package/src/client/components/ui-base/search-highlight.tsx

@@ -1,10 +0,0 @@
-import { useSearchHighlight } from '../../hooks/use-search-highlight'
-
-/**
- * Component that enables search term highlighting on the page.
- * It doesn't render anything visible.
- */
-export function SearchHighlight() {
-  useSearchHighlight('.boltdocs-page')
-  return null
-}

package/src/client/components/ui-base/sidebar.tsx

@@ -1,92 +0,0 @@
-import { Sidebar as SidebarPrimitive } from '../primitives/sidebar'
-import { X } from './icons'
-import type { ComponentRoute } from '../../types'
-import type { BoltdocsConfig } from '../../../shared/types'
-import { VersionSelector, I18nSelector } from './version-i18n'
-import { ThemeSwitcher } from './theme-toggle'
-import { useNavbar } from '../../hooks/use-navbar'
-import { useUI } from '../../app/ui-context'
-import { Button } from '../primitives/button'
-
-interface SidebarProps {
-  routes: ComponentRoute[]
-  config: BoltdocsConfig
-}
-
-function SidebarMain({ routes, config }: SidebarProps) {
-  const { logo, title, logoProps } = useNavbar()
-  const { closeSidebar } = useUI()
-
-  const SidebarLogo = logo ? (
-    <img
-      src={logo}
-      alt={logoProps?.alt || title}
-      width={24}
-      height={24}
-      className="rounded-xl"
-    />
-  ) : null
-
-  const hasUtilities = config.versions || config.i18n
-
-  return (
-    <>
-      {/* Desktop Version */}
-      <SidebarPrimitive.Root>
-        <SidebarPrimitive.Content>
-          <SidebarPrimitive.Items routes={routes} />
-        </SidebarPrimitive.Content>
-      </SidebarPrimitive.Root>
-
-      {/* Mobile Version */}
-      <SidebarPrimitive.Mobile>
-        <SidebarPrimitive.Header>
-          <div className="flex items-center gap-3">
-            {SidebarLogo}
-            <span className="font-bold text-lg tracking-tight text-body truncate max-w-[120px]">
-              {title}
-            </span>
-          </div>
-          <div className="flex items-center gap-2">
-            <ThemeSwitcher className="w-24 h-9 rounded-xl" />
-            <Button
-              onPress={closeSidebar}
-              className="h-9 w-9 flex items-center justify-center bg-transparent border-none outline-none select-none cursor-pointer rounded-xl hover:bg-primary-50/50 text-muted hover:text-body transition-colors"
-              aria-label="Close sidebar"
-            >
-              <X size={20} />
-            </Button>
-          </div>
-        </SidebarPrimitive.Header>
-        <SidebarPrimitive.Content>
-          {hasUtilities && (
-            <div className="flex flex-col gap-4 mb-10">
-              <div className="flex gap-3">
-                {config.versions && (
-                  <VersionSelector className="flex-1 justify-between h-10 bg-surface border-subtle rounded-xl" />
-                )}
-                {config.i18n && (
-                  <I18nSelector className="flex-1 justify-between h-10 bg-surface border-subtle rounded-xl" />
-                )}
-              </div>
-              <div className="mt-2 border-b border-subtle" />
-            </div>
-          )}
-          <SidebarPrimitive.Items routes={routes} />
-        </SidebarPrimitive.Content>
-      </SidebarPrimitive.Mobile>
-    </>
-  )
-}
-
-export const Sidebar = Object.assign(SidebarMain, {
-  Root: SidebarPrimitive.Root,
-  Mobile: SidebarPrimitive.Mobile,
-  Header: SidebarPrimitive.Header,
-  Content: SidebarPrimitive.Content,
-  Group: SidebarPrimitive.Group,
-  Link: SidebarPrimitive.Link,
-  SubGroup: SidebarPrimitive.SubGroup,
-  Item: SidebarPrimitive.Item,
-  Items: SidebarPrimitive.Items,
-})