refactor(web): unocss via vite plugin

Author: ItsNotGoodName

Makefile

@@ -9,12 +9,9 @@ snapshot:
 dev:
 	air
 
-dev-vite:
+dev-web:
 	cd web && pnpm run dev
 
-dev-uno:
-	cd web && pnpm run dev-uno
-
 clean:
 	rm -rf smtpbridge_data
 

README.md

@@ -88,6 +88,9 @@ smtp:
   disable: false # (false, true)
   host: ""
   port: 1025
+  auth:
+    username: username
+    password: password
 
 # Endpoints for envelopes
 endpoints:

web/package.json

@@ -5,13 +5,11 @@
   "type": "module",
   "scripts": {
     "dev": "vite dev",
-    "dev-uno": "unocss --watch",
-    "build": "tsc && unocss && vite build"
+    "build": "tsc && vite build"
   },
   "devDependencies": {
     "@iconify-json/ri": "^1.1.10",
     "@rollup/plugin-inject": "^5.0.3",
-    "@unocss/cli": "^0.53.6",
     "@unocss/preset-icons": "^0.53.6",
     "typescript": "^5.1.6",
     "unocss": "^0.53.6",

web/pnpm-lock.yaml

@@ -1,5 +1,5 @@
 import "htmx.org"
 import "htmx.org/dist/ext/loading-states.js"
 import "@picocss/pico";
-import "./uno.css"
 import "./pico.css"
+import 'uno.css'

web/src/main.ts

@@ -66,7 +66,7 @@ <h2><a href="#endpoints">Endpoints</a></h2>
     <form method="post" action="/send" hx-post="/send">
       <input type="hidden" id="envelope" name="envelope" value="{{.Envelope.Message.ID}}">
       <label for="endpoint">
-        Endpoints
+        Endpoint
         <select id="endpoint" name="endpoint">
           {{range $val := .Endpoints}}
           <option value="{{$val.ID}}">{{$val.Name}}</option>

web/src/uno.css

@@ -40,22 +40,23 @@ <h2>Showing {{len .AggregateRules}} rules.</h2>
           </label>
         </div>
 
-        <h4>Endpoints</h4>
-
-        <div class="flex flex-col gap-4">
-          {{range $end := $val.Endpoints}}
-          <div class="flex justify-between gap-2">
-            <div class="text-ellipsis truncate">
-              <a href="/endpoints#endpoint-{{$end.ID}}">
-                {{$end.Name}}
-              </a>
+        <fieldset>
+          <legend>Endpoints</legend>
+          <div class="flex flex-col gap-2">
+            {{range $end := $val.Endpoints}}
+            <div class="flex justify-between gap-2">
+              <div class="text-ellipsis truncate">
+                <a href="/endpoints#endpoint-{{$end.ID}}">
+                  {{$end.Name}}
+                </a>
+              </div>
+              <div>
+                <input {{if $val.Rule.Internal}}disabled{{end}} {{if $end.Enable}}checked{{end}} type="checkbox"
+                  role="switch" />
+              </div>
             </div>
-            <div>
-              <input {{if $val.Rule.Internal}}disabled{{end}} {{if $end.Enable}}checked{{end}} type="checkbox"
-                role="switch" />
-            </div>
-          </div>
-          {{end}}
+            {{end}}
+        </fieldset>
         </div>
       </article>
     </details>

web/uno.config.ts

@@ -1,6 +1,9 @@
 import { defineConfig } from "vite"
 import FullReload from 'vite-plugin-full-reload'
 import inject from '@rollup/plugin-inject'
+import UnoCSS from 'unocss/vite'
+import { presetUno } from 'unocss'
+import presetIcons from '@unocss/preset-icons'
 
 export default defineConfig({
   plugins: [
@@ -9,13 +12,41 @@ export default defineConfig({
       htmx: 'htmx.org',
       htmx_loading_states: "htmx.org/dist/ext/loading-states.js"
     }),
+    UnoCSS({
+      content: {
+        filesystem: ["views/**/*"]
+      },
+      rules: [
+        [/^bg-(.*)$/, ([, c], { theme }) => {
+          //@ts-ignore
+          if (theme.colors[c]) {
+            return {
+              //@ts-ignore
+              color: theme.colors[c],
+            }
+          }
+        }],
+      ],
+      theme: {
+        colors: {
+          'pico': {
+            'card': 'var(--card-background-color)',
+            'background': 'var(--background-color)',
+          }
+        },
+      },
+      presets: [
+        presetUno(),
+        presetIcons(),
+      ],
+    }),
   ],
   build: {
     // generate manifest.json in outDir
     manifest: true,
     rollupOptions: {
       // overwrite default .html entry
-      // also change in ./views/layouts/index.html
+      // DEPS: ./views/layouts/index.html
       input: 'src/main.ts',
     },
   },