fix(CodeEditor): Prevent loss of styles/JS

src/components/NavEntry.tsx

@@ -29,6 +29,7 @@ export const NavEntry = ({ entry, isActive }: NavEntryProps) => {
       to={`/${kebabSection}/${kebabTitle}`}
       isActive={isActive}
       id={`nav-entry-${contentLocationId}`}
+      data-astro-reload
     >
       {entryTitle}
     </NavItem>

src/components/Toolbar.tsx

@@ -7,40 +7,40 @@ import {
   ToolbarItem,
 } from '@patternfly/react-core'
 
-import { ToggleThemeSwitcher } from './toolbar/ToogleThemeSwitcher'
+import { ToggleThemeSwitcher } from './toolbar/ToggleThemeSwitcher'
 import { SearchComponent } from './toolbar/SearchComponent'
-import { DocumentReleaseDropdown } from './toolbar/DocumentReleaseDropdown';
-import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
+import { DocumentReleaseDropdown } from './toolbar/DocumentReleaseDropdown'
+import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon'
 
 export const Toolbar: React.FunctionComponent = () => (
-    <PFToolbar id="toolbar" isStatic>
-      <ToolbarContent>
-        <ToolbarGroup
-          variant="action-group-plain"
-          align={{ default: 'alignEnd' }}
-          gap={{ default: 'gapNone', md: 'gapMd' }}
-        >
-          <ToolbarItem>
-            <ToggleThemeSwitcher/>
-          </ToolbarItem>
-          <ToolbarItem>
-            <SearchComponent/>
-          </ToolbarItem>
-          <ToolbarItem>
-            <Button
-              component="a"
-              variant="plain"
-              href="//github.com/patternfly"
-              target="top"
-              aria-label="PatternFly GitHub page"
-            >
-                <GithubIcon />
-            </Button>
-          </ToolbarItem>
-          <ToolbarItem>
-           <DocumentReleaseDropdown/>
-          </ToolbarItem>
-        </ToolbarGroup>
-      </ToolbarContent>
-    </PFToolbar>
-  )
+  <PFToolbar id="toolbar" isStatic>
+    <ToolbarContent>
+      <ToolbarGroup
+        variant="action-group-plain"
+        align={{ default: 'alignEnd' }}
+        gap={{ default: 'gapNone', md: 'gapMd' }}
+      >
+        <ToolbarItem>
+          <ToggleThemeSwitcher />
+        </ToolbarItem>
+        <ToolbarItem>
+          <SearchComponent />
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button
+            component="a"
+            variant="plain"
+            href="//github.com/patternfly"
+            target="top"
+            aria-label="PatternFly GitHub page"
+          >
+            <GithubIcon />
+          </Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <DocumentReleaseDropdown />
+        </ToolbarItem>
+      </ToolbarGroup>
+    </ToolbarContent>
+  </PFToolbar>
+)

src/components/__tests__/__snapshots__/NavEntry.test.tsx.snap

@@ -10,6 +10,7 @@ exports[`NavEntry matches snapshot 1`] = `
   >
     <a
       class="pf-v6-c-nav__link"
+      data-astro-reload="true"
       href="/section1/entry-1-title"
       id="nav-entry-entry1"
     >

src/components/__tests__/__snapshots__/NavSection.test.tsx.snap

@@ -53,6 +53,7 @@ exports[`matches snapshot 1`] = `
           <a
             aria-current="page"
             class="pf-v6-c-nav__link pf-m-current"
+            data-astro-reload="true"
             href="/section1/complex-entry-1"
             id="nav-entry-entry1"
           >
@@ -71,6 +72,7 @@ exports[`matches snapshot 1`] = `
         >
           <a
             class="pf-v6-c-nav__link"
+            data-astro-reload="true"
             href="/section1/complex-entry-2"
             id="nav-entry-entry2"
           >
@@ -89,6 +91,7 @@ exports[`matches snapshot 1`] = `
         >
           <a
             class="pf-v6-c-nav__link"
+            data-astro-reload="true"
             href="/section1/complex-entry-3"
             id="nav-entry-entry3"
           >

src/components/__tests__/__snapshots__/Navigation.test.tsx.snap

@@ -68,6 +68,7 @@ exports[`matches snapshot 1`] = `
                 <a
                   aria-current="page"
                   class="pf-v6-c-nav__link pf-m-current"
+                  data-astro-reload="true"
                   href="/section-one/entry1"
                   id="nav-entry-entry1"
                 >
@@ -86,6 +87,7 @@ exports[`matches snapshot 1`] = `
               >
                 <a
                   class="pf-v6-c-nav__link"
+                  data-astro-reload="true"
                   href="/section-one/entry2"
                   id="nav-entry-entry2"
                 >
@@ -104,6 +106,7 @@ exports[`matches snapshot 1`] = `
               >
                 <a
                   class="pf-v6-c-nav__link"
+                  data-astro-reload="true"
                   href="/section-one/entry3"
                   id="nav-entry-entry3"
                 >
@@ -122,6 +125,7 @@ exports[`matches snapshot 1`] = `
               >
                 <a
                   class="pf-v6-c-nav__link"
+                  data-astro-reload="true"
                   href="/section-one/entry4"
                   id="nav-entry-entry4"
                 >
@@ -140,6 +144,7 @@ exports[`matches snapshot 1`] = `
               >
                 <a
                   class="pf-v6-c-nav__link"
+                  data-astro-reload="true"
                   href="/section-one/entry5"
                   id="nav-entry-entry5"
                 >
@@ -204,6 +209,7 @@ exports[`matches snapshot 1`] = `
               >
                 <a
                   class="pf-v6-c-nav__link"
+                  data-astro-reload="true"
                   href="/section-two/entry6"
                   id="nav-entry-entry6"
                 >
@@ -222,6 +228,7 @@ exports[`matches snapshot 1`] = `
               >
                 <a
                   class="pf-v6-c-nav__link"
+                  data-astro-reload="true"
                   href="/section-two/entry7"
                   id="nav-entry-entry7"
                 >
@@ -240,6 +247,7 @@ exports[`matches snapshot 1`] = `
               >
                 <a
                   class="pf-v6-c-nav__link"
+                  data-astro-reload="true"
                   href="/section-two/entry8"
                   id="nav-entry-entry8"
                 >

src/components/toolbar/ToogleThemeSwitcher.tsx → src/components/toolbar/ToggleThemeSwitcher.tsx

@@ -5,23 +5,23 @@ import SunIcon from '@patternfly/react-icons/dist/esm/icons/sun-icon'
 import { getThemePreference, updateThemePreference } from '../../utils/theme'
 
 export const ToggleThemeSwitcher: React.FunctionComponent = () => {
-  const [isDarkTheme, setIsDarkTheme] = React.useState(false);
+  const [isDarkTheme, setIsDarkTheme] = React.useState(false)
+  const [isMounted, setIsMounted] = React.useState(false)
 
   React.useEffect(() => {
-    // const darkTheme = window?.localStorage?.getItem('darkMode') === 'true' ? true : false;
-    // const html = document.querySelector('html') as HTMLHtmlElement
-    // html.classList.toggle('pf-v6-theme-dark', darkTheme)
-    const darkTheme = getThemePreference() === 'dark';
-    setIsDarkTheme(darkTheme);
-  }, []);
+    setIsMounted(true)
+    const darkTheme = getThemePreference() === 'dark'
+    setIsDarkTheme(darkTheme)
+  }, [])
 
   const toggleDarkTheme = (_evt: unknown, selected: boolean) => {
     const darkThemeToggleClicked = !selected === isDarkTheme
-    updateThemePreference(darkThemeToggleClicked ? 'dark' : 'light');  
-    // const html = document.querySelector('html') as HTMLHtmlElement
-    // html.classList.toggle('pf-v6-theme-dark', darkThemeToggleClicked)
-    setIsDarkTheme(darkThemeToggleClicked); 
-    //localStorage.setItem('darkMode', JSON.stringify(darkThemeToggleClicked));
+    updateThemePreference(darkThemeToggleClicked ? 'dark' : 'light')
+    setIsDarkTheme(darkThemeToggleClicked)
+  }
+
+  if (!isMounted) {
+    return null
   }
 
   return (

src/layouts/Main.astro

@@ -10,6 +10,18 @@ import Navigation from '../components/Navigation.astro'
 
 <html lang="en" transition:animate="none">
   <head>
+    <script>
+      // Set theme before any content renders
+      try {
+        const themePreference = localStorage.getItem('theme-preference')
+        if (themePreference === 'dark') {
+          document.documentElement.classList.add('pf-v6-theme-dark')
+        }
+      } catch (e) {
+        /* eslint-disable-next-line no-console */
+        console.error('Failed to set initial theme:', e)
+      }
+    </script>
     <meta charset="utf-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width" />
@@ -27,16 +39,18 @@ import Navigation from '../components/Navigation.astro'
 </html>
 
 <script>
-  const themePreference = window.localStorage.getItem('theme-preference')
-  document
-    ?.querySelector('html')
-    ?.classList.toggle('pf-v6-theme-dark', themePreference === 'dark')
+  const updateTheme = (themePreference: string) => {
+    requestAnimationFrame(() => {
+      document.documentElement.classList.toggle(
+        'pf-v6-theme-dark',
+        themePreference === 'dark',
+      )
+    })
+  }
 
-  document.addEventListener('astro:after-swap', () => {
-    const themePreference = window.localStorage.getItem('theme-preference')
-    document
-      ?.querySelector('html')
-      ?.classList.toggle('pf-v6-theme-dark', themePreference === 'dark')
+  document.addEventListener('astro:before-swap', () => {
+    const themePreference = localStorage.getItem('theme-preference')
+    updateTheme(themePreference || 'light')
   })
 
   const scrollToHash = (hash: string) => {