feat: add custom dev & api logos

api/.vitepress/config.mts

@@ -51,11 +51,36 @@ export default defineConfig({
   description: "The zwoo api documentation",
   base: basePath,
   locales: createLocales("/api/"),
-  head: createCommonHead(basePath),
+  head: [
+    ...createCommonHead(),
+    [
+      "link",
+      {
+        rel: "icon",
+        type: "image/svg+xml",
+        href: basePath + "zwoo_api_docs_simple_none_dark.svg",
+      },
+    ],
+    [
+      "link",
+      {
+        rel: "icon",
+        type: "image/png",
+        href: basePath + "zwoo_api_docs_simple_none_dark.png",
+      },
+    ],
+  ],
   themeConfig: {
     socialLinks,
     ...themeConfig,
 
+    logo: {
+      dark: "/zwoo_api_docs_simple_none_dark.svg",
+      light: "/zwoo_api_docs_simple_none_light.svg",
+      width: 512,
+      height: 512,
+    },
+
     nav: [
       { text: "Home", link: "/" },
       ...concepts,

api/index.md

@@ -5,6 +5,10 @@ layout: home
 hero:
   name: ZWOO API
   tagline: How the zwoo actors are connected.
+  image:
+    light: /zwoo_api_docs_none_light.svg
+    dark: /zwoo_api_docs_none_dark.svg
+    alt: ZWOO dev logo
   actions:
     - theme: brand
       text: Play ZWOO!
@@ -37,3 +41,31 @@ features:
     icon: 🚀
 ---
 
+<style>
+:root {
+  --vp-home-hero-image-background-image: linear-gradient(120deg, #E50402 10%, #FE8C01 27.6%, #F9E803 36.4%, #12B90F 49.2%, #02772D 61.2%, #034DFC 73.2%, #78078B 90%);
+  --vp-home-hero-image-filter: blur(44px);
+
+  --color-secondary-text-hex: #7732e6
+}
+
+.dark {
+  --color-secondary-text-hex: #b77fff
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+.image-bg {
+  border-radius: 30px !important;
+}
+</style>

commonConfig.mts

@@ -1,4 +1,4 @@
-import { DefaultTheme, UserConfig } from "vitepress";
+import { DefaultTheme, HeadConfig, UserConfig } from "vitepress";
 
 type NonNullable<T> = T extends null | undefined ? never : T;
 type ConfigType = NonNullable<UserConfig<DefaultTheme.Config>>;
@@ -7,23 +7,7 @@ type ThemeConfig = NonNullable<ConfigType["themeConfig"]>;
 export const ZWOO_URL = "https://zwoo.igd20.de/";
 export const ZWOO_DOCS_URL = ZWOO_URL + "docs/";
 
-export const createCommonHead = (base: string): ConfigType["head"] => [
-  [
-    "link",
-    {
-      rel: "icon",
-      type: "image/svg+xml",
-      href: base + "zwoo_logo_simple_dark.svg",
-    },
-  ],
-  [
-    "link",
-    {
-      rel: "icon",
-      type: "image/png",
-      href: base + "zwoo_logo_simple_dark.png",
-    },
-  ],
+export const createCommonHead = (): HeadConfig[] => [
   ["meta", { name: "theme-color", content: "#0ea5e9" }],
   ["meta", { property: "og:type", content: "website" }],
   ["meta", { property: "og:locale", content: "en" }],
@@ -89,10 +73,4 @@ export const themeConfig: ThemeConfig = {
     copyright: "Copyright © 2021-present IGD 2.0 UG (haftungsbeschränkt)",
     message: "Made with <3 by Fabian Kachlock and the zwoo team.",
   },
-  logo: {
-    dark: "/zwoo_logo_simple_none_dark.svg",
-    light: "/zwoo_logo_simple_none_light.svg",
-    width: 512,
-    height: 512,
-  },
 };

dev/.vitepress/config.mts

@@ -15,11 +15,36 @@ export default defineConfig({
   description: "The zwoo api documentation",
   base: basePath,
   locales: createLocales("/dev/"),
-  head: createCommonHead(basePath),
+  head: [
+    ...createCommonHead(),
+    [
+      "link",
+      {
+        rel: "icon",
+        type: "image/svg+xml",
+        href: basePath + "zwoo_dev_docs_simple_none_dark.svg",
+      },
+    ],
+    [
+      "link",
+      {
+        rel: "icon",
+        type: "image/png",
+        href: basePath + "zwoo_dev_docs_simple_none_dark.png",
+      },
+    ],
+  ],
   themeConfig: {
     socialLinks,
     ...themeConfig,
 
+    logo: {
+      dark: "/zwoo_dev_docs_simple_none_dark.svg",
+      light: "/zwoo_dev_docs_simple_none_light.svg",
+      width: 512,
+      height: 512,
+    },
+
     nav: [createCommonNav(basePath)],
     sidebar: [],
   },

dev/index.md

@@ -5,6 +5,10 @@ layout: home
 hero:
   name: ZWOO DEV
   tagline: Zwoo developer documentation.
+  image:
+    light: /zwoo_dev_docs_none_light.svg
+    dark: /zwoo_dev_docs_none_dark.svg
+    alt: ZWOO dev logo
   actions:
     - theme: brand
       text: Play ZWOO!
@@ -27,3 +31,31 @@ features:
     icon: 🤖
 ---
 
+<style>
+:root {
+  --vp-home-hero-image-background-image: linear-gradient(120deg, #E50402 10%, #FE8C01 27.6%, #F9E803 36.4%, #12B90F 49.2%, #02772D 61.2%, #034DFC 73.2%, #78078B 90%);
+  --vp-home-hero-image-filter: blur(44px);
+
+  --color-secondary-text-hex: #7732e6
+}
+
+.dark {
+  --color-secondary-text-hex: #b77fff
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+.image-bg {
+  border-radius: 30px !important;
+}
+</style>

docs/.vitepress/config.mts

@@ -15,11 +15,36 @@ export default defineConfig({
   description: "The zwoo user documentation",
   base: "/docs/",
   locales: createLocales("/"),
-  head: createCommonHead("/docs/"),
+  head: [
+    ...createCommonHead(),
+    [
+      "link",
+      {
+        rel: "icon",
+        type: "image/svg+xml",
+        href: "/docs/zwoo_logo_simple_dark.svg",
+      },
+    ],
+    [
+      "link",
+      {
+        rel: "icon",
+        type: "image/png",
+        href: "/docs/zwoo_logo_simple_dark.png",
+      },
+    ],
+  ],
   themeConfig: {
     socialLinks,
     ...themeConfig,
 
+    logo: {
+      dark: "/zwoo_logo_simple_none_dark.svg",
+      light: "/zwoo_logo_simple_none_light.svg",
+      width: 512,
+      height: 512,
+    },
+
     nav: [
       {
         text: "FAQ",