Use responsive logo lockups in docs header (#775)

Author: thebuilder

.fallowrc.json

@@ -3,6 +3,7 @@
   "entry": [
     "apps/docs/blume.config.ts",
     "apps/docs/components.ts",
+    "apps/docs/theme.css",
     "apps/docs/docs/**/*.mdx",
     "apps/docs/docs/**/meta.ts",
     "apps/docs/islands/ObserverDemo.tsx",

apps/docs/blume.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
   description:
     "A lightweight React implementation of the Intersection Observer API.",
   logo: {
-    image: "/logo.svg",
+    image: "/logo-horizontal.svg",
   },
   analytics: {
     vercel: true,

apps/docs/components/Logo.astro

@@ -1,4 +1,6 @@
 ---
+import mobileLogoSvg from "./logo-text.svg?raw";
+
 interface LogoData {
   alt: string;
   dark?: string;
@@ -22,14 +24,17 @@ const logoDark = logo?.dark ?? logo?.light;
 ---
 
 <a
-  class="inline-flex min-w-0 items-center gap-2 font-semibold text-base text-foreground"
+  aria-label={brandText}
+  class="inline-flex items-center font-semibold text-base text-foreground"
+  data-docs-logo
   href={brandHref}
 >
   {
     logoSvg && (
       <span
         aria-hidden="true"
-        class="hidden h-5 shrink-0 items-center md:inline-flex [&>svg]:h-5 [&>svg]:w-auto"
+        class="hidden h-8 shrink-0 items-center md:inline-flex [&>svg]:h-8 [&>svg]:w-auto"
+        data-docs-logo-graphic
         set:html={logoSvg}
       />
     )
@@ -38,14 +43,24 @@ const logoDark = logo?.dark ?? logo?.light;
     !logoSvg &&
       logoLight &&
       (logoLight === logoDark ? (
-        <img alt={logo?.alt ?? ""} class="hidden h-5 w-auto md:block" src={logoLight} />
+        <img alt={logo?.alt ?? ""} class="hidden h-8 w-auto md:block" src={logoLight} />
       ) : (
         <>
-          <img alt={logo?.alt ?? ""} class="hidden h-5 w-auto dark:hidden md:block" src={logoLight} />
-          <img alt={logo?.alt ?? ""} class="hidden h-5 w-auto dark:md:block" src={logoDark} />
+          <img alt={logo?.alt ?? ""} class="hidden h-8 w-auto dark:hidden md:block" src={logoLight} />
+          <img alt={logo?.alt ?? ""} class="hidden h-8 w-auto dark:md:block" src={logoDark} />
         </>
       ))
   }
-  {brandText && <span class="hidden truncate md:inline">{brandText}</span>}
-  <span class="truncate md:hidden">Intersection Observer</span>
+  {
+    logoSvg ? (
+      <span
+        aria-hidden="true"
+        class="hidden h-8 shrink-0 items-center md:hidden [&>svg]:h-8 [&>svg]:w-auto"
+        data-docs-logo-mobile
+        set:html={mobileLogoSvg}
+      />
+    ) : (
+      <span class="whitespace-nowrap md:hidden">{brandText}</span>
+    )
+  }
 </a>

apps/docs/components/logo-text.svg

@@ -0,0 +1,19 @@
+@media (max-width: 29.999rem) {
+  [data-blume-header] > .flex.items-center.gap-2 {
+    display: none;
+  }
+
+  [data-docs-logo] {
+    flex: none;
+  }
+
+  [data-docs-logo-mobile] {
+    display: inline-flex;
+  }
+}
+
+@media (min-width: 30rem) and (max-width: 47.999rem) {
+  [data-docs-logo-graphic] {
+    display: inline-flex;
+  }
+}