🔧 chore(eleventy/ui/tailwind): functionality

🎩 NOTES: 🔸Add Core config for eleventy with nunjucks for templating 🔸Add tailwin css, with custom colors and typography 🔸Add base layout 🔸Add dashboard with incomplete widgets related to 🔸Add page with color pallete - incomplete 🔸Add css bundle - main.css compiled from tailwind 🔸Add passthrough copy for aplinejs and apexcharts 🔸Add passthrough copy for images 🔸add tailwin plugin to add custom neon colors using color pallete closes
sgkens · Jan 25, 2024 · d21c9ab · d21c9ab
1 parent e47a68e
commit d21c9ab
Show file tree

Hide file tree

Showing 52 changed files with 13,502 additions and 137 deletions.
diff --git a/src/_includes/colors.njk b/src/_includes/colors.njk
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Raccoon UI</title>
+    <link rel="stylesheet" href="../bundle.css">
+    <script rel="text/javascript" src="../js/alpinejs/3.13.3/cdn.min.js" defer></script>
+    <script rel="text/javascript" src="../js/apexcharts/3.45.1/apexcharts.min.js"></script>
+    <script rel="text/javascript" src="../js/main.js"></script>
+</head>
+
+<body>
+    <div class="wrapper w-full flex">
+
+        {% include 'components/navigation/nav-left.njk' %}
+
+        <div class="wrapper-content w-full min-h-screen dark:bg-russian_violet-100">
+
+            {% include 'components/navigation/top-bar.njk' %}
+
+            <main class=" w-auto mx-auto p-4 overflow-auto dark:text-white">
+
+                {% include 'components/content/content-header.njk' %}
+
+                <div class="flex justify-start">
+
+                    {% include 'components/content/content-colors.njk' %}
+
+                </div>
+
+            </main>
+
+            {% include 'components/navigation/footer.njk' %}
+
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/src/_includes/components/content/content-colors.njk b/src/_includes/components/content/content-colors.njk
@@ -0,0 +1,108 @@
+<div class="flex flex-col">
+    <h2 class="text-2xl font-semibold mb-3">Neion Test</h2>
+<div class="neontest neon-red-200 bg-slate-700">This should have a neon red border and shadow.</div>
+<div class="neontest neon-blue-500">This should have a neon blue border and shadow.</div>
+    <div class="grid grid-cols-7 md:grid-cols-10 lg:grid-cols-10 xl:grid-cols-12 gap-4 mb-2">
+        <div class="w-12 h-12 rounded-lg neon-dark_purple bg-russian_violet-600 text-center pt-3">200</div>
+        <div class="w-12 h-12 rounded-lg neon-dark_purple bg-red_cmyk-500 text-center pt-3">200</div>
+        <div class="w-12 h-12 rounded-lg neon-indigo bg-russian_violet-600 text-center pt-3">200</div>
+        <div class="w-12 h-12 rounded-lg neon-indigo text-center pt-3">200</div>
+    </div>
+    <h2 class="text-2xl font-semibold mb-3">Night</h2>
+    <div class="grid grid-cols-7 md:grid-cols-10 lg:grid-cols-10 xl:grid-cols-12 gap-4 mb-2">
+        <div class="sm:w-12 sm:h-12 md:h-24 md:w-24 xl:h-36 xl:w-36 rounded-lg bg-night-100 text-center pt-3">100</div>
+        <div class="w-12 h-12 rounded-lg bg-night-200 text-center pt-3">200</div>
+        <div class="w-12 h-12 rounded-lg bg-night-300 text-center pt-3">300</div>
+        <div class="w-12 h-12 rounded-lg bg-night-400 text-center pt-3">400</div>
+        <div class="w-12 h-12 rounded-lg bg-night-500 text-center pt-3">500</div>
+        <div class="w-12 h-12 rounded-lg bg-night-600 text-center pt-3">600</div>
+        <div class="w-12 h-12 rounded-lg bg-night-700 text-center pt-3">700</div>
+        <div class="w-12 h-12 rounded-lg bg-night-800 text-center pt-3">800</div>
+        <div class="w-12 h-12 rounded-lg bg-night-900 text-center pt-3">900</div>
+    </div>
+    <h2 class="text-2xl font-semibold mb-3">Russian violet</h2>
+    <div class="grid grid-cols-7 md:grid-cols-10 lg:grid-cols-10 xl:grid-cols-12 gap-4 mb-2">
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-100 text-center pt-3">100</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-200 text-center pt-3">200</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-300 text-center pt-3">300</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-400 text-center pt-3">400</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-500 text-center pt-3">500</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-600 text-center pt-3">600</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-700 text-center pt-3">700</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-800 text-center pt-3">800</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-900 text-center pt-3">900</div>
+    </div>
+    <h2 class="text-2xl font-semibold mb-3">Dark urple</h2>
+    <div class="grid grid-cols-7 md:grid-cols-10 lg:grid-cols-10 xl:grid-cols-12 gap-4 mb-2">
+        <div class="w-12 h-12 rounded-lg bg-dark_purple-100 text-center pt-3">100</div>
+        <div class="w-12 h-12 rounded-lg bg-dark_purple-200 text-center pt-3">200</div>
+        <div class="w-12 h-12 rounded-lg bg-dark_purple-300 text-center pt-3">300</div>
+        <div class="w-12 h-12 rounded-lg bg-dark_purple-400 text-center pt-3">400</div>
+        <div class="w-12 h-12 rounded-lg bg-dark_purple-500 text-center pt-3">500</div>
+        <div class="w-12 h-12 rounded-lg bg-dark_purple-600 text-center pt-3">600</div>
+        <div class="w-12 h-12 rounded-lg bg-dark_purple-700 text-center pt-3">700</div>
+        <div class="w-12 h-12 rounded-lg bg-dark_purple-800 text-center pt-3">800</div>
+        <div class="w-12 h-12 rounded-lg bg-dark_purple-900 text-center pt-3">900</div>
+    </div>
+    <h2 class="text-2xl font-semibold mb-3">celadon</h2>
+    <div class="grid grid-cols-7 md:grid-cols-10 lg:grid-cols-10 xl:grid-cols-12 gap-4 mb-2">
+        <div class="w-12 h-12 rounded-lg bg-celadon-100 text-center pt-3">100</div>
+        <div class="w-12 h-12 rounded-lg bg-celadon-200 text-center pt-3">200</div>
+        <div class="w-12 h-12 rounded-lg bg-celadon-300 text-center pt-3">300</div>
+        <div class="w-12 h-12 rounded-lg bg-celadon-400 text-center pt-3">400</div>
+        <div class="w-12 h-12 rounded-lg bg-celadon-500 text-center pt-3">500</div>
+        <div class="w-12 h-12 rounded-lg bg-celadon-600 text-center pt-3">600</div>
+        <div class="w-12 h-12 rounded-lg bg-celadon-700 text-center pt-3">700</div>
+        <div class="w-12 h-12 rounded-lg bg-celadon-800 text-center pt-3">800</div>
+        <div class="w-12 h-12 rounded-lg bg-celadon-900 text-center pt-3">900</div>
+    </div>
+    <h2 class="text-2xl font-semibold mb-3">Russian violet</h2>
+    <div class="grid grid-cols-7 md:grid-cols-10 lg:grid-cols-10 xl:grid-cols-12 gap-4 mb-2">
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-100 text-center pt-3">100</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-200 text-center pt-3">200</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-300 text-center pt-3">300</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-400 text-center pt-3">400</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-500 text-center pt-3">500</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-600 text-center pt-3">600</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-700 text-center pt-3">700</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-800 text-center pt-3">800</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-900 text-center pt-3">900</div>
+    </div>
+    <h2 class="text-2xl font-semibold mb-3">Russian violet</h2>
+    <div class="grid grid-cols-7 md:grid-cols-10 lg:grid-cols-10 xl:grid-cols-12 gap-4 mb-2">
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-100 text-center pt-3">100</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-200 text-center pt-3">200</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-300 text-center pt-3">300</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-400 text-center pt-3">400</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-500 text-center pt-3">500</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-600 text-center pt-3">600</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-700 text-center pt-3">700</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-800 text-center pt-3">800</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-900 text-center pt-3">900</div>
+    </div>
+    <h2 class="text-2xl font-semibold mb-3">Russian violet</h2>
+    <div class="grid grid-cols-7 md:grid-cols-10 lg:grid-cols-10 xl:grid-cols-12 gap-4 mb-2">
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-100 text-center pt-3">100</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-200 text-center pt-3">200</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-300 text-center pt-3">300</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-400 text-center pt-3">400</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-500 text-center pt-3">500</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-600 text-center pt-3">600</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-700 text-center pt-3">700</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-800 text-center pt-3">800</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-900 text-center pt-3">900</div>
+    </div>
+    <h2 class="text-2xl font-semibold mb-3">Russian violet</h2>
+    <div class="grid grid-cols-7 md:grid-cols-10 lg:grid-cols-10 xl:grid-cols-12 gap-4 mb-2">
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-100 text-center pt-3">100</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-200 text-center pt-3">200</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-300 text-center pt-3">300</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-400 text-center pt-3">400</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-500 text-center pt-3">500</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-600 text-center pt-3">600</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-700 text-center pt-3">700</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-800 text-center pt-3">800</div>
+        <div class="w-12 h-12 rounded-lg bg-russian_violet-900 text-center pt-3">900</div>
+    </div>
+</div>
+
diff --git a/src/_includes/components/content/content-header.njk b/src/_includes/components/content/content-header.njk
@@ -0,0 +1,7 @@
+
+<div class="flex flex-col mt-2">
+    <div class="mb-2">
+        <h2 class="text-2xl font-semibold ">{{ title | safe }} - [Other meta data]</h2>
+    </div>
+</div>
+<div class="w-full flex opacity-100 mb-5 ">Header Area</div>
diff --git a/src/_includes/components/content/content-widgets.njk b/src/_includes/components/content/content-widgets.njk
@@ -0,0 +1,146 @@
+
+<div class="content-wrapper grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-2 ">
+    {% include 'components/widgets/server-info.njk' %}
+
+    {% include 'components/widgets/ram-usage.njk' %}
+
+    <!--
+        [WIDGET - CPU Unitilization]
+    -->
+    <div class="rounded-md dark:shadow-sm shadow-md shadow-indigo-200 ring-1 ring-purple-200">
+        <div class="flex flex-col w-full">
+            <div class="bg-gradient-to-r from-cyan-400 to-blue-500 rounded-t-md">
+                <h2 class="shadow-md text-lg font-semibold badge p-4 text-white"><i class="fa-solid fa-server"></i> CPU
+                    Unitilization</h2>
+                <div class="border-t-2 border-y-slate-300 bg-white" id="chart-cpu-until">
+                    <script type="module">
+                        var options = {
+                            chart: {
+                                type: 'bar'
+                            },
+                            series: [{
+                                name: 'CPU Unitilization',
+                                data: [12, 86, 36, 85, 75, 50, 65, 91, 80]
+                            }],
+                            xaxis: {
+                                categories: ['7:25 pm', '7:25pm', '7:25pm', '7:25pm', '7:25pm', '7:25pm', '7:25pm', '7:25pm', '7:25pm']
+                            },
+                            theme: {
+                                palette: 'palette6' // upto palette10
+                            }
+                        }
+
+                        var chart = new ApexCharts(document.querySelector("#chart-cpu-until"), options);
+                        chart.render();
+                    </script>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--
+                                        [@END WIDGET - CPU Unitilization]
+                                    -->
+
+    <!--BASE WIDGET-->
+    <div class="rounded-md dark:shadow-sm shadow-md shadow-indigo-200 ring-1 ring-purple-200">
+        <div class="flex flex-col w-full">
+            <div class="bg-gradient-to-r from-cyan-500 to-blue-500 rounded-t-md">
+                <h2 class="text-lg font-semibold badge p-4 text-white"><i class="fa-solid fa-server"></i> Repositories
+                    usage</h2>
+                <div class="border-t-2 border-y-slate-300 bg-slate-300 bg-opacity-60" id="chart-repos">
+                    <script type="module">
+                        var options = {
+                            chart: {
+                                type: 'donut'
+                            },
+                            series: [20, 10, 24, 80],
+                            labels: ['zfs1', 'local', 'iscsi', 'smb2'],
+                            theme: {
+                                palette: "palette2"
+                            },
+                            plotOptions: {
+                                pie: {
+                                    donut: {
+                                        labels: {
+                                            show: false,
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                        var chart = new ApexCharts(document.querySelector("#chart-repos"), options);
+                        chart.render();
+                    </script>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--BASE WIDGET-->
+
+
+    <!--BASE WIDGET-->
+    <div class="rounded-md dark:shadow-sm shadow-md shadow-indigo-200 ring-1 ring-purple-200">
+        <div class="flex flex-col w-full">
+            <div class="bg-gradient-to-r from-cyan-500 to-blue-500 rounded-t-md">
+                <h2 class="text-lg font-semibold badge p-4 text-white"><i class="fa-solid fa-server"></i> Memory/CPU
+                    Unitilization</h2>
+                <div class="bg-white" id="chart-mem">
+                    <script type="module">
+                        var options = {
+                            series: [{
+                                name: 'Memory',
+                                data: [31, 40, 28, 51, 42, 109, 100]
+                            }, {
+                                name: 'CPU',
+                                data: [11, 32, 45, 32, 34, 52, 41]
+                            }],
+                            chart: {
+                                height: 350,
+                                type: 'area'
+                            },
+                            dataLabels: {
+                                enabled: false
+                            },
+                            stroke: {
+                                curve: 'smooth'
+                            },
+                            xaxis: {
+                                type: 'datetime',
+                                categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
+                            },
+                            tooltip: {
+                                x: {
+                                    format: 'dd/MM/yy HH:mm'
+                                },
+                            },
+                            theme: {
+                                palette: "palette6"
+                            },
+                        };
+
+                        var chart = new ApexCharts(document.querySelector("#chart-mem"), options);
+                        chart.render();
+                    </script>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--BASE WIDGET-->
+
+    <div class="bg-white rounded-lg shadow-md p-4 dark:bg-gray-800">
+        <h2 class="text-lg font-semibold">Widget 2</h2>
+        <p class="text-gray-500 dark:text-gray-400">Content goes here...</p>
+    </div>
+    <div class="bg-white rounded-lg shadow-md p-4 dark:bg-gray-800">
+        <h2 class="text-lg font-semibold">Widget 3</h2>
+        <p class="text-gray-500 dark:text-gray-400">Content goes here...</p>
+    </div>
+    <div class="bg-white rounded-lg shadow-md p-4 dark:bg-gray-800">
+        <h2 class="text-lg font-semibold">Widget 4</h2>
+        <p class="text-gray-500 dark:text-gray-400">Content goes here...</p>
+    </div>
+    <div class="bg-white rounded-lg shadow-md p-4 dark:bg-gray-800">
+        <h2 class="text-lg font-semibold">Widget 5</h2>
+        <p class="text-gray-500 dark:text-gray-400">Content goes here...</p>
+    </div>
+</div>
diff --git a/src/_includes/components/navigation/footer.njk b/src/_includes/components/navigation/footer.njk
@@ -0,0 +1,16 @@
+<footer class="flex 
+               text-sm
+               dark:bg-night
+               w-full
+               px-4
+               py-2
+               border-t
+               border-green-950
+               text-center 
+             dark:text-white 
+               fixed 
+               bottom-0
+    ">
+    <p class="w-full">
+        <b class="text-russian_violet-600">Velvet Void</b> <a class="text-blue-600" href="">MIT</a> License © 2024 Velvent Void.</p>
+</footer>