Bug/docs fix theme and cleanup (#332)

* 📝 docs unify gateway naming

* 📝 docs architecture client instead of users

* 📝 docs make outline deep by default

* 📝 docs use asset server for nav logo

* 🐛 docs fix missing css

* 🐛 docs fix missing css

* 📝 docs unify gateway naming

* 📝 docs add prettier commands

docs/.vitepress/config.mts

@@ -23,15 +23,15 @@ const vitepressConfig = defineConfig({
         text: "Docs",
         items: [
           { text: "Overview", link: "/overview" },
-          { text: "API-Gateway", link: "/gateway" },
+          { text: "API gateway", link: "/gateway" },
           { text: "Integrations", link: "/integrations" },
           { text: "Development", link: "/dev" },
         ],
       },
     ],
     sidebar: [
       { text: "Overview", link: "/overview" },
-      { text: "API-Gateway", link: "/gateway" },
+      { text: "API gateway", link: "/gateway" },
       {
         text: "Integrations",
         link: "/integrations",
@@ -46,6 +46,9 @@ const vitepressConfig = defineConfig({
         ],
       },
     ],
+    outline: {
+      level: "deep",
+    },
     socialLinks: [
       { icon: "github", link: "https://github.com/it-at-m/refarch" },
     ],

docs/.vitepress/theme/LhmThemeExtension.vue

@@ -1,8 +1,6 @@
 <script setup>
 import DefaultTheme from "vitepress/theme";
 
-import lhmLogo from "./logo-lhm.png";
-
 const { Layout } = DefaultTheme;
 </script>
 <template>
@@ -14,7 +12,7 @@ const { Layout } = DefaultTheme;
           target="_blank"
         >
           <img
-            :src="lhmLogo"
+            src="https://assets.muenchen.de/logos/lhm/logo-lhm-muenchen.svg"
             alt="Logo Landeshauptstadt München"
           />
         </a>

docs/.vitepress/theme/style.css

@@ -1,8 +1,27 @@
 :root {
-    --muc-logo-filter: invert(0);
+    --muc-logo-filter: invert(0); /* Sets the default LHM logo color to black */
 }
 
+/* Dark mode specific configurations */
+.dark {
+    --muc-logo-filter: invert(1); /* Sets the LHM logo color to white */
+}
+
+/* Enables footer on all pages instead of only the home page */
 footer.VPFooter {
     display: block !important;
     z-index: 100 !important;
 }
+
+@media all and (max-width: 450px) {
+    /* Hides the logo text on mobile phones */
+    .VPNav div.logo a {
+        overflow: hidden;
+        width: 23px;
+    }
+    /* Fixes compression of logo on phone screens */
+    .VPNav div.logo a img {
+        object-fit: cover;
+        object-position: left;
+    }
+}

docs/gateway.md

@@ -1 +1 @@
-# API-Gateway
+# API gateway

docs/index.md

@@ -14,7 +14,7 @@ hero:
       text: Templates
       link: https://refarch-templates.oss.muenchen.de
     - theme: alt
-      text: API-Gateway
+      text: API gateway
       link: /gateway
     - theme: alt
       text: Integrations

docs/overview.md

@@ -18,8 +18,8 @@ Besides that there can be cases where modular frontends through web components,
 
 ```mermaid
 flowchart LR
-    u([Users])
-    g[API-Gateway]
+    u([Client])
+    g[API gateway]
     f[Frontend]
     b[Backend]
     w[Web component]
@@ -35,7 +35,7 @@ The API gateway is a ready-to-use component and the only exposed interface for a
 It manages all requests and routes them to the respective development components like frontend and backend.
 Besides that, it also handles cross-cutting concepts like authentication using a SSO.
 
-See [API-Gateway](./gateway.md) for further information.
+See [API gateway](./gateway.md) for further information.
 
 ### Frontend
 

docs/package.json

@@ -2,7 +2,9 @@
   "scripts": {
     "dev": "vitepress dev",
     "build": "vitepress build",
-    "preview": "vitepress preview"
+    "preview": "vitepress preview",
+    "lint": "prettier . --check",
+    "fix": "prettier . --write"
   },
   "engines": {
     "node": ">=20 <=22"