ejs icon indicating copy to clipboard operation
ejs copied to clipboard

Import yaml file in ejs template

Open 1000i100 opened this issue 3 years ago • 5 comments

It look near #223.

I'm working on a static site generator.

i have some data in yml file.

I would like to import them converted to html by ejs template to some pages.

*1 I can import the yml file in the page, parse it, then call my ejs template to convert it to html.

What i would like to do is : *2 in the page, call the ejs template with some filter parameters and let the template import the yml file, filter it and format it to html.

This way, the user who manage pages have less to do to import widget in his pages.

Is it possible ? Does it need a EJSExtension like describe in #414 ?

Do you discourage this usage ? and if yes, what should i do better than my actual workaround (*1)

1000i100 avatar Jan 15 '21 17:01 1000i100

Why don't you parse the YAML file and pass it's variables to the ejs templates? Could you give a more complete but minimal example?

nichtich avatar Feb 15 '21 16:02 nichtich

Here is my build process :

  1. create generated area (to add the built files)
  2. convert the main config.yaml to json (with pre-compute file to handle yaml file import not natively handled)
  3. build pages from the page folder
    1. parse the file header as page specific yaml data and add theme to the config data available to ejs parsing (with pre-compute file to handle yaml file import not natively handled)
    2. render the file content with ejs, using a default template (overwritable with local config) and import some widget specific to the page as ejs partial.
    3. evaluate markdown content
  4. css, js build
  5. CI/CD deployment in check and validate environnement.
  6. CI/CD manual one click publish

In the 3rd step part 2, if the user have a yaml data file need for some widget, the user need to import it in the page header, then import the ejs widget template at each location the widget should be shown.

I would like to be able to import the yaml data directly from the ejs widget file (like if it was scoped local to the widget data) to make the user life easier.

If i can plug some custom stuff when ejs call include, i should be able to do what i want :

  1. at ejs parsing time, ejs call include
  2. i catch this and insert a pre-parsing step with :
    • in parametters : the included raw file content, ejs config/data context with specific include parameters included (or available as an other data set).
    • as return : the pre-computed file content, the updated ejs config/data context and merged or as an other part the updated parameters specific to this include.

In other terms, i would like to overwrite include default behavior to add custom step, exept if what i want to do is already done by an EJSExtension or an hidden to my eyes native ejs behavior.

Do you better under my use case ?

Have you any recommandations ?

1000i100 avatar Feb 15 '21 17:02 1000i100

I also like YAML frontmatter, there are several modules such as front-matter to extract it from template files. But you can split the file originally passed to ejs, not other files include by ejs, that's your request, isn't it? You can configure a custom fileLoader or includer to

  • load the page
  • extract YAML data from template content and parse it as headerData
  • prepend template content with assignment (<% Object.assign(locals, headerData) %>)

nichtich avatar Feb 15 '21 17:02 nichtich

not other files include by ejs, that's your request, isn't it?

Yes !

You can configure a custom fileLoader or includer to

  • load the page
  • extract YAML data from template content and parse it as headerData
  • prepend template content with assignment (<% Object.assign(locals, headerData) %>)

Does this will allow me to do my stuff for files included by ejs ?

if yes, il will investigate how to do it :)

1000i100 avatar Feb 16 '21 19:02 1000i100

I use something similar to:

const yaml = require('js-yaml');
const fs = require('fs');
const ejs = require('ejs');

fs.readFile('params.yml',(err,ymldata) => {
    data = yaml.load(ymldata);
    ejs.renderFile('./template.conf.ejs',data,{root: './templates'})
        .then((result) => console.log(result))
        .catch(console.error)
})

I don't see a way to load YAML through the default render functions at least based on the cli tags -f and -i. I assume you could extend the code to support YAML or at least extend the custom data loading method to use that instead but whether you wish to undertake that or not is a different question.

jimbo8098 avatar Feb 18 '21 13:02 jimbo8098