https://github.com/bustle/mobiledoc-apple-news-renderer
https://github.com/bustle/mobiledoc-apple-news-renderer
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bustle/mobiledoc-apple-news-renderer
- Owner: bustle
- Created: 2017-04-03T21:43:13.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-04-12T19:47:35.000Z (over 7 years ago)
- Last Synced: 2024-10-03T16:34:42.245Z (almost 2 years ago)
- Language: JavaScript
- Size: 162 KB
- Stars: 1
- Watchers: 10
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
## Mobiledoc Apple News Renderer
Renders mobiledoc to an array of apple news components. Supports mobiledoc
version 0.3.0 and later. Supports Apple News format 1.4.
[Apple News Format 1.0
Reference](https://developer.apple.com/library/content/documentation/General/Conceptual/Apple_News_Format_Ref/index.html#//apple_ref/doc/uid/TP40015408-CH102-SW1)
The mapping in `lib/utils/apple-news` is used to map mobiledoc section tag names
to Apple News component roles.
The renderer returns an render result that is a fully-realized (albeit
unstyled) article.json. The article's components correspond to the rendered
sections of the mobiledoc.
### Usage
Must pass an `htmlSerializer` property to the renderer, as
well as a `dom` property.
`htmlSerializer` is a function that will be called with a DOM (or SimpleDOM) element
and it will return the serialized HTML as a string.
Example:
```javascript
import Renderer from 'mobiledoc-apple-news-renderer';
import SimpleDOM from 'simple-dom';
let renderer = new Renderer(mobiledoc, {
cards: [],
dom: new SimpleDOM.Document(),
htmlSerializer: (element) => {
return new SimpleDOM.HTMLSerializer(SimpleDOM.voidMap).
serializeChildren(element);
}
});
let rendered = renderer.render();
let article = rendered.result;
/*
article: {
version: '1.0',
title: 'Default Title',
layout: {},
... other Apple News default properties
components: [
{
role: 'body',
format: 'html',
text: 'The rendered HTML of the first mobiledoc section...'
},
...
]
}
*/
```
### Running tests
In browser:
* `npm start`
* visit http://localhost:4200/tests
CI:
* `npm test`
### Publishing
Before publishing run `npm run build` to generate the transpiled files in
`dist/`