Search code examples
javascripthandlebars.jsmetalsmith

metalsmith-collections 'path' key not accessible from Handlebars template?


My template:

{{#each collections }}
<span class="Category__Title">{{ @key }}</span>
  {{#each this }}
    <a href="{{ this.path }}">{{ this.title }}</a>
  {{/each}}
{{/each}}

Renders ( this.path is undefined ):

<span class="Category__Title">French</span>
    <a href="">Braised vegetables</a>
<span class="Category__Title">Thai</span>
    <a href="">Rice noodles</a>

I'm using metalsmith:

 metalsmith
  .use(collections())
  .use(markdown())
  .use(templates({
    engine: 'handlebars',
    directory: 'templates'
  }))
  .use(permalinks({
    pattern: ':title'
  }))
  .destination('./public')

At the time of compiling, I console log to collection

var m = metalsmith.metadata();
console.log(m.collections);

And I can see each collection has an array of files, and each file DOES contain the key 'path'. Console log ->

 { title: 'Braised vegetables',
  date: '10/12/1923',
  tags: [ 'braise', 'old world' ],
  collection: [ 'french' ],
  template: 'recipe.hbt',
  contents: <Buffer 3...>,
  mode: '0644',
  stats: { },
  path: 'women-s-liberation-1906' }

Strange? I can programmatically access file.path through node. Additionally, Handlebars is able to access file.title and every other key. Thanks in advance for the help.


Solution

  • Thanks -- in posting my question I realized I was attempting to access the 'path' key before permalinks had a chance to add that property to the file tree -- simply moving permalinks above templates solved this issue.

    .use(permalinks({
        pattern: ':title',
        relative: false
      }))
      .use(templates({
        engine: 'handlebars',
        directory: 'templates'
      }))