adminware · NomadicDaddy · Jan 29, 2025 · Jan 25, 2025 · Jan 25, 2025 · Jan 25, 2025
diff --git a/.build.ps1 b/.build.ps1
@@ -1,17 +1,16 @@
 '# required powershell modules'
-Install-Module -Name PSSQLite -MinimumVersion 1.1.0 -MaximumVersion 1.99.99 -Verbose # MIT
-Install-Module -Name Pode -MinimumVersion 2.11.0 -MaximumVersion 2.99.99 -Verbose # MIT
+# Install-Module -Name PSSQLite -MinimumVersion 1.1.0 -MaximumVersion 1.99.99 -Verbose # MIT
+Install-Module -Name Pode -MinimumVersion 2.11.1 -MaximumVersion 2.99.99 -Verbose # MIT
 
 '# development powershell modules'
 Install-Module -Name Pester -MinimumVersion 5.6.1 -MaximumVersion 5.99.99 -Verbose # Apache 2.0
 Install-Module -Name PSScriptAnalyzer -MinimumVersion 1.23.0 -MaximumVersion 1.99.99 -Verbose # MIT
 
 '# required npm packages'
-npm install htmx.org@next htmx-ext-client-side-templates htmx-ext-debug htmx-ext-json-enc mustache
-npm install tailwindcss @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio
+npm install htmx.org@next htmx-ext-client-side-templates htmx-ext-debug htmx-ext-json-enc mustache tailwindcss @tailwindcss/cli
 
 '# development npm packages'
-npm install -D eslint globals htmx-ext-debug @eslint/js prettier prettier-plugin-tailwindcss prettier-plugin-sql
+npm install -D eslint globals @eslint/js prettier prettier-plugin-tailwindcss prettier-plugin-sql
 
 '# update packages'
 npm update
@@ -34,8 +33,8 @@ Copy-Item -Path './node_modules/mustache/mustache.min.js' -Destination './public
 '# initialize database'
 $db = './podex.db'
 if ((Test-Path -Path $db)) {
-	$confirm = Read-Host "Do you want to reinitialize the database? (y/N)"
-	if ($confirm -eq "y") {
+	$confirm = Read-Host 'Do you want to reinitialize the database? (y/N)'
+	if ($confirm -eq 'y') {
 		Invoke-SqliteQuery -DataSource $db -Query (Get-Content -Path './api/debug/init.sql' -Raw) -Verbose
 	}
 }
diff --git a/.gitignore b/.gitignore
@@ -9,7 +9,4 @@ package-lock.json
 .vscode/
 podex.db
 public/css/output.css
-public/js/client-side-templates.js
-public/js/htmx.min.js
-public/js/json-enc.js
-public/js/mustache.min.js
+public/js/
diff --git a/.prettierignore b/.prettierignore
@@ -9,7 +9,4 @@ package-lock.json
 **/.vscode
 podex.db
 public/css/output.css
-public/js/client-side-templates.js
-public/js/htmx.min.js
-public/js/json-enc.js
-public/js/mustache.min.js
+public/js/**
diff --git a/README.md b/README.md
@@ -2,22 +2,22 @@
 
 ### Table of Contents
 
--   [Introduction](#introduction)
--   [Features](#features)
--   [Technical Stack](#technical-stack)
--   [Setup](#setup)
--   [Running the Project](#running-the-project)
--   [Contributing](#contributing)
--   [License](#license)
+- [Introduction](#introduction)
+- [Features](#features)
+- [Technical Stack](#technical-stack)
+- [Setup](#setup)
+- [Running the Project](#running-the-project)
+- [Contributing](#contributing)
+- [License](#license)
 
 ### Introduction
 
 Podex is a framework for building full-stack web applications using PowerShell/Pode for the backend and htmx for the frontend.
 
 ### Technical Stack
 
--   **Backend**: [PowerShell Core](https://github.com/PowerShell/PowerShell), [Pode](https://github.com/Badgerati/Pode), [SQLite](https://www.sqlite.org/index.html)
--   **Frontend**: [htmx](https://htmx.org/), [Mustache](https://mustache.github.io/), [Tailwind CSS](https://tailwindcss.com/)
+- **Backend**: [PowerShell Core](https://github.com/PowerShell/PowerShell), [Pode](https://github.com/Badgerati/Pode), [SQLite](https://www.sqlite.org/index.html)
+- **Frontend**: [htmx](https://htmx.org/), [Mustache](https://mustache.github.io/), [Tailwind CSS](https://tailwindcss.com/)
 
 ### Setup
 

diff --git a/errors/404.html.pode b/errors/404.html.pode
@@ -17,7 +17,7 @@
 	<body class="bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200" hx-boost="true">
 		$(Use-PodePartialView -Path 'partials/header' -Data @{ PageName = '404 Not Found' } ;)
 
-		<main class="container mx-auto max-w-screen-xl p-2 lg:px-3 lg:py-4">
+		<main class="container mx-auto max-w-(--breakpoint-xl) p-2 lg:px-3 lg:py-4">
 			<h1>404 Not Found</h1>
 			<div class="bg-white text-left text-sm text-black">
 				<p>Render Time: $([DateTime]::Now.ToString('yyyy-MM-dd HH:mm:ss') ;)</p>

diff --git a/errors/default.html.pode b/errors/default.html.pode
@@ -17,7 +17,7 @@
 	<body class="bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200" hx-boost="true">
 		$(Use-PodePartialView -Path 'partials/header' -Data @{ PageName = '$($data.status.code ;) Error' } ;)
 
-		<main class="container mx-auto max-w-screen-xl p-2 lg:px-3 lg:py-4">
+		<main class="container mx-auto max-w-(--breakpoint-xl) p-2 lg:px-3 lg:py-4">
 			<h1>$($data.status.code ;) Error</h1>
 			<p>Description: $($data.status.description ;)</p>
 

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -18,7 +18,7 @@ export default [
 				sourceType: 'module',
 			},
 		},
-		ignores: ['public/js/*', 'node_modules/*'],
+		ignores: ['public/js/*', 'node_modules/*', 'logs/*', '.vscode/*'],
 		rules: {},
 	},
 	pluginJs.configs.recommended,

diff --git a/package.json b/package.json
@@ -16,29 +16,30 @@
 	"scripts": {
 		"format": "prettier --write .",
 		"lint": "eslint .",
-		"css": "tailwindcss -c ./tailwind.config.mjs -i ./public/css/tailwind.css -o ./public/css/output.css #--minify",
+		"css": "npx @tailwindcss/cli -i ./public/css/tailwind.css -o ./public/css/output.css",
 		"analyze": "pwsh -NoLogo -NoProfile -ExecutionPolicy Bypass -Command \"Import-Module PSScriptAnalyzer ; Invoke-ScriptAnalyzer -Path ./\"",
 		"test": "pwsh -NoLogo -NoProfile -ExecutionPolicy Bypass -Command \"Import-Module Pester ; Invoke-Pester -Path ./tests/*.ps1\"",
 		"build": "pwsh -NoLogo -NoProfile -ExecutionPolicy Bypass \"./.build.ps1\"",
 		"start": "pwsh -NoLogo -NoProfile -ExecutionPolicy Bypass \"./podex.ps1\""
 	},
 	"dependencies": {
 		"@tailwindcss/aspect-ratio": "^0.4.2",
+		"@tailwindcss/cli": "^4.0.0",
 		"@tailwindcss/forms": "^0.5.9",
 		"@tailwindcss/typography": "^0.5.15",
 		"htmx-ext-client-side-templates": "^2.0.0",
+		"htmx-ext-debug": "^2.0.0",
 		"htmx-ext-json-enc": "^2.0.1",
-		"htmx.org": "^2.0.3",
+		"htmx.org": "^2.0.4",
 		"mustache": "^4.2.0",
-		"tailwindcss": "^3.4.14"
+		"tailwindcss": "^4.0.0"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.12.0",
-		"eslint": "^9.12.0",
-		"globals": "^15.11.0",
-		"htmx-ext-debug": "^2.0.0",
-		"prettier": "^3.3.3",
+		"@eslint/js": "^9.19.0",
+		"eslint": "^9.19.0",
+		"globals": "^15.14.0",
+		"prettier": "^3.4.2",
 		"prettier-plugin-sql": "^0.18.1",
-		"prettier-plugin-tailwindcss": "^0.6.8"
+		"prettier-plugin-tailwindcss": "^0.6.11"
 	}
 }
diff --git a/podex.ps1 b/podex.ps1
@@ -4,17 +4,17 @@ Import-Module -Name 'Pode' -MaximumVersion 2.99.99 -Force
 function Write-FormattedLog {
 	param([string]$tag, [string]$log, [switch]$save)
 	switch ($tag) {
-		'debug'		{ $icon = "🐞" }
-		'database'	{ $icon = "💾" }
-		'api'		{ $icon = "🔗" }
-		'informational' { $icon = "ℹ️" }
-		'verbose'	{ $icon = "🔍" }
-		'warning'	{ $icon = "⚠️" }
-		'error'		{ $icon = "❌" }
-		default		{ $icon = "✅" }
+		'debug' { $icon = '🐞' }
+		'database'	{ $icon = '💾' }
+		'api' { $icon = '🔗' }
+		'informational' { $icon = 'ℹ️' }
+		'verbose'	{ $icon = '🔍' }
+		'warning'	{ $icon = '⚠️' }
+		'error' { $icon = '❌' }
+		default { $icon = '✅' }
 	}
-	$timestamp = Get-Date -Format "yyyyMMddHHmmss"
-	$prefix = "{0} {1} {2} " -f $timestamp, $tag.PadRight(11), $icon
+	$timestamp = Get-Date -Format 'yyyyMMddHHmmss'
+	$prefix = '{0} {1} {2} ' -f $timestamp, $tag.PadRight(11), $icon
 	Write-PodeHost $prefix -NoNewLine
 	$maxLineLength = [int]($Host.UI.RawUI.WindowSize.Width - $prefix.Length - 1)
 	$currentPosition = 0
@@ -44,6 +44,7 @@ function Remove-UnsafeCharacter {
 	return $inputString
 }
 
+# Start-PodeServer -Name 'Podex' -ConfigFile '.\podex.psd1' -Threads 5 -ScriptBlock {
 Start-PodeServer -Name 'Podex' -Threads 5 -ScriptBlock {
 
 	# get config
@@ -78,13 +79,13 @@ Start-PodeServer -Name 'Podex' -Threads 5 -ScriptBlock {
 
 	# file-based api routes (json or html)
 	foreach ($file in (Get-ChildItem -Path './api' -Filter *.ps1 -Recurse -File)) {
-		$method = (Get-Culture).TextInfo.ToTitleCase($file.Name) -replace "\.ps1$", ''
-		$relativePath = $file.FullName -replace [regex]::Escape($PWD.Path + "\"), "" -replace "\\", "/"
-		$apiPath = "/" + ($relativePath -replace "\.ps1$", "")
+		$method = (Get-Culture).TextInfo.ToTitleCase($file.Name) -replace '\.ps1$', ''
+		$relativePath = $file.FullName -replace [regex]::Escape($PWD.Path + '\'), '' -replace '\\', '/'
+		$apiPath = '/' + ($relativePath -replace '\.ps1$', '')
 		if ($method -in @('Get', 'Post', 'Put', 'Delete')) {
-			$apiPath = $apiPath -replace "/$($method)", ""
-		} elseif ($cfg.Podex.Debug -and $relativePath -match "/debug/") {
-			$apiPath = $apiPath -replace "/debug", ""
+			$apiPath = $apiPath -replace "/$($method)", ''
+		} elseif ($cfg.Podex.Debug -and $relativePath -match '/debug/') {
+			$apiPath = $apiPath -replace '/debug', ''
 			$method = 'Get'
 		} else {
 			$method = 'Get'

diff --git a/public/css/tailwind.css b/public/css/tailwind.css
@@ -1,6 +1,38 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+	--color-primary-50: #ecfdf5;
+	--color-primary-100: #d1fae5;
+	--color-primary-200: #a7f3d0;
+	--color-primary-300: #6ee7b7;
+	--color-primary-400: #34d399;
+	--color-primary-500: #10b981;
+	--color-primary-600: #059669;
+	--color-primary-700: #047857;
+	--color-primary-800: #065f46;
+	--color-primary-900: #064e3b;
+	--color-primary-950: #022c22;
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+	*,
+	::after,
+	::before,
+	::backdrop,
+	::file-selector-button {
+		border-color: var(--color-gray-200, currentColor);
+	}
+}
 
 @layer base {
 	:root {