msb-public
/
tech-interview-handbook
mirror of https://github.com/yangshun/tech-interview-handbook
2
1
Code Issues Projects Releases Wiki Activity

website: use <BrowserOnly> to fix SSR mismatch bug

Browse Source
pull/225/head
Yangshun 4 years ago
parent 9084053aab
commit 44b6e0584a
2 changed files with 110 additions and 86 deletions

71
website/src/components/SidebarAd/index.js
Unescape View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import BrowserOnly from '@docusaurus/BrowserOnly';
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import clsx from 'clsx'; import clsx from 'clsx';
@ -17,35 +18,45 @@ export default React.memo(function SidebarAd() {
const backgroundClass = const backgroundClass =
BACKGROUNDS[Math.floor(Math.random() * BACKGROUNDS.length)]; BACKGROUNDS[Math.floor(Math.random() * BACKGROUNDS.length)];
return Math.random() > 0.5 ? ( // Because the SSR and client output can differ and hydration doesn't patch attribute differences,
<a // we'll render this on the browser only.
className={clsx(styles.container, backgroundClass)} return (
href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_docs_sidebar" <BrowserOnly>
key={Math.random()} {() =>
target="_blank" Math.random() ? (
rel="noreferrer noopener" <a
onClick={() => { className={clsx(styles.container, backgroundClass)}
window.gtag('event', 'moonchaser.sidebar.click'); href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_docs_sidebar"
}}> key={Math.random()}
<p className={styles.tagline}> target="_blank"
<strong>Get paid more.</strong> Receive risk-free salary negotiation rel="noreferrer noopener"
help from Moonchaser. You pay nothing unless your offer is increased. onClick={() => {
</p> window.gtag('event', 'moonchaser.sidebar.click');
</a> }}>
) : ( <p className={styles.tagline}>
<a <strong>Get paid more.</strong> Receive risk-free salary
className={clsx(styles.container, backgroundClass)} negotiation help from Moonchaser. You pay nothing unless your
href="https://www.levels.fyi/services/?ref=TechInterviewHandbook&utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_docs_sidebar" offer is increased.
key={Math.random()} </p>
target="_blank" </a>
rel="noreferrer noopener" ) : (
onClick={() => { <a
window.gtag('event', 'levelsfyi.sidebar.click'); className={clsx(styles.container, backgroundClass)}
}}> href="https://www.levels.fyi/services/?ref=TechInterviewHandbook&utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_docs_sidebar"
<p className={styles.tagline}> key={Math.random()}
<strong>Get paid, not played.</strong> Chat with former tech recruiters target="_blank"
who'll guide you on exactly what to say to negotiate a higher offer. rel="noreferrer noopener"
</p> onClick={() => {
</a> window.gtag('event', 'levelsfyi.sidebar.click');
}}>
<p className={styles.tagline}>
<strong>Get paid, not played.</strong> Chat with former tech
recruiters who'll guide you on exactly what to say to negotiate a
higher offer.
</p>
</a>
)
}
</BrowserOnly>
); );
}); });

125
website/src/pages/index.js
Unescape View File

@ -2,6 +2,7 @@ import React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import Layout from '@theme/Layout'; import Layout from '@theme/Layout';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import BrowserOnly from '@docusaurus/BrowserOnly';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css'; import styles from './styles.module.css';
@ -53,66 +54,78 @@ function Home() {
</div> </div>
</header> </header>
<div> <div>
<div {/* // Because the SSR and client output can differ and hydration doesn't patch attribute differences,
className={classnames( we'll render this on the browser only. */}
'margin-bottom--lg', <BrowserOnly>
'padding-vert--lg', {() => (
styles.sectionPrimary, <div
)}> className={classnames(
<div className="container"> 'margin-bottom--lg',
<div className="row"> 'padding-vert--lg',
<div className="col col--8 col--offset-2"> styles.sectionPrimary,
<div className="margin-vert--lg text--center"> )}>
{Math.random() > 0.5 ? ( <div className="container">
<div key={Math.random()}> <div className="row">
<h2 className={styles.sectionPrimaryTitle}> <div className="col col--8 col--offset-2">
<strong> <div className="margin-vert--lg text--center">
Get paid more. Receive risk-free salary negotiation {Math.random() > 0.5 ? (
help from Moonchaser. You pay nothing unless your <div key={Math.random()}>
offer is increased. <h2 className={styles.sectionPrimaryTitle}>
</strong> <strong>
</h2> Get paid more. Receive risk-free salary
<div className="margin-vert--lg"> negotiation help from Moonchaser. You pay nothing
<a unless your offer is increased.
className="button button--secondary button--lg" </strong>
href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_homepage" </h2>
rel="noreferrer noopener" <div className="margin-vert--lg">
target="_blank" <a
onClick={() => { className="button button--secondary button--lg"
window.gtag('event', 'moonchaser.homepage.click'); href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_homepage"
}}> rel="noreferrer noopener"
Get Risk-free Negotiation Help&nbsp;&nbsp;→ target="_blank"
</a> onClick={() => {
</div> window.gtag(
</div> 'event',
) : ( 'moonchaser.homepage.click',
<div key={Math.random()}> );
<h2 className={styles.sectionPrimaryTitle}> }}>
<strong> Get Risk-free Negotiation Help&nbsp;&nbsp;→
Get paid, not played. Chat with former tech recruiters </a>
who'll guide you on exactly what to say to negotiate a </div>
higher offer. </div>
</strong> ) : (
</h2> <div key={Math.random()}>
<div className="margin-vert--lg"> <h2 className={styles.sectionPrimaryTitle}>
<a <strong>
className="button button--secondary button--lg" Get paid, not played. Chat with former tech
href="https://www.levels.fyi/services/?ref=TechInterviewHandbook&utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_homepage" recruiters who'll guide you on exactly what to say
rel="noreferrer noopener" to negotiate a higher offer.
target="_blank" </strong>
onClick={() => { </h2>
window.gtag('event', 'levelsfyi.homepage.click'); <div className="margin-vert--lg">
}}> <a
Get Negotiation Help&nbsp;&nbsp;→ className="button button--secondary button--lg"
</a> href="https://www.levels.fyi/services/?ref=TechInterviewHandbook&utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_homepage"
</div> rel="noreferrer noopener"
target="_blank"
onClick={() => {
window.gtag(
'event',
'levelsfyi.homepage.click',
);
}}>
Get Negotiation Help&nbsp;&nbsp;→
</a>
</div>
</div>
)}
</div> </div>
)} </div>
</div> </div>
</div> </div>
</div> </div>
</div> )}
</div> </BrowserOnly>
<div className={classnames('margin-vert--lg', 'padding-vert--lg')}> <div className={classnames('margin-vert--lg', 'padding-vert--lg')}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">

Write Preview
Loading…
Cancel
Save