Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jqhoogland/ddmd
Data-driven markdown. Remark plugins to add forms & plots to your markdown.
https://github.com/jqhoogland/ddmd
Last synced: 10 days ago
JSON representation
Data-driven markdown. Remark plugins to add forms & plots to your markdown.
- Host: GitHub
- URL: https://github.com/jqhoogland/ddmd
- Owner: jqhoogland
- License: mit
- Created: 2022-06-04T06:34:59.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-30T20:20:48.000Z (over 2 years ago)
- Last Synced: 2024-11-19T18:55:03.994Z (2 months ago)
- Language: TypeScript
- Homepage: ddmd.vercel.app
- Size: 3.86 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ddmd
### Data-Driven Markdown
[remark](https://github.com/remarkjs/remark) plugins to add support for forms ([@ddmd/remark-forms](packages/remark-forms)) and graphing via plotly ([@ddmd/remark-plotly](packages/remark-plotly)).
## Installation
```shell
npm install @ddmd/remark-forms @ddmd/remark-plotly
# If you're working with react
npm install @ddmd/react
```
## Demo
### \
// TODO ...
## Usage
Say we have the following file `example.md`:
````md
# My Form
```question
$id: field_1
title: Question 1
description: Fill in a number please.
type: number
```
```plotly
$id: plot_1
data:
- x: [1, 2, 3, 4]
y: [10, 15, 13, 17]
type: "scatter"
- x: [1, 2, 3, 4]
y: [16, 5, 11, 9]
type: "scatter"
```
````
And our module `example.js` looks like this:
```js
import {readSync} from 'to-vfile'
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkForm from 'remark-form'
import remarkPlotly from 'remark-plotly'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
unified()
.use(remarkParse)
.use(remarkForm)
.use(remarkPlotly)
.use(rehypeStringify)
.process(readSync("example.md"))
.then(file => console.log(String(file)));
```
Running this file (and applying some formatting) will give us:
```html
// TODO
```
## API
- [remark-forms](./remark-forms/README.md)
- [remark-plotly](./remark-plotly/README.md)
## Security
Use of `remark-form` and `remark-plotly` only make sense if you also use [rehype](https://github.com/rehypejs/rehype) ([hast](https://github.com/syntax-tree/hast)), so you're opening yourself up to [cross-site scripting (XSS) attacks](https://github.com/rehypejs/rehype). Be careful.
## License
[MIT](./LICENSE.md) © [Health Curious](healthcurious.com)