website: upgrade to docusaurus@2.0.0-beta.18

website/docusaurus.config.js

@@ -125,7 +125,8 @@ module.exports = {
       ],
     },
     algolia: {
-      apiKey: '6c13c369e8d9809cebb5c51330c914c3',
+      appId: '21T5PEFGI7',
+      apiKey: '10d7777b44bc7e0495cc00e860918b03',
       indexName: 'frontendinterviewhandbook',
     },
   },

website/package.json

@@ -11,9 +11,9 @@
     "deploy": "docusaurus deploy"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-beta.14",
-    "@docusaurus/plugin-client-redirects": "^2.0.0-beta.14",
-    "@docusaurus/preset-classic": "^2.0.0-beta.14",
+    "@docusaurus/core": "^2.0.0-beta.18",
+    "@docusaurus/plugin-client-redirects": "^2.0.0-beta.18",
+    "@docusaurus/preset-classic": "^2.0.0-beta.18",
     "classnames": "^2.2.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

website/src/components/CarbonAd/index.js

@@ -1,48 +0,0 @@
-import React, {useEffect, useRef} from 'react';
-
-// Credits: https://github.com/tannerlinsley/react-query/blob/master/docs/src/components/CarbonAds.js
-function buildScript(src, attrs = {}) {
-  if (typeof document !== 'undefined') {
-    const script = document.createElement('script');
-    script.async = true;
-    script.defer = true;
-    script.src = src;
-    Object.keys(attrs).forEach((attr) =>
-      script.setAttribute(attr, attrs[attr]),
-    );
-
-    return script;
-  }
-}
-
-export default React.memo(() => {
-  const ref = useRef();
-
-  useEffect(() => {
-    const script = buildScript(
-      '//cdn.carbonads.com/carbon.js?serve=CEAI6K3W&placement=wwwfrontendinterviewhandbookcom',
-      {
-        type: 'text/javascript',
-        id: '_carbonads_js',
-      },
-    );
-
-    ref.current.appendChild(script);
-  }, []);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      [...ref.current.children].forEach((child) => {
-        if (child && child.id && child.id.startsWith('carbonads_')) {
-          ref.current.removeChild(child);
-        }
-      });
-    }, 100);
-
-    return () => {
-      clearInterval(interval);
-    };
-  });
-
-  return <div ref={ref} />;
-});

website/src/pages/index.js

@@ -8,7 +8,6 @@ import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
 
 import successStories from '@site/src/data/successStories';
-import CarbonAd from '../components/CarbonAd';
 
 export default function Home() {
   const {siteConfig = {}} = useDocusaurusContext();
@@ -20,7 +19,6 @@ export default function Home() {
       <div>
         <HeroSection />
         <EducativeSection />
-        <CarbonAdSection />
         <FeaturesSection />
         <TweetsSection />
         <MoonchaserSection />
@@ -76,32 +74,13 @@ function HeroSection() {
   );
 }
 
-function CarbonAdSection() {
-  return (
-    <div className={classnames('padding-vert--lg', styles.sectionAlt)}>
-      <div className="container">
-        <div className="row">
-          <div className="col col--8 col--offset-2">
-            <CarbonAd />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
 function MoonchaserSection() {
   /* 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>
       {() => (
-        <div
-          className={classnames(
-            'margin-bottom--lg',
-            'padding-vert--lg',
-            styles.sectionSponsor,
-          )}>
+        <div className={classnames('padding-vert--lg', styles.sectionSponsor)}>
           <div className="container">
             <div className="row">
               <div className="col col--8 col--offset-2">

website/src/theme/DocSidebar/index.js

@@ -1,126 +0,0 @@
-import React, {useState} from 'react';
-import clsx from 'clsx';
-import {
-  useThemeConfig,
-  useAnnouncementBar,
-  MobileSecondaryMenuFiller,
-  ThemeClassNames,
-  useScrollPosition,
-} from '@docusaurus/theme-common';
-import useWindowSize from '@theme/hooks/useWindowSize';
-import Logo from '@theme/Logo';
-import IconArrow from '@theme/IconArrow';
-import {translate} from '@docusaurus/Translate';
-import {DocSidebarItems} from '@theme/DocSidebarItem';
-import styles from './styles.module.css';
-import SidebarAd from '../../components/SidebarAd';
-import CarbonAd from '../../components/CarbonAd';
-
-function useShowAnnouncementBar() {
-  const {isActive} = useAnnouncementBar();
-  const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive);
-  useScrollPosition(
-    ({scrollY}) => {
-      if (isActive) {
-        setShowAnnouncementBar(scrollY === 0);
-      }
-    },
-    [isActive],
-  );
-  return isActive && showAnnouncementBar;
-}
-
-function HideableSidebarButton({onClick}) {
-  return (
-    <button
-      type="button"
-      title={translate({
-        id: 'theme.docs.sidebar.collapseButtonTitle',
-        message: 'Collapse sidebar',
-        description: 'The title attribute for collapse button of doc sidebar',
-      })}
-      aria-label={translate({
-        id: 'theme.docs.sidebar.collapseButtonAriaLabel',
-        message: 'Collapse sidebar',
-        description: 'The title attribute for collapse button of doc sidebar',
-      })}
-      className={clsx(
-        'button button--secondary button--outline',
-        styles.collapseSidebarButton,
-      )}
-      onClick={onClick}>
-      <IconArrow className={styles.collapseSidebarButtonIcon} />
-    </button>
-  );
-}
-
-function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
-  const showAnnouncementBar = useShowAnnouncementBar();
-  const {
-    navbar: {hideOnScroll},
-    hideableSidebar,
-  } = useThemeConfig();
-  return (
-    <div
-      className={clsx(styles.sidebar, {
-        [styles.sidebarWithHideableNavbar]: hideOnScroll,
-        [styles.sidebarHidden]: isHidden,
-      })}>
-      {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
-      <nav
-        className={clsx('menu thin-scrollbar', styles.menu, {
-          [styles.menuWithAnnouncementBar]: showAnnouncementBar,
-        })}>
-        <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
-          <DocSidebarItems items={sidebar} activePath={path} level={1} />
-        </ul>
-        <div className="margin-vert--md">
-          <CarbonAd key={path} />
-        </div>
-      </nav>
-      {hideableSidebar && <HideableSidebarButton onClick={onCollapse} />}
-    </div>
-  );
-}
-
-const DocSidebarMobileSecondaryMenu = ({toggleSidebar, sidebar, path}) => {
-  return (
-    <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
-      <DocSidebarItems
-        items={sidebar}
-        activePath={path}
-        onItemClick={() => toggleSidebar()}
-        level={1}
-      />
-      <div className="margin--md">
-        <SidebarAd position="mobile_sidebar" />
-      </div>
-    </ul>
-  );
-};
-
-function DocSidebarMobile(props) {
-  return (
-    <MobileSecondaryMenuFiller
-      component={DocSidebarMobileSecondaryMenu}
-      props={props}
-    />
-  );
-}
-
-const DocSidebarDesktopMemo = React.memo(DocSidebarDesktop);
-const DocSidebarMobileMemo = React.memo(DocSidebarMobile);
-export default function DocSidebar(props) {
-  const windowSize = useWindowSize(); // Desktop sidebar visible on hydration: need SSR rendering
-
-  const shouldRenderSidebarDesktop =
-    windowSize === 'desktop' || windowSize === 'ssr'; // Mobile sidebar not visible on hydration: can avoid SSR rendering
-
-  const shouldRenderSidebarMobile = windowSize === 'mobile';
-  return (
-    <>
-      {shouldRenderSidebarDesktop && <DocSidebarDesktopMemo {...props} />}
-      {shouldRenderSidebarMobile && <DocSidebarMobileMemo {...props} />}
-    </>
-  );
-}

website/src/theme/DocSidebar/styles.module.css

@@ -1,99 +0,0 @@
-:root {
-  --collapse-button-bg-color-dark: #2e333a;
-}
-
-@media (min-width: 997px) {
-  .sidebar {
-    display: flex;
-    flex-direction: column;
-    max-height: 100vh;
-    height: 100%;
-    position: sticky;
-    top: 0;
-    padding-top: var(--ifm-navbar-height);
-    width: var(--doc-sidebar-width);
-    transition: opacity 50ms ease;
-  }
-
-  .sidebarWithHideableNavbar {
-    padding-top: 0;
-  }
-
-  .sidebarHidden {
-    opacity: 0;
-    height: 0;
-    overflow: hidden;
-    visibility: hidden;
-  }
-
-  .sidebarLogo {
-    display: flex !important;
-    align-items: center;
-    margin: 0 var(--ifm-navbar-padding-horizontal);
-    min-height: var(--ifm-navbar-height);
-    max-height: var(--ifm-navbar-height);
-    color: inherit !important;
-    text-decoration: none !important;
-  }
-
-  .sidebarLogo img {
-    margin-right: 0.5rem;
-    height: 2rem;
-  }
-
-  .menu {
-    flex-grow: 1;
-    padding: 0.5rem;
-  }
-
-  .menuWithAnnouncementBar {
-    margin-bottom: var(--docusaurus-announcement-bar-height);
-  }
-
-  .collapseSidebarButton {
-    display: block !important;
-    background-color: var(--ifm-button-background-color);
-    height: 40px;
-    position: sticky;
-    bottom: 0;
-    border-radius: 0;
-    border: 1px solid var(--ifm-toc-border-color);
-  }
-
-  .collapseSidebarButtonIcon {
-    transform: rotate(180deg);
-    margin-top: 4px;
-  }
-  html[dir='rtl'] .collapseSidebarButtonIcon {
-    transform: rotate(0);
-  }
-
-  html[data-theme='dark'] .collapseSidebarButton {
-    background-color: var(--collapse-button-bg-color-dark);
-  }
-
-  html[data-theme='dark'] .collapseSidebarButton:hover,
-  html[data-theme='dark'] .collapseSidebarButton:focus {
-    background-color: var(--ifm-color-emphasis-200);
-  }
-}
-
-.sidebarLogo,
-.collapseSidebarButton {
-  display: none;
-}
-
-.sidebarMenuIcon {
-  vertical-align: middle;
-}
-
-.sidebarMenuCloseIcon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  height: 24px;
-  font-size: 1.5rem;
-  font-weight: var(--ifm-font-weight-bold);
-  line-height: 0.9;
-  width: 24px;
-}