fix(theme): move mdx components to own dir
Luke Karrys committed
Oct 14, 2023 at 19:26 UTC
3b0211585b562c6bc5cf2df13f668b877f431718
45 files changed
+173
-266
content/index.mdx
+1
-1
@@ -3,7 +3,7 @@ title: npm Documentation
3
edit_on_github: false
4
---
5
6
-import HeroLayout from 'theme/src/layout/hero'
6
+import HeroLayout from 'theme/src/layout-hero'
7
export default HeroLayout
8
9
<Index depth='1' />
scripts/template-oss/index.js
+1
@@ -26,6 +26,7 @@ module.exports = {
26
macCI: false,
27
windowsCI: false,
28
lockfile: true,
29
+ allowedPackages: ['eslint'],
30
allowPaths: [
31
'/.reuse/',
32
'/src/',
src/shared.js
+2
-2
@@ -1,7 +1,7 @@
1
import React from 'react'
2
import { Link } from '@primer/react'
3
-import Screenshot from '../theme/src/components/screenshot'
4
-import Note from '../theme/src/components/note'
3
+import Screenshot from 'theme/src/mdx/screenshot'
4
+import Note from 'theme/src/mdx/note'
5
6
export default {
7
/* User login */
theme/.eslintrc.js
+1
-1
@@ -28,7 +28,7 @@ module.exports = {
28
'max-len': 'off',
29
'react/prop-types': 'off',
30
// TODO: migrate primer/react components to sx instead of deprecated system props
31
- 'primer-react/no-system-props': ['off', {includeUtilityComponents: true}],
31
+ 'primer-react/no-system-props': ['warn', {includeUtilityComponents: true}],
32
},
33
overrides: [
34
{
theme/gatsby-browser.js
+2
-2
@@ -1,2 +1,2 @@
1
-export {default as wrapPageElement} from './src/wrap/page-element'
2
-export {default as wrapRootElement} from './src/wrap/root-element'
1
+export {default as wrapPageElement} from './src/page-element'
2
+export {default as wrapRootElement} from './src/root-element'
theme/gatsby-config.js
+1
-1
@@ -56,7 +56,7 @@ module.exports = ({icon}) => ({
56
options: {
57
extensions: ['.mdx', '.md'],
58
defaultLayouts: {
59
- default: require.resolve('./src/layout/index.js'),
59
+ default: require.resolve('./src/layout-default.js'),
60
},
61
},
62
},
theme/gatsby-ssr.js
+2
-2
@@ -1,2 +1,2 @@
1
-export {default as wrapPageElement} from './src/wrap/page-element'
2
-export {default as wrapRootElement} from './src/wrap/root-element'
1
+export {default as wrapPageElement} from './src/page-element'
2
+export {default as wrapRootElement} from './src/root-element'
theme/scripts/template-oss/index.js
-1
@@ -15,5 +15,4 @@ module.exports = {
15
requiredPackages: {
16
devDependencies: [],
17
},
18
- allowedPackages: ['eslint'],
18
}
theme/src/components/clipboard-copy.js
+1
-1
@@ -1,8 +1,8 @@
1
+import React from 'react'
2
import {Button, StyledOcticon, themeGet} from '@primer/react'
3
import {CheckIcon, CopyIcon} from '@primer/octicons-react'
4
import styled from 'styled-components'
5
import copy from 'copy-to-clipboard'
5
-import React from 'react'
6
import {announce} from '../util/aria-live'
7
8
const CopyToClipboard = styled(Button)`
theme/src/components/details.js
deleted
-65
@@ -1,65 +0,0 @@
1
-import React from 'react'
2
-import styled from 'styled-components'
3
-
4
-// The <details> element is not yet supported in Edge so we have to use a polyfill.
5
-// We have to check if window is defined before importing the polyfill
6
-// so the code doesn’t run while Gatsby is building.
7
-if (typeof window !== 'undefined') {
8
- require('details-element-polyfill')
9
-}
10
-
11
-// TODO: Replace this Details component with the one from @primer/react when 14.0.0 is released.
12
-// Reference: https://github.com/primer/components/pull/499
13
-
14
-const DetailsReset = styled.details`
15
- & > summary {
16
- list-style: none;
17
- }
18
-
19
- & > summary::-webkit-details-marker {
20
- display: none;
21
- }
22
-
23
- & > summary::before {
24
- display: none;
25
- }
26
-`
27
-
28
-function getRenderer(children) {
29
- return typeof children === 'function' ? children : () => children
30
-}
31
-
32
-function Details({children, overlay = false, render = getRenderer(children), ...rest}) {
33
- const [open, setOpen] = React.useState(Boolean(rest.open))
34
-
35
- function toggle(event) {
36
- if (event) {
37
- event.preventDefault()
38
- }
39
- if (overlay) {
40
- openMenu()
41
- } else {
42
- setOpen(!open)
43
- }
44
- }
45
-
46
- function openMenu() {
47
- if (!open) {
48
- setOpen(true)
49
- document.addEventListener('click', closeMenu)
50
- }
51
- }
52
-
53
- function closeMenu() {
54
- setOpen(false)
55
- document.removeEventListener('click', closeMenu)
56
- }
57
-
58
- return (
59
- <DetailsReset {...rest} open={open}>
60
- {render({open, toggle})}
61
- </DetailsReset>
62
- )
63
-}
64
-
65
-export default Details
theme/src/components/drawer.js
+1
-2
@@ -1,6 +1,6 @@
1
+import React from 'react'
2
import {Box} from '@primer/react'
3
import {AnimatePresence, motion} from 'framer-motion'
3
-import React from 'react'
4
import {FocusOn} from 'react-focus-on'
5
6
function Drawer({isOpen, onDismiss, children}) {
@@ -10,7 +10,6 @@ function Drawer({isOpen, onDismiss, children}) {
10
// These event handlers fix a bug that caused links below the fold
11
// to be unclickable in macOS Safari.
12
// Reference: https://github.com/theKashey/react-focus-lock/issues/79
13
-
13
<div
14
style={{textAlign: 'start', fontSize: '1rem', lineHeight: '1.5rem'}}
15
onMouseDown={event => event.preventDefault()}
theme/src/components/head.js
+1
-2
@@ -4,7 +4,7 @@ import useSiteMetdata from '../hooks/use-site-metadata'
4
5
function Head(props) {
6
const siteMetadata = useSiteMetdata()
7
- const title = props.title ? `${props.title} | ${siteMetadata.title}` : siteMetadata.title
7
+ const title = [props.title, siteMetadata.title].filter(Boolean).join(' | ')
8
const description = props.description || siteMetadata.description
9
const lang = props.lang || siteMetadata.lang
10
@@ -16,7 +16,6 @@ function Head(props) {
16
<meta property="og:description" content={description} />
17
<meta property="og:image" content={siteMetadata.imageUrl} />
18
<meta property="twitter:card" content="summary_large_image" />
19
-
19
<html lang={lang} />
20
</Helmet>
21
)
theme/src/components/header.js
+4
-4
@@ -1,15 +1,15 @@
1
+import React from 'react'
2
import {Box, Link} from '@primer/react'
3
import {Link as GatsbyLink} from 'gatsby'
3
-import React from 'react'
4
import styled from 'styled-components'
5
-import headerNavItems from '../header-nav.yml'
6
-import useSiteMetadata from '../hooks/use-site-metadata'
5
import MobileSearch from './mobile-search'
6
import NavDrawer from './nav-drawer'
7
import Search from './search'
8
import NpmLogo from './npm-logo'
9
+import Flex from './flex'
10
import useSearch from '../hooks/use-search'
12
-import Flex from '../components/flex'
11
+import useSiteMetadata from '../hooks/use-site-metadata'
12
+import headerNavItems from '../header-nav.yml'
13
14
export const HEADER_HEIGHT = 66
15
theme/src/components/hero.js
+1
-1
@@ -1,5 +1,5 @@
1
-import {Box, Heading, Text} from '@primer/react'
1
import React from 'react'
2
+import {Box, Heading, Text} from '@primer/react'
3
import useSiteMetadata from '../hooks/use-site-metadata'
4
import Container from './container'
5
theme/src/components/mobile-search.js
+2
-2
@@ -1,13 +1,13 @@
1
+import React from 'react'
2
import {Box} from '@primer/react'
3
import {XIcon, SearchIcon} from '@primer/octicons-react'
4
import {AnimatePresence, motion} from 'framer-motion'
4
-import React from 'react'
5
import {FocusOn} from 'react-focus-on'
6
+import Flex from './flex'
7
import DarkButton from './dark-button'
8
import DarkTextInput from './dark-text-input'
9
import SearchResults from './search-results'
10
import useSiteMetadata from '../hooks/use-site-metadata'
10
-import Flex from '../components/flex'
11
12
function MobileSearch({onDismiss, ...props}) {
13
const siteMetadata = useSiteMetadata()
theme/src/components/nav-drawer.js
+5
-5
@@ -1,16 +1,16 @@
1
+import React from 'react'
2
import {Link} from '@primer/react'
3
import BorderBox from './border-box'
4
import {XIcon, ThreeBarsIcon} from '@primer/octicons-react'
5
import {Link as GatsbyLink} from 'gatsby'
5
-import React from 'react'
6
-import navItems from '../nav.yml'
7
-import headerNavItems from '../header-nav.yml'
8
-import useSiteMetadata from '../hooks/use-site-metadata'
6
import DarkButton from './dark-button'
7
import Drawer from './drawer'
8
import NavItems from './nav-items'
9
+import Flex from './flex'
10
+import navItems from '../nav.yml'
11
+import headerNavItems from '../header-nav.yml'
12
+import useSiteMetadata from '../hooks/use-site-metadata'
13
import {useIsMobile} from '../hooks/use-breakpoint'
13
-import Flex from '../components/flex'
14
15
const useDrawerIsOpen = () => {
16
const isMobile = useIsMobile()
theme/src/components/nav-items.js
+4
-4
@@ -1,11 +1,11 @@
1
+import React from 'react'
2
+import {Link as GatsbyLink} from 'gatsby'
3
import {Box, StyledOcticon, Link, themeGet} from '@primer/react'
2
-import BorderBox from './border-box'
4
import {LinkExternalIcon} from '@primer/octicons-react'
4
-import {Link as GatsbyLink} from 'gatsby'
5
-import React from 'react'
5
import styled from 'styled-components'
6
+import BorderBox from './border-box'
7
+import Flex from './flex'
8
import NavHierarchy from '../util/nav-hierarchy'
8
-import Flex from '../components/flex'
9
10
const getActiveProps = className => props => {
11
const location = NavHierarchy.getLocation(props.location.pathname)
theme/src/components/npm-logo.js
+9
-19
@@ -1,22 +1,12 @@
1
import React from 'react'
2
3
-export default class NpmLogo extends React.Component {
4
- render() {
5
- const bgcolor = this.props.bg || '#cb0000'
6
- const fgcolor = this.props.fg || '#ffffff'
7
-
8
- return (
9
- <svg
10
- height={this.props.size}
11
- width={this.props.size}
12
- viewBox="0 0 700 700"
13
- fill="currentColor"
14
- style={this.props.style}
15
- aria-hidden="true"
16
- >
17
- <polygon fill={bgcolor} points="0,700 700,700 700,0 0,0" />
18
- <polygon fill={fgcolor} points="150,550 350,550 350,250 450,250 450,550 550,550 550,150 150,150 " />
19
- </svg>
20
- )
21
- }
3
+const NpmLogo = ({size, style}) => {
4
+ return (
5
+ <svg height={size} width={size} viewBox="0 0 700 700" fill="currentColor" style={style} aria-hidden="true">
6
+ <polygon fill="#cb0000" points="0,700 700,700 700,0 0,0" />
7
+ <polygon fill="#ffffff" points="150,550 350,550 350,250 450,250 450,550 550,550 550,150 150,150 " />
8
+ </svg>
9
+ )
10
}
11
+
12
+export default NpmLogo
theme/src/components/page-footer.js
+1
-1
@@ -1,6 +1,6 @@
1
+import React from 'react'
2
import {Box, StyledOcticon, Link} from '@primer/react'
3
import {PencilIcon} from '@primer/octicons-react'
3
-import React from 'react'
4
import Contributors from './contributors'
5
import BorderBox from './border-box'
6
theme/src/components/search-results.js
+2
-2
@@ -1,8 +1,8 @@
1
-import {Text} from '@primer/react'
1
import React from 'react'
2
+import {Text} from '@primer/react'
3
+import Flex from './flex'
4
import useSiteMetadata from '../hooks/use-site-metadata'
5
import NavHierarchy from '../util/nav-hierarchy'
5
-import Flex from '../components/flex'
6
7
function SearchResults({results, getItemProps, highlightedIndex}) {
8
const siteMetadata = useSiteMetadata()
theme/src/components/search.js
+2
-2
@@ -1,9 +1,9 @@
1
-import {Box} from '@primer/react'
1
import React from 'react'
3
-import useSiteMetadata from '../hooks/use-site-metadata'
2
+import {Box} from '@primer/react'
3
import DarkTextInput from './dark-text-input'
4
import SearchResults from './search-results'
5
import BorderBox from './border-box'
6
+import useSiteMetadata from '../hooks/use-site-metadata'
7
8
function Search(props) {
9
const siteMetadata = useSiteMetadata()
theme/src/components/sidebar.js
+2
-2
@@ -1,10 +1,10 @@
1
import {Box} from '@primer/react'
2
import React from 'react'
3
-import navItems from '../nav.yml'
3
+import Flex from './flex'
4
import {HEADER_HEIGHT} from './header'
5
import NavItems from './nav-items'
6
import BorderBox from './border-box'
7
-import Flex from '../components/flex'
7
+import navItems from '../nav.yml'
8
9
function Sidebar({location, repositoryUrl}) {
10
return (
theme/src/components/table-of-contents.js
+1
-1
@@ -1,5 +1,5 @@
1
-import {Box, Link} from '@primer/react'
1
import React from 'react'
2
+import {Box, Link} from '@primer/react'
3
4
function TableOfContents({items, depth = 0, labelId}) {
5
return (
theme/src/components/variant-select.js
+4
-4
@@ -1,13 +1,13 @@
1
+import React from 'react'
2
+import {ActionList, ActionMenu} from '@primer/react'
3
+import NavHierarchy from '../util/nav-hierarchy'
4
+
5
// VariantSelect: allows a variant to be set up within a document hierarchy
6
//
7
// For example, given two paths `/docs/v1.0/foo` and `/docs/v2.0/foo`, the
8
// second folder acts as a variant. If you use <VariantSelect root="/docs">
9
// then you'll get a selection for the different variants (v1.0, v2.0).
10
7
-import React from 'react'
8
-import {ActionList, ActionMenu} from '@primer/react'
9
-import NavHierarchy from '../util/nav-hierarchy'
10
-
11
function VariantSelect(props) {
12
const [open, setOpen] = React.useState(false)
13
const path = NavHierarchy.getPath(props.location.pathname)
theme/src/layout-default.js
renamed
+12
-13
@@ -1,17 +1,16 @@
1
-import {Box, Heading, StyledOcticon, Text} from '@primer/react'
2
-import {ChevronDownIcon, ChevronRightIcon} from '@primer/octicons-react'
1
import React from 'react'
4
-import Head from '../components/head'
5
-import Header, {HEADER_HEIGHT} from '../components/header'
6
-import PageFooter from '../components/page-footer'
7
-import Sidebar from '../components/sidebar'
8
-import TableOfContents from '../components/table-of-contents'
9
-import VariantSelect from '../components/variant-select'
10
-import NavHierarchy from '../util/nav-hierarchy'
11
-import Details from '../components/details'
12
-import * as Slugger from '../hooks/use-slugger'
13
-import BorderBox from '../components/border-box'
14
-import Flex from '../components/flex'
2
+import {Box, Heading, StyledOcticon, Text, Details} from '@primer/react'
3
+import {ChevronDownIcon, ChevronRightIcon} from '@primer/octicons-react'
4
+import Head from './components/head'
5
+import Header, {HEADER_HEIGHT} from './components/header'
6
+import PageFooter from './components/page-footer'
7
+import Sidebar from './components/sidebar'
8
+import TableOfContents from './components/table-of-contents'
9
+import VariantSelect from './components/variant-select'
10
+import BorderBox from './components/border-box'
11
+import Flex from './components/flex'
12
+import * as Slugger from './hooks/use-slugger'
13
+import NavHierarchy from './util/nav-hierarchy'
14
15
function Layout({children, pageContext, location}) {
16
const {title, description} = pageContext.frontmatter
theme/src/layout-hero.js
renamed
+8
-8
@@ -1,12 +1,12 @@
1
-import {Box} from '@primer/react'
1
import React from 'react'
3
-import Container from '../components/container'
4
-import Head from '../components/head'
5
-import Header from '../components/header'
6
-import Hero from '../components/hero'
7
-import Sidebar from '../components/sidebar'
8
-import * as Slugger from '../hooks/use-slugger'
9
-import Flex from '../components/flex'
2
+import {Box} from '@primer/react'
3
+import Container from './components/container'
4
+import Head from './components/head'
5
+import Header from './components/header'
6
+import Hero from './components/hero'
7
+import Sidebar from './components/sidebar'
8
+import Flex from './components/flex'
9
+import * as Slugger from './hooks/use-slugger'
10
11
function HeroLayout({children, pageContext, location}) {
12
return (
theme/src/mdx/blockquote.js
renamed
theme/src/mdx/code.js
renamed
+2
-2
@@ -1,9 +1,9 @@
1
import {Box, Text} from '@primer/react'
2
-import BorderBox from './border-box'
2
import Highlight, {defaultProps} from 'prism-react-renderer'
3
import githubTheme from 'prism-react-renderer/themes/github'
4
import React, {useState, useEffect} from 'react'
6
-import ClipboardCopy from './clipboard-copy'
5
+import ClipboardCopy from '../components/clipboard-copy'
6
+import BorderBox from '../components/border-box'
7
8
/**
9
* Resize the scroll handle to the size of the code contents, since the former has to be positioned absolutely.
theme/src/mdx/description-list.js
renamed
theme/src/mdx/heading.js
renamed
+1
-1
@@ -3,7 +3,7 @@ import {LinkIcon} from '@primer/octicons-react'
3
import React from 'react'
4
import textContent from 'react-addons-text-content'
5
import styled from 'styled-components'
6
-import {HEADER_HEIGHT} from './header'
6
+import {HEADER_HEIGHT} from '../components/header'
7
import {useSlugger} from '../hooks/use-slugger'
8
9
const StyledHeading = styled(Heading)`
theme/src/mdx/horizontal-rule.js
renamed
theme/src/mdx/image.js
renamed
theme/src/mdx/index.js
renamed
+13
-20
@@ -1,6 +1,5 @@
1
import React from 'react'
2
-// eslint-disable-next-line import/no-unresolved
3
-import {Location} from '@reach/router'
2
+import {useLocation} from '@reach/router' // eslint-disable-line import/no-unresolved
3
import {Box, Link} from '@primer/react'
4
import {Link as GatsbyLink} from 'gatsby'
5
import NavHierarchy from '../util/nav-hierarchy'
@@ -34,24 +33,18 @@ function showHierarchy(items, props, depth = 1) {
33
}
34
35
function Index(props) {
37
- return (
38
- <Location>
39
- {({location}) => {
40
- const path = NavHierarchy.getLocation(location.pathname)
41
- let root = props.root ? props.root : path
42
- root = root.replace(/\/+$/g, '')
43
-
44
- const rootItem = NavHierarchy.getItem(root)
45
- const hierarchy = NavHierarchy.getHierarchy(rootItem, props)
46
-
47
- if (!hierarchy) {
48
- throw new Error(`could not find entry for ${root}`)
49
- }
50
-
51
- return showHierarchy(hierarchy, props)
52
- }}
53
- </Location>
54
- )
36
+ const location = useLocation()
37
+ const path = NavHierarchy.getLocation(location.pathname)
38
+ const root = (props.root ? props.root : path).replace(/\/+$/g, '')
39
+
40
+ const rootItem = NavHierarchy.getItem(root)
41
+ const hierarchy = NavHierarchy.getHierarchy(rootItem, props)
42
+
43
+ if (!hierarchy) {
44
+ throw new Error(`could not find entry for ${root}`)
45
+ }
46
+
47
+ return showHierarchy(hierarchy, props)
48
}
49
50
export default Index
theme/src/mdx/inline-code.js
renamed
theme/src/mdx/list.js
renamed
theme/src/mdx/note.js
renamed
+1
-1
@@ -1,5 +1,5 @@
1
import React from 'react'
2
-import BorderBox from './border-box'
2
+import BorderBox from '../components/border-box'
3
4
function Note({children}) {
5
return (
theme/src/mdx/paragraph.js
renamed
theme/src/mdx/prompt-reply.js
renamed
theme/src/mdx/prompt.js
renamed
+1
-1
@@ -1,6 +1,6 @@
1
import React from 'react'
2
import {Text} from '@primer/react'
3
-import BorderBox from './border-box'
3
+import BorderBox from '../components/border-box'
4
5
function Prompt({children}) {
6
return (
theme/src/mdx/screenshot.js
renamed
theme/src/mdx/table.js
renamed
theme/src/page-element.js
renamed
+24
-10
@@ -1,14 +1,18 @@
1
-import {Link} from '@primer/react'
2
-import styled from 'styled-components'
1
+import {BaseStyles, Link} from '@primer/react'
2
import React from 'react'
3
+import styled, {createGlobalStyle} from 'styled-components'
4
5
-function SkipLinkBase(props) {
6
- return (
7
- <Link {...props} backgroundColor="blue.6" color="white" p={3} href="#skip-nav" fontSize={1}>
8
- Skip to content
9
- </Link>
10
- )
11
-}
5
+const GlobalStyle = createGlobalStyle`
6
+ ::placeholder {
7
+ color: #dddddd;
8
+ }
9
+`
10
+
11
+const SkipLinkBase = props => (
12
+ <Link {...props} backgroundColor="blue.6" color="white" p={3} href="#skip-nav" fontSize={1}>
13
+ Skip to content
14
+ </Link>
15
+)
16
17
const SkipLink = styled(SkipLinkBase)`
18
z-index: 20;
@@ -33,4 +37,14 @@ const SkipLink = styled(SkipLinkBase)`
37
}
38
`
39
36
-export default SkipLink
40
+function PageElement({element}) {
41
+ return (
42
+ <BaseStyles>
43
+ <GlobalStyle />
44
+ <SkipLink />
45
+ {element}
46
+ </BaseStyles>
47
+ )
48
+}
49
+
50
+export default PageElement
theme/src/root-element.js
new
+61
@@ -0,0 +1,61 @@
1
+import React from 'react'
2
+import {MDXProvider} from '@mdx-js/react'
3
+import {Link, theme, SSRProvider, ThemeProvider} from '@primer/react'
4
+import Blockquote from './mdx/blockquote'
5
+import Code from './mdx/code'
6
+import DescriptionList from './mdx/description-list'
7
+import {H1, H2, H3, H4, H5, H6} from './mdx/heading'
8
+import HorizontalRule from './mdx/horizontal-rule'
9
+import Image from './mdx/image'
10
+import InlineCode from './mdx/inline-code'
11
+import List from './mdx/list'
12
+import Paragraph from './mdx/paragraph'
13
+import Table from './mdx/table'
14
+import Index from './mdx/index'
15
+import Note from './mdx/note'
16
+import Prompt from './mdx/prompt'
17
+import PromptReply from './mdx/prompt-reply'
18
+import Screenshot from './mdx/screenshot'
19
+
20
+function UnderlinedLink(props) {
21
+ return <Link {...props} underline={true} />
22
+}
23
+
24
+const components = {
25
+ a: UnderlinedLink,
26
+ pre: props => props.children,
27
+ code: Code,
28
+ inlineCode: InlineCode,
29
+ table: Table,
30
+ img: Image,
31
+ p: Paragraph,
32
+ hr: HorizontalRule,
33
+ blockquote: Blockquote,
34
+ h1: H1,
35
+ h2: H2,
36
+ h3: H3,
37
+ h4: H4,
38
+ h5: H5,
39
+ h6: H6,
40
+ ul: List,
41
+ ol: List.withComponent('ol'),
42
+ dl: DescriptionList,
43
+ Index,
44
+ Note,
45
+ Prompt,
46
+ PromptReply,
47
+ Screenshot,
48
+ Link: UnderlinedLink,
49
+}
50
+
51
+function RootElement({element}) {
52
+ return (
53
+ <SSRProvider>
54
+ <MDXProvider components={components}>
55
+ <ThemeProvider theme={theme}>{element}</ThemeProvider>
56
+ </MDXProvider>
57
+ </SSRProvider>
58
+ )
59
+}
60
+
61
+export default RootElement
theme/src/wrap/page-element.js
deleted
-22
@@ -1,22 +0,0 @@
1
-import {BaseStyles} from '@primer/react'
2
-import React from 'react'
3
-import SkipLink from '../components/skip-link'
4
-import {createGlobalStyle} from 'styled-components'
5
-
6
-const GlobalStyle = createGlobalStyle`
7
- ::placeholder {
8
- color: #dddddd;
9
- }
10
-`
11
-
12
-function wrapPageElement({element}) {
13
- return (
14
- <BaseStyles>
15
- <GlobalStyle />
16
- <SkipLink />
17
- {element}
18
- </BaseStyles>
19
- )
20
-}
21
-
22
-export default wrapPageElement
theme/src/wrap/root-element.js
deleted
-61
@@ -1,61 +0,0 @@
1
-import {MDXProvider} from '@mdx-js/react'
2
-import {Link, theme, SSRProvider, ThemeProvider} from '@primer/react'
3
-import React from 'react'
4
-import Blockquote from '../components/blockquote'
5
-import Code from '../components/code'
6
-import DescriptionList from '../components/description-list'
7
-import {H1, H2, H3, H4, H5, H6} from '../components/heading'
8
-import HorizontalRule from '../components/horizontal-rule'
9
-import Image from '../components/image'
10
-import InlineCode from '../components/inline-code'
11
-import List from '../components/list'
12
-import Paragraph from '../components/paragraph'
13
-import Table from '../components/table'
14
-import Index from '../components/index'
15
-import Note from '../components/note'
16
-import Prompt from '../components/prompt'
17
-import PromptReply from '../components/prompt-reply'
18
-import Screenshot from '../components/screenshot'
19
-
20
-function UnderlinedLink(props) {
21
- return <Link {...props} underline={true}/>
22
-}
23
-
24
-const components = {
25
- a: UnderlinedLink,
26
- pre: props => props.children,
27
- code: Code,
28
- inlineCode: InlineCode,
29
- table: Table,
30
- img: Image,
31
- p: Paragraph,
32
- hr: HorizontalRule,
33
- blockquote: Blockquote,
34
- h1: H1,
35
- h2: H2,
36
- h3: H3,
37
- h4: H4,
38
- h5: H5,
39
- h6: H6,
40
- ul: List,
41
- ol: List.withComponent('ol'),
42
- dl: DescriptionList,
43
- Index,
44
- Note,
45
- Prompt,
46
- PromptReply,
47
- Screenshot,
48
- Link: UnderlinedLink,
49
-}
50
-
51
-function wrapRootElement({element}) {
52
- return (
53
- <SSRProvider>
54
- <MDXProvider components={components}>
55
- <ThemeProvider theme={theme}>{element}</ThemeProvider>
56
- </MDXProvider>
57
- </SSRProvider>
58
- )
59
-}
60
-
61
-export default wrapRootElement