remark-utils

Reusable utils to build markdown service power by remarkjs and elasticlunr.

Usage no npm install needed!

<script type="module">
  import remarkUtils from 'https://cdn.skypack.dev/remark-utils';
</script>

README

Remark utils

Reusable utils to build markdown service power by remarkjs and elasticlunr.

Travis Codecov Status npm package npm downloads

prettier license

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

src/utils/defaultOptions.js

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();
});

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.

CHANGELOG

LICENSE