corbz/relay
1
0
Fork 0
Code Issues 2 Pull Requests Actions Releases Activity

refactor: major refactor of client-side public generated code

Browse Source
This commit is contained in:
Corban-Lee Jones 2025-04-29 17:09:23 +01:00
parent db5178fef0
commit 39e67c1088
15 changed files with 90 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.gitignore vendored
View File

@ -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
# Exclude generated public files, which can be large with bundling
src/client/public/generated/

6
esbuild.mjs
View File

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

6
package.json
View File

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

8
postcss.config.js Normal file
View File

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

1
scripts/build.sh
View File

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

2
src/app.ts
View File

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

32
src/client/public/css/main.css
View File

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

4
src/client/src/css/main.css Normal file
View File

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

4
src/client/typescript/guild/feeds.ts → src/client/src/ts/guild/feeds.ts
View File

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

2
src/client/typescript/guild/filters.ts → src/client/src/ts/guild/filters.ts
View File

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

2
src/client/typescript/main.ts → src/client/src/ts/main.ts
View File

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

6
src/client/tsconfig.json
View File

@ -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/**/*"
]
}

27
src/client/views/guild/feeds.ejs
View File

@ -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>'); %>

2
src/client/views/guild/filters.ejs
View File

@ -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>'); %>

4
src/client/views/layout/base.ejs
View File

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