Skip to content
This repository was archived by the owner on Jul 2, 2022. It is now read-only.

Commit 342ddce

Browse files
olizillaolizilla
committed
Adds docs build process
1 parent b8c5f54 commit 342ddce

15 files changed

+8537
-0
lines changed

‎.babelrc

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"presets": [
3+
"env",
4+
"stage-2",
5+
"react"
6+
]
7+
}

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
docs
2+
node_modules
3+
lab.json

‎build/html.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
console.time('Build html total')
2+
3+
require('babel-register')()
4+
5+
const fs = require('fs')
6+
const path = require('path')
7+
const mkdirp = require('mkdirp')
8+
const { createElement } = require('react')
9+
const { renderToStaticMarkup } = require('react-dom/server')
10+
const { ServerStyleSheet } = require('styled-components')
11+
const requireDirectory = require('require-directory')
12+
13+
const srcDir = path.resolve(__dirname, '../pages')
14+
const outputDir = path.resolve(__dirname, '../docs')
15+
const Html = require('../components/Html.jsx').default
16+
17+
function renderToHtml (srcPath) {
18+
const Component = require(srcPath).default
19+
const children = createElement(Component)
20+
const sheet = new ServerStyleSheet()
21+
// Uou have to render for sheet.CollectStyles to work, it seems.
22+
renderToStaticMarkup(sheet.collectStyles(createElement(Html, {children})))
23+
const styleTags = sheet.getStyleElement()
24+
// Now render again with the style sheet
25+
const html = renderToStaticMarkup(createElement(Html, {children, styleTags}))
26+
return html
27+
}
28+
29+
requireDirectory(module, '../pages', {
30+
include: /index.js$/,
31+
visit: (content, srcPath) => {
32+
const name = path.relative(srcDir, srcPath)
33+
console.time(`Build ${name}`)
34+
35+
// Index.jsx => index.html
36+
// about/Index.jsx => index.html
37+
const outputFile = `${path.basename(srcPath, '.js')}.html`.toLowerCase()
38+
39+
// /foo/bar/pages/Index.jsx => ''
40+
// /foo/bar/pages/about/Index.jsx => 'about'
41+
const relativePath = path.relative(srcDir, path.dirname(srcPath))
42+
43+
// '/foo/bar/docs', '', 'index.html' => '/foo/bar/docs/index.html'
44+
// '/foo/bar/docs', 'about', 'index.html' => '/foo/bar/docs/about/index.html'
45+
const outputPath = path.resolve(outputDir, relativePath, outputFile)
46+
47+
const html = renderToHtml(srcPath)
48+
49+
mkdirp.sync(path.dirname(outputPath))
50+
51+
fs.writeFileSync(outputPath, `<!doctype html>\n${html}`)
52+
53+
console.timeEnd(`Build ${name}`)
54+
}
55+
})
56+
57+
console.timeEnd('Build html total')

‎components/Box.jsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import styled from 'styled-components'
2+
import {
3+
color,
4+
space,
5+
width,
6+
fontSize,
7+
fontWeight,
8+
textAlign,
9+
boxShadow,
10+
borderRadius,
11+
responsiveStyle
12+
} from 'styled-system'
13+
14+
const display = responsiveStyle({
15+
prop: 'display',
16+
cssProperty: 'display'
17+
})
18+
19+
const verticalAlign = responsiveStyle({
20+
prop: 'verticalAlign',
21+
cssProperty: 'verticalAlign'
22+
})
23+
24+
export const Box = styled.div`
25+
${color}
26+
${space}
27+
${width}
28+
${fontSize}
29+
${fontWeight}
30+
${textAlign}
31+
${boxShadow}
32+
${borderRadius}
33+
${display}
34+
${verticalAlign}
35+
`
36+
37+
export const Card = Box.extend`
38+
overflow: hidden;
39+
`
40+
41+
Card.defaultProps = {
42+
display: 'inline-block',
43+
boxShadow: 0,
44+
borderRadius: 4
45+
}
46+
47+
export const Half = Box.extend``
48+
49+
Half.defaultProps = {
50+
display: 'inline-block',
51+
verticalAlign: 'top',
52+
width: 0.5
53+
}
54+
55+
export const Section = Box.withComponent('section')

‎components/Heading.jsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import styled from 'styled-components'
2+
import { space, fontSize, color, textAlign, fontWeight } from 'styled-system'
3+
4+
export const H2 = styled.h2`
5+
${space}
6+
${color}
7+
${textAlign}
8+
${fontSize}
9+
${fontWeight}
10+
font-family: ${props => props.theme.fonts[1]};
11+
`
12+
H2.defaultProps = {
13+
fontSize: 6,
14+
fontWeight: 600,
15+
color: 'charcoal',
16+
m: 1
17+
}
18+
19+
export const H3 = H2.withComponent('h3')
20+
21+
H3.defaultProps = {
22+
fontSize: 4,
23+
fontWeight: 500,
24+
color: 'charcoal-muted',
25+
m: 1
26+
}

‎components/Headline.jsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import styled from 'styled-components'
2+
import { space, fontSize, color, textAlign, fontWeight } from 'styled-system'
3+
4+
export const Headline = styled.h1`
5+
${space}
6+
${color}
7+
${textAlign}
8+
${fontSize}
9+
${fontWeight}
10+
font-family: ${props => props.theme.fonts[1]};
11+
`
12+
Headline.defaultProps = {
13+
fontSize: 5,
14+
fontWeight: 400
15+
}
16+
17+
export const SubHeadline = styled.h2`
18+
${space}
19+
${color}
20+
${textAlign}
21+
${fontSize}
22+
${fontWeight}
23+
font-family: ${props => props.theme.fonts[1]};
24+
`
25+
26+
SubHeadline.defaultProps = {
27+
fontSize: 4,
28+
fontWeight: 400
29+
}

‎components/Html.jsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import { ThemeProvider } from 'styled-components'
4+
import theme from '../theme.json'
5+
6+
const Html = ({ title = '', description = '', relativePathToRoot = '', styleTags, children }) => (
7+
<html>
8+
<head>
9+
<meta charSet='UTF-8' />
10+
<meta httpEquiv='x-ua-compatible' content='ie=edge' />
11+
<meta name='viewport' content='width=device-width, initial-scale=1' />
12+
<meta name='description' content={description} />
13+
<title>{title}</title>
14+
{styleTags}
15+
</head>
16+
<ThemeProvider theme={theme}>
17+
<body style={{margin: 0, fontFamily: theme.fonts[0], color: theme.colors.charcoal, backgroundColor: 'white'}}>
18+
{children}
19+
</body>
20+
</ThemeProvider>
21+
</html>
22+
)
23+
24+
Html.propTypes = {
25+
children: PropTypes.node
26+
}
27+
28+
export default Html

‎components/Swatch.jsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react'
2+
import {withTheme} from 'styled-components'
3+
import {Box, Card, Half} from './Box.jsx'
4+
import {Text} from './Text.jsx'
5+
6+
const Swatch = ({color, width, height, m, theme}) => {
7+
return (
8+
<Card width={width} m={m} bg='white' style={{height, border: 'solid 1px rgba(205, 207, 214, 0.66)'}}>
9+
<div>
10+
<Half bg={color} style={{height: height - 75}} />
11+
<Half bg={`${color}-muted`} style={{height: height - 75}} />
12+
</div>
13+
<Box align='left' px={3} pt={3} pb={2}>
14+
<Text display='block' pb={2} color='charcoal-muted' textTransform='capitalize' fontWeight={500}>
15+
{color}
16+
</Text>
17+
<Half>
18+
<Text fontSize={1} color='charcoal-muted' textTransform='uppercase' fontWeight={500} title={color}>
19+
{theme.colors[color]}
20+
</Text>
21+
</Half>
22+
<Half fontSize={1} align='right' textTransform='uppercase' fontWeight={500}>
23+
<Text color='gray' title={`${color}-muted`}>
24+
{theme.colors[`${color}-muted`]}
25+
</Text>
26+
</Half>
27+
</Box>
28+
</Card>
29+
)
30+
}
31+
32+
Swatch.defaultProps = {
33+
width: 233,
34+
height: 160,
35+
m: 3
36+
}
37+
38+
export default withTheme(Swatch)

‎components/Text.jsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import styled from 'styled-components'
2+
import {
3+
color,
4+
space,
5+
width,
6+
fontSize,
7+
fontWeight,
8+
textAlign,
9+
responsiveStyle,
10+
style
11+
} from 'styled-system'
12+
13+
const display = responsiveStyle({
14+
prop: 'display',
15+
cssProperty: 'display'
16+
})
17+
18+
const textTransform = style({
19+
prop: 'textTransform',
20+
cssProperty: 'textTransform'
21+
})
22+
23+
export const Text = styled.span`
24+
${color}
25+
${space}
26+
${width}
27+
${fontSize}
28+
${fontWeight}
29+
${textAlign}
30+
${display}
31+
${textTransform}
32+
`
33+
Text.defaultProps = {
34+
fontSize: 2,
35+
fontWeight: 400
36+
}

0 commit comments

Comments
 (0)