Merge pull request #91 from fumiX/show-version

Show deployed version

client/package.json

@@ -19,7 +19,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@fumix/fu-blog-common": "*",
     "@sipec/vue3-tags-input": "^3.0.4",
-    "bootstrap": "^5.2.3",
+    "bootstrap": "5.3.3",
     "buffer": "^6.0.3",
     "luxon": "^3.3.0",
     "stream-browserify": "^3.0.0",

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">
@@ -127,6 +127,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/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>
@@ -81,25 +81,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/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";