From 2b74568fdbf0f25ed97bcb5a2901bc90d0c7952d Mon Sep 17 00:00:00 2001 From: Kapil Gowru Date: Tue, 11 Mar 2025 18:06:47 -0400 Subject: [PATCH 01/11] feat: upgrading to nextjs app router --- custom-implementation/src/main.tsx | 39 +++++++++++++++--------------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/custom-implementation/src/main.tsx b/custom-implementation/src/main.tsx index 873fde59..d7de185a 100644 --- a/custom-implementation/src/main.tsx +++ b/custom-implementation/src/main.tsx @@ -1,7 +1,7 @@ import './main.css' import '@devrev/marketing-shared-components/dist/cjs/index.css' -import ReactDOM from 'react-dom' +import ReactDOM from 'react-dom/client' import React from 'react' @@ -27,11 +27,12 @@ const render = async () => { const theme = document.getElementsByTagName('html')[0].getAttribute('class') - if (!document.getElementById('theme-switch')) { + if (!document.getElementById('theme-switch') && sidenav) { const wrapper = document.createElement('div') wrapper.setAttribute('id', 'theme-switch') sidenav.appendChild(wrapper) - ReactDOM.render(React.createElement(ThemeSwitch), wrapper) + const root = ReactDOM.createRoot(wrapper) + root.render(React.createElement(ThemeSwitch)) } const fernHeaderId = document.getElementById(FERN_CONTENT_WRAPPER_ID) @@ -69,29 +70,27 @@ const render = async () => { document.body.appendChild(fernHeaderContainer) } - ReactDOM.render( + const headerRoot = ReactDOM.createRoot(devrevContentWrapper) + headerRoot.render( React.createElement(Header, { ...data.header, version: theme == 'dark' ? 'light' : 'dark', - }), - devrevContentWrapper, - () => { - // Once the header component is loaded, make it visible - const header = document.getElementById(FERN_HEADER_CONTAINER_ID) - if (header) header.style.display = 'block' - } + }) ) + + // Once the header component is loaded, make it visible + const header = document.getElementById(FERN_HEADER_CONTAINER_ID) + if (header) header.style.display = 'block' } - ReactDOM.render( - React.createElement(Footer, { ...data.footer }), - document.getElementById('fern-footer'), - () => { - // Once the footer component is loaded, make it visible - const footer = document.getElementById('fern-footer') - if (footer) footer.style.display = 'block' - }, - ) + const footerElement = document.getElementById('fern-footer') + if (footerElement) { + const footerRoot = ReactDOM.createRoot(footerElement) + footerRoot.render(React.createElement(Footer, { ...data.footer })) + + // Once the footer component is loaded, make it visible + footerElement.style.display = 'block' + } } let observations = 0 From a4e7b1b5c9829cc142ef17f5e94ecc0178d736c6 Mon Sep 17 00:00:00 2001 From: Kapil Gowru Date: Tue, 11 Mar 2025 18:26:12 -0400 Subject: [PATCH 02/11] feat: trying again --- custom-implementation/src/main.tsx | 79 +++++++++++++++++++++--------- 1 file changed, 57 insertions(+), 22 deletions(-) diff --git a/custom-implementation/src/main.tsx b/custom-implementation/src/main.tsx index d7de185a..507135fe 100644 --- a/custom-implementation/src/main.tsx +++ b/custom-implementation/src/main.tsx @@ -2,7 +2,6 @@ import './main.css' import '@devrev/marketing-shared-components/dist/cjs/index.css' import ReactDOM from 'react-dom/client' - import React from 'react' import Header from './components/header' @@ -13,20 +12,23 @@ import { getPageData } from './modules/sanity/utils' const FERN_CONTENT_WRAPPER_ID = 'fern-header-content-wrapper' const DEVREV_CONTENT_WRAPPER_ID = 'devrev-header-content-wrapper' - const FERN_HEADER_CONTAINER_ID = 'fern-header' const render = async () => { /* * This is a where we try to make async data call. */ - const data = await getPageData() + + // Check if we're in a browser environment + if (typeof window === 'undefined') return + const sidenav = document.querySelector('button.fern-search-bar') ?.parentElement as HTMLElement - const theme = document.getElementsByTagName('html')[0].getAttribute('class') + const theme = document.documentElement.getAttribute('class') + // Add theme switch to sidenav if (!document.getElementById('theme-switch') && sidenav) { const wrapper = document.createElement('div') wrapper.setAttribute('id', 'theme-switch') @@ -35,6 +37,7 @@ const render = async () => { root.render(React.createElement(ThemeSwitch)) } + // Handle header rendering const fernHeaderId = document.getElementById(FERN_CONTENT_WRAPPER_ID) const devrevHeaderId = document.getElementById(DEVREV_CONTENT_WRAPPER_ID) @@ -67,51 +70,83 @@ const render = async () => { if (mainHeaderWrapper) { mainHeaderWrapper.replaceWith(fernHeaderContainer) } else { - document.body.appendChild(fernHeaderContainer) + document.body.insertAdjacentElement('afterbegin', fernHeaderContainer) } + // Use createRoot for React 18 concurrent mode const headerRoot = ReactDOM.createRoot(devrevContentWrapper) headerRoot.render( React.createElement(Header, { ...data.header, - version: theme == 'dark' ? 'light' : 'dark', + version: theme === 'dark' ? 'light' : 'dark', }) ) // Once the header component is loaded, make it visible - const header = document.getElementById(FERN_HEADER_CONTAINER_ID) - if (header) header.style.display = 'block' + fernHeaderContainer.style.display = 'block' } + // Handle footer rendering const footerElement = document.getElementById('fern-footer') if (footerElement) { - const footerRoot = ReactDOM.createRoot(footerElement) - footerRoot.render(React.createElement(Footer, { ...data.footer })) + // Check if footer is already rendered + if (!footerElement.hasChildNodes()) { + const footerRoot = ReactDOM.createRoot(footerElement) + footerRoot.render(React.createElement(Footer, { ...data.footer })) + + // Once the footer component is loaded, make it visible + footerElement.style.display = 'block' + } + } else { + // Create footer if it doesn't exist + const newFooter = document.createElement('div') + newFooter.setAttribute('id', 'fern-footer') + document.body.appendChild(newFooter) - // Once the footer component is loaded, make it visible - footerElement.style.display = 'block' + const footerRoot = ReactDOM.createRoot(newFooter) + footerRoot.render(React.createElement(Footer, { ...data.footer })) + newFooter.style.display = 'block' + } +} + +// For Next.js App Router compatibility +const initApp = () => { + if (typeof window !== 'undefined') { + // Check if the DOM is already loaded + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', async () => { + console.log('DOMContentLoaded') + await render() + setupMutationObserver() + }) + } else { + // DOM already loaded, render immediately + console.log('DOM already loaded') + render().then(() => setupMutationObserver()) + } } } -let observations = 0 -document.addEventListener('DOMContentLoaded', async () => { - console.log('DOMContentLoaded') - await render() - new MutationObserver(async (e, o) => { +const setupMutationObserver = () => { + let observations = 0 + new MutationObserver(async (mutations, observer) => { await render() - for (const item of e) { - if (item.target instanceof HTMLElement) { - const target = item.target + for (const mutation of mutations) { + if (mutation.target instanceof HTMLElement) { + const target = mutation.target if (target.id === 'fern-header' || target.id === 'fern-footer') { if (observations < 3) { // react hydration will trigger a mutation event observations++ } else { - o.disconnect() + observer.disconnect() } break } } } }).observe(document.body, { childList: true, subtree: true }) -}) +} + +// Initialize the app +initApp() From c60550e32939b31e98506ee1116d31d5dfb3ccd5 Mon Sep 17 00:00:00 2001 From: Kapil Gowru Date: Tue, 11 Mar 2025 18:35:21 -0400 Subject: [PATCH 03/11] fix: updated layout and code --- custom-implementation/src/main.tsx | 172 ++++++++++++++++++----------- fern/docs.yml | 4 + 2 files changed, 114 insertions(+), 62 deletions(-) diff --git a/custom-implementation/src/main.tsx b/custom-implementation/src/main.tsx index 507135fe..1e57ede1 100644 --- a/custom-implementation/src/main.tsx +++ b/custom-implementation/src/main.tsx @@ -15,138 +15,186 @@ const DEVREV_CONTENT_WRAPPER_ID = 'devrev-header-content-wrapper' const FERN_HEADER_CONTAINER_ID = 'fern-header' const render = async () => { + console.log('Starting render function') /* * This is a where we try to make async data call. */ + console.log('Fetching page data from Sanity') const data = await getPageData() + console.log('Page data fetched:', data ? 'success' : 'failed') // Check if we're in a browser environment - if (typeof window === 'undefined') return + if (typeof window === 'undefined') { + console.log('Not in browser environment, exiting render') + return + } + console.log('Looking for sidenav element') const sidenav = document.querySelector('button.fern-search-bar') ?.parentElement as HTMLElement + console.log('Sidenav found:', sidenav ? 'yes' : 'no') const theme = document.documentElement.getAttribute('class') + console.log('Current theme:', theme) // Add theme switch to sidenav if (!document.getElementById('theme-switch') && sidenav) { + console.log('Adding theme switch to sidenav') const wrapper = document.createElement('div') wrapper.setAttribute('id', 'theme-switch') sidenav.appendChild(wrapper) const root = ReactDOM.createRoot(wrapper) root.render(React.createElement(ThemeSwitch)) + console.log('Theme switch added') + } else { + console.log('Theme switch already exists or sidenav not found') } - // Handle header rendering - const fernHeaderId = document.getElementById(FERN_CONTENT_WRAPPER_ID) - const devrevHeaderId = document.getElementById(DEVREV_CONTENT_WRAPPER_ID) - - if (!fernHeaderId && !devrevHeaderId) { - // Main Container - const fernHeaderContainer = document.createElement('div') - fernHeaderContainer.setAttribute('id', FERN_HEADER_CONTAINER_ID) - - // Fern Header - const fernContentWrapper = document.createElement('div') - fernContentWrapper.setAttribute('id', FERN_CONTENT_WRAPPER_ID) - - const devrevContentWrapper = document.createElement('div') - devrevContentWrapper.setAttribute('id', DEVREV_CONTENT_WRAPPER_ID) - - // Get existing fern-header element and its children - const mainHeaderWrapper = document.getElementById(FERN_HEADER_CONTAINER_ID) - - if (mainHeaderWrapper) { - // Move all children to the wrapper - while (mainHeaderWrapper.firstChild) { - fernContentWrapper.appendChild(mainHeaderWrapper.firstChild) + // Find the existing Fern header + console.log('Looking for Fern header') + const existingFernHeader = document.getElementById(FERN_HEADER_CONTAINER_ID) + console.log('Fern header found:', existingFernHeader ? 'yes' : 'no') + + if (existingFernHeader) { + // Check if our custom wrappers already exist + let fernContentWrapper = document.getElementById(FERN_CONTENT_WRAPPER_ID) + let devrevContentWrapper = document.getElementById(DEVREV_CONTENT_WRAPPER_ID) + console.log('Existing wrappers found:', { + fernWrapper: fernContentWrapper ? 'yes' : 'no', + devrevWrapper: devrevContentWrapper ? 'yes' : 'no' + }) + + // If wrappers don't exist, create them + if (!fernContentWrapper) { + console.log('Creating Fern content wrapper') + fernContentWrapper = document.createElement('div') + fernContentWrapper.setAttribute('id', FERN_CONTENT_WRAPPER_ID) + + // Move all existing children to the Fern wrapper + console.log('Moving existing children to Fern wrapper') + while (existingFernHeader.firstChild) { + fernContentWrapper.appendChild(existingFernHeader.firstChild) } + + existingFernHeader.appendChild(fernContentWrapper) + console.log('Fern content wrapper created and populated') } - - fernHeaderContainer.appendChild(fernContentWrapper) - fernHeaderContainer.appendChild(devrevContentWrapper) - - // Insert the new container where the original fern-header was - if (mainHeaderWrapper) { - mainHeaderWrapper.replaceWith(fernHeaderContainer) - } else { - document.body.insertAdjacentElement('afterbegin', fernHeaderContainer) + + if (!devrevContentWrapper) { + console.log('Creating DevRev content wrapper') + devrevContentWrapper = document.createElement('div') + devrevContentWrapper.setAttribute('id', DEVREV_CONTENT_WRAPPER_ID) + existingFernHeader.appendChild(devrevContentWrapper) + + // Render our custom header in the DevRev wrapper + console.log('Rendering custom header in DevRev wrapper') + const headerRoot = ReactDOM.createRoot(devrevContentWrapper) + headerRoot.render( + React.createElement(Header, { + ...data.header, + version: theme === 'dark' ? 'light' : 'dark', + }) + ) + console.log('Custom header rendered') } - - // Use createRoot for React 18 concurrent mode - const headerRoot = ReactDOM.createRoot(devrevContentWrapper) - headerRoot.render( - React.createElement(Header, { - ...data.header, - version: theme === 'dark' ? 'light' : 'dark', - }) - ) - // Once the header component is loaded, make it visible - fernHeaderContainer.style.display = 'block' + // Make sure the header is visible + console.log('Making header visible') + existingFernHeader.style.display = 'block' + } else { + // If Fern header doesn't exist yet, we'll wait for it to be created + console.log('Fern header not found, waiting for it to be created') } // Handle footer rendering + console.log('Looking for footer element') const footerElement = document.getElementById('fern-footer') + console.log('Footer element found:', footerElement ? 'yes' : 'no') + if (footerElement) { // Check if footer is already rendered - if (!footerElement.hasChildNodes()) { + const hasChildren = footerElement.hasChildNodes() + console.log('Footer already has children:', hasChildren ? 'yes' : 'no') + + if (!hasChildren) { + console.log('Rendering footer component') const footerRoot = ReactDOM.createRoot(footerElement) footerRoot.render(React.createElement(Footer, { ...data.footer })) // Once the footer component is loaded, make it visible + console.log('Making footer visible') footerElement.style.display = 'block' } } else { // Create footer if it doesn't exist + console.log('Creating new footer element') const newFooter = document.createElement('div') newFooter.setAttribute('id', 'fern-footer') document.body.appendChild(newFooter) + console.log('Rendering footer in new element') const footerRoot = ReactDOM.createRoot(newFooter) footerRoot.render(React.createElement(Footer, { ...data.footer })) newFooter.style.display = 'block' + console.log('Footer created and rendered') } + + console.log('Render function completed') } // For Next.js App Router compatibility const initApp = () => { + console.log('Initializing app') if (typeof window !== 'undefined') { + console.log('Browser environment detected') // Check if the DOM is already loaded if (document.readyState === 'loading') { + console.log('DOM still loading, adding DOMContentLoaded listener') document.addEventListener('DOMContentLoaded', async () => { - console.log('DOMContentLoaded') + console.log('DOMContentLoaded event fired') await render() setupMutationObserver() }) } else { // DOM already loaded, render immediately - console.log('DOM already loaded') - render().then(() => setupMutationObserver()) + console.log('DOM already loaded, rendering immediately') + render().then(() => { + console.log('Initial render complete, setting up mutation observer') + setupMutationObserver() + }) } + } else { + console.log('Not in browser environment, skipping initialization') } } const setupMutationObserver = () => { - let observations = 0 - new MutationObserver(async (mutations, observer) => { - await render() + console.log('Setting up mutation observer') + // Create a mutation observer to watch for the Fern header being added to the DOM + const observer = new MutationObserver(async (mutations) => { + console.log('Mutation detected, mutations count:', mutations.length) for (const mutation of mutations) { - if (mutation.target instanceof HTMLElement) { - const target = mutation.target - if (target.id === 'fern-header' || target.id === 'fern-footer') { - if (observations < 3) { - // react hydration will trigger a mutation event - observations++ - } else { - observer.disconnect() - } - break + if (mutation.type === 'childList') { + console.log('childList mutation detected') + // Check if the Fern header was added + const fernHeader = document.getElementById(FERN_HEADER_CONTAINER_ID) + if (fernHeader) { + console.log('Fern header found in mutation, rendering custom header') + await render() } } } - }).observe(document.body, { childList: true, subtree: true }) + }) + + // Start observing the document body for changes + console.log('Starting to observe document body') + observer.observe(document.body, { childList: true, subtree: true }) + + // Also try to render immediately in case the header already exists + console.log('Attempting immediate render from mutation observer setup') + render() } // Initialize the app +console.log('Starting application initialization') initApp() diff --git a/fern/docs.yml b/fern/docs.yml index 753d0f46..3a41ffe7 100644 --- a/fern/docs.yml +++ b/fern/docs.yml @@ -27,6 +27,10 @@ js: strategy: beforeInteractive +layout: + searchbar-placement: sidebar + tabs-placement: sidebar + typography: bodyFont: name: SF Pro From 71b8e62a39bcfe450710a6b2148a82aa75893472 Mon Sep 17 00:00:00 2001 From: Kapil Gowru Date: Tue, 11 Mar 2025 18:40:05 -0400 Subject: [PATCH 04/11] fix: updated --- custom-implementation/src/main.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/custom-implementation/src/main.tsx b/custom-implementation/src/main.tsx index 1e57ede1..55591bfe 100644 --- a/custom-implementation/src/main.tsx +++ b/custom-implementation/src/main.tsx @@ -8,8 +8,6 @@ import Header from './components/header' import Footer from './components/footer' import { ThemeSwitch } from './components/theme-switch' -import { getPageData } from './modules/sanity/utils' - const FERN_CONTENT_WRAPPER_ID = 'fern-header-content-wrapper' const DEVREV_CONTENT_WRAPPER_ID = 'devrev-header-content-wrapper' const FERN_HEADER_CONTAINER_ID = 'fern-header' @@ -19,8 +17,7 @@ const render = async () => { /* * This is a where we try to make async data call. */ - console.log('Fetching page data from Sanity') - const data = await getPageData() + const data = { header: {}, footer: {} } // Default empty data object console.log('Page data fetched:', data ? 'success' : 'failed') // Check if we're in a browser environment From 748aab54305a69544d4285c2ac7c6aeee86cc963 Mon Sep 17 00:00:00 2001 From: Kapil Gowru Date: Tue, 11 Mar 2025 23:34:28 -0400 Subject: [PATCH 05/11] fix: styling for header --- custom-implementation/src/main.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/custom-implementation/src/main.tsx b/custom-implementation/src/main.tsx index 55591bfe..7a4356bb 100644 --- a/custom-implementation/src/main.tsx +++ b/custom-implementation/src/main.tsx @@ -86,13 +86,21 @@ const render = async () => { // Render our custom header in the DevRev wrapper console.log('Rendering custom header in DevRev wrapper') const headerRoot = ReactDOM.createRoot(devrevContentWrapper) + + // Force both wrappers to be visible for debugging + fernContentWrapper.style.display = 'block' + devrevContentWrapper.style.display = 'block' + + // Pass empty props to ensure rendering headerRoot.render( React.createElement(Header, { - ...data.header, version: theme === 'dark' ? 'light' : 'dark', }) ) console.log('Custom header rendered') + } else { + // Ensure the wrapper is visible even if it already exists + devrevContentWrapper.style.display = 'block' } // Make sure the header is visible From 9bc23d8d8b89b5c7878e7c07a6c78659b59a4296 Mon Sep 17 00:00:00 2001 From: Kapil Gowru Date: Wed, 12 Mar 2025 00:15:50 -0400 Subject: [PATCH 06/11] fix: remove header --- fern/docs.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/fern/docs.yml b/fern/docs.yml index 3a41ffe7..bfa52709 100644 --- a/fern/docs.yml +++ b/fern/docs.yml @@ -30,6 +30,7 @@ js: layout: searchbar-placement: sidebar tabs-placement: sidebar + disable-header: true typography: bodyFont: From 09922d4d0803588122ad1fcc3c4d5d4382541878 Mon Sep 17 00:00:00 2001 From: Kapil Gowru Date: Wed, 12 Mar 2025 00:22:38 -0400 Subject: [PATCH 07/11] fix: remove header --- custom-implementation/src/main.tsx | 109 ++++++++++++++++++----------- 1 file changed, 68 insertions(+), 41 deletions(-) diff --git a/custom-implementation/src/main.tsx b/custom-implementation/src/main.tsx index 7a4356bb..ceaf5c65 100644 --- a/custom-implementation/src/main.tsx +++ b/custom-implementation/src/main.tsx @@ -87,9 +87,9 @@ const render = async () => { console.log('Rendering custom header in DevRev wrapper') const headerRoot = ReactDOM.createRoot(devrevContentWrapper) - // Force both wrappers to be visible for debugging - fernContentWrapper.style.display = 'block' - devrevContentWrapper.style.display = 'block' + // Remove display style forcing for production + // fernContentWrapper.style.display = 'block' + // devrevContentWrapper.style.display = 'block' // Pass empty props to ensure rendering headerRoot.render( @@ -99,16 +99,40 @@ const render = async () => { ) console.log('Custom header rendered') } else { - // Ensure the wrapper is visible even if it already exists - devrevContentWrapper.style.display = 'block' + // Update the header with current theme if it already exists + console.log('Updating existing header with current theme') + const headerRoot = ReactDOM.createRoot(devrevContentWrapper) + headerRoot.render( + React.createElement(Header, { + version: theme === 'dark' ? 'light' : 'dark', + }) + ) } // Make sure the header is visible console.log('Making header visible') existingFernHeader.style.display = 'block' } else { - // If Fern header doesn't exist yet, we'll wait for it to be created - console.log('Fern header not found, waiting for it to be created') + // If Fern header doesn't exist yet, create it + console.log('Fern header not found, creating it') + const newHeader = document.createElement('div') + newHeader.setAttribute('id', FERN_HEADER_CONTAINER_ID) + document.body.insertBefore(newHeader, document.body.firstChild) + + // Create DevRev content wrapper + const devrevContentWrapper = document.createElement('div') + devrevContentWrapper.setAttribute('id', DEVREV_CONTENT_WRAPPER_ID) + newHeader.appendChild(devrevContentWrapper) + + // Render our custom header + console.log('Rendering custom header in new element') + const headerRoot = ReactDOM.createRoot(devrevContentWrapper) + headerRoot.render( + React.createElement(Header, { + version: theme === 'dark' ? 'light' : 'dark', + }) + ) + console.log('Custom header created and rendered') } // Handle footer rendering @@ -152,54 +176,57 @@ const initApp = () => { console.log('Initializing app') if (typeof window !== 'undefined') { console.log('Browser environment detected') + + // Function to attempt rendering multiple times + const attemptRender = (attempts = 0, maxAttempts = 5) => { + console.log(`Render attempt ${attempts + 1} of ${maxAttempts}`) + render().then(() => { + // Check if header and footer are properly rendered + const header = document.getElementById(DEVREV_CONTENT_WRAPPER_ID) + const footer = document.getElementById('fern-footer') + const headerRendered = header && header.children.length > 0 + const footerRendered = footer && footer.children.length > 0 + + console.log('Render check:', { + headerRendered: headerRendered ? 'yes' : 'no', + footerRendered: footerRendered ? 'yes' : 'no' + }) + + // If not rendered properly and we haven't reached max attempts, try again + if ((!headerRendered || !footerRendered) && attempts < maxAttempts - 1) { + console.log('Components not fully rendered, trying again in 500ms') + setTimeout(() => attemptRender(attempts + 1, maxAttempts), 500) + } else if (attempts >= maxAttempts - 1) { + console.log('Max render attempts reached') + } else { + console.log('Components successfully rendered') + } + }) + } + // Check if the DOM is already loaded if (document.readyState === 'loading') { console.log('DOM still loading, adding DOMContentLoaded listener') - document.addEventListener('DOMContentLoaded', async () => { + document.addEventListener('DOMContentLoaded', () => { console.log('DOMContentLoaded event fired') - await render() - setupMutationObserver() + attemptRender() }) } else { // DOM already loaded, render immediately console.log('DOM already loaded, rendering immediately') - render().then(() => { - console.log('Initial render complete, setting up mutation observer') - setupMutationObserver() - }) + attemptRender() } + + // Also add a window load event to ensure everything is rendered + window.addEventListener('load', () => { + console.log('Window load event fired') + render() + }) } else { console.log('Not in browser environment, skipping initialization') } } -const setupMutationObserver = () => { - console.log('Setting up mutation observer') - // Create a mutation observer to watch for the Fern header being added to the DOM - const observer = new MutationObserver(async (mutations) => { - console.log('Mutation detected, mutations count:', mutations.length) - for (const mutation of mutations) { - if (mutation.type === 'childList') { - console.log('childList mutation detected') - // Check if the Fern header was added - const fernHeader = document.getElementById(FERN_HEADER_CONTAINER_ID) - if (fernHeader) { - console.log('Fern header found in mutation, rendering custom header') - await render() - } - } - } - }) - - // Start observing the document body for changes - console.log('Starting to observe document body') - observer.observe(document.body, { childList: true, subtree: true }) - - // Also try to render immediately in case the header already exists - console.log('Attempting immediate render from mutation observer setup') - render() -} - // Initialize the app console.log('Starting application initialization') initApp() From 8d40c58ec393210cb5da55e5a1daf6554e5e6001 Mon Sep 17 00:00:00 2001 From: Kapil Gowru Date: Wed, 12 Mar 2025 00:35:23 -0400 Subject: [PATCH 08/11] fix: remove header --- custom-implementation/src/main.tsx | 272 +++++++++-------------------- 1 file changed, 79 insertions(+), 193 deletions(-) diff --git a/custom-implementation/src/main.tsx b/custom-implementation/src/main.tsx index ceaf5c65..e9ca2e6c 100644 --- a/custom-implementation/src/main.tsx +++ b/custom-implementation/src/main.tsx @@ -1,232 +1,118 @@ import './main.css' import '@devrev/marketing-shared-components/dist/cjs/index.css' -import ReactDOM from 'react-dom/client' +import ReactDOM from 'react-dom' + import React from 'react' import Header from './components/header' import Footer from './components/footer' import { ThemeSwitch } from './components/theme-switch' +import { getPageData } from './modules/sanity/utils' + const FERN_CONTENT_WRAPPER_ID = 'fern-header-content-wrapper' const DEVREV_CONTENT_WRAPPER_ID = 'devrev-header-content-wrapper' + const FERN_HEADER_CONTAINER_ID = 'fern-header' const render = async () => { - console.log('Starting render function') /* * This is a where we try to make async data call. */ - const data = { header: {}, footer: {} } // Default empty data object - console.log('Page data fetched:', data ? 'success' : 'failed') - - // Check if we're in a browser environment - if (typeof window === 'undefined') { - console.log('Not in browser environment, exiting render') - return - } - - console.log('Looking for sidenav element') + + const data = await getPageData() const sidenav = document.querySelector('button.fern-search-bar') ?.parentElement as HTMLElement - console.log('Sidenav found:', sidenav ? 'yes' : 'no') - const theme = document.documentElement.getAttribute('class') - console.log('Current theme:', theme) + const theme = document.getElementsByTagName('html')[0].getAttribute('class') - // Add theme switch to sidenav - if (!document.getElementById('theme-switch') && sidenav) { - console.log('Adding theme switch to sidenav') + if (!document.getElementById('theme-switch')) { const wrapper = document.createElement('div') wrapper.setAttribute('id', 'theme-switch') sidenav.appendChild(wrapper) - const root = ReactDOM.createRoot(wrapper) - root.render(React.createElement(ThemeSwitch)) - console.log('Theme switch added') - } else { - console.log('Theme switch already exists or sidenav not found') + ReactDOM.render(React.createElement(ThemeSwitch), wrapper) } - // Find the existing Fern header - console.log('Looking for Fern header') - const existingFernHeader = document.getElementById(FERN_HEADER_CONTAINER_ID) - console.log('Fern header found:', existingFernHeader ? 'yes' : 'no') - - if (existingFernHeader) { - // Check if our custom wrappers already exist - let fernContentWrapper = document.getElementById(FERN_CONTENT_WRAPPER_ID) - let devrevContentWrapper = document.getElementById(DEVREV_CONTENT_WRAPPER_ID) - console.log('Existing wrappers found:', { - fernWrapper: fernContentWrapper ? 'yes' : 'no', - devrevWrapper: devrevContentWrapper ? 'yes' : 'no' - }) - - // If wrappers don't exist, create them - if (!fernContentWrapper) { - console.log('Creating Fern content wrapper') - fernContentWrapper = document.createElement('div') - fernContentWrapper.setAttribute('id', FERN_CONTENT_WRAPPER_ID) - - // Move all existing children to the Fern wrapper - console.log('Moving existing children to Fern wrapper') - while (existingFernHeader.firstChild) { - fernContentWrapper.appendChild(existingFernHeader.firstChild) + const fernHeaderId = document.getElementById(FERN_CONTENT_WRAPPER_ID) + const devrevHeaderId = document.getElementById(DEVREV_CONTENT_WRAPPER_ID) + + if (!fernHeaderId && !devrevHeaderId) { + // Main Container + const fernHeaderContainer = document.createElement('div') + fernHeaderContainer.setAttribute('id', FERN_HEADER_CONTAINER_ID) + + // Fern Header + const fernContentWrapper = document.createElement('div') + fernContentWrapper.setAttribute('id', FERN_CONTENT_WRAPPER_ID) + + const devrevContentWrapper = document.createElement('div') + devrevContentWrapper.setAttribute('id', DEVREV_CONTENT_WRAPPER_ID) + + // Get existing fern-header element and its children + const mainHeaderWrapper = document.getElementById(FERN_HEADER_CONTAINER_ID) + + if (mainHeaderWrapper) { + // Move all children to the wrapper + while (mainHeaderWrapper.firstChild) { + fernContentWrapper.appendChild(mainHeaderWrapper.firstChild) } - - existingFernHeader.appendChild(fernContentWrapper) - console.log('Fern content wrapper created and populated') } - - if (!devrevContentWrapper) { - console.log('Creating DevRev content wrapper') - devrevContentWrapper = document.createElement('div') - devrevContentWrapper.setAttribute('id', DEVREV_CONTENT_WRAPPER_ID) - existingFernHeader.appendChild(devrevContentWrapper) - - // Render our custom header in the DevRev wrapper - console.log('Rendering custom header in DevRev wrapper') - const headerRoot = ReactDOM.createRoot(devrevContentWrapper) - - // Remove display style forcing for production - // fernContentWrapper.style.display = 'block' - // devrevContentWrapper.style.display = 'block' - - // Pass empty props to ensure rendering - headerRoot.render( - React.createElement(Header, { - version: theme === 'dark' ? 'light' : 'dark', - }) - ) - console.log('Custom header rendered') + + fernHeaderContainer.appendChild(fernContentWrapper) + fernHeaderContainer.appendChild(devrevContentWrapper) + + // Insert the new container where the original fern-header was + if (mainHeaderWrapper) { + mainHeaderWrapper.replaceWith(fernHeaderContainer) } else { - // Update the header with current theme if it already exists - console.log('Updating existing header with current theme') - const headerRoot = ReactDOM.createRoot(devrevContentWrapper) - headerRoot.render( - React.createElement(Header, { - version: theme === 'dark' ? 'light' : 'dark', - }) - ) + document.body.appendChild(fernHeaderContainer) } - - // Make sure the header is visible - console.log('Making header visible') - existingFernHeader.style.display = 'block' - } else { - // If Fern header doesn't exist yet, create it - console.log('Fern header not found, creating it') - const newHeader = document.createElement('div') - newHeader.setAttribute('id', FERN_HEADER_CONTAINER_ID) - document.body.insertBefore(newHeader, document.body.firstChild) - - // Create DevRev content wrapper - const devrevContentWrapper = document.createElement('div') - devrevContentWrapper.setAttribute('id', DEVREV_CONTENT_WRAPPER_ID) - newHeader.appendChild(devrevContentWrapper) - - // Render our custom header - console.log('Rendering custom header in new element') - const headerRoot = ReactDOM.createRoot(devrevContentWrapper) - headerRoot.render( + + ReactDOM.render( React.createElement(Header, { - version: theme === 'dark' ? 'light' : 'dark', - }) + ...data.header, + version: theme == 'dark' ? 'light' : 'dark', + }), + devrevContentWrapper, + () => { + // Once the header component is loaded, make it visible + const header = document.getElementById(FERN_HEADER_CONTAINER_ID) + if (header) header.style.display = 'block' + } ) - console.log('Custom header created and rendered') } - // Handle footer rendering - console.log('Looking for footer element') - const footerElement = document.getElementById('fern-footer') - console.log('Footer element found:', footerElement ? 'yes' : 'no') - - if (footerElement) { - // Check if footer is already rendered - const hasChildren = footerElement.hasChildNodes() - console.log('Footer already has children:', hasChildren ? 'yes' : 'no') - - if (!hasChildren) { - console.log('Rendering footer component') - const footerRoot = ReactDOM.createRoot(footerElement) - footerRoot.render(React.createElement(Footer, { ...data.footer })) - + ReactDOM.render( + React.createElement(Footer, { ...data.footer }), + document.getElementById('fern-footer'), + () => { // Once the footer component is loaded, make it visible - console.log('Making footer visible') - footerElement.style.display = 'block' - } - } else { - // Create footer if it doesn't exist - console.log('Creating new footer element') - const newFooter = document.createElement('div') - newFooter.setAttribute('id', 'fern-footer') - document.body.appendChild(newFooter) - - console.log('Rendering footer in new element') - const footerRoot = ReactDOM.createRoot(newFooter) - footerRoot.render(React.createElement(Footer, { ...data.footer })) - newFooter.style.display = 'block' - console.log('Footer created and rendered') - } - - console.log('Render function completed') + const footer = document.getElementById('fern-footer') + if (footer) footer.style.display = 'block' + }, + ) } -// For Next.js App Router compatibility -const initApp = () => { - console.log('Initializing app') - if (typeof window !== 'undefined') { - console.log('Browser environment detected') - - // Function to attempt rendering multiple times - const attemptRender = (attempts = 0, maxAttempts = 5) => { - console.log(`Render attempt ${attempts + 1} of ${maxAttempts}`) - render().then(() => { - // Check if header and footer are properly rendered - const header = document.getElementById(DEVREV_CONTENT_WRAPPER_ID) - const footer = document.getElementById('fern-footer') - const headerRendered = header && header.children.length > 0 - const footerRendered = footer && footer.children.length > 0 - - console.log('Render check:', { - headerRendered: headerRendered ? 'yes' : 'no', - footerRendered: footerRendered ? 'yes' : 'no' - }) - - // If not rendered properly and we haven't reached max attempts, try again - if ((!headerRendered || !footerRendered) && attempts < maxAttempts - 1) { - console.log('Components not fully rendered, trying again in 500ms') - setTimeout(() => attemptRender(attempts + 1, maxAttempts), 500) - } else if (attempts >= maxAttempts - 1) { - console.log('Max render attempts reached') - } else { - console.log('Components successfully rendered') +let observations = 0 +document.addEventListener('DOMContentLoaded', async () => { + console.log('DOMContentLoaded') + await render() + new MutationObserver(async (e, o) => { + await render() + for (const item of e) { + if (item.target instanceof HTMLElement) { + const target = item.target + if (target.id === 'fern-header' || target.id === 'fern-footer') { + if (observations < 3) { + // react hydration will trigger a mutation event + observations++ + } else { + o.disconnect() + } + break } - }) - } - - // Check if the DOM is already loaded - if (document.readyState === 'loading') { - console.log('DOM still loading, adding DOMContentLoaded listener') - document.addEventListener('DOMContentLoaded', () => { - console.log('DOMContentLoaded event fired') - attemptRender() - }) - } else { - // DOM already loaded, render immediately - console.log('DOM already loaded, rendering immediately') - attemptRender() + } } - - // Also add a window load event to ensure everything is rendered - window.addEventListener('load', () => { - console.log('Window load event fired') - render() - }) - } else { - console.log('Not in browser environment, skipping initialization') - } -} - -// Initialize the app -console.log('Starting application initialization') -initApp() + }).observe(document.body, { childList: true, subtree: true }) +}) \ No newline at end of file From e005885fe64895867f76efd218bcde31dbde435a Mon Sep 17 00:00:00 2001 From: Kapil Gowru Date: Wed, 12 Mar 2025 00:42:11 -0400 Subject: [PATCH 09/11] fix: remove header --- custom-implementation/src/main.tsx | 153 ++++++++++++++--------------- 1 file changed, 74 insertions(+), 79 deletions(-) diff --git a/custom-implementation/src/main.tsx b/custom-implementation/src/main.tsx index e9ca2e6c..c5aa3639 100644 --- a/custom-implementation/src/main.tsx +++ b/custom-implementation/src/main.tsx @@ -1,9 +1,9 @@ -import './main.css' +// import './main.css' import '@devrev/marketing-shared-components/dist/cjs/index.css' -import ReactDOM from 'react-dom' +import ReactDOM from 'react-dom/client' -import React from 'react' +// import React, { useEffect, useState } from 'react' import Header from './components/header' import Footer from './components/footer' @@ -11,8 +11,8 @@ import { ThemeSwitch } from './components/theme-switch' import { getPageData } from './modules/sanity/utils' -const FERN_CONTENT_WRAPPER_ID = 'fern-header-content-wrapper' -const DEVREV_CONTENT_WRAPPER_ID = 'devrev-header-content-wrapper' +// const FERN_CONTENT_WRAPPER_ID = 'fern-header-content-wrapper' +// const DEVREV_CONTENT_WRAPPER_ID = 'devrev-header-content-wrapper' const FERN_HEADER_CONTAINER_ID = 'fern-header' @@ -27,92 +27,87 @@ const render = async () => { const theme = document.getElementsByTagName('html')[0].getAttribute('class') - if (!document.getElementById('theme-switch')) { + // Add theme switch to the sidebar + if (!document.getElementById('theme-switch') && sidenav) { const wrapper = document.createElement('div') wrapper.setAttribute('id', 'theme-switch') sidenav.appendChild(wrapper) - ReactDOM.render(React.createElement(ThemeSwitch), wrapper) + const root = ReactDOM.createRoot(wrapper) + root.render() } - const fernHeaderId = document.getElementById(FERN_CONTENT_WRAPPER_ID) - const devrevHeaderId = document.getElementById(DEVREV_CONTENT_WRAPPER_ID) - - if (!fernHeaderId && !devrevHeaderId) { - // Main Container - const fernHeaderContainer = document.createElement('div') - fernHeaderContainer.setAttribute('id', FERN_HEADER_CONTAINER_ID) + // Handle header rendering + const headerElement = document.getElementById(FERN_HEADER_CONTAINER_ID) + if (headerElement) { + // Clear existing content + headerElement.innerHTML = '' + + // Create root and render Header component + const headerRoot = ReactDOM.createRoot(headerElement) + headerRoot.render( +
+ ) + + // Make header visible + headerElement.style.display = 'block' + } - // Fern Header - const fernContentWrapper = document.createElement('div') - fernContentWrapper.setAttribute('id', FERN_CONTENT_WRAPPER_ID) + // Handle footer rendering + const footerElement = document.getElementById('fern-footer') + if (footerElement) { + // Clear existing content + footerElement.innerHTML = '' + + // Create root and render Footer component + const footerRoot = ReactDOM.createRoot(footerElement) + footerRoot.render(