primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-24 05:06:04 +03:00
Code Issues Projects Releases Wiki Activity

reorganize page logic, redirect / -> /css

Browse Source
This commit is contained in:
Shawn Allen 2018-12-04 14:04:53 -08:00
parent aff3f32b0c
commit 0cbc2887c0
4 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
docs/pages/_app.js
View File

@ -8,19 +8,11 @@ import Octicon, {Pencil} from '@githubprimer/octicons-react'
import {basename, join} from 'path'
import * as primerComponents from '@primer/components'
import * as docComponents from '../src/components'
import {requirePage, pathMap} from '../src/utils'
const {BaseStyles, Box, Flex, Link, Text, theme} = primerComponents
const {SideNav, Header, IndexHero} = docComponents
const ext = /\.mdx?$/
const context = require.context('.', true, /\.mdx?$/)
const pathMap = context.keys().reduce((map, key) => {
const base = key.replace(ext, '').replace(/\/index$/, '')
const path = base.substr(1) // strip the leading "."
map[path] = key
return map
}, {})
const components = {
...docComponents,
...primerComponents,
@ -47,11 +39,10 @@ export default class MyApp extends App {
const pathname = this.props.router.pathname.replace(/\/$/, '')
const filename = pathMap[pathname]
const {Component, page} = this.props
const hasHero = ['/css', '/css/'].includes(pathname)
const meta = {}
if (filename) {
Object.assign(meta, context(filename).meta)
Object.assign(meta, requirePage(filename).meta)
}
return (
@ -63,13 +54,15 @@ export default class MyApp extends App {
<Header />
<Flex display={['block', 'block', 'flex', 'flex']} flexDirection="row-reverse">
<Box width="100%">
{hasHero && <IndexHero />}
<Box color="gray.9" maxWidth={1012} width={'100%'} my={6} mx={'auto'} px={6} className="markdown-body">
{meta.title ? <h1>{meta.title}</h1> : null}
<MDXProvider components={components}>
<Component {...page} />
<pre>meta: {JSON.stringify(meta, null, 2)}</pre>
</MDXProvider>
{meta.hero ? <IndexHero /> : null}
<Box color="gray.9" maxWidth={1012} width="100%" my={6} mx="auto" px={6}>
<div className="markdown-body">
{meta.title ? <h1>{meta.title}</h1> : null}
<MDXProvider components={components}>
<Component {...page} />
<pre>meta: {JSON.stringify(meta, null, 2)}</pre>
</MDXProvider>
</div>
{/* TODO: bring back edit link! */}
</Box>
</Box>

4
docs/pages/css/index.md
View File

@ -1 +1,5 @@
---
hero: true
---
# Hello, world!

2
docs/pages/index.js Normal file
View File

@ -0,0 +1,2 @@
import {redirect} from '../src/utils'
export default redirect('/css')

9
docs/src/utils.js
View File

@ -7,6 +7,15 @@ export const assetPrefix = config.assetPrefix || ''
export const assetPath = `${assetPrefix}/static/assets/`
export const getAssetPath = path => `${assetPath}${path}`
const ext = /\.mdx?$/
export const requirePage = require.context('../pages', true, /\.mdx?$/)
export const pathMap = requirePage.keys().reduce((map, key) => {
const base = key.replace(ext, '').replace(/\/index$/, '')
const path = base.substr(1) // strip the leading "."
map[path] = key
return map
}, {})
/**
* Export this as your default from a page, and it'll redirect both server-
* and client-side: