@dimerapp/image

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

@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).

Installation

npm i @dimerapp/image

# yarn
yarn add @dimerapp/image

Usage

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.

Contributing

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.