From 39e67c10884e7ad4bee447b4e6ccd977c8961e10 Mon Sep 17 00:00:00 2001
From: Corban-Lee <corbz.jones@gmail.com>
Date: Tue, 29 Apr 2025 17:09:23 +0100
Subject: [PATCH] refactor: major refactor of client-side public generated code

---
 .gitignore                                    | 11 ++-----
 esbuild.mjs                                   |  6 ++--
 package.json                                  |  6 +++-
 postcss.config.js                             |  8 +++++
 scripts/build.sh                              |  1 +
 src/app.ts                                    |  2 +-
 src/client/public/css/main.css                | 32 ++++++++++++++++++-
 src/client/src/css/main.css                   |  4 +++
 .../{typescript => src/ts}/guild/feeds.ts     |  4 +--
 .../{typescript => src/ts}/guild/filters.ts   |  2 +-
 src/client/{typescript => src/ts}/main.ts     |  2 +-
 src/client/tsconfig.json                      |  6 ++--
 src/client/views/guild/feeds.ejs              | 27 ++++++++++++++--
 src/client/views/guild/filters.ejs            |  2 +-
 src/client/views/layout/base.ejs              |  4 +--
 15 files changed, 90 insertions(+), 27 deletions(-)
 create mode 100644 postcss.config.js
 create mode 100644 src/client/src/css/main.css
 rename src/client/{typescript => src/ts}/guild/feeds.ts (98%)
 rename src/client/{typescript => src/ts}/guild/filters.ts (99%)
 rename src/client/{typescript => src/ts}/main.ts (96%)

diff --git a/.gitignore b/.gitignore
index 4e25b2f..8886101 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,14 +4,9 @@ generated/prisma
 package-lock.json
 .env
 
-#prisma local database
+# Prisma local database
 *.db
 *.db-journal
 
-# exclude this very large css file, it can be
-# built when needed with `npm run build:tailwind`
-src/client/public/css/tailwind.css
-
-# Contains bundled js files built from typescript
-# they can be very large, build with `npm run build:client`
-src/client/public/bundles
\ No newline at end of file
+# Exclude generated public files, which can be large with bundling
+src/client/public/generated/
\ No newline at end of file
diff --git a/esbuild.mjs b/esbuild.mjs
index e06536d..60655b1 100644
--- a/esbuild.mjs
+++ b/esbuild.mjs
@@ -1,14 +1,14 @@
 // This file is for building client-side typescript found
-// in './src/client/typescript' to './src/client/public/bundles'
+// in './src/client/typescript' to './src/client/public/generated/js'
 
 import { build } from "esbuild";
 import glob from "fast-glob";
 
-const entryPoints = await glob("./src/client/typescript/**/*");
+const entryPoints = await glob("./src/client/src/ts/**/*");
 
 build({
     entryPoints,
-    outdir: "./src/client/public/bundles",
+    outdir: "./src/client/public/generated/js",
     bundle: true,
     target: ["es6"],
     format: "iife",
diff --git a/package.json b/package.json
index a9fa214..dac8d62 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "build": "sh ./scripts/build.sh",
     "build:client": "node esbuild.mjs",
     "build:server": "npx tsc -p ./tsconfig.json && npx tsc-alias -p ./tsconfig.json",
-    "build:tailwind": "npx @tailwindcss/cli -i ./src/client/public/css/main.css -o ./src/client/public/css/tailwind.css",
+    "build:tailwind": "npx @tailwindcss/cli -i ./src/client/public/css/main.css -o ./src/client/public/generated/css/tailwind.css",
+    "build:css": "npx postcss --use autoprefixer ./src/client/public/src/css --dir ./src/client/public/generated/css",
     "db:migrate": "npx prisma migrate dev --name",
     "db:seed": "npx prisma db seed",
     "db:gen": "npx prisma generate",
@@ -29,9 +30,12 @@
     "@types/jquery": "^3.5.32",
     "@types/node": "^22.14.1",
     "@zerollup/ts-transform-paths": "^1.7.18",
+    "autoprefixer": "^10.4.21",
     "esbuild": "^0.25.2",
     "fast-glob": "^3.3.3",
     "nodemon": "^3.1.9",
+    "postcss": "^8.5.3",
+    "postcss-import": "^16.1.0",
     "prisma": "^6.6.0",
     "standard-version": "^9.5.0",
     "tailwindcss": "^4.1.4",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..80daf55
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+module.exports = {
+    plugins: [
+        require("postcss-import"),
+        require("tailwindcss"),
+        require("autoprefixer")
+    ]
+}
\ No newline at end of file
diff --git a/scripts/build.sh b/scripts/build.sh
index 7297289..15063d8 100644
--- a/scripts/build.sh
+++ b/scripts/build.sh
@@ -7,6 +7,7 @@ echo "Compiling backend..."
 npm run build:server
 
 echo "Compiling frontend..."
+npm run build:css
 npm run build:tailwind
 npm run build:client
 
diff --git a/src/app.ts b/src/app.ts
index 7fa50d4..263c9c9 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -19,7 +19,7 @@ app.set("views", path.resolve(__dirname, "client/views"));
 app.use(express.urlencoded({ extended: true }));
 app.use(express.json());
 
-app.use("/static", express.static(path.resolve(__dirname, "client/public")));
+app.use("/public", express.static(path.resolve(__dirname, "client/public")));
 
 app.use("/guild", attachGuilds, guildTabHelper, guildRouter);
 app.use("/", attachGuilds, homeRouter);
diff --git a/src/client/public/css/main.css b/src/client/public/css/main.css
index 3f74383..214dc50 100644
--- a/src/client/public/css/main.css
+++ b/src/client/public/css/main.css
@@ -26,7 +26,7 @@
     font-style: normal;
     font-weight: 200, 700;
     font-display: swap;
-    src: url("/static/fonts/inter-variablefont.ttf");
+    src: url("/public/fonts/inter-variablefont.ttf");
 }
 
 /* Datatables */
@@ -145,4 +145,34 @@
         dark:hover:bg-neutral-700
         dark:focus:bg-neutral-700
         dark:text-neutral-200;
+}
+
+/* Form Controls */
+
+.text-input-label {
+    @apply block text-sm font-medium mb-2 dark:text-white
+}
+
+.text-input {
+    @apply
+        py-3
+        px-4
+        block
+        w-full
+        rounded-lg
+        text-sm
+        disabled:opacity-50
+        disabled:pointer-events-none
+        border-gray-200
+        focus:border-blue-500
+        focus:ring-blue-500
+        dark:bg-neutral-900
+        dark:border-neutral-700
+        dark:text-neutral-400
+        dark:placeholder-neutral-500
+        dark:focus:ring-neutral-600        
+}
+
+.text-input-help {
+    @apply mt-2 text-sm text-gray-500 dark:text-neutral-500
 }
\ No newline at end of file
diff --git a/src/client/src/css/main.css b/src/client/src/css/main.css
new file mode 100644
index 0000000..bc98c0c
--- /dev/null
+++ b/src/client/src/css/main.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "preline/variants.css";
+
+@config "../../../../tailwind.config.js";
\ No newline at end of file
diff --git a/src/client/typescript/guild/feeds.ts b/src/client/src/ts/guild/feeds.ts
similarity index 98%
rename from src/client/typescript/guild/feeds.ts
rename to src/client/src/ts/guild/feeds.ts
index d308044..ac0709f 100644
--- a/src/client/typescript/guild/feeds.ts
+++ b/src/client/src/ts/guild/feeds.ts
@@ -6,8 +6,8 @@ import HSSelect, { ISelectOptions } from "@preline/select";
 import HSDataTable, { IDataTableOptions } from "@preline/datatable";
 import { ConfigColumnDefs, AjaxSettings } from "datatables.net-dt";
 import { autoUpdate, computePosition, offset } from "@floating-ui/dom";
-import { formatTimestamp, verifyChannels } from "../main";
-import prisma from "../../../../generated/prisma";
+import { formatTimestamp, verifyChannels } from "../../../src/ts/main";
+import prisma from "../../../../../generated/prisma";
 
 declare let guildId: string;
 declare let channels: Array<any>;
diff --git a/src/client/typescript/guild/filters.ts b/src/client/src/ts/guild/filters.ts
similarity index 99%
rename from src/client/typescript/guild/filters.ts
rename to src/client/src/ts/guild/filters.ts
index 91c82a4..e3c346e 100644
--- a/src/client/typescript/guild/filters.ts
+++ b/src/client/src/ts/guild/filters.ts
@@ -4,7 +4,7 @@ import HSDataTable, { IDataTableOptions } from "@preline/datatable";
 import DataTable from "datatables.net";
 import { ConfigColumnDefs, AjaxSettings } from "datatables.net-dt";
 import { autoUpdate, computePosition, offset } from "@floating-ui/dom";
-import { formatTimestamp } from "../main";
+import { formatTimestamp } from "../../../src/ts/main";
 
 // #region DataTable
 //
diff --git a/src/client/typescript/main.ts b/src/client/src/ts/main.ts
similarity index 96%
rename from src/client/typescript/main.ts
rename to src/client/src/ts/main.ts
index 33ed312..d31a48b 100644
--- a/src/client/typescript/main.ts
+++ b/src/client/src/ts/main.ts
@@ -1,5 +1,5 @@
 import { Channel } from "discord.js";
-import prisma from "../../../generated/prisma";
+import prisma from "../../../../generated/prisma";
 
 // Preline: necessary for header events.
 window.addEventListener("load", () => {
diff --git a/src/client/tsconfig.json b/src/client/tsconfig.json
index dd32d56..a9652bb 100644
--- a/src/client/tsconfig.json
+++ b/src/client/tsconfig.json
@@ -1,13 +1,13 @@
 {
     "compilerOptions": {
         "target": "ES5",
-        "outDir": "./public/js",
-        "rootDir": "./typescript",
+        "outDir": "./public/generated/js",
+        "rootDir": "./src/ts",
         "sourceMap": false,
         "esModuleInterop": true,
         "noImplicitAny": true
     },
     "include": [
-        "./typescript/**/*"
+        "./src/ts/**/*"
     ]
 }
\ No newline at end of file
diff --git a/src/client/views/guild/feeds.ejs b/src/client/views/guild/feeds.ejs
index 3b98d05..41c0e81 100644
--- a/src/client/views/guild/feeds.ejs
+++ b/src/client/views/guild/feeds.ejs
@@ -137,7 +137,7 @@
     </div>
 </div>
 
-<div id="editModal" class="hs-overlay hidden size-full fixed top-0 start-0 z-80 overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-scale-animation-modal-label">
+<div id="editModal" class="hs-overlay hidden size-full fixed top-0 start-0 z-80 overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
     <div class="hs-overlay-animation-target hs-overlay-open:scale-100 hs-overlay-open:opacity-100 scale-95 opacity-0 ease-in-out transition-all duration-200 lg:max-w-4xl lg:w-full m-3 lg:mx-auto min-h-[calc(100%-3.5rem)] flex items-center">
         <div class="w-full p-4 sm:p-7 flex flex-col bg-white border shadow-xs rounded-lg pointer-events-auto dark:bg-neutral-900 dark:border-neutral-800 dark:shadow-neutral-700/70">
             <div class="mb-8">
@@ -147,7 +147,28 @@
                 </p>
             </div>
             <form id="editForm" novalidate class="group grid sm:grid-cols-2 gap-y-4 sm:gap-y-6 md:gap-y-8 gap-x-6 sm:gap-x-8 md:gap-x-10">
-                placeholder form content
+
+                <div>
+                    <label for="formName" class="text-input-label">Name</label>
+                    <input type="text" id="formName" name="name" class="form-input text-input peer invalid:group-[.submitted]:border-red-500 invalid:group-[.submitted]:ring-red-500" required>
+                    <p class="text-input-help block peer-invalid:group-[.submitted]:hidden">
+                        Human-readable name for this entry.
+                    </p>
+                    <p class="mt-2 text-sm text-red-500 hidden peer-invalid:group-[.submitted]:block">
+                        Please enter a name.
+                    </p>
+                </div>
+                <div>
+                    <label for="formUrl" class="text-input-label">URL</label>
+                    <input type="url" id="formUrl" name="url" class="form-input text-input peer invalid:group-[.submitted]:border-red-500 invalid:group-[.submitted]:ring-red-500" required>
+                    <p class="text-input-help block peer-invalid:group-[.submitted]:hidden">
+                        Source of RSS content.
+                    </p>
+                    <p class="mt-2 text-sm text-red-500 hidden peer-invalid:group-[.submitted]:block">
+                        Please enter a valid URL.
+                    </p>
+                </div>
+
             </form>
             <div class="flex items-center gap-x-2 mt-8">
                 <button type="button" class="me-auto py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
@@ -173,4 +194,4 @@
             .map(channel => channel.toJSON())
     ) %>`);
 </script>
-<% block("scripts").append('<script src="/static/bundles/guild/feeds.js"></script>'); %>
\ No newline at end of file
+<% block("scripts").append('<script src="/public/generated/js/guild/feeds.js"></script>'); %>
\ No newline at end of file
diff --git a/src/client/views/guild/filters.ejs b/src/client/views/guild/filters.ejs
index f392a7e..0cda4bf 100644
--- a/src/client/views/guild/filters.ejs
+++ b/src/client/views/guild/filters.ejs
@@ -183,4 +183,4 @@
     </div>
 </div>
 
-<% block("scripts").append('<script src="/static/bundles/guild/filters.js"></script>'); %>
\ No newline at end of file
+<% block("scripts").append('<script src="/public/generated/js/guild/filters.js"></script>'); %>
\ No newline at end of file
diff --git a/src/client/views/layout/base.ejs b/src/client/views/layout/base.ejs
index ad2db0e..d3c3d7c 100644
--- a/src/client/views/layout/base.ejs
+++ b/src/client/views/layout/base.ejs
@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title><%= title %></title>
-        <link rel="stylesheet" href="/static/css/tailwind.css">
+        <link rel="stylesheet" href="/public/generated/css/tailwind.css">
     </head>
     <body class="bg-neutral-100 dark:bg-neutral-900 text-gray-600 dark:text-gray-400 min-h-screen font-[Inter]">
         <%- include("sidebar") -%>
@@ -13,7 +13,7 @@
             <%- body -%>
         </div>
 
-        <script src="/static/bundles/main.js"></script>
+        <script src="/public/generated/js/main.js"></script>
         <%- block("scripts").toString() %>
     </body>
 </html>
\ No newline at end of file