From 7f5db81a2c7e502b784157689286e6e304259c5d Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Fri, 24 Oct 2025 13:36:27 +0200
Subject: [PATCH] feat: add template languages documentation

---
 src/assets/css/local/details.css |  4 +++
 src/docs/template-languages.md   | 42 ++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 src/docs/template-languages.md

diff --git a/src/assets/css/local/details.css b/src/assets/css/local/details.css
index 4f9805e..06e6f50 100644
--- a/src/assets/css/local/details.css
+++ b/src/assets/css/local/details.css
@@ -71,6 +71,10 @@ is-land:not(:defined) .details .control {
   font-size: var(--size-step-0);
 }
 
+.details details > h4 {
+  color: var(--color-text-accent);
+}
+
 /* Hide default marker */
 .details summary::-webkit-details-marker,
 .details summary::marker {
diff --git a/src/docs/template-languages.md b/src/docs/template-languages.md
new file mode 100644
index 0000000..823ba21
--- /dev/null
+++ b/src/docs/template-languages.md
@@ -0,0 +1,42 @@
+---
+title: Template Languages
+---
+
+We use the following [template languages](https://www.11ty.dev/docs/languages/):
+- [Nunjucks](https://www.11ty.dev/docs/languages/nunjucks/)
+- [Markdown](https://www.11ty.dev/docs/languages/markdown/)
+- [WebC](https://www.11ty.dev/docs/languages/webc/)
+
+### Nunjucks
+
+Nunjucks Docs: [https://mozilla.github.io/nunjucks/templating.html](https://mozilla.github.io/nunjucks/templating.html)
+
+[prettier-plugin-jinja-template](https://github.com/HookyQR/prettier-plugin-jinja-template) is used for Nunjucks code formatting. It is configured in `.prettierrc`.
+
+I use [Better Jinja](https://github.com/samuelcolvin/jinjahtml-vscode) 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](https://github.com/markdown-it/markdown-it) for markdown files (.md). The custom configuration for this starter is in `src/_config/plugins/markdown.js`.
+
+### WebC
+
+[WebC](https://github.com/11ty/webc) is standalone HTML serializer for generating markup for Web Components. We use the [WebC plugin](https://github.com/11ty/eleventy-plugin-webc) for Eleventy.
+
+We combine WebC components with Nunjucks partials:
+
+```bash
+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
+```