From 4e0422bede85d4dabd1e02c58f633a0a907f8e71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Thu, 9 Oct 2025 15:45:56 +0200
Subject: [PATCH] feat: docs

---
 Projects/kompose/docs/app/app.vue             |   2 +-
 .../kompose/docs/app/components/AppFooter.vue |   2 +-
 .../kompose/docs/app/components/AppHeader.vue |   3 +-
 Projects/kompose/docs/public/favicon.ico      | Bin 4286 -> 15086 bytes
 Projects/kompose/docs/public/icon.svg         |  50 ++++++++++++++++++
 5 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 Projects/kompose/docs/public/icon.svg

diff --git a/Projects/kompose/docs/app/app.vue b/Projects/kompose/docs/app/app.vue
index 9cfaf73f..be865190 100644
--- a/Projects/kompose/docs/app/app.vue
+++ b/Projects/kompose/docs/app/app.vue
@@ -11,7 +11,7 @@ useHead({
     { name: 'viewport', content: 'width=device-width, initial-scale=1' }
   ],
   link: [
-    { rel: 'icon', href: 'favicon.ico' }
+    { rel: 'icon', href: '/favicon.ico' }
   ],
   htmlAttrs: {
     lang: 'en'
diff --git a/Projects/kompose/docs/app/components/AppFooter.vue b/Projects/kompose/docs/app/components/AppFooter.vue
index 0028220e..690c7860 100644
--- a/Projects/kompose/docs/app/components/AppFooter.vue
+++ b/Projects/kompose/docs/app/components/AppFooter.vue
@@ -5,7 +5,7 @@ const { footer } = useAppConfig()
 <template>
   <UFooter>
     <template #left>
-      <img src="/kompose/favicon.svg" alt="kompose" class="size-5 mr-6"></img>
+      <img src="/icon.svg" alt="kompose" class="size-5 mr-0/5"></img>
       {{ footer.credits }}
     </template>
 
diff --git a/Projects/kompose/docs/app/components/AppHeader.vue b/Projects/kompose/docs/app/components/AppHeader.vue
index e981188e..7c0191f3 100644
--- a/Projects/kompose/docs/app/components/AppHeader.vue
+++ b/Projects/kompose/docs/app/components/AppHeader.vue
@@ -21,7 +21,8 @@ const { header } = useAppConfig()
 
     <template v-else #left>
       <div class="flex items-center gap-6">
-        <NuxtLink :to="header?.to || '/'" >
+        <NuxtLink :to="header?.to || '/'" class="flex items-center">
+          <img src="/icon.svg" alt="kompose" class="size-7 mt-1 mr-2"></img>
           <AppLogo class="!text-2xl mt-1" />
         </NuxtLink>
 
diff --git a/Projects/kompose/docs/public/favicon.ico b/Projects/kompose/docs/public/favicon.ico
index 18993ad91cfd43e03b074dd0b5cc3f37ab38e49c..67132e0ea5dfa4d430b5366d5674c557f5aadc71 100644
GIT binary patch
literal 15086
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
I@iYDVAMe)K8UO$Q

literal 4286
zcmeHLOKuuL5PjK%MHWVi6lD<!mRb4$mdFuu1m7S&L72}0%nh7nb{xS*IY7K-1~WG>
zOGiR<sv2rs-P1h`ut*jRDypfj@9U}_3E&NVhC}c-e)fS606r6u2w#X;ZXeov|87fL
z!TI})z`sQxSz?%$m}Cpw?WF=YNnu;Mk#t%h*=w(2a7>EbCw`xmFozJ^aNatJY>w+g
ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph
z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8
zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%<Y^V1u
zxpEJLVzZ2NFGX+1TXChn89VxczG?Ja<o=SJ8n{y5$ezyw`8sz3-<3{&C8oX)|94kh
z+0M_EV^O^m@tH21JEPN_ux%Gy1GUw?U~8Zr)3xvGXUSPO+3I<5aAh6uT<iYgm~_ug
ziEA0#JM$)SV%(oc@>lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^
z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G
z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&w<W+!o=%S{hjU42>cHSn81VH1N~`0gvwH{
z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e<J#b(FPcAa6L9y8G}E@q!eIA^eYgE
GM1KL3x?{8e

diff --git a/Projects/kompose/docs/public/icon.svg b/Projects/kompose/docs/public/icon.svg
new file mode 100644
index 00000000..712398cd
--- /dev/null
+++ b/Projects/kompose/docs/public/icon.svg
@@ -0,0 +1,50 @@
+<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <pattern id="carbon192" x="0" y="0" width="7.68" height="7.68" patternUnits="userSpaceOnUse">
+              <rect width="7.68" height="7.68" fill="#0a0e27"></rect>
+              <path d="M0,0 L3.84,3.84 M3.84,0 L7.68,3.84 M0,3.84 L3.84,7.68" stroke="#060815" stroke-width="1.5" opacity="0.5"></path>
+            </pattern>
+            
+            <linearGradient id="bgGrad192" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" style="stop-color:#1a1d2e;stop-opacity:1"></stop>
+              <stop offset="100%" style="stop-color:#0a0e27;stop-opacity:1"></stop>
+            </linearGradient>
+            
+            <linearGradient id="primaryGrad192" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" style="stop-color:#00DC82;stop-opacity:1"></stop>
+              <stop offset="100%" style="stop-color:#00a86b;stop-opacity:1"></stop>
+            </linearGradient>
+            
+            <filter id="glow192">
+              <feGaussianBlur stdDeviation="6" result="coloredBlur"></feGaussianBlur>
+              <feMerge>
+                <feMergeNode in="coloredBlur"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+              </feMerge>
+            </filter>
+          </defs>
+
+          <!-- Background -->
+          <rect width="192" height="192" rx="24" fill="url(#bgGrad192)"></rect>
+          <rect width="192" height="192" rx="24" fill="url(#carbon192)" opacity="0.4"></rect>
+
+          <!-- Stylized K -->
+          <g transform="translate(48, 48)">
+            <line x1="0" y1="0" x2="0" y2="96" stroke="url(#primaryGrad192)" stroke-width="15" stroke-linecap="round" filter="url(#glow192)"></line>
+            <line x1="0" y1="48" x2="57.599999999999994" y2="0" stroke="url(#primaryGrad192)" stroke-width="15" stroke-linecap="round" filter="url(#glow192)"></line>
+            <line x1="0" y1="48" x2="57.599999999999994" y2="96" stroke="url(#primaryGrad192)" stroke-width="15" stroke-linecap="round" filter="url(#glow192)"></line>
+          </g>
+
+          <!-- Animated status dot -->
+          <circle cx="163.2" cy="163.2" r="11.52" fill="#00DC82" opacity="0.9">
+            <animate attributeName="opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite"></animate>
+            <animate attributeName="r" values="11.52;13.440000000000001;11.52" dur="2s" repeatCount="indefinite"></animate>
+          </circle>
+          <circle cx="163.2" cy="163.2" r="17.28" fill="none" stroke="#00DC82" stroke-width="3" opacity="0.3"></circle>
+
+          <!-- Tech corners -->
+          <line x1="15.36" y1="15.36" x2="28.799999999999997" y2="15.36" stroke="#00DC82" stroke-width="3" opacity="0.4"></line>
+          <line x1="15.36" y1="15.36" x2="15.36" y2="28.799999999999997" stroke="#00DC82" stroke-width="3" opacity="0.4"></line>
+          <line x1="176.64000000000001" y1="15.36" x2="163.2" y2="15.36" stroke="#00DC82" stroke-width="3" opacity="0.4"></line>
+          <line x1="176.64000000000001" y1="15.36" x2="176.64000000000001" y2="28.799999999999997" stroke="#00DC82" stroke-width="3" opacity="0.4"></line>
+        </svg>