blob: 08cefa63addd1a359f9f6a79defa659669fb0e1d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
<p align="center"><img src="src/assets/icon.svg" /></p>
<h1 align="center"> BENZIN </h1>
<p align="center">
<a href="https://reactjs.org/">React</a> <a href="https://material-ui.com/">Material</a> library for content-display featuring context-aware Markdown rendering.
</p>
<p align="center">
<img src="https://img.shields.io/npm/v/react-benzin?logo=npm" />
<img src="https://img.shields.io/circleci/build/github/eug-vs/react-benzin?logo=circleci" />
<img src="https://img.shields.io/david/eug-vs/react-benzin" />
<img src="https://img.shields.io/github/languages/code-size/eug-vs/react-benzin" />
<img src="https://img.shields.io/npm/l/react-benzin" />
</p>
# Getting started
## Installation
You can easily add **BENZIN** to your project with `npm`:
```bash
$ npm install react-benzin
```
**BENZIN** is designed to work in Material-UI environment, so it's best to use them together:
```bash
$ npm install @material-ui/core
```
## Usage
One can use `$variableName` syntax (with backticks around!) to access `context.variableName` from within markdown.
Consider following markdown **source.md:**
```markdown
# Hello, world!
- I can render markdown
- My name is `$name`
I can also display button below:
`$button`
```
We can render it using `<Markdown>` component:
```typescript
import React from 'react';
import ReactDOM from 'react-dom';
import { Markdown } from 'react-benzin';
import { Button } from '@material-ui/core';
import source from './source.md'; // This import resolves into file url
const name = 'John Doe';
const button = <Button variant="contained" color="primary">Click me</Button>;
ReactDOM.render(<Markdown url={source} context={{ name, button }}/>, document.getElementById('root'));
```
# Development
## Running live demo
To run a live example, clone a repo and execute following commands:
```bash
$ npm i
$ npm start
```
It's worth noticing that presence of React-App in this repo forces us to split some configurations. For example, we have 2 `Typescript` configs: one for `react-scripts` to run live-demo, and the other one to build *distribution files*.
## Running tests
```bash
$ npm test
```
**NOTE**: this command assures that `ESlint` does not throw any warnings and exits with a *non-zero status code* otherwise. That means `CircleCI` tests would fail *even if a single warning is present*. Therefore, you should always locally test your changes before publishing them.
## Building
We've decided to use `Typescript compiler` to transpile our code, since we think `Babel` is a bit of an overkill here.
```bash
$ npm run build
```
This command will generate `dist/` folder ready for distribution, which you of course can explore. Note that `tsc` creates type definitions (`.d.ts`) for every corresponding `.js` file. It's very useful because consumers also get access to them.
## Deploying
Publishing to `npm` is fully automated through **CircleCI** - package is deployed on every push into `master`. Therefore only release *PR*'s should be merged into `master` branch.
Deploying to `gh-pages` is automatically performed on every commit into `develop` branch.
# See also
- [remark](https://github.com/remarkjs/remark)
- [MDX](https://github.com/mdx-js/mdx)
|
