@gentleduck/docs 0.0.13 → 0.0.16

package/src/components/icons.tsx

@@ -1,10 +1,10 @@
-import { FileIcon } from 'lucide-react'
+import { FileIcon, Loader } from 'lucide-react'
 
 type IconProps = React.HTMLAttributes<SVGElement>
 
 export const Icons = {
   apple: (props: IconProps) => (
-    <svg role="img" viewBox="0 0 24 24" {...props}>
+    <svg aria-hidden="true" viewBox="0 0 24 24" {...props}>
       <path
         d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
         fill="currentColor"
@@ -12,7 +12,7 @@ export const Icons = {
     </svg>
   ),
   aria: (props: IconProps) => (
-    <svg fill="currentColor" role="img" viewBox="0 0 24 24" {...props}>
+    <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24" {...props}>
       <path d="M13.966 22.624l-1.69-4.281H8.122l3.892-9.144 5.662 13.425zM8.884 1.376H0v21.248zm15.116 0h-8.884L24 22.624Z" />
     </svg>
   ),
@@ -34,7 +34,7 @@ export const Icons = {
     </svg>
   ),
   google: (props: IconProps) => (
-    <svg role="img" viewBox="0 0 24 24" {...props}>
+    <svg aria-hidden="true" viewBox="0 0 24 24" {...props}>
       <path
         d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
         fill="currentColor"
@@ -66,7 +66,7 @@ export const Icons = {
     </svg>
   ),
   paypal: (props: IconProps) => (
-    <svg role="img" viewBox="0 0 24 24" {...props}>
+    <svg aria-hidden="true" viewBox="0 0 24 24" {...props}>
       <path
         d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
         fill="currentColor"
@@ -98,20 +98,8 @@ export const Icons = {
       />
     </svg>
   ),
-  spinner: (props: IconProps) => (
-    <svg
-      fill="none"
-      height="24"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}>
-      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-    </svg>
+  spinner: ({ className, ...props }: IconProps) => (
+    <Loader className={className ? `animate-spin ${className}` : 'animate-spin'} {...props} />
   ),
   tailwind: (props: IconProps) => (
     <svg viewBox="0 0 24 24" {...props}>
@@ -126,9 +114,9 @@ export const Icons = {
     <svg
       data-darkreader-inline-fill=""
       data-darkreader-inline-stroke=""
+      aria-hidden="true"
       fill="currentColor"
       height="200px"
-      role="img"
       stroke="currentColor"
       stroke-width="0"
       style={
@@ -177,18 +165,18 @@ export const Icons = {
 export function getIconForLanguageExtension(language: string) {
   switch (language) {
     case 'json':
-      return <Icons.json />
+      return <Icons.json aria-hidden="true" />
     case 'css':
-      return <Icons.css className="fill-foreground" />
+      return <Icons.css aria-hidden="true" className="fill-foreground" />
     case 'js':
     case 'jsx':
     case 'ts':
     case 'tsx':
     case 'typescript':
-      return <Icons.ts className="fill-foreground" />
+      return <Icons.ts aria-hidden="true" className="fill-foreground" />
     case 'toml':
-      return <Icons.toml className="fill-foreground" />
+      return <Icons.toml aria-hidden="true" className="fill-foreground" />
     default:
-      return <FileIcon />
+      return <FileIcon aria-hidden="true" />
   }
 }

package/src/components/index.ts

@@ -10,4 +10,4 @@ export * from './mobile-nav'
 export * from './mode-toggle'
 export * from './page-header'
 export * from './providers'
-export * from './themes'
+export * from './style-switcher'

package/src/components/layouts/command-menu.tsx

@@ -0,0 +1,491 @@
+'use client'
+
+import { useDocsConfig, useDocsEntries } from '@duck-docs/context'
+import type { DocsEntry, TocEntry } from '@duck-docs/context/context.types'
+import type { SidebarNavItem } from '@duck-docs/types/nav'
+import { cn } from '@gentleduck/libs/cn'
+import { Button } from '@gentleduck/registry-ui/button'
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+  useCommandListContext,
+} from '@gentleduck/registry-ui/command'
+import { Separator } from '@gentleduck/registry-ui/separator'
+import { useKeyCommands } from '@gentleduck/vim/react'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import { Circle, Command, CornerDownLeft, FileIcon, Moon, Sun } from 'lucide-react'
+import lunr from 'lunr'
+import { useRouter } from 'next/navigation'
+import { useTheme } from 'next-themes'
+import * as React from 'react'
+
+// -- Types -------------------------------------------------------------------
+
+type FlattenedSidebarItem = {
+  href: string
+  title: string
+}
+
+type VirtualRow =
+  | { type: 'heading'; title: string }
+  | { type: 'item'; name: string; href: string; icon: React.ReactNode; action: () => void }
+
+type ItemRow = VirtualRow & { type: 'item' }
+
+type SearchableItem = {
+  groupTitle: string
+  id: string
+  leafTitle: string
+  name: string
+  segments: string
+  tocHeadings: string
+}
+
+// -- Constants ---------------------------------------------------------------
+
+const HEADING_HEIGHT = 32
+const ITEM_HEIGHT = 36
+
+// -- Helpers -----------------------------------------------------------------
+
+function flattenSidebarItems(items: SidebarNavItem[], parentTitle = ''): FlattenedSidebarItem[] {
+  const flattened: FlattenedSidebarItem[] = []
+
+  for (const item of items) {
+    const title = parentTitle ? `${parentTitle} / ${item.title}` : item.title
+
+    if (item.href && !item.disabled) {
+      flattened.push({
+        href: item.href,
+        title,
+      })
+    }
+
+    if (item.items?.length) {
+      flattened.push(...flattenSidebarItems(item.items, title))
+    }
+  }
+
+  return flattened
+}
+
+function flattenTocTitles(entries?: TocEntry[]): string {
+  if (!entries || entries.length === 0) return ''
+  const titles: string[] = []
+  for (const entry of entries) {
+    titles.push(entry.title)
+    if (entry.items?.length) {
+      titles.push(flattenTocTitles(entry.items))
+    }
+  }
+  return titles.join(' ')
+}
+
+function findTocHeadings(docs: DocsEntry[] | undefined, href: string): string {
+  if (!docs || !href) return ''
+  const doc = docs.find((d) => d.permalink === href || d.slug === href)
+  return doc?.toc ? flattenTocTitles(doc.toc) : ''
+}
+
+function buildSearchIndex(items: SearchableItem[]): lunr.Index {
+  return lunr(function () {
+    this.ref('id')
+    this.field('leafTitle', { boost: 10 })
+    this.field('name', { boost: 5 })
+    this.field('segments', { boost: 3 })
+    this.field('tocHeadings', { boost: 2 })
+    this.field('groupTitle', { boost: 1 })
+
+    this.pipeline.remove(lunr.stemmer)
+    this.searchPipeline.remove(lunr.stemmer)
+
+    for (const item of items) {
+      this.add(item)
+    }
+  })
+}
+
+// -- CommandMenu -------------------------------------------------------------
+
+export function CommandMenu() {
+  const router = useRouter()
+  const [open, setOpen] = React.useState(false)
+  const { setTheme } = useTheme()
+  const docsConfig = useDocsConfig()
+  const docsEntries = useDocsEntries()
+  const [selectedLabel, setSelectedLabel] = React.useState('')
+
+  const items = React.useMemo(
+    () => [
+      ...docsConfig.sidebarNav.map((group) => ({
+        items: flattenSidebarItems(group.items ?? []).map((navItem) => ({
+          action: () => router.push(navItem.href),
+          href: navItem.href,
+          icon: <Circle aria-hidden="true" className="mr-2 h-3 w-3" />,
+          name: navItem.title,
+        })),
+        title: group.title,
+      })),
+      {
+        items: [
+          {
+            action: () => setTheme('light'),
+            href: '',
+            icon: <Sun aria-hidden="true" className="mr-2 h-4 w-4" />,
+            name: 'Light',
+          },
+          {
+            action: () => setTheme('dark'),
+            href: '',
+            icon: <Moon aria-hidden="true" className="mr-2 h-4 w-4" />,
+            name: 'Dark',
+          },
+          {
+            action: () => setTheme('system'),
+            href: '',
+            icon: <FileIcon aria-hidden="true" className="mr-2 h-4 w-4" />,
+            name: 'System',
+          },
+        ],
+        title: 'Theme',
+      },
+    ],
+    [docsConfig.sidebarNav, router, setTheme],
+  )
+
+  const flatRows = React.useMemo<VirtualRow[]>(() => {
+    const rows: VirtualRow[] = []
+    for (const group of items) {
+      rows.push({ type: 'heading', title: group.title })
+      for (const item of group.items) {
+        rows.push({ type: 'item', name: item.name, href: item.href, icon: item.icon, action: item.action })
+      }
+    }
+    return rows
+  }, [items])
+
+  const searchIndex = React.useMemo(() => {
+    const searchable: SearchableItem[] = []
+
+    for (const group of items) {
+      if (group.title === 'Theme') continue
+      for (const item of group.items) {
+        const segments = item.name.split(' / ')
+        const leafTitle = segments[segments.length - 1] ?? item.name
+        searchable.push({
+          groupTitle: group.title,
+          id: item.name,
+          leafTitle,
+          name: item.name,
+          segments: segments.join(' '),
+          tocHeadings: findTocHeadings(docsEntries, item.href),
+        })
+      }
+    }
+
+    return searchable.length > 0 ? buildSearchIndex(searchable) : null
+  }, [items, docsEntries])
+
+  return (
+    <>
+      <Button
+        className={cn(
+          'relative h-8 w-full bg-muted/50 text-muted-foreground text-sm shadow-none md:w-40 lg:w-64 ltr:pr-2 rtl:pl-2 [&>div]:w-full [&>div]:justify-between',
+        )}
+        onClick={() => setOpen(true)}
+        size={'sm'}
+        variant="outline">
+        <span className="hidden lg:inline-flex">Search documentation...</span>
+        <span className="inline-flex lg:hidden">Search...</span>
+        <CommandShortcut
+          className="bg-secondary"
+          keys={'ctrl+k'}
+          onKeysPressed={() => {
+            setOpen((prev) => !prev)
+          }}>
+          <Command aria-hidden="true" className="!size-3" />
+          <span className="text-md">K</span>
+        </CommandShortcut>
+      </Button>
+      <CommandDialog onOpenChange={setOpen} open={open}>
+        <CommandInput autoFocus placeholder="Search..." />
+        <VirtualCommandList
+          flatRows={flatRows}
+          onClose={() => setOpen(false)}
+          onSelectedLabelChange={setSelectedLabel}
+          searchIndex={searchIndex}
+        />
+        <CommandFooter selectedLabel={selectedLabel} />
+      </CommandDialog>
+    </>
+  )
+}
+
+// -- VirtualCommandList ------------------------------------------------------
+
+function VirtualCommandList({
+  flatRows,
+  onClose,
+  onSelectedLabelChange,
+  searchIndex,
+}: {
+  flatRows: VirtualRow[]
+  onClose: () => void
+  onSelectedLabelChange: (label: string) => void
+  searchIndex: lunr.Index | null
+}) {
+  const { search } = useCommandListContext({})
+  const scrollRef = React.useRef<HTMLDivElement>(null)
+  const [selectedIndex, setSelectedIndex] = React.useState(0)
+
+  const filteredRows = React.useMemo<VirtualRow[]>(() => {
+    if (!search) return flatRows
+
+    // Build score map from lunr results for doc items
+    let scoreMap: Map<string, number>
+
+    try {
+      if (!searchIndex) throw new Error('no index')
+      const sanitized = search.replace(/[:\*\~\+\-\^]/g, '\\$&')
+      const terms = sanitized.trim().split(/\s+/).filter(Boolean)
+      if (terms.length === 0) return flatRows
+
+      // Try wildcard prefix matching first (natural for incremental typing)
+      let results = searchIndex.search(terms.map((t) => `${t}*`).join(' '))
+
+      // Fuzzy fallback for typos
+      if (results.length === 0) {
+        results = searchIndex.search(terms.map((t) => `${t}~1`).join(' '))
+      }
+
+      scoreMap = new Map(results.map((r) => [r.ref, r.score]))
+    } catch {
+      // lunr threw on invalid syntax -- fall back to substring
+      const q = search.toLowerCase()
+      scoreMap = new Map(
+        flatRows
+          .filter((r): r is ItemRow => r.type === 'item' && r.name.toLowerCase().includes(q))
+          .map((r) => [r.name, 1]),
+      )
+    }
+
+    const query = search.toLowerCase()
+    const filtered: VirtualRow[] = []
+    let currentHeading: (VirtualRow & { type: 'heading' }) | null = null
+    let pendingItems: ItemRow[] = []
+    let isThemeGroup = false
+
+    const flushGroup = () => {
+      if (pendingItems.length > 0 && currentHeading) {
+        // Sort items within group by lunr score (highest first)
+        pendingItems.sort((a, b) => (scoreMap.get(b.name) ?? 0) - (scoreMap.get(a.name) ?? 0))
+        filtered.push(currentHeading)
+        filtered.push(...pendingItems)
+      }
+      pendingItems = []
+    }
+
+    for (const row of flatRows) {
+      if (row.type === 'heading') {
+        flushGroup()
+        currentHeading = row
+        isThemeGroup = row.title === 'Theme'
+      } else if (row.type === 'item') {
+        // Theme items use substring, doc items use lunr
+        const isMatch = isThemeGroup ? row.name.toLowerCase().includes(query) : scoreMap.has(row.name)
+        if (isMatch) {
+          pendingItems.push(row)
+        }
+      }
+    }
+    flushGroup()
+
+    return filtered
+  }, [flatRows, search, searchIndex])
+
+  // Extract only item rows for index-based navigation
+  const itemRows = React.useMemo<ItemRow[]>(
+    () => filteredRows.filter((r): r is ItemRow => r.type === 'item'),
+    [filteredRows],
+  )
+
+  // Reset selection when search/filter changes
+  React.useEffect(() => {
+    setSelectedIndex(0)
+  }, [search])
+
+  // Clamp selectedIndex to valid range
+  const clampedIndex = itemRows.length > 0 ? Math.min(selectedIndex, itemRows.length - 1) : -1
+  const selectedRow = clampedIndex >= 0 ? itemRows[clampedIndex] : null
+
+  // Sync selected label to parent for footer
+  React.useEffect(() => {
+    onSelectedLabelChange(selectedRow?.name ?? '')
+  }, [selectedRow?.name, onSelectedLabelChange])
+
+  // Find the index in filteredRows (including headings) for virtualizer scrolling
+  const selectedFilteredIndex = selectedRow ? filteredRows.indexOf(selectedRow) : -1
+
+  const virtualizer = useVirtualizer({
+    count: filteredRows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: (index) => (filteredRows[index]?.type === 'heading' ? HEADING_HEIGHT : ITEM_HEIGHT),
+    overscan: 5,
+  })
+
+  // Scroll virtualizer to selected item when it changes
+  React.useEffect(() => {
+    if (selectedFilteredIndex >= 0) {
+      virtualizer.scrollToIndex(selectedFilteredIndex, { align: 'auto' })
+    }
+  }, [selectedFilteredIndex, virtualizer])
+
+  // Keyboard navigation via capture-phase listener.
+  const stableRef = React.useRef({ itemRows, selectedRow, clampedIndex, onClose })
+  stableRef.current = { itemRows, selectedRow, clampedIndex, onClose }
+
+  React.useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      const { itemRows: rows, selectedRow: selected, clampedIndex: idx, onClose: close } = stableRef.current
+      if (rows.length === 0 && e.key !== 'Escape') return
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault()
+          setSelectedIndex((prev) => Math.min(prev + 1, rows.length - 1))
+          break
+        case 'ArrowUp':
+          e.preventDefault()
+          setSelectedIndex((prev) => Math.max(prev - 1, 0))
+          break
+        case 'Home':
+          e.preventDefault()
+          setSelectedIndex(0)
+          break
+        case 'End':
+          e.preventDefault()
+          setSelectedIndex(rows.length - 1)
+          break
+        case 'Enter':
+          e.preventDefault()
+          if (selected) {
+            close()
+            selected.action()
+          }
+          break
+      }
+    }
+    document.addEventListener('keydown', handler, true)
+    return () => document.removeEventListener('keydown', handler, true)
+  }, [])
+
+  const isEmpty = itemRows.length === 0
+
+  return (
+    <>
+      {isEmpty && <CommandEmpty>No results found.</CommandEmpty>}
+      <CommandList className="h-[390px] max-h-full w-full md:w-full" scrollRef={scrollRef}>
+        <div style={{ height: virtualizer.getTotalSize(), position: 'relative', width: '100%' }}>
+          {virtualizer.getVirtualItems().map((virtualRow) => {
+            const row = filteredRows[virtualRow.index]
+            const isSelected = row === selectedRow
+            return (
+              <div
+                key={virtualRow.key}
+                data-index={virtualRow.index}
+                ref={virtualizer.measureElement}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: '100%',
+                  transform: `translateY(${virtualRow.start}px)`,
+                }}>
+                {row?.type === 'heading' ? (
+                  <div
+                    data-slot="command-group-heading"
+                    className="px-2 py-1.5 font-medium text-muted-foreground text-sm">
+                    {row.title}
+                  </div>
+                ) : (
+                  <CommandItem
+                    value={row?.name}
+                    textValue={search ? `${row?.name} ${search}` : row?.name}
+                    data-highlighted={isSelected ? '' : undefined}
+                    aria-selected={isSelected}
+                    onSelect={() => {
+                      onClose()
+                      row?.action()
+                    }}
+                    onPointerMove={() => {
+                      const idx = itemRows.indexOf(row as ItemRow)
+                      if (idx >= 0) setSelectedIndex(idx)
+                    }}>
+                    {row?.icon}
+                    <span>{row?.name}</span>
+                  </CommandItem>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </CommandList>
+    </>
+  )
+}
+
+// -- CommandFooter -----------------------------------------------------------
+
+function CommandFooter({ selectedLabel }: { selectedLabel: string }) {
+  const docsConfig = useDocsConfig()
+  const sidebarItems = docsConfig.sidebarNav.flatMap((group) => flattenSidebarItems(group.items ?? []))
+  const selectedNavItem = sidebarItems.find((item) => item.title === selectedLabel)
+  useKeyCommands(
+    {
+      'ctrl+shift+c': {
+        description: 'Copy command',
+        execute: () => {
+          if (!selectedLabel) return
+          navigator.clipboard.writeText(`bunx @gentleduck/cli add ${selectedLabel.toLowerCase().replace(/ /g, '-')}`)
+        },
+        name: 'ctrl+shift+c',
+      },
+    },
+    { preventDefault: true },
+  )
+  return (
+    <div className="hidden h-10 w-full items-center justify-between gap-4 border-t px-2 pt-2 lg:flex">
+      <div className="flex h-full w-full items-center justify-between gap-4">
+        {selectedLabel && (
+          <Button className={cn('px-2')} size={'sm'} variant={'outline'}>
+            <CornerDownLeft aria-hidden="true" />
+            <Separator className="m-0 h-4 p-0" orientation="vertical" />
+            {selectedLabel.split(' ')?.[0]}
+          </Button>
+        )}
+        {selectedLabel && selectedNavItem?.title ? (
+          <Button className={cn('px-2')} size={'sm'} variant={'outline'}>
+            <div className="flex items-center gap-1">
+              <Command aria-hidden="true" className="!size-3" />
+              <p className="text-md">C</p>
+            </div>
+            <Separator className="m-0 h-4 p-0" orientation="vertical" />
+            <div className="flex items-center gap-1">
+              <span>bunx @gentleduck/cli add</span>
+              <span className="text-blue-400">{selectedNavItem.title.split(' ')?.[0]?.toLowerCase()}</span>
+            </div>
+          </Button>
+        ) : (
+          <p className="flex h-full w-full items-center justify-center whitespace-nowrap text-right text-muted-foreground text-sm">
+            <span className="whitespace-nowrap font-medium text-sm">Command palette</span> for the documentation
+            content.
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/layouts/{site-header/header-shell.tsx → header-shell.tsx}

@@ -52,14 +52,14 @@ export function HeaderBrand({
   return (
     <Link className={cn('flex items-center gap-2 text-foreground', className)} href={href}>
       <Image
-        alt="Logo"
+        alt={`${label} logo`}
         className={cn('hidden h-6 w-6 dark:block', logoClassName)}
         height={512}
         src={logoDark}
         width={512}
       />
       <Image
-        alt="Logo"
+        alt={`${label} logo`}
         className={cn('block h-6 w-6 dark:hidden', logoClassName)}
         height={512}
         src={logoLight}

package/src/components/layouts/{site-footer/index.tsx → site-footer.tsx}

@@ -1,7 +1,7 @@
 'use client'
 
 import { useSiteConfig } from '@duck-docs/context'
-import { buttonVariants } from '@gentleduck/registry-ui-duckui/button'
+import { buttonVariants } from '@gentleduck/registry-ui/button'
 import { HeartIcon, Mail } from 'lucide-react'
 import Link from 'next/link'
 
@@ -20,6 +20,7 @@ export function SiteFooter() {
             {authorUrl ? (
               <a className="font-medium underline underline-offset-4" href={authorUrl} rel="noreferrer" target="_blank">
                 {authorName}
+                <span className="sr-only"> (opens in a new tab)</span>
               </a>
             ) : (
               <span className="font-medium">{authorName}</span>
@@ -33,6 +34,7 @@ export function SiteFooter() {
                   rel="noreferrer"
                   target="_blank">
                   GitHub
+                  <span className="sr-only"> (opens in a new tab)</span>
                 </a>
                 .
               </>
@@ -53,17 +55,18 @@ export function FooterButtons() {
     <>
       <Link
         className={buttonVariants({ size: 'sm', variant: 'outline' })}
-        href="https://github.com/sponsors/wildduck2"
+        href={siteConfig.links?.sponsor ?? 'https://opencollective.com/gentelduck'}
+        rel="noreferrer"
         target="_blank">
-        <HeartIcon className="mr-2 h-4 w-4 fill-current text-red-600" />
+        <HeartIcon aria-hidden="true" className="mr-2 h-4 w-4 fill-current text-red-600" />
         Sponsor
+        <span className="sr-only"> (opens in a new tab)</span>
       </Link>
       <Link
         className={buttonVariants({ size: 'sm', variant: 'outline' })}
-        href={siteConfig.links?.email ? `mailto:${siteConfig.links.email}` : 'mailto:support@gentleduck.org'}
-        target="_blank">
-        <Mail />
-        <span className="">Email</span>
+        href={siteConfig.links?.email ? `mailto:${siteConfig.links.email}` : 'mailto:support@gentleduck.org'}>
+        <Mail aria-hidden="true" />
+        <span>Email</span>
       </Link>
     </>
   )