hypnagaga_old/src/docs/template-languages.md

title
Template Languages

We use the following template languages:

• Nunjucks
• Markdown
• WebC

Nunjucks

Nunjucks Docs: https://mozilla.github.io/nunjucks/templating.html

prettier-plugin-jinja-template is used for Nunjucks code formatting. It is configured in .prettierrc.

I use Better Jinja for syntax highlighting. After installing it for your code editor, you can configure the file associations in your settings:

{
  "files.associations": {
    "*.njk": "jinja-html"
  }
}

Nunjucks was inspired by Jinja2, which is a Python templating engine. The syntax is very similar. I did not find good syntax-highlighting and formatting solutions specifically made for Nunjucks, but everything Jinja2 works just fine.

Markdown

Eleventy uses markdown-it for markdown files (.md). The custom configuration for this starter is in src/_config/plugins/markdown.js.

WebC

WebC is standalone HTML serializer for generating markup for Web Components. We use the WebC plugin for Eleventy.

We combine WebC components with Nunjucks partials:

src/_includes/webc/custom-card.webc     # WebC component definition
src/_includes/partials/card-blog.njk    # Nunjucks partial with logic
src/_includes/partials/card-tag.njk     # Another partial using the same component