refactor: major refactor of client-side public generated code

.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
+# Exclude generated public files, which can be large with bundling
-# built when needed with `npm run build:tailwind`
+src/client/public/generated/
-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

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

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

postcss.config.js

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+module.exports = {
+    plugins: [
+        require("postcss-import"),
+        require("tailwindcss"),
+        require("autoprefixer")
+    ]
+}

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
 

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

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
 }

src/client/src/css/main.css

@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "preline/variants.css";
+
+@config "../../../../tailwind.config.js";

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 { formatTimestamp, verifyChannels } from "../../../src/ts/main";
-import prisma from "../../../../generated/prisma";
+import prisma from "../../../../../generated/prisma";
 
 declare let guildId: string;
 declare let channels: Array<any>;

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

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", () => {

src/client/tsconfig.json

@@ -1,13 +1,13 @@
 {
     "compilerOptions": {
         "target": "ES5",
-        "outDir": "./public/js",
+        "outDir": "./public/generated/js",
-        "rootDir": "./typescript",
+        "rootDir": "./src/ts",
         "sourceMap": false,
         "esModuleInterop": true,
         "noImplicitAny": true
     },
     "include": [
-        "./typescript/**/*"
+        "./src/ts/**/*"
     ]
 }

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>'); %>
+<% block("scripts").append('<script src="/public/generated/js/guild/feeds.js"></script>'); %>

src/client/views/guild/filters.ejs

@@ -183,4 +183,4 @@
     </div>
 </div>
 
-<% block("scripts").append('<script src="/static/bundles/guild/filters.js"></script>'); %>
+<% block("scripts").append('<script src="/public/generated/js/guild/filters.js"></script>'); %>

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>