Skip to content

Commit

Permalink
feat: update html output and documentations
Browse files Browse the repository at this point in the history
  • Loading branch information
@tlylt
tlylt committed Jan 9, 2022
1 parent 88043e5 commit 584e116
Show file tree
Hide file tree
Showing 6 changed files with 76 additions and 33 deletions.
51 changes: 46 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,63 @@ Progress bar plugin for markdown-it markdown parser
[![npm version](https://img.shields.io/npm/v/markdown-it-progress)](https://npmjs.org/package/markdown-it-progress)
[![Coverage Status](https://coveralls.io/repos/github/tlylt/markdown-it-progress/badge.svg?branch=main)](https://coveralls.io/github/tlylt/markdown-it-progress?branch=main)

Example Input:
Example input:
<pre><code>
```progressBar
[["a", 2], ["b", 3], ["c", 40]]
```
</code></pre>

Rendered Output:
Rendered output:

![example](static/example.png)
![example](static/demo1.png)

Raw html output:
Raw HTML output:
```html
<svg class="ProgressBar" style="height:25px;width: 300px;display: inline;"><g><defs><clipPath id="ProgressBar-clipPath"><rect width="100%" height="100%" rx="15px" /></clipPath></defs><rect class="ProgressBar-background" width="100%" height="100%" rx="15px" style="fill-opacity: 0.2;fill: cadetblue;"/><rect class="ProgressBar-percentage" width="2%" height="100%" clip-path="url(#ProgressBar-clipPath)" style="fill-opacity: 0.6;fill: #4c90cf;"/><text x="100" y="20" font-size="20" fill="black">a: 2%</text></g></svg><br><svg class="ProgressBar" style="height:25px;width: 300px;display: inline;"><g><defs><clipPath id="ProgressBar-clipPath"><rect width="100%" height="100%" rx="15px" /></clipPath></defs><rect class="ProgressBar-background" width="100%" height="100%" rx="15px" style="fill-opacity: 0.2;fill: cadetblue;"/><rect class="ProgressBar-percentage" width="3%" height="100%" clip-path="url(#ProgressBar-clipPath)" style="fill-opacity: 0.6;fill: #4c90cf;"/><text x="100" y="20" font-size="20" fill="black">b: 3%</text></g></svg><br><svg class="ProgressBar" style="height:25px;width: 300px;display: inline;"><g><defs><clipPath id="ProgressBar-clipPath"><rect width="100%" height="100%" rx="15px" /></clipPath></defs><rect class="ProgressBar-background" width="100%" height="100%" rx="15px" style="fill-opacity: 0.2;fill: cadetblue;"/><rect class="ProgressBar-percentage" width="40%" height="100%" clip-path="url(#ProgressBar-clipPath)" style="fill-opacity: 0.6;fill: #4c90cf;"/><text x="100" y="20" font-size="20" fill="black">c: 40%</text></g></svg>
<div class="ProgressBar" style="display:flex;padding-bottom:5px;"><svg class="ProgressBar-svg" style="height:25px;width:300px;"><defs><clipPath id="ProgressBar-clipPath"><rect width="100%" height="100%" rx="15px" /></clipPath></defs><rect class="ProgressBar-background" width="100%" height="100%" rx="15px" style="fill-opacity:0.2;fill:cadetblue;"/><rect class="ProgressBar-percentage" width="2%" height="100%" clip-path="url(#ProgressBar-clipPath)" style="fill-opacity:0.6;fill:#4c90cf;"/></svg><span style="padding-left:5px;align-self:center;">a: 2%</span></div><div class="ProgressBar" style="display:flex;padding-bottom:5px;"><svg class="ProgressBar-svg" style="height:25px;width:300px;"><defs><clipPath id="ProgressBar-clipPath"><rect width="100%" height="100%" rx="15px" /></clipPath></defs><rect class="ProgressBar-background" width="100%" height="100%" rx="15px" style="fill-opacity:0.2;fill:cadetblue;"/><rect class="ProgressBar-percentage" width="3%" height="100%" clip-path="url(#ProgressBar-clipPath)" style="fill-opacity:0.6;fill:#4c90cf;"/></svg><span style="padding-left:5px;align-self:center;">b: 3%</span></div><div class="ProgressBar" style="display:flex;padding-bottom:5px;"><svg class="ProgressBar-svg" style="height:25px;width:300px;"><defs><clipPath id="ProgressBar-clipPath"><rect width="100%" height="100%" rx="15px" /></clipPath></defs><rect class="ProgressBar-background" width="100%" height="100%" rx="15px" style="fill-opacity:0.2;fill:cadetblue;"/><rect class="ProgressBar-percentage" width="40%" height="100%" clip-path="url(#ProgressBar-clipPath)" style="fill-opacity:0.6;fill:#4c90cf;"/></svg><span style="padding-left:5px;align-self:center;">c: 40%</span></div>
```

Formatted version of the HTML above:
```html
<div class="ProgressBar" style="display:flex;padding-bottom:5px;">
<svg class="ProgressBar-svg" style="height:25px;width:300px;">
<defs>
<clipPath id="ProgressBar-clipPath">
<rect width="100%" height="100%" rx="15px" />
</clipPath>
</defs>
<rect class="ProgressBar-background" width="100%" height="100%" rx="15px" style="fill-opacity:0.2;fill:cadetblue;"/>
<rect class="ProgressBar-percentage" width="2%" height="100%" clip-path="url(#ProgressBar-clipPath)" style="fill-opacity:0.6;fill:#4c90cf;"/>
</svg>
<span style="padding-left:5px;align-self:center;">a: 2%</span>
</div>
<div class="ProgressBar" style="display:flex;padding-bottom:5px;">
<svg class="ProgressBar-svg" style="height:25px;width:300px;">
<defs>
<clipPath id="ProgressBar-clipPath">
<rect width="100%" height="100%" rx="15px" />
</clipPath>
</defs>
<rect class="ProgressBar-background" width="100%" height="100%" rx="15px" style="fill-opacity:0.2;fill:cadetblue;"/>
<rect class="ProgressBar-percentage" width="3%" height="100%" clip-path="url(#ProgressBar-clipPath)" style="fill-opacity:0.6;fill:#4c90cf;"/>
</svg>
<span style="padding-left:5px;align-self:center;">b: 3%</span>
</div>
<div class="ProgressBar" style="display:flex;padding-bottom:5px;">
<svg class="ProgressBar-svg" style="height:25px;width:300px;">
<defs>
<clipPath id="ProgressBar-clipPath">
<rect width="100%" height="100%" rx="15px" />
</clipPath>
</defs>
<rect class="ProgressBar-background" width="100%" height="100%" rx="15px" style="fill-opacity:0.2;fill:cadetblue;"/>
<rect class="ProgressBar-percentage" width="40%" height="100%" clip-path="url(#ProgressBar-clipPath)" style="fill-opacity:0.6;fill:#4c90cf;"/>
</svg>
<span style="padding-left:5px;align-self:center;">c: 40%</span>
</div>
```


## Install

```
Expand Down
19 changes: 8 additions & 11 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,23 @@

const { renderToSvg } = require("./render");

const defaultOptions = {
render: 'svg'
};

const renderMap = {
'svg': renderToSvg
}

module.exports = function progressBarPlugin(md, _pluginOptions) {
const defaultOptions = {
render: 'svg'
};
const renderMap = {
'svg': renderToSvg
}
let pluginOptions = Object.assign({}, defaultOptions);
pluginOptions = Object.assign(pluginOptions, _pluginOptions);
const proxy = (tokens, idx, options, env, self) => self.renderToken(tokens, idx, options);
const defaultFenceRenderer = md.renderer.rules.fence || proxy;
const defaultFenceRenderer = md.renderer.rules.fence;
md.renderer.rules.fence = function (tokens, idx, options, env, slf) {
const token = tokens[idx];
if (token.info.match(/^progressBar/)) {
const data = JSON.parse(token.content);
return data.map(([key, percentage]) => {
return renderMap[pluginOptions.render](key, percentage);
}).join('<br>')
}).join('')
}
return defaultFenceRenderer(tokens, idx, options, env, slf);
}
Expand Down
11 changes: 8 additions & 3 deletions src/index.test.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

28 changes: 14 additions & 14 deletions src/render.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
// `<svg class="ProgressBar" style="height:25px;width: 300px;display: inline;">
// <g>
// <defs>
// <clipPath id="ProgressBar-clipPath">
// <rect width="100%" height="100%" rx="15px" />
// </clipPath>
// </defs>
// <rect class="ProgressBar-background" width="100%" height="100%" rx="15px" style="fill-opacity: 0.2;fill: cadetblue;"/>
// <rect class="ProgressBar-percentage" width="${percentage}%" height="100%" clip-path="url(#ProgressBar-clipPath)" style="fill-opacity: 0.6;fill: #4c90cf;"/>
// <text x="100" y="20" font-size="20" fill="black">${key}: ${percentage}%</text>
// </g>
// </svg>`
// if more than one, each svg is joined by <br
{/* <div class="ProgressBar" style="display:flex;padding-bottom:5px;">
<svg class="ProgressBar-svg" style="height:25px;width:300px;">
<defs>
<clipPath id="ProgressBar-clipPath">
<rect width="100%" height="100%" rx="15px" />
</clipPath>
</defs>
<rect class="ProgressBar-background" width="100%" height="100%" rx="15px" style="fill-opacity:0.2;fill:cadetblue;"/>
<rect class="ProgressBar-percentage" width="20%" height="100%" clip-path="url(#ProgressBar-clipPath)" style="fill-opacity:0.6;fill:#4c90cf;"/>
</svg>
<span style="padding-left:5px;align-self:center;">c: 40%</span>
</div> */}
// if more than one, duplicate the above
function renderToSvg(key, percentage) {
return `<svg class="ProgressBar" style="height:25px;width: 300px;display: inline;"><g><defs><clipPath id="ProgressBar-clipPath"><rect width="100%" height="100%" rx="15px" /></clipPath></defs><rect class="ProgressBar-background" width="100%" height="100%" rx="15px" style="fill-opacity: 0.2;fill: cadetblue;"/><rect class="ProgressBar-percentage" width="${percentage}%" height="100%" clip-path="url(#ProgressBar-clipPath)" style="fill-opacity: 0.6;fill: #4c90cf;"/><text x="100" y="20" font-size="20" fill="black">${key}: ${percentage}%</text></g></svg>`;
return `<div class="ProgressBar" style="display:flex;padding-bottom:5px;"><svg class="ProgressBar-svg" style="height:25px;width:300px;"><defs><clipPath id="ProgressBar-clipPath"><rect width="100%" height="100%" rx="15px" /></clipPath></defs><rect class="ProgressBar-background" width="100%" height="100%" rx="15px" style="fill-opacity:0.2;fill:cadetblue;"/><rect class="ProgressBar-percentage" width="${percentage}%" height="100%" clip-path="url(#ProgressBar-clipPath)" style="fill-opacity:0.6;fill:#4c90cf;"/></svg><span style="padding-left:5px;align-self:center;">${key}: ${percentage}%</span></div>`;
}

module.exports = {
Expand Down
Binary file added static/demo1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed static/example.png
View file
Binary file not shown.

0 comments on commit 584e116

Please sign in to comment.