feat(docs): add doc, api links to different components

tszhong0411 · Jan 18, 2025 · 3c2e54a · 3c2e54a
1 parent 67c9458
commit 3c2e54a
Show file tree

Hide file tree

Showing 38 changed files with 148 additions and 1 deletion.
diff --git a/apps/docs/mdx.config.ts b/apps/docs/mdx.config.ts
@@ -13,6 +13,22 @@ const Doc = defineCollection({
       name: 'description',
       type: 'string',
       required: true
+    },
+    {
+      name: 'link',
+      type: 'nested',
+      of: {
+        fields: [
+          {
+            name: 'doc',
+            type: 'string'
+          },
+          {
+            name: 'api',
+            type: 'string'
+          }
+        ]
+      }
     }
   ],
   computedFields: [

diff --git a/apps/docs/src/app/(main)/[...slug]/link-badges.tsx b/apps/docs/src/app/(main)/[...slug]/link-badges.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import { badgeVariants, Link } from '@tszhong0411/ui'
+import { cn } from '@tszhong0411/utils'
+import { ExternalLinkIcon } from 'lucide-react'
+import type { Link as DocLink } from 'mdx/generated'
+
+const LinkBadges = (props: DocLink) => {
+  const { doc, api } = props
+
+  return (
+    <div className='flex items-center gap-2 pt-4'>
+      {doc ? (
+        <Link href={doc} className={cn(badgeVariants({ variant: 'secondary' }), 'gap-1')}>
+          Docs
+          <ExternalLinkIcon className='size-3' />
+        </Link>
+      ) : null}
+      {api ? (
+        <Link href={api} className={cn(badgeVariants({ variant: 'secondary' }), 'gap-1')}>
+          API Reference
+          <ExternalLinkIcon className='size-3' />
+        </Link>
+      ) : null}
+    </div>
+  )
+}
+
+export default LinkBadges
diff --git a/apps/docs/src/app/(main)/[...slug]/page.tsx b/apps/docs/src/app/(main)/[...slug]/page.tsx
@@ -4,6 +4,8 @@ import { notFound } from 'next/navigation'
 
 import Mdx from '@/components/mdx'
 
+import LinkBadges from './link-badges'
+
 type PageProps = {
   params: Promise<{
     slug?: string[]
@@ -68,13 +70,16 @@ const Page = async (props: PageProps) => {
     notFound()
   }
 
-  const { title, description, code } = doc
+  const { title, description, link, code } = doc
+
+  const hasLinks = link?.doc !== undefined || link?.api !== undefined
 
   return (
     <div>
       <div className='space-y-4'>
         <h1 className='relative text-3xl font-extrabold tracking-tight md:text-4xl'>{title}</h1>
         <p className='text-muted-foreground'>{description}</p>
+        {hasLinks ? <LinkBadges {...link} /> : null}
       </div>
       <Mdx className='mt-8' code={code} />
     </div>

diff --git a/apps/docs/src/app/ui/components/accordion.mdx b/apps/docs/src/app/ui/components/accordion.mdx
@@ -1,6 +1,9 @@
 ---
 title: Accordion
 description: A vertically stacked set of interactive headings that each reveal a section of content.
+link:
+  doc: https://www.radix-ui.com/primitives/docs/components/accordion
+  api: https://www.radix-ui.com/primitives/docs/components/accordion#api-reference
 ---
 
 <ComponentPreview name='accordion/accordion' />

diff --git a/apps/docs/src/app/ui/components/alert-dialog.mdx b/apps/docs/src/app/ui/components/alert-dialog.mdx
@@ -1,6 +1,9 @@
 ---
 title: Alert Dialog
 description: A modal dialog that interrupts the user with important content and expects a response.
+link:
+  doc: https://www.radix-ui.com/primitives/docs/components/alert-dialog
+  api: https://www.radix-ui.com/primitives/docs/components/alert-dialog#api-reference
 ---
 
 <ComponentPreview name='alert-dialog/alert-dialog' />

diff --git a/apps/docs/src/app/ui/components/aspect-ratio.mdx b/apps/docs/src/app/ui/components/aspect-ratio.mdx
@@ -1,6 +1,9 @@
 ---
 title: Aspect Ratio
 description: Displays content within a desired ratio.
+link:
+  doc: https://www.radix-ui.com/primitives/docs/components/aspect-ratio
+  api: https://www.radix-ui.com/primitives/docs/components/aspect-ratio#api-reference
 ---
 
 <ComponentPreview name='aspect-ratio/aspect-ratio' />

diff --git a/apps/docs/src/app/ui/components/avatar.mdx b/apps/docs/src/app/ui/components/avatar.mdx
@@ -1,6 +1,9 @@
 ---
 title: Avatar
 description: An image element with a fallback for representing the user.
+link:
+  doc: https://www.radix-ui.com/primitives/docs/components/avatar
+  api: https://www.radix-ui.com/primitives/docs/components/avatar#api-reference
 ---
 
 <ComponentPreview name='avatar/avatar' />

diff --git a/apps/docs/src/app/ui/components/carousel.mdx b/apps/docs/src/app/ui/components/carousel.mdx
@@ -1,6 +1,9 @@
 ---
 title: Carousel
 description: A carousel with motion and swipe built using Embla.
+link:
+  doc: https://www.embla-carousel.com/get-started/react
+  api: https://www.embla-carousel.com/api
 ---
 
 <ComponentPreview name='carousel/carousel' />

diff --git a/apps/docs/src/app/ui/components/checkbox.mdx b/apps/docs/src/app/ui/components/checkbox.mdx
@@ -1,6 +1,9 @@
 ---
 title: Checkbox
 description: A control that allows the user to toggle between checked and not checked.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/checkbox
+  api: https://www.radix-ui.com/docs/primitives/components/checkbox#api-reference
 ---
 
 <ComponentPreview name='checkbox/checkbox' />

diff --git a/apps/docs/src/app/ui/components/collapsible.mdx b/apps/docs/src/app/ui/components/collapsible.mdx
@@ -1,6 +1,9 @@
 ---
 title: Collapsible
 description: An interactive component which expands/collapses a panel.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/collapsible
+  api: https://www.radix-ui.com/docs/primitives/components/collapsible#api-reference
 ---
 
 <ComponentPreview name='collapsible/collapsible' />

diff --git a/apps/docs/src/app/ui/components/combobox.mdx b/apps/docs/src/app/ui/components/combobox.mdx
@@ -1,6 +1,9 @@
 ---
 title: Combobox
 description: Autocomplete input and command palette with a list of suggestions.
+link:
+  doc: https://ark-ui.com/react/docs/components/combobox
+  api: https://ark-ui.com/react/docs/components/combobox#api-reference
 ---
 
 <ComponentPreview name='combobox/combobox' />

diff --git a/apps/docs/src/app/ui/components/command.mdx b/apps/docs/src/app/ui/components/command.mdx
@@ -1,6 +1,7 @@
 ---
 title: Command
 description: Provides a flexible and styled interface for displaying a list of commands or options.
+doc: https://cmdk.paco.me
 ---
 
 <ComponentPreview name='command/command' />

diff --git a/apps/docs/src/app/ui/components/context-menu.mdx b/apps/docs/src/app/ui/components/context-menu.mdx
@@ -1,6 +1,9 @@
 ---
 title: Context Menu
 description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/context-menu
+  api: https://www.radix-ui.com/docs/primitives/components/context-menu#api-reference
 ---
 
 <ComponentPreview name='context-menu/context-menu' />

diff --git a/apps/docs/src/app/ui/components/data-table.mdx b/apps/docs/src/app/ui/components/data-table.mdx
@@ -1,6 +1,7 @@
 ---
 title: Data Table
 description: Powerful table and datagrids built using TanStack Table.
+doc: https://tanstack.com/table/v8/docs/introduction
 ---
 
 <ComponentPreview name='data-table/data-table' />
diff --git a/apps/docs/src/app/ui/components/dialog.mdx b/apps/docs/src/app/ui/components/dialog.mdx
@@ -1,6 +1,9 @@
 ---
 title: Dialog
 description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/dialog
+  api: https://www.radix-ui.com/docs/primitives/components/dialog#api-reference
 ---
 
 <ComponentPreview name='dialog/dialog' />

diff --git a/apps/docs/src/app/ui/components/drawer.mdx b/apps/docs/src/app/ui/components/drawer.mdx
@@ -1,6 +1,7 @@
 ---
 title: Drawer
 description: A drawer component for React.
+doc: https://github.com/emilkowalski/vaul
 ---
 
 <ComponentPreview name='drawer/drawer' />

diff --git a/apps/docs/src/app/ui/components/dropdown-menu.mdx b/apps/docs/src/app/ui/components/dropdown-menu.mdx
@@ -1,6 +1,9 @@
 ---
 title: Dropdown Menu
 description: Displays a menu to the user—such as a set of actions or functions—triggered by a button.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/dropdown-menu
+  api: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#api-reference
 ---
 
 <ComponentPreview name='dropdown-menu/dropdown-menu' />

diff --git a/apps/docs/src/app/ui/components/form.mdx b/apps/docs/src/app/ui/components/form.mdx
@@ -1,6 +1,7 @@
 ---
 title: Form
 description: Building forms with React Hook Form and Zod.
+doc: https://react-hook-form.com
 ---
 
 <ComponentPreview name='form/form' />

diff --git a/apps/docs/src/app/ui/components/hover-card.mdx b/apps/docs/src/app/ui/components/hover-card.mdx
@@ -1,6 +1,9 @@
 ---
 title: Hover Card
 description: For sighted users to preview content available behind a link.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/hover-card
+  api: https://www.radix-ui.com/docs/primitives/components/hover-card#api-reference
 ---
 
 <ComponentPreview name='hover-card/hover-card' />

diff --git a/apps/docs/src/app/ui/components/input.mdx b/apps/docs/src/app/ui/components/input.mdx
@@ -1,6 +1,9 @@
 ---
 title: Input
 description: A field where users can enter text or data.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/label
+  api: https://www.radix-ui.com/docs/primitives/components/label#api-reference
 ---
 
 <ComponentPreview name='input/input' />

diff --git a/apps/docs/src/app/ui/components/menubar.mdx b/apps/docs/src/app/ui/components/menubar.mdx
@@ -1,6 +1,9 @@
 ---
 title: Menubar
 description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/menubar
+  api: https://www.radix-ui.com/docs/primitives/components/menubar#api-reference
 ---
 
 <ComponentPreview name='menubar/menubar' />

diff --git a/apps/docs/src/app/ui/components/navigation-menu.mdx b/apps/docs/src/app/ui/components/navigation-menu.mdx
@@ -1,6 +1,9 @@
 ---
 title: Navigation Menu
 description: A collection of links for navigating websites.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/navigation-menu
+  api: https://www.radix-ui.com/docs/primitives/components/navigation-menu#api-reference
 ---
 
 <ComponentPreview name='navigation-menu/navigation-menu' />

diff --git a/apps/docs/src/app/ui/components/pagination.mdx b/apps/docs/src/app/ui/components/pagination.mdx
@@ -1,6 +1,9 @@
 ---
 title: Pagination
 description: Pagination with page navigation, next and previous links.
+link:
+  doc: https://ark-ui.com/react/docs/components/pagination
+  api: https://ark-ui.com/react/docs/components/pagination#api-reference
 ---
 
 <ComponentPreview name='pagination/pagination' />

diff --git a/apps/docs/src/app/ui/components/popover.mdx b/apps/docs/src/app/ui/components/popover.mdx
@@ -1,6 +1,9 @@
 ---
 title: Popover
 description: Displays rich content in a portal, triggered by a button.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/popover
+  api: https://www.radix-ui.com/docs/primitives/components/popover#api-reference
 ---
 
 <ComponentPreview name='popover/popover' />

diff --git a/apps/docs/src/app/ui/components/progress.mdx b/apps/docs/src/app/ui/components/progress.mdx
@@ -1,6 +1,9 @@
 ---
 title: Progress
 description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
+link:
+  doc: https://ark-ui.com/react/docs/components/progress-linear
+  api: https://ark-ui.com/react/docs/components/progress-linear#api-reference
 ---
 
 <ComponentPreview name='progress/progress' />

diff --git a/apps/docs/src/app/ui/components/radio-group.mdx b/apps/docs/src/app/ui/components/radio-group.mdx
@@ -1,6 +1,9 @@
 ---
 title: Radio Group
 description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/radio-group
+  api: https://www.radix-ui.com/docs/primitives/components/radio-group#api-reference
 ---
 
 <ComponentPreview name='radio-group/radio-group' />

diff --git a/apps/docs/src/app/ui/components/resizable.mdx b/apps/docs/src/app/ui/components/resizable.mdx
@@ -1,6 +1,9 @@
 ---
 title: Resizable
 description: Accessible resizable panel groups and layouts with keyboard support.
+link:
+  doc: https://github.com/bvaughn/react-resizable-panels
+  api: https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels
 ---
 
 <ComponentPreview name='resizable/resizable' />

diff --git a/apps/docs/src/app/ui/components/scroll-area.mdx b/apps/docs/src/app/ui/components/scroll-area.mdx
@@ -1,6 +1,9 @@
 ---
 title: Scroll Area
 description: Augments native scroll functionality for custom, cross-browser styling.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/scroll-area
+  api: https://www.radix-ui.com/docs/primitives/components/scroll-area#api-reference
 ---
 
 <ComponentPreview name='scroll-area/scroll-area' />

diff --git a/apps/docs/src/app/ui/components/select.mdx b/apps/docs/src/app/ui/components/select.mdx
@@ -1,6 +1,9 @@
 ---
 title: Select
 description: Displays a list of options for the user to pick from—triggered by a button.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/select
+  api: https://www.radix-ui.com/docs/primitives/components/select#api-reference
 ---
 
 <ComponentPreview name='select/select' />

diff --git a/apps/docs/src/app/ui/components/separator.mdx b/apps/docs/src/app/ui/components/separator.mdx
@@ -1,6 +1,9 @@
 ---
 title: Separator
 description: Visually or semantically separates content.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/separator
+  api: https://www.radix-ui.com/docs/primitives/components/separator#api-reference
 ---
 
 <ComponentPreview name='separator/separator' />

diff --git a/apps/docs/src/app/ui/components/sheet.mdx b/apps/docs/src/app/ui/components/sheet.mdx
@@ -1,6 +1,9 @@
 ---
 title: Sheet
 description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/dialog
+  api: https://www.radix-ui.com/docs/primitives/components/dialog#api-reference
 ---
 
 <ComponentPreview name='sheet/sheet' />

diff --git a/apps/docs/src/app/ui/components/slider.mdx b/apps/docs/src/app/ui/components/slider.mdx
@@ -1,6 +1,9 @@
 ---
 title: Slider
 description: An input where the user selects a value from within a given range.
+link:
+  doc: https://ark-ui.com/react/docs/components/slider
+  api: https://ark-ui.com/react/docs/components/slider#api-reference
 ---
 
 <ComponentPreview name='slider/slider' />

diff --git a/apps/docs/src/app/ui/components/switch.mdx b/apps/docs/src/app/ui/components/switch.mdx
@@ -1,6 +1,9 @@
 ---
 title: Switch
 description: A control that allows the user to toggle between checked and not checked.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/switch
+  api: https://www.radix-ui.com/docs/primitives/components/switch#api-reference
 ---
 
 <ComponentPreview name='switch/switch' />

diff --git a/apps/docs/src/app/ui/components/tabs.mdx b/apps/docs/src/app/ui/components/tabs.mdx
@@ -1,6 +1,9 @@
 ---
 title: Tabs
 description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/tabs
+  api: https://www.radix-ui.com/docs/primitives/components/tabs#api-reference
 ---
 
 <ComponentPreview name='tabs/tabs' />

diff --git a/apps/docs/src/app/ui/components/toaster.mdx b/apps/docs/src/app/ui/components/toaster.mdx
@@ -1,6 +1,9 @@
 ---
 title: Toaster
 description: A notification component for displaying brief, non-intrusive messages to the user.
+link:
+  doc: https://sonner.emilkowal.ski/getting-started
+  api: https://sonner.emilkowal.ski/toast
 ---
 
 <ComponentPreview name='toaster/toaster' />