Code Monkey home page Code Monkey logo

rich-text-renderer.rb's Introduction

Contentful Rich Text Renderer

Contentful provides a content infrastructure for digital teams to power content in websites, apps, and devices. Unlike a CMS, Contentful was built to integrate with the modern software stack. It offers a central hub for structured content, powerful management and delivery APIs, and a customizable web app that enable developers and content creators to ship digital products faster.

This library provides rendering capabilities for the RichText field type. It is recommended to be used alongside the Contentful Delivery SDK. By default this library will serialize RichText fields into it's corresponding HTML representation. All behaviour can be overridden to serialize to different formats.

Installation

Install Contentful Rich Text Renderer from RubyGems:

gem install rich_text_renderer

Usage

Create a renderer:

require 'rich_text_renderer'

renderer = RichTextRenderer::Renderer.new

Render your document:

renderer.render(document)

Using different renderers

There are many cases in which HTML serialization is not what you want. Therefore, all renderers are overridable when creating a RichTextRenderer.

Also, if you're planning to embed entries within your rich text, overriding the 'embedded-entry-block' mapping is a must, as by default it only does <div>#{entry.to_s}</div>.

You can override the configuration like follows:

renderer = RichTextRenderer::Renderer.new(
  'embedded-entry-block' => MyEntryBlockRenderer
)

Where MyEntryBlockRenderer requires to have a #render(node) method and needs to return a string.

An example entry renderer, assuming our entry has 2 fields called name and description could be:

class MyEntryBlockRenderer < RichTextRenderer::BaseNodeRenderer
  def render(node)
    entry = node['data']['target']

    "<div class='my-entry'><h3>#{entry.name}</h3><p><small>#{entry.description}</p></small></div>"
  end
end

Dealing with unknown node types

By default, this gem will treat all unknown node types as errors and will raise an exception letting the user know which node mapping is missing. If you wish to remove this behaviour then replace the nil key of the mapping with a NullRenderer that returns an empty string, or something similar.

An example would be like follows:

class SilentNullRenderer < RichTextRenderer::BaseNodeRenderer
  def render(node)
    ""
  end
end

renderer = RichTextRenderer::Renderer.new(
  nil => SilentNullRenderer
)

License

Copyright (c) 2018 Contentful GmbH. See LICENSE for further details.

Contributing

Feel free to improve this tool by submitting a Pull Request.

rich-text-renderer.rb's People

Contributors

dlitvakb avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.