Skip to content

Commit 554e07f

Browse files
johnojohno
committed
Add component docs, use theme-ui
1 parent 9e1ca6c commit 554e07f

22 files changed

Lines changed: 1544 additions & 1458 deletions

‎.eslintignore‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,3 @@ docsearch.min.js
77
packages/gatsby-theme-blocks-docs/src/components/header.js
88
packages/gatsby-theme-blocks-docs/src/components/layout.js
99
packages/gatsby-theme-blocks-docs/src/components/search.js
10-
11-
# tmp
12-
examples/vue
13-
packages/vue

‎docs/components/background-gradient.mdx‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,22 @@ import { BackgroundGradient } from '@blocks/kit'
22

33
# BackgroundGradient
44

5-
```js
6-
import { BackgroundGradient } from '@blocks/kit'
7-
```
8-
95
The BackgroundGradient is a tiny little component to set a gradient. You
106
can also optionally pass it `random={true}` to get a new gradient each time
117
it renders.
128

9+
```.js
1310
<BackgroundGradient random={true}>
11+
<h1>Hello, world!</h1>
12+
</BackgroundGradient>
13+
```
1414

15-
### Hello, world!
16-
17-
I'm MDX inside BackgroundGradient.
15+
## Usage
1816

19-
</BackgroundGradient>
17+
```js
18+
import { BackgroundGradient } from '@blocks/kit'
19+
```
2020

2121
## Table of properties
2222

23-
Prop | Default | Description
24-
---- | ------- | -----------
25-
`start` | `rebeccapurple` | Starting color for the gradient
26-
`end` | None | Ending color for the gradient
27-
`stop` | `80%` | Location where the ending color gradient takes over
28-
`angle` | `30` | Angle of the gradient
29-
`random` | `false` | Random gradient each time.
23+
<TableOfProps component={BackgroundGradient} />

‎docs/components/gist.mdx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Gist } from '@blocks/kit'
2+
3+
# Gist
4+
5+
The Gist component embeds a GitHub Gist.
6+
7+
```.js
8+
<Gist id="d2c26874612c907162792f55f5cf4124" />
9+
```
10+
11+
## Usage
12+
13+
```js
14+
import { Gist } from '@blocks/kit'
15+
```
16+
17+
## Table of properties
18+
19+
<TableOfProps component={Gist} />

‎docs/components/text-gradient.mdx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,22 @@ import { TextGradient } from '@blocks/kit'
22

33
# TextGradient
44

5-
```js
6-
import { TextGradient } from '@blocks/kit'
7-
```
8-
95
The TextGradient is a tiny little component to set a text gradient. You
106
can also optionally pass it `random={true}` to get a new gradient each time
117
it renders.
128

9+
```.js
1310
<TextGradient start='#21D4FD' end='#B721FF'>
11+
<h1>Hello, world!</h1>
12+
</TextGradient>
13+
```
1414

15-
# Hello, world!
15+
## Usage
1616

17-
</TextGradient>
17+
```js
18+
import { TextGradient } from '@blocks/kit'
19+
```
1820

1921
## Table of properties
2022

21-
Prop | Default | Description
22-
---- | ------- | -----------
23-
`start` | `rebeccapurple` | Starting color for the gradient
24-
`end` | None | Ending color for the gradient
25-
`stop` | `60%` | Location where the ending color gradient takes over
26-
`angle` | `90` | Angle of the gradient
27-
`random` | `false` | Random gradient each time.
23+
<TableOfProps component={TextGradient} />

‎docs/components/youtube.mdx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { YouTube } from '@blocks/kit'
2+
3+
# YouTube
4+
5+
The YouTube component responsively embeds a YouTube video.
6+
7+
```.js
8+
<YouTube videoId="4fHw4GeW3EU" />
9+
```
10+
11+
## Usage
12+
13+
```js
14+
import { YouTube } from '@blocks/kit'
15+
```
16+
17+
## Table of properties
18+
19+
<TableOfProps component={YouTube} />

‎gatsby-config.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
const path = require('path')
2+
13
module.exports = {
2-
__experimentalThemes: ['gatsby-theme-blocks-docs']
4+
__experimentalThemes: [
5+
{
6+
resolve: 'gatsby-theme-blocks-docs',
7+
options: {}
8+
}
9+
]
310
}

‎package.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"scripts": {
55
"start": "yarn workspace demo start",
66
"build": "lerna run prepare",
7+
"deps-update": "ncu -u && lerna exec \"ncu -u\"",
78
"docs": "gatsby develop",
89
"docs-build": "gatsby build",
910
"docs-deploy": "now && now alias $(pbpaste) mdx-blocks.com && now alias $(pbpaste) www.mdx-blocks.com",
@@ -15,11 +16,11 @@
1516
"demo"
1617
],
1718
"devDependencies": {
18-
"gatsby": "^2.3.31",
19-
"husky": "^1.2.0",
20-
"lerna": "^3.13.1",
21-
"lint-staged": "^8.1.0",
22-
"prettier": "^1.15.3"
19+
"gatsby": "^2.5.2",
20+
"husky": "^2.3.0",
21+
"lerna": "^3.14.1",
22+
"lint-staged": "^8.1.7",
23+
"prettier": "^1.17.1"
2324
},
2425
"husky": {
2526
"hooks": {

‎packages/editor/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,25 @@
1010
"@blocks/serializer": "^0.0.20",
1111
"@convertkit/slate-lists": "^0.2.2",
1212
"@emotion/core": "^10.0.10",
13-
"@emotion/styled": "^10.0.10",
13+
"@emotion/styled": "^10.0.11",
1414
"@material-ui/core": "^3.9.3",
1515
"@material-ui/icons": "^3.0.2",
16-
"@reach/alert-dialog": "^0.2.3",
16+
"@reach/alert-dialog": "^0.2.8",
1717
"@reach/menu-button": "^0.1.17",
1818
"@slate-editor/utils": "^5.1.0",
19-
"@styled-system/edit": "^0.0.4",
19+
"@styled-system/edit": "^0.0.5",
2020
"emotion-theming": "^10.0.10",
2121
"escape-string-regexp": "^2.0.0",
2222
"image-extensions": "^1.1.0",
2323
"immutable": "^4.0.0-rc.12",
2424
"lodash.omit": "^4.5.0",
2525
"raw-loader": "^2.0.0",
26-
"react-live": "^2.0.1",
26+
"react-live": "^2.1.1",
2727
"react-simple-icons": "^1.0.0-beta.5",
28-
"slate": "0.45.1",
28+
"slate": "0.47.2",
2929
"slate-deep-table": "^0.8.0",
30-
"slate-react": "^0.21.20",
30+
"slate-react": "^0.22.2",
3131
"slate-soft-break": "^0.9.0",
32-
"theme-ui": "^0.0.10"
32+
"theme-ui": "^0.0.14"
3333
}
3434
}

‎packages/gatsby-theme-blocks-docs/gatsby-config.js‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,34 @@
1-
module.exports = {
2-
plugins: [
3-
'gatsby-plugin-react-helmet',
4-
'gatsby-plugin-emotion',
5-
'gatsby-plugin-catch-links',
6-
{
7-
resolve: 'gatsby-plugin-mdx',
8-
options: {
9-
extensions: ['.mdx', '.md'],
10-
remarkPlugins: [require('remark-slug'), require('remark-emoji')]
1+
module.exports = () => {
2+
return {
3+
plugins: [
4+
'gatsby-plugin-react-helmet',
5+
'gatsby-plugin-emotion',
6+
'gatsby-plugin-catch-links',
7+
{
8+
resolve: 'gatsby-plugin-mdx',
9+
options: {
10+
extensions: ['.mdx', '.md'],
11+
remarkPlugins: [require('remark-slug'), require('remark-emoji')]
12+
}
13+
},
14+
{
15+
resolve: 'gatsby-plugin-google-fonts',
16+
options: {
17+
fonts: ['roboto mono']
18+
}
19+
},
20+
{
21+
resolve: 'gatsby-plugin-page-creator',
22+
options: {
23+
path: 'docs'
24+
}
25+
},
26+
{
27+
resolve: 'gatsby-plugin-compile-es6-packages',
28+
options: {
29+
modules: ['@blocks/editor', 'gatsby-theme-blocks-docs', 'theme-ui']
30+
}
1131
}
12-
},
13-
{
14-
resolve: 'gatsby-plugin-google-fonts',
15-
options: {
16-
fonts: ['roboto mono']
17-
}
18-
},
19-
{
20-
resolve: 'gatsby-plugin-page-creator',
21-
options: {
22-
path: 'docs'
23-
}
24-
},
25-
{
26-
resolve: 'gatsby-plugin-compile-es6-packages',
27-
options: {
28-
modules: ['@blocks/editor', 'gatsby-theme-blocks-docs', 'theme-ui']
29-
}
30-
}
31-
]
32+
]
33+
}
3234
}

‎packages/gatsby-theme-blocks-docs/package.json‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,38 +9,37 @@
99
"clean": "gatsby clean"
1010
},
1111
"devDependencies": {
12-
"gatsby": "^2.3.24"
12+
"gatsby": "^2.5.2"
1313
},
1414
"dependencies": {
1515
"@blocks/editor": "^0.0.20",
1616
"@blocks/kit": "^0.0.20",
1717
"@emotion/core": "^10.0.10",
18-
"@emotion/styled": "^10.0.10",
19-
"@mdx-js/mdx": "^1.0.15",
20-
"@mdx-js/react": "^1.0.15",
21-
"@mdx-js/runtime": "^1.0.15",
18+
"@emotion/styled": "^10.0.11",
19+
"@mdx-js/mdx": "^1.0.19",
20+
"@mdx-js/react": "^1.0.16",
21+
"@mdx-js/runtime": "^1.0.19",
2222
"@reach/router": "^1.2.1",
23-
"@reach/skip-nav": "^0.1.2",
23+
"@reach/skip-nav": "^0.1.3",
2424
"@rebass/emotion": "^3.1.0",
25-
"@styled-system/css": "^1.0.3",
26-
"emotion-mdx": "^1.0.0-6",
27-
"emotion-theming": "^10.0.10",
28-
"gatsby-plugin-catch-links": "^2.0.13",
25+
"@styled-system/css": "^2.0.2",
26+
"gatsby-plugin-catch-links": "^2.0.14",
2927
"gatsby-plugin-compile-es6-packages": "^1.1.0",
3028
"gatsby-plugin-emotion": "^4.0.6",
31-
"gatsby-plugin-google-fonts": "^0.0.4",
29+
"gatsby-plugin-google-fonts": "^1.0.0",
3230
"gatsby-plugin-mdx": "1.0.2-1",
33-
"gatsby-plugin-page-creator": "^2.0.12",
31+
"gatsby-plugin-page-creator": "^2.0.13",
3432
"gatsby-plugin-react-helmet": "^3.0.12",
33+
"gatsby-source-filesystem": "^2.0.36",
3534
"is-absolute-url": "^3.0.0",
3635
"lodash.flatten": "^4.4.0",
3736
"prism-react-renderer": "^0.1.6",
3837
"react": "^16.8.6",
3938
"react-dom": "^16.8.6",
40-
"react-helmet": "^5.2.0",
41-
"react-live": "^2.0.1",
39+
"react-helmet": "^5.2.1",
40+
"react-live": "^2.1.1",
4241
"remark-emoji": "^2.0.2",
4342
"remark-slug": "^5.1.1",
44-
"styled-system": "^4.1.0"
43+
"theme-ui": "^0.0.14"
4544
}
4645
}

0 commit comments

Comments
 (0)