Understanding Vapid Conditionals

Published on 05/01/2022, Edited on November 24, 2022 |

In Vapid CMS, content can be hidden or displayed through a pair of conditionals (if/unless). The documentation provides a brief example of a conditional weather alert, if such a thing were entered.

{{#if weather}}
  <div class="ui alert message">
    <strong>Weather alert</strong>: {{weather required=false}}
  </div>
{{/if}}

I have elected to make use of this functionality for this blog. Since I want to be able to draft posts in the browser, without necessarily publishing them immediately, I need some sort of conditional for posts. Here is how the blog was templated originally.

{{#section blog multiple=true sortable=true label="Post"}}
   <div class="article">
       <h2><a href="{{_permalink}}">{{name}}</a></h2>
       <div class="pub">{{_created_at format="%m/%d/%Y"}}</div>
       <div class="summary"><p>{{summary long=true}} <a href={{_permalink}}">Read more...</a></p></div>
   </div>
{{/section}}

Not much to it. No conditionals, just a series of sortable blog posts, with permalinked titles and a timestamp.

The following is the updated (conditional) template.

{{#section blog multiple=true sortable=true label="Post"}}
   {{#if published}}
   <div style="display: none;">{{published type=choice}}</div>
   <div class="article">
       <h2><a href="{{_permalink}}">{{name}}</a></h2>
       <div class="pub">{{_created_at format="%m/%d/%Y"}}</div>
       <div class="summary"><p>{{summary long=true}} <a href="{{_permalink}}">Read more...</a></p></div>
   </div>
   {{/if}}
{{/section}}

There are two major changes. Firstly, interior of the `blog` section was wrapped in an if statement. Secondly, the conditional (`published`) was given the type of `choice`. By default, Vapid creates a checkbox that functions as a simple boolean. Checked, and the value of `published` becomes true. Unchecked, and it remains false.

In the near future, I may try to expand my use of this conditional system to create a sort of ad-hoc preview space for drafted posts. As Vapid is no longer being maintained, and a preview function is not specifically included in the core tool, there is no standard way to view a draft without saving it and potentially pushing unfinished content out into the world.

EDIT: As of 11/24/2022, I've made some further adjustments to how this blog is templated. These include moving the permalink out of the title, adding a conditional display of the "edited on" date, and adjusting the ordering system for posts.

{{#section blog multiple=true order=-postNumber label="Post" limit=10}}
    {{#if published}}
    <div style="display: none;">{{published type=choice priority=1}}</div>
    <div style="display: none;">{{edited type=choice required=false}}</div>
    <div style="display: none;">{{postNumber label="Post Number" type=number}}</div>
    <article>
        <h2>{{name priority=2}}</h2>
        <div class="meta">Published on {{_created_at format="%m/%d/%Y"}}{{#if edited}}, Edited on {{editDate type=date required=false}}{{/if}}</div>
        <div class="summary"><p>{{summary long=true priority=3}} <a href="{{_permalink}}">Read more...</a></p></div>
    </article>
    {{/if}}
{{/section}}