https://github.com/threepointone/riki
evil markup for documents
https://github.com/threepointone/riki
Last synced: 2 months ago
JSON representation
evil markup for documents
- Host: GitHub
- URL: https://github.com/threepointone/riki
- Owner: threepointone
- Created: 2015-07-25T04:57:40.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2015-09-07T14:13:02.000Z (over 9 years ago)
- Last Synced: 2025-02-26T00:21:56.516Z (3 months ago)
- Language: JavaScript
- Size: 1.41 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
riki
---
(work in progress)
`npm install riki --save`
Would you like to write your blogposts/README/articles like this?
```js
:js:
import React from 'react';
import {Spring} from 'react-motion'
import {State} from 'react-state';
let box = {
width: 40,
height:40,
backgroundColor: 'red'
}
:md:
*Welcome* to the [react-motion](https://github.com/chenglou/react-motion/) playground!
:render:
{ (state, set) =>
{ value =>
set({top: e.pageY, x: e.pageX})}>
move it move it
}
}
```
And then render it to html/native?
With riki, anything is possible.
[demo - live editor](http://threepointone.github.io/riki/examples/simple)
```js
riki(src, options); // returns {raw: String, content: function -> Array}
```
example
```js
let src = `
:js:
let user = {id: 'threepointone', name: 'Sunil Pai'};
:render:
Hello {user.name}!
`;
let content = riki(src, {
locals: {
React: require('React')
},
transpile: code => babel.transform(code, {stage: 0}).code
}).content();
// gives [
Hello Sunil Pai!], an array of react elements
React.renderToStaticMarkup(content[0]);
// "
Hello Sunil Pai!"
```
options
---
- `locals`: map of locally available references when evaluating. These include stuff like `React`, `require` (needed if you're using `import`), etc
- `transforms`: map of transforms for different 'types'. `js`, and `render` are included by default, so this is where you can pass transforms for markdown, jade, etc
- `regex`: regular expression to detect `:(type):` separators (defaults to `/\n:([a-zA-Z0-9]*):\n/img`)
- `transpile`: function to transform generated javascript before evaluating. use this to pass through babel, etc.
tests
---
`npm test`