Using ButterCMS in a Jupyter notebook with VueJS
ButterCMS¶
Goal¶
The goal of this notebook is to get myself familiar with ButterCMS, a headless CMS that can be easily integrated with any platform in any language. In the past I've experienced with Joomla, Drupal and WordPress (and Blogger long time ago), where I have lost invested a lot of time in simply getting the CMS in place, extending the CMS with more functionality and migrating data between servers. Since I am investigating different ways of using microservices, becoming less platform dependent and overall learning new tools, I use this notebook to show a simple example of ButterCMS in Jupyter.
About¶
Add a blog or CMS to your site in minutes Drop-in our Headless CMS and get back to more interesting problems.
Links¶
Prerequisites¶
!pip install buttercms-python
import os
os.environ['buttercmskey'] = '1b13611e144e11bbce5b484f4064e39638b223a1'
Python implementation¶
from butter_cms import ButterCMS
client = ButterCMS(os.getenv('buttercmskey'))
client
import json
print(json.dumps(client.posts.all({'page_size': 10, 'page': 1}), indent=4))
posts = client.posts.all({'page_size': 10, 'page': 1})
posts['data'][0]
title = posts['data'][0]['title']
title
Javascript implementation¶
%%javascript
require.config({
paths: {
buttercms: "https://cdnjs.buttercms.com/buttercms-1.1.1.min",
},
shim: {
buttercms: {
exports: "ButterCMS"
},
}
});
%%javascript
require(['buttercms'], function(ButterCMS) {
var butter = Butter('1b13611e144e11bbce5b484f4064e39638b223a1');
butter.post.list({page: 1, page_size: 10}).then(function(response) {
console.log(response['data']['data'][0]['title'])
console.log(response['data']['data'][0]['body'])
})
});
VueJS implementation¶
Finally an attempt to integrate VueJS with Jupyter using data from the ButterCMS. Following this guide we are able to add the blog posts to the body of this notebook.
%%javascript
require.config({
paths: {
buttercms: "https://cdnjs.buttercms.com/buttercms-1.1.1.min",
vue: "https://cdn.jsdelivr.net/npm/vue/dist/vue"
},
shim: {
buttercms: {
exports: "ButterCMS"
},
vue: {
exports: "Vue"
}
}
});
%%html
<script type="text/x-template" id="blog-home-template">
<div id="blog-home">
<h1>{{ page_title }}</h1>
<!-- Create `v-for` and apply a `key` for Vue. Here we are using a combination of the slug and index. -->
<div v-for="(post,index) in posts" :key="post.slug + '_' + index">
<article class="media">
<figure>
<!-- Bind results using a `:` -->
<!-- Use a `v-if`/`else` if their is a `featured_image` -->
<img v-if="post.featured_image" :src="post.featured_image" alt="">
<img v-else src="http://via.placeholder.com/250x250" alt="">
</figure>
<h2>{{ post.title }}</h2>
<p>{{ post.summary }}</p>
</article>
</div>
</div>
</script>
%%html
<div id="vue-app">
<blog-home :posts="blogPosts"/>
</div>
%%javascript
require(['buttercms', 'vue'], function(ButterCMS, Vue) {
console.log(Vue.version);
var butter = Butter('1b13611e144e11bbce5b484f4064e39638b223a1');
var BlogHome = Vue.component('blog-home', {
template: '#blog-home-template',
props: {
data: Array,
},
data: function () {
return {
page_title: 'Blog',
posts: []
}
},
methods: {
getPosts() {
butter.post.list({
page: 1,
page_size: 10
}).then((res) => {
this.posts = res.data.data
})
}
},
created() {
this.getPosts()
}
})
var vueApp = new Vue({
el: '#vue-app',
components: {BlogHome: BlogHome},
data: {
blogPosts: []
}
})
});
%%html
<style>
#blog-home article{
width: 50%;
float: left;
}
#blog-home article figure img{
height: 50px;
}
</style>
Result¶
To put everything together I have created a JSfiddle and embedded the result below.
%%html
<iframe width="100%" height="500" src="//jsfiddle.net/z4hapsLt/13/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>