misc: fix JS errors

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} />

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>

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);
         }
       });

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(

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>