Merge remote-tracking branch 'origin/develop' into update-dependencies

client/src/App.vue

@@ -5,7 +5,7 @@
   >
     {{ appData.runMode }}
   </div>
-  <div :class="cssTheme">
+  <div>
     <div class="content">
       <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
         <div class="container">
@@ -133,6 +133,17 @@ const appData: AppSettingsDto = (JSON.parse(document.getElementById("app-data")?
   runMode: "production",
 };
 
+console.log(
+  `%c  ███████
+  █ ███ █
+  ██ █ ██  fuBlog
+  ███████
+  ██ █ ██  ${(appData.isProduction ? appData.appVersion ?? "‹unknown›" : "development version") + "   "}
+  █ ███ █
+  ███████`,
+  `color:#ff9c00;background:rgb(48, 48, 48);display:inline-block`,
+);
+
 const setOperator = (operator: string) => {
   router.replace({ query: { ...route.query, operator: operator } });
 };

client/src/assets/scss/_variables.scss

@@ -21,4 +21,7 @@ $autocomplete-panel-border-color: #333;
 
 $autocomplete-item-color: #333;
 $autocomplete-item-color-hover: #FFF;
-$autocomplete-item-background-color-hover: #abacad;
+$autocomplete-item-background-color-hover: #abacad;
+
+$body-color: #000;
+$body-color-dark: #fff;

client/src/assets/scss/custom.scss

@@ -2,18 +2,54 @@
 
 // @import "./themes/default.scss";
 @import "./themes/fumix.scss";
+@import "./../../../../node_modules/bootstrap/scss/bootstrap.scss";
 
-$theme-map: null;
-@import "./themes/light-dark-mode.scss";
+$color-mode-type: data;
+@include color-mode(dark) {
+    --bs-body-bg: $body-bg-dark;
+    --bs-text-color: $body-color-light;
 
+    .jumbotron {
+        filter: invert(100%);
+    }
 
-@import "./../../../../node_modules/bootstrap/scss/bootstrap.scss";
+    @import "./../../../../node_modules/highlight.js/scss/gradient-dark.scss";
+}
 
+@include color-mode(light) {
+    --bs-body-bg: $body-bg-light;
+    --bs-text-color: $body-color-dark;
+
+    .card {
+        background-color: $card-bg-light;
+        .card-body {
+            svg {
+                g > * :not(text) {
+                    stroke: $body-color-light !important;
+                }
+            }
+        }
+    }
+    .modal-content {
+        background-color: $modal-content-bg-light;
+        border-color: $modal-content-border-color-light;
+    }
+    .modal-header,
+    .modal-footer {
+        border-color: $modal-header-border-color-light;
+    }
+    table {
+        &.table-bordered {
+            border-color: $table-border-color-light !important;
+        }
+        th,
+        td {
+            color: $body-color-light;
+        }
+    }
+    .jumbotron {
+        filter: invert(0);
+    }
 
-.lightTheme{
     @import "./../../../../node_modules/highlight.js/scss/gradient-light.scss";
 }
-
-.darkTheme{
-    @import "./../../../../node_modules/highlight.js/scss/gradient-dark.scss";
-}

client/src/assets/scss/style.scss

@@ -8,6 +8,12 @@
   }
 }
 
+.content, 
+.card,
+.jumbotron {
+  transition: .75s ease-out all;
+}
+
 .loader {
   position: fixed;
   z-index: 1031;
@@ -77,6 +83,10 @@ pre {
     outline: 0;
     box-shadow: none !important;
   }
+
+  &::placeholder {
+    color: #888;
+  }
 }
 
 .form-floating {

client/src/components/DisplayTags.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="badge-container">
-    <div v-for="tag in tags" :key="tag.id" class="badge me-1" @click="searchWord(tag.name)">
+    <div
+      v-for="tag in [...tags].sort((a, b) => a.name.localeCompare(b.name))"
+      :key="tag.id"
+      class="badge me-1"
+      @click="searchWord(tag.name)"
+    >
       {{ tag.name }}
     </div>
   </div>

client/src/components/LightDarkToggler.vue

@@ -4,7 +4,7 @@
     <label for="checkbox" class="modeswitch-label">
       <span class="emoji">🌙</span>
       <span class="emoji">☀️</span>
-      <div class="modeswitch-toggle" :class="{ 'modeswitch-toggle-checked': userTheme === 'darkTheme' }"></div>
+      <div class="modeswitch-toggle" :class="{ 'modeswitch-toggle-checked': userTheme === 'dark' }"></div>
     </label>
   </div>
 </template>
@@ -93,25 +93,22 @@ const emit = defineEmits(["themeChanged"]);
 const setTheme = (theme: UserTheme) => {
   saveCssPreference(theme);
   userTheme.value = theme;
+  document.documentElement.dataset.bsTheme = theme;
   emit("themeChanged", userTheme.value);
 };
 
 const toggleTheme = (): void => {
   const activeTheme = localStorage.getItem("cssTheme");
-  if (activeTheme === "lightTheme") {
-    setTheme("darkTheme");
+  if (activeTheme === "light") {
+    setTheme("dark");
   } else {
-    setTheme("lightTheme");
+    setTheme("light");
   }
 };
 
 const getMediaPreference = (): UserTheme => {
   const hasDarkPreference = window.matchMedia("(prefers-color-scheme: dark)").matches;
-  if (hasDarkPreference) {
-    return "darkTheme";
-  } else {
-    return "lightTheme";
-  }
+  return hasDarkPreference ? "dark" : "light";
 };
 
 const userTheme = ref<UserTheme>(loadCssPreference() || getMediaPreference());

client/src/components/LoginButton.vue

@@ -1,11 +1,11 @@
 <template>
-  <span class="mx-2 text-muted" v-if="!providers || providers.providers.length <= 0"><fa-icon :icon="faUserSlash" /></span>
+  <span class="mx-2 text-white" v-if="!providers || providers.providers.length <= 0"><fa-icon :icon="faUserSlash" /></span>
   <a class="btn btn-link mx-1 no-underline" v-else-if="providers && providers.providers.length === 1" :href="providers.providers[0].url">
     <fa-icon :icon="faUser" />
     <span class="mx-2">{{ providers.providers[0].label ?? "Login" }}</span>
   </a>
   <div class="dropdown" v-else>
-    <button class="btn dropdown-toggle mx-1" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    <button class="btn dropdown-toggle mx-1 text-white" type="button" data-bs-toggle="dropdown" aria-expanded="false">
       <fa-icon :icon="faUser" /> Login
     </button>
     <ul class="dropdown-menu">

common/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "dompurify": "^3.0.1",
-    "highlight.js": "^11.8.0",
+    "highlight.js": "^11.9.0",
     "jsdom": "^22.1.0",
     "marked": "^5.0.2",
     "marked-highlight": "^2.0.1",

common/src/dto/AppSettingsDto.ts

@@ -1,6 +1,7 @@
 import { HyperlinkDto } from "./HyperlinkDto.js";
 
 export type AppSettingsDto = {
+  appVersion: string | undefined;
   githubRepositorySlug: string | undefined;
   imprint: HyperlinkDto | undefined;
   isProduction: boolean;

common/src/entity/User.ts

@@ -28,4 +28,4 @@ export type UserWithOAuthProviders = User & {
   oauthProviders: OAuthProviderId[];
 };
 
-export type UserTheme = "lightTheme" | "darkTheme";
+export type UserTheme = "light" | "dark";

portal/src/routes/login.ts

@@ -68,11 +68,11 @@ router.get("/", async (req, res) => {
           ${pfpHtml}
           <form method="post" action="?" class="card-body">
             <div class="form-floating mb-2">
-              <input id="userId" name="userId" class="form-control" placeholder required value="${faker.random.alphaNumeric(20)}">
+              <input id="userId" name="userId" class="form-control" placeholder required value="${faker.string.alphanumeric(20)}">
               <label for="userId">User-ID</label>
             </div>
             <div class="form-floating mb-2">
-              <input id="code" name="code" class="form-control" placeholder required value="${faker.random.alphaNumeric(20)}">
+              <input id="code" name="code" class="form-control" placeholder required value="${faker.string.alphanumeric(20)}">
               <label for="userId">Code</label>
             </div>
             <input name="fullName" value="${acc.fullName ?? ""}" readonly class="form-control-plaintext">
@@ -114,7 +114,7 @@ router.get("/", async (req, res) => {
   <h2>Create custom login</h2>
   <form method="post">
     <div class="form-floating mb-2">
-      <input id="userId" name="userId" class="form-control" type="text" required value="${faker.random.alphaNumeric(20)}">
+      <input id="userId" name="userId" class="form-control" type="text" required value="${faker.string.alphanumeric(20)}">
       <label for="userId">User-ID</label>
     </div>
     <div class="form-floating mb-2">
@@ -140,7 +140,7 @@ router.get("/", async (req, res) => {
         </div>
       </div>
       <div class="form-floating mb-4">
-        <input id="code" name="code" class="form-control" type="text" value="${faker.random.alphaNumeric(20)}" pattern="[a-zA-Z0-9_-]+">
+        <input id="code" name="code" class="form-control" type="text" value="${faker.string.alphanumeric(20)}" pattern="[a-zA-Z0-9_-]+">
         <label for="code">Code</label>
         <div class="form-text">
           Arbitrary string, under which the user info is saved. It is generated randomly.

server/package.json

@@ -5,7 +5,8 @@
   "main": "server.js",
   "scripts": {
     "start": "NODE_ENV='development' NODE_EXTRA_CA_CERTS=../certs/ca.crt nodemon -r dotenv/config ./src/server.ts",
-    "build": "tsc",
+    "write-app-version": "git describe --always --dirty > dist/app_version.txt",
+    "build": "tsc && npm run write-app-version",
     "run-prod": "node ./dist/server.js",
     "lint": "prettier --check 'src/**/*.(ts|vue)' && eslint src/**/*.ts",
     "lintfix": "prettier 'src/**/*.(ts|vue)' --write && eslint src/**/*.ts --fix",

server/src/server.ts

@@ -1,6 +1,6 @@
 import cors from "cors";
 import express, { Application, NextFunction, Request, Response } from "express";
-import * as fs from "fs";
+import { readFile, writeFileSync } from "fs";
 import path, { dirname } from "path";
 import { fileURLToPath } from "url";
 import { corsOptions } from "./config/cors-config.js";
@@ -15,7 +15,6 @@ import fileRoutes from "./routes/file.js";
 import postRoutes from "./routes/posts.js";
 import utilityRoutes from "./routes/utility.js";
 import { errorHandler } from "./service/error-handler.js";
-import { generateShareImage } from "./service/opengraph.js";
 import { initDatabase } from "./service/testdata-generator.js";
 import { AppSettings, ClientSettings, DatabaseSettings, ServerSettings } from "./settings.js";
 
@@ -74,7 +73,7 @@ async function handleUncaught(error: Error) {
 // in production serve the built vue-app from static public folder:
 if (AppSettings.IS_PRODUCTION) {
   const indexResponse = (req: Request, res: Response) => {
-    fs.readFile(
+    readFile(
       path.join(__dirname, "public/index.html"), //
       { encoding: "utf-8" },
       (err, data) => {
@@ -90,13 +89,15 @@ if (AppSettings.IS_PRODUCTION) {
   app.use(express.static("./public", { redirect: false, index: false }));
   app.get("*", indexResponse);
 } else {
-  fs.writeFileSync("../client/.env.development", "VITE_APP_DATA=" + JSON.stringify(AppSettings.DTO), { encoding: "utf-8" });
+  writeFileSync("../client/.env.development", "VITE_APP_DATA=" + JSON.stringify(AppSettings.DTO), { encoding: "utf-8" });
 }
 
 app.listen(ServerSettings.PORT, () => {
-  logger.info(`fuBlog server running in ${AppSettings.RUN_MODE} mode on port: ${ServerSettings.PORT}`);
-  if (!AppSettings.IS_PRODUCTION) {
-    logger.info(`Connected to Postgres DB at ${DatabaseSettings.HOST}:${DatabaseSettings.PORT}`);
-    logger.info(`Client: ${ClientSettings.BASE_URL}`);
-  }
+  logger.info(
+    `▶️ fuBlog server${AppSettings.IS_PRODUCTION ? ` version ${AppSettings.APP_VERSION ?? "‹unknown›"}` : ""} running in ${
+      AppSettings.RUN_MODE
+    } mode on port: ${ServerSettings.PORT}`,
+  );
+  logger.info(`🗄️ Expecting Postgres DB at ${DatabaseSettings.HOST}:${DatabaseSettings.PORT}`);
+  logger.info(`🖥️ Expecting to be published at ${ClientSettings.BASE_URL}`);
 });