website: upgrade to docusaurus@2.0.0-beta.18

node_modules/.yarn-integrity

@@ -0,0 +1,10 @@
+{
+  "systemParams": "win32-x64-93",
+  "modulesFolders": [],
+  "flags": [],
+  "linkedModules": [],
+  "topLevelPatterns": [],
+  "lockfileEntries": {},
+  "files": [],
+  "artifacts": {}
+}

website/docusaurus.config.js

@@ -155,6 +155,7 @@ module.exports = {
       ],
     },
     algolia: {
+      appId: 'Y09P1J4IPV',
       apiKey: '4dabb055be464346fcb6877f086f08e8',
       indexName: 'techinterviewhandbook',
     },

website/package.json

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

website/src/theme/DocItem/index.js

@@ -1,96 +1,113 @@
+// Swizzled to make TOC column wider.
 import React from 'react';
 import clsx from 'clsx';
 import DocPaginator from '@theme/DocPaginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
-import Seo from '@theme/Seo';
 import DocItemFooter from '@theme/DocItemFooter';
 import TOC from '@theme/TOC';
 import TOCCollapsible from '@theme/TOCCollapsible';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
-import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  useWindowSize,
+} from '@docusaurus/theme-common';
+import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import MDXContent from '@theme/MDXContent';
+
 import SidebarAd from '../../components/SidebarAd';
 
-export default function DocItem(props) {
+function DocItemMetadata(props) {
+  const {content: DocContent} = props;
+  const {metadata, frontMatter, assets} = DocContent;
+  const {keywords} = frontMatter;
+  const {description, title} = metadata;
+  const image = assets.image ?? frontMatter.image;
+  return (
+    <PageMetadata
+      {...{
+        title,
+        description,
+        keywords,
+        image,
+      }}
+    />
+  );
+}
+
+function DocItemContent(props) {
   const {content: DocContent} = props;
   const {metadata, frontMatter} = DocContent;
   const {
-    image,
-    keywords,
     hide_title: hideTitle,
     hide_table_of_contents: hideTableOfContents,
     toc_min_heading_level: tocMinHeadingLevel,
     toc_max_heading_level: tocMaxHeadingLevel,
   } = frontMatter;
-  const {description, title} = metadata; // We only add a title if:
+  const {title} = metadata; // We only add a title if:
   // - user asks to hide it with front matter
   // - the markdown content does not already contain a top-level h1 heading
 
   const shouldAddTitle =
     !hideTitle && typeof DocContent.contentTitle === 'undefined';
-  // const windowSize = useWindowSize();
+  const windowSize = useWindowSize();
   const canRenderTOC =
     !hideTableOfContents && DocContent.toc && DocContent.toc.length > 0;
-  // const renderTocDesktop =
+  const renderTocDesktop =
-  //   canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
+    canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
   return (
-    <>
+    <div className="row">
-      <Seo
+      <div className={clsx('col', !hideTableOfContents && styles.docItemCol)}>
-        {...{
+        <DocVersionBanner />
-          title,
+        <div className={styles.docItemContainer}>
-          description,
+          <article>
-          keywords,
+            <DocBreadcrumbs />
-          image,
+            <DocVersionBadge />
-        }}
-      />
 
-      <div className="row">
+            {canRenderTOC && (
-        <div
+              <TOCCollapsible
-          className={clsx('col', {
+                toc={DocContent.toc}
-            [styles.docItemCol]: !hideTableOfContents,
+                minHeadingLevel={tocMinHeadingLevel}
-          })}>
+                maxHeadingLevel={tocMaxHeadingLevel}
-          <DocVersionBanner />
+                className={clsx(
-          <div className={styles.docItemContainer}>
+                  ThemeClassNames.docs.docTocMobile,
-            <article>
+                  styles.tocMobile,
-              <DocVersionBadge />
-              {canRenderTOC && (
-                <TOCCollapsible
-                  toc={DocContent.toc}
-                  minHeadingLevel={tocMinHeadingLevel}
-                  maxHeadingLevel={tocMaxHeadingLevel}
-                  className={clsx(
-                    ThemeClassNames.docs.docTocMobile,
-                    styles.tocMobile,
-                  )}
-                />
-              )}
-              <div
-                className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
-                {/*
-                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
-                */}
-                {shouldAddTitle && (
-                  <header>
-                    <Heading as="h1">{title}</Heading>
-                  </header>
                 )}
+              />
+            )}
+
+            <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
+              {/*
+               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
+               */}
+              {shouldAddTitle && (
+                <header>
+                  <Heading as="h1">{title}</Heading>
+                </header>
+              )}
+              <div className="margin-bottom--lg">
                 <DocItemFooter {...props} />
-                <div className="margin-top--md">
-                  <DocContent />
-                </div>
               </div>
-            </article>
+              <MDXContent>
-            <DocPaginator previous={metadata.previous} next={metadata.next} />
+                <DocContent />
-            <div className="margin-top--md">
+              </MDXContent>
-              <SidebarAd position="docs_bottom" />
             </div>
+          </article>
+
+          <DocPaginator previous={metadata.previous} next={metadata.next} />
+          <div className="margin-top--md">
+            <SidebarAd position="docs_bottom" />
           </div>
         </div>
+      </div>
+      {renderTocDesktop && (
         <div className="col col--4">
-          {/* Change it such that sidebar ad is shown regardless whether there's a TOC */}
           <TOC
             toc={DocContent.toc}
             minHeadingLevel={tocMinHeadingLevel}
@@ -98,7 +115,17 @@ export default function DocItem(props) {
             className={ThemeClassNames.docs.docTocDesktop}
           />
         </div>
-      </div>
+      )}
-    </>
+    </div>
+  );
+}
+
+export default function DocItem(props) {
+  const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
+  return (
+    <HtmlClassNameProvider className={docHtmlClassName}>
+      <DocItemMetadata {...props} />
+      <DocItemContent {...props} />
+    </HtmlClassNameProvider>
   );
 }

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

@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 .docItemContainer header + *,
 .docItemContainer article > *:first-child {
   margin-top: 0;

website/src/theme/DocPaginator/index.js

@@ -1,3 +1,4 @@
+// Swizzled to remove the prev button.
 import React from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
 import PaginatorNavLink from '@theme/PaginatorNavLink';

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

@@ -0,0 +1,49 @@
+// Swizzled to add sidebar ad below mobile nav items.
+import React from 'react';
+import clsx from 'clsx';
+import {
+  NavbarSecondaryMenuFiller,
+  ThemeClassNames,
+  useNavbarMobileSidebar,
+} from '@docusaurus/theme-common';
+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}
+      />
+      <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/DocSidebar/index.js

@@ -1,123 +0,0 @@
-import React, {useState} from 'react';
-import clsx from 'clsx';
-import {
-  useThemeConfig,
-  useAnnouncementBar,
-  MobileSecondaryMenuFiller,
-  ThemeClassNames,
-  useScrollPosition,
-  useWindowSize,
-} from '@docusaurus/theme-common';
-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>
-      </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;
-}

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/PaginatorNavLink/index.js

@@ -1,3 +1,4 @@
+// Swizzled to change the appearance of a paginator nav link.
 import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+