feat: cute logo v2 and optimized images

src/components/NavBar.astro

@@ -1,4 +1,6 @@
 ---
+import OptimizedImage from "./OptimizedImage.astro";
+
 const navLinks = {
     download: ["Download", "accentPurple"],
     plugins: ["Plugins", "accentBlue"],
@@ -13,10 +15,7 @@ const page = Astro.url.pathname.split("/")[1];
     <div class="nav-content">
         <div id="logo">
             <a href="/" id="title">
-                <img
-                    src="/assets/logo-nav-oneko-padding.png"
-                    alt="Vencord Home"
-                />
+                <OptimizedImage src="/assets/logo-nav" id="logo-img" alt="Vencord Home" />
                 <div id="oneko" aria-hidden="true"></div>
             </a>
         </div>
@@ -109,11 +108,15 @@ const page = Astro.url.pathname.split("/")[1];
         position: relative;
     }
 
+    #logo-img {
+        height: 27px;
+    }
+
     #oneko {
         position: absolute;
 
         top: -3px;
-        right: 7px;
+        right: -20px;
 
         display: inline-block;
         width: 32px;

src/components/OptimizedImage.astro

@@ -0,0 +1,12 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+export interface Props extends HTMLAttributes<"img"> {}
+
+const { src } = Astro.props;
+---
+
+<picture>
+    <source srcset={`${src}.avif`} type="image/avif" />
+    <img src={`${src}.webp`} {...Astro.props} />
+</picture>

src/layouts/Layout.astro

@@ -83,6 +83,7 @@ if (Astro.url.pathname === "/") {
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="icon" href="/assets/favicon.png" />
+        <link rel="icon" href="/assets/favicon-dark.png" media="(prefers-color-scheme: dark)" />
 
         <link
             rel="preload"
@@ -105,7 +106,7 @@ if (Astro.url.pathname === "/") {
                     <meta name="og:url" content={Astro.url} />
                     <meta
                         name="og:image"
-                        content={new URL("/assets/favicon.png", Astro.site)}
+                        content={new URL("/assets/logo.png", Astro.site)}
                     />
                 </>
             )

src/pages/index.astro

@@ -5,6 +5,7 @@ import Layout from "layouts/Layout.astro";
 
 import LinkButton from "components/LinkButton.astro";
 import AutoSizeGrid from "components/AutoSizeGrid.astro";
+import OptimizedImage from "components/OptimizedImage.astro";
 import Card, { CardKind } from "components/Card.svelte";
 
 const features = [
@@ -64,9 +65,9 @@ if (features.length % 3 !== 0)
         </Card>
 
         <section class="tagline">
-            <img
+            <OptimizedImage
                 id="cute-logo"
-                src="/assets/cute-logo.avif"
+                src="/assets/cute-logo"
                 alt="Vencord cute wordmark"
             />
             <h2>The cutest Discord client mod</h2>