Skip to content

Commit e766070

Browse files
rschristianrschristian
committed
fix: Fix header hydration issue & insert debug for footer
1 parent 0b1a698 commit e766070

File tree

3 files changed

+87
-32
lines changed

3 files changed

+87
-32
lines changed

‎src/components/header/index.jsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -133,16 +133,15 @@ function LanguagePicker() {
133133
}
134134
aria-label={translate('i18n', 'selectYourLanguage')}
135135
>
136-
{typeof window !== 'undefined' &&
137-
Object.entries(config.locales).map(([id, label]) => (
138-
<button
139-
class={cx(id == lang && style.current)}
140-
data-value={id}
141-
onClick={e => setLang(e.currentTarget.dataset.value)}
142-
>
143-
{label}
144-
</button>
145-
))}
136+
{Object.entries(config.locales).map(([id, label]) => (
137+
<button
138+
class={cx(id == lang && style.current)}
139+
data-value={id}
140+
onClick={e => setLang(e.currentTarget.dataset.value)}
141+
>
142+
{label}
143+
</button>
144+
))}
146145
</ExpandableNavLink>
147146
)}
148147
</NavMenu>

‎src/index.jsx‎

Lines changed: 77 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import 'preact/debug';
12
import * as preact from 'preact';
23
import * as hooks from 'preact/hooks';
34
import { hydrate, prerender as ssr } from 'preact-iso';
@@ -10,7 +11,6 @@ import './style/index.css';
1011
// allows users to play with preact in the browser developer console
1112
globalThis.preact = { ...preact, ...hooks };
1213

13-
1414
if (typeof window !== 'undefined') {
1515
hydrate(<App />, document.getElementById('app'));
1616

@@ -55,27 +55,83 @@ export async function prerender() {
5555

5656
const res = await ssr(<App prerenderData={prerenderData} />);
5757

58-
const elements = new Set([
59-
{ type: 'meta', props: { name: 'description', content: globalThis.description } },
60-
{ type: 'meta', props: { property: 'og:url', content: `https://preactjs.com${location.pathname}` } },
61-
{ type: 'meta', props: { property: 'og:title', content: globalThis.title } },
62-
{ type: 'meta', props: { property: 'og:description', content: globalThis.description } },
63-
64-
// Make sure old v8 docs aren't indexed by search engines, leads to confused users if they land there
65-
location.pathname.includes('/v8/') && { type: 'meta', props: { name: 'robots', content: 'noindex' } },
66-
67-
// Preloading
68-
// These are all low priority, non-blocking fetches that we just want to have started early. None are critical due to prerendering.
69-
{ type: 'link', props: { rel: 'preload', href: '/.netlify/functions/release?repo=preact', as: 'fetch', fetchpriority: 'low' } },
70-
location.pathname == '/' && { type: 'link', props: { rel: 'preload', href: '/.netlify/functions/repos?org=preactjs', as: 'fetch', fetchpriority: 'low' } },
71-
{ type: 'link', props: { rel: 'preload', href: '/contributors.json', as: 'fetch', fetchpriority: 'low' } },
72-
// Hardcoding English is intentional, first render always fetches it with user preference only being applied later
73-
{ type: 'link', props: { rel: 'preload', href: `/content/en${getContentPath(location.pathname)}.json`, as: 'fetch', fetchpriority: 'low' } },
74-
75-
process.env.BRANCH && { type: 'script', children: `ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga('set','dimension1','${process.env.BRANCH}');onerror=function(e,f,l,c){ga('send','event','exception',e,f+':'+l+':'+c)}` }
76-
].filter(Boolean));
58+
const elements = new Set(
59+
[
60+
{
61+
type: 'meta',
62+
props: { name: 'description', content: globalThis.description }
63+
},
64+
{
65+
type: 'meta',
66+
props: {
67+
property: 'og:url',
68+
content: `https://preactjs.com${location.pathname}`
69+
}
70+
},
71+
{
72+
type: 'meta',
73+
props: { property: 'og:title', content: globalThis.title }
74+
},
75+
{
76+
type: 'meta',
77+
props: { property: 'og:description', content: globalThis.description }
78+
},
79+
80+
// Make sure old v8 docs aren't indexed by search engines, leads to confused users if they land there
81+
location.pathname.includes('/v8/') && {
82+
type: 'meta',
83+
props: { name: 'robots', content: 'noindex' }
84+
},
85+
86+
// Preloading
87+
// These are all low priority, non-blocking fetches that we just want to have started early. None are critical due to prerendering.
88+
{
89+
type: 'link',
90+
props: {
91+
rel: 'preload',
92+
href: '/.netlify/functions/release?repo=preact',
93+
as: 'fetch',
94+
fetchpriority: 'low'
95+
}
96+
},
97+
location.pathname == '/' && {
98+
type: 'link',
99+
props: {
100+
rel: 'preload',
101+
href: '/.netlify/functions/repos?org=preactjs',
102+
as: 'fetch',
103+
fetchpriority: 'low'
104+
}
105+
},
106+
{
107+
type: 'link',
108+
props: {
109+
rel: 'preload',
110+
href: '/contributors.json',
111+
as: 'fetch',
112+
fetchpriority: 'low'
113+
}
114+
},
115+
// Hardcoding English is intentional, first render always fetches it with user preference only being applied later
116+
{
117+
type: 'link',
118+
props: {
119+
rel: 'preload',
120+
href: `/content/en${getContentPath(location.pathname)}.json`,
121+
as: 'fetch',
122+
fetchpriority: 'low'
123+
}
124+
},
125+
126+
process.env.BRANCH && {
127+
type: 'script',
128+
children: `ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga('set','dimension1','${process.env.BRANCH}');onerror=function(e,f,l,c){ga('send','event','exception',e,f+':'+l+':'+c)}`
129+
}
130+
].filter(Boolean)
131+
);
77132

78-
res.html += '<script async defer src="https://www.google-analytics.com/analytics.js"></script>';
133+
res.html +=
134+
'<script async defer src="https://www.google-analytics.com/analytics.js"></script>';
79135

80136
return {
81137
...res,

‎src/lib/i18n.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export function LanguageProvider({ children }) {
5252
const [lang, setLang] = useState('en');
5353

5454
const translations = useResource(() => {
55-
if (lang == 'en') return Promise.resolve(englishTranslations);
55+
if (lang == 'en') return englishTranslations;
5656
let url = '';
5757
for (const translationURL in translationURLs) {
5858
if (translationURL.includes(`/${lang}.json`)) {

0 commit comments

Comments
 (0)