How to make a Post Renderer

Introduction

The Post Extension is one of the three primary extension types available in Live Center. You can create custom post renderers to enhance the rendering capabilities of your blog. A post renderer is responsible for rendering a specific type of post or content within a post. This document will guide you through the process of creating a post renderer for header elements.

• Structure for Post Renderer
• Steps to Create a Post Renderer
• Guide on Adding it to Your Feed

Post Renderer Structure

A post renderer consists of two main methods:

1. shouldRun(postData: any): boolean: This method determines whether the post renderer should be executed for a specific post based on the post's data. It returns a boolean value indicating whether the renderer should run. If shouldRun returns true, the updateElement method will be called for that post.

2. updateElement(state: any, postData: any, element: HTMLElement, container: HTMLElement): HTMLElement: This method is responsible for updating the rendering of the post element. It takes four parameters:

   • state: An object that can be used to store and retrieve the state of the post renderer. It can be used to track changes and optimize rendering.
   • postData: The data object representing the post being rendered.
   • element: The HTML element that represents the post.
   • container: The HTML element that contains the post element.

Creating a Header Post Renderer

To create a post renderer for header elements, you can follow these steps:

1. Define the CustomHeaderRenderer class and implement NcPosts.PostRenderer interface:

export class CustomHeaderRenderer {
   
    shouldRun(postData: any): boolean {
        return postData.authorName || postData.created || postData.overrideAuthor;
    }
    updateElement (state, postData, element, container) {
        if (!element) {
           console.log(postData, " <-- this is the data within a post that you can access");
           element = document.createElement("div");
           element.setAttribute("class", "ncpost-header");

           element.innerHTML = "I am overriding the header " + postData.authorName;
        }
           return element;
      }
}

2. Implement the shouldRun method to determine whether the renderer should run for a specific post. In this example, the condition is checking if authorName, created, or overrideAuthor is present in the post data. Modify this condition according to your specific requirements.

3. Implement the updateElement method to update the rendering of the post element. This method is called whenever the post is updated or rendered for the first time. The method receives the current state, post data, post element, and the container element. You can modify the method implementation based on your rendering needs. In this example, it creates a header element with a timestamp and byline. It also handles dynamic updates by checking for changes in the post data and updating the corresponding elements accordingly.

4. Customize the updateElement method according to your specific rendering needs. You can use the state object to store and retrieve state information for optimization purposes.

5. Now, whenever a post is rendered or updated, the HeaderRenderer's shouldRun and updateElement methods will be invoked if the conditions are met.

How do add the custom Post Renderer to your feed? 

When you have created your custom HeaderRenderer, there is a question about how to add it to your feed. This code sample below will replace the header component in posts.

// Hook in a function AFTER the rendering defaults are set
NcPosts.hookOptionsAfterDefaults(function (options) {
    
    NcPosts.replaceInstanceOf(
        options.postRenderers,
        NcPosts.HeaderRenderer,
        new CustomHeaderRenderer());

});

The functions above executes a command to replace an element within a Live Center feed but, what if you want to make an element of your own?

The code below injects a new element within your post.

NcPosts.hookOptionsAfterDefaults(function (options) {
    class CustomElement {
      shouldRun(postData){
        return true
      }
      updateElement (state, postData, element, container) {
        if (!element) {
          element = document.createElement("div");
          element.setAttribute("class", "ncpost-custom-element");
          element.innerHTML = "I am an extra element in your feed!";
          element.setAttribute("style", "color: white; background-color: red; padding: 20px")
        }
        return element;
      }
  }
    options.postRenderers.push(new CustomElement());
});

Example of full implementation

Conclusion

Creating a post renderer for header elements in Live Center allows you to customize the rendering of those elements. By following the steps outlined in this document and using the example of the HeaderRenderer, you can create custom post renderers tailored to your specific needs. Feel free to modify the code and customize it further based on your requirements.