Process images in markdown to be served by the API server


1.0.33 years ago3 years agoMinified + gzip package size for @dimerapp/image in KB


Dimer App

Dimer is an open source project and CMS to help you publish your documentation online.

We believe every project/product is incomplete without documentation.
We want to help you publish user facing documentation, without worrying about tools or code to write.

Dimer Image

Handle images detected inside markdown and process them to be served via HTTP server

travis-image appveyor-image npm-image

@dimerapp/markdown can detect assets (aka images) inside the Markdown documents. This package can be used to process those images and serve them via HTTP server.

How it works?

Let's start with the example markdown document and understand the flow on how images are processed.

This is an image reference ![](../images/dropdown.png)
  1. The image ../images/dropdown.png will be converted to a buffer and moved inside dist/__assets folder.
  2. During move operation, a HASH of file contents will be generated to avoid duplicate files.
  3. A thumbnail for jpg and png images is generated to render blur images and load actual image in background (has to be handled on Frontend).


npm i @dimerapp/image

# yarn
yarn add @dimerapp/image


const Markdown = require('@dimerapp/markdown')
const Context = require('@dimerapp/context')

const ctx = new Context(__dirname)

// This must be done by parsing the config file
ctx.set('lib', 'config', {
  compilerOptions: {}

const img = new Image(ctx)

const markdown = new Markdown(contents, {
  onUrl: function (url) {
    if (img.isImage(url)) {
      const response = await img.move(url, dirname(filePath))

      return img.toDimerNode(response)

Change log

The change log can be found in the CHANGELOG.md file.


Everyone is welcome to contribute. Please take a moment to review the contributing guidelines.

Authors & License

thetutlage and contributors.

MIT License, see the included MIT file.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.