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

[claudiamatosa]

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.

[seanogdev]

Also running into this issue.

[jvandenaardweg]

This pull request seems to fix it for Panini: https://github.com/zurb/panini/pull/82

So i guess we have to wait a lil bit

[mcat]

Also running into this issue.

[diverent2]

Still the same here :/

[DanielRuf]

Bump.

[werschrul]

Same issue :(

[bshomer28]

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')); }

[DanielRuf]

We know about this. The docs are currently not uptodate.

[TylerBarnes]

Will they ever be updated? It was pretty difficult for me to find this page as a first time user. Maybe even just a notice on the docs that they're outdated?

[DanielRuf]

ping @ncoden

Who is currently maintaining this project?

[davehoran]

I think that is the root issue. The maintenance of the project seems to be the main question.

On Wed, Sep 26, 2018 at 12:48 AM Daniel Ruf [email protected] wrote:

ping @ncoden https://github.com/ncoden

Who is currently maintaining this project?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/zurb/foundation-emails/issues/540#issuecomment-424583571, or mute the thread https://github.com/notifications/unsubscribe-auth/AAnKJDmpszODfasw-NjQ8FszDG5P-Th0ks5uewcEgaJpZM4JXKJu .

[BAM5]

Ran into this problem as well. Is this project dead? Seems like a pretty blatant issue when code doesn't work when you do every instruction from the docs to the letter and it does not produce the expected results.

[versedi]

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 '...

[dkulakov]

It is not serious, the issue opened in 2016!!!

[DanielRuf]

Hi @dkulakov ,

we are currently working on Foundation Sites. We will come to Foundation Emails when we find the needed time to make new releases and update the docs.

Please keep in your mind that we do this in our free time.

[dkulakov]

Hi @DanielRuf , wow sorry, I don't know it!

Thank you for a great job!

[elcaptain]

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));