Add documentation files and update package dependencies

docs/_e11ty/includes/menu.html

@@ -1,5 +1,7 @@
 <div class="p-6">
-	{{ collections | inspect }}
-
-	Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae iure blanditiis a, rerum explicabo amet quibusdam excepturi officia? Voluptatem commodi temporibus neque dignissimos iste illum officia laboriosam, totam ea id.
+	{% for collection in collections.all %}
+		<div>
+			<a href="{{ collection.url }}">{{ collection.data.title }} {{ collection.url }}</a>
+		</div>
+	{% endfor %}
 </div>

docs/_e11ty/includes/ui

@@ -0,0 +1 @@
+../../../preview/pages/_includes/ui

docs/eleventy.config.mjs

@@ -1,29 +1,23 @@
 
+import { appConfig } from "@repo/e11ty"
+
 /** @type {import('@11ty/eleventy').LocalConfig} */
 export default function (eleventyConfig) {
+	appConfig(eleventyConfig);
 
 	eleventyConfig.addPassthroughCopy({
 		"node_modules/@tabler/core/dist": "core",
 		"pages/favicon.ico": "favicon.ico",
 	});
 
-	eleventyConfig.setLiquidOptions({
-		timezoneOffset: 0,
-		jekyllInclude: true,
-		dynamicPartials: true,
-		jekyllWhere: true,
-	});
+	eleventyConfig.setIncludesDirectory("_e11ty/includes");
+	eleventyConfig.setDataDirectory("_e11ty/data");
+	eleventyConfig.setOutputDirectory("dist");
+	eleventyConfig.setLayoutsDirectory("_e11ty/layouts");
+
+	eleventyConfig.addPairedShortcode("example", function (content) {
+		return '<div class="example">' + content + '</div>';
+	})
 
-	return {
-		dir: {
-			output: "dist",
-			includes: "_includes",
-			data: "_data",
-			layouts: "_layouts",
-		},
-		passthroughFileCopy: true,
-		templateFormats: ["html", "md", "liquid"],
-		htmlTemplateEngine: "liquid",
-		markdownTemplateEngine: "liquid",
-	}
+	return {}
 };

docs/illustrations/introduction/index.md

@@ -2,4 +2,5 @@
 title: Introduction
 description: Introduction to Tabler Illustrations and their key features.
 summary: Tabler Illustrations is a collection of high-quality, customizable illustrations designed to enhance the visual appeal of your projects. These illustrations align seamlessly with the Tabler design system, making it easy to create engaging and cohesive designs for websites, apps, and presentations
+layout: default
 ---

docs/package.json

@@ -9,9 +9,11 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
+  "dependencies": {
+    "@tabler/core": "workspace:*"
+  },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
-    "@tabler/core": "workspace:*",
     "@repo/e11ty": "workspace:*"
   }
-}
+}

docs/test.md

@@ -0,0 +1,14 @@
+---
+title: Test
+layout: default
+---
+
+test
+
+{% example %}
+{% include "ui/avatar.html" %}
+{% endexample %}
+
+```
+{% include "ui/avatar.html" %}
+```

docs/ui/base/index.md

@@ -3,4 +3,5 @@ title: Base
 order: 2
 description: Foundational elements for UI design.
 summary: The base section includes foundational elements such as colors, typography, and spacing that form the building blocks of a cohesive and consistent user interface.
+layout: default
 ---

pnpm-lock.yaml

@@ -92,6 +92,10 @@ importers:
         version: link:../shared/banner
 
   docs:
+    dependencies:
+      '@tabler/core':
+        specifier: workspace:*
+        version: link:../core
     devDependencies:
       '@11ty/eleventy':
         specifier: ^3.0.0
@@ -99,9 +103,6 @@ importers:
       '@repo/e11ty':
         specifier: workspace:*
         version: link:../shared/e11ty
-      '@tabler/core':
-        specifier: workspace:*
-        version: link:../core
 
   preview:
     dependencies:
@@ -172,6 +173,9 @@ importers:
       '@repo/banner':
         specifier: workspace:*
         version: link:../shared/banner
+      '@repo/e11ty':
+        specifier: workspace:*
+        version: link:../shared/e11ty
       imageoptim-cli:
         specifier: ^3.1.9
         version: 3.1.9

preview/eleventy.config.mjs

@@ -2,6 +2,7 @@ import { readFileSync } from 'node:fs';
 import { EleventyRenderPlugin } from "@11ty/eleventy";
 import { join, dirname } from 'node:path';
 import { sync } from 'glob';
+import { appConfig } from '@repo/e11ty'
 
 /*
  * Copy list
@@ -54,18 +55,13 @@ export default function (eleventyConfig) {
 	// eleventyConfig.setWatchThrottleWaitTime(100);
 
 	eleventyConfig.addPassthroughCopy(getCopyList());
-	eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
 
 	eleventyConfig.addPlugin(EleventyRenderPlugin, {
 		accessGlobalData: true,
 	});
 
-	eleventyConfig.setLiquidOptions({
-		timezoneOffset: 0,
-		jekyllInclude: true,
-		dynamicPartials: true,
-		jekyllWhere: true,
-	});
+	appConfig(eleventyConfig);
+
 	/**
 	 * Server
 	 */
@@ -91,7 +87,7 @@ export default function (eleventyConfig) {
 			return {
 				url: file.replace(/^pages\//, '/')
 			}
-});
+		});
 	});
 
 	eleventyConfig.addGlobalData("site", {
@@ -409,195 +405,4 @@ export default function (eleventyConfig) {
 			"December"
 		]
 	});
-
-	/**
-	 * Filters
-	 */
-	eleventyConfig.addFilter("miliseconds_to_minutes", function (value) { 
-		// Raturn 3:45 time format
-		const minutes = Math.floor(value / 60000);
-		const seconds = ((value % 60000) / 1000).toFixed(0);
-		return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
-	 });
-
-	eleventyConfig.addFilter("relative", (page) => {
-		const segments = (page.url || '').replace(/^\//).split('/');
-		if (segments.length === 1) {
-			return '.';
-		} else {
-			return '../'.repeat(segments.length - 1).slice(0, -1);
-		}
-	});
-
-	eleventyConfig.addFilter("contains", (items, item) => {
-		return items && Array.isArray(items) && items.includes(item);
-	});
-
-	eleventyConfig.addFilter("concat_objects", function (object, object2) {
-		if (
-			object &&
-			object2 &&
-			typeof object === 'object' &&
-			typeof object2 === 'object' &&
-			!Array.isArray(object) &&
-			!Array.isArray(object2)
-		) {
-			return { ...object, ...object2 };
-		}
-		return object;
-	});
-
-	eleventyConfig.addFilter("replace_regex", function (input, regStr, replStr) {
-		const regex = new RegExp(regStr, 'gm');
-		return input.replace(regex, replStr);
-	});
-
-	eleventyConfig.addFilter("timestamp_to_date", function (timestamp) {
-		const date = new Date(timestamp * 1000); // Convert timestamp to milliseconds
-		return date.toISOString().split('T')[0]; // Extract the date in 'YYYY-MM-DD' format
-	});
-
-	eleventyConfig.addFilter("split_to_n", function (arr, n) {
-		const chunkSize = Math.round(arr.length / n);
-		const result = [];
-		for (let i = 0; i < arr.length; i += chunkSize) {
-			result.push(arr.slice(i, i + chunkSize));
-		}
-		return result;
-	})
-
-	eleventyConfig.addFilter("format_number", function (value) {
-		return value.toString()
-			.split('')
-			.reverse()
-			.reduce((acc, char, index) => {
-				if (index > 0 && index % 3 === 0) {
-					acc.push(',');
-				}
-				acc.push(char);
-				return acc;
-			}, [])
-			.reverse()
-			.join('');
-	});
-
-	function randomNumber(x, min = 0, max = 100, round = 0) {
-		let value = ((x * x * Math.PI * Math.E * (max + 1) * (Math.sin(x) / Math.cos(x * x))) % (max + 1 - min)) + min;
-
-		value = value > max ? max : value;
-		value = value < min ? min : value;
-
-		if (round !== 0) {
-			value = parseFloat(value.toFixed(round));
-		} else {
-			value = Math.floor(value);
-		}
-
-		return value;
-	}
-
-	eleventyConfig.addFilter("random_date_ago", function (x, daysAgo = 100) {
-		const today = new Date();
-		const randomDaysAgo = randomNumber(x, 0, daysAgo);
-		today.setDate(today.getDate() - randomDaysAgo);
-		return today;
-	});
-
-	eleventyConfig.addFilter("random_date", function (x, startDate = null, endDate = null) {
-		const start = startDate ? new Date(startDate).getTime() : Date.now() - 100 * 24 * 60 * 60 * 1000;
-		const end = endDate ? new Date(endDate).getTime() : Date.now();
-
-		const randomTimestamp = randomNumber(x, start, end);
-		return new Date(randomTimestamp);
-	});
-
-	eleventyConfig.addFilter("random_item", function (x, items) {
-		const index = randomNumber(x, 0, items.length - 1);
-		return items[index];
-	});
-
-	eleventyConfig.addFilter("random_number", randomNumber);
-
-	eleventyConfig.addFilter("first_letters", function capitalizeFirstLetter(string) {
-		return string.split(' ').map(word => word.charAt(0)).join('');
-	})
-
-	eleventyConfig.addFilter("size", function (elem) {
-		if (elem instanceof Object) {
-			return Object.keys(elem).length;
-		}
-
-		return elem.length;
-	})
-
-	eleventyConfig.addFilter("first", function (elem) {
-		if (elem instanceof Object) {
-			return elem[Object.keys(elem)[0]];
-		}
-
-		return elem[0];
-	})
-
-	// time ago from today
-	eleventyConfig.addFilter("timeago", function (date) {
-		const seconds = Math.floor((new Date() - date) / 1000);
-
-		let interval = Math.floor(seconds / 31536000);
-
-		if (interval > 1) {
-			return interval + " years ago";
-		}
-		interval = Math.floor(seconds / 2592000);
-		if (interval > 1) {
-			return interval + " months ago";
-		}
-		interval = Math.floor(seconds / 86400);
-		if (interval > 1) {
-			return interval + " days ago";
-		}
-		interval = Math.floor(seconds / 3600);
-		if (interval > 1) {
-			return interval + " hours ago";
-		}
-		interval = Math.floor(seconds / 60);
-		if (interval > 1) {
-			return interval + " minutes ago";
-		}
-		if (seconds > 0) {
-			return Math.floor(seconds) + " seconds ago";
-		}
-
-		return "now";
-	})
-
-	/**
-	 * Shortcodes
-	 */
-	const tags = ["capture_global", "endcapture_global", "highlight", "endhighlight"];
-	tags.forEach(tag => {
-		eleventyConfig.addLiquidTag(tag, function (liquidEngine) {
-			return {
-				parse: function (tagToken, remainingTokens) {
-					this.str = tagToken.args;
-				},
-				render: function (scope, hash) {
-					return "";
-				},
-			};
-		});
-	});
-
-	/**
-	 * Transforms
-	 */
-	function prettifyHTML(content, outputPath) {
-		return outputPath.endsWith('.html')
-			? content
-				.replace(/\/\/ @formatter:(on|off)\n+/gm, '')
-				// remove empty lines
-				.replace(/^\s*[\r\n]/gm, '')
-			: content
-	}
-
-	eleventyConfig.addTransform('htmlformat', prettifyHTML)
 };

preview/package.json

@@ -51,6 +51,7 @@
     "autosize": "^6.0.1"
   },
   "devDependencies": {
+    "@repo/e11ty": "workspace:*",
     "request": "^2.88.2",
     "imageoptim-cli": "^3.1.9",
     "@11ty/eleventy": "^3.0.0",

shared/e11ty/index.mjs

@@ -5,4 +5,209 @@ export function appConfig(eleventyConfig) {
 		dynamicPartials: true,
 		jekyllWhere: true,
 	});
+
+	eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
+
+	/**
+	 * Filters
+	 */
+	eleventyConfig.addFilter("miliseconds_to_minutes", function (value) {
+		// Raturn 3:45 time format
+		const minutes = Math.floor(value / 60000);
+		const seconds = ((value % 60000) / 1000).toFixed(0);
+		return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+	});
+
+	eleventyConfig.addFilter("relative", (page) => {
+		const segments = (page.url || '').replace(/^\//).split('/');
+		if (segments.length === 1) {
+			return '.';
+		} else {
+			return '../'.repeat(segments.length - 1).slice(0, -1);
+		}
+	});
+
+	eleventyConfig.addFilter("contains", (items, item) => {
+		return items && Array.isArray(items) && items.includes(item);
+	});
+
+	eleventyConfig.addFilter("inspect", (items) => {
+		return JSON.stringify(items, null, 2);
+	});
+
+	eleventyConfig.addFilter("keys", (obj) => {
+		return Object.keys(obj);
+	});
+
+	eleventyConfig.addFilter("log", (obj) => {
+		return `<script>console.log(${JSON.stringify(obj, null, 2)})</script>`;
+	});
+
+	eleventyConfig.addFilter("concat_objects", function (object, object2) {
+		if (
+			object &&
+			object2 &&
+			typeof object === 'object' &&
+			typeof object2 === 'object' &&
+			!Array.isArray(object) &&
+			!Array.isArray(object2)
+		) {
+			return { ...object, ...object2 };
+		}
+		return object;
+	});
+
+	eleventyConfig.addFilter("replace_regex", function (input, regStr, replStr) {
+		const regex = new RegExp(regStr, 'gm');
+		return input.replace(regex, replStr);
+	});
+
+	eleventyConfig.addFilter("timestamp_to_date", function (timestamp) {
+		const date = new Date(timestamp * 1000); // Convert timestamp to milliseconds
+		return date.toISOString().split('T')[0]; // Extract the date in 'YYYY-MM-DD' format
+	});
+
+	eleventyConfig.addFilter("split_to_n", function (arr, n) {
+		const chunkSize = Math.round(arr.length / n);
+		const result = [];
+		for (let i = 0; i < arr.length; i += chunkSize) {
+			result.push(arr.slice(i, i + chunkSize));
+		}
+		return result;
+	})
+
+	eleventyConfig.addFilter("format_number", function (value) {
+		return value.toString()
+			.split('')
+			.reverse()
+			.reduce((acc, char, index) => {
+				if (index > 0 && index % 3 === 0) {
+					acc.push(',');
+				}
+				acc.push(char);
+				return acc;
+			}, [])
+			.reverse()
+			.join('');
+	});
+
+	function randomNumber(x, min = 0, max = 100, round = 0) {
+		let value = ((x * x * Math.PI * Math.E * (max + 1) * (Math.sin(x) / Math.cos(x * x))) % (max + 1 - min)) + min;
+
+		value = value > max ? max : value;
+		value = value < min ? min : value;
+
+		if (round !== 0) {
+			value = parseFloat(value.toFixed(round));
+		} else {
+			value = Math.floor(value);
+		}
+
+		return value;
+	}
+
+	eleventyConfig.addFilter("random_date_ago", function (x, daysAgo = 100) {
+		const today = new Date();
+		const randomDaysAgo = randomNumber(x, 0, daysAgo);
+		today.setDate(today.getDate() - randomDaysAgo);
+		return today;
+	});
+
+	eleventyConfig.addFilter("random_date", function (x, startDate = null, endDate = null) {
+		const start = startDate ? new Date(startDate).getTime() : Date.now() - 100 * 24 * 60 * 60 * 1000;
+		const end = endDate ? new Date(endDate).getTime() : Date.now();
+
+		const randomTimestamp = randomNumber(x, start, end);
+		return new Date(randomTimestamp);
+	});
+
+	eleventyConfig.addFilter("random_item", function (x, items) {
+		const index = randomNumber(x, 0, items.length - 1);
+		return items[index];
+	});
+
+	eleventyConfig.addFilter("random_number", randomNumber);
+
+	eleventyConfig.addFilter("first_letters", function capitalizeFirstLetter(string) {
+		return string.split(' ').map(word => word.charAt(0)).join('');
+	})
+
+	eleventyConfig.addFilter("size", function (elem) {
+		if (elem instanceof Object) {
+			return Object.keys(elem).length;
+		}
+
+		return elem.length;
+	})
+
+	eleventyConfig.addFilter("first", function (elem) {
+		if (elem instanceof Object) {
+			return elem[Object.keys(elem)[0]];
+		}
+
+		return elem[0];
+	})
+
+	// time ago from today
+	eleventyConfig.addFilter("timeago", function (date) {
+		const seconds = Math.floor((new Date() - date) / 1000);
+
+		let interval = Math.floor(seconds / 31536000);
+
+		if (interval > 1) {
+			return interval + " years ago";
+		}
+		interval = Math.floor(seconds / 2592000);
+		if (interval > 1) {
+			return interval + " months ago";
+		}
+		interval = Math.floor(seconds / 86400);
+		if (interval > 1) {
+			return interval + " days ago";
+		}
+		interval = Math.floor(seconds / 3600);
+		if (interval > 1) {
+			return interval + " hours ago";
+		}
+		interval = Math.floor(seconds / 60);
+		if (interval > 1) {
+			return interval + " minutes ago";
+		}
+		if (seconds > 0) {
+			return Math.floor(seconds) + " seconds ago";
+		}
+
+		return "now";
+	})
+
+	/**
+	 * Shortcodes
+	 */
+	const tags = ["capture_global", "endcapture_global", "highlight", "endhighlight"];
+	tags.forEach(tag => {
+		eleventyConfig.addLiquidTag(tag, function (liquidEngine) {
+			return {
+				parse: function (tagToken, remainingTokens) {
+					this.str = tagToken.args;
+				},
+				render: function (scope, hash) {
+					return "";
+				},
+			};
+		});
+	});
+
+	/**
+	 * Transforms
+	 */
+	function prettifyHTML(content, outputPath) {
+		return outputPath.endsWith('.html')
+			? content
+				.replace(/\/\/ @formatter:(on|off)\n+/gm, '')
+				// remove empty lines
+				.replace(/^\s*[\r\n]/gm, '')
+			: content
+	}
+
+	eleventyConfig.addTransform('htmlformat', prettifyHTML)
 }