Simply Blog

SimplyEdit is more than a way to edit a web page. It is a radical simplification of web publishing. But we’ve been focusing so much on the user experience of editing, that we haven’t yet shown that. Until now.

SimplyEdit now releases a really simple blog system. It works on the client-side. (Just like SimplyEdit itself.) There is no need for server-side code or a database.

Let’s start

All you need are two tiny Javascript libraries:

• https://github.com/SimplyEdit/json-css
• https://github.com/SimplyEdit/blog-helper

JSON-CSS

This library makes it easy to search within your website’s data .json, or any other JSON data for that matter. You can use CSS selectors to search the data and it returns an array with results, which you can further filter, sort, or limit like any other javascript array.

This is the tool that the blog-helper uses to select only blog posts from your website’s data. The GitHub repository has more information about this if you want to know more.

Blog-helper

This is where it gets interesting. As you may know SimplyEdit stores all pages in a single data.json file by default. This means that if you open a single page in your browser, you have access to all pages.

Each page can have its own template and when you edit a site, you can select a page template whenever you create a new page or change it later. In this case, we’ll assume a page template iscalled ‘blog.html’ for all blog posts.
(Read more about page templates in the Designers Guide.)

Then include the javascript libraries, and start the blog helper:

<script src="/js/json-css.js"></script>
<script src="/js/simply/blog.js"></script>
<script>
    simply.blog('blog', {
        'template': 'blog.html'
    });
</script>

This creates a ‘data source’ with the name ‘blog’. All you need to do now is adding blog data source to your page:

<div data-simply-list="articles" data-simply-data="blog">
  <template>
    <article>
      <a href="#" 
         data-simply-field="data-simply-path" 
         data-simply-content="fixed">
        <h3 data-simply-field="title">title</h3>
      </a>
      <p data-simply-field="summary">summary</p>
    </article>    
  </template>
</div>

If you already know how SimplyEdit fields and lists work, the above add only a few new features.

First it adds the data-simply-data="blog" entry. This connects the articles list to the blog data source we made earlier. Now SimplyEdit knows this content is coming from that data source. This means that if you have at least one page in your site, with the template blog.html , it will show up in the articles list.

Then we add a link to the blog page using data-simply-field="data-simply-path" . The blog helper makes sure that this is available and always points to the blog page.

Adding dates

Most blogs like to show the date of a post as well. You can just add a field with the name date and be done with it, but there is a better way. The blog-helper includes a date-picker library that makes it easy to select a date. It makes it easy to sort the blog posts on a specific date as well.

First include the library:

<script src="/js/simply/datepicker.js"></script>
<script>
    simply.datePicker();
</script>

Then add the date fields to your blog template:

<time class="flatpickr cover-date">
  <input class="flatpickr" type="text" 
    data-simply-field="date" data-simply-content="fixed">
  <span data-simply-field="date.day" 
    data-simply-content="fixed">08</span>
  <span data-simply-field="date.monthName" 
    data-simply-content="fixed">September</span>
  <span data-simply-field="date.year" 
    data-simply-content="fixed">2016</span>
</time>

The date picker uses an open source tool called ‘flatpickr’, which it will automatically load from a cdn. (You can override this.)

The extra class cover-date adds some CSS so that the date input tag is a transparent overlay over the date fields. This allows you to create a nicer layout of the date. Take a look at the blog at muze.nl for a full example:

The blog helper automatically sorts pages on the date field. But you can add your own sorting method:

<script>
  simply.blog('blog',{
    'sort': function(a,b) {
      return a.value['date']['value'] < b.value['date']['value'];
    }
  });
</script>

In addition, the blog-helper allows you to change the month names to use, the name of the blog page template, the maximum number of blog posts to show, et cetera…

The code for all these libraries is very short and to the point. So it’s fairly easy in use and to modify yourself.

Check out our other articles, here.
Let us know what you are using it for and if you made any changes!