primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-30 19:53:11 +03:00
Code Issues Projects Releases Wiki Activity

add anchor links

Browse Source
This commit is contained in:
Emily Plummer 2019-04-25 12:50:00 -07:00
parent 84e083cbea
commit 18aeae1eaa
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/markdown.js
View File

@ -1,15 +1,24 @@
import React from 'react' import React from 'react'
import {Heading, Link} from '@primer/components' import {Link} from '@primer/components'
import {MarkdownHeading} from '@primer/blueprints'
import {CodeExample} from '@primer/blueprints/dist/next-components-index.umd.js' import {CodeExample} from '@primer/blueprints/dist/next-components-index.umd.js'
import Outline from './Outline' import Outline from './Outline'
export const H1 = props => <Heading fontSize={6} fontWeight="light" {...props} /> export const H1 = props => <MarkdownHeading {...props} />
export const H2 = props => <MarkdownHeading as="h2" {...props} />
export const H3 = props => <MarkdownHeading as="h3" {...props} />
export const H4 = props => <MarkdownHeading as="h4" {...props} />
export const H5 = props => <MarkdownHeading as="h5" {...props} />
export default function getComponents(page = {}) { export default function getComponents(page = {}) {
const {outline: getOutline = () => []} = page const {outline: getOutline = () => []} = page
return { return {
h1: H1, h1: H1,
h2: H2,
h3: H3,
h4: H4,
h5: H5,
// render links with our component // render links with our component
a: Link, a: Link,
// render code blocks with our wrapper around react-live // render code blocks with our wrapper around react-live

4
pages/_app.js
View File

@ -4,7 +4,7 @@ import {MDXProvider} from '@mdx-js/tag'
import Head from 'next/head' import Head from 'next/head'
import {BaseStyles, BorderBox, Box, Flex, theme} from '@primer/components' import {BaseStyles, BorderBox, Box, Flex, theme} from '@primer/components'
import {PackageHeader} from '../docs/components' import {PackageHeader} from '../docs/components'
import {Header, JumpNav, Section, Router, RouteMatch, SectionLink, SideNav} from '@primer/blueprints' import {Header, MarkdownHeading, JumpNav, Section, Router, RouteMatch, SectionLink, SideNav} from '@primer/blueprints'
import {NavList} from '@primer/blueprints/dist/next-components-index.umd.js' import {NavList} from '@primer/blueprints/dist/next-components-index.umd.js'
import getComponents from '../docs/markdown' import getComponents from '../docs/markdown'
import documents from '../searchIndex' import documents from '../searchIndex'
@ -58,7 +58,7 @@ export default class MyApp extends App {
{Hero ? <Hero /> : null} {Hero ? <Hero /> : null}
<Box color="gray.9" maxWidth={['auto', 'auto', 'auto', CONTENT_MAX_WIDTH]} px={6} mx="auto" my={6}> <Box color="gray.9" maxWidth={['auto', 'auto', 'auto', CONTENT_MAX_WIDTH]} px={6} mx="auto" my={6}>
<div className="markdown-body"> <div className="markdown-body">
{!meta.hero && meta.title ? <h1>{meta.title}</h1> : null} {!meta.hero && meta.title ? <MarkdownHeading>{meta.title}</MarkdownHeading> : null}
<PackageHeader {...meta} /> <PackageHeader {...meta} />
<MDXProvider components={components}> <MDXProvider components={components}>
<Component {...page} /> <Component {...page} />