✨ add vd logo to header

Author: vitordino

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

src/components/Header.astro

@@ -1,6 +1,7 @@
 ---
 import getHomeDocument from '~/utils/getHomeDocument'
 import Logo from '~/components/Logo.astro'
+import VDLogo from '~/components/VDLogo.astro'
 
 export type Props = { title?: string | null }
 const props = Astro.props as Props
@@ -21,7 +22,7 @@ const headerLinks = homeData?.header_links
 
 <header class='header'>
   <div class='header-left'>
-    <a href='/' class='header-logo' aria-label='index'>
+    <a href='/' class='header-logo header-logo-home' aria-label='index'>
       <div class='header-logo-image'>
         <Logo />
       </div>
@@ -42,11 +43,16 @@ const headerLinks = homeData?.header_links
         </a>
       ))
     }
+    <a href='https://vitordino.com' class='header-logo' aria-label='index' target='_blank'>
+      <div class='header-logo-image'>
+        <VDLogo />
+      </div>
+    </a>
   </div>
 </header>
 
 <style is:global>
-  @keyframes header-logo-image-rotate {
+  @keyframes header-logo-home-image-rotate {
     to {
       transform: rotate(-72deg);
     }
@@ -78,16 +84,19 @@ const headerLinks = homeData?.header_links
     color: currentColor;
     pointer-events: auto;
     outline: none;
+    &:focus-visible {
+      box-shadow: 0 0 0 1px currentColor;
+    }
   }
 
   .header-logo-image {
     width: 24px;
     height: 24px;
   }
 
-  .header-logo:hover .header-logo-image,
-  .header-logo:focus .header-logo-image {
-    animation: 0.25s header-logo-image-rotate forwards;
+  .header-logo-home:hover .header-logo-image,
+  .header-logo-home:focus .header-logo-image {
+    animation: 0.25s header-logo-home-image-rotate forwards;
   }
 
   .header-title {
@@ -101,6 +110,9 @@ const headerLinks = homeData?.header_links
     outline: none;
     opacity: 0.5;
     mix-blend-mode: difference;
+    &:focus-visible {
+      box-shadow: 0 0 0 1px currentColor;
+    }
   }
 
   .header-link:hover,

src/components/VDLogo.astro

@@ -0,0 +1,5 @@
+<svg width='24' height='24' viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg' class=''>
+  <path
+    d='M800 400C800 620.914 620.914 800 400 800H0V400V0H400C620.914 0 800 179.086 800 400ZM583 150H321.061L100.172 532.8V700H267.207L583 150Z'
+    fill='currentColor'></path>
+</svg>