Fix anchor ID collisions by removing non-content UX IDs (#4035)

packages/gitbook/src/components/AIChat/AIChatButton.tsx

@@ -18,7 +18,7 @@ export function AIChatButton(props: {
 }) {
     const { assistant, showLabel = true, withShortcut = true } = props;
     const language = useLanguage();
-    const isMobile = useIsMobile(MOBILE_BREAKPOINT, '#header-content');
+    const isMobile = useIsMobile(MOBILE_BREAKPOINT, '[data-gb-header-content]');
 
     return (
         <Button

packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx

@@ -30,7 +30,7 @@ export function AnnouncementBanner(props: {
 
     return (
         <div
-            id="announcement-banner"
+            data-gb-announcement-banner
             className="theme-bold:bg-header-background pt-4 pb-2"
             data-nosnippet=""
         >

packages/gitbook/src/components/Footer/Footer.tsx

@@ -28,7 +28,7 @@ export function Footer(props: { context: GitBookSiteContext }) {
 
     return (
         <footer
-            id="site-footer"
+            data-gb-site-footer
             className={tcls(
                 'border-tint-subtle border-t',
                 // If the footer only contains a mode toggle, we only show it on smaller screens

packages/gitbook/src/components/Header/Header.tsx

@@ -35,7 +35,7 @@ export function Header(props: {
 
     return (
         <header
-            id="site-header"
+            data-gb-site-header
             className={tcls(
                 'flex',
                 'flex-col',
@@ -70,7 +70,7 @@ export function Header(props: {
             >
                 <div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
                     <div
-                        id="header-content"
+                        data-gb-header-content
                         className={tcls(
                             'gap-4',
                             'lg:gap-6',

packages/gitbook/src/components/PageBody/PageCover.tsx

@@ -79,7 +79,7 @@ export async function PageCover(props: {
 
     return (
         <div
-            id="page-cover"
+            data-gb-page-cover
             data-full={String(as === 'full')}
             className={tcls(
                 'overflow-hidden',

packages/gitbook/src/components/RootLayout/globals.css

@@ -292,7 +292,7 @@ html.dark {
     color-scheme: dark light;
 }
 
-html.announcement-hidden #announcement-banner {
+html.announcement-hidden [data-gb-announcement-banner] {
     @apply hidden;
 }
 

packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx

@@ -92,7 +92,7 @@ export function SiteSectionTabs(props: {
                         !children ? 'pr-4 sm:pr-6 md:pr-8' : 'pr-4'
                     )}
                     aria-label="Sections"
-                    id="sections"
+                    data-gb-sections
                 >
                     {structure.map((structureItem) => {
                         const { id, title, icon } = structureItem;

packages/gitbook/src/components/TableOfContents/TableOfContents.tsx

@@ -30,7 +30,7 @@ export async function TableOfContents(props: {
             <SideSheet
                 side="left"
                 data-testid="table-of-contents"
-                id="table-of-contents"
+                data-gb-table-of-contents
                 toggleClass="navigation-open"
                 withOverlay={true}
                 withCloseButton={true}

packages/gitbook/src/components/TableOfContents/TableOfContentsScript.tsx

@@ -12,10 +12,10 @@ export function TableOfContentsScript() {
         // Calculate and set TOC dimensions
         const updateTocLayout = () => {
             // Get key elements
-            const header = document.getElementById('site-header');
-            const banner = document.getElementById('announcement-banner');
-            const footer = document.getElementById('site-footer');
-            const pageCover = document.getElementById('page-cover');
+            const header = document.querySelector<HTMLElement>('[data-gb-site-header]');
+            const banner = document.querySelector<HTMLElement>('[data-gb-announcement-banner]');
+            const footer = document.querySelector<HTMLElement>('[data-gb-site-footer]');
+            const pageCover = document.querySelector<HTMLElement>('[data-gb-page-cover]');
 
             // Set sticky top position based on header
             const headerHeight = header?.offsetHeight ?? 0;

packages/gitbook/src/components/primitives/SideSheet.tsx

@@ -245,7 +245,7 @@ export function SideSheetOverlay(props: { className?: ClassValue; onClick?: () =
     return (
         // biome-ignore lint/a11y/useKeyWithClickEvents: global escape key handler is used to close the modal sheet
         <div
-            id="side-sheet-overlay"
+            data-gb-side-sheet-overlay
             onClick={() => {
                 onClick?.();
             }}

packages/gitbook/tailwind.config.ts

@@ -600,14 +600,17 @@ const config: Config = {
             /**
              * Variant when a header is displayed.
              */
-            addVariant('site-header-none', 'body:not(:has(#site-header:not(.mobile-only))) &');
-            addVariant('site-header', 'body:has(#site-header:not(.mobile-only)) &');
+            addVariant(
+                'site-header-none',
+                'body:not(:has([data-gb-site-header]:not(.mobile-only))) &'
+            );
+            addVariant('site-header', 'body:has([data-gb-site-header]:not(.mobile-only)) &');
             addVariant('site-header-sections', [
-                'body:has(#site-header:not(.mobile-only) #sections) &',
+                'body:has([data-gb-site-header]:not(.mobile-only) [data-gb-sections]) &',
             ]);
             addVariant(
                 'announcement',
-                'html:not(.announcement-hidden):has(#announcement-banner) &'
+                'html:not(.announcement-hidden):has([data-gb-announcement-banner]) &'
             );
             addVariant('embed', 'html.embed &');