From bc695b5d1e3e47d32b49b0b9381d9ad8a22d1795 Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Sun, 27 Mar 2022 13:38:47 +0800
Subject: [PATCH] misc: fix JS errors

---
 contents/landscape.md                    |  2 +-
 contents/resume-case-study.md            |  8 ++++----
 website/src/components/CarbonAd/index.js |  2 +-
 website/src/pages/index.js               | 17 +++++++++--------
 website/src/theme/TOC/index.js           |  6 +++---
 5 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/contents/landscape.md b/contents/landscape.md
index 61c8555d..3a3fc321 100644
--- a/contents/landscape.md
+++ b/contents/landscape.md
@@ -37,7 +37,7 @@ Top tech companies pay a ridiculous amount even for junior candidates:
 
 ### United States
 
-<div class="text--center">
+<div className="text--center">
 
 <figure>
 <img alt="Salaries of top tech internships in 2016" src={InternshipSalariesURL} />
diff --git a/contents/resume-case-study.md b/contents/resume-case-study.md
index dfbe7029..836d2c19 100644
--- a/contents/resume-case-study.md
+++ b/contents/resume-case-study.md
@@ -10,9 +10,9 @@ To put the points mentioned in the [previous section](./resume.md) in practice.
 
 Here's the initial version of Teik Jun's resume I received from him.
 
-<div class="text--center">
+<div className="text--center">
   <figure>
-    <img alt="Teik Jun's initial resume" class="shadow--md" src={TeikjunResumeOldURL} />
+    <img alt="Teik Jun's initial resume" className="shadow--md" src={TeikjunResumeOldURL} />
     <figcaption>Teik Jun's initial resume</figcaption>
   </figure>
 </div>
@@ -52,9 +52,9 @@ Here's an improved version of Teik Jun's resume which I feel which better highli
 
 In my opinion, this improved resume is sure to capture the eyes of any recruiter in the world!
 
-<div class="text--center">
+<div className="text--center">
   <figure>
-    <img alt="Teik Jun's improved resume" class="shadow--md" src={TeikjunResumeNewURL} />
+    <img alt="Teik Jun's improved resume" className="shadow--md" src={TeikjunResumeNewURL} />
     <figcaption>Teik Jun's improved resume</figcaption>
   </figure>
 </div>
diff --git a/website/src/components/CarbonAd/index.js b/website/src/components/CarbonAd/index.js
index 459e4386..7789c1e7 100644
--- a/website/src/components/CarbonAd/index.js
+++ b/website/src/components/CarbonAd/index.js
@@ -33,7 +33,7 @@ export default React.memo(() => {
   useEffect(() => {
     const interval = setInterval(() => {
       [...ref.current.children].forEach((child) => {
-        if (child.id.startsWith('carbonads_')) {
+        if (child && child.id && child.id.startsWith('carbonads_')) {
           ref.current.removeChild(child);
         }
       });
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index c43a622e..a1a114a3 100755
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -173,7 +173,7 @@ function WhatIsThisSection() {
         <div className="row">
           <div className="col col--8 col--offset-2">
             <h2 className="text--center margin-bottom--lg">
-              <span class="badge badge--primary">What is this</span>
+              <span className="badge badge--primary">What is this</span>
             </h2>
             <h3
               className={classnames(
@@ -285,8 +285,8 @@ function HowToUseStep({index, title, ctaLink, contents}) {
           ))}
         </ul>
       </div>
-      <div class="card__footer">
-        <Link class="button button--primary button--block" to={ctaLink}>
+      <div className="card__footer">
+        <Link className="button button--primary button--block" to={ctaLink}>
           Read now →
         </Link>
       </div>
@@ -301,7 +301,7 @@ function HowToUseSection() {
         <div className="row">
           <div className="col col--10 col--offset-1">
             <h2 className="text--center margin-bottom--lg">
-              <span class="badge badge--primary">How to use</span>
+              <span className="badge badge--primary">How to use</span>
             </h2>
             <h3
               className={classnames(
@@ -406,7 +406,7 @@ function FeaturesSection() {
         <div className="row">
           <div className="col col--10 col--offset-1">
             <h2 className="text--center margin-bottom--lg">
-              <span class="badge badge--primary">Why this guide</span>
+              <span className="badge badge--primary">Why this guide</span>
             </h2>
             <h3
               className={classnames(
@@ -417,8 +417,9 @@ function FeaturesSection() {
               We have everything you need - all straight to the point
             </h3>
             <div className={classnames('row', styles.featuresRow)}>
-              {FEATURES.map(({title, description, link}) => (
+              {FEATURES.map(({title, description, link}, idx) => (
                 <div
+                  key={idx}
                   className={classnames(
                     'col',
                     'col--4',
@@ -715,7 +716,7 @@ function SuccessStoriesSection() {
         <div className="row">
           <div className="col col--6 col--offset-3">
             <h2 className="text--center margin-bottom--lg">
-              <span class="badge badge--primary">Success stories</span>
+              <span className="badge badge--primary">Success stories</span>
             </h2>
             <h3
               className={classnames(
@@ -762,7 +763,7 @@ function SponsorshipSection() {
         <div className="row">
           <div className="col col--8 col--offset-2">
             <h2 className="text--center margin-bottom--lg">
-              <span class="badge badge--primary">Advertise with us</span>
+              <span className="badge badge--primary">Advertise with us</span>
             </h2>
             <h3
               className={classnames(
diff --git a/website/src/theme/TOC/index.js b/website/src/theme/TOC/index.js
index d426ab98..ced0e805 100644
--- a/website/src/theme/TOC/index.js
+++ b/website/src/theme/TOC/index.js
@@ -31,21 +31,21 @@ function TOC({className, ...props}) {
               href="https://t.me/techinterviewhandbook"
               target="_blank"
               rel="noopener noreferrer"
-              class="navbar-icon navbar-icon-telegram"
+              className="navbar-icon navbar-icon-telegram"
               aria-label="Telegram channel"
             />
             <a
               href="https://twitter.com/techinterviewhb"
               target="_blank"
               rel="noopener noreferrer"
-              class="navbar-icon navbar-icon-twitter"
+              className="navbar-icon navbar-icon-twitter"
               aria-label="Twitter"
             />
             <a
               href="https://www.facebook.com/techinterviewhandbook"
               target="_blank"
               rel="noopener noreferrer"
-              class="navbar-icon navbar-icon-facebook"
+              className="navbar-icon navbar-icon-facebook"
               aria-label="Facebook page"
             />
           </div>