website: change back to client-side nav

website/src/pages/index.js

@@ -4,6 +4,7 @@ import Layout from '@theme/Layout';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
 
 import successStories from '@site/src/data/successStories';
@@ -46,14 +47,14 @@ function HeroSection() {
             <h1 className="hero__title">{siteConfig.title}</h1>
             <p className="hero__subtitle">{siteConfig.tagline}</p>
             <div className={styles.buttons}>
-              <a
+              <Link
                 className={classnames(
                   'button button--primary button--lg',
                   styles.getStarted,
                 )}
-                href={useBaseUrl('introduction')}>
+                to="/introduction">
                 Start reading&nbsp;&nbsp;→
-              </a>
+              </Link>
             </div>
             <p className="margin-top--md">
               <em>It's completely free!</em>

website/src/theme/DocPaginator/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
+import Link from '@docusaurus/Link';
 import SidebarAd from '../../components/SidebarAd';
 
 function DocPaginator({previous, next}) {
@@ -14,7 +15,7 @@ function DocPaginator({previous, next}) {
         })}>
         <div className="pagination-nav__item">
           {previous && (
-            <a className="pagination-nav__link" href={previous.permalink}>
+            <Link className="pagination-nav__link" to={previous.permalink}>
               <div className="pagination-nav__sublabel">
                 <Translate
                   id="theme.docs.paginator.previous"
@@ -23,12 +24,12 @@ function DocPaginator({previous, next}) {
                 </Translate>
               </div>
               <div className="pagination-nav__label">{previous.title}</div>
-            </a>
+            </Link>
           )}
         </div>
         <div className="pagination-nav__item pagination-nav__item--next">
           {next && (
-            <a className="pagination-nav__link" href={next.permalink}>
+            <Link className="pagination-nav__link" to={next.permalink}>
               <div className="pagination-nav__sublabel">
                 <Translate
                   id="theme.docs.paginator.next"
@@ -37,7 +38,7 @@ function DocPaginator({previous, next}) {
                 </Translate>
               </div>
               <div className="pagination-nav__label">{next.title}</div>
-            </a>
+            </Link>
           )}
         </div>
       </nav>

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,11 +1,12 @@
 import React from 'react';
+import Link from '@docusaurus/Link';
 
 function PaginatorNavLink({permalink, title, subLabel}) {
   return (
-    <a className="pagination-nav__link" href={permalink}>
+    <Link className="pagination-nav__link" to={permalink}>
       {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
       <div className="pagination-nav__label">{title}</div>
-    </a>
+    </Link>
   );
 }