feat(homepage): Refresh setup cards and SDK list, fix search click tracking

.env.example

@@ -3,6 +3,9 @@
 # warning: variables prefixed with NEXT_PUBLIC_ will be made available to client-side code
 # be careful not to expose sensitive data (in this case your Algolia admin key)
 
-NEXT_PUBLIC_ALGOLIA_APP_ID=
-NEXT_PUBLIC_ALGOLIA_SEARCH_KEY=
+# Algolia Insights (search click tracking). Must be the same application and a
+# valid key for the index @sentry-internal/global-search queries, or every click
+# event is rejected with a 401.
+NEXT_PUBLIC_ALGOLIA_APP_ID=OOK48W9UCL
+NEXT_PUBLIC_ALGOLIA_SEARCH_KEY=2d64ec1106519cbc672d863b0d200782
 NEXT_PUBLIC_SENTRY_DSN=

.github/workflows/algolia-index.yml

@@ -63,8 +63,6 @@ jobs:
           ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
           DOCS_INDEX_NAME: ${{ secrets.DOCS_INDEX_NAME }}
-          NEXT_PUBLIC_ALGOLIA_APP_ID: ${{ secrets.NEXT_PUBLIC_ALGOLIA_APP_ID }}
-          NEXT_PUBLIC_ALGOLIA_SEARCH_KEY: ${{ secrets.NEXT_PUBLIC_ALGOLIA_SEARCH_KEY }}
           ALGOLIA_SENTRY_DSN: ${{ secrets.ALGOLIA_SENTRY_DSN }}
           SENTRY_DSN: https://examplePublicKey@o0.ingest.sentry.io/0
           NEXT_PUBLIC_SENTRY_DSN: https://examplePublicKey@o0.ingest.sentry.io/0
@@ -76,8 +74,6 @@ jobs:
           ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
           DOCS_INDEX_NAME: ${{ secrets.DEVELOP_DOCS_INDEX_NAME }}
-          NEXT_PUBLIC_ALGOLIA_APP_ID: ${{ secrets.NEXT_PUBLIC_ALGOLIA_APP_ID }}
-          NEXT_PUBLIC_ALGOLIA_SEARCH_KEY: ${{ secrets.NEXT_PUBLIC_ALGOLIA_SEARCH_KEY }}
           ALGOLIA_SENTRY_DSN: ${{ secrets.ALGOLIA_SENTRY_DSN }}
           SENTRY_DSN: https://examplePublicKey@o0.ingest.sentry.io/0
           NEXT_PUBLIC_SENTRY_DSN: https://examplePublicKey@o0.ingest.sentry.io/0

scripts/algolia.ts

@@ -14,6 +14,7 @@ import {isDeveloperDocs} from 'sentry-docs/isDeveloperDocs';
 
 import {getDevDocsFrontMatter, getDocsFrontMatter} from '../src/mdx';
 import {FrontMatter} from '../src/types';
+import {isVersioned} from '../src/versioning';
 
 const ALGOLIA_SENTRY_DSN = process.env.ALGOLIA_SENTRY_DSN;
 if (ALGOLIA_SENTRY_DSN) {
@@ -87,7 +88,13 @@ async function indexAndUpload() {
     : getDocsFrontMatter());
 
   const allPages = pageFrontMatters.filter(
-    frontMatter => !frontMatter.draft && !frontMatter.noindex && frontMatter.title
+    frontMatter =>
+      !frontMatter.draft &&
+      !frontMatter.noindex &&
+      frontMatter.title &&
+      // Versioned pages document superseded SDK majors and outrank the current
+      // docs for the same query. They stay reachable via the version selector.
+      !isVersioned(frontMatter.slug)
   );
   const pages = DRY_RUN ? allPages.slice(0, DRY_RUN_PAGE_LIMIT) : allPages;
   const uploadIndex = DRY_RUN ? null : index;

src/components/agentSetupCallout/index.tsx

@@ -4,6 +4,7 @@ import {ChevronDownIcon, ChevronRightIcon} from '@radix-ui/react-icons';
 import * as Sentry from '@sentry/nextjs';
 import Link from 'next/link';
 import {useCallback, useState} from 'react';
+import {Copy} from 'react-feather';
 import {usePlausibleEvent} from 'sentry-docs/hooks/usePlausibleEvent';
 import {DocMetrics} from 'sentry-docs/metrics';
 
@@ -66,7 +67,7 @@ export function AgentSetupCallout({skill, platformName}: Props) {
           <code className={styles.promptText}>{prompt}</code>
         </div>
         <button className={styles.copyButton} onClick={copyPrompt} type="button">
-          <CopyIcon />
+          <Copy size={14} />
           {copied ? 'Copied!' : 'Copy Prompt'}
         </button>
       </div>
@@ -108,21 +109,3 @@ export function AgentSetupCallout({skill, platformName}: Props) {
     </div>
   );
 }
-
-function CopyIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-    </svg>
-  );
-}

src/components/copyPromptButton/index.tsx

@@ -5,6 +5,7 @@ import {Theme} from '@radix-ui/themes';
 import * as Sentry from '@sentry/nextjs';
 import {useTheme} from 'next-themes';
 import {useCallback, useMemo, useState} from 'react';
+import {Copy} from 'react-feather';
 import {usePlausibleEvent} from 'sentry-docs/hooks/usePlausibleEvent';
 import {DocMetrics} from 'sentry-docs/metrics';
 
@@ -98,7 +99,7 @@ export function CopyPromptButton({skill, platformName}: Props) {
               type="button"
               aria-label="Copy setup prompt for AI agents"
             >
-              <CopyIcon />
+              <Copy size={14} />
               <span className={styles.label}>{copied ? 'Copied!' : 'Copy Prompt'}</span>
             </button>
           </Tooltip.Trigger>
@@ -117,21 +118,3 @@ export function CopyPromptButton({skill, platformName}: Props) {
     </span>
   );
 }
-
-function CopyIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-    </svg>
-  );
-}

src/components/header.tsx

@@ -11,7 +11,6 @@ import SentryLogoSVG from 'sentry-docs/logos/sentry-logo-dark.svg';
 import {Platform} from 'sentry-docs/types';
 
 import {MagicIcon} from './cutomIcons/magic';
-import {useHomeSearchVisibility} from './homeSearchVisibility';
 import {mainSections} from './navigationData';
 import sidebarStyles from './sidebar/style.module.scss';
 import {ThemeToggle} from './theme-toggle';
@@ -49,18 +48,10 @@ export function Header({
   platforms = [],
 }: Props) {
   const isHomePage = pathname === '/';
-  const [homeSearchVisible, setHomeSearchVisible] = useState(true);
   const [homeMobileNavOpen, setHomeMobileNavOpen] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
 
-  // Listen for home search visibility changes
-  useHomeSearchVisibility(
-    useCallback((isVisible: boolean) => {
-      setHomeSearchVisible(isVisible);
-    }, [])
-  );
-
   // Close mobile overlays on navigation
   useEffect(() => {
     setMobileSearchOpen(false);
@@ -175,48 +166,21 @@ export function Header({
     return () => window.removeEventListener('resize', handleResize);
   }, [sidebarOpen]);
 
-  // Show header search if: not on home page, OR on home page but home search is scrolled out of view
-  const showHeaderSearch = !isHomePage || !homeSearchVisible;
-
   return (
     <header className="bg-[var(--gray-1)] h-[var(--header-height)] w-full z-50 border-b border-[var(--gray-a3)] fixed top-0 flex items-center min-h-[64px]">
       {/* define a header-height variable for consumption by other components */}
       <style>{`
         :root { --header-height: 64px; }
-        /* Home page: align header content with max-w-screen-xl (1280px) content */
-        /* The nav element has px-4 (16px) on mobile, md:pl-3 (12px) on desktop */
-        /* Home content uses px-4 (16px), sm:px-8 (32px), lg:px-[50px] */
-        /* So we subtract the nav's padding from the content's padding */
+        /* Home page: full-width nav that spans the viewport (matches the old
+         * homepage). No max-width cap — the nav's own edge padding
+         * (px-4 / md:pl-3 and the right block's lg:pr-6) handles spacing. */
         .header-content-home {
-          max-width: 1280px;
-          margin-left: auto;
-          margin-right: auto;
+          max-width: none;
+          margin-left: 0;
+          margin-right: 0;
           padding-left: 0;
           padding-right: 0;
         }
-        @media (min-width: 640px) {
-          .header-content-home {
-            /* 32px (content) - 16px (nav px-4) = 16px */
-            padding-left: 16px;
-            padding-right: 16px;
-          }
-        }
-        @media (min-width: 768px) {
-          .header-content-home {
-            /* 32px (content) - 12px (nav md:pl-3) = 20px on left */
-            /* 32px (content) - 16px (nav md:pr-4) = 16px on right */
-            padding-left: 20px;
-            padding-right: 16px;
-          }
-        }
-        @media (min-width: 1024px) {
-          .header-content-home {
-            /* 50px (content) - 12px (nav md:pl-3) = 38px on left */
-            /* 50px (content) - 24px (right div lg:pr-6) = 26px on right */
-            padding-left: 38px;
-            padding-right: 26px;
-          }
-        }
         /* Doc pages: fluid centering to match sidebar offset at wide viewports */
         .header-content:not(.header-content-home) {
           padding-left: var(--layout-offset, 0px);
@@ -328,8 +292,6 @@ export function Header({
             <div
               className="flex flex-shrink-0 items-center gap-2"
               style={{
-                visibility: showHeaderSearch ? 'visible' : 'hidden',
-                pointerEvents: showHeaderSearch ? 'auto' : 'none',
                 width: '340px',
                 minWidth: '340px',
               }}