Merge branch 'main' of https://github.com/TanStack/tanstack.com

Author: tannerlinsley

src/components/CopyPageDropdown.tsx

@@ -47,6 +47,15 @@ function ChatGPTIcon({ className }: { className?: string }) {
   )
 }
 
+// Cursor icon
+function CursorIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={className}>
+      <path d="M22.106 5.68L12.5.135a.998.998 0 00-.998 0L1.893 5.68a.84.84 0 00-.419.726v11.186c0 .3.16.577.42.727l9.607 5.547a.999.999 0 00.998 0l9.608-5.547a.84.84 0 00.42-.727V6.407a.84.84 0 00-.42-.726zm-.603 1.176L12.228 22.92c-.063.108-.228.064-.228-.061V12.34a.59.59 0 00-.295-.51l-9.11-5.26c-.107-.062-.063-.228.062-.228h18.55c.264 0 .428.286.296.514z"></path>
+    </svg>
+  )
+}
+
 // Cache for fetched markdown content
 const markdownCache = new Map<string, string>()
 
@@ -153,6 +162,17 @@ export function CopyPageDropdown({
     window.open(`https://chatgpt.com/?q=${prompt}`, '_blank')
   }
 
+  const handleOpenInCursor = () => {
+    const pageUrl = window.location.href
+    const prompt = `Read from this URL:\n${pageUrl}\nand explain it to me`
+    window.open(
+      `cursor://anysphere.cursor-deeplink/prompt?text=${encodeURIComponent(
+        prompt,
+      )}`,
+      '_blank',
+    )
+  }
+
   const menuItems = [
     {
       icon: MarkdownIcon,
@@ -172,6 +192,12 @@ export function CopyPageDropdown({
       description: 'Ask questions about this page',
       onSelect: handleOpenInChatGPT,
     },
+    {
+      icon: CursorIcon,
+      label: 'Open in Cursor',
+      description: 'Ask questions about this page',
+      onSelect: handleOpenInCursor,
+    },
   ]
 
   return (
@@ -246,7 +272,7 @@ export function CopyPageDropdown({
                 )}
                 onSelect={item.onSelect}
               >
-                <div className="flex-shrink-0 w-5 h-5 flex items-center justify-center text-gray-500 dark:text-gray-400">
+                <div className="flex-shrink-0 w-5 h-5 flex items-center justify-center text-gray-700 dark:text-gray-400">
                   <item.icon className="w-4 h-4" />
                 </div>
                 <div className="flex flex-col gap-0.5">

src/components/Navbar.tsx

@@ -26,7 +26,7 @@ import {
   Unauthenticated,
   AuthLoading,
 } from '~/components/AuthComponents'
-import { libraries } from '~/libraries'
+import { libraries, findLibrary } from '~/libraries'
 import { useCapabilities } from '~/hooks/useCapabilities'
 import { useClickOutside } from '~/hooks/useClickOutside'
 import { GithubIcon } from '~/components/icons/GithubIcon'
@@ -40,9 +40,15 @@ export function Navbar({ children }: { children: React.ReactNode }) {
   const matches = useMatches()
   const capabilities = useCapabilities()
 
-  const Title =
-    [...matches].reverse().find((m) => m.staticData.Title)?.staticData.Title ??
-    null
+  const { Title, library } = React.useMemo(() => {
+    const match = [...matches].reverse().find((m) => m.staticData.Title)
+    const libraryId = match?.params?.libraryId
+
+    return {
+      Title: match?.staticData.Title ?? null,
+      library: libraryId ? findLibrary(libraryId) : null,
+    }
+  }, [matches])
 
   const canAdmin = capabilities.includes('admin')
 
@@ -133,34 +139,30 @@ export function Navbar({ children }: { children: React.ReactNode }) {
   )
 
   const socialLinks = (
-    <div className="flex items-center">
+    <div className="flex items-center [&_a]:p-1.5 [&_a]:opacity-50 [&_a:hover]:opacity-100 [&_a]:transition-opacity [&_svg]:text-sm">
       <a
-        href="https://x.com/tan_stack"
-        className="p-1.5 opacity-50 hover:opacity-100 transition-opacity"
-        aria-label="Follow TanStack on X.com"
+        href={`https://github.com/${library?.repo ?? 'tanstack'}`}
+        aria-label={`Follow ${library?.name ?? 'TanStack'} on GitHub`}
       >
-        <BrandXIcon className="text-sm" />
+        <GithubIcon />
+      </a>
+      <a href="https://x.com/tan_stack" aria-label="Follow TanStack on X.com">
+        <BrandXIcon />
       </a>
       <a
         href="https://bsky.app/profile/tanstack.com"
-        className="p-1.5 opacity-50 hover:opacity-100 transition-opacity"
-        aria-label="Follow TanStack on Bluesky"
+        aria-label="Follow TanStack on Besky"
       >
-        <BSkyIcon className="text-sm" />
+        <BSkyIcon />
       </a>
       <a
         href="https://instagram.com/tan_stack"
-        className="p-1.5 opacity-50 hover:opacity-100 transition-opacity"
         aria-label="Follow TanStack on Instagram"
       >
-        <InstagramIcon className="text-sm" />
+        <InstagramIcon />
       </a>
-      <a
-        href="https://tlinz.com/discord"
-        className="p-1.5 opacity-50 hover:opacity-100 transition-opacity"
-        aria-label="Join TanStack Discord"
-      >
-        <DiscordIcon className="text-sm" />
+      <a href="https://tlinz.com/discord" aria-label="Join TanStack Discord">
+        <DiscordIcon />
       </a>
     </div>
   )