From 5755ef98bbf026474d0e315d2f8ca3ac948a8607 Mon Sep 17 00:00:00 2001 From: Phillip Beazley Date: Sat, 25 Jan 2025 07:42:47 -0600 Subject: [PATCH 1/4] . --- .build.ps1 | 9 ++++----- .gitignore | 5 +---- .prettierignore | 5 +---- eslint.config.mjs | 2 +- package.json | 4 ++-- 5 files changed, 9 insertions(+), 16 deletions(-) diff --git a/.build.ps1 b/.build.ps1 index df0148d..6247f57 100644 --- 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 '# 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 diff --git a/.gitignore b/.gitignore index 6b98a49..86741ae 100644 --- 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 index 100bf72..f5b7eaf 100644 --- 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/eslint.config.mjs b/eslint.config.mjs index 46e7455..89204a4 100644 --- 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 index ba5d599..cd4582b 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "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\"", @@ -27,6 +27,7 @@ "@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", "mustache": "^4.2.0", @@ -36,7 +37,6 @@ "@eslint/js": "^9.12.0", "eslint": "^9.12.0", "globals": "^15.11.0", - "htmx-ext-debug": "^2.0.0", "prettier": "^3.3.3", "prettier-plugin-sql": "^0.18.1", "prettier-plugin-tailwindcss": "^0.6.8" From de545fb9c22eaa92da78891c1912a04f661f194d Mon Sep 17 00:00:00 2001 From: Phillip Beazley Date: Sat, 25 Jan 2025 08:18:30 -0600 Subject: [PATCH 2/4] upg to tw4 --- .build.ps1 | 6 ++--- errors/404.html.pode | 2 +- errors/default.html.pode | 2 +- package.json | 4 ++-- public/css/tailwind.css | 38 ++++++++++++++++++++++++++++--- tailwind.config.mjs | 27 ---------------------- views/components/about.pode | 2 +- views/components/crudmgr-new.pode | 6 ++--- views/components/crudmgr.pode | 14 ++++++------ views/layouts/main.pode | 4 ++-- views/partials/footer.pode | 2 +- views/partials/header.pode | 6 ++--- 12 files changed, 59 insertions(+), 54 deletions(-) delete mode 100644 tailwind.config.mjs diff --git a/.build.ps1 b/.build.ps1 index 6247f57..ce77b14 100644 --- a/.build.ps1 +++ b/.build.ps1 @@ -7,7 +7,7 @@ Install-Module -Name Pester -MinimumVersion 5.6.1 -MaximumVersion 5.99.99 -Verbo 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 tailwindcss +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 @eslint/js prettier prettier-plugin-tailwindcss prettier-plugin-sql @@ -33,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/errors/404.html.pode b/errors/404.html.pode index 540f971..38dd97b 100644 --- a/errors/404.html.pode +++ b/errors/404.html.pode @@ -17,7 +17,7 @@ $(Use-PodePartialView -Path 'partials/header' -Data @{ PageName = '404 Not Found' } ;) -
+

404 Not Found

Render Time: $([DateTime]::Now.ToString('yyyy-MM-dd HH:mm:ss') ;)

diff --git a/errors/default.html.pode b/errors/default.html.pode index bf0a36a..e115ec7 100644 --- a/errors/default.html.pode +++ b/errors/default.html.pode @@ -17,7 +17,7 @@ $(Use-PodePartialView -Path 'partials/header' -Data @{ PageName = '$($data.status.code ;) Error' } ;) -
+

$($data.status.code ;) Error

Description: $($data.status.description ;)

diff --git a/package.json b/package.json index cd4582b..3ef88d4 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "htmx-ext-json-enc": "^2.0.1", "htmx.org": "^2.0.3", "mustache": "^4.2.0", - "tailwindcss": "^3.4.14" + "tailwindcss": "^4.0.0" }, "devDependencies": { "@eslint/js": "^9.12.0", @@ -39,6 +39,6 @@ "globals": "^15.11.0", "prettier": "^3.3.3", "prettier-plugin-sql": "^0.18.1", - "prettier-plugin-tailwindcss": "^0.6.8" + "prettier-plugin-tailwindcss": "^0.6.11" } } diff --git a/public/css/tailwind.css b/public/css/tailwind.css index 083db0b..473906c 100644 --- 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 { diff --git a/tailwind.config.mjs b/tailwind.config.mjs deleted file mode 100644 index df662c6..0000000 --- a/tailwind.config.mjs +++ /dev/null @@ -1,27 +0,0 @@ -/** @type {import('tailwindcss').Config} */ - -export default { - darkMode: 'class', - content: ['./views/**/*.*', './errors/**/*.*'], - theme: { - extend: { - colors: { - // tailwind emerald - primary: { - 50: '#ecfdf5', - 100: '#d1fae5', - 200: '#a7f3d0', - 300: '#6ee7b7', - 400: '#34d399', - 500: '#10b981', - 600: '#059669', - 700: '#047857', - 800: '#065f46', - 900: '#064e3b', - 950: '#022c22', - }, - }, - }, - }, - plugins: [], -}; diff --git a/views/components/about.pode b/views/components/about.pode index 8ab453d..d7640cd 100644 --- a/views/components/about.pode +++ b/views/components/about.pode @@ -2,7 +2,7 @@

Podex - PowerShell/Pode + htmx Framework for Building Web Applications

-
+

Podex - PowerShell/Pode + htmx Framework for Building Web Applications

Table of Contents

diff --git a/views/components/crudmgr-new.pode b/views/components/crudmgr-new.pode index 096b184..84395af 100644 --- a/views/components/crudmgr-new.pode +++ b/views/components/crudmgr-new.pode @@ -1,4 +1,4 @@ -
+

Add New Item

diff --git a/views/components/crudmgr.pode b/views/components/crudmgr.pode index 95e371b..c091d97 100644 --- a/views/components/crudmgr.pode +++ b/views/components/crudmgr.pode @@ -3,7 +3,7 @@

Item Management

-
+
-
+
- diff --git a/views/components/crudmgr.pode b/views/components/crudmgr.pode index c091d97..b278a20 100644 --- a/views/components/crudmgr.pode +++ b/views/components/crudmgr.pode @@ -1,12 +1,12 @@ -
-
+
+

Item Management

-