Run yaml files through template engine?

[madsem]

I'm new to 11ty and am integrating Netlify CMS atm.
So right now I'm wondering if it's possible to make Netlify's config.yml more dynamic, by use of template tags.

The best I could come up with was to change config.yml to .njk and then have specific settings for development and production.

The end result should just be that I don't have to remember to switch out settings in the config whenever I deploy :)

For example:

---
permalink: /admin/config.yml
eleventyExcludeFromCollections: true
hide_from_sitemap: true
---
backend:
  site_url: {{ site.url }}
  display_url: {{ site.url }}

  branch: master # optional, defaults to master
  {% if helpers.environment === 'development' %}
  name: proxy
  local_backend: true
  proxy_url: http://localhost:9090/api/v1
  {% else %}
  name: git-gateway
  publish_mode: editorial_workflow
  {% endif %}

This does work, but it makes very hard to write YAML and keep indentation etc.

So, is there a better way using 11ty that I'm not seeing here?

[pdehaan]

Possibly a better way to do this, but what about just putting the config in a JavaScript/JSON object and then convert to YAML to avoid having to think about indenting.

// ./src/config.11ty.js

const yaml = require("js-yaml");

class Config {
  get data() {
    return {
      permalink: "/admin/config.yml",
      eleventyHideFromCollections: true,
      hide_from_sitemap: true,
    };
  }

  async render(data) {
    const backend = {
      site_url: data.site?.url,
      display_url: data.site?.url,
      branch: "master",
      name: "git-gateway",
      publish_mode: "editorial_workflow",
    };
    // If this is a development build, adjust a few more properties.
    if (process.env.ELEVENTY_ENV === "development") {
      backend.name = "proxy";
      backend.local_backend = true;
      backend.proxy_url = "https://localhost:9090/api/v1";
    }
    return yaml.dump({ backend });
  }
}

module.exports = Config;

[madsem]

Ohhhhh, this is beautiful :) Thanks for that.
11ty seems super flexible.

I had some issues making the above work, due to my inexperience. At first I added your class in the .eleventy.js, didn't do anything. But after I created a separate config.11ty.js and put it into src/admin/ it worked like magic.

[pdehaan]

Actually, another approach came to mind too. Manage the Netlify config in a global data file:

// ./src/_data/config_yml.js
const yaml = require("js-yaml");

const { url: site_url } = require("./site");

const backend = {
  site_url,
  display_url: site_url,
  branch: "master",
  name: "git-gateway",
  publish_mode: "editorial_workflow",
};
// If this is a development build, adjust a few more properties.
if (process.env.ELEVENTY_ENV === "development") {
  backend.name = "proxy";
  backend.local_backend = true;
  backend.proxy_url = "https://localhost:9090/api/v1";
}

module.exports = yaml.dump({ backend });

And then I added a ./src/admin_config.njk file which basically sets some frontmatter to override the permalink and other maintenance, and outputs the global {{ config_yml }} data (which is already in YAML format since it seemed slightly easier to return YAML directly rather than creating a custom yaml_dump filter).

---
# ./src/admin_config.njk
permalink: /admin/config.yml
eleventyHideFromCollections: true
hide_from_sitemap: true
---

{{- config_yml | safe -}}

Not sure that one approach is better than the other, but it might be easier to manage if the rest of your site is already using Nunjucks.

[madsem]

That is also a very nice approach, thanks for posting that, helped me learn more :)

I've played around with it a bit more and it became a little issue creating complex nested config.

I then saw in NetlifyCms documentation that it's possible to manually initialize the CMS.

Now I was able to complete delete the config.yml and instead add a third script tag to admin/index.html that points to the init script.

That script is the entry point for a module based CMS configuration setup where everything is written as JS module now and contains only the settings needed for that one widget.

[pdehaan]

Awesome, thanks for the update, I'll have to check out NetlifyCMS.