Skip to content

Commit 4bffd11

Browse files
wise-king-sullymanwise-king-sullyman
authored
Merge pull request #69 from rebeccaalpert/codeeditor
fix(CodeEditor): Prevent loss of styles/JS
2 parents 0c7212c + 88b9f63 commit 4bffd11

File tree

7 files changed

+82
-55
lines changed

7 files changed

+82
-55
lines changed

‎src/components/NavEntry.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export const NavEntry = ({ entry, isActive }: NavEntryProps) => {
2929
to={`/${kebabSection}/${kebabTitle}`}
3030
isActive={isActive}
3131
id={`nav-entry-${contentLocationId}`}
32+
data-astro-reload
3233
>
3334
{entryTitle}
3435
</NavItem>

‎src/components/Toolbar.tsx‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -7,40 +7,40 @@ import {
77
ToolbarItem,
88
} from '@patternfly/react-core'
99

10-
import { ToggleThemeSwitcher } from './toolbar/ToogleThemeSwitcher'
10+
import { ToggleThemeSwitcher } from './toolbar/ToggleThemeSwitcher'
1111
import { SearchComponent } from './toolbar/SearchComponent'
12-
import { DocumentReleaseDropdown } from './toolbar/DocumentReleaseDropdown';
13-
import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
12+
import { DocumentReleaseDropdown } from './toolbar/DocumentReleaseDropdown'
13+
import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon'
1414

1515
export const Toolbar: React.FunctionComponent = () => (
16-
<PFToolbar id="toolbar" isStatic>
17-
<ToolbarContent>
18-
<ToolbarGroup
19-
variant="action-group-plain"
20-
align={{ default: 'alignEnd' }}
21-
gap={{ default: 'gapNone', md: 'gapMd' }}
22-
>
23-
<ToolbarItem>
24-
<ToggleThemeSwitcher/>
25-
</ToolbarItem>
26-
<ToolbarItem>
27-
<SearchComponent/>
28-
</ToolbarItem>
29-
<ToolbarItem>
30-
<Button
31-
component="a"
32-
variant="plain"
33-
href="//github.com/patternfly"
34-
target="top"
35-
aria-label="PatternFly GitHub page"
36-
>
37-
<GithubIcon />
38-
</Button>
39-
</ToolbarItem>
40-
<ToolbarItem>
41-
<DocumentReleaseDropdown/>
42-
</ToolbarItem>
43-
</ToolbarGroup>
44-
</ToolbarContent>
45-
</PFToolbar>
46-
)
16+
<PFToolbar id="toolbar" isStatic>
17+
<ToolbarContent>
18+
<ToolbarGroup
19+
variant="action-group-plain"
20+
align={{ default: 'alignEnd' }}
21+
gap={{ default: 'gapNone', md: 'gapMd' }}
22+
>
23+
<ToolbarItem>
24+
<ToggleThemeSwitcher />
25+
</ToolbarItem>
26+
<ToolbarItem>
27+
<SearchComponent />
28+
</ToolbarItem>
29+
<ToolbarItem>
30+
<Button
31+
component="a"
32+
variant="plain"
33+
href="//github.com/patternfly"
34+
target="top"
35+
aria-label="PatternFly GitHub page"
36+
>
37+
<GithubIcon />
38+
</Button>
39+
</ToolbarItem>
40+
<ToolbarItem>
41+
<DocumentReleaseDropdown />
42+
</ToolbarItem>
43+
</ToolbarGroup>
44+
</ToolbarContent>
45+
</PFToolbar>
46+
)

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ exports[`NavEntry matches snapshot 1`] = `
1010
>
1111
<a
1212
class="pf-v6-c-nav__link"
13+
data-astro-reload="true"
1314
href="/section1/entry-1-title"
1415
id="nav-entry-entry1"
1516
>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ exports[`matches snapshot 1`] = `
5353
<a
5454
aria-current="page"
5555
class="pf-v6-c-nav__link pf-m-current"
56+
data-astro-reload="true"
5657
href="/section1/complex-entry-1"
5758
id="nav-entry-entry1"
5859
>
@@ -71,6 +72,7 @@ exports[`matches snapshot 1`] = `
7172
>
7273
<a
7374
class="pf-v6-c-nav__link"
75+
data-astro-reload="true"
7476
href="/section1/complex-entry-2"
7577
id="nav-entry-entry2"
7678
>
@@ -89,6 +91,7 @@ exports[`matches snapshot 1`] = `
8991
>
9092
<a
9193
class="pf-v6-c-nav__link"
94+
data-astro-reload="true"
9295
href="/section1/complex-entry-3"
9396
id="nav-entry-entry3"
9497
>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ exports[`matches snapshot 1`] = `
6868
<a
6969
aria-current="page"
7070
class="pf-v6-c-nav__link pf-m-current"
71+
data-astro-reload="true"
7172
href="/section-one/entry1"
7273
id="nav-entry-entry1"
7374
>
@@ -86,6 +87,7 @@ exports[`matches snapshot 1`] = `
8687
>
8788
<a
8889
class="pf-v6-c-nav__link"
90+
data-astro-reload="true"
8991
href="/section-one/entry2"
9092
id="nav-entry-entry2"
9193
>
@@ -104,6 +106,7 @@ exports[`matches snapshot 1`] = `
104106
>
105107
<a
106108
class="pf-v6-c-nav__link"
109+
data-astro-reload="true"
107110
href="/section-one/entry3"
108111
id="nav-entry-entry3"
109112
>
@@ -122,6 +125,7 @@ exports[`matches snapshot 1`] = `
122125
>
123126
<a
124127
class="pf-v6-c-nav__link"
128+
data-astro-reload="true"
125129
href="/section-one/entry4"
126130
id="nav-entry-entry4"
127131
>
@@ -140,6 +144,7 @@ exports[`matches snapshot 1`] = `
140144
>
141145
<a
142146
class="pf-v6-c-nav__link"
147+
data-astro-reload="true"
143148
href="/section-one/entry5"
144149
id="nav-entry-entry5"
145150
>
@@ -204,6 +209,7 @@ exports[`matches snapshot 1`] = `
204209
>
205210
<a
206211
class="pf-v6-c-nav__link"
212+
data-astro-reload="true"
207213
href="/section-two/entry6"
208214
id="nav-entry-entry6"
209215
>
@@ -222,6 +228,7 @@ exports[`matches snapshot 1`] = `
222228
>
223229
<a
224230
class="pf-v6-c-nav__link"
231+
data-astro-reload="true"
225232
href="/section-two/entry7"
226233
id="nav-entry-entry7"
227234
>
@@ -240,6 +247,7 @@ exports[`matches snapshot 1`] = `
240247
>
241248
<a
242249
class="pf-v6-c-nav__link"
250+
data-astro-reload="true"
243251
href="/section-two/entry8"
244252
id="nav-entry-entry8"
245253
>

src/components/toolbar/ToogleThemeSwitcher.tsx renamed to src/components/toolbar/ToggleThemeSwitcher.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@ import SunIcon from '@patternfly/react-icons/dist/esm/icons/sun-icon'
55
import { getThemePreference, updateThemePreference } from '../../utils/theme'
66

77
export const ToggleThemeSwitcher: React.FunctionComponent = () => {
8-
const [isDarkTheme, setIsDarkTheme] = React.useState(false);
8+
const [isDarkTheme, setIsDarkTheme] = React.useState(false)
9+
const [isMounted, setIsMounted] = React.useState(false)
910

1011
React.useEffect(() => {
11-
// const darkTheme = window?.localStorage?.getItem('darkMode') === 'true' ? true : false;
12-
// const html = document.querySelector('html') as HTMLHtmlElement
13-
// html.classList.toggle('pf-v6-theme-dark', darkTheme)
14-
const darkTheme = getThemePreference() === 'dark';
15-
setIsDarkTheme(darkTheme);
16-
}, []);
12+
setIsMounted(true)
13+
const darkTheme = getThemePreference() === 'dark'
14+
setIsDarkTheme(darkTheme)
15+
}, [])
1716

1817
const toggleDarkTheme = (_evt: unknown, selected: boolean) => {
1918
const darkThemeToggleClicked = !selected === isDarkTheme
20-
updateThemePreference(darkThemeToggleClicked ? 'dark' : 'light');
21-
// const html = document.querySelector('html') as HTMLHtmlElement
22-
// html.classList.toggle('pf-v6-theme-dark', darkThemeToggleClicked)
23-
setIsDarkTheme(darkThemeToggleClicked);
24-
//localStorage.setItem('darkMode', JSON.stringify(darkThemeToggleClicked));
19+
updateThemePreference(darkThemeToggleClicked ? 'dark' : 'light')
20+
setIsDarkTheme(darkThemeToggleClicked)
21+
}
22+
23+
if (!isMounted) {
24+
return null
2525
}
2626

2727
return (

‎src/layouts/Main.astro‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,18 @@ import Navigation from '../components/Navigation.astro'
1010

1111
<html lang="en" transition:animate="none">
1212
<head>
13+
<script>
14+
// Set theme before any content renders
15+
try {
16+
const themePreference = localStorage.getItem('theme-preference')
17+
if (themePreference === 'dark') {
18+
document.documentElement.classList.add('pf-v6-theme-dark')
19+
}
20+
} catch (e) {
21+
/* eslint-disable-next-line no-console */
22+
console.error('Failed to set initial theme:', e)
23+
}
24+
</script>
1325
<meta charset="utf-8" />
1426
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
1527
<meta name="viewport" content="width=device-width" />
@@ -27,16 +39,18 @@ import Navigation from '../components/Navigation.astro'
2739
</html>
2840

2941
<script>
30-
const themePreference = window.localStorage.getItem('theme-preference')
31-
document
32-
?.querySelector('html')
33-
?.classList.toggle('pf-v6-theme-dark', themePreference === 'dark')
42+
const updateTheme = (themePreference: string) => {
43+
requestAnimationFrame(() => {
44+
document.documentElement.classList.toggle(
45+
'pf-v6-theme-dark',
46+
themePreference === 'dark',
47+
)
48+
})
49+
}
3450

35-
document.addEventListener('astro:after-swap', () => {
36-
const themePreference = window.localStorage.getItem('theme-preference')
37-
document
38-
?.querySelector('html')
39-
?.classList.toggle('pf-v6-theme-dark', themePreference === 'dark')
51+
document.addEventListener('astro:before-swap', () => {
52+
const themePreference = localStorage.getItem('theme-preference')
53+
updateTheme(themePreference || 'light')
4054
})
4155

4256
const scrollToHash = (hash: string) => {

0 commit comments

Comments
 (0)