remark-utils
v1.2.3
Published
Reusable utils to build markdown service power by remarkjs and elasticlunr.
Downloads
18
Maintainers
Readme
Remark utils
Reusable utils to build markdown service power by remarkjs and elasticlunr.
Installation
$ yarn add remark-utils
Usage
mdToHtml
type MdToHtml = (markdownContent: string, options: *) => string;
import { mdToHtml } from 'remark-utils';
const html = mdToHtml('# heading');
// <h1 id="heading"><a href="#heading" aria-hidden class="anchor"><svg aria-hidden="true" height="24" version="1.1" viewBox="0 0 24 24" width="24"><path fill-rule="evenodd" d="..."></path></svg></a>heading</h1>
mdToElasticlunrIndex
type IndexingItem = {
title: string,
body: string,
url: string,
};
type MdToElasticlunrIndex = (
filenames: Array<string>,
indexItemMapper: (IndexingItem, filename: string) => IndexingItem,
) => string;
// Server side
import glob from 'glob';
import { mdToElasticlunrIndex } from 'remark-utils';
const filenames = glob.sync('path-to-md/**/*.md');
const index: string = mdToElasticlunrIndex(filenames, i => i);
// Client side
import { Index } from 'elasticlunr';
const idx = Index.load(JSON.parse(index));
const results = idx
.search('query', {})
.map(({ ref }) => idx.documentStore.getDoc(ref))
.map(({ url, title, body }: IndexingItem) => ({
url,
title: highlightQuery(title),
body: highlightQuery(body),
}));
Check the tests and Query from Index section for more details.
API
Options
Use with lazysizes
// Server side preprocess
const base64Json = {
'../images/AWS_Icons-300x200.png': {
imagePath: '../images/AWS_Icons-300x200.png',
width: 300,
height: 200,
format: 'png',
base64: 'data:image/png;base64,mock',
},
};
// Mapping
const html = mdToHtml(
`![AWS_Icons-300x200.png](../images/AWS_Icons-300x200.png 'aws')`,
{
lazysizes: {
base64Mapper: (imagePath: string) => base64Json[imagePath],
srcAttr: 'data-src',
},
},
);
// Output html:
<div style="max-width: 300px;">
<div style="width: 100%; padding-bottom: 66.66%; height: 0; position: relative;">
<img
src="data:image/png;base64,mock"
alt="AWS_Icons-300x200.png"
title="aws" data-src="../images/AWS_Icons-300x200.png" class="lazyload"
style="position: absolute; width: 100%;">
</div>
</div>
// Client side
import('lazysizes').then(({ default: lazysizes }) => {
lazysizes.init();
});
- https://github.com/aFarkas/lazysizes
Development
- node 11.9.0
- yarn 1.13.0
$ yarn install --pure-lockfile
Test
$ yarn run format
$ yarn run eslint
$ yarn run flow
$ yarn run test:watch
$ yarn run build
Publish
$ npm version patch
$ npm run changelog
git commit & push
CONTRIBUTING
- ⇄ Pull requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.
- Pull requests must be accompanied by passing automated tests.