Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

Add documentation files and update package dependencies

Browse Source
This commit is contained in:
codecalm
2025-02-11 23:11:03 +01:00
parent cd1711e995
commit 22bc0b38fb
11 changed files with 255 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/_e11ty/includes/menu.html
View File

@@ -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>

1
docs/_e11ty/includes/ui Symbolic link
View File

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

30
docs/eleventy.config.mjs
View File

@@ -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");
return {
dir: {
output: "dist",
includes: "_includes",
data: "_data",
layouts: "_layouts",
},
passthroughFileCopy: true,
templateFormats: ["html", "md", "liquid"],
htmlTemplateEngine: "liquid",
markdownTemplateEngine: "liquid",
}
eleventyConfig.addPairedShortcode("example", function (content) {
return '<div class="example">' + content + '</div>';
})
return {}
};

1
docs/illustrations/introduction/index.md
View File

@@ -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
---

4
docs/package.json
View File

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

14
docs/test.md Normal file
View File

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

1
docs/ui/base/index.md
View File

@@ -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
---

10
pnpm-lock.yaml generated
View File

@@ -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

201
preview/eleventy.config.mjs
View File

@@ -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
*/
@@ -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)
};

1
preview/package.json
View File

@@ -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",

205
shared/e11ty/index.mjs
View File

@@ -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)
}