website: turn off client-side navigation

website/docusaurus.config.js

@@ -19,7 +19,7 @@ module.exports = {
         src: 'img/logo.svg',
       },
       items: [
-        {to: 'introduction', label: 'Getting Started', position: 'right'},
+        {href: '/introduction', label: 'Getting Started', position: 'right'},
         {to: 'blog', label: 'Blog', position: 'right'},
         {
           href: 'https://github.com/yangshun/tech-interview-handbook',

website/package.json

@@ -10,8 +10,8 @@
     "deploy": "docusaurus deploy"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-beta.0",
-    "@docusaurus/preset-classic": "^2.0.0-beta.0",
+    "@docusaurus/core": "^2.0.0-beta.4",
+    "@docusaurus/preset-classic": "^2.0.0-beta.4",
     "classnames": "^2.2.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

website/src/pages/index.js

@@ -26,14 +26,14 @@ function Home() {
             From the author of the <a href={BLIND_75_URL} target="_blank">Blind 75 List</a>
           </p>
           <div className={styles.buttons}>
-            <Link
+            <a
               className={classnames(
                 'button button--primary button--lg',
                 styles.getStarted,
               )}
-              to={useBaseUrl('introduction')}>
+              href={useBaseUrl('introduction')}>
               Get Started&nbsp;&nbsp;→
-            </Link>
+            </a>
           </div>
           <div className="margin-top--lg">
             <iframe

website/src/theme/DocPaginator/index.js

@@ -5,14 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Link from '@docusaurus/Link';
 import Translate, {translate} from '@docusaurus/Translate';
 
 function DocPaginator(props) {
   const {metadata} = props;
   return (
     <nav
-      className="pagination-nav"
+      className="pagination-nav docusaurus-mt-lg"
       aria-label={translate({
         id: 'theme.docs.paginator.navAriaLabel',
         message: 'Docs pages navigation',

website/src/theme/DocSidebarItem/index.js

@@ -0,0 +1,155 @@
+/**
+ * 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.
+ */
+import React, {useEffect, memo} from 'react';
+import clsx from 'clsx';
+import {
+  isSamePath,
+  usePrevious,
+  Collapsible,
+  useCollapsible,
+} from '@docusaurus/theme-common';
+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, ...props}) {
+  const {items, label, collapsible} = 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('menu__list-item', {
+        'menu__list-item--collapsed': collapsed,
+      })}>
+      {/* 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}
+        />
+      </Collapsible>
+    </li>
+  );
+}
+
+function DocSidebarItemLink({item, onItemClick, activePath, ...props}) {
+  const {href, label} = item;
+  const isActive = isActiveSidebarItem(item, activePath);
+  return (
+    <li className="menu__list-item" key={label}>
+      <a
+        className={clsx('menu__link', {
+          'menu__link--active': isActive,
+        })}
+        href={href}
+        {...props}>
+        {isInternalUrl(href) ? (
+          label
+        ) : (
+          <span>
+            {label}
+            <IconExternalLink />
+          </span>
+        )}
+      </a>
+    </li>
+  );
+}

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

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+
+@media (min-width: 997px) {
+  .menuLinkText {
+    cursor: initial;
+  }
+  .menuLinkText:hover {
+    background: none;
+  }
+}