h/oslstats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed tailwind hack

Browse Source
This commit is contained in:
Haelnorr
2026-01-22 16:40:11 +11:00
parent e0ec6d06d3
commit 414a417d63
7 changed files with 54 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@@ -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

24
internal/view/layout/global.templ
View File

@@ -18,14 +18,11 @@ templ Global(title string) {
window.matchMedia('(prefers-color-scheme: dark)').matches)}"
>
<head>
<!-- <script src="/static/js/theme.js"></script> -->
<script src="/static/js/theme.js"></script>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>{ title }</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"/>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"/>
<link href="/static/css/output.css" rel="stylesheet"/>
<script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
@@ -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;
}
},
};
</script>
@@ -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()

15
pkg/embedfs/files/css/input.css
View File

@@ -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;

65
pkg/embedfs/files/css/output.css
View File

@@ -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;
}
}

2
pkg/embedfs/files/js/theme.js
View File

@@ -1,3 +1,5 @@
// This function prevents the 'flash of unstyled content'
// Include it at the top of <head>
(function() {
let theme = localStorage.getItem("theme") || "system";
if (theme === "system") {

32
scripts/README.md
View File

@@ -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.

140
scripts/generate-css-sources.sh
View File

@@ -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"