From 3767d784f9ff964aa23f608963ffd4d384fb4b87 Mon Sep 17 00:00:00 2001 From: Ryan Amirthan Date: Thu, 3 Jul 2025 12:28:06 -0400 Subject: [PATCH 01/12] testing laptop screen --- custom-implementation/src/main.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/custom-implementation/src/main.css b/custom-implementation/src/main.css index be0fe879..2c056966 100644 --- a/custom-implementation/src/main.css +++ b/custom-implementation/src/main.css @@ -10,6 +10,11 @@ } } +/* Make sidenav components visible on all screen sizes */ +#sidenav-header-wrapper { + display: block !important; +} + #devrev-header-content-wrapper { display: none; /* Hide the wrapper by default */ From e357180e530363cf7002df6e8b198095a59316ff Mon Sep 17 00:00:00 2001 From: Ryan Amirthan Date: Thu, 3 Jul 2025 12:43:47 -0400 Subject: [PATCH 02/12] added debugging logging --- custom-implementation/src/main.css | 5 ----- custom-implementation/src/main.tsx | 14 ++++++++++++++ 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/custom-implementation/src/main.css b/custom-implementation/src/main.css index 2c056966..be0fe879 100644 --- a/custom-implementation/src/main.css +++ b/custom-implementation/src/main.css @@ -10,11 +10,6 @@ } } -/* Make sidenav components visible on all screen sizes */ -#sidenav-header-wrapper { - display: block !important; -} - #devrev-header-content-wrapper { display: none; /* Hide the wrapper by default */ diff --git a/custom-implementation/src/main.tsx b/custom-implementation/src/main.tsx index 148b86ca..57fcbd31 100644 --- a/custom-implementation/src/main.tsx +++ b/custom-implementation/src/main.tsx @@ -33,7 +33,16 @@ const render = async () => { const theme = document.getElementsByTagName('html')[0].getAttribute('class') + // DEBUG: Let's see what elements actually exist + console.log('DEBUG: Looking for sidebar elements...') + console.log('DEBUG: button.fern-search-bar found:', document.querySelector('button.fern-search-bar')) + console.log('DEBUG: sidenav parent found:', sidenav) + console.log('DEBUG: #fern-sidebar found:', document.getElementById('fern-sidebar')) + console.log('DEBUG: All elements with fern- classes:', document.querySelectorAll('[class*="fern-"]')) + console.log('DEBUG: All elements with fern- ids:', document.querySelectorAll('[id*="fern-"]')) + if (!sidenavRendered && !document.getElementById('sidenav-header-wrapper') && sidenav) { + console.log('DEBUG: Found sidenav element, rendering search and theme switch...') sidenavRendered = true const sidenavHeaderWrapper = document.createElement('div') @@ -53,6 +62,11 @@ const render = async () => { themeRoot.render(React.createElement(ThemeSwitch)) sidenav.replaceWith(sidenavHeaderWrapper) + } else { + console.log('DEBUG: ❌ NOT rendering sidenav components because:') + console.log(' - sidenavRendered:', sidenavRendered) + console.log(' - sidenav-header-wrapper exists:', !!document.getElementById('sidenav-header-wrapper')) + console.log(' - sidenav element found:', !!sidenav) } const fernHeaderId = document.getElementById(FERN_CONTENT_WRAPPER_ID) From d705b719392735356db960a353d98468c7f22a3d Mon Sep 17 00:00:00 2001 From: Ryan Amirthan Date: Thu, 3 Jul 2025 12:59:13 -0400 Subject: [PATCH 03/12] more logging --- custom-implementation/src/main.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/custom-implementation/src/main.tsx b/custom-implementation/src/main.tsx index 57fcbd31..fc2555f8 100644 --- a/custom-implementation/src/main.tsx +++ b/custom-implementation/src/main.tsx @@ -28,14 +28,14 @@ const render = async () => { const data = await getPageData() - const sidenav = document.querySelector('button.fern-search-bar') + const sidenav = document.querySelector('button#fern-search-button') ?.parentElement as HTMLElement const theme = document.getElementsByTagName('html')[0].getAttribute('class') // DEBUG: Let's see what elements actually exist console.log('DEBUG: Looking for sidebar elements...') - console.log('DEBUG: button.fern-search-bar found:', document.querySelector('button.fern-search-bar')) + console.log('DEBUG: button#fern-search-button found:', document.querySelector('button#fern-search-button')) console.log('DEBUG: sidenav parent found:', sidenav) console.log('DEBUG: #fern-sidebar found:', document.getElementById('fern-sidebar')) console.log('DEBUG: All elements with fern- classes:', document.querySelectorAll('[class*="fern-"]')) From d5bbeebaeac74fa9817a0609566f7f4fdc68767f Mon Sep 17 00:00:00 2001 From: Ryan Amirthan Date: Thu, 3 Jul 2025 13:13:44 -0400 Subject: [PATCH 04/12] logging to determine render or css issue --- custom-implementation/src/main.tsx | 49 ++++++++++++++++++------------ 1 file changed, 30 insertions(+), 19 deletions(-) diff --git a/custom-implementation/src/main.tsx b/custom-implementation/src/main.tsx index fc2555f8..ec1c864c 100644 --- a/custom-implementation/src/main.tsx +++ b/custom-implementation/src/main.tsx @@ -28,21 +28,12 @@ const render = async () => { const data = await getPageData() - const sidenav = document.querySelector('button#fern-search-button') + const sidenav = document.querySelector('button.fern-search-bar') ?.parentElement as HTMLElement const theme = document.getElementsByTagName('html')[0].getAttribute('class') - // DEBUG: Let's see what elements actually exist - console.log('DEBUG: Looking for sidebar elements...') - console.log('DEBUG: button#fern-search-button found:', document.querySelector('button#fern-search-button')) - console.log('DEBUG: sidenav parent found:', sidenav) - console.log('DEBUG: #fern-sidebar found:', document.getElementById('fern-sidebar')) - console.log('DEBUG: All elements with fern- classes:', document.querySelectorAll('[class*="fern-"]')) - console.log('DEBUG: All elements with fern- ids:', document.querySelectorAll('[id*="fern-"]')) - if (!sidenavRendered && !document.getElementById('sidenav-header-wrapper') && sidenav) { - console.log('DEBUG: Found sidenav element, rendering search and theme switch...') sidenavRendered = true const sidenavHeaderWrapper = document.createElement('div') @@ -62,19 +53,21 @@ const render = async () => { themeRoot.render(React.createElement(ThemeSwitch)) sidenav.replaceWith(sidenavHeaderWrapper) - } else { - console.log('DEBUG: ❌ NOT rendering sidenav components because:') - console.log(' - sidenavRendered:', sidenavRendered) - console.log(' - sidenav-header-wrapper exists:', !!document.getElementById('sidenav-header-wrapper')) - console.log(' - sidenav element found:', !!sidenav) } const fernHeaderId = document.getElementById(FERN_CONTENT_WRAPPER_ID) const devrevHeaderId = document.getElementById(DEVREV_CONTENT_WRAPPER_ID) + // DEBUG: Check header state + console.log('DEBUG: Header check:') + console.log(' - headerRendered:', headerRendered) + console.log(' - fernHeaderId exists:', !!fernHeaderId) + console.log(' - devrevHeaderId exists:', !!devrevHeaderId) + console.log(' - Will render header:', !headerRendered && !fernHeaderId && !devrevHeaderId) + // GUARD: Only render header once if (!headerRendered && !fernHeaderId && !devrevHeaderId) { - console.log('DEBUG: Rendering header...') + console.log('DEBUG: Starting header render...') headerRendered = true // Main Container @@ -109,6 +102,10 @@ const render = async () => { } // Render header component + console.log('DEBUG: Rendering DevRev header component...') + console.log('DEBUG: devrevContentWrapper:', devrevContentWrapper) + console.log('DEBUG: header data:', data.header) + const headerRoot = ReactDOM.createRoot(devrevContentWrapper) headerRoot.render( React.createElement(Header, { @@ -117,12 +114,26 @@ const render = async () => { }) ) + console.log('DEBUG: DevRev header rendered, making visible...') + // Make header visible immediately setTimeout(() => { const header = document.getElementById(FERN_HEADER_CONTAINER_ID) - if (header) { - header.style.display = 'block' - } + console.log('DEBUG: Final header element:', header) + if (header) { + header.style.display = 'block' + console.log('DEBUG: Header display set to block') + + // Check if DevRev wrapper is visible + const devrevWrapper = document.getElementById(DEVREV_CONTENT_WRAPPER_ID) + if (devrevWrapper) { + const styles = window.getComputedStyle(devrevWrapper) + console.log('DEBUG: DevRev wrapper styles:') + console.log(' - display:', styles.display) + console.log(' - visibility:', styles.visibility) + console.log(' - opacity:', styles.opacity) + } + } }, 0) } From c799ac952973d5f74bf55e5d42c1cfa5e302e05f Mon Sep 17 00:00:00 2001 From: Ryan Amirthan Date: Thu, 3 Jul 2025 13:33:46 -0400 Subject: [PATCH 05/12] remove logging and add docs.yml --- custom-implementation/src/main.tsx | 33 ++++-------------------------- fern/docs.yml | 8 ++++---- 2 files changed, 8 insertions(+), 33 deletions(-) diff --git a/custom-implementation/src/main.tsx b/custom-implementation/src/main.tsx index ec1c864c..148b86ca 100644 --- a/custom-implementation/src/main.tsx +++ b/custom-implementation/src/main.tsx @@ -58,16 +58,9 @@ const render = async () => { const fernHeaderId = document.getElementById(FERN_CONTENT_WRAPPER_ID) const devrevHeaderId = document.getElementById(DEVREV_CONTENT_WRAPPER_ID) - // DEBUG: Check header state - console.log('DEBUG: Header check:') - console.log(' - headerRendered:', headerRendered) - console.log(' - fernHeaderId exists:', !!fernHeaderId) - console.log(' - devrevHeaderId exists:', !!devrevHeaderId) - console.log(' - Will render header:', !headerRendered && !fernHeaderId && !devrevHeaderId) - // GUARD: Only render header once if (!headerRendered && !fernHeaderId && !devrevHeaderId) { - console.log('DEBUG: Starting header render...') + console.log('DEBUG: Rendering header...') headerRendered = true // Main Container @@ -102,10 +95,6 @@ const render = async () => { } // Render header component - console.log('DEBUG: Rendering DevRev header component...') - console.log('DEBUG: devrevContentWrapper:', devrevContentWrapper) - console.log('DEBUG: header data:', data.header) - const headerRoot = ReactDOM.createRoot(devrevContentWrapper) headerRoot.render( React.createElement(Header, { @@ -114,26 +103,12 @@ const render = async () => { }) ) - console.log('DEBUG: DevRev header rendered, making visible...') - // Make header visible immediately setTimeout(() => { const header = document.getElementById(FERN_HEADER_CONTAINER_ID) - console.log('DEBUG: Final header element:', header) - if (header) { - header.style.display = 'block' - console.log('DEBUG: Header display set to block') - - // Check if DevRev wrapper is visible - const devrevWrapper = document.getElementById(DEVREV_CONTENT_WRAPPER_ID) - if (devrevWrapper) { - const styles = window.getComputedStyle(devrevWrapper) - console.log('DEBUG: DevRev wrapper styles:') - console.log(' - display:', styles.display) - console.log(' - visibility:', styles.visibility) - console.log(' - opacity:', styles.opacity) - } - } + if (header) { + header.style.display = 'block' + } }, 0) } diff --git a/fern/docs.yml b/fern/docs.yml index 9b52942a..ece16d81 100644 --- a/fern/docs.yml +++ b/fern/docs.yml @@ -26,10 +26,10 @@ js: - path: ./dist/output.js strategy: beforeInteractive -# layout: -# searchbar-placement: sidebar -# tabs-placement: sidebar -# disable-header: true +layout: + searchbar-placement: sidebar + tabs-placement: sidebar + disable-header: true typography: bodyFont: From 64f550761b9d14313d9f4075e4cec5b2a37feefa Mon Sep 17 00:00:00 2001 From: Ryan Amirthan Date: Thu, 3 Jul 2025 13:43:57 -0400 Subject: [PATCH 06/12] added styling for toc and sidebar --- custom-implementation/src/main.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/custom-implementation/src/main.css b/custom-implementation/src/main.css index be0fe879..a56b878f 100644 --- a/custom-implementation/src/main.css +++ b/custom-implementation/src/main.css @@ -28,10 +28,11 @@ } #fern-toc { - margin: 64px 0px!important; /* Push TOC below header */ + padding: 42px 0px !important; } #fern-sidebar { - margin: 32px 0px !important; /* Push TOC and sidebar below header */ + padding: 42px 0px !important; } + From e27285ec848a461477d7fc25da4d47bec85ca508 Mon Sep 17 00:00:00 2001 From: Ryan Amirthan Date: Thu, 3 Jul 2025 13:53:14 -0400 Subject: [PATCH 07/12] added margin bottom for sidebar to stop overlap with footer --- custom-implementation/src/main.css | 1 + 1 file changed, 1 insertion(+) diff --git a/custom-implementation/src/main.css b/custom-implementation/src/main.css index a56b878f..87277595 100644 --- a/custom-implementation/src/main.css +++ b/custom-implementation/src/main.css @@ -33,6 +33,7 @@ #fern-sidebar { padding: 42px 0px !important; + margin-bottom: 100px !important; /* Prevent overlap with footer */ } From 5db480656feeab15d7e4f5801fa6453b07f6e0cc Mon Sep 17 00:00:00 2001 From: Ryan Amirthan Date: Thu, 3 Jul 2025 14:06:44 -0400 Subject: [PATCH 08/12] fixed sidebar? --- custom-implementation/src/main.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/custom-implementation/src/main.css b/custom-implementation/src/main.css index 87277595..2b83ff16 100644 --- a/custom-implementation/src/main.css +++ b/custom-implementation/src/main.css @@ -18,10 +18,9 @@ } } -/* Constrain sidebar within fern-body but account for header .fern-sidebar-fixed { position: absolute !important; -} */ +} #fern-docs { margin: 64px 0px !important; /* Push content below header */ @@ -33,7 +32,6 @@ #fern-sidebar { padding: 42px 0px !important; - margin-bottom: 100px !important; /* Prevent overlap with footer */ } From 17c5b8351cceb3a88b4228f54bdbb06b638136be Mon Sep 17 00:00:00 2001 From: Ryan Amirthan Date: Thu, 3 Jul 2025 14:18:14 -0400 Subject: [PATCH 09/12] trying sidebar contraints --- custom-implementation/src/main.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/custom-implementation/src/main.css b/custom-implementation/src/main.css index 2b83ff16..8d145cde 100644 --- a/custom-implementation/src/main.css +++ b/custom-implementation/src/main.css @@ -18,10 +18,6 @@ } } -.fern-sidebar-fixed { - position: absolute !important; -} - #fern-docs { margin: 64px 0px !important; /* Push content below header */ } @@ -32,6 +28,9 @@ #fern-sidebar { padding: 42px 0px !important; + max-height: calc(100vh - 64px); + overflow-y: auto; + box-sizing: border-box; } From 42226ca8884a149f8b9a1c252f5114a20333738d Mon Sep 17 00:00:00 2001 From: Ryan Amirthan Date: Thu, 3 Jul 2025 14:42:36 -0400 Subject: [PATCH 10/12] added contraints for sidebar --- custom-implementation/src/main.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/custom-implementation/src/main.css b/custom-implementation/src/main.css index 8d145cde..53278301 100644 --- a/custom-implementation/src/main.css +++ b/custom-implementation/src/main.css @@ -28,9 +28,8 @@ #fern-sidebar { padding: 42px 0px !important; - max-height: calc(100vh - 64px); - overflow-y: auto; - box-sizing: border-box; + max-height: 900px !important; + position: sticky !important; } From a9e5234c4a0d4dae4e66ddb51f65533af40dbbdb Mon Sep 17 00:00:00 2001 From: Ryan Amirthan Date: Thu, 3 Jul 2025 14:46:51 -0400 Subject: [PATCH 11/12] trying pos absolute --- custom-implementation/src/main.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/custom-implementation/src/main.css b/custom-implementation/src/main.css index 53278301..466e70cd 100644 --- a/custom-implementation/src/main.css +++ b/custom-implementation/src/main.css @@ -28,8 +28,7 @@ #fern-sidebar { padding: 42px 0px !important; - max-height: 900px !important; - position: sticky !important; + position: absolute !important; } From b87248f10a0dd84bb1300605452ee4e6aa39e238 Mon Sep 17 00:00:00 2001 From: Ryan Amirthan Date: Thu, 3 Jul 2025 14:49:19 -0400 Subject: [PATCH 12/12] padding not needed --- custom-implementation/src/main.css | 1 - 1 file changed, 1 deletion(-) diff --git a/custom-implementation/src/main.css b/custom-implementation/src/main.css index 466e70cd..265688e3 100644 --- a/custom-implementation/src/main.css +++ b/custom-implementation/src/main.css @@ -27,7 +27,6 @@ } #fern-sidebar { - padding: 42px 0px !important; position: absolute !important; }