💄 feat(brand): monogramme @kbrdn1 sur le favicon, le header et les OG

app/components/OgImage/Blog.satori.vue

@@ -147,9 +147,20 @@ withDefaults(defineProps<{
             /blog{{ slug ? `/${slug}` : '' }}
           </span>
         </div>
-        <span style="font-family: 'Monaspace Krypton', monospace; font-size: 13px; font-weight: 700;">
-          <span style="color: #7dd3fc;">blog</span><span style="color: #e0e0e0;">@</span><span style="color: #d4825d;">kbrdn1</span>
-        </span>
+        <div class="flex items-center" style="gap: 8px;">
+          <svg width="18" height="18" viewBox="0 0 32 32">
+            <g fill="#e0e0e0">
+              <rect x="2" y="2" width="28" height="4" />
+              <rect x="2" y="2" width="4" height="28" />
+              <rect x="26" y="2" width="4" height="14" />
+              <rect x="2" y="26" width="14" height="4" />
+            </g>
+            <path d="M19 9 L7 16 L19 23 V19 L14 16 L19 13 Z" fill="#d4825d" />
+          </svg>
+          <span style="font-family: 'Monaspace Krypton', monospace; font-size: 13px; font-weight: 700;">
+            <span style="color: #7dd3fc;">blog</span><span style="color: #e0e0e0;">@</span><span style="color: #d4825d;">kbrdn1</span>
+          </span>
+        </div>
       </div>
     </div>
   </div>

app/components/OgImage/Default.satori.vue

@@ -82,9 +82,20 @@ withDefaults(defineProps<{
             {{ statusText }}
           </span>
         </div>
-        <span style="font-family: 'Monaspace Krypton', monospace; font-size: 13px; font-weight: 700;">
-          <span style="color: #e0e0e0;">@</span><span style="color: #d4825d;">kbrdn1</span>
-        </span>
+        <div class="flex items-center" style="gap: 8px;">
+          <svg width="18" height="18" viewBox="0 0 32 32">
+            <g fill="#e0e0e0">
+              <rect x="2" y="2" width="28" height="4" />
+              <rect x="2" y="2" width="4" height="28" />
+              <rect x="26" y="2" width="4" height="14" />
+              <rect x="2" y="26" width="14" height="4" />
+            </g>
+            <path d="M19 9 L7 16 L19 23 V19 L14 16 L19 13 Z" fill="#d4825d" />
+          </svg>
+          <span style="font-family: 'Monaspace Krypton', monospace; font-size: 13px; font-weight: 700;">
+            <span style="color: #e0e0e0;">@</span><span style="color: #d4825d;">kbrdn1</span>
+          </span>
+        </div>
       </div>
 
       <!-- Center: name + subtitle + avatar -->

app/components/layout/BlogHeader.vue

@@ -71,6 +71,7 @@ const isMobileMenuOpen = ref(false);
             @click="showBrandMenu = !showBrandMenu"
             @keydown.escape="showBrandMenu = false"
           >
+            <UiLogo class="mr-2 text-neutral-900 dark:text-neutral-100" />
             <span class="text-sky-400">blog</span><span class="text-neutral-900 dark:text-neutral-100">@</span><span class="text-primary-500">kbrdn1</span>
           </button>
 
@@ -159,12 +160,13 @@ const isMobileMenuOpen = ref(false);
         <div class="relative group/brand-mobile">
           <button
             type="button"
-            class="font-mono font-bold text-sm tracking-tight"
+            class="flex items-center font-mono font-bold text-sm tracking-tight"
             :aria-expanded="showBrandMenu"
             aria-haspopup="true"
             @click="showBrandMenu = !showBrandMenu"
             @keydown.escape="showBrandMenu = false"
           >
+            <UiLogo class="mr-2 text-neutral-900 dark:text-neutral-100" />
             <span class="text-sky-400">blog</span><span class="text-neutral-900 dark:text-neutral-100">@</span><span class="text-primary-500">kbrdn1</span>
           </button>
           <Transition

app/components/layout/Header.vue

@@ -118,6 +118,7 @@ const isMobileMenuOpen = ref(false);
             @click="showBrandMenu = !showBrandMenu"
             @keydown.escape="showBrandMenu = false"
           >
+            <UiLogo class="mr-2 text-neutral-900 dark:text-neutral-100" />
             <span class="text-neutral-900 dark:text-neutral-100">@</span><span class="text-primary-500">kbrdn1</span>
           </button>
 
@@ -207,12 +208,13 @@ const isMobileMenuOpen = ref(false);
         <div class="relative group/brand-mobile">
           <button
             type="button"
-            class="font-mono font-bold text-sm tracking-tight"
+            class="flex items-center font-mono font-bold text-sm tracking-tight"
             :aria-expanded="showBrandMenu"
             aria-haspopup="true"
             @click="showBrandMenu = !showBrandMenu"
             @keydown.escape="showBrandMenu = false"
           >
+            <UiLogo class="mr-2 text-neutral-900 dark:text-neutral-100" />
             <span class="text-neutral-900 dark:text-neutral-100">@</span><span class="text-primary-500">kbrdn1</span>
           </button>
           <Transition

app/components/ui/Logo.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    size?: number | string;
+  }>(),
+  { size: 16 },
+);
+</script>
+
+<template>
+  <!--
+    Monogramme @kbrdn1 : le montant gauche du cadre sert de barre au K.
+    Cadre en rects pleins (et non en stroke) pour rester rendable par satori.
+    La masse neutre suit currentColor — pas de <style> ici, il fuiterait dans le document.
+    Version autonome pour le favicon : public/favicon.svg
+  -->
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 32 32"
+    aria-hidden="true"
+    class="shrink-0"
+  >
+    <g fill="currentColor">
+      <rect x="2" y="2" width="28" height="4" />
+      <rect x="2" y="2" width="4" height="28" />
+      <rect x="26" y="2" width="4" height="14" />
+      <rect x="2" y="26" width="14" height="4" />
+    </g>
+    <path d="M19 9 L7 16 L19 23 V19 L14 16 L19 13 Z" fill="#d4825d" />
+  </svg>
+</template>