@knitli/docs-components 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -1,14 +1,10 @@
-# Changelog
+### Changelog
 
-All notable changes to this project will be documented in this file.
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-## [Unreleased]
+#### 1.0.4
 
-### Added
-- Initial package structure
-- DocsHeader component with Knitli branding
-- Copper Archive CSS theme
-- Logo assets and usage guide
+- chore: Updated licensing and README to clarify difference between Knitli brand assets (proprietary) and the rest of the project (MIT OR Apache-2.0).
+- chore: Updated configuration and tsconfig

package/README.md

@@ -1,6 +1,16 @@
 # @knitli/docs-components
 
-Shared branded components for Knitli documentation sites. This package is **not licensed**, which means you cannot include its components in your project without Knitli's written authorization. For license inquiries, contact <license_request@knitli.com>
+Shared branded components for Knitli documentation sites.
+
+## License
+
+### Knitli Brand Assets
+
+This package includes Knitli brand assets, such as the Knitli logo. These are proprietary and not licensed. You may not use or modify them in any way without Knitli's written permission. 
+
+### Other Materials
+
+All other materials in this package are licensed under either the Apache-2.0 or MIT license. You can choose either.
 
 ## Installation
 
@@ -203,8 +213,4 @@ npm publish
 
 ## Changelog
 
-See [CHANGELOG.md](./CHANGELOG.md)
-
-## License
-
-Not licensed.
+See [CHANGELOG.md](./CHANGELOG.md)

package/package.json

@@ -1,11 +1,23 @@
 {
   "author": "Knitli Inc.",
   "description": "Shared branded components for Knitli documentation sites",
+  "dependencies": {
+    "astro": "catalog:astro-core",
+    "lightningcss": "catalog:optimization",
+    "svgo": "catalog:optimization"
+
+  },
   "devDependencies": {
-    "@types/node": "^24.0.0",
-    "astro": "^5.17.0",
+    "astro": "catalog:astro-core",
     "auto-changelog": "^2.4.0",
-    "typescript": "^5.3.0"
+    "typescript": "catalog:dev-common",
+    "bun": "catalog:dev-common",
+    "@biomejs/biome": "catalog:dev-common",
+    "@types/node": "catalog:types",
+    "@knitli/tsconfig": "*"
+  },
+  "engine": {
+    "node": ">=24.0.0"
   },
   "exports": {
     ".": "./dist/index.js",
@@ -31,7 +43,7 @@
     "components",
     "starlight"
   ],
-  "license": "LicenseRef-Not_Licensed",
+  "license": "(MIT OR Apache-2.0) AND LicenseRef-KnitliProprietary",
   "main": "./dist/index.js",
   "name": "@knitli/docs-components",
   "peerDependencies": {
@@ -43,11 +55,12 @@
     "url": "git+https://github.com/knitli/knitli-site.git"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "bunx tsc",
     "prepublishOnly": "bun run build",
-    "version": "auto-changelog -p && git add CHANGELOG.md"
+    "version": "auto-changelog -p && git add CHANGELOG.md",
+    "publish": "bun publish --access public"
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.2"
+  "version": "1.0.4"
 }

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>

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export * from './types/index.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA,cAAc,kBAAkB,CAAC"}

package/dist/index.js

@@ -1,13 +0,0 @@
-// SPDX-FileCopyrightText: 2025 Knitli Inc.
-// SPDX-FileContributor: Adam Poulemanos <adam@knit.li>
-//
-// SPDX-License-Identifier: MIT OR Apache-2.0
-//
-// Main exports for @knitli/docs-components package
-// Export type definitions
-export * from './types/index.js';
-// Components are exported via package.json exports field
-// Import them directly:
-// import DocsHeader from '@knitli/docs-components/DocsHeader.astro';
-// import DocsFooter from '@knitli/docs-components/DocsFooter.astro';
-// import DocsBreadcrumb from '@knitli/docs-components/DocsBreadcrumb.astro';

package/dist/types/index.d.ts

@@ -1,72 +0,0 @@
-/**
- * Supported Knitli products for documentation
- */
-export type ProductName = 'ReCoco' | 'CodeWeaver' | 'Thread';
-/**
- * Site URLs configuration
- */
-export interface SiteUrls {
-    marketing: string;
-    blog: string;
-    docs: string;
-}
-/**
- * Props for DocsHeader component
- */
-export interface DocsHeaderProps {
-    /**
-     * Current product being documented
-     */
-    currentProduct?: ProductName;
-    /**
-     * Current URL path
-     */
-    currentPath?: string;
-    /**
-     * URL to the product's documentation home
-     */
-    productUrl?: string;
-    /**
-     * Whether to show breadcrumb navigation
-     * @default true
-     */
-    showBreadcrumb?: boolean;
-    /**
-     * Visual variant of the header
-     * @default 'default'
-     */
-    variant?: 'default' | 'minimal';
-}
-/**
- * Props for DocsFooter component
- */
-export interface DocsFooterProps {
-    /**
-     * Visual variant of the footer
-     * @default 'default'
-     */
-    variant?: 'default' | 'minimal';
-}
-/**
- * Props for DocsBreadcrumb component
- */
-export interface DocsBreadcrumbProps {
-    /**
-     * Current product name
-     */
-    product?: ProductName;
-    /**
-     * URL to the product's documentation home
-     */
-    productUrl?: string;
-    /**
-     * Current path within the product docs
-     */
-    path?: string;
-    /**
-     * Visual variant of the breadcrumb
-     * @default 'default'
-     */
-    variant?: 'default' | 'compact';
-}
-//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAOA;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,YAAY,GAAG,QAAQ,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC"}

package/dist/types/index.js

@@ -1,7 +0,0 @@
-// SPDX-FileCopyrightText: 2025 Knitli Inc.
-// SPDX-FileContributor: Adam Poulemanos <adam@knit.li>
-//
-// SPDX-License-Identifier: MIT OR Apache-2.0
-//
-// TypeScript type definitions for docs-components package
-export {};