website: upgrade to docusaurus@2.0.0-rc-1

contents/resume.md

@@ -12,7 +12,7 @@ Resumes are often overlooked in the job application process, but extremely impor
 
 ### 1. Use resume templates
 
-Why waste time creating your own resume from scratch when you can use a template?! There are many free resume templates you can find online, or you can just purchase quality ones. [FAANG Tech Leads](https://www.faangtechleads.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=ats_template&aff=1e80c401fe7e2) is currently offering resume templates and references at **70% off**.
+Why waste time creating your own resume from scratch when you can use a template?! There are many free resume templates you can find online, or you can just purchase quality ones. [FAANG Tech Leads](https://www.faangtechleads.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=ats_template&aff=1e80c401fe7e2) is currently offering resume templates and references at **70% off**.
 
 Their templates:
 
@@ -20,7 +20,7 @@ Their templates:
 - Guarantee readability by FAANG ATS
 - Cater to various experience levels
 
-They also offer resume examples/references from candidates who have received multiple offers from FAANG companies - which are helpful in helping you craft content that meets the same bar. [Check it out](https://www.faangtechleads.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=ats_template&aff=1e80c401fe7e2)!
+They also offer resume examples/references from candidates who have received multiple offers from FAANG companies - which are helpful in helping you craft content that meets the same bar. [Check it out](https://www.faangtechleads.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=ats_template&aff=1e80c401fe7e2)!
 
 ### 2. Test readability with industry-standard ATS
 

website/package.json

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

website/src/theme/DocItem/Content/index.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/theme-common/internal';
+import Heading from '@theme/Heading';
+import MDXContent from '@theme/MDXContent';
+/**
+ Title can be declared inside md content or declared through
+ front matter and added manually. To make both cases consistent,
+ the added title is added under the same div.markdown block
+ See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
+
+ We render a "synthetic title" if:
+ - user doesn't ask to hide it with front matter
+ - the markdown content does not already contain a top-level h1 heading
+*/
+function useSyntheticTitle() {
+  const {metadata, frontMatter, contentTitle} = useDoc();
+  const shouldRender =
+    !frontMatter.hide_title && typeof contentTitle === 'undefined';
+  if (!shouldRender) {
+    return null;
+  }
+  return metadata.title;
+}
+export default function DocItemContent({children}) {
+  const syntheticTitle = useSyntheticTitle();
+  return (
+    <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
+      {syntheticTitle && (
+        <header>
+          <Heading as="h1">{syntheticTitle}</Heading>
+        </header>
+      )}
+      <div className="margin-bottom--lg">
+        <iframe
+          src="https://ghbtns.com/github-btn.html?user=yangshun&amp;repo=front-end-interview-handbook&amp;type=star&amp;count=true&amp;size=large"
+          frameBorder={0}
+          width={160}
+          height={30}
+          title="GitHub Stars"
+        />
+      </div>
+      <MDXContent>{children}</MDXContent>
+    </div>
+  );
+}

website/src/theme/DocItem/Layout/index.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useWindowSize} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/theme-common/internal';
+import DocItemPaginator from '@theme/DocItem/Paginator';
+import DocVersionBanner from '@theme/DocVersionBanner';
+import DocVersionBadge from '@theme/DocVersionBadge';
+import DocItemFooter from '@theme/DocItem/Footer';
+import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
+import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
+import DocItemContent from '@theme/DocItem/Content';
+import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import styles from './styles.module.css';
+import SidebarAd from '../../../components/SidebarAd';
+
+/**
+ * Decide if the toc should be rendered, on mobile or desktop viewports
+ */
+function useDocTOC() {
+  const {frontMatter, toc} = useDoc();
+  const windowSize = useWindowSize();
+  const hidden = frontMatter.hide_table_of_contents;
+  const canRender = !hidden && toc.length > 0;
+  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
+  const desktop =
+    canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
+      <DocItemTOCDesktop />
+    ) : undefined;
+  return {
+    hidden,
+    mobile,
+    desktop,
+  };
+}
+export default function DocItemLayout({children}) {
+  const docTOC = useDocTOC();
+  return (
+    <div className="row">
+      <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
+        <DocVersionBanner />
+        <div className={styles.docItemContainer}>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
+            {docTOC.mobile}
+            <DocItemContent>{children}</DocItemContent>
+            <DocItemFooter />
+          </article>
+          <DocItemPaginator />
+          {/* TIH: Add sidebar */}
+          <div className="margin-top--md">
+            <SidebarAd position="docs_bottom" />
+          </div>
+        </div>
+      </div>
+      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+    </div>
+  );
+}

website/src/theme/DocItem/Layout/styles.module.css

@@ -0,0 +1,17 @@
+/* TIH: Add horizontal padding */
+@media (min-width: 768px) {
+  .docItemContainer {
+    padding: 0 3rem;
+  }
+}
+
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+@media (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}

website/src/theme/DocPaginator/index.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import DocPaginator from '@theme-original/DocPaginator';
-import SidebarAd from '../../components/SidebarAd';
-
-export default function DocPaginatorWrapper(props) {
-  return (
-    <>
-      <DocPaginator {...props} />
-      <div className="margin-top--md">
-        <SidebarAd position="docs_bottom" />
-      </div>
-    </>
-  );
-}

website/src/theme/DocSidebar/Mobile/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { Props } from '@theme/DocSidebar/Mobile';
+declare function DocSidebarMobile(props: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof DocSidebarMobile>;
+export default _default;

website/src/theme/DocSidebar/Mobile/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import clsx from 'clsx';
+import {
+  NavbarSecondaryMenuFiller,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import DocSidebarItems from '@theme/DocSidebarItems';
+import SidebarAd from '../../../components/SidebarAd';
+// eslint-disable-next-line react/function-component-definition
+const DocSidebarMobileSecondaryMenu = ({sidebar, path}) => {
+  const mobileSidebar = useNavbarMobileSidebar();
+  return (
+    <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+      <DocSidebarItems
+        items={sidebar}
+        activePath={path}
+        onItemClick={(item) => {
+          // Mobile sidebar should only be closed if the category has a link
+          if (item.type === 'category' && item.href) {
+            mobileSidebar.toggle();
+          }
+          if (item.type === 'link') {
+            mobileSidebar.toggle();
+          }
+        }}
+        level={1}
+      />
+      {/* TIH: Add SidebarAd */}
+      <div className="margin--md">
+        <SidebarAd position="mobile_sidebar" />
+      </div>
+    </ul>
+  );
+};
+function DocSidebarMobile(props) {
+  return (
+    <NavbarSecondaryMenuFiller
+      component={DocSidebarMobileSecondaryMenu}
+      props={props}
+    />
+  );
+}
+export default React.memo(DocSidebarMobile);

website/src/theme/DocSidebarItem/index.js

@@ -1,175 +0,0 @@
-import React, {useEffect, memo} from 'react';
-import clsx from 'clsx';
-import {
-  isSamePath,
-  usePrevious,
-  Collapsible,
-  useCollapsible,
-  ThemeClassNames,
-} from '@docusaurus/theme-common';
-import Link from '@docusaurus/Link';
-import isInternalUrl from '@docusaurus/isInternalUrl';
-import IconExternalLink from '@theme/IconExternalLink';
-import styles from './styles.module.css';
-
-const isActiveSidebarItem = (item, activePath) => {
-  if (item.type === 'link') {
-    return isSamePath(item.href, activePath);
-  }
-
-  if (item.type === 'category') {
-    return item.items.some((subItem) =>
-      isActiveSidebarItem(subItem, activePath),
-    );
-  }
-
-  return false;
-}; // Optimize sidebar at each "level"
-// TODO this item should probably not receive the "activePath" props
-// TODO this triggers whole sidebar re-renders on navigation
-
-export const DocSidebarItems = memo(function DocSidebarItems({
-  items,
-  ...props
-}) {
-  return (
-    <>
-      {items.map((item, index) => (
-        <DocSidebarItem
-          key={index} // sidebar is static, the index does not change
-          item={item}
-          {...props}
-        />
-      ))}
-    </>
-  );
-});
-export default function DocSidebarItem({item, ...props}) {
-  switch (item.type) {
-    case 'category':
-      if (item.items.length === 0) {
-        return null;
-      }
-
-      return <DocSidebarItemCategory item={item} {...props} />;
-
-    case 'link':
-    default:
-      return <DocSidebarItemLink item={item} {...props} />;
-  }
-} // If we navigate to a category and it becomes active, it should automatically expand itself
-
-function useAutoExpandActiveCategory({isActive, collapsed, setCollapsed}) {
-  const wasActive = usePrevious(isActive);
-  useEffect(() => {
-    const justBecameActive = isActive && !wasActive;
-
-    if (justBecameActive && collapsed) {
-      setCollapsed(false);
-    }
-  }, [isActive, wasActive, collapsed]);
-}
-
-function DocSidebarItemCategory({
-  item,
-  onItemClick,
-  activePath,
-  level,
-  ...props
-}) {
-  const {items, label, collapsible, className} = item;
-  const isActive = isActiveSidebarItem(item, activePath);
-  const {collapsed, setCollapsed, toggleCollapsed} = useCollapsible({
-    // active categories are always initialized as expanded
-    // the default (item.collapsed) is only used for non-active categories
-    initialState: () => {
-      if (!collapsible) {
-        return false;
-      }
-
-      return isActive ? false : item.collapsed;
-    },
-  });
-  useAutoExpandActiveCategory({
-    isActive,
-    collapsed,
-    setCollapsed,
-  });
-  return (
-    <li
-      className={clsx(
-        ThemeClassNames.docs.docSidebarItemCategory,
-        ThemeClassNames.docs.docSidebarItemCategoryLevel(level),
-        'menu__list-item',
-        {
-          'menu__list-item--collapsed': collapsed,
-        },
-        className,
-      )}>
-      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-      <a
-        className={clsx('menu__link', {
-          'menu__link--sublist': collapsible,
-          'menu__link--active': collapsible && isActive,
-          [styles.menuLinkText]: !collapsible,
-        })}
-        onClick={
-          collapsible
-            ? (e) => {
-                e.preventDefault();
-                toggleCollapsed();
-              }
-            : undefined
-        }
-        href={collapsible ? '#' : undefined}
-        {...props}>
-        {label}
-      </a>
-
-      <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
-        <DocSidebarItems
-          items={items}
-          tabIndex={collapsed ? -1 : 0}
-          onItemClick={onItemClick}
-          activePath={activePath}
-          level={level + 1}
-        />
-      </Collapsible>
-    </li>
-  );
-}
-
-function DocSidebarItemLink({item, onItemClick, activePath, level, ...props}) {
-  const {href, label, className} = item;
-  const isActive = isActiveSidebarItem(item, activePath);
-  return (
-    <li
-      className={clsx(
-        ThemeClassNames.docs.docSidebarItemLink,
-        ThemeClassNames.docs.docSidebarItemLinkLevel(level),
-        'menu__list-item',
-        className,
-      )}
-      key={label}>
-      <Link
-        className={clsx('menu__link', {
-          'menu__link--active': isActive,
-        })}
-        aria-current={isActive ? 'page' : undefined}
-        to={href}
-        {...(isInternalUrl(href) && {
-          onClick: onItemClick,
-        })}
-        {...props}>
-        {isInternalUrl(href) ? (
-          label
-        ) : (
-          <span>
-            {label}
-            <IconExternalLink />
-          </span>
-        )}
-      </Link>
-    </li>
-  );
-}

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

@@ -1,8 +0,0 @@
-@media (min-width: 997px) {
-  .menuLinkText {
-    cursor: initial;
-  }
-  .menuLinkText:hover {
-    background: none;
-  }
-}

website/src/theme/TOC/index.js

@@ -14,44 +14,21 @@ function TOC({className, ...props}) {
       <div className="margin--md">
         <SidebarAd position="table_of_contents" />
       </div>
+      <h3
+        className="padding-left--md padding-top--md margin-bottom--none"
+        style={{
+          textTransform: 'uppercase',
+          fontSize: '0.75em',
+          color: 'var(--ifm-color-emphasis-700)',
+          letterSpacing: '0.5px',
+        }}>
+        Table of Contents
+      </h3>
       <TOCItems
         {...props}
         linkClassName={LINK_CLASS_NAME}
         linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
       />
-      <div className="margin--md">
-        <iframe
-          src="https://ghbtns.com/github-btn.html?user=yangshun&amp;repo=front-end-interview-handbook&amp;type=star&amp;count=true&amp;size=large"
-          frameBorder={0}
-          scrolling={0}
-          width={165}
-          height={30}
-          title="GitHub Stars"
-        />
-        <div
-          className={clsx(
-            'margin-top--md padding--md',
-            styles.socialLinksContainer,
-          )}>
-          <div className={styles.socialLinks}>
-            Follow us
-            <a
-              href="https://twitter.com/techinterviewhb"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="navbar-icon navbar-icon-twitter"
-              aria-label="Twitter"
-            />
-            <a
-              href="https://www.facebook.com/techinterviewhandbook"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="navbar-icon navbar-icon-facebook"
-              aria-label="Facebook page"
-            />
-          </div>
-        </div>
-      </div>
     </div>
   );
 }