From bcfc78cc85e4bed51e7d780750230b184e189c2d Mon Sep 17 00:00:00 2001
From: Simon Hirtreiter <14137977+simonhir@users.noreply.github.com>
Date: Fri, 20 Dec 2024 11:47:01 +0100
Subject: [PATCH] Bug/docs fix theme and cleanup (#332)

* :memo: docs unify gateway naming

* :memo: docs architecture client instead of users

* :memo: docs make outline deep by default

* :memo: docs use asset server for nav logo

* :bug: docs fix missing css

* :bug: docs fix missing css

* :memo: docs unify gateway naming

* :memo: docs add prettier commands
---
 docs/.vitepress/config.mts                  |   7 +++++--
 docs/.vitepress/theme/LhmThemeExtension.vue |   4 +---
 docs/.vitepress/theme/logo-lhm.png          | Bin 3394 -> 0 bytes
 docs/.vitepress/theme/style.css             |  21 +++++++++++++++++++-
 docs/gateway.md                             |   2 +-
 docs/index.md                               |   2 +-
 docs/overview.md                            |   6 +++---
 docs/package.json                           |   4 +++-
 8 files changed, 34 insertions(+), 12 deletions(-)
 delete mode 100644 docs/.vitepress/theme/logo-lhm.png

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 025a5724..f9e68384 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -23,7 +23,7 @@ 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" },
         ],
@@ -31,7 +31,7 @@ const vitepressConfig = defineConfig({
     ],
     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" },
     ],
diff --git a/docs/.vitepress/theme/LhmThemeExtension.vue b/docs/.vitepress/theme/LhmThemeExtension.vue
index 8bacc37a..e988ff92 100644
--- a/docs/.vitepress/theme/LhmThemeExtension.vue
+++ b/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>
diff --git a/docs/.vitepress/theme/logo-lhm.png b/docs/.vitepress/theme/logo-lhm.png
deleted file mode 100644
index 132d9b3b05d01fd1f5f56b97dd405d48ecee01ad..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3394
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

diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 50969f5a..f53dcf9b 100644
--- a/docs/.vitepress/theme/style.css
+++ b/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;
+    }
+}
diff --git a/docs/gateway.md b/docs/gateway.md
index 0b4663d3..02f8ebc5 100644
--- a/docs/gateway.md
+++ b/docs/gateway.md
@@ -1 +1 @@
-# API-Gateway
+# API gateway
diff --git a/docs/index.md b/docs/index.md
index 99adccd1..9d4edd76 100644
--- a/docs/index.md
+++ b/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
diff --git a/docs/overview.md b/docs/overview.md
index b7873e3f..f5c9f9b9 100644
--- a/docs/overview.md
+++ b/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
 
diff --git a/docs/package.json b/docs/package.json
index 5b7aeecb..65c75bc3 100644
--- a/docs/package.json
+++ b/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"