Skip to content

Commit a0e55ff

Browse files
johnojohno
committed
More cleanup and reorg
1 parent e0ec450 commit a0e55ff

9 files changed

Lines changed: 401 additions & 648 deletions

File tree

‎README.md‎

Lines changed: 17 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -5,62 +5,36 @@ their editor
55

66
Blocks is a rich text editor with all the capabilities of components thanks to [MDX][mdx].
77
It's a powerful WYSIWYG (what you see is what you get) built for the content web. You can
8-
choose a block from an ever-expanding library or even install your own from [npm][].
8+
choose a Block from an ever-expanding library or even install your own from [npm][].
99

10-
## What is a block?
10+
## What is a Block?
1111

12-
A block refers to a piece of content or a component. It's a section of your content while
12+
A Block refers to a piece of content or a component. It's a section of your content while
1313
a document is a collection of blocks.
1414

1515
Blocks can be simple like a paragraph of text or even a box with a tomato background color.
1616
Blocks can be complex like an embedded spreadsheet or a chart that fetches live data.
1717

18-
### See it in action
18+
Blocks provides a UI for you to drop in and modify a Block. However, underneath the covers
19+
it's JSX:
1920

20-
EMBED A GIF HERE WHEN THE MVP IS DONE
21+
```md
22+
# Below is a YouTube video
2123

22-
## Features
23-
24-
- 📸**Customizable**: Render your own components, or choose your favorite theme
25-
- 📨**Open and authorable**: Underneath it's [MDX][mdx], not a JSON schema or HTML
26-
- 🔐**Zero lock in**: You own your content, Blocks just makes it nicer to edit
27-
- 🖼**WYSIWYG**: See what will be published in real time
28-
29-
### Blocks
24+
<Youtube id="1234" />
3025

31-
The default editor offers an extensive library of pre-made blocks:
26+
And a GitHub Gist:
3227

33-
- [ ] checklist
34-
- [ ] link unfurl
35-
- [ ] tables
36-
- [ ] spreadsheet
37-
- [ ] image gallery
38-
- [ ] twitter card
39-
- [ ] instagram card
40-
- [ ] syntax highlighting
41-
- [ ] live editor playground
42-
- [ ] github issue
43-
- [ ] github gist
44-
- [ ] github interlinking (between documents in the same repo)
45-
- [ ] text highlighting
46-
- [ ] text coloring
47-
- [ ] bar chart
48-
- [ ] area chart
49-
- [ ] donut chart
50-
- [ ] progress bar
28+
<Gist id="5678" />
29+
```
5130

52-
## How does it work?
53-
54-
Technically speaking, it is a block-based editor backed by [MDX][mdx] and the
55-
[React][react] ecosystem. The editor is embedded into a GitHub compatible CMS
56-
powered by [Netlify Identity][netlify-identity] and [Gatsby][gatsby]. When you
57-
edit a document it's automatically synced to GitHub as a commit giving you a
58-
full history of all edits.
31+
## Features
5932

60-
Blocks maintains no server side element and never sees your data. You own your content.
33+
- 📸**Customizable**: Render your own components, or choose your favorite theme
34+
- 📨**Open and [authorable][]**: Underneath it's [MDX][mdx], not a JSON schema or HTML
35+
- 🔐**Zero lock-in**: You own your content, Blocks just makes it nicer to edit
36+
- 🖼**WYSIWYG**: See what will be published as you edit
6137

6238
[mdx]: https://mdxjs.com/
6339
[npm]: https://npmjs.com/
64-
[react]: https://reactjs.org/
65-
[gatsby]: https://www.gatsbyjs.org/
66-
[netlify-identity]: https://www.netlify.com/docs/identity/
40+
[authorable]: https://johno.com/authorable

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
{
22
"private": true,
33
"name": "blocks",
4-
"workspaces": [
5-
"packages/*"
6-
],
74
"scripts": {
85
"start": "yarn workspace demo start"
96
},
7+
"workspaces": [
8+
"packages/*",
9+
"demo"
10+
],
1011
"devDependencies": {
1112
"husky": "^1.2.0",
1213
"lint-staged": "^8.1.0",

‎packages/TODO.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
### Serialization
2+
3+
- [ ] Fix code blocks (deserialize and serialize)
4+
- [ ] Fix lists
5+
6+
### Themes
7+
8+
- [ ] Use `theme-ui`
9+
- [ ] Dark theme
10+
- [ ] Theme editor
11+
12+
### Blocks
13+
14+
- [ ] checklist
15+
- [ ] link unfurl
16+
- [ ] tables
17+
- [ ] spreadsheet
18+
- [ ] image gallery
19+
- [ ] twitter card
20+
- [ ] instagram card
21+
- [ ] syntax highlighting
22+
- [ ] live editor playground
23+
- [ ] github issue
24+
- [ ] github gist
25+
- [ ] github interlinking (between documents in the same repo)
26+
- [ ] text highlighting
27+
- [ ] text coloring
28+
- [ ] bar chart
29+
- [ ] area chart
30+
- [ ] donut chart
31+
- [ ] progress bar

‎packages/demo/README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Demo
2+
3+
A basic demo for @blocks/editor. It's quite useful for development as well.
4+
5+
## Installation
6+
7+
```sh
8+
yarn
9+
```
10+
11+
## Usage
12+
13+
```sh
14+
yarn workspace demo start
15+
```

‎packages/demo/package.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,11 @@
22
"private": true,
33
"name": "demo",
44
"version": "1.0.0",
5-
"main": "index.js",
6-
"author": "Brent Jackson <jxnblk@gmail.com>",
7-
"license": "MIT",
85
"scripts": {
96
"start": "gatsby develop"
107
},
118
"dependencies": {
12-
"blocks-editor": "0.0.1",
9+
"@blocks/editor": "0.0.0",
1310
"gatsby": "^2.3.25",
1411
"react": "^16.8.6",
1512
"react-dom": "^16.8.6"

‎packages/demo/src/pages/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22

3-
import { serializer, stringifyMDX } from 'blocks-editor/src/lib/mdx-serializer'
4-
import Editor from 'blocks-editor/src/components/Editor'
3+
import { serializer, stringifyMDX } from '@blocks/editor/src/lib/mdx-serializer'
4+
import Editor from '@blocks/editor/src/components/Editor'
55

66
// These are probably gonna change later
77
const __DEVELOPER_SAVE = value => {

‎packages/editor/README.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# @blocks/editor
2+
3+
WYSIWYG editor for the Blocks ecosystem.
4+
5+
[Read the full docs](https://github.com/blocks/blocks)
6+
7+
## Installation
8+
9+
```sh
10+
yarn add @blocks/editor
11+
```
12+
13+
## Usage
14+
15+
```js
16+
import React from 'react'
17+
import { Editor } from '@blocks/editor'
18+
19+
export default () => (
20+
<Editor
21+
initialValue={'# Hello, world!'}
22+
onChange={value => console.log(value)}
23+
/>
24+
)
25+
```

‎packages/editor/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,21 @@
88
"scripts": {},
99
"dependencies": {
1010
"@slate-editor/utils": "^5.1.0",
11-
"emoji-mart": "^2.9.2",
12-
"escape-string-regexp": "^1.0.5",
11+
"emoji-mart": "^2.11.0",
12+
"escape-string-regexp": "^2.0.0",
1313
"image-extensions": "^1.1.0",
1414
"immutable": "^4.0.0-rc.12",
1515
"is-url": "^1.2.4",
16-
"raw-loader": "^1.0.0",
17-
"react-live": "^1.12.0",
16+
"raw-loader": "^2.0.0",
17+
"react-live": "^2.0.1",
1818
"rebass": "^3.1.0",
19-
"remark-mdx": "^0.20.3",
19+
"remark-mdx": "^1.0.8",
2020
"remark-parse": "^6.0.3",
2121
"remark-stringify": "^6.0.4",
22-
"slate": "^0.44.9",
22+
"slate": "^0.45.0",
2323
"slate-deep-table": "^0.8.0",
2424
"slate-mdast-serializer": "^3.0.0",
25-
"slate-react": "^0.21.15",
25+
"slate-react": "^0.21.20",
2626
"unified": "^7.1.0",
2727
"unified-ui": "0.0.3"
2828
},

0 commit comments

Comments
 (0)