How can I generate multiple pages from a JSON file with Assemble

Question

So I'm building a framework for reproduceable articles.

Each article will be composed of a combination of 'sections' which basically constitute an html block and some associated content. For example a given article may be composed as follows:

author section
text section
image section
text section
blockquote section
carousel section
text section

I'm imagining there's a partial template for each section, and as mentioned the sections will have associated data, so for a text section it might just be the copy (although it could be a markdown file?), for an image section it might be a collection of urls and alt tags and so forth. Each article will also need an associated CSS & JS file for any bespoke modifications, as well as it's own image repo.

The ultimate structure I need to end up with after building looks like this:

site/
    [shared]css/
    [shared]img/
    [shared]js/
    articles/
        article-01/
            [article specific]css/
            [article specific]img/
            [article specific]js/
            index.html
        article-02/
            [article specific]css/
            [article specific]img/
            [article specific]js/
            index.html

Obviously it would be fairly simple to just copy and paste HTML/CSS files, change a few values and build it all with grunt, but I'm trying to avoid copy paste duplication and it seems like assemble could be the answer.

So my broad plan was to use assemble to compose the articles, with the goal of being able to generate a new article simply by populating a .json file or similar.

In my head it looks something like this:

{ 
  "title"   : "Article Title",
  "sections": [
    { 
      "type"  :  "text",
      "data"  : {
        "content"  :  "Lorem iplsum dolor..."
      }
    },
    { 
      "type"  :  "author",
      "data"  : {
        "name"  :  "Bob Servant",
        "meta"  :  "As if you don't know who Bob Servant is",
        "url"  :  "bobservant.com"
      }
    },
    { 
      "type"  :  "image",
      "data"  : {
        "src"   :  "http://placehold.it/300x300",
        "alt" :  "Bob Servant"
      }
    }
  ]
}

This .json file would dictate the order of the sections, and provide the content, hopefully negating the need for an individual .hbs template for each article.

In my default template I'm basically looking to achieve the following pseudo code:

foreach section {
  get the the appropriate template and pass it the associated data object
}

The other problem I'm struggling with is the fact that I want to have generic partials such as text.hbs, image.hbs author.hbs etc, but I need to be able to have multiple instances included within a given article, each with their own data.

I suppose ultimately it's a problem of abstraction, both in terms of how far it's appropriate to decouple the templates and data, but also how to go about binding the data to the correct instance of the template... if that makes sense.

If anyone has any helpful suggestions that would be very much appreciated. It feels like what I'm trying to do should be achievable, but I can't quite get my head around how to go about it just by studying examples :|

Answer 1

You can add pages to a pages collection on the assemble.options. See this part of the Gruntfile for an example.

You can create each of the partials you mentioned above that take in the data needed for text, authors, image, blockquote, etc... then use the partial helper to dynamically call partials from the page metadata...

{{#each page.sections}}
  {{partial this.type this.data}}
{{/each}}

Try putting together a repo with this information and link it here and I can take a look to see if it's working as expected.

Hope this helps.