website: change back to client-side nav

website/src/pages/index.js

@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import Layout from '@theme/Layout';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
 
@@ -144,11 +145,11 @@ function HeroSection() {
           </a>
         </p>
         <div className={styles.buttons}>
-          <a
+          <Link
             className={classnames('button button--primary button--lg')}
-            href={useBaseUrl('introduction')}>
+            to="/introduction">
             Start reading now&nbsp;&nbsp;→
-          </a>
+          </Link>
         </div>
         <div className="margin-top--lg">
           <iframe
@@ -285,11 +286,9 @@ function HowToUseStep({index, title, ctaLink, contents}) {
         </ul>
       </div>
       <div class="card__footer">
-        <a
+        <Link class="button button--primary button--block" to={ctaLink}>
-          class="button button--primary button--block"
-          href={useBaseUrl(ctaLink)}>
           Read now →
-        </a>
+        </Link>
       </div>
     </div>
   );
@@ -431,11 +430,9 @@ function FeaturesSection() {
                       {description}
                     </p>
                     {link && (
-                      <a
+                      <Link className={styles.featuresRowItemLink} to={link}>
-                        className={styles.featuresRowItemLink}
-                        href={useBaseUrl(link)}>
                         <strong>Read now →</strong>
-                      </a>
+                      </Link>
                     )}
                   </div>
                 </div>
@@ -808,11 +805,11 @@ function SponsorshipSection() {
                 target="_blank">
                 Advertise with us!
               </a>
-              <a
+              <Link
                 className="button button--secondary button--lg"
-                href="/advertise">
+                to="/advertise">
                 Find out more
-              </a>
+              </Link>
             </div>
           </div>
         </div>
@@ -834,11 +831,11 @@ function PreFooterSection() {
               It's free! Start improving your interview game today and get the
               job at the company of your dreams.
             </p>
-            <a
+            <Link
               className={classnames('button button--primary button--lg')}
-              href={useBaseUrl('introduction')}>
+              to="/introduction">
               Start reading now&nbsp;&nbsp;→
-            </a>
+            </Link>
           </div>
         </div>
       </div>

website/src/theme/DocSidebarItem/index.js

@@ -151,12 +151,12 @@ function DocSidebarItemLink({item, onItemClick, activePath, level, ...props}) {
         className,
       )}
       key={label}>
-      <a
+      <Link
         className={clsx('menu__link', {
           'menu__link--active': isActive,
         })}
         aria-current={isActive ? 'page' : undefined}
-        href={href}
+        to={href}
         {...(isInternalUrl(href) && {
           onClick: onItemClick,
         })}
@@ -169,7 +169,7 @@ function DocSidebarItemLink({item, onItemClick, activePath, level, ...props}) {
             <IconExternalLink />
           </span>
         )}
-      </a>
+      </Link>
     </li>
   );
 }

website/src/theme/PaginatorNavLink/index.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import clsx from 'clsx';
+import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
 
 function PaginatorNavLink({hasArrow, permalink, title, subLabel, ...rest}) {
   return (
-    <a className={clsx('pagination-nav__link', styles.root)} href={permalink}>
+    <Link className={clsx('pagination-nav__link', styles.root)} to={permalink}>
       {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
       <div className="pagination-nav__label">{title}</div>
       {hasArrow && <span className={styles.arrow}>→</span>}
-    </a>
+    </Link>
   );
 }