Update package logo

 Added the logo to the version landing page and kept it theme-aware.

  What changed:

  - Inserted the brand logo above the hero title in metbit/docs/app/docs/[version]/page.tsx:29.
  - Fixed the logo component so light theme uses Metbit-logo-light-mode.svg and dark theme uses Metbit-logo-dark-mode.svg in metbit/docs/app/components/MetbitMark.tsx:1.
  - Added sizing for the hero placement in metbit/docs/app/globals.css:286.
  - Kept the topbar brand accessible with an explicit label in metbit/docs/app/components/VersionedDocsShell.tsx:60.

  Verified:

  - npm run lint passed.
  - npm run build passed.

  Updated:

  - Increased the top-left logo size in the header.
  - Shifted the Install / User Guide / API / Release history nav closer to the logo by tightening topbar spacing.
  - Expanded the left sidebar width.
  - Made the left sidebar extend with the full page instead of stopping at the viewport.
  - Widened the main content/footer canvas so the page carries through to the footer more naturally.

  Key CSS changes are in metbit/docs/app/globals.css:264.

  Verified:

  - npm run lint passed.
  - npm run build passed.

Author: aeiwz

docs/README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="public/logo/Metbit-logo-only.svg" alt="metbit" width="180" />
+</p>
+
 # metbit documentation site
 
 This is the Next.js documentation app for `metbit`. It provides release-specific

docs/app/components/MetbitMark.tsx

@@ -1,8 +1,26 @@
+import Image from 'next/image'
+
 export default function MetbitMark() {
   return (
-    <svg className="metbitMark" viewBox="0 0 44 30" role="img" aria-label="metbit">
-      <path d="M2 26h40" />
-      <path d="M5 26V20M10 26V13M15 26V4M20 26V17M25 26V9M30 26V21M35 26V15M40 26V23" />
-    </svg>
+    <span className="metbitLogo" aria-hidden="true">
+      <Image
+        className="metbitLogoImage metbitLogoLight"
+        src="/logo/Metbit-logo-light-mode.svg"
+        alt=""
+        aria-hidden="true"
+        fill
+        sizes="126px"
+        unoptimized
+      />
+      <Image
+        className="metbitLogoImage metbitLogoDark"
+        src="/logo/Metbit-logo-dark-mode.svg"
+        alt=""
+        aria-hidden="true"
+        fill
+        sizes="126px"
+        unoptimized
+      />
+    </span>
   )
 }

docs/app/components/VersionedDocsShell.tsx

@@ -57,9 +57,12 @@ export default function VersionedDocsShell({
   return (
     <div className="versionedDocs">
       <header className="docsTopbar">
-        <Link className="docsBrand" href={`/docs/${encodeURIComponent(release.tag)}`}>
+        <Link
+          className="docsBrand"
+          href={`/docs/${encodeURIComponent(release.tag)}`}
+          aria-label="metbit documentation home"
+        >
           <MetbitMark />
-          <span>metbit</span>
         </Link>
         <nav className="primaryDocsNav" aria-label="Primary documentation">
           <Link href={`/docs/${encodeURIComponent(release.tag)}/getting-started`}>Install</Link>

docs/app/docs/[version]/page.tsx

@@ -3,6 +3,7 @@ import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { FiActivity, FiArrowRight, FiDatabase, FiLayers, FiSettings } from 'react-icons/fi'
 
+import MetbitMark from '../../components/MetbitMark'
 import { formatDate, getRelease, getSnapshot, moduleHref } from '@/lib/versioned-docs'
 
 export async function generateMetadata({
@@ -27,6 +28,9 @@ export default async function VersionOverview({
 
   return (
     <article className="referencePage" id="top">
+      <div className="referenceHeroBrand">
+        <MetbitMark />
+      </div>
       <div className="breadcrumbs">Documentation / {release.tag}</div>
       <div className="versionNotice">
         You are viewing metbit {release.version}, published {formatDate(release.publishedAt)}.

docs/app/globals.css

@@ -267,7 +267,7 @@ main { max-width: 980px; margin: 24px auto; padding: 0 16px; }
   display: grid;
   grid-template-columns: auto auto minmax(220px, 1fr) auto auto auto;
   align-items: center;
-  gap: 22px;
+  gap: 14px;
   height: 64px;
   padding: 0 28px;
   color: #edf7fa;
@@ -279,20 +279,49 @@ main { max-width: 980px; margin: 24px auto; padding: 0 16px; }
 .docsBrand {
   display: inline-flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
   color: #fff;
-  font-size: 1.38rem;
-  font-weight: 760;
-  letter-spacing: -0.035em;
 }
 
-.metbitMark {
-  width: 40px;
-  height: 28px;
-  fill: none;
-  stroke: #48c8cf;
-  stroke-width: 2.4;
-  stroke-linecap: round;
+.docsBrand .metbitLogo {
+  width: 154px;
+  height: 40px;
+}
+
+.metbitLogo {
+  position: relative;
+  display: block;
+  width: 126px;
+  height: 34px;
+  flex: 0 0 auto;
+}
+
+.referenceHeroBrand {
+  margin: 0 0 22px;
+}
+
+.referenceHeroBrand .metbitLogo {
+  width: 260px;
+  height: 70px;
+}
+
+.metbitLogoImage {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: left center;
+  display: none;
+}
+
+:root[data-theme="light"] .metbitLogoLight,
+:root:not([data-theme]) .metbitLogoLight {
+  display: block;
+}
+
+:root[data-theme="dark"] .metbitLogoDark {
+  display: block;
 }
 
 .primaryDocsNav {
@@ -415,17 +444,17 @@ main { max-width: 980px; margin: 24px auto; padding: 0 16px; }
 
 .docsWorkspace {
   display: grid;
-  grid-template-columns: 284px minmax(0, 1fr) 190px;
+  grid-template-columns: 352px minmax(0, 1fr) 220px;
+  align-items: stretch;
   min-height: calc(100vh - 64px);
 }
 
 .docsSidebar {
   position: sticky;
   top: 64px;
-  align-self: start;
-  height: calc(100vh - 64px);
-  overflow-y: auto;
-  padding: 24px 20px 30px;
+  align-self: stretch;
+  min-height: calc(100vh - 64px);
+  padding: 28px 26px 30px;
   background: var(--docs-sidebar);
   border-right: 1px solid var(--border);
 }
@@ -482,12 +511,12 @@ main { max-width: 980px; margin: 24px auto; padding: 0 16px; }
 
 .docsMain {
   min-width: 0;
-  padding: 42px clamp(28px, 5vw, 76px) 80px;
+  padding: 42px clamp(32px, 4vw, 88px) 80px;
   background: var(--card);
 }
 
 .referencePage {
-  width: min(100%, 880px);
+  width: min(100%, 1100px);
   margin: 0 auto;
   color: var(--text);
   line-height: 1.68;
@@ -687,7 +716,7 @@ main { max-width: 980px; margin: 24px auto; padding: 0 16px; }
   top: 64px;
   align-self: start;
   height: calc(100vh - 64px);
-  padding: 38px 24px;
+  padding: 38px 26px;
   border-left: 1px solid var(--border);
   background: var(--card);
 }
@@ -708,7 +737,7 @@ main { max-width: 980px; margin: 24px auto; padding: 0 16px; }
 .docsMobileFooter { display: none; }
 
 .downloadFooter {
-  width: min(100%, 880px);
+  width: min(100%, 1100px);
   margin: 72px auto 0;
   padding: 28px 0 6px;
   color: var(--text);
@@ -816,7 +845,7 @@ main { max-width: 980px; margin: 24px auto; padding: 0 16px; }
 @media (max-width: 1180px) {
   .docsTopbar { grid-template-columns: auto minmax(220px, 1fr) auto auto auto; }
   .primaryDocsNav { display: none; }
-  .docsWorkspace { grid-template-columns: 260px minmax(0, 1fr); }
+  .docsWorkspace { grid-template-columns: 308px minmax(0, 1fr); }
   .docsToc { display: none; }
 }
 
@@ -838,7 +867,8 @@ main { max-width: 980px; margin: 24px auto; padding: 0 16px; }
     position: relative;
     top: auto;
     height: auto;
-    padding: 12px 16px;
+    min-height: 0;
+    padding: 12px 18px;
     border-right: 0;
     border-bottom: 1px solid var(--border);
   }
@@ -847,6 +877,7 @@ main { max-width: 980px; margin: 24px auto; padding: 0 16px; }
   .docsMain { padding: 30px 20px 70px; }
   .referencePage { max-width: 100%; overflow-wrap: anywhere; }
   .referencePage h1 { font-size: 2rem; }
+  .referenceHeroBrand .metbitLogo { width: 200px; height: 54px; }
   .quickActions { flex-wrap: wrap; }
   .releaseTable > div { grid-template-columns: 1fr; }
   .releaseTable > div > a:first-child { justify-content: space-between; }

docs/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.