Merge branch 'fix/hydration-and-dom-warnings'

Author: tannerlinsley

public/ads.txt

@@ -43,7 +43,7 @@ export function Breadcrumbs({
         )}
         {showTocToggle && (
           <Dropdown>
-            <DropdownTrigger asChild={false}>
+            <DropdownTrigger>
               <button
                 className={twMerge(
                   hiddenClass,

src/components/Breadcrumbs.tsx

@@ -44,17 +44,18 @@ const EU_COUNTRIES = [
 
 export default function CookieConsent() {
   const [showBanner, setShowBanner] = useState(false)
-  const [showSettings, setShowSettings] = useState(false)
+
   const consentSettings = (() => {
     if (typeof document === 'undefined') {
-      return { analytics: false, ads: false }
+      return { analytics: false }
     }
     try {
       const stored = localStorage.getItem('cookie_consent')
-      if (!stored) return { analytics: false, ads: false }
-      return JSON.parse(stored) as { analytics: boolean; ads: boolean }
+      if (!stored) return { analytics: false }
+      const parsed = JSON.parse(stored)
+      return { analytics: Boolean(parsed.analytics) }
     } catch {
-      return { analytics: false, ads: false }
+      return { analytics: false }
     }
   })()
 
@@ -82,26 +83,26 @@ export default function CookieConsent() {
     }
   }
 
-  const updateGTMConsent = (settings: { analytics: boolean; ads: boolean }) => {
+  const updateGTMConsent = (settings: { analytics: boolean }) => {
     window.dataLayer = window.dataLayer || []
     window.dataLayer.push({
       event: 'cookie_consent',
       consent: {
         analytics_storage: settings.analytics ? 'granted' : 'denied',
-        ad_storage: settings.ads ? 'granted' : 'denied',
-        ad_personalization: settings.ads ? 'granted' : 'denied',
+        ad_storage: 'denied',
+        ad_personalization: 'denied',
       },
     })
 
     if (typeof window.gtag === 'function') {
       window.gtag('consent', 'update', {
         analytics_storage: settings.analytics ? 'granted' : 'denied',
-        ad_storage: settings.ads ? 'granted' : 'denied',
-        ad_personalization: settings.ads ? 'granted' : 'denied',
+        ad_storage: 'denied',
+        ad_personalization: 'denied',
       })
     }
 
-    if (settings.analytics || settings.ads) {
+    if (settings.analytics) {
       restoreGoogleScripts()
     } else {
       blockGoogleScripts()
@@ -110,8 +111,7 @@ export default function CookieConsent() {
 
   useEffect(() => {
     const checkLocationAndSetConsent = async () => {
-      // Only check location if no consent has been set yet
-      if (!consentSettings.analytics && !consentSettings.ads) {
+      if (!consentSettings.analytics) {
         try {
           const response = await fetch(
             'https://www.cloudflare.com/cdn-cgi/trace',
@@ -121,14 +121,12 @@ export default function CookieConsent() {
           const isEU = country ? EU_COUNTRIES.includes(country) : false
 
           if (isEU) {
-            // Set default denied consent for EU users
-            const euConsent = { analytics: false, ads: false }
+            const euConsent = { analytics: false }
             localStorage.setItem('cookie_consent', JSON.stringify(euConsent))
             updateGTMConsent(euConsent)
             setShowBanner(true)
           } else {
-            // For non-EU users, set default accepted consent and don't show banner
-            const nonEuConsent = { analytics: true, ads: true }
+            const nonEuConsent = { analytics: true }
             localStorage.setItem('cookie_consent', JSON.stringify(nonEuConsent))
             updateGTMConsent(nonEuConsent)
             setShowBanner(false)
@@ -146,123 +144,44 @@ export default function CookieConsent() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const acceptAllCookies = () => {
-    const consent = { analytics: true, ads: true }
+  const acceptCookies = () => {
+    const consent = { analytics: true }
     localStorage.setItem('cookie_consent', JSON.stringify(consent))
     updateGTMConsent(consent)
     setShowBanner(false)
   }
 
-  const rejectAllCookies = () => {
-    const consent = { analytics: false, ads: false }
+  const rejectCookies = () => {
+    const consent = { analytics: false }
     localStorage.setItem('cookie_consent', JSON.stringify(consent))
     updateGTMConsent(consent)
     setShowBanner(false)
   }
 
-  const openSettings = () => setShowSettings(true)
-  const closeSettings = () => setShowSettings(false)
+  if (!showBanner) return null
 
   return (
-    <>
-      {showBanner && (
-        <div
-          className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 p-4 z-50
-          text-sm gap-2 flex flex-col lg:flex-row [box-shadow:0_0_10px_rgba(0,0,0,0.2)]
-          items-center justify-between
-          "
-        >
-          <span className="text-xs">
-            We use cookies for site functionality, analytics, and ads{' '}
-            <strong>
-              (which is a large part of how TanStack OSS remains free forever)
-            </strong>
-            . See our{' '}
-            <Link to="/privacy" className="underline">
-              Privacy Policy
-            </Link>{' '}
-            for details.
-          </span>
-          <div className="flex gap-2 flex-wrap items-center">
-            <Button color="red" onClick={rejectAllCookies}>
-              Reject All
-            </Button>
-            <Button color="gray" onClick={openSettings}>
-              Customize
-            </Button>
-            <Button color="emerald" onClick={acceptAllCookies}>
-              Accept All
-            </Button>
-          </div>
-        </div>
-      )}
-
-      {showSettings && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
-          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md w-full mx-4">
-            <h3 className="text-lg font-bold mb-4">Cookie Settings</h3>
-            <div className="space-y-4">
-              <div className="flex items-start gap-2">
-                <input
-                  type="checkbox"
-                  id="analytics-checkbox"
-                  defaultChecked={consentSettings.analytics}
-                  onChange={(e) => {
-                    const updated = {
-                      ...consentSettings,
-                      analytics: e.target.checked,
-                    }
-                    localStorage.setItem(
-                      'cookie_consent',
-                      JSON.stringify(updated),
-                    )
-                    updateGTMConsent(updated)
-                  }}
-                  className="mt-1"
-                />
-                <label htmlFor="analytics-checkbox" className="cursor-pointer">
-                  <span className="font-medium">Analytics</span>
-                  <p className="text-sm text-gray-600 dark:text-gray-400">
-                    Track site usage anonymously
-                  </p>
-                </label>
-              </div>
-              <div className="flex items-start gap-2">
-                <input
-                  type="checkbox"
-                  id="ads-checkbox"
-                  defaultChecked={consentSettings.ads}
-                  onChange={(e) => {
-                    const updated = {
-                      ...consentSettings,
-                      ads: e.target.checked,
-                    }
-                    if (typeof document !== 'undefined') {
-                      localStorage.setItem(
-                        'cookie_consent',
-                        JSON.stringify(updated),
-                      )
-                    }
-                    updateGTMConsent(updated)
-                  }}
-                  className="mt-1"
-                />
-                <label htmlFor="ads-checkbox" className="cursor-pointer">
-                  <span className="font-medium">Advertising</span>
-                  <p className="text-sm text-gray-600 dark:text-gray-400">
-                    Show personalized ads
-                  </p>
-                </label>
-              </div>
-              <div className="mt-6">
-                <Button color="emerald" onClick={closeSettings}>
-                  Save
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
+    <div
+      className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 p-4 z-50
+      text-sm gap-2 flex flex-col lg:flex-row [box-shadow:0_0_10px_rgba(0,0,0,0.2)]
+      items-center justify-between
+      "
+    >
+      <span className="text-xs">
+        We use cookies for analytics to help improve TanStack. See our{' '}
+        <Link to="/privacy" className="underline">
+          Privacy Policy
+        </Link>{' '}
+        for details.
+      </span>
+      <div className="flex gap-2 flex-wrap items-center">
+        <Button color="red" onClick={rejectCookies}>
+          Reject
+        </Button>
+        <Button color="emerald" onClick={acceptCookies}>
+          Accept
+        </Button>
+      </div>
+    </div>
   )
 }

src/components/CookieConsent.tsx

@@ -2,8 +2,7 @@ import * as React from 'react'
 import { FoldHorizontal, UnfoldHorizontal } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { useWidthToggle, DocNavigation } from '~/components/DocsLayout'
-import { AdGate } from '~/contexts/AdsContext'
-import { GamHeader } from './Gam'
+
 import { Toc } from './Toc'
 import { renderMarkdown } from '~/utils/markdown'
 import { DocBreadcrumb } from './DocBreadcrumb'
@@ -129,16 +128,12 @@ export function Doc({
   }, [headings])
 
   return (
-    <div className="flex-1 min-h-0 flex flex-col">
+    <div className="flex-1 min-h-0 flex flex-col pt-4 lg:pt-6 xl:pt-8">
       <a href={`${pagePath}.md`} className="sr-only" aria-hidden="true">
         AI/LLM: This documentation page is available in plain markdown format at
         {pagePath}.md
       </a>
-      <AdGate>
-        <div className="py-2 pb-6 lg:py-4 lg:pb-8 xl:py-6 xl:pb-10 max-w-full">
-          <GamHeader />
-        </div>
-      </AdGate>
+
       <div
         className={twMerge(
           'w-full flex mx-auto max-w-[768px]',