Skip to content

Render data from the Prismic CMS in an idiomatic way for Ember.

License

Notifications You must be signed in to change notification settings

qonto/ember-prismic-dom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

13d1cc1 · Nov 9, 2023
Nov 6, 2023
Nov 7, 2023
Nov 9, 2023
Jan 15, 2021
Nov 6, 2023
Apr 11, 2023
Jun 2, 2023
Sep 29, 2023
Apr 21, 2023
Jun 1, 2023
Nov 6, 2023
Nov 9, 2023
May 31, 2023

Repository files navigation

ember-prismic-dom-illustration

ember-prismic-dom

CI Latest NPM release

Easy Prismic rendering in Ember.js.

<Prismic::Dom @nodes={{@prismicData}} />

Compatibility

  • Ember.js v4.4 or above
  • Ember CLI v4.4 or above
  • Node.js v16 or above

Installation

ember install ember-prismic-dom

Usage

<Prismic::Dom @nodes={{@myPrismicDoc.data.myRichText}} />

onUnknonwnTag

Additionaly you can pass an onUnknownTag action to handle recieving data of a type Prismic::Dom can't render.

<Prismic::Dom
  @nodes={{@myPrismicDoc.data.myRichText}}
  @onUnknownTag={{this.onUnknownTag}}
/>
import Component from "@glimmer/component";
import { action } from "@ember/object";

export default class MyComponent extends Component {
  @action
  onUnknownTag(node) {
    console.error(`Could not render ${node.type}`);
  }
}

Custom Rendering

Pass a custom component name to be used to render a prismic type. For example to custom render the group-list-item and hyperlink types

<Prismic::Dom
  @group-list-item="my-list"
  @hyperlink="my-hyperlink"
  @nodes={{@myPrismicDoc.data.myRichText}}
/>

my-list.hbs

<h1>My List</h2>
<ul>{{yield}}<ul>

my-hyperlink.hbs

<a href={{@node.element.data.url}}>{{yield}}</a>

Use existing addons

For example you want to use ember-async-image

<Prismic::Dom @nodes={{@nodes}} @image='image'>

image.hbs

<AsyncImage src={{@node.element.url}} />

Migrating from prismic-dom

<Primcic::Dom/> replaces prismic-dom , please see the blog post for more information.

In place of:

import Component from "@glimmer/component";
import PrismicDOM from "prismic-dom";

export default class MyComponent extends Component {
  get html() {
    return PrismicDOM.RichText.asHtml(this.args.myPrismicDoc.data.myRichText);
  }
}
{{{this.html}}}

Use this:

<Prismic::Dom @nodes={{@myPrismicDoc.data.myRichText}} />

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.