website: change back to client-side nav

This commit is contained in:
Yangshun
2022-03-18 07:20:47 +08:00
parent 63390da383
commit 6cac0009e2
3 changed files with 20 additions and 22 deletions

View File

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

View File

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

View File

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