boltdocs 2.6.1 → 2.7.0

package/src/client/components/mdx/list.tsx

@@ -1,192 +0,0 @@
-import {
-  Children,
-  isValidElement,
-  type ReactNode,
-  type ReactElement,
-  type ComponentPropsWithoutRef,
-} from 'react'
-import { Check, ChevronRight, Circle } from 'lucide-react'
-import { cn } from '../../utils/cn'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-const listVariants = cva('my-6 transition-all duration-200', {
-  variants: {
-    variant: {
-      default: 'list-disc pl-5 text-text-muted marker:text-primary-500/50',
-      number:
-        'list-decimal pl-5 text-text-muted marker:text-primary-500/50 marker:font-bold',
-      checked: 'list-none p-0',
-      arrow: 'list-none p-0',
-      bubble: 'list-none p-0',
-    },
-    cols: {
-      1: 'grid-cols-1',
-      2: 'grid-cols-1 sm:grid-cols-2',
-      3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
-      4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
-    },
-    isGrid: {
-      true: 'grid gap-x-8 gap-y-3',
-      false: 'space-y-2',
-    },
-    dense: {
-      true: 'space-y-1',
-      false: 'space-y-2',
-    },
-  },
-  compoundVariants: [
-    {
-      variant: 'default',
-      dense: true,
-      className: 'space-y-0.5',
-    },
-  ],
-  defaultVariants: {
-    variant: 'default',
-    cols: 1,
-    isGrid: false,
-    dense: false,
-  },
-})
-
-const itemVariants = cva(
-  'group flex items-start gap-3 text-sm leading-relaxed transition-all duration-200',
-  {
-    variants: {
-      variant: {
-        default: '',
-        number: '',
-        checked: 'hover:translate-x-0.5',
-        arrow: 'hover:translate-x-0.5',
-        bubble: 'hover:translate-x-0.5',
-      },
-      dense: {
-        true: 'py-0',
-        false: 'py-0.5',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      dense: false,
-    },
-  },
-)
-
-const iconContainerVariants = cva(
-  'mt-1 shrink-0 flex items-center justify-center transition-transform group-hover:scale-110',
-  {
-    variants: {
-      variant: {
-        bubble:
-          'h-5 w-5 rounded-full bg-primary-500/10 text-primary-500 text-[10px] font-bold',
-        default: '',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
-type ListVariantProps = VariantProps<typeof listVariants>
-
-export interface ListProps
-  extends ComponentPropsWithoutRef<'ul'>,
-    Omit<ListVariantProps, 'variant'> {
-  variant?: 'checked' | 'arrow' | 'default' | 'bubble' | 'number'
-  children: ReactNode
-}
-
-interface ListItemProps extends VariantProps<typeof itemVariants> {
-  icon?: ReactNode
-  children: ReactNode
-}
-
-function ListItem({ icon, children, variant, dense }: ListItemProps) {
-  return (
-    <li className={cn(itemVariants({ variant, dense }))}>
-      {icon && (
-        <span
-          className={cn(
-            iconContainerVariants({
-              variant: variant === 'bubble' ? 'bubble' : 'default',
-            }),
-          )}
-        >
-          {icon}
-        </span>
-      )}
-      <div className="flex-1 text-text-muted group-hover:text-text-main transition-colors">
-        {children}
-      </div>
-    </li>
-  )
-}
-
-const ICON_MAP: Record<string, (cls?: string) => ReactNode> = {
-  checked: (cls) => (
-    <Check size={14} className={cn('text-emerald-500 shrink-0', cls)} />
-  ),
-  arrow: (cls) => (
-    <ChevronRight size={14} className={cn('text-primary-400 shrink-0', cls)} />
-  ),
-  bubble: (cls) => (
-    <Circle
-      size={6}
-      fill="currentColor"
-      className={cn('text-primary-500 shrink-0', cls)}
-    />
-  ),
-  default: () => null,
-  number: () => null,
-}
-
-export function List({
-  variant = 'default',
-  cols = 1,
-  dense = false,
-  children,
-  className,
-  ...props
-}: ListProps) {
-  const isGrid = cols !== undefined && Number(cols) > 1
-  const renderIcon = ICON_MAP[variant]
-  const containerClasses = listVariants({
-    variant,
-    cols,
-    dense,
-    isGrid,
-    className,
-  })
-
-  const Component = variant === 'number' ? 'ol' : 'ul'
-
-  // Handling raw MDX siblings (nested logic)
-  if (variant === 'default' || variant === 'number') {
-    return (
-      <Component className={containerClasses} {...props}>
-        {children}
-      </Component>
-    )
-  }
-
-  return (
-    <ul className={containerClasses} {...props}>
-      {Children.map(children, (child) => {
-        if (!isValidElement(child)) return child
-
-        const element = child as ReactElement<{ children?: ReactNode }>
-        const content =
-          element.type === 'li'
-            ? element.props.children
-            : element.props.children || child
-
-        return (
-          <ListItem icon={renderIcon()} variant={variant} dense={dense}>
-            {content}
-          </ListItem>
-        )
-      })}
-    </ul>
-  )
-}

package/src/client/components/mdx/tabs.tsx

@@ -1,135 +0,0 @@
-import { Children, isValidElement, useMemo } from 'react'
-import * as RAC from 'react-aria-components'
-import { useTabs } from './hooks/useTabs'
-import { cn } from '../../utils/cn'
-import { CodeBlock } from './code-block'
-import { cva } from 'class-variance-authority'
-
-const tabListVariants = cva(
-  'relative flex items-center border-b border-border-subtle gap-1 overflow-x-auto no-scrollbar',
-  {
-    variants: {
-      size: {
-        default: 'px-0',
-        compact: 'px-2',
-      },
-    },
-    defaultVariants: {
-      size: 'default',
-    },
-  },
-)
-
-const tabItemVariants = cva(
-  'flex items-center gap-2 px-4 py-2.5 text-sm font-medium outline-none transition-all duration-200 cursor-pointer bg-transparent border-none select-none whitespace-nowrap',
-  {
-    variants: {
-      isActive: {
-        true: 'text-primary-500',
-        false: 'text-text-muted hover:text-text-main',
-      },
-      isDisabled: {
-        true: 'opacity-40 pointer-events-none',
-        false: '',
-      },
-    },
-    defaultVariants: {
-      isActive: false,
-      isDisabled: false,
-    },
-  },
-)
-
-export interface TabProps {
-  label: string
-  icon?: React.ReactNode
-  disabled?: boolean
-  children: React.ReactNode
-}
-
-export function Tab({ children }: TabProps) {
-  const content =
-    typeof children === 'string' ? (
-      <CodeBlock className="language-bash">
-        <code>{children.trim()}</code>
-      </CodeBlock>
-    ) : (
-      children
-    )
-
-  return <div className="py-4">{content}</div>
-}
-
-export interface TabsProps {
-  defaultIndex?: number
-  children: React.ReactNode
-}
-
-export function Tabs({ defaultIndex = 0, children }: TabsProps) {
-  const tabs = useMemo(() => {
-    return Children.toArray(children).filter(
-      (child) =>
-        isValidElement(child) &&
-        (child as React.ReactElement<TabProps>).props?.label,
-    ) as React.ReactElement<TabProps>[]
-  }, [children])
-
-  const { active, setActive, tabRefs, indicatorStyle } = useTabs({
-    initialIndex: defaultIndex,
-    tabs,
-  })
-
-  return (
-    <div className="my-8 w-full group/tabs">
-      <RAC.Tabs
-        selectedKey={active.toString()}
-        onSelectionChange={(key) => setActive(Number(key))}
-        className="w-full"
-      >
-        <RAC.TabList
-          aria-label="Content Tabs"
-          className={cn(tabListVariants())}
-        >
-          {tabs.map((child, i) => {
-            const { label, icon, disabled } = child.props
-            const key = i.toString()
-
-            return (
-              <RAC.Tab
-                key={key}
-                id={key}
-                isDisabled={disabled}
-                ref={(el: any) => {
-                  tabRefs.current[i] = el
-                }}
-                className={({ isSelected, isDisabled }) =>
-                  cn(tabItemVariants({ isActive: isSelected, isDisabled }))
-                }
-              >
-                {!!icon && (
-                  <span className="shrink-0 [&>svg]:w-4 [&>svg]:h-4">
-                    {icon}
-                  </span>
-                )}
-                <span>{label}</span>
-              </RAC.Tab>
-            )
-          })}
-
-          <div
-            className="absolute bottom-0 h-0.5 bg-primary-500 transition-all duration-300 ease-in-out pointer-events-none"
-            style={indicatorStyle}
-            aria-hidden="true"
-          />
-        </RAC.TabList>
-
-        {tabs.map((_tab, i) => (
-          <RAC.TabPanel key={i} id={i.toString()}>
-            {/* biome-ignore lint/suspicious/noExplicitAny: bypass version-specific ReactNode mismatch */}
-            {tabs[i] as any}
-          </RAC.TabPanel>
-        ))}
-      </RAC.Tabs>
-    </div>
-  )
-}

package/src/client/components/mdx/video.tsx

@@ -1,68 +0,0 @@
-import { useRef, useState, useEffect } from 'react'
-
-interface VideoProps {
-  src?: string
-  poster?: string
-  alt?: string
-  controls?: boolean
-  preload?: string
-  children?: React.ReactNode
-  [key: string]: any
-}
-
-export function Video({
-  src,
-  poster,
-  alt,
-  children,
-  controls,
-  preload = 'metadata',
-  ...rest
-}: VideoProps) {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [isVisible, setIsVisible] = useState(false)
-
-  useEffect(() => {
-    const el = containerRef.current
-    if (!el) return
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setIsVisible(true)
-          observer.disconnect()
-        }
-      },
-      { rootMargin: '200px' },
-    )
-    observer.observe(el)
-    return () => observer.disconnect()
-  }, [])
-
-  return (
-    <div
-      ref={containerRef}
-      className="my-6 overflow-hidden rounded-lg border border-border-subtle"
-    >
-      {isVisible ? (
-        <video
-          className="block w-full h-auto"
-          src={src}
-          poster={poster}
-          controls={true}
-          preload={preload}
-          playsInline
-          {...rest}
-        >
-          {children}
-          Your browser does not support the video tag.
-        </video>
-      ) : (
-        <div
-          className="aspect-video bg-bg-surface animate-pulse"
-          role="img"
-          aria-label={alt || 'Video'}
-        />
-      )}
-    </div>
-  )
-}

package/src/client/components/primitives/index.ts

@@ -1,19 +0,0 @@
-export * as Navbar from './navbar'
-export * as NavigationMenu from './navigation-menu'
-export * as SearchDialog from './search-dialog'
-export * as OnThisPage from './on-this-page'
-export * as PageNav from './page-nav'
-export * as Tabs from './tabs'
-export * as Sidebar from './sidebar'
-export * as Breadcrumbs from './breadcrumbs'
-export { Button } from './button'
-export { ButtonGroup } from './button-group'
-export { Menu } from './menu'
-export { Popover } from './popover'
-export { Tooltip } from './tooltip'
-export { Link } from './link'
-export { Skeleton } from './skeleton'
-export { Separator } from 'react-aria-components'
-export { ToggleButton } from 'react-aria-components'
-
-export { cn } from '../../utils/cn'

package/src/client/components/primitives/navigation-menu.tsx

@@ -1,114 +0,0 @@
-import * as RAC from 'react-aria-components'
-import { ChevronDown } from 'lucide-react'
-import { cn } from '../../utils/cn'
-import type { ComponentBase, CompoundComponent } from './types'
-
-export interface NavigationMenuItemProps extends ComponentBase {
-  label: string
-}
-
-export interface NavigationMenuLinkProps
-  extends Omit<ComponentBase, 'children'> {
-  href: string
-  label: string
-  description?: string
-  children?:
-    | React.ReactNode
-    | ((opts: RAC.MenuItemRenderProps) => React.ReactNode)
-}
-
-export type NavigationMenuComponent = CompoundComponent<
-  ComponentBase,
-  {
-    List: React.FC<ComponentBase>
-    Item: React.FC<NavigationMenuItemProps>
-    Link: React.FC<NavigationMenuLinkProps>
-  }
->
-
-export const NavigationMenu = ({
-  children,
-  className,
-  ...props
-}: ComponentBase) => {
-  return (
-    <nav className={cn('relative flex items-center', className)} {...props}>
-      {children}
-    </nav>
-  )
-}
-
-const NavigationMenuList = ({ children, className }: ComponentBase) => {
-  return (
-    <div className={cn('flex list-none items-center gap-1', className)}>
-      {children}
-    </div>
-  )
-}
-
-const NavigationMenuItem = ({
-  children,
-  label,
-  className,
-}: NavigationMenuItemProps) => {
-  return (
-    <RAC.MenuTrigger>
-      <RAC.Button
-        className={cn(
-          'flex items-center gap-1 rounded-md px-3 py-1.5 text-sm font-medium outline-none transition-colors cursor-pointer',
-          'text-text-muted hover:bg-bg-surface hover:text-text-main',
-          'focus-visible:ring-2 focus-visible:ring-primary-500/30',
-          className,
-        )}
-      >
-        {label}
-        <ChevronDown size={14} className="transition-transform" />
-      </RAC.Button>
-      <RAC.Popover
-        placement="bottom start"
-        className="entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95 fill-mode-forwards"
-      >
-        <RAC.Menu className="w-56 outline-none rounded-xl border border-border-subtle bg-bg-surface p-2 shadow-xl ring-1 ring-border-strong/5">
-          {children as any}
-        </RAC.Menu>
-      </RAC.Popover>
-    </RAC.MenuTrigger>
-  )
-}
-
-const NavigationMenuLink = ({
-  label,
-  href,
-  description,
-  className,
-  children,
-  ...props
-}: NavigationMenuLinkProps) => {
-  return (
-    <RAC.MenuItem
-      href={href}
-      className={cn(
-        'block rounded-lg px-3 py-2 text-sm outline-none cursor-pointer transition-colors',
-        'hover:bg-bg-muted focus:bg-bg-muted',
-        className,
-      )}
-      {...props}
-    >
-      {children || (
-        <>
-          <div className="font-semibold text-text-main">{label}</div>
-          {description && (
-            <div className="text-xs text-text-muted line-clamp-1 mt-0.5">
-              {description}
-            </div>
-          )}
-        </>
-      )}
-    </RAC.MenuItem>
-  )
-}
-
-NavigationMenu.Root = NavigationMenu
-NavigationMenu.List = NavigationMenuList
-NavigationMenu.Item = NavigationMenuItem
-NavigationMenu.Link = NavigationMenuLink

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

@@ -1,76 +0,0 @@
-import { useLocation } from 'react-router-dom'
-import { Helmet } from 'react-helmet-async'
-import { useConfig } from '../../app/config-context'
-
-interface HeadProps {
-  siteTitle: string
-  siteDescription?: string
-  routes: Array<{ path: string; title: string; description?: string; seo?: Record<string, any> }>
-}
-
-export function Head({ siteTitle, siteDescription, routes }: HeadProps) {
-  const location = useLocation()
-  const config = useConfig()
-
-  // Find the current route's metadata
-  const currentRoute = routes?.find?.((r) => r.path === location.pathname)
-  const pageTitle = currentRoute?.title
-  const pageDescription = currentRoute?.description || siteDescription || ''
-
-  const finalTitle = pageTitle ? `${pageTitle} | ${siteTitle}` : siteTitle
-
-  const seo = currentRoute?.seo || {}
-
-  // Merge custom global metatags
-  const globalMetatags = config?.seo?.metatags || {}
-
-  // Calculate specific ones
-  const defaultOgImage = config?.seo?.thumbnails?.background
-  const ogImage = seo['og:image'] || defaultOgImage
-
-  return (
-    // @ts-ignore
-    <Helmet>
-      <title>{finalTitle}</title>
-      <meta name="description" content={pageDescription} />
-
-      {/* Default OG Tags */}
-      <meta property="og:title" content={finalTitle} />
-      <meta property="og:description" content={pageDescription} />
-      <meta property="og:type" content="article" />
-      {/* Canonical URL for both <link> and og:url */}
-      {typeof window !== 'undefined' && <meta property="og:url" content={window.location.href} />}
-      {typeof window !== 'undefined' && <link rel="canonical" href={window.location.origin + location.pathname} />}
-
-      {/* Default Twitter Card */}
-      <meta name="twitter:card" content="summary" />
-      <meta name="twitter:title" content={finalTitle} />
-      <meta name="twitter:description" content={pageDescription} />
-      {ogImage && <meta name="twitter:image" content={ogImage} />}
-      {ogImage && <meta property="og:image" content={ogImage} />}
-
-      {/* Generator */}
-      <meta name="generator" content="Boltdocs" />
-
-      {/* User-defined global metatags */}
-      {Object.entries(globalMetatags).map(([key, value]) => {
-        const isProperty = key.startsWith('og:') || key.startsWith('music:') || key.startsWith('video:') || key.startsWith('article:') || key.startsWith('book:') || key.startsWith('profile:')
-        return isProperty
-          ? <meta key={key} property={key} content={value as string} />
-          : <meta key={key} name={key} content={value as string} />
-      })}
-
-      {/* Page granular SEO tags (override global) */}
-      {Object.entries(seo).map(([key, value]) => {
-        if (key === 'noindex' && value === true) return <meta key="noindex" name="robots" content="noindex" />
-        if (key === 'robots') return <meta key="robots" name="robots" content={value as string} />
-        if (key === 'canonical') return <link key="canonical" rel="canonical" href={value as string} />
-
-        const isProperty = key.startsWith('og:') || key.startsWith('music:') || key.startsWith('video:') || key.startsWith('article:') || key.startsWith('book:') || key.startsWith('profile:')
-        return isProperty
-          ? <meta key={key} property={key} content={value as string} />
-          : <meta key={key} name={key} content={value as string} />
-      })}
-    </Helmet>
-  )
-}

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

@@ -1,57 +0,0 @@
-import { cn } from '../../utils/cn'
-import { Skeleton } from '../primitives/skeleton'
-
-/**
- * A premium loading component that only skeletons the markdown content area.
- * Designed to be used as a Suspense fallback within a persistent layout.
- */
-export function Loading() {
-  return (
-    <div
-      className={cn(
-        'w-full h-full relative overflow-y-auto transition-opacity duration-300 animate-fade-in',
-      )}
-    >
-      <div className="mx-auto max-w-(--spacing-content-max) px-4 py-8 space-y-10">
-        {/* Breadcrumbs */}
-        <div className="flex gap-2">
-          <Skeleton className="h-3 w-16" />
-          <Skeleton className="h-3 w-24" />
-        </div>
-
-        {/* Page Title */}
-        <Skeleton className="h-10 w-[60%] sm:h-12" />
-
-        {/* Intro Paragraph */}
-        <div className="space-y-3">
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-[95%]" />
-          <Skeleton className="h-4 w-[40%]" />
-        </div>
-
-        {/* Section 1 */}
-        <div className="space-y-6 pt-4">
-          <Skeleton className="h-7 w-32" />
-          <div className="space-y-3">
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-[98%]" />
-            <Skeleton className="h-4 w-[92%]" />
-            <Skeleton className="h-4 w-[60%]" />
-          </div>
-        </div>
-
-        {/* Code Block Placeholder */}
-        <Skeleton className="h-32 w-full rounded-lg bg-bg-muted/50" />
-
-        {/* Section 2 */}
-        <div className="space-y-6 pt-4">
-          <Skeleton className="h-7 w-48" />
-          <div className="space-y-3">
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-[85%]" />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/client/components/ui-base/powered-by.tsx

@@ -1,25 +0,0 @@
-import { Zap } from 'lucide-react'
-
-export function PoweredBy() {
-  return (
-    <div className="flex items-center justify-center mt-10 mb-4 px-4 w-full">
-      <a
-        href="https://github.com/jesusalcaladev/boltdocs"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="group relative flex items-center gap-2 px-4 py-2 rounded-full border border-border-subtle bg-bg-surface/50 backdrop-blur-md transition-all duration-300 hover:border-primary-500/50 hover:bg-bg-surface hover:shadow-xl hover:shadow-primary-500/5 select-none"
-      >
-        <Zap
-          className="w-3.5 h-3.5 text-text-muted group-hover:text-primary-500 transition-colors duration-300"
-          fill="currentColor"
-        />
-        <span className="text-[11px] font-medium text-text-muted group-hover:text-text-main transition-colors duration-300 tracking-wide">
-          Powered by{' '}
-          <strong className="font-bold text-text-main/80 group-hover:text-text-main">
-            Boltdocs
-          </strong>
-        </span>
-      </a>
-    </div>
-  )
-}