@cryptotaxi247 / documentation
Code Commits Issues Pulls Sessions CI/CD
jpg619/fix-accessibility-content-flow
@reggi/path-to-regexp dependabot/npm_and_yarn/main/copy-to-clipboard-4.0.2 dependabot/npm_and_yarn/main/eslint-10.4.0 dependabot/npm_and_yarn/main/npmcli/eslint-config-7.0.0 dependabot/npm_and_yarn/main/proc-log-7.0.0 dependabot/npm_and_yarn/npm_and_yarn-826852524d dependabot/npm_and_yarn/npm_and_yarn-ab9a7f4bc2 deprecate-totp-2fa dhei/classic-tokens gat-bypass-2fa-docs jpg619/fix-accessibility-content-flow jpg619/version-bump-tar-2 kartykp/gat-bypass-2fa-docs kartykp/upgrade-path-to-regex main maitxn/version-bump-tar patch-1 reggi/cache-based-on-version reggi/dev-engines reggi/fix-transform-prettier reggi/overrides update-search-sensitivity
js 55 lines 1.8 KB
Raw
1 import React from 'react'
2 import {BaseStyles, themeGet, Box} from '@primer/react'
3 import {createGlobalStyle} from 'styled-components'
4 import Slugger from 'github-slugger'
5 import Header from './components/header'
6 import Sidebar from './components/sidebar'
7 import {SkipBox, SkipLink} from './components/skip-nav'
8 import {SKIP_TO_CONTENT_ID, SKIP_TO_SEARCH_ID, SKIP_TO_TOC_ID} from './constants'
9
10 import {PageProvider} from './hooks/use-page'
11 import Layout from './layout'
12
13 const GlobalStyles = createGlobalStyle`
14 body {
15 color: ${themeGet('colors.fg.default')};
16 background-color: ${themeGet('colors.canvas.default')};
17 }
18 `
19
20 const PageElement = ({element, props}) => {
21 const page = {
22 pageContext: props.pageContext,
23 frontmatter: props.pageContext?.frontmatter || {},
24 location: props.location,
25 path: props.location.pathname,
26 slugger: new Slugger(),
27 }
28
29 // Check if table of contents is available and has items
30 const hasTableOfContents = Boolean(props.pageContext?.tableOfContents?.length)
31
32 return (
33 <BaseStyles>
34 <GlobalStyles />
35 <SkipBox>
36 <SkipLink href={`#${SKIP_TO_SEARCH_ID}`}>Skip to search</SkipLink>
37 <SkipLink href={`#${SKIP_TO_CONTENT_ID}`}>Skip to content</SkipLink>
38 {hasTableOfContents && <SkipLink href={`#${SKIP_TO_TOC_ID}`}>Skip to table of contents</SkipLink>}
39 </SkipBox>
40 <PageProvider value={page}>
41 <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
42 <Header />
43 <Box sx={{zIndex: 0, display: 'flex', flex: '1 1 auto', flexDirection: 'row'}}>
44 <Box sx={{display: ['none', null, null, 'block']}}>
45 <Sidebar />
46 </Box>
47 <Layout>{element}</Layout>
48 </Box>
49 </Box>
50 </PageProvider>
51 </BaseStyles>
52 )
53 }
54
55 export default PageElement