-
Notifications
You must be signed in to change notification settings - Fork 332
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: redesign documentation styles (#699)
* docs: redesign documentation styles * docs: remove underline from home tab * fix(tabs): fix class names be accidentally add to all children
Showing
19 changed files
with
233 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,36 +1,106 @@ | ||
import React from 'react' | ||
import NextLink from 'next/link' | ||
import { Link, LinkProps } from 'components' | ||
import { useRouter } from 'next/router' | ||
import React, { useMemo } from 'react' | ||
import { useTheme, useToasts, Code, Grid, useClipboard } from 'components' | ||
import { getColorData, getCurrentColor } from './colors-data' | ||
import { GeistUIThemesPalette } from 'components/themes' | ||
|
||
export type HybridLinkProps = LinkProps | ||
interface Props { | ||
type: string | ||
} | ||
|
||
const getColorItem = ( | ||
type: string, | ||
palette: GeistUIThemesPalette, | ||
copy: (text: string) => void, | ||
) => { | ||
const data = getColorData(type) | ||
const getColor = (index: number) => getCurrentColor(palette, type, index) | ||
const keys = Object.keys(data) | ||
|
||
const HybridLink: React.FC<HybridLinkProps> = ({ href = '#', children, ...props }) => { | ||
const isRelativeUrl = href?.startsWith('/') | ||
const { pathname } = useRouter() | ||
const isHomePage = pathname.includes('guide/introduction') | ||
return (keys as Array<keyof GeistUIThemesPalette>).map((key, index) => ( | ||
<div className="color" key={`color-item-${index}`}> | ||
<Grid.Container justify="space-between" style={{ height: '4.5rem' }}> | ||
<Grid.Container alignItems="center" sm={8} xs={16}> | ||
<h4>{data[key]}</h4> | ||
</Grid.Container> | ||
<Grid.Container alignItems="center" justify="center" sm={8} xs={0}> | ||
<span className="usage" onClick={() => copy(`theme.palette.${key}`)}> | ||
theme.palette.{key} | ||
</span> | ||
</Grid.Container> | ||
<Grid.Container alignItems="center" justify="flex-end" sm={8} xs> | ||
<span className="value" onClick={() => copy(palette[key])}> | ||
{palette[key]} | ||
</span> | ||
</Grid.Container> | ||
</Grid.Container> | ||
<style jsx>{` | ||
.color { | ||
background-color: ${palette[key]}; | ||
color: ${getColor(index)}; | ||
} | ||
`}</style> | ||
</div> | ||
)) | ||
} | ||
|
||
if (isRelativeUrl) { | ||
return ( | ||
<NextLink href={href} passHref> | ||
<Link color block ml="-2px" px="4px" py="2px" {...props}> | ||
{children} | ||
</Link> | ||
</NextLink> | ||
) | ||
const Colors: React.FC<Props> = ({ type }) => { | ||
const theme = useTheme() | ||
const { copy } = useClipboard() | ||
const [, setToast] = useToasts() | ||
const copyText = (text: string) => { | ||
copy(text) | ||
setToast({ | ||
text: ( | ||
<span> | ||
Copied <Code>{text}</Code> | ||
</span> | ||
), | ||
}) | ||
} | ||
const colorItems = useMemo( | ||
() => getColorItem(type, theme.palette, copyText), | ||
[type, theme.palette], | ||
) | ||
|
||
return ( | ||
<Link | ||
href={href} | ||
target="_blank" | ||
color | ||
icon={!isHomePage} | ||
rel="noreferrer nofollow" | ||
{...props}> | ||
{children} | ||
</Link> | ||
<div className="colors"> | ||
{colorItems} | ||
<style jsx>{` | ||
.colors { | ||
display: flex; | ||
flex-direction: column; | ||
width: 100%; | ||
} | ||
.colors :global(.color) { | ||
padding: ${theme.layout.gap}; | ||
position: relative; | ||
user-select: none; | ||
} | ||
.colors :global(.color:first-child) { | ||
border-top-left-radius: ${theme.layout.radius}; | ||
border-top-right-radius: ${theme.layout.radius}; | ||
} | ||
.colors :global(.color:last-child) { | ||
border-bottom-left-radius: ${theme.layout.radius}; | ||
border-bottom-right-radius: ${theme.layout.radius}; | ||
} | ||
.colors :global(.color h4) { | ||
margin: 0; | ||
} | ||
.colors :global(.usage) { | ||
font-size: 1rem; | ||
padding: 1rem; | ||
cursor: pointer; | ||
} | ||
.colors :global(.value) { | ||
font-size: 0.875rem; | ||
text-transform: uppercase; | ||
padding: 1rem; | ||
cursor: pointer; | ||
} | ||
`}</style> | ||
</div> | ||
) | ||
} | ||
|
||
export default HybridLink | ||
export default Colors |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
import React, { ReactNode, useMemo } from 'react' | ||
import { Code, CodeProps } from 'components' | ||
|
||
export type HybridCodeProps = CodeProps | ||
export const FILE_NAME_PREFIX = '// NAME:' | ||
type HybridCodeChildrenAndName = { | ||
children: ReactNode | undefined | ||
name?: string | undefined | ||
} | ||
|
||
const extractFileName = ( | ||
children: ReactNode | undefined, | ||
stopDeep: boolean = false, | ||
): HybridCodeChildrenAndName => { | ||
if (!children) return { children } | ||
let name: string | undefined = undefined | ||
const next = React.Children.map(children, child => { | ||
if (name) return child | ||
if (!React.isValidElement(child)) return null | ||
const grandson = child.props?.children | ||
if (typeof grandson === 'string' && grandson?.startsWith(FILE_NAME_PREFIX)) { | ||
name = grandson | ||
return null | ||
} | ||
if (!Array.isArray(grandson) || stopDeep) return child | ||
|
||
const { children: puredGrandson, name: puredName } = extractFileName( | ||
child.props?.children, | ||
true, | ||
) | ||
if (!puredName) return child | ||
|
||
name = puredName | ||
const withoutSpaceAndNull = React.Children.toArray(puredGrandson).filter( | ||
(r, index) => { | ||
if (index === 0 && r === '\n') return false | ||
return !!r | ||
}, | ||
) | ||
return React.cloneElement(child, { | ||
children: withoutSpaceAndNull, | ||
}) | ||
}) | ||
return { | ||
children: next, | ||
name, | ||
} | ||
} | ||
|
||
const HybridCode: React.FC<HybridCodeProps> = ({ children }) => { | ||
const { children: withoutNameChildren, name } = useMemo<HybridCodeChildrenAndName>( | ||
() => extractFileName(children), | ||
[children], | ||
) | ||
const withoutPrefixName = useMemo(() => { | ||
if (!name) return name | ||
return name.replace(FILE_NAME_PREFIX, '') | ||
}, [name]) | ||
|
||
return ( | ||
<Code block name={withoutPrefixName}> | ||
{withoutNameChildren} | ||
</Code> | ||
) | ||
} | ||
|
||
export default HybridCode |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.