Fractal: Use HTML tags in YAML

[the-friendly-coach]

Heyho and thanks for this great piece of software. Makes a lot of fun to work with.
One Question . Is it somehow possible to use html markup in our yaml files like so:

text: new module
context:
      fieldLabel: |
                   <strong>
                       Some Bold Text
                   </strong> and now normal continued.

[tlenex]

I personally think it's a bad practice to mix YAML and HTML markup.
I tried different way to use config properties to hold component handlers like @component-name. I even managed to get an working example: https://github.com/frctl/fractal/issues/239 but it don't know if it is a bug or a feature of fractal :(

[iamkeir]

@tonimain You can :)

title: My Module
context:
  someHTML: <p>Yehaw!</p>

Then use three curly braces to disable HTML escaping:

{{{ someHTML }}}

See: http://handlebarsjs.com/expressions.html

[samuells]

Hmm, you can create sample.html file and then define this file in yaml. Or you can create lot with .js as config file ;)

[iamkeir]

@samuells oh cool, a separate HTML file is a smart idea. How do you reference an external file in the config YAML?

[samuells]

I've created js helper/parser for it kind of. I've used as advantage, that you can create component config file as .js. But we didn't want to switch configs into js - so we have a special cases, where we have config.yml and config.js. Than I just use js module to load yml settings and inject the content from specific html.

Sample - breadcrumb.config.yml

title: Breadcrumb Navigation
status: 'wip'
preview: '@preview'
context:
  breadcrumbs: ''

Sample - breadcrumb.config.js

const configHelper = require('fractal-config-helper');
const configObject = configHelper.loadYml(__filename);
configObject.context.breadcrumbs = configHelper.sampleLoader('_breadcrumb.html');
// Export config
module.exports = configObject;

in fractal-config-helper are defined few helper functions, which I can use to load config.yml content according to the folder into the configObject and after that I can inject content of html file also into this configObject. In this case it's static definition of html, but you could build the html variable same as __filename.

Than you have to export configObject - this is from fractal documentation. And config.js has higher priority as config.yml

[dennisgaebel]

@samuells Do you have a full gist somewhere for this type of workflow?

[samuells]

@dennisgaebel I don't have any, but if you copy paste the sample in my post it should work ;)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.