Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | import {Heading, Link} from '@primer/components'
import {LinkIcon} from '@primer/octicons-react'
import themeGet from '@styled-system/theme-get'
import GithubSlugger from 'github-slugger'
import React from 'react'
import textContent from 'react-addons-text-content'
import styled from 'styled-components'
import {HEADER_HEIGHT} from './header'
const StyledHeading = styled(Heading)`
margin-top: ${themeGet('space.4')};
margin-bottom: ${themeGet('space.3')};
scroll-margin-top: ${HEADER_HEIGHT + 24}px;
& .octicon-link {
visibility: hidden;
}
&:hover .octicon-link,
&:focus-within .octicon-link {
visibility: visible;
}
`
function MarkdownHeading({children, ...props}) {
const slugger = new GithubSlugger()
const text = children ? textContent(children) : ''
const id = text ? slugger.slug(text) : ''
return (
<StyledHeading id={id} {...props}>
<Link
href={`#${id}`}
p={2}
ml={-32}
color="gray.8"
aria-label={`${text} permalink`}
>
<LinkIcon className="octicon-link" verticalAlign="middle" />
</Link>
{children}
</StyledHeading>
)
}
const StyledH1 = styled(StyledHeading).attrs({as: 'h1'})`
padding-bottom: ${themeGet('space.1')};
font-size: ${themeGet('fontSizes.5')};
border-bottom: 1px solid ${themeGet('colors.gray.2')};
`
const StyledH2 = styled(StyledHeading).attrs({as: 'h2'})`
padding-bottom: ${themeGet('space.1')};
font-size: ${themeGet('fontSizes.4')};
border-bottom: 1px solid ${themeGet('colors.gray.2')};
`
const StyledH3 = styled(StyledHeading).attrs({as: 'h3'})`
font-size: ${themeGet('fontSizes.3')};
`
const StyledH4 = styled(StyledHeading).attrs({as: 'h4'})`
font-size: ${themeGet('fontSizes.2')};
`
const StyledH5 = styled(StyledHeading).attrs({as: 'h5'})`
font-size: ${themeGet('fontSizes.1')};
`
const StyledH6 = styled(StyledHeading).attrs({as: 'h6'})`
font-size: ${themeGet('fontSizes.1')};
color: ${themeGet('colors.gray.5')};
`
export const H1 = (props) => <MarkdownHeading as={StyledH1} {...props} />
export const H2 = (props) => <MarkdownHeading as={StyledH2} {...props} />
export const H3 = (props) => <MarkdownHeading as={StyledH3} {...props} />
export const H4 = (props) => <MarkdownHeading as={StyledH4} {...props} />
export const H5 = (props) => <MarkdownHeading as={StyledH5} {...props} />
export const H6 = (props) => <MarkdownHeading as={StyledH6} {...props} />
|