algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-28 12:43:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

website: use <BrowserOnly> to fix SSR mismatch bug

Browse Source
This commit is contained in:
Yangshun
2021-09-02 13:09:49 +08:00
parent 9084053aab
commit 44b6e0584a
2 changed files with 110 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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