feat(home): browse-by-category cards + /stack/$category pages + stacked social dropdown (#935)

* feat(home): browse-by-category cards, /stack/$category pages, stacked social dropdown

Cherry-picks the genuinely useful pieces from #931 onto main:

- Add a "framework" library group containing Start and Router, separate from
  data-and-state, so the framework-tier libraries get their own category.
- Replace the bulky Open Source Libraries grid on the home page with a
  condensed five-card "Browse the stack" section (one card per category,
  linking to a dedicated category page).
- Add /stack/$category landing pages: header, "Where to start" top pick,
  the full list of libraries in the category, and category-tagged blog
  posts. Drops the editorial-style verdict block, criteria section,
  in-this-guide rail, and compare-across-the-stack rail.
- Replace the inline 2x3 social icon strip in Navbar with a stacked
  three-icon trigger that opens a labeled dropdown of all six channels.

* style: oxfmt tidy on Navbar and index

* Fix docs webhook invalidation

* Add friendly URL-aware 404 page

Author: tannerlinsley

scripts/sync-docs-webhooks.ts

@@ -29,6 +29,14 @@ if (!dryRun && !webhookSecret) {
   )
 }
 
+if (!dryRun && webhookSecret) {
+  if (webhookSecret.length < 16 || /\s/.test(webhookSecret)) {
+    throw new Error(
+      'GITHUB_WEBHOOK_SECRET must be a raw secret value, not Netlify env:get output for a secret variable.',
+    )
+  }
+}
+
 function runGh(args: Array<string>) {
   return execFileSync('gh', args, {
     cwd: process.cwd(),

src/components/Navbar.tsx

@@ -33,6 +33,12 @@ import { SearchButton } from './SearchButton'
 import { libraries, SIDEBAR_LIBRARY_IDS, type LibrarySlim } from '~/libraries'
 import { useClickOutside } from '~/hooks/useClickOutside'
 import { GithubIcon } from '~/components/icons/GithubIcon'
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownItem,
+  DropdownTrigger,
+} from '~/components/Dropdown'
 import { DiscordIcon } from '~/components/icons/DiscordIcon'
 import { InstagramIcon } from '~/components/icons/InstagramIcon'
 import { BSkyIcon } from '~/components/icons/BSkyIcon'
@@ -216,40 +222,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
     </Link>
   )
 
-  const socialLinks = (
-    <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://github.com/TanStack"
-        aria-label="Follow TanStack on GitHub"
-      >
-        <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"
-        aria-label="Follow TanStack on Besky"
-      >
-        <BSkyIcon />
-      </a>
-      <a
-        href="https://instagram.com/tan_stack"
-        aria-label="Follow TanStack on Instagram"
-      >
-        <InstagramIcon />
-      </a>
-      <a
-        href="https://youtube.com/@tan_stack"
-        aria-label="Subscribe to TanStack on YouTube"
-      >
-        <YouTubeIcon />
-      </a>
-      <a href="https://tlinz.com/discord" aria-label="Join TanStack Discord">
-        <DiscordIcon />
-      </a>
-    </div>
-  )
+  const socialLinks = <SocialStack />
 
   const navbar = (
     <div
@@ -777,3 +750,83 @@ export function Navbar({ children }: { children: React.ReactNode }) {
     </>
   )
 }
+
+const SOCIAL_LINKS = [
+  {
+    label: 'GitHub',
+    href: 'https://github.com/TanStack',
+    Icon: GithubIcon,
+  },
+  {
+    label: 'Discord',
+    href: 'https://tlinz.com/discord',
+    Icon: DiscordIcon,
+  },
+  {
+    label: 'YouTube',
+    href: 'https://youtube.com/@tan_stack',
+    Icon: YouTubeIcon,
+  },
+  {
+    label: 'X (Twitter)',
+    href: 'https://x.com/tan_stack',
+    Icon: BrandXIcon,
+  },
+  {
+    label: 'Bluesky',
+    href: 'https://bsky.app/profile/tanstack.com',
+    Icon: BSkyIcon,
+  },
+  {
+    label: 'Instagram',
+    href: 'https://instagram.com/tan_stack',
+    Icon: InstagramIcon,
+  },
+] as const
+
+function SocialStack() {
+  const stackTop = SOCIAL_LINKS.slice(0, 3)
+
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <button
+          type="button"
+          aria-label="TanStack social channels"
+          title="Social channels"
+          className="inline-flex h-9 items-center pl-1 pr-2"
+        >
+          <span className="relative inline-flex items-center">
+            {stackTop.map(({ label, Icon }, i) => (
+              <span
+                key={label}
+                className={twMerge(
+                  'inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-600 shadow-sm transition-transform dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300',
+                  i > 0 && '-ml-3',
+                )}
+                style={{ zIndex: stackTop.length - i }}
+              >
+                <Icon className="h-3 w-3" />
+              </span>
+            ))}
+          </span>
+        </button>
+      </DropdownTrigger>
+      <DropdownContent align="end" sideOffset={8} className="min-w-44">
+        {SOCIAL_LINKS.map(({ label, href, Icon }) => (
+          <DropdownItem key={href} asChild>
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={`TanStack on ${label}`}
+            >
+              <Icon className="h-3.5 w-3.5" />
+              <span>{label}</span>
+            </a>
+          </DropdownItem>
+        ))}
+      </DropdownContent>
+    </Dropdown>
+  )
+}