@knitli/docs-components 1.0.2 → 1.0.3

package/package.json

@@ -49,5 +49,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.2"
+  "version": "1.0.3"
 }

package/src/components/DocsHeader.astro

@@ -1,27 +1,6 @@
 ---
-// SPDX-FileCopyrightText: 2025 Knitli Inc.
-// SPDX-FileContributor: Adam Poulemanos <adam@knit.li>
-//
-// SPDX-License-Identifier: MIT OR Apache-2.0
-//
-// Main branded header for Knitli documentation sites
-// Provides navigation, branding, and breadcrumb support
-
-interface Props {
-  currentProduct?: 'ReCoco' | 'CodeWeaver' | 'Thread';
-  currentPath?: string;
-  productUrl?: string;
-  showBreadcrumb?: boolean;
-  variant?: 'default' | 'minimal';
-}
-
-const {
-  currentProduct,
-  currentPath = '',
-  productUrl = '',
-  showBreadcrumb = true,
-  variant = 'default',
-} = Astro.props;
+// Custom header with actual Knitli logo
+const { pathname } = Astro.url;
 
 // Environment-aware URL configuration
 const isDev = import.meta.env.DEV;
@@ -43,49 +22,29 @@ const getSiteUrls = () => {
 };
 
 const urls = getSiteUrls();
-const isDocsHome = currentPath === '/' || currentPath === '';
-const shouldShowBreadcrumb = showBreadcrumb && !isDocsHome && currentProduct;
+const isDocsHome = pathname === '/' || pathname === '';
+const shouldShowBreadcrumb = !isDocsHome;
+
 ---
 
-<header class:list={['docs-header', { minimal: variant === 'minimal' }]}>
+<header class="docs-header">
   <div class="docs-header-content">
     <!-- Knitli Logo + Docs Section -->
     <a href={urls.marketing} class="docs-logo" aria-label="Knitli home">
-      <svg class="logo-icon" width="32" height="32" viewBox="0 0 100 100" fill="none" aria-hidden="true">
-        <!-- Simplified Knitli knot icon -->
-        <circle cx="50" cy="50" r="35" fill="var(--docs-copper)" opacity="0.15"/>
-        <path
-          d="M50 20 L50 50 L65 50"
-          stroke="var(--docs-slate)"
-          stroke-width="4"
-          fill="none"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M35 50 L50 50 L50 80"
-          stroke="var(--docs-slate)"
-          stroke-width="4"
-          fill="none"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <circle cx="50" cy="50" r="6" fill="var(--docs-copper)"/>
-      </svg>
+      <img src={`${import.meta.env.BASE_URL}/knitli-logo.svg`} alt="Knitli" class="logo-icon" />
       <span class="logo-text">
-        <span class="logo-brand">Knitli</span>
         <span class="logo-separator">/</span>
         <span class="logo-section">docs</span>
       </span>
     </a>
 
-    <!-- Breadcrumb (if not on docs home and product specified) -->
+    <!-- Breadcrumb -->
     {shouldShowBreadcrumb && (
       <nav class="docs-breadcrumb" aria-label="Breadcrumb">
         <a href="/">Documentation</a>
         <span class="breadcrumb-separator" aria-hidden="true">→</span>
-        <a href={productUrl || `/${currentProduct}`} class="breadcrumb-product">
-          {currentProduct}
+        <a href="/ReCoco" class="breadcrumb-product">
+          ReCoco
         </a>
       </nav>
     )}
@@ -122,28 +81,13 @@ const shouldShowBreadcrumb = showBreadcrumb && !isDocsHome && currentProduct;
 </header>
 
 <style>
-  :root {
-    --docs-copper: oklch(0.58 0.08 50); /* #b56c30 */
-    --docs-slate: oklch(0.35 0.02 240); /* #485563 */
-    --docs-parchment: oklch(0.96 0.015 70);
-  }
-
   .docs-header {
-    background: var(--docs-parchment);
-    border-bottom: 1px solid oklch(0.85 0.01 50);
+    background: white;
+    border-bottom: 1px solid #e5e7eb;
+    border-radius: 0 0 6px 2px; /* Chamfered bottom corners only */
     position: sticky;
     top: 0;
     z-index: 100;
-
-    /* Copper accent line */
-    box-shadow:
-      inset 0 -2px 0 var(--docs-copper),
-      0 1px 3px rgba(0, 0, 0, 0.05);
-  }
-
-  .docs-header.minimal {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-    border-bottom: 1px solid oklch(0.90 0.01 60);
   }
 
   .docs-header-content {
@@ -158,7 +102,7 @@ const shouldShowBreadcrumb = showBreadcrumb && !isDocsHome && currentProduct;
   .docs-logo {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: 0.5rem;
     text-decoration: none;
     transition: opacity 0.2s ease;
   }
@@ -168,48 +112,45 @@ const shouldShowBreadcrumb = showBreadcrumb && !isDocsHome && currentProduct;
   }
 
   .logo-icon {
+    height: 32px;
+    width: auto;
     flex-shrink: 0;
   }
 
   .logo-text {
-    font-family: "DM Mono", "Roboto Mono", "Courier New", monospace;
+    font-family: system-ui, -apple-system, sans-serif;
     font-size: 1.125rem;
     font-weight: 600;
     line-height: 1;
-  }
-
-  .logo-brand {
-    color: var(--docs-slate);
+    color: #374151;
   }
 
   .logo-separator {
-    color: var(--docs-copper);
-    opacity: 0.5;
-    margin: 0 0.25rem;
+    color: #9ca3af;
+    margin: 0 0.5rem;
   }
 
   .logo-section {
-    color: var(--docs-copper);
+    color: #6b7280;
   }
 
   .docs-breadcrumb {
     display: flex;
     align-items: center;
+    align-self: flex-end;
     gap: 0.5rem;
-    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
     font-size: 0.875rem;
-    color: var(--docs-slate);
-    opacity: 0.7;
+    color: #6b7280;
   }
 
   .docs-breadcrumb a {
     color: inherit;
     text-decoration: none;
-    transition: opacity 0.2s ease;
+    transition: color 0.2s ease;
   }
 
   .docs-breadcrumb a:hover {
-    opacity: 1;
+    color: #111827;
     text-decoration: underline;
   }
 
@@ -219,7 +160,7 @@ const shouldShowBreadcrumb = showBreadcrumb && !isDocsHome && currentProduct;
 
   .breadcrumb-product {
     font-weight: 500;
-    opacity: 1;
+    color: #111827;
   }
 
   .spacer {
@@ -233,33 +174,20 @@ const shouldShowBreadcrumb = showBreadcrumb && !isDocsHome && currentProduct;
   }
 
   .docs-nav a {
-    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
     font-size: 0.9375rem;
-    color: var(--docs-slate);
+    color: #374151;
     text-decoration: none;
     position: relative;
     padding: 0.25rem 0;
     transition: color 0.2s ease;
   }
 
-  .docs-nav a::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 0;
-    height: 1px;
-    background: var(--docs-copper);
-    transition: width 0.2s ease;
-  }
-
-  .docs-nav a:hover::after,
-  .docs-nav a.active::after {
-    width: 100%;
+  .docs-nav a:hover {
+    color: #111827;
   }
 
   .docs-nav a.active {
-    color: var(--docs-copper);
+    color: #111827;
     font-weight: 500;
   }
 
@@ -285,7 +213,6 @@ const shouldShowBreadcrumb = showBreadcrumb && !isDocsHome && currentProduct;
     .docs-breadcrumb {
       order: 3;
       width: 100%;
-      padding-left: 0;
     }
 
     .spacer {
@@ -297,32 +224,8 @@ const shouldShowBreadcrumb = showBreadcrumb && !isDocsHome && currentProduct;
       font-size: 0.875rem;
     }
 
-    .logo-text {
-      font-size: 1rem;
-    }
-  }
-
-  /* Tablet */
-  @media (min-width: 769px) and (max-width: 1024px) {
-    .docs-nav {
-      gap: 1.5rem;
-    }
-  }
-
-  /* Accessibility */
-  .docs-logo:focus-visible,
-  .docs-nav a:focus-visible,
-  .docs-breadcrumb a:focus-visible {
-    outline: 3px solid var(--docs-copper);
-    outline-offset: 4px;
-    border-radius: 4px;
-  }
-
-  /* Reduced motion */
-  @media (prefers-reduced-motion: reduce) {
-    * {
-      animation-duration: 0.01ms !important;
-      transition-duration: 0.01ms !important;
+    .logo-icon {
+      height: 28px;
     }
   }
 </style>