From aaac328138f820d57b97b1668138f86c89c5f63a Mon Sep 17 00:00:00 2001 From: Dragory <2606411+Dragory@users.noreply.github.com> Date: Sun, 1 Jun 2025 14:43:40 +0000 Subject: [PATCH 1/2] refactor: build dashboard with vite --- .devcontainer/devcontainer.json | 9 +- backend/package.json | 1 - dashboard/.htmlnanorc.js | 3 - dashboard/{src => }/index.html | 2 + dashboard/package.json | 47 +- dashboard/postcss.config.js | 8 + dashboard/public/env.js | 2 + dashboard/{src => public}/img/logo.png | Bin dashboard/{src => public}/img/squint.png | Bin dashboard/serve.js | 15 +- dashboard/src/api.ts | 2 +- dashboard/src/components/Expandable.vue | 2 +- dashboard/src/components/PrivacyPolicy.vue | 2 +- dashboard/src/components/Tab.vue | 4 +- .../dashboard/GuildConfigEditor.vue | 2 +- .../src/components/dashboard/GuildInfo.vue | 2 +- dashboard/src/components/dashboard/Layout.vue | 6 +- .../src/components/docs/ArgumentTypes.vue | 4 +- dashboard/src/components/docs/Counters.vue | 4 +- dashboard/src/components/docs/DocsLayout.vue | 11 +- dashboard/src/components/docs/Permissions.vue | 2 +- dashboard/src/components/docs/Plugin.vue | 5 +- dashboard/src/init-vue.ts | 2 +- dashboard/src/main.ts | 4 +- dashboard/src/splash.html | 2 +- dashboard/src/style/{app.pcss => app.css} | 11 +- dashboard/src/style/{base.pcss => base.css} | 0 .../style/{components.pcss => components.css} | 0 .../src/style/{content.pcss => content.css} | 15 +- dashboard/src/style/{docs.pcss => docs.css} | 2 +- dashboard/src/style/initial.css | 3 + dashboard/src/style/initial.pcss | 3 - ...privacy-policy.pcss => privacy-policy.css} | 0 dashboard/src/style/reset.css | 50 + dashboard/src/style/reset.pcss | 48 - .../src/style/{splash.pcss => splash.css} | 0 dashboard/src/vite-env.d.ts | 6 + dashboard/tailwind.config.js | 28 - dashboard/ts-vue-shim.d.ts | 10 - dashboard/tsconfig.json | 2 +- dashboard/vite.config.ts | 40 + dashboard/webpack.config.js | 196 - docker/development/nginx/default.conf | 5 + package-lock.json | 10387 ++-------------- package.json | 5 +- 45 files changed, 1284 insertions(+), 9668 deletions(-) delete mode 100644 dashboard/.htmlnanorc.js rename dashboard/{src => }/index.html (81%) create mode 100644 dashboard/postcss.config.js create mode 100644 dashboard/public/env.js rename dashboard/{src => public}/img/logo.png (100%) rename dashboard/{src => public}/img/squint.png (100%) rename dashboard/src/style/{app.pcss => app.css} (52%) rename dashboard/src/style/{base.pcss => base.css} (100%) rename dashboard/src/style/{components.pcss => components.css} (100%) rename dashboard/src/style/{content.pcss => content.css} (78%) rename dashboard/src/style/{docs.pcss => docs.css} (77%) create mode 100644 dashboard/src/style/initial.css delete mode 100644 dashboard/src/style/initial.pcss rename dashboard/src/style/{privacy-policy.pcss => privacy-policy.css} (100%) create mode 100644 dashboard/src/style/reset.css delete mode 100644 dashboard/src/style/reset.pcss rename dashboard/src/style/{splash.pcss => splash.css} (100%) create mode 100644 dashboard/src/vite-env.d.ts delete mode 100644 dashboard/tailwind.config.js delete mode 100644 dashboard/ts-vue-shim.d.ts create mode 100644 dashboard/vite.config.ts delete mode 100644 dashboard/webpack.config.js diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 1412d615..37a7eeee 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -5,5 +5,12 @@ "service": "devenv", "remoteUser": "ubuntu", - "workspaceFolder": "/workspace/zeppelin" + "workspaceFolder": "/workspace/zeppelin", + "customizations": { + "vscode": { + "extensions": [ + "Vue.volar" + ] + } + } } diff --git a/backend/package.json b/backend/package.json index 8fb9adbf..0be8c03f 100644 --- a/backend/package.json +++ b/backend/package.json @@ -42,7 +42,6 @@ "cross-env": "^7.0.3", "deep-diff": "^1.0.2", "discord.js": "^14.19.3", - "dotenv": "^4.0.0", "emoji-regex": "^8.0.0", "escape-string-regexp": "^1.0.5", "express": "^4.20.0", diff --git a/dashboard/.htmlnanorc.js b/dashboard/.htmlnanorc.js deleted file mode 100644 index 5dff0968..00000000 --- a/dashboard/.htmlnanorc.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - collapseWhitespace: false, -}; diff --git a/dashboard/src/index.html b/dashboard/index.html similarity index 81% rename from dashboard/src/index.html rename to dashboard/index.html index 7151c5b0..aedadb14 100644 --- a/dashboard/src/index.html +++ b/dashboard/index.html @@ -15,6 +15,8 @@ The Zeppelin website requires JavaScript to load. +
+ diff --git a/dashboard/package.json b/dashboard/package.json index 41fc4926..839ebb0f 100644 --- a/dashboard/package.json +++ b/dashboard/package.json @@ -3,54 +3,37 @@ "version": "1.0.0", "description": "", "private": true, + "type": "module", "scripts": { - "build": "rimraf dist && cross-env NODE_ENV=production webpack --config webpack.config.js", - "build-debug": "rimraf dist && cross-env NODE_ENV=development webpack --config webpack.config.js", - "watch": "cross-env NODE_ENV=development webpack-dev-server" + "dev": "vite", + "build": "vue-tsc -b && vite build", + "preview": "vite preview" }, "devDependencies": { - "@babel/core": "^7.22.5", - "@babel/preset-env": "^7.22.5", - "@babel/preset-typescript": "^7.22.5", - "babel-loader": "^9.1.2", + "@tailwindcss/vite": "^4.1.8", + "@vitejs/plugin-vue": "^5.2.4", + "@vue/tsconfig": "^0.7.0", "cross-env": "^7.0.3", - "css-loader": "^6.8.1", - "cssnano": "^4.1.10", - "dotenv": "^16.4.5", - "file-loader": "^6.2.0", - "html-loader": "^4.2.0", - "html-webpack-plugin": "^5.5.3", - "postcss-import": "^15.1.0", - "postcss-loader": "^7.3.3", - "postcss-nesting": "^11.3.0", - "postcss-preset-env": "^8.5.1", - "source-map-loader": "^4.0.1", - "tailwindcss": "^1.9.6", - "ts-loader": "^9.4.3", - "vue-loader": "^17.4.2", - "vue-style-loader": "^4.1.3", - "vue-template-compiler": "^2.7.14", - "webpack": "^5.94.0", - "webpack-cli": "^5.1.4", - "webpack-dev-server": "^4.15.1", - "webpack-merge": "^5.9.0" - }, - "dependencies": { - "@fastify/static": "^7.0.1", - "fastify": "^4.26.2", "highlight.js": "^11.8.0", "humanize-duration": "^3.27.0", "js-yaml": "^4.1.0", "marked": "^5.1.0", - "modern-css-reset": "^1.4.0", "moment": "^2.29.4", + "postcss-nesting": "^13.0.1", + "tailwindcss": "^4.1.8", + "vite": "npm:rolldown-vite@latest", "vue": "^3.5.13", "vue-material-design-icons": "^5.3.1", "vue-router": "^4.5.0", + "vue-tsc": "^2.2.10", "vue3-ace-editor": "^2.2.4", "vue3-highlightjs": "^1.0.5", "vuex": "^4.1.0" }, + "dependencies": { + "@fastify/static": "^7.0.1", + "fastify": "^4.26.2" + }, "browserslist": [ "last 2 Chrome versions" ] diff --git a/dashboard/postcss.config.js b/dashboard/postcss.config.js new file mode 100644 index 00000000..bc73bf51 --- /dev/null +++ b/dashboard/postcss.config.js @@ -0,0 +1,8 @@ +import nesting from "postcss-nesting"; + +/** @type {import('postcss-load-config').Config} */ +const config = { + plugins: [nesting] +} + +export default config; diff --git a/dashboard/public/env.js b/dashboard/public/env.js new file mode 100644 index 00000000..cf4a9404 --- /dev/null +++ b/dashboard/public/env.js @@ -0,0 +1,2 @@ +// Don't edit this directly, it uses env vars in prod via serve.js +window.API_URL = "/api"; diff --git a/dashboard/src/img/logo.png b/dashboard/public/img/logo.png similarity index 100% rename from dashboard/src/img/logo.png rename to dashboard/public/img/logo.png diff --git a/dashboard/src/img/squint.png b/dashboard/public/img/squint.png similarity index 100% rename from dashboard/src/img/squint.png rename to dashboard/public/img/squint.png diff --git a/dashboard/serve.js b/dashboard/serve.js index f63fc3ab..2b94dde5 100644 --- a/dashboard/serve.js +++ b/dashboard/serve.js @@ -1,6 +1,13 @@ -const fastify = require("fastify")({ logger: true }); -const fastifyStatic = require("@fastify/static"); -const path = require("path"); +import Fastify from "fastify"; +import fastifyStatic from "@fastify/static"; +import path from "node:path"; + +const fastify = Fastify({ logger: true }); + +fastify.get("/env.js", (req, reply) => { + reply.header("Content-Type", "application/javascript; charset=utf8"); + reply.send(`window.API_URL = ${JSON.stringify(process.env.API_URL)}`); +}); fastify.register(fastifyStatic, { root: path.join(__dirname, "dist"), @@ -8,7 +15,7 @@ fastify.register(fastifyStatic, { }); fastify.get("*", (req, reply) => { - reply.sendFile("index.html"); + reply.header("Content-Type", "text/html; charset=utf8").send(indexContent); }); fastify.listen({ port: 3002, host: '0.0.0.0' }, (err, address) => { diff --git a/dashboard/src/api.ts b/dashboard/src/api.ts index f6cfd5e5..27047bed 100644 --- a/dashboard/src/api.ts +++ b/dashboard/src/api.ts @@ -1,5 +1,5 @@ import { RootStore } from "./store"; -const apiUrl = process.env.API_URL; +const apiUrl = window.API_URL; type QueryParamObject = { [key: string]: string | null }; diff --git a/dashboard/src/components/Expandable.vue b/dashboard/src/components/Expandable.vue index fb699924..88f6995a 100644 --- a/dashboard/src/components/Expandable.vue +++ b/dashboard/src/components/Expandable.vue @@ -20,7 +20,7 @@ diff --git a/dashboard/src/components/dashboard/GuildConfigEditor.vue b/dashboard/src/components/dashboard/GuildConfigEditor.vue index 312da749..f5b097a6 100644 --- a/dashboard/src/components/dashboard/GuildConfigEditor.vue +++ b/dashboard/src/components/dashboard/GuildConfigEditor.vue @@ -25,7 +25,7 @@ lang="yaml" theme="tomorrow_night" ref="aceEditor" - v-options="{ + :options="{ useSoftTabs: true, tabSize: 2 }" diff --git a/dashboard/src/components/dashboard/GuildInfo.vue b/dashboard/src/components/dashboard/GuildInfo.vue index 28694aec..14158ed9 100644 --- a/dashboard/src/components/dashboard/GuildInfo.vue +++ b/dashboard/src/components/dashboard/GuildInfo.vue @@ -2,7 +2,7 @@

Guild Info

- What are you doing here + What are you doing here

diff --git a/dashboard/src/components/dashboard/Layout.vue b/dashboard/src/components/dashboard/Layout.vue index 9a46852c..a7c433ff 100644 --- a/dashboard/src/components/dashboard/Layout.vue +++ b/dashboard/src/components/dashboard/Layout.vue @@ -4,7 +4,7 @@