Skip to content
This repository was archived by the owner on Aug 9, 2020. It is now read-only.

Commit e49fff4

Browse files
author
Zach Sherman
authored
Merge pull request #127 from timberio/enhancement/timber-styles
[Enhancement] Timber Styles
2 parents 95537c7 + dad5247 commit e49fff4

File tree

24 files changed

+610
-154
lines changed

24 files changed

+610
-154
lines changed

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,17 @@
7676
"history": "^4.7.2",
7777
"html-minifier": "^3.5.16",
7878
"js-search": "^1.4.2",
79+
"markdown-toc": "^1.2.0",
7980
"minimist": "^1.2.0",
8081
"ncp": "^2.0.0",
8182
"progress": "^2.0.0",
8283
"prop-types": "^15.6.1",
8384
"react": "^16.4.0",
85+
"react-click-outside": "^3.0.1",
86+
"react-content-loader": "^3.1.2",
8487
"react-dom": "^16.4.0",
8588
"react-emotion": "^9.1.3",
89+
"react-feather": "^1.1.0",
8690
"react-helmet": "^5.2.0",
8791
"react-highlight-words": "^0.11.0",
8892
"react-markdown": "^3.3.2",

‎src/core/filesystem.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const fs = require('fs-extra')
22
const syspath = require('path')
33
const { ncp } = require('ncp')
4+
const toc = require('markdown-toc')
45
const { parseFrontmatter } = require('../utils/frontmatter')
56

67
const INDEX_FILES = ['index', 'readme']
@@ -154,6 +155,10 @@ async function getContent (path) {
154155
return content
155156
}
156157

158+
function getTableOfContents (content) {
159+
return toc(content).json
160+
}
161+
157162
/**
158163
* because of https://github.com/zeit/pkg/issues/420
159164
*/
@@ -171,6 +176,7 @@ module.exports = {
171176
checkForConflicts,
172177
dirTree,
173178
getContent,
179+
getTableOfContents,
174180
copyDir,
175181
}
176182

‎src/core/output.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const fs = require('fs-extra')
22
const syspath = require('path')
33
const { generateDatabase } = require('./database')
44
const { templateForProduction } = require('./template')
5-
const { getContent } = require('./filesystem')
5+
const { getContent, getTableOfContents } = require('./filesystem')
66

77
module.exports = async (entrypoints, props) => {
88
const db = await generateDatabase(props.manifest)
@@ -19,7 +19,10 @@ module.exports = async (entrypoints, props) => {
1919
const outputJson = syspath.join(item.outputDir, 'index.json')
2020

2121
await fs.outputFile(outputHtml, template)
22-
await fs.outputJson(outputJson, { content: item.content })
22+
await fs.outputJson(outputJson, {
23+
content: item.content,
24+
toc: getTableOfContents(item.content),
25+
})
2326
}
2427

2528
if (items) {

‎src/core/socket.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const fs = require('fs')
22
const WebSocket = require('ws')
3-
const { getContent } = require('./filesystem')
3+
const { getContent, getTableOfContents } = require('./filesystem')
44

55
module.exports = (server) => {
66
const socket = new WebSocket.Server({
@@ -13,7 +13,10 @@ module.exports = (server) => {
1313
client.on('message', file => {
1414
const send = async () => {
1515
const content = await getContent(file)
16-
client.send(content)
16+
client.send(JSON.stringify({
17+
content,
18+
toc: getTableOfContents(content),
19+
}))
1720
}
1821

1922
send()

‎src/core/syntax.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@ module.exports = async (config) => {
77
const {
88
temp,
99
languages,
10-
theme_custom,
10+
syntax,
1111
} = config
1212

1313
const rsh = syspath.dirname(require.resolve('react-syntax-highlighter'))
1414
const langs = languages
15-
.filter(lang => fs.pathExistsSync(`${rsh}/languages/prism/${lang}`))
16-
.map(lang => `{ name: '${lang}', func: require('${rsh}/languages/prism/${lang}').default },`)
15+
.filter(lang => fs.pathExistsSync(`${rsh}/languages/${syntax.renderer}/${lang}.js`))
16+
.map(lang => `{ name: '${lang}', func: require('${rsh}/languages/${syntax.renderer}/${lang}').default },`)
1717
.join('\n')
1818

1919
const content = `module.exports = {
20-
theme: require('${rsh}/styles/prism/${theme_custom.syntaxTheme}').default,
20+
theme: require('${rsh}/styles/${syntax.renderer}/${syntax.theme}').default,
2121
languages: [${langs}]
2222
}`
2323

‎src/utils/config.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,12 @@ const DEFAULT_CONFIG = {
2626
languages: ['bash', 'json'],
2727
header_links: [],
2828
theme: 'default',
29-
theme_custom: {
30-
syntaxTheme: 'prism',
31-
syntaxLineNumbers: false,
29+
prefix_titles: true,
30+
table_of_contents: true,
31+
syntax: {
32+
theme: 'atom-one-light',
33+
renderer: 'hljs',
34+
lineNumbers: true,
3235
},
3336
}
3437

‎themes/default/application/styles.js‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ const fontMain = css`
1414
`
1515

1616
const fontMono = css`
17-
font-family: 'Menlo', monospace;
18-
line-height: 1;
19-
font-size: 1.1rem;
17+
font-family: "Menlo", "Source Code Pro", "Inconsolata","monospace", serif;
18+
font-size: 13px;
19+
line-height: 21px;
2020
`
2121

2222
export const Wrapper = styled('div')`
@@ -36,10 +36,22 @@ export const Wrapper = styled('div')`
3636
export const WrapperNav = styled('nav')`
3737
flex: 1;
3838
background: linear-gradient(90deg, #F0F2F4 0%, #F5F7F9 100%);
39+
background: #FAFAFD;
3940
border-right: 1px solid #E6E9EB;
40-
min-width: 250px;
41+
box-shadow: inset -4px 0px 2px -2px rgba(202, 209, 226, 0.2);
4142
text-align: right;
4243
overflow: auto;
44+
45+
@media (min-width: 850px) {
46+
min-width: 270px;
47+
max-width: 270px;
48+
}
49+
50+
@media (min-width: 1450px) {
51+
min-width: initial;
52+
max-width: initial;
53+
}
54+
4355
@media (max-width: 850px) {
4456
flex: 0 auto;
4557
overflow: hidden;

‎themes/default/components/container.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import styled from 'react-emotion'
2+
3+
export default styled('div')`
4+
width: 1024px;
5+
margin: 0 auto;
6+
`

‎themes/default/index.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import React from 'react'
22
import ReactDOM from 'react-dom'
33
import { Router } from 'react-router-dom'
44
import { hydrate } from 'emotion'
5+
import { registerLanguage as registerHighlight } from 'react-syntax-highlighter/light'
6+
import { registerLanguage as registerPrism } from 'react-syntax-highlighter/prism-light'
7+
import { languages } from '@codegen/loadSyntax' // eslint-disable-line
58
import history from './history'
69
import App from './application'
710

@@ -15,6 +18,17 @@ const render = ReactDOM.render
1518
isDev && module.hot && module.hot.accept()
1619
_EMOTION_IDS_ && hydrate(_EMOTION_IDS_)
1720

21+
// Ensure required languages are registered
22+
const renderers = {
23+
hljs: registerHighlight,
24+
prism: registerPrism,
25+
}
26+
27+
if (window) {
28+
const register = renderers[process.env.PROPS.config.syntax.renderer]
29+
languages.forEach(lang => register(lang.name, lang.func))
30+
}
31+
1832
render(
1933
<Router history={history}>
2034
<App {...process.env.PROPS} />

‎themes/default/loading/index.js‎

Lines changed: 125 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,134 @@
11
import React from 'react'
2+
import ContentLoader from 'react-content-loader'
23
import { Wrapper } from './styles'
34

5+
// @TODO: Make this a little more responsive by passing in 400 for the height
6+
// on smaller screens
47
export default function (props) {
58
return (
69
<Wrapper>
7-
<div />
8-
<div />
9-
<div />
10-
<div />
11-
<div />
10+
<ContentLoader
11+
height={160}
12+
width={800}
13+
speed={1}
14+
primaryColor="#F4F5F6"
15+
secondaryColor="#ececf1"
16+
{...props}
17+
>
18+
<rect x="0" y="0" rx="3" ry="3" width="10%" height="13" />
19+
<rect x="12%" y="0" rx="3" ry="3" width="25%" height="13" />
20+
<rect x="0" y="30" rx="3" ry="3" width="30%" height="10" />
21+
<rect x="32%" y="30" rx="3" ry="3" width="55%" height="10" />
22+
<rect x="89%" y="30" rx="3" ry="3" width="10%" height="10" />
23+
<rect x="0" y="60" rx="3" ry="3" width="30%" height="10" />
24+
<rect x="32%" y="60" rx="3" ry="3" width="55%" height="10" />
25+
<rect x="89%" y="60" rx="3" ry="3" width="10%" height="10" />
26+
<rect x="0" y="90" rx="3" ry="3" width="30%" height="10" />
27+
<rect x="32%" y="90" rx="3" ry="3" width="55%" height="10" />
28+
<rect x="89%" y="90" rx="3" ry="3" width="10%" height="10" />
29+
<rect x="0" y="130" rx="3" ry="3" width="100%" height="1" />
30+
</ContentLoader>
31+
<ContentLoader
32+
height={160}
33+
width={800}
34+
speed={1}
35+
primaryColor="#F4F5F6"
36+
secondaryColor="#ececf1"
37+
{...props}
38+
>
39+
<rect x="0" y="0" rx="3" ry="3" width="10%" height="13" />
40+
<rect x="12%" y="0" rx="3" ry="3" width="25%" height="13" />
41+
<rect x="0" y="30" rx="3" ry="3" width="30%" height="10" />
42+
<rect x="32%" y="30" rx="3" ry="3" width="55%" height="10" />
43+
<rect x="89%" y="30" rx="3" ry="3" width="10%" height="10" />
44+
<rect x="0" y="60" rx="3" ry="3" width="30%" height="10" />
45+
<rect x="32%" y="60" rx="3" ry="3" width="55%" height="10" />
46+
<rect x="89%" y="60" rx="3" ry="3" width="10%" height="10" />
47+
<rect x="0" y="90" rx="3" ry="3" width="30%" height="10" />
48+
<rect x="32%" y="90" rx="3" ry="3" width="55%" height="10" />
49+
<rect x="89%" y="90" rx="3" ry="3" width="10%" height="10" />
50+
<rect x="0" y="130" rx="3" ry="3" width="100%" height="1" />
51+
</ContentLoader>
52+
<ContentLoader
53+
height={140}
54+
width={800}
55+
speed={1}
56+
primaryColor="#F4F5F6"
57+
secondaryColor="#ececf1"
58+
{...props}
59+
>
60+
<rect x="0" y="0" rx="3" ry="3" width="70" height="13" />
61+
<rect x="80" y="0" rx="3" ry="3" width="100" height="13" />
62+
<rect x="190" y="0" rx="3" ry="3" width="10" height="13" />
63+
<rect x="15" y="30" rx="3" ry="3" width="130" height="13" />
64+
<rect x="155" y="30" rx="3" ry="3" width="130" height="13" />
65+
<rect x="15" y="60" rx="3" ry="3" width="90" height="13" />
66+
<rect x="115" y="60" rx="3" ry="3" width="60" height="13" />
67+
<rect x="185" y="60" rx="3" ry="3" width="60" height="13" />
68+
<rect x="0" y="90" rx="3" ry="3" width="30" height="13" />
69+
<rect x="0" y="130" rx="3" ry="3" width="100%" height="1" />
70+
</ContentLoader>
71+
<ContentLoader
72+
height={160}
73+
width={800}
74+
speed={1}
75+
primaryColor="#F4F5F6"
76+
secondaryColor="#ececf1"
77+
{...props}
78+
>
79+
<rect x="0" y="0" rx="3" ry="3" width="10%" height="13" />
80+
<rect x="12%" y="0" rx="3" ry="3" width="25%" height="13" />
81+
<rect x="0" y="30" rx="3" ry="3" width="30%" height="10" />
82+
<rect x="32%" y="30" rx="3" ry="3" width="55%" height="10" />
83+
<rect x="89%" y="30" rx="3" ry="3" width="10%" height="10" />
84+
<rect x="0" y="60" rx="3" ry="3" width="30%" height="10" />
85+
<rect x="32%" y="60" rx="3" ry="3" width="55%" height="10" />
86+
<rect x="89%" y="60" rx="3" ry="3" width="10%" height="10" />
87+
<rect x="0" y="90" rx="3" ry="3" width="30%" height="10" />
88+
<rect x="32%" y="90" rx="3" ry="3" width="55%" height="10" />
89+
<rect x="89%" y="90" rx="3" ry="3" width="10%" height="10" />
90+
<rect x="0" y="130" rx="3" ry="3" width="100%" height="1" />
91+
</ContentLoader>
92+
<ContentLoader
93+
height={140}
94+
width={800}
95+
speed={1}
96+
primaryColor="#F4F5F6"
97+
secondaryColor="#ececf1"
98+
{...props}
99+
>
100+
<rect x="0" y="0" rx="3" ry="3" width="70" height="13" />
101+
<rect x="80" y="0" rx="3" ry="3" width="100" height="13" />
102+
<rect x="190" y="0" rx="3" ry="3" width="10" height="13" />
103+
<rect x="15" y="30" rx="3" ry="3" width="130" height="13" />
104+
<rect x="155" y="30" rx="3" ry="3" width="130" height="13" />
105+
<rect x="15" y="60" rx="3" ry="3" width="90" height="13" />
106+
<rect x="115" y="60" rx="3" ry="3" width="60" height="13" />
107+
<rect x="185" y="60" rx="3" ry="3" width="60" height="13" />
108+
<rect x="0" y="90" rx="3" ry="3" width="30" height="13" />
109+
<rect x="0" y="130" rx="3" ry="3" width="100%" height="1" />
110+
</ContentLoader>
111+
<ContentLoader
112+
height={160}
113+
width={800}
114+
speed={1}
115+
primaryColor="#F4F5F6"
116+
secondaryColor="#ececf1"
117+
{...props}
118+
>
119+
<rect x="0" y="0" rx="3" ry="3" width="10%" height="13" />
120+
<rect x="12%" y="0" rx="3" ry="3" width="25%" height="13" />
121+
<rect x="0" y="30" rx="3" ry="3" width="30%" height="10" />
122+
<rect x="32%" y="30" rx="3" ry="3" width="55%" height="10" />
123+
<rect x="89%" y="30" rx="3" ry="3" width="10%" height="10" />
124+
<rect x="0" y="60" rx="3" ry="3" width="30%" height="10" />
125+
<rect x="32%" y="60" rx="3" ry="3" width="55%" height="10" />
126+
<rect x="89%" y="60" rx="3" ry="3" width="10%" height="10" />
127+
<rect x="0" y="90" rx="3" ry="3" width="30%" height="10" />
128+
<rect x="32%" y="90" rx="3" ry="3" width="55%" height="10" />
129+
<rect x="89%" y="90" rx="3" ry="3" width="10%" height="10" />
130+
<rect x="0" y="130" rx="3" ry="3" width="100%" height="1" />
131+
</ContentLoader>
12132
</Wrapper>
13133
)
14134
}

0 commit comments

Comments
 (0)