Loading partials with tabular data from existing JSON files

First time caller, long-time listener. Great work on Vapid!

I currently have the Vapid CLI installed, a new demo site created, and all is well running on my tried-and-true Ubuntu LAMP stack. Works great!

I’m looking to use Vapid as a rapid-prototyping environment for my front-end development work. I’m also currently running a separate, non-Vapid site using HandlebarsJS for the exact purpose as my new Vapid demo site. Yes, I’m doing lots of sandboxing, R&D, testing, etc. at the moment.

With all that said, I have a few questions about some more advanced usage of Vapid:

  1. Does Vapid store user-entered content in it’s database as raw JSON, YAML or blobs?
  2. I’m looking for a way to store tabular data that my users (who am I kidding?) that I will use within my Vapid pages. Can the /data directory also be used to store stand-alone JSON files (i.e.: /data/_myDataset.json) or would I need to create a separate dir under www (i.e.: /www/data/_myDataset.json) so my HTML pages could access said raw data?
  3. If the above is possible, how would I select this new context from with a partial? I’m thinking of something like this: https://patternlab.io/docs/data-pattern-specific.html. Or might the logic behind how the {{_permalink}} works help me here (i.e.: /offices/1/office-name)?
  4. What about the flat-file CMS concept of frontmatter? In lieu of using separate JSON or YAML files to handle raw data, does/could Vapid support the use of frontmatter within (i.e.: at-the-top-of) HTML files to store “inline” JSON or YAML data?

I understand part of the beauty behind Vapid is to empower the developer to fully leverage Mustache within HTML (to then auto generate the Dashboard as Vapid’s CMS). The self-documenting nature of how the Dashboard works too is also genius. Here, I’m thinking about the need to separate data that Vapid stores as part of its intended feature set verses my custom, raw JSON data that I do not want or need Vapid to store in its db.

I apologize for all the questions and understand some of these questions may be answered as I get more familiar with Vapid and it’s way of handling user-generated content via the Dashboard. Perhaps some of the above can be handled via Vapid’s Sections and repeatable content functionality?

Thanks all for reading!

@webuxr Thanks and welcome!

  1. It’s stored as JSON.
  2. You’d need to nest it under www. The webserver only has visibility into that directory, not data.
  3. There’s also an {{_id}} attribute, so maybe something like /data/{{_id}}.json?
  4. I love the idea of frontmatter—it’s been suggested elsewhere as a possible way to pass variables to partials. That said, it might not be available as a solution for a little while.

If it’s just for prototyping purposes, one other idea might be to use an html template tag with no editor inside of a script tag, and then update your JSON directly inside a dashboard field. e.g.,

<head>
  <script>
    var json = {{json type=html editor=false}};
    console.log(json);
  </script>
</head>

@scott Oooh! Nice … something for me to play with. Thanks for the suggestion.

Also, looking forward to hearing more about frontmatter. Still, the issue I keep running into with sites/CMSs that employ frontmatter is that it often requires duplication of common variables (hence my ask about loading my own JSON files into Vapid partials. Something like this (pardon my pseudo-code):

/www/index.html:

<script>
  var url='/www/data/myDataset.json';
</script>

<div id="bullseye"><!--throw the stone here--></div>

<script id="tpl" type="text/template">
  {{#myDataset}}
    {{#section forTheFoos multiple=true label="For the Foos"}}
    <div class="container">
      <img src="{{photoUrl}}" alt="Image of {{name}}">
      <h2>
        {{name}}<br>
        <small>{{title}}</small>
      </h2>
      <p>
        <a href="{{_permalink}}" title="Visit {{name}}">{{name}}</a>
      </p>
    </div>
    {{/section}}
  {{/myDataset}}
</script>

<script>
      var slingshot = function (url, tplId, bullseye) {
       $.getJSON(url, function(data) {
          var template = $(tplId).html();
          var stone = Handlebars.compile(template)(data);
          $(bullseye).append(stone);
        });
      }
      slingshot('/www/data/myDataset.json', '#tpl', '#bullseye');
    </script>

‘/www/data/myDataset.json’:

{
  "myDataset":
  [
    {
      "name": "Foo",
      "title": "Leader of the Foos",
      "photoUrl": "/www/imgaes/pic-of-foo.jpg"
    },
    {
      "name": "Bar A",
      "title": "Follower of The Foo",
      "photoUrl": "/www/imgaes/pic-of-foo-croo-a.jpg"
    },{
      "name": "Bar B",
      "title": "Another follower of The Foo",
      "photoUrl": "/www/imgaes/pic-of-foo-croo-b.jpg"
    }
  ]
}

…which would result in the following HTML:

<section class="forTheFoos">
  <div class="container">
    <img src="/www/imgaes/pic-of-foo.jpg" alt="Image of Foo">
    <h2>
      Foo<br>
      <small>Leader of the Foos</small>
    </h2>
    <p>
      <a href="https://empty-vapid-1234.vapid.com/1234-5678-901230">Edit Foo</a>
    </p>
  </div>

  <div class="container">
    <img src="/www/imgaes/pic-of-foo-croo-a.jpg" alt="Image of Bar A">
    <h2>
      Foo<br>
      <small>Follower of The Foo</small>
    </h2>
    <p>
      <a href="https://empty-vapid-1234.vapid.com/1234-5678-901231">Edit Bar A</a>
    </p>
  </div>

    <div class="container">
      <img src="/www/imgaes/pic-of-foo-croo-b.jpg" alt="Image of Bar B">
      <h2>
        Foo<br>
        <small>Another follower of The Foo</small>
      </h2>
      <p>
        <a href="https://empty-vapid-1234.vapid.com/1234-5678-901232">Edit Bar B</a>
      </p>
    </div>
</section>

…at least in my head. :wink:

How might I accomplish the above in Vapid-speak?

Before I answer, let me make sure I understand the end goal correctly. Is it that eventually you want to take these templates and use them with a real API? i.e., In the end you want your templates to keep their Handlebars tags, so you can feed them with an external JSON API?

@scott Essentially, yes. I mean, it would be nice to take existing logic from my Handlebars files and drop them into a Vapid partial and have them work (even with a little adjustment). If only Mustache, even though the two are so close, I wouldn’t mind (much) if I had to refactor my Handlebars templates into Mustache.

However, and before I jump ahead of myself here, maybe I should force myself to work within the confines of Vapid as-is for a bit and see if I can answer my own question(s). Vapid comes at this CMS concept from a different direction than I normally used to. Getting over this small hurdle is part of the process.

It would be nice if there was a doc page for the Vapid API where you list out all the build-in/global variables, hooks, tags, expressions, etc. in which things like {{_id}}, {{_title}}, {{_permalink}}, etc. are described. Perhaps similar (content-wise) to this example: https://mustache.github.io/mustache.5.html or https://handlebars-draft.knappi.org/guide/expressions.html#basic-usage.

Thoughts?

The true Vapid way would be to put your forTheFoos section directly into #bullseye, and skip slingshot altogether. i.e.,

<div id="bullseye">
{{#section forTheFoos multiple=true label="For the Foos"}}
  <div class="container">
    <img src="{{photoUrl}}" alt="Image of {{name}}">
    <h2>
      {{name}}<br>
      <small>{{title}}</small>
    </h2>
    <p>
      <a href="{{_permalink}}" title="Visit {{name}}">{{name}}</a>
    </p>
  </div>
{{/section}}
</div>

In that case, Vapid would just let you administer content from the dashboard, and skip JSON files altogether.

Good point about the docs missing the special tags—I need to add those.

This is exactly what I was looking for when I asked “How might I accomplish the above in Vapid-speak?” above.

Your recent response here answered a lot of questions for me in learning Vapid.

Thanks!

1 Like