# ember-cli-markdown-resolver > Ember CLI addon for resolving markdown files in custom folders and retrieving content via a service. Latest version **0.1.3** (published 2018-07-19) · MIT license · 0 weekly downloads ## Install ```sh npm install ember-cli-markdown-resolver pnpm add ember-cli-markdown-resolver yarn add ember-cli-markdown-resolver bun add ember-cli-markdown-resolver ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.3 | | Published | 2018-07-19 | | First published | 2017-09-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | 6.* \|\| >= 7.* | | Dependencies | 5 | | Unpacked size | 246 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Will Viles | | Maintainers | willviles | | Keywords | ember-addon, markdown, md, resolver, frontmatter, content | ## Links - npm: https://www.npmjs.com/package/ember-cli-markdown-resolver - Repository: https://github.com/willviles/ember-cli-markdown-resolver - Homepage: https://github.com/willviles/ember-cli-markdown-resolver#readme - Issues: https://github.com/willviles/ember-cli-markdown-resolver/issues - npm.io page: https://npm.io/package/ember-cli-markdown-resolver ## Dependencies (5) - [broccoli-funnel](https://npm.io/package/broccoli-funnel.md) ^2.0.1 - [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^6.6.0 - [ember-cli-htmlbars](https://npm.io/package/ember-cli-htmlbars.md) ^2.0.1 - [broccoli-merge-trees](https://npm.io/package/broccoli-merge-trees.md) ^2.0.0 - [broccoli-markdown-resolver](https://npm.io/package/broccoli-markdown-resolver.md) ^0.0.1 ## Alternatives - [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads - [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads - [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads - [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads - [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads ## Recent versions - 0.1.3 (latest) — 2018-07-19 - 0.1.2 — 2018-01-02 - 0.1.1 — 2017-10-27 - 0.1.0 — 2017-10-20 - 0.0.4 — 2017-10-19 - 0.0.3 — 2017-09-13 - 0.0.2 — 2017-09-13 - 0.0.1 — 2017-09-12 ## README Ember CLI Markdown Resolver ====== [![Build Status](https://travis-ci.org/willviles/ember-cli-markdown-resolver.svg)](https://travis-ci.org/willviles/ember-cli-markdown-resolver) [![Ember Observer Score](http://emberobserver.com/badges/ember-cli-markdown-resolver.svg)](http://emberobserver.com/addons/ember-cli-markdown-resolver) [![Download count all time](https://img.shields.io/npm/dt/ember-cli-markdown-resolver.svg)]((https://www.npmjs.com/package/ember-cli-markdown-resolver)) [![npm](https://img.shields.io/npm/v/ember-cli-markdown-resolver.svg)](https://www.npmjs.com/package/ember-cli-markdown-resolver) Ember CLI Markdown Resolver is the quickest way to include static markdown content in your Ember.js application using [Broccoli Markdown Resolver](https://github.com/willviles/broccoli-markdown-resolver). ## Installation ``` ember install ember-cli-markdown-resolver ``` ## Configuration The addon requires you specify the locations of markdown files: ```js // config/environment.js ENV['ember-cli-markdown-resolver'] = { folders: { 'guides': 'app/guides' } }; ``` And to populate your folder with markdown content: ```shell . └── app/ └── guides/ ├── quick-start.md ├── examples.md └── examples/ └── first.md ``` ## Usage Ember CLI Markdown Resolver enables markdown content to be retrieved via the `markdownResolver` service. ### `this.get('markdownResolver').file(type, path)` The `file` method returns promisified markdown content, allowing the content to be chainable via `.then()`. ```js // routes/guides/single.js import Route from '@ember/routing/route'; import { get } from '@ember/object'; import { inject } from '@ember/service'; export default Route.extend({ markdownResolver: inject(), model({ path }) { return get(this, 'markdownResolver').file('guides', path); } }); ``` Each markdown file exposes the path, raw content, frontmatter attributes and its children. ```hbs {{model.content}} {{model.path}} {{model.attributes}} {{model.children}} ``` ### `this.get('markdownResolver').tree(type)` The `tree` method returns a tree object for a given folder, allowing menu interfaces to be built from the markdown file structure. ```js // routes/guides.js import Route from '@ember/routing/route'; import { get } from '@ember/object'; import { inject } from '@ember/service'; export default Route.extend({ markdownResolver: inject(), model() { return get(this, 'markdownResolver').tree('guides'); } }); ``` Adding an `order` value to a file's frontmatter will automatically order files within the tree. ```md --- title: Quick Start order: 0 --- Lorem ipsum dolor sit amet... ``` Additionally, adding a `fragmentIdLinks` object to a file's frontmatter will generate a list local fragment identifier links which are used within the `{{markdown-menu-item}}` component. This is handy when you want to link to several individual sections of a large parent markdown file instead of having individual child markdown files. The `fragmentIdLinks` object expects child key-value pairs where each `key` represents the hash fragment id link and each `value` represents the text label to be shown as a child on the `{{markdown-menu}}` component. ```md --- title: Fragment Identifier Links order: 4 fragmentIdLinks: iamsectionone: "Section One" section-two: "Section Two" --- ``` ### I am section one Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... ``` By default, when you click on each `fragmentIdLinks` child link within the `{{markdown-menu-item}}` component it will update the url hash. You can easily override this default behavior by passing an `onClick` closure action into the `{{markdown-menu}}` component. ```hbs {{!-- templates/guides.hbs --}} {{markdown-menu onClick=(action "clickedMenuItemLink")}} ``` ```js // controllers/guides.js import Controller from '@ember/controller'; export default Controller.extend({ actions: { clickedMenuItemLink(fragmentIdLink) { document.querySelector(`#${fragmentIdLink}`).scrollIntoView({ behavior: 'smooth' }); } } }); ``` The addon ships with a `markdown-menu` component which builds a nested list from your file tree and can be styled using your own css. ```hbs {{markdown-menu tree=model}} {{outlet}} ``` ## Helpers Ember CLI Markdown Resolver defines the following template helpers: ```hbs {{get (get-markdown-file 'guides' 'nested/page-slug') 'title'}} {{my-render-component content=(get-markdown-content 'guides' 'nested/page-slug')}} {{markdown-menu tree=(get-markdown-tree 'guides')}} ``` ## Demo Check out the [Ember CLI Markdown Resolver guides](https://willviles.github.io/ember-cli-markdown-resolver), which is generated using the addon. Code for the guides can be found [here](https://github.com/willviles/ember-cli-markdown-resolver/tree/master/tests/dummy). ## Node Version Ember CLI Markdown Resolver currently supports Node >=6. ## Contributing ### Installation * `git clone https://github.com/willviles/ember-cli-markdown-resolver.git` * `cd ember-cli-markdown-resolver` * `yarn install` ### Running * `ember serve` * Visit your app at [http://localhost:4200](http://localhost:4200). ### Running Tests * `yarn test` (Runs `ember try:each` to test your addon against multiple Ember versions) * `ember test` * `ember test --server` ### Building * `ember build` For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/). --- _Source: https://npm.io/package/ember-cli-markdown-resolver · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._