Refactor example shortcode to use Liquid syntax and enhance styling; add new example include template

docs/_e11ty/includes/example.html

@@ -0,0 +1,5 @@
+<div class="p-6 border rounded mb-4 d-flex align-items-center justify-content-center">
+	<div>
+		{{ include.html }}
+	</div>
+</div>

docs/eleventy.config.mjs

@@ -18,8 +18,8 @@ export default function (eleventyConfig) {
 	eleventyConfig.setOutputDirectory("dist");
 	eleventyConfig.setLayoutsDirectory("_e11ty/layouts");
 
-	eleventyConfig.addPairedShortcode("example", function (content) {
-		return '<div class="example">' + content + '</div>';
+	eleventyConfig.addPairedLiquidShortcode("example", function (content, ...params) {
+		return '<div class="example p-5 border mb-6 rounded">' + params + content + '</div>';
 	})
 
 	eleventyConfig.amendLibrary('md', () => { });
@@ -60,7 +60,7 @@ export default function (eleventyConfig) {
 					let highlightedCode = highlighter.codeToHtml(code.trim(), {
 						lang: lang,
 						themes: {
-							light: 'github-dark',
+							light: 'github-light',
 							dark: 'github-dark',
 						}
 					});

docs/test.md

@@ -5,10 +5,12 @@ layout: default
 
 test
 
-{% example %}
+{% capture html %}
+{% include "ui/avatar.html" icon="heart" color="red" placeholder="as" %}
 {% include "ui/avatar.html" %}
-{% endexample %}
+{% endcapture %}
+{% include "example.html" html=html %}
 
 ```html
-{% include "ui/avatar.html" %}
+{% include "ui/avatar.html" icon="heart" color="red" placeholder="as" %}
 ```