ember-cli-remark-static

This addon lets you to add one or more folders with markdown files which are parsed and indexed on build to json element tree and then can be rendered by using provided <Remark/> component.

Works with ember-cli-fastboot and prember.

Install

$ ember install ember-cli-remark-static

Configure content collections

// ember-cli-build.js
let app = new EmberAddon(defaults, {
  remark: {
    collections: {
      // identifier: directory
      'content': 'markdown/content'
    }
  }
});

Subclass Files service for each collection

// app/services/content.js
import FilesService from 'remark/services/files';

export default class ContentFilesService extends FilesService {
  identifier = 'content';
}

Load files index

import Route from '@ember/routing/route';
import { inject as service } from "@ember/service";

export default class ApplicationRoute extends Route {

  @service content;

  async beforeModel() {
    await this.content.load();
  }

}

Load file

let file = this.content.file('hello.md');
await file.load();

Wrap file in a model

// app/models/page.js
import { remark } from 'remark/decorators';
import { reads } from "macro-decorators";

export default class Page {

  constructor({ file }) {
    this.file = file;
  }

  @reads('file.body') body;

  @remark('body')
  tree(node) {
    if(node.tagName === 'a') {
      let { properties: { href } } = node;
      if(href.startsWith('http:') || href.startsWith('https:')) {
        node.properties.target = 'top';
      }
    }
    return node;
  }

  async load() {
    await this.file.load();
    await this.tree.load();
  }

}

let file = this.content.file('hello.md');
let page = new Page({ file });
await page.load();

Render markdown

<div class="route-index">
  <Remark class="remark" @tree={{@model.tree}}/>
</div>

TODO

• components

• assetMap.json

• metadata.json

• File types, properties

• binary files

• Components