From 7be15160d5de683f80cf1fe3f2f0ae408c88769f Mon Sep 17 00:00:00 2001 From: Haelnorr Date: Thu, 22 Jan 2026 16:40:11 +1100 Subject: [PATCH] fixed tailwind hack --- Makefile | 2 - internal/view/layout/global.templ | 24 +---- pkg/embedfs/files/css/input.css | 15 +--- pkg/embedfs/files/css/output.css | 65 ++++++++++---- pkg/embedfs/files/js/theme.js | 2 + scripts/README.md | 32 ------- scripts/generate-css-sources.sh | 140 ------------------------------ 7 files changed, 54 insertions(+), 226 deletions(-) delete mode 100644 scripts/README.md delete mode 100755 scripts/generate-css-sources.sh diff --git a/Makefile b/Makefile index f3f2a8b..07bab50 100644 --- a/Makefile +++ b/Makefile @@ -4,7 +4,6 @@ BINARY_NAME=oslstats build: - ./scripts/generate-css-sources.sh && \ tailwindcss -i ./pkg/embedfs/files/css/input.css -o ./pkg/embedfs/files/css/output.css && \ go mod tidy && \ templ generate && \ @@ -16,7 +15,6 @@ run: ./bin/${BINARY_NAME}${SUFFIX} dev: - ./scripts/generate-css-sources.sh && \ templ generate --watch &\ air &\ tailwindcss -i ./pkg/embedfs/files/css/input.css -o ./pkg/embedfs/files/css/output.css --watch diff --git a/internal/view/layout/global.templ b/internal/view/layout/global.templ index 1750010..198483e 100644 --- a/internal/view/layout/global.templ +++ b/internal/view/layout/global.templ @@ -18,14 +18,11 @@ templ Global(title string) { window.matchMedia('(prefers-color-scheme: dark)').matches)}" > - + { title } - - - @@ -38,19 +35,6 @@ templ Global(title string) { const bodyData = { showError500: false, showError503: false, - showConfirmPasswordModal: false, - handleHtmxBeforeOnLoad(event) { - const requestPath = event.detail.pathInfo.requestPath; - if (requestPath === "/reauthenticate") { - // handle password incorrect on refresh attempt - if (event.detail.xhr.status === 445) { - event.detail.shouldSwap = true; - event.detail.isError = false; - } else if (event.detail.xhr.status === 200) { - this.showConfirmPasswordModal = false; - } - } - }, // handle errors from the server on HTMX requests handleHtmxError(event) { const errorCode = event.detail.errorInfo.error; @@ -65,11 +49,6 @@ templ Global(title string) { this.showError503 = true; setTimeout(() => (this.showError503 = false), 6000); } - - // user is authorized but needs to refresh their login - if (errorCode.includes("Code 444")) { - this.showConfirmPasswordModal = true; - } }, }; @@ -78,7 +57,6 @@ templ Global(title string) { class="bg-base text-text ubuntu-mono-regular overflow-x-hidden" x-data="bodyData" x-on:htmx:error="handleHtmxError($event)" - x-on:htmx:before-on-load="handleHtmxBeforeOnLoad($event)" > @popup.Error500Popup() @popup.Error503Popup() diff --git a/pkg/embedfs/files/css/input.css b/pkg/embedfs/files/css/input.css index 8839df9..a673dd5 100644 --- a/pkg/embedfs/files/css/input.css +++ b/pkg/embedfs/files/css/input.css @@ -1,19 +1,10 @@ +@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"); @import "tailwindcss"; -@source "../../../../internal/view/component/footer/footer.templ"; -@source "../../../../internal/view/component/nav/navbarleft.templ"; -@source "../../../../internal/view/component/nav/navbarright.templ"; -@source "../../../../internal/view/component/nav/navbar.templ"; -@source "../../../../internal/view/component/nav/sidenav.templ"; -@source "../../../../internal/view/component/popup/error500Popup.templ"; -@source "../../../../internal/view/component/popup/error503Popup.templ"; -@source "../../../../internal/view/layout/global.templ"; -@source "../../../../internal/view/page/error.templ"; -@source "../../../../internal/view/page/index.templ"; - [x-cloak] { display: none !important; } + @theme inline { --color-rosewater: var(--rosewater); --color-flamingo: var(--flamingo); @@ -43,6 +34,7 @@ --color-mantle: var(--mantle); --color-crust: var(--crust); } + :root { --rosewater: hsl(11, 59%, 67%); --flamingo: hsl(0, 60%, 67%); @@ -102,6 +94,7 @@ --mantle: hsl(240, 21%, 12%); --crust: hsl(240, 23%, 9%); } + .ubuntu-mono-regular { font-family: "Ubuntu Mono", serif; font-weight: 400; diff --git a/pkg/embedfs/files/css/output.css b/pkg/embedfs/files/css/output.css index c506704..db10ff8 100644 --- a/pkg/embedfs/files/css/output.css +++ b/pkg/embedfs/files/css/output.css @@ -1,4 +1,5 @@ /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */ +@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"); @layer properties; @layer theme, base, components, utilities; @layer theme { @@ -37,6 +38,33 @@ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); + --color-rosewater: var(--rosewater); + --color-flamingo: var(--flamingo); + --color-pink: var(--pink); + --color-mauve: var(--mauve); + --color-red: var(--red); + --color-dark-red: var(--dark-red); + --color-maroon: var(--maroon); + --color-peach: var(--peach); + --color-yellow: var(--yellow); + --color-green: var(--green); + --color-teal: var(--teal); + --color-sky: var(--sky); + --color-sapphire: var(--sapphire); + --color-blue: var(--blue); + --color-lavender: var(--lavender); + --color-text: var(--text); + --color-subtext1: var(--subtext1); + --color-subtext0: var(--subtext0); + --color-overlay2: var(--overlay2); + --color-overlay1: var(--overlay1); + --color-overlay0: var(--overlay0); + --color-surface2: var(--surface2); + --color-surface1: var(--surface1); + --color-surface0: var(--surface0); + --color-base: var(--base); + --color-mantle: var(--mantle); + --color-crust: var(--crust); } } @layer base { @@ -208,6 +236,9 @@ .relative { position: relative; } + .static { + position: static; + } .end-0 { inset-inline-end: calc(var(--spacing) * 0); } @@ -271,6 +302,9 @@ .block { display: block; } + .contents { + display: contents; + } .flex { display: flex; } @@ -289,6 +323,9 @@ .inline-flex { display: inline-flex; } + .table { + display: table; + } .size-5 { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); @@ -420,9 +457,6 @@ .bg-base { background-color: var(--base); } - .bg-blue { - background-color: var(--blue); - } .bg-crust { background-color: var(--crust); } @@ -559,6 +593,10 @@ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .outline { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -575,16 +613,6 @@ } } } - .hover\:bg-blue\/75 { - &:hover { - @media (hover: hover) { - background-color: var(--blue); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--blue) 75%, transparent); - } - } - } - } .hover\:bg-crust { &:hover { @media (hover: hover) { @@ -693,11 +721,6 @@ display: none; } } - .sm\:inline { - @media (width >= 40rem) { - display: inline; - } - } .sm\:justify-between { @media (width >= 40rem) { justify-content: space-between; @@ -999,6 +1022,11 @@ inherits: false; initial-value: 0 0 #0000; } +@property --tw-outline-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} @property --tw-duration { syntax: "*"; inherits: false; @@ -1034,6 +1062,7 @@ --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; + --tw-outline-style: solid; --tw-duration: initial; } } diff --git a/pkg/embedfs/files/js/theme.js b/pkg/embedfs/files/js/theme.js index 291c41f..a2a11c7 100644 --- a/pkg/embedfs/files/js/theme.js +++ b/pkg/embedfs/files/js/theme.js @@ -1,3 +1,5 @@ +// This function prevents the 'flash of unstyled content' +// Include it at the top of (function() { let theme = localStorage.getItem("theme") || "system"; if (theme === "system") { diff --git a/scripts/README.md b/scripts/README.md deleted file mode 100644 index ae6b33d..0000000 --- a/scripts/README.md +++ /dev/null @@ -1,32 +0,0 @@ -# Scripts - -## generate-css-sources.sh - -Automatically generates the `pkg/embedfs/files/css/input.css` file with `@source` directives for all `.templ` files in the project. - -### Why is this needed? - -Tailwind CSS v4 requires explicit `@source` directives to know which files to scan for utility classes. Glob patterns like `**/*.templ` don't work in `@source` directives, so each file must be listed individually. - -This script: -1. Finds all `.templ` files in the `internal/` directory -2. Generates `@source` directives with relative paths from the CSS file location -3. Adds your custom theme and utility classes - -### When does it run? - -The script runs automatically as part of: -- `make build` - Before building the CSS -- `make dev` - Before starting watch mode - -### Manual usage - -If you need to regenerate the sources manually: - -```bash -./scripts/generate-css-sources.sh -``` - -### Adding new template files - -When you add a new `.templ` file, you don't need to do anything special - just run `make build` or `make dev` and the script will automatically pick up the new file. diff --git a/scripts/generate-css-sources.sh b/scripts/generate-css-sources.sh deleted file mode 100755 index 4704473..0000000 --- a/scripts/generate-css-sources.sh +++ /dev/null @@ -1,140 +0,0 @@ -#!/bin/bash - -# Generate @source directives for all .templ files -# Paths are relative to pkg/embedfs/files/css/input.css - -INPUT_CSS="pkg/embedfs/files/css/input.css" - -# Start with the base imports -cat > "$INPUT_CSS" <<'CSSHEAD' -@import "tailwindcss"; - -CSSHEAD - -# Find all .templ files and add @source directives -find internal -name "*.templ" -type f | sort | while read -r file; do - # Convert to relative path from pkg/embedfs/files/css/ - rel_path="../../../../$file" - echo "@source \"$rel_path\";" >> "$INPUT_CSS" -done - -# Add the custom theme and utility classes -cat >> "$INPUT_CSS" <<'CSSBODY' - -[x-cloak] { - display: none !important; -} -@theme inline { - --color-rosewater: var(--rosewater); - --color-flamingo: var(--flamingo); - --color-pink: var(--pink); - --color-mauve: var(--mauve); - --color-red: var(--red); - --color-dark-red: var(--dark-red); - --color-maroon: var(--maroon); - --color-peach: var(--peach); - --color-yellow: var(--yellow); - --color-green: var(--green); - --color-teal: var(--teal); - --color-sky: var(--sky); - --color-sapphire: var(--sapphire); - --color-blue: var(--blue); - --color-lavender: var(--lavender); - --color-text: var(--text); - --color-subtext1: var(--subtext1); - --color-subtext0: var(--subtext0); - --color-overlay2: var(--overlay2); - --color-overlay1: var(--overlay1); - --color-overlay0: var(--overlay0); - --color-surface2: var(--surface2); - --color-surface1: var(--surface1); - --color-surface0: var(--surface0); - --color-base: var(--base); - --color-mantle: var(--mantle); - --color-crust: var(--crust); -} -:root { - --rosewater: hsl(11, 59%, 67%); - --flamingo: hsl(0, 60%, 67%); - --pink: hsl(316, 73%, 69%); - --mauve: hsl(266, 85%, 58%); - --red: hsl(347, 87%, 44%); - --dark-red: hsl(343, 50%, 82%); - --maroon: hsl(355, 76%, 59%); - --peach: hsl(22, 99%, 52%); - --yellow: hsl(35, 77%, 49%); - --green: hsl(109, 58%, 40%); - --teal: hsl(183, 74%, 35%); - --sky: hsl(197, 97%, 46%); - --sapphire: hsl(189, 70%, 42%); - --blue: hsl(220, 91%, 54%); - --lavender: hsl(231, 97%, 72%); - --text: hsl(234, 16%, 35%); - --subtext1: hsl(233, 13%, 41%); - --subtext0: hsl(233, 10%, 47%); - --overlay2: hsl(232, 10%, 53%); - --overlay1: hsl(231, 10%, 59%); - --overlay0: hsl(228, 11%, 65%); - --surface2: hsl(227, 12%, 71%); - --surface1: hsl(225, 14%, 77%); - --surface0: hsl(223, 16%, 83%); - --base: hsl(220, 23%, 95%); - --mantle: hsl(220, 22%, 92%); - --crust: hsl(220, 21%, 89%); -} - -.dark { - --rosewater: hsl(10, 56%, 91%); - --flamingo: hsl(0, 59%, 88%); - --pink: hsl(316, 72%, 86%); - --mauve: hsl(267, 84%, 81%); - --red: hsl(343, 81%, 75%); - --dark-red: hsl(316, 19%, 27%); - --maroon: hsl(350, 65%, 77%); - --peach: hsl(23, 92%, 75%); - --yellow: hsl(41, 86%, 83%); - --green: hsl(115, 54%, 76%); - --teal: hsl(170, 57%, 73%); - --sky: hsl(189, 71%, 73%); - --sapphire: hsl(199, 76%, 69%); - --blue: hsl(217, 92%, 76%); - --lavender: hsl(232, 97%, 85%); - --text: hsl(226, 64%, 88%); - --subtext1: hsl(227, 35%, 80%); - --subtext0: hsl(228, 24%, 72%); - --overlay2: hsl(228, 17%, 64%); - --overlay1: hsl(230, 13%, 55%); - --overlay0: hsl(231, 11%, 47%); - --surface2: hsl(233, 12%, 39%); - --surface1: hsl(234, 13%, 31%); - --surface0: hsl(237, 16%, 23%); - --base: hsl(240, 21%, 15%); - --mantle: hsl(240, 21%, 12%); - --crust: hsl(240, 23%, 9%); -} -.ubuntu-mono-regular { - font-family: "Ubuntu Mono", serif; - font-weight: 400; - font-style: normal; -} - -.ubuntu-mono-bold { - font-family: "Ubuntu Mono", serif; - font-weight: 700; - font-style: normal; -} - -.ubuntu-mono-regular-italic { - font-family: "Ubuntu Mono", serif; - font-weight: 400; - font-style: italic; -} - -.ubuntu-mono-bold-italic { - font-family: "Ubuntu Mono", serif; - font-weight: 700; - font-style: italic; -} -CSSBODY - -echo "Generated $INPUT_CSS with $(grep -c '@source' "$INPUT_CSS") source files"