Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qonto/ember-prismic-dom
Render data from the Prismic CMS in an idiomatic way for Ember.
https://github.com/qonto/ember-prismic-dom
ember ember-addon prismic
Last synced: about 2 months ago
JSON representation
Render data from the Prismic CMS in an idiomatic way for Ember.
- Host: GitHub
- URL: https://github.com/qonto/ember-prismic-dom
- Owner: qonto
- License: mit
- Created: 2021-01-21T11:07:20.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-11T14:34:59.000Z (2 months ago)
- Last Synced: 2024-07-11T16:48:09.528Z (2 months ago)
- Topics: ember, ember-addon, prismic
- Language: TypeScript
- Homepage:
- Size: 3.03 MB
- Stars: 14
- Watchers: 13
- Forks: 3
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-prismic - ember-prismic-dom - Prismic DOM for Ember. _\*_ (Ecosystem / Development Kits)
README
# ember-prismic-dom
[![Latest NPM release][npm-badge]][npm-badge-url]
[npm-badge]: https://img.shields.io/npm/v/ember-prismic-dom.svg
[npm-badge-url]: https://www.npmjs.com/package/ember-prismic-dom
Easy [Prismic](https://prismic.io/) rendering in [Ember.js](https://emberjs.com).
```hbs
```
## Compatibility
- Ember.js v4.4 or above
- Ember CLI v4.4 or above
- Node.js v18 or above
- TypeScript v5 or above
## Installation
```sh
ember install ember-prismic-dom
```
## Usage
```hbs
```
### onUnknownTag
Additionally you can pass an `onUnknownTag` action to handle receiving data of a type `Prismic::Dom` can't render.
```hbs
```
```js
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
```hbs
```
_my-list.hbs_
```hbs
My List
- {{yield}}
```
_my-hyperlink.hbs_
```hbs
{{yield}}
```
### Use existing addons
For example you want to use [`ember-async-image`](https://github.com/html-next/ember-async-image)
```hbs
```
_image.hbs_
```hbs
```
### Migrating from prismic-dom
`` replaces [`prismic-dom`](https://github.com/prismicio/prismic-dom) , please see [this blog post](https://medium.com/qonto-way/introducing-ember-prismic-dom-c362647037d7) for more information.
In place of:
```js
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);
}
}
```
```hbs
{{{this.html}}}
```
Use this:
```hbs
```
## TypeScript usage
Each component has proper [Glint](https://github.com/typed-ember/glint) types, which allow you to get strict type checking in your templates when using TypeScript.
Unless you are using [strict mode](http://emberjs.github.io/rfcs/0496-handlebars-strict-mode.html) templates (via [first class component templates](http://emberjs.github.io/rfcs/0779-first-class-component-templates.html)),
you need to import the addon's Glint template registry entries as described in the [Using Addons](https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons#using-glint-enabled-addons) documentation:
```ts
// e.g. types/glint.d.ts
import "@glint/environment-ember-loose";
import type PrismicDomRegistry from "ember-prismic-dom/template-registry";
declare module "@glint/environment-ember-loose/registry" {
export default interface Registry
extends PrismicDomRegistry /* other addon registries */ {
// local entries
}
}
```
## Contributing
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).