Browse Source

Improve links

Use Next.js router links instead of the ordinary `<a>` tags.
tags/0.3.0
TheoryOfNekomata 3 years ago
parent
commit
8310ded3d7
4 changed files with 44 additions and 4 deletions
  1. +4
    -0
      packages/react-common-docs/src/components/Nav/Nav.tsx
  2. +12
    -2
      packages/react-common-docs/src/components/Props/Props.tsx
  3. +2
    -2
      packages/react-common-docs/src/components/Sidebar/Sidebar.tsx
  4. +26
    -0
      packages/react-common-docs/src/pages/_app.tsx

+ 4
- 0
packages/react-common-docs/src/components/Nav/Nav.tsx View File

@@ -42,6 +42,7 @@ const Nav: React.FC<Props> = ({
{
(data as (string | object | null | undefined)[]).map(d => (
<Nav
key={JSON.stringify(d)}
data={d}
/>
))
@@ -61,6 +62,7 @@ const Nav: React.FC<Props> = ({
{
(value as (string | object | null | undefined)[]).map(v => (
<Nav
key={JSON.stringify(v)}
data={v}
/>
))
@@ -76,6 +78,7 @@ const Nav: React.FC<Props> = ({
{
// @ts-ignore
<NavLink
href={value as string}
title={key}
enclosingComponent={Container}
/>
@@ -91,6 +94,7 @@ const Nav: React.FC<Props> = ({
{
// @ts-ignore
<NavLink
href={data as string}
title={data as string}
enclosingComponent={Container}
/>


+ 12
- 2
packages/react-common-docs/src/components/Props/Props.tsx View File

@@ -195,7 +195,9 @@ const getPropTypeHtml = propType => {
let currentToken
if (t.trim().startsWith('"') && t.trim().endsWith('"')) {
currentToken = (
<React.Fragment>
<React.Fragment
key={t}
>
<span
style={punctuation.style}
>
@@ -216,6 +218,7 @@ const getPropTypeHtml = propType => {
} else if ('any string boolean number symbol unknown object bigint'.split(' ').includes(t)) {
currentToken = (
<span
key={t}
style={keyword.style}
>
{t}
@@ -224,6 +227,7 @@ const getPropTypeHtml = propType => {
} else if ('null'.split(' ').includes(t)) {
currentToken = (
<span
key={t}
style={keyword.style}
>
{t}
@@ -232,6 +236,7 @@ const getPropTypeHtml = propType => {
} else if ('true false'.split(' ').includes(t)) {
currentToken = (
<span
key={t}
style={boolean.style}
>
{t}
@@ -240,6 +245,7 @@ const getPropTypeHtml = propType => {
} else if (!isNaN(Number(t))) {
currentToken = (
<span
key={t}
style={number.style}
>
{t}
@@ -248,6 +254,7 @@ const getPropTypeHtml = propType => {
} else {
currentToken = (
<span
key={t}
style={type.style}
>
{t}
@@ -257,6 +264,7 @@ const getPropTypeHtml = propType => {
return [
...tt,
i > 0 && <span
key={`**separator:${t}**`}
style={operator.style}
>
|
@@ -314,7 +322,9 @@ const Props: React.FC<Props> = ({ of: ofAttr }) => {
)
: undefined
return (
<HeaderRow>
<HeaderRow
key={name}
>
<MainBodyCell>
<Code>
{getPropNameHtml(propName, propType)}


+ 2
- 2
packages/react-common-docs/src/components/Sidebar/Sidebar.tsx View File

@@ -98,7 +98,7 @@ const RepoLink = styled('a')({

const propTypes = {
data: PropTypes.shape({
nav: PropTypes.object,
nav: PropTypes.array,
}),
brand: PropTypes.elementType,
initialTheme: PropTypes.string,
@@ -187,7 +187,7 @@ const Sidebar: React.FC<Props> = ({
<RepoLink
href={pkg.repository}
target="_blank"
rel="noopener noreferer"
rel="noopener noreferrer"
>
<Icon
name="code"


+ 26
- 0
packages/react-common-docs/src/pages/_app.tsx View File

@@ -1,4 +1,5 @@
import * as React from 'react'
import Link from 'next/link'
import { MDXProvider } from '@mdx-js/react'
import Head from 'next/head'
import styled from 'styled-components'
@@ -42,6 +43,31 @@ const App: React.FC<AppProps> = ({
<Container>
<MDXProvider
components={{
a: ({ href, children, ...etcProps }) => {
if (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//')) {
return (
<a
{...etcProps}
href={href}
target="_blank"
rel="noreferrer noopener"
>
{children}
</a>
)
}
return (
<Link
href={href}
passHref
{...etcProps}
>
<a>
{children}
</a>
</Link>
)
},
pre: CodeBlock,
}}
>


Loading…
Cancel
Save