Merge pull request #420 from openscript-ch/204-configurable-theme

feat: make theme color configurable

Author: openscript

.changeset/new-berries-cry.md

@@ -0,0 +1,6 @@
+---
+"@quassel/frontend": minor
+"@quassel/ui": minor
+---
+
+Make frontend themeable

.devcontainer/devcontainer.json

@@ -16,6 +16,12 @@
       ]
     }
   },
+  "forwardPorts": [
+    3000,
+    3001,
+    3002,
+    3003
+  ],
   "features": {
     // "ghcr.io/devcontainers/features/docker-outside-of-docker:1": {}
   }

.gitignore

@@ -140,7 +140,6 @@ web_modules/
 .yarn-integrity
 
 # dotenv environment variable files
-.env
 .env.development.local
 .env.test.local
 .env.production.local

apps/backend/README.md

@@ -1,85 +0,0 @@
-<p align="center">
-  <a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="120" alt="Nest Logo" /></a>
-</p>
-
-[circleci-image]: https://img.shields.io/circleci/build/github/nestjs/nest/master?token=abc123def456
-[circleci-url]: https://circleci.com/gh/nestjs/nest
-
-  <p align="center">A progressive <a href="http://nodejs.org" target="_blank">Node.js</a> framework for building efficient and scalable server-side applications.</p>
-    <p align="center">
-<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/v/@nestjs/core.svg" alt="NPM Version" /></a>
-<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/l/@nestjs/core.svg" alt="Package License" /></a>
-<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/dm/@nestjs/common.svg" alt="NPM Downloads" /></a>
-<a href="https://circleci.com/gh/nestjs/nest" target="_blank"><img src="https://img.shields.io/circleci/build/github/nestjs/nest/master" alt="CircleCI" /></a>
-<a href="https://coveralls.io/github/nestjs/nest?branch=master" target="_blank"><img src="https://coveralls.io/repos/github/nestjs/nest/badge.svg?branch=master#9" alt="Coverage" /></a>
-<a href="https://discord.gg/G7Qnnhy" target="_blank"><img src="https://img.shields.io/badge/discord-online-brightgreen.svg" alt="Discord"/></a>
-<a href="https://opencollective.com/nest#backer" target="_blank"><img src="https://opencollective.com/nest/backers/badge.svg" alt="Backers on Open Collective" /></a>
-<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://opencollective.com/nest/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
-  <a href="https://paypal.me/kamilmysliwiec" target="_blank"><img src="https://img.shields.io/badge/Donate-PayPal-ff3f59.svg" alt="Donate us"/></a>
-    <a href="https://opencollective.com/nest#sponsor"  target="_blank"><img src="https://img.shields.io/badge/Support%20us-Open%20Collective-41B883.svg" alt="Support us"></a>
-  <a href="https://twitter.com/nestframework" target="_blank"><img src="https://img.shields.io/twitter/follow/nestframework.svg?style=social&label=Follow" alt="Follow us on Twitter"></a>
-</p>
-  <!--[![Backers on Open Collective](https://opencollective.com/nest/backers/badge.svg)](https://opencollective.com/nest#backer)
-  [![Sponsors on Open Collective](https://opencollective.com/nest/sponsors/badge.svg)](https://opencollective.com/nest#sponsor)-->
-
-## Description
-
-[Nest](https://github.com/nestjs/nest) framework TypeScript starter repository.
-
-## Project setup
-
-```bash
-$ pnpm install
-```
-
-## Compile and run the project
-
-```bash
-# development
-$ pnpm run start
-
-# watch mode
-$ pnpm run start:dev
-
-# production mode
-$ pnpm run start:prod
-```
-
-## Run tests
-
-```bash
-# unit tests
-$ pnpm run test
-
-# e2e tests
-$ pnpm run test:e2e
-
-# test coverage
-$ pnpm run test:cov
-```
-
-## Resources
-
-Check out a few resources that may come in handy when working with NestJS:
-
-- Visit the [NestJS Documentation](https://docs.nestjs.com) to learn more about the framework.
-- For questions and support, please visit our [Discord channel](https://discord.gg/G7Qnnhy).
-- To dive deeper and get more hands-on experience, check out our official video [courses](https://courses.nestjs.com/).
-- Visualize your application graph and interact with the NestJS application in real-time using [NestJS Devtools](https://devtools.nestjs.com).
-- Need help with your project (part-time to full-time)? Check out our official [enterprise support](https://enterprise.nestjs.com).
-- To stay in the loop and get updates, follow us on [X](https://x.com/nestframework) and [LinkedIn](https://linkedin.com/company/nestjs).
-- Looking for a job, or have a job to offer? Check out our official [Jobs board](https://jobs.nestjs.com).
-
-## Support
-
-Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please [read more here](https://docs.nestjs.com/support).
-
-## Stay in touch
-
-- Author - [Kamil Myśliwiec](https://twitter.com/kammysliwiec)
-- Website - [https://nestjs.com](https://nestjs.com/)
-- Twitter - [@nestframework](https://twitter.com/nestframework)
-
-## License
-
-Nest is [MIT licensed](https://github.com/nestjs/nest/blob/master/LICENSE).

apps/frontend/.docker/entrypoint.sh

@@ -3,6 +3,10 @@ set -xe
 
 : "${API_URL?Define the api endpoint}"
 
-sed -i "s|//REPLACE_WITH_API_URL|$API_URL|g" /usr/share/nginx/html/index.html
+envsubst < /usr/share/nginx/html/index.template.html > /usr/share/nginx/html/index.html
+
+if [ -d /usr/share/nginx/html/icons ]; then
+  cp /usr/share/nginx/html/icons/* /usr/share/nginx/html
+fi
 
 exec "$@"

apps/frontend/.env

@@ -0,0 +1,4 @@
+VITE_API_URL=http://localhost:3000
+VITE_THEME_COLOR=quassel
+VITE_TITLE=Quassel
+VITE_LOGOS='[{"path": "/logos/uzh-logo.svg", "alt": "University of Zurich Logo", "url": "https://uzh.ch"}, {"path": "/logos/weltentdecker-logo.png", "alt": "Kleine Weltentdecker Logo", "url": "https://www.psychologie.uzh.ch/de/bereiche/dev/devpsy/Weltentdecker.html"}]'

apps/frontend/Dockerfile

@@ -1,6 +1,7 @@
 FROM docker.io/nginx:stable-alpine
 
 COPY dist/ /usr/share/nginx/html/
+RUN cp /usr/share/nginx/html/index.html /usr/share/nginx/html/index.template.html
 COPY ./.docker/nginx.conf /etc/nginx/conf.d/default.conf
 COPY ./.docker/entrypoint.sh /
 

apps/frontend/README.md

@@ -1,50 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```

apps/frontend/index.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>LEMON</title>
+  <title>$TITLE</title>
   <style>
     html {
       height: 100%;
@@ -22,7 +22,10 @@
   </style>
   <script type="text/javascript">
     window.env = {
-      apiUrl: '//REPLACE_WITH_API_URL'
+      apiUrl: '$API_URL',
+      themeColor: '$THEME_COLOR',
+      title: '$TITLE',
+      logos: '$LOGOS',
     };
   </script>
 </head>

apps/frontend/manifest.json

@@ -0,0 +1 @@
+{}

apps/frontend/package.json

@@ -13,7 +13,8 @@
     "coverage": "vitest --coverage",
     "dev": "vite --host",
     "preview": "vite preview",
-    "test": "vitest"
+    "test": "vitest",
+    "generate:icons": "pwa-asset-generator ./public/logo.svg ./public --type png --opaque false --favicon --maskable --manifest ./manifest.json --index ./index.html"
   },
   "dependencies": {
     "@fullcalendar/core": "^6.1.15",
@@ -35,6 +36,7 @@
   },
   "devDependencies": {
     "@anolilab/unplugin-favicons": "^1.0.5",
+    "@sinclair/typebox": "^0.34.33",
     "@tanstack/router-devtools": "^1.114.31",
     "@tanstack/router-plugin": "^1.114.31",
     "@testing-library/jest-dom": "^6.6.3",

apps/frontend/public/logo.svg

@@ -1,13 +1,16 @@
 function getEnv(key: keyof Exclude<typeof window.env, undefined>) {
   if (window.env === undefined) return;
-  if (window.env[key]?.startsWith("//")) return;
+  if (window.env[key]?.startsWith("$")) return;
 
   return window.env[key];
 }
 
 export const C = {
   env: {
-    apiUrl: getEnv("apiUrl") || "http://localhost:3000",
+    apiUrl: getEnv("apiUrl") || import.meta.env.VITE_API_URL,
+    themeColor: getEnv("themeColor") || import.meta.env.VITE_THEME_COLOR,
+    title: getEnv("title") || import.meta.env.VITE_TITLE,
+    logos: getEnv("logos") || import.meta.env.VITE_LOGOS,
   },
   ui: {
     maxDropdownHeight: 800,

libs/ui/src/assets/uzh-logo.svg renamed to apps/frontend/public/logos/uzh-logo.svg

@@ -1,10 +1,11 @@
 import React, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "@quassel/ui/style.css";
-import { ThemeProvider } from "@quassel/ui";
+import { ThemeProvider, defaultTheme, mergeThemeOverrides } from "@quassel/ui";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { routeTree } from "./routeTree.gen.ts";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { C } from "./configuration.ts";
 
 const queryClient = new QueryClient();
 const router = createRouter({ routeTree, context: { queryClient }, defaultPreload: "intent", defaultPreloadStaleTime: 0 });
@@ -23,10 +24,13 @@ declare module "@tanstack/react-router" {
   }
 }
 
+const currentTheme = mergeThemeOverrides(defaultTheme, { primaryColor: C.env.themeColor });
+if (import.meta.env.DEV) document.title = C.env.title;
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider>
+      <ThemeProvider theme={currentTheme}>
         <RouterProvider router={router} notFoundMode="root" />
         <TanStackRouterDevtools router={router} position="bottom-right" />
       </ThemeProvider>