New version picker for stable (#151)

* Feature/version switch (#149)

* added version switch

* added changeset

* added version picker for stable

* refactored version picker (#150)

* update version switch

Author: bdbch

.changeset/fair-bats-drop.md

@@ -0,0 +1,5 @@
+---
+'tiptap-docs': minor
+---
+
+Added a new version switch and versioning constants to the constant config

src/components/VersionSwitch.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { ChevronDownIcon } from 'lucide-react'
+import { NavLinkButton } from './ui/NavLinkButton'
+import { NavLink } from './NavLink'
+import { Tag } from './ui/Tag'
+import { VERSIONS, CURRENT_VERSION } from '@/utils/constants'
+import type { VersionData } from '@/types'
+
+const getItemLabel = ({ version }: { version: VersionData }) => {
+  if (version.isLegacy) return 'Legacy'
+  if (version.isBeta) return 'Beta'
+  if (version.isAlpha) return 'Alpha'
+  if (version.isRc) return 'RC'
+  return false
+}
+
+const VersionItem = ({ version }: { version: VersionData }) => {
+  const label = getItemLabel({ version })
+  const isCurrentVersion = version.version === CURRENT_VERSION
+
+  return (
+    <DropdownMenu.Item asChild>
+      <NavLink href={version.url} target={!isCurrentVersion ? '_blank' : ''} hideIcon>
+        {version.version}
+        {label ? <Tag className="ml-1">{label}</Tag> : null}
+      </NavLink>
+    </DropdownMenu.Item>
+  )
+}
+
+export const VersionSwitch = () => {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <NavLinkButton className="p-1 text-base">
+          {CURRENT_VERSION}
+          <ChevronDownIcon className="w-3 h-3" />
+        </NavLinkButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content className="z-50 flex flex-col gap-6 px-2 py-6 text-black bg-white border rounded-lg shadow-md lg:py-3 border-grayAlpha-100">
+          <div>
+            {VERSIONS.map((version) => (
+              <VersionItem key={version.version} version={version} />
+            ))}
+          </div>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  )
+}

src/components/layouts/Layout.tsx

@@ -11,6 +11,7 @@ import { MobileNavigationButton } from '../MobileNavigationButton'
 import { DocsSidebar } from '../SidebarRenderer'
 import { MobileNavigationDropdown } from '../MobileNavigationDropdown'
 import { SidebarTableOfContent } from '../SidebarTableOfContent'
+import { VersionSwitch } from '../VersionSwitch'
 import Link from '@/components/Link'
 import { cn } from '@/utils'
 import { getAllMetadata } from '@/server/getAllMetadata'
@@ -38,7 +39,8 @@ export const LayoutHeader = forwardRef<HTMLDivElement, { config?: SidebarConfig
                 <span className="font-semibold">Tiptap</span> Docs
               </span>
             </Link>
-            <span className="hidden lg:block select-none text-black/15">/</span>
+            <VersionSwitch />
+            <span className="hidden select-none lg:block text-black/15">/</span>
             <nav className="hidden lg:flex items-center gap-[0.5px]">
               <ProductDropdown />
               <NavLink href="/guides">Guides</NavLink>
@@ -49,11 +51,11 @@ export const LayoutHeader = forwardRef<HTMLDivElement, { config?: SidebarConfig
               </NavLink>
             </nav>
           </div>
-          <div className="ml-auto flex items-center gap-2">
+          <div className="flex items-center gap-2 ml-auto">
             <div className="hidden xl:block">
               <SearchButton />
             </div>
-            <div className="hidden lg:flex items-center gap-1 xl:hidden">
+            <div className="items-center hidden gap-1 lg:flex xl:hidden">
               <ToCButton />
               <SearchButton />
             </div>
@@ -73,11 +75,11 @@ export const LayoutHeader = forwardRef<HTMLDivElement, { config?: SidebarConfig
           </div>
         </div>
         <div className="block lg:hidden py-1.5 bg-white px-[1.125rem] shadow-slim rounded-bl-pilled rounded-br-pilled border-t border-neutral-200">
-          <div className="h-8 py-1 flex items-center">
-            <div className="mr-auto flex items-center gap-2">
+          <div className="flex items-center h-8 py-1">
+            <div className="flex items-center gap-2 mr-auto">
               <MobileNavigationButton config={config} />
             </div>
-            <div className="ml-auto flex items-center gap-2">
+            <div className="flex items-center gap-2 ml-auto">
               <ToCButton />
               <SearchButton />
             </div>
@@ -176,7 +178,7 @@ export const LayoutContent = forwardRef<HTMLDivElement, LayoutContentProps>(
         <div className="pt-6 pb-16 sm:pb-24 sm:pt-8 lg:pb-32 lg:pt-10">{children}</div>
 
         <footer className="border-t border-grayAlpha-300 pt-8 pb-[3.125rem]">
-          <div className="flex flex-col lg:flex-row items-start justify-between gap-4">
+          <div className="flex flex-col items-start justify-between gap-4 lg:flex-row">
             <div className="flex flex-col items-start flex-none">
               <PageEditFooter />
             </div>

src/types.ts

@@ -159,3 +159,12 @@ export interface UIComponentMetaWithUrl extends UIComponentMeta {
   path: string
   url: string
 }
+
+export interface VersionData {
+  version: string
+  url: string
+  isBeta?: boolean
+  isAlpha?: boolean
+  isRc?: boolean
+  isLegacy?: boolean
+}

src/utils/constants.ts

@@ -1,3 +1,5 @@
+import type { VersionData } from '@/types'
+
 export const DEMO_URL = process.env.NEXT_PUBLIC_DEMO_URL ?? 'https://embed.tiptap.dev/preview'
 
 export const PRO_DEMO_URL =
@@ -9,3 +11,22 @@ export const FULL_DOMAIN = `${DOMAIN}${BASE_PATH}`
 
 export const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID || null
 export const ENVIRONMENT = process.env.NEXT_PUBLIC_ENVIRONMENT || 'development'
+
+export const CURRENT_VERSION = '2.x'
+
+export const VERSIONS: Array<VersionData> = [
+  {
+    version: '3.x',
+    isBeta: true,
+    url: 'https://next.tiptap.dev',
+  },
+  {
+    version: '2.x',
+    url: 'https://tiptap.dev/docs',
+  },
+  {
+    version: '1.x',
+    isLegacy: true,
+    url: 'https://v1.tiptap.dev/',
+  },
+]