For one of my side projects, I was asked to use Butter CMS to allow for basic blog integration using JavaScript. I have never heard or used Butter CMS before and was intrigued to know more about the platform.
Butter CMS is another headless CMS variant that allows a developer to utilise API endpoints to push content to an application via an arrange of approaches. So nothing new here. Just like any headless CMS, the proof is in the pudding when it comes to the following factors:
- Quality of features
- Ease of integration
- Price points
- Quality of documentation
I haven't had a chance to properly look into what Butter CMS fully has to offer, but from what I have seen from working on the requirements for this side project I was pleasently surprised. Found it really easy to get setup with minimal amount of fuss! For this project I used Butter CMS's Blog Engine package, which does exactly what it says on the tin. All the fields you need for writing blog posts are already provided.
JavaScript Code
My JavaScipt implementation is pretty basic and provides the following functionality:
- Outputs a list of posts consisting of title, date and summary text
- Pagination
- Output a single blog post
All key functionality is derived from the "ButterCMS" JavaScript file:
/*****************************************************/
/* Butter CMS */
/*****************************************************/
var ButterCMS =
{
ButterCmsObj: null,
"Init": function () {
// Initiate Butter CMS.
this.ButterCmsObj = new ButterCmsBlogData();
this.ButterCmsObj.Init();
},
"GetBlogPosts": function () {
BEButterCMS.ButterCmsObj.GetBlogPosts(1);
},
"GetSinglePost": function (slug) {
BEButterCMS.ButterCmsObj.GetSinglePost(slug);
}
};
/*****************************************************/
/* Butter CMS Data */
/*****************************************************/
function ButterCmsBlogData() {
var apiKey = "<Enter API Key>",
baseUrl = "/",
butterInstance = null,
$blogListingContainer = $("#posts"),
$blogPostContainer = $("#post-individual"),
pageSize = 10;
// Initialise of the ButterCMSData object get the data.
this.Init = function () {
getCMSInstance();
};
// Returns a list of blog posts.
this.GetBlogPosts = function (pageNo) {
// The blog listing container needs to be cleared before any new markup is pushed.
// For example when the next page of data is requested.
$blogListingContainer.empty();
// Request blog posts.
butterInstance.post.list({ page: pageNo, page_size: pageSize }).then(function (resp) {
var body = resp.data,
blogPostData = {
posts: body.data,
next_page: body.meta.next_page,
previous_page: body.meta.previous_page
};
for (var i = 0; i < blogPostData.posts.length; i++) {
$blogListingContainer.append(blogPostListItem(blogPostData.posts[i]));
}
//----------BEGIN: Pagination--------------//
$blogListingContainer.append("<div>");
if (blogPostData.previous_page) {
$blogListingContainer.append("<a class=\"page-nav\" href=\"#\" data-pageno=" + blogPostData.previous_page + " href=\"\">Previous Page</a>");
}
if (blogPostData.next_page) {
$blogListingContainer.append("<a class=\"page-nav\" href=\"#\" data-pageno=" + blogPostData.next_page + " href=\"\">Next Page</a>");
}
$blogListingContainer.append("</div>");
paginationOnClick();
//----------END: Pagination--------------//
});
};
// Retrieves a single blog post based on the current URL of the page if a slug has not been provided.
this.GetSinglePost = function (slug) {
var currentPath = location.pathname,
blogSlug = slug === null ? currentPath.match(/([^\/]*)\/*$/)[1] : slug;
butterInstance.post.retrieve(blogSlug).then(function (resp) {
var post = resp.data.data;
$blogPostContainer.append(blogPost(post));
});
};
// Renders the HTML markup and fields for a single post.
function blogPost(post) {
var html = "";
html = "<article>";
html += "<h1>" + post.title + "</h1>";
html += "<div>" + blogPostDateFormat(post.created) + "</div>";
html += "<div>" + post.body + "</div>";
html += "</article>";
return html;
}
// Renders the HTML markup and fields when listing out blog posts.
function blogPostListItem(post) {
var html = "";
html = "<h2><a href=" + baseUrl + post.url + ">" + post.title + "</a></h2>";
html += "<div>" + blogPostDateFormat(post.created) + "</div>";
html += "<p>" + post.summary + "</p>";
if (post.featured_image) {
html += "<img src=" + post.featured_image + " />";
}
return html;
}
// Set click event for previous/next pagination buttons and reload the current data.
function paginationOnClick() {
$(".page-nav").on("click", function (e) {
e.preventDefault();
var pageNo = $(this).data("pageno"),
butterCmsObj = new ButterCmsBlogData();
butterCmsObj.Init();
butterCmsObj.GetBlogPosts(pageNo);
});
}
// Format the blog post date to dd/MM/yyyy HH:mm
function blogPostDateFormat(date) {
var dateObj = new Date(date);
return [dateObj.getDate().padLeft(), (dateObj.getMonth() + 1).padLeft(), dateObj.getFullYear()].join('/') + ' ' + [dateObj.getHours().padLeft(), dateObj.getMinutes().padLeft()].join(':');
}
// Get instance of Butter CMS on initialise to make one call.
function getCMSInstance() {
butterInstance = new Butter(apiKey);
}
}
// Set a prototype for padding numerical values.
Number.prototype.padLeft = function (base, chr) {
var len = (String(base || 10).length - String(this).length) + 1;
return len > 0 ? new Array(len).join(chr || '0') + this : this;
};
To get a list of blog posts:
// Initiate Butter CMS.
BEButterCMS.Init();
// Get all blog posts.
BEButterCMS.GetBlogPosts();
To get a single blog post, you will need to pass in the slug of the blog post via your own approach:
// Initiate Butter CMS.
BEButterCMS.Init();
// Get single blog post.
BEButterCMS.GetSinglePost(postSlug);
When working as a programmer, it's really easy to continue coding in the same manner you have done since you picked up a language and made your first program.
