refactor: use next links (#8344)

* chore(website): use next links

* chore: fix deploy check

* chore: use ligher syntax highlighter
This commit is contained in:
Suneet Tipirneni
2022-07-24 09:14:18 -04:00
committed by GitHub
parent 8e520f946a
commit 335695c698
6 changed files with 29 additions and 21 deletions

View File

@@ -1,5 +1,5 @@
import type { ReactNode } from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { HyperlinkedText } from './HyperlinkedText';
import { Section } from './Section';

View File

@@ -1,3 +1,4 @@
import Link from 'next/link';
import type { TokenDocumentation } from '~/util/parse.server';
export interface HyperlinkedTextProps {
@@ -17,9 +18,9 @@ export function HyperlinkedText({ tokens }: HyperlinkedTextProps) {
{tokens.map((token) => {
if (token.path) {
return (
<a key={token.text} href={token.path}>
<Link key={token.text} href={token.path}>
{token.text}
</a>
</Link>
);
}

View File

@@ -1,3 +1,4 @@
import Link from 'next/link';
import { FiMenu } from 'react-icons/fi';
import { VscPackage } from 'react-icons/vsc';
import { generateIcon } from '~/util/icon';
@@ -18,7 +19,7 @@ function onMenuClick() {
export function ItemSidebar({ packageName, data }: ItemListProps) {
return (
<div className="flex flex-col max-h-full min-w-[270px] lg:border-r-solid border-b-solid border-gray border-width-0.5">
<div className="flex justify-between items-center border-b-solid border-gray border-width-0.5 py-2">
<div className=" border-b-solid border-gray border-width-0.5 py-2 sticky top-0">
<h2 className="px-2 font-mono flex items-center m-0 dark:text-white">
<VscPackage className="px-1" />
{`${packageName}`}
@@ -30,13 +31,10 @@ export function ItemSidebar({ packageName, data }: ItemListProps) {
<div className="hidden lg:block lg:min-h-screen overflow-y-scroll overflow-x-clip p-7">
{data.members.map((member, i) => (
<div key={i} className="mb-1">
<a
className="flex items-center align-center font-mono no-underline break-all text-blue-500 dark:text-blue-300"
href={member.path}
>
<div className="flex items-center align-center font-mono no-underline break-all text-blue-500 dark:text-blue-300">
{generateIcon(member.kind, 'px-1')}
{member.name}
</a>
<Link href={member.path}>{member.name}</Link>
</div>
</div>
))}
</div>