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"