mirror of
https://github.com/yangshun/tech-interview-handbook.git
synced 2026-04-13 09:59:44 +08:00
website: move into monorepo
This commit is contained in:
Yangshun Tay
249
apps/website/src/components/SidebarAd/index.js
Normal file
249
apps/website/src/components/SidebarAd/index.js
Normal file
@@ -0,0 +1,249 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import BrowserOnly from '@docusaurus/BrowserOnly';
|
||||
|
||||
import clsx from 'clsx';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const AD_REFRESH_RATE = 20 * 1000;
|
||||
|
||||
function FAANGTechLeads({ position }) {
|
||||
return (
|
||||
<a
|
||||
className={clsx(styles.container, styles.backgroundFTL)}
|
||||
href={`https://www.faangtechleads.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=1e80c401fe7e2`}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
onClick={() => {
|
||||
window.gtag('event', `faangtechleads.${position}.click`);
|
||||
}}>
|
||||
<p className={styles.tagline}>
|
||||
<strong className={styles.title}>
|
||||
Craft the perfect resume for Google and Facebook
|
||||
</strong>
|
||||
Save time crafting your resume with FAANG Tech Leads'{' '}
|
||||
<u>FAANG-quality resume templates and examples</u> which have helped
|
||||
many Software Engineers get interviews at top Bay Area companies!
|
||||
</p>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function GreatFrontEnd({ position }) {
|
||||
return (
|
||||
<a
|
||||
className={clsx(styles.container, styles.backgroundGreatFrontEnd)}
|
||||
href={`https://www.greatfrontend.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&fpr=techinterviewhandbook`}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
onClick={() => {
|
||||
window.gtag('event', `greatfrontend.${position}.click`);
|
||||
}}>
|
||||
<p className={styles.tagline}>
|
||||
<strong className={styles.title}>LeetCode for Front End</strong>
|
||||
Prepare with <u>Great Front End</u>'s large pool of high quality front
|
||||
end interview questions and solutions!
|
||||
</p>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function AlgoMonster({ position }) {
|
||||
return (
|
||||
<a
|
||||
className={clsx(styles.container, styles.backgroundAlgoMonster)}
|
||||
href="https://shareasale.com/r.cfm?b=1873647&u=3114753&m=114505&urllink=&afftrack="
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
onClick={() => {
|
||||
window.gtag('event', `algomonster.${position}.click`);
|
||||
}}>
|
||||
<p className={styles.tagline}>
|
||||
<strong className={styles.title}>
|
||||
Stop grinding mindlessly. Study with a plan
|
||||
</strong>
|
||||
Developed by Google engineers, <u>AlgoMonster</u> is the fastest way to
|
||||
get a software engineering job. <u>Check it out for free!</u>
|
||||
</p>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function Moonchaser({ position }) {
|
||||
return (
|
||||
<a
|
||||
className={clsx(styles.container, styles.backgroundMoonchaser)}
|
||||
href={`https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}`}
|
||||
key={Math.random()}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
onClick={() => {
|
||||
window.gtag('event', `moonchaser.${position}.click`);
|
||||
}}>
|
||||
<p className={styles.tagline}>
|
||||
<strong className={styles.title}>
|
||||
Risk-free salary negotiation help
|
||||
</strong>{' '}
|
||||
Receive risk-free salary negotiation advice from <u>Moonchaser</u>. You
|
||||
pay nothing unless your offer is increased.{' '}
|
||||
<u>Book your free consultation today!</u>
|
||||
</p>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function DesignGurusCoding({ position }) {
|
||||
return (
|
||||
<a
|
||||
className={clsx(styles.container, styles.backgroundGrokkingCoding)}
|
||||
href="https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-coding-interview"
|
||||
key={Math.random()}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
onClick={() => {
|
||||
window.gtag('event', `designgurus.coding.${position}.click`);
|
||||
}}>
|
||||
<p className={styles.tagline}>
|
||||
<strong className={styles.title}>Stop memorizing solutions</strong>
|
||||
<u>Grokking the Coding Interview</u> teaches you techniques and question
|
||||
patterns to ace coding interviews. Grab your lifetime access today!
|
||||
</p>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function DesignGurusSystemDesign({ position }) {
|
||||
return (
|
||||
<a
|
||||
className={clsx(styles.container, styles.backgroundGrokkingSystemDesign)}
|
||||
href="https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-system-design-interview"
|
||||
key={Math.random()}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
onClick={() => {
|
||||
window.gtag('event', `designgurus.system_design.${position}.click`);
|
||||
}}>
|
||||
<p className={styles.tagline}>
|
||||
<strong className={styles.title}>Get the job at FAANG</strong>
|
||||
<u>Grokking the System Design Interview</u> is a highly recommended
|
||||
course to get better at system design interviews. <u>Find out more!</u>
|
||||
</p>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function ByteByteGoSystemDesign({ position }) {
|
||||
return (
|
||||
<a
|
||||
className={clsx(styles.container, styles.backgroundByteByteGo)}
|
||||
href="https://bytebytego.com?fpr=techinterviewhandbook"
|
||||
key={Math.random()}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
onClick={() => {
|
||||
window.gtag('event', `bytebytego.system_design.${position}.click`);
|
||||
}}>
|
||||
<p className={styles.tagline}>
|
||||
<strong className={styles.title}>
|
||||
Ace Your Next System Design Interview
|
||||
</strong>
|
||||
<u>ByteByteGo's</u> system design interview course is everything you
|
||||
need to take your system design skill to the next level.{' '}
|
||||
<u>Find out more!</u>
|
||||
</p>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function Interviewingio({ position }) {
|
||||
return (
|
||||
<a
|
||||
className={clsx(styles.container, styles.backgroundInterviewingio)}
|
||||
href="https://iio.sh/r/DMCa"
|
||||
key={Math.random()}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
onClick={() => {
|
||||
window.gtag('event', `interviewingio.${position}.click`);
|
||||
}}>
|
||||
<p className={styles.tagline}>
|
||||
<strong className={styles.title}>
|
||||
Practice interviewing with Google engineers
|
||||
</strong>
|
||||
<u>interviewing.io</u> provides anonymous technical mock interviews with
|
||||
engineers from Google, Facebook, and other top companies.{' '}
|
||||
<u>Give it a try!</u>
|
||||
</p>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(function SidebarAd({ position }) {
|
||||
const [counter, setCounter] = useState(0);
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setCounter((counter) => counter + 1);
|
||||
}, AD_REFRESH_RATE);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [counter]);
|
||||
|
||||
// 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 key={counter}>
|
||||
{() => {
|
||||
const rand = Math.random();
|
||||
const path = window.location.pathname;
|
||||
|
||||
// Ugly hack to show conditional sidebar content.
|
||||
if (
|
||||
(path.includes('software-engineering-interview-guide') ||
|
||||
path.includes('coding-interview-prep')) &&
|
||||
position === 'in_doc'
|
||||
) {
|
||||
return <GreatFrontEnd key={Math.random()} position={position} />;
|
||||
}
|
||||
|
||||
if (path.includes('resume')) {
|
||||
return <FAANGTechLeads key={Math.random()} position={position} />;
|
||||
}
|
||||
|
||||
if (path.includes('negotiation') || path.includes('compensation')) {
|
||||
return <Moonchaser key={Math.random()} position={position} />;
|
||||
}
|
||||
|
||||
if (path.includes('system-design')) {
|
||||
return rand < 0.5 ? (
|
||||
<ByteByteGoSystemDesign key={Math.random()} position={position} />
|
||||
) : (
|
||||
<DesignGurusSystemDesign key={Math.random()} position={position} />
|
||||
);
|
||||
}
|
||||
|
||||
// if (
|
||||
// path.includes('coding') ||
|
||||
// path.includes('best-practice-questions') ||
|
||||
// path.includes('mock-interviews') ||
|
||||
// path.includes('algorithms')
|
||||
// ) {
|
||||
// return rand < 0.3 ? (
|
||||
// <Interviewingio key={Math.random()} position={position} />
|
||||
// ) : rand < 0.6 ? (
|
||||
// <AlgoMonster key={Math.random()} position={position} />
|
||||
// ) : (
|
||||
// <DesignGurusCoding key={Math.random()} position={position} />
|
||||
// );
|
||||
// }
|
||||
|
||||
return rand < 0.5 ? (
|
||||
<FAANGTechLeads key={Math.random()} position={position} />
|
||||
) : rand < 0.75 ? (
|
||||
<AlgoMonster key={Math.random()} position={position} />
|
||||
) : (
|
||||
<DesignGurusCoding key={Math.random()} position={position} />
|
||||
);
|
||||
}}
|
||||
</BrowserOnly>
|
||||
);
|
||||
});
|
||||
79
apps/website/src/components/SidebarAd/styles.module.css
Normal file
79
apps/website/src/components/SidebarAd/styles.module.css
Normal file
@@ -0,0 +1,79 @@
|
||||
.container {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
color: #fff;
|
||||
display: block;
|
||||
opacity: 0.9;
|
||||
padding: 1rem;
|
||||
transition: opacity var(--ifm-transition-fast)
|
||||
var(--ifm-transition-timing-default);
|
||||
}
|
||||
|
||||
.container:hover {
|
||||
color: #fff !important;
|
||||
opacity: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.backgroundFTL {
|
||||
background-color: rgb(244, 63, 94);
|
||||
}
|
||||
|
||||
.backgroundGreatFrontEnd {
|
||||
background-color: rgb(79, 70, 229);
|
||||
}
|
||||
|
||||
.backgroundGrokkingCoding {
|
||||
background-color: #6fc8cc;
|
||||
color: #083436 !important;
|
||||
}
|
||||
|
||||
.backgroundGrokkingCoding:hover {
|
||||
color: #083436 !important;
|
||||
}
|
||||
|
||||
.backgroundGrokkingSystemDesign {
|
||||
background-color: #58527b;
|
||||
}
|
||||
|
||||
.backgroundMoonchaser {
|
||||
background-color: #1574f9;
|
||||
}
|
||||
|
||||
.backgroundAlgoMonster {
|
||||
background-image: linear-gradient(270deg, #3e1792, #6a45b9);
|
||||
}
|
||||
|
||||
.backgroundInterviewingio {
|
||||
background-color: #ffd829;
|
||||
color: rgb(10, 10, 10) !important;
|
||||
}
|
||||
|
||||
.backgroundInterviewingio:hover {
|
||||
color: rgb(10, 10, 10) !important;
|
||||
}
|
||||
|
||||
.backgroundByteByteGo {
|
||||
background-color: #35cea0;
|
||||
color: rgb(10, 10, 10);
|
||||
}
|
||||
|
||||
.backgroundByteByteGo:hover {
|
||||
color: rgb(10, 10, 10);
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 0.75rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 96px;
|
||||
}
|
||||
Reference in New Issue
Block a user