foundation-emails: [Foundation for Emails] Data under `src/data` not available as a global variable

Hi all,

First of all, thank you so much for the amazing framework - it made it much easier to scaffold a quick HTML e-mail.

I am using the SASS + Panini version, and ran into a documentation mismatch. Under Custom variables, it says we can drop any .yaml or .json file into src/data and the filename will be made available as a global variable in the handlebars templates. However, I only managed to make it happen by adding data: 'src/data' to the initialising function of Panini, in the generated Gulpfile (line 55). Maybe it was just missing in the generator?

How can we reproduce this bug?

  1. Generate a new project using foundation new --framework ${folderName}.
  2. Follow the instructions under Custom variables to create a custom global variable.
  3. Rebuild.
  4. Verify that the variable is not available.

About this issue

  • Original URL
  • State: open
  • Created 8 years ago
  • Reactions: 8
  • Comments: 17 (4 by maintainers)

Most upvoted comments

It does work after updating gulpfile with two things.

First is pages function around line 55:, you need to pass the src/data directory to panini, by modifying the function to: (but you already know that)

function pages() {
  return gulp.src(['src/pages/**/*.html', '!src/pages/archive/**/*.html'])
    .pipe(panini({
      root: 'src/pages',
      layouts: 'src/layouts',
      partials: 'src/partials',
      helpers: 'src/helpers',
      data: 'src/data'
    }))
    .pipe(inky())
    .pipe(gulp.dest('dist'));
}

Second more important thing is to add panini.refresh function call in watch() function. See code below.

Edit function watch() and modify it to:

function watch() {
  gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, inline, browser.reload));
  gulp.watch(['src/layouts/**/*', 'src/partials/**/*']).on('all', gulp.series(panini.refresh, resetPages, pages, inline, browser.reload));
  gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss']).on('all', gulp.series(panini.refresh, resetPages, sass, pages, inline, browser.reload));
  gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
  gulp.watch('src/data/*').on('all', gulp.series(panini.refresh, resetPages, sass, pages, inline, browser.reload));
}

You can then access the variable everywhere by typing: {{ config.object.field }} – the spaces after {{ and before }} are required!

example content of data/src/config.yml (notice the config in above variable reference and config.yml - those names needs to match!)

object: {
   field: "examplevalue"
}

We added a watch on the data files (which unfortunately doesn’t work). If you change the content of yaml file you will have to quit the watch and start it again - it bugs out on [09:31:54] Starting 'bound '...

We added a watch on the data files (which unfortunately doesn’t work). If you change the content of yaml file you will have to quit the watch and start it again - it bugs out on [09:31:54] Starting 'bound '...

@versedi I noticed you used panin.refresh and resetPages in your gulp.watch. Just remove the first one and it should work: gulp.watch('src/data/*').on('all', gulp.series(resetPages, sass, pages, inline, browser.reload));

I found other discussions that mentioned adding “data: ‘src/data’,” to the gulp file.

// Compile layouts, pages, and partials into flat HTML files // Then parse using Inky templates function pages() { return gulp.src('src/pages/**/*.html') .pipe(newer('dist')) .pipe(newer('src/partials/**/*.html')) .pipe(panini({ root: 'src/pages', layouts: 'src/layouts', partials: 'src/partials', data: 'src/data', // Added the ability to use data helpers: 'src/helpers' })) .pipe(inky()) .pipe(gulp.dest('dist')); }

Also running into this issue.

Still the same here 😕