Merge pull request #2528 from hey-api/docs/logo-svg

docs: add svg logo

Author: mrlubos

docs/.vitepress/config/shared.ts

@@ -11,28 +11,21 @@ export default defineConfig({
     [
       'link',
       {
-        href: '/images/logo-16w.png',
+        href: '/logo-dark.svg',
+        media: '(prefers-color-scheme: dark)',
         rel: 'icon',
         sizes: '16x16',
-        type: 'image/png',
+        type: 'image/svg',
       },
     ],
     [
       'link',
       {
-        href: '/images/logo-32w.png',
+        href: '/logo-light.svg',
+        media: '(prefers-color-scheme: light)',
         rel: 'icon',
-        sizes: '32x32',
-        type: 'image/png',
-      },
-    ],
-    [
-      'link',
-      {
-        href: '/images/logo-48w.png',
-        rel: 'icon',
-        sizes: '48x48',
-        type: 'image/png',
+        sizes: '16x16',
+        type: 'image/svg',
       },
     ],
     process.env.NODE_ENV === 'production' && [
@@ -54,7 +47,11 @@ export default defineConfig({
   },
   themeConfig: {
     externalLinkIcon: true,
-    logo: '/images/logo-48w.png',
+    logo: {
+      alt: 'Hey API logo',
+      dark: '/logo-dark.svg',
+      light: '/logo-light.svg',
+    },
     search: {
       options: {
         apiKey: '2565c35b4ad91c2f8f8ae32cf9bbe899',

docs/.vitepress/theme/custom.css

@@ -435,3 +435,15 @@ footer.VPDocFooter > .edit-info > .last-updated {
   white-space: nowrap;
   width: 1px;
 }
+
+.VPNavBarTitle a.title {
+  column-gap: 4px;
+}
+
+.VPImage.logo {
+  margin-right: 0;
+}
+
+.VPNavBarTitle {
+  color: var(--vp-c-text-1);
+}

docs/index.md

@@ -15,8 +15,8 @@ hero:
       text: Roadmap
       theme: alt
   image:
-    alt: Hey API logo
-    src: /images/logo-640w.png
+    alt: Two people looking at the blueprint
+    src: /images/blueprint-640w.png
 
 features:
   - icon: <svg class="icon-openapi" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 32"><path d="M8.96 18.397H.515l.005.123.014.238.007.102.022.275.006.061.033.304.003.03.043.327c.098.677.243 1.343.437 1.999l.003.008.1.326.006.018.093.276.025.07.087.24.04.107.078.2.06.149.065.154.086.188.05.114.105.225.035.072.126.256.02.039.154.293.033.057 7.235-4.366a5.754 5.754 0 0 1-.528-1.885ZM.914 22.27l.002.007.273-.085-.275.078ZM11.034 22.275l-5.97 5.967.092.085.255.227.203.172.055.045.232.187.03.024.255.196a.066.066 0 0 1 .01.007l1.113.752.04.024.219.13.134.076.128.072.232.126.032.017.658.32 3.213-7.805a5.719 5.719 0 0 1-.934-.623l.003.001ZM10.415 21.683l-.186-.219-.154-.199-.165-.233-.154-.241-7.22 4.349.371.584.03.044.002.003.388.547.009.011.008.011.176.229.21.261.045.055.173.203.076.087.15.171.084.092.039.042.114.12.046.047.2.204 5.956-5.956-.195-.209-.003-.003ZM18.31 22.272l-.2.154.016.025 4.342 7.209.594-.41c.42-.31.827-.645 1.22-1.007l-5.949-5.947-.023-.024ZM21.92 30.003l.01-.006-.01.006Zm-.005.003ZM21.929 29.994l.057-.028-.001-.002-.056.033v-.003Zm-.01.009-.002.001.002-.001ZM21.916 30.006l-.011-.018.01.018Zm.004-.003.01-.005-.01.005Z" fill="#fff"></path><path d="m21.837 29.719-4.2-6.97-.25.139-.256.128a5.756 5.756 0 0 1-4.106.319l-.27-.095-.27-.095-3.207 7.788.024.009.024.009.007.003.615.235a14.262 14.262 0 0 0 3.007.708l.349.038.056.005.28.023.095.006.245.014.15.006.195.007.348.004c.788 0 1.575-.066 2.352-.196l.04-.006.246-.045.143-.027.145-.03.24-.053.044-.01a14.241 14.241 0 0 0 3.398-1.267l.209-.115.424-.238-.007-.02.01.018.014-.008.056-.034-.15-.25Zm-10.8-16.335.2-.155-.015-.024-4.343-7.206-.595.41c-.42.31-.827.645-1.218 1.006l5.948 5.945.024.024ZM4.654 7.808l-.395.413c-.44.476-.841.971-1.203 1.491l-.052.075-.121.178-.123.188-.045.068a14.135 14.135 0 0 0-2.2 7.035l-.007.286-.005.285h8.424l.013-.285.016-.286a5.716 5.716 0 0 1 1.27-3.068c.058-.073.128-.142.192-.212.065-.07.124-.144.192-.212L4.654 7.808Zm17.38-2.09L22 5.695l-.224-.132-.13-.075-.132-.073-.228-.123-.036-.019a14.74 14.74 0 0 0-1.52-.686l-.04-.015-.342-.124a14.216 14.216 0 0 0-2.839-.673l-.118-.016-.119-.013-.228-.025-.064-.006-.273-.023-.342-.02-.124-.006v8.444c.433.045.862.138 1.279.279l6.216-6.211a13.96 13.96 0 0 0-.703-.461h.002ZM7.363 5.692l.147.244-.147-.244Zm0 0L7.36 5.69l.004.002Z" fill="#fff"></path><path d="m14.388 3.664-.285.005a14.24 14.24 0 0 0-1.78.184l-.04.007-.247.044-.143.027-.145.03-.24.053-.043.01a14.252 14.252 0 0 0-3.4 1.268l-.705.398v.001l4.349 7.219.25-.14a5.727 5.727 0 0 1 2.141-.657l.285-.022s.19-.01.286-.01V3.658c-.095 0-.19.003-.285.005h.002ZM28.827 17.131l-.014-.227-.007-.113-.022-.267-.006-.07-.032-.297-.002-.024-.002-.012-.043-.32-.001-.01a14.164 14.164 0 0 0-.436-1.992l-.003-.013-.094-.304-.013-.04-.091-.272-.026-.074-.086-.235-.043-.111-.075-.194-.063-.153-.063-.15-.083-.191-.049-.108-.107-.228-.033-.069-.128-.259-.018-.035-.149-.286c-.002-.003-.003-.007-.006-.01a14.217 14.217 0 0 0-.806-1.308l-6.217 6.218c.14.415.233.844.278 1.279h8.444l-.004-.125ZM20.42 17.828l-.013.285-.016.286a5.709 5.709 0 0 1-1.27 3.068c-.057.073-.128.142-.192.212s-.123.144-.191.212l5.956 5.956c.067-.068.13-.138.197-.206l.197-.207c.44-.477.843-.977 1.206-1.496l.043-.06.13-.193.113-.173.057-.084a14.13 14.13 0 0 0 2.196-7.03l.007-.285.005-.286H20.42Z" fill="#fff"></path></svg>
@@ -76,15 +76,27 @@ features:
   fill: var(--github-mark-fill-color);
 }
 
+.VPImage.image-src {
+  max-width: 300px;
+}
+
 @media (min-width: 640px) {
   html.dark {
     --vp-home-hero-image-filter: blur(156px);
   }
+
+  .VPImage.image-src {
+    max-width: 420px;
+  }
 }
 
 @media (min-width: 960px) {
   html.dark {
     --vp-home-hero-image-filter: blur(168px);
   }
+
+  .VPImage.image-src {
+    max-width: 460px;
+  }
 }
 </style>