@knitli/docs-components 1.0.3 → 1.1.0

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,19 +1,34 @@
 {
   "author": "Knitli Inc.",
   "description": "Shared branded components for Knitli documentation sites",
+  "dependencies": {
+    "astro": "catalog:astro-core",
+    "lightningcss": "catalog:optimization",
+    "svgo": "catalog:optimization",
+    "@knitli/shared-layouts": "workspace:*",
+    "@knitli/shared-file-types": "workspace:*",
+    "@knitli/tsconfig": "workspace:*"
+
+  },
   "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",
+    "vitest": "catalog:dev-common",
+    "@biomejs/biome": "catalog:dev-common",
+    "@types/node": "catalog:types",
+    "@knitli/tsconfig": "*"
+  },
+  "engine": {
+    "node": "catalog:"
   },
   "exports": {
     ".": "./dist/index.js",
     "./DocsBreadcrumb.astro": "./src/components/DocsBreadcrumb.astro",
-    "./DocsFooter.astro": "./src/components/DocsFooter.astro",
-    "./DocsHeader.astro": "./src/components/DocsHeader.astro",
+    "./Footer.astro": "./src/components/Footer.astro",
+    "./PageFrame.astro": "./src/components/PageFrame.astro",
     "./logos/*": "./src/assets/logos/*",
-    "./styles/copper.css": "./src/styles/copper-archive.css",
     "./styles/theme.css": "./src/styles/docs-theme.css",
     "./styles/variables.css": "./src/styles/variables.css"
   },
@@ -31,10 +46,11 @@
     "components",
     "starlight"
   ],
-  "license": "LicenseRef-Not_Licensed",
+  "license": "(MIT OR Apache-2.0) AND LicenseRef-KnitliProprietary",
   "main": "./dist/index.js",
   "name": "@knitli/docs-components",
   "peerDependencies": {
+    "@astrojs/starlight": ">=0.30.0",
     "astro": "^5.0.0"
   },
   "repository": {
@@ -43,11 +59,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.3"
+  "version": "1.1.0"
 }

package/src/components/DocsBreadcrumb.astro

@@ -3,19 +3,18 @@
 // SPDX-FileContributor: Adam Poulemanos <adam@knit.li>
 //
 // SPDX-License-Identifier: MIT OR Apache-2.0
-//
-// Optional breadcrumb component for product-specific navigation
 
 interface Props {
   product?: 'ReCoco' | 'CodeWeaver' | 'Thread';
   productUrl?: string;
   path?: string;
-  variant?: 'default' | 'compact';
+  /** 'inline' — no padding, designed for embedding in a subnav bar */
+  variant?: 'default' | 'compact' | 'inline';
 }
 
 const {
   product,
-  productUrl = product ? `/${product}` : '',
+  productUrl = '/',
   path = '',
   variant = 'default',
 } = Astro.props;
@@ -24,40 +23,39 @@ const {
 const segments = path
   .split('/')
   .filter(Boolean)
-  .map((segment) => ({
+  .map((segment, index, all) => ({
     name: segment.replace(/-/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase()),
-    path: segment,
+    href: `${productUrl}${all.slice(0, index + 1).join('/')}`,
+    isLast: index === all.length - 1,
   }));
 ---
 
 {product && (
   <nav
-    class:list={['docs-breadcrumb-nav', { compact: variant === 'compact' }]}
+    class:list={['docs-breadcrumb-nav', variant]}
     aria-label="Breadcrumb"
   >
     <ol class="breadcrumb-list">
       <li class="breadcrumb-item">
-        <a href="/">Documentation</a>
+        <a href="https://docs.knitli.com">Documentation</a>
       </li>
 
-      <li class="breadcrumb-separator" aria-hidden="true">→</li>
+      <li class="breadcrumb-separator" aria-hidden="true">›</li>
 
       <li class="breadcrumb-item">
-        {productUrl ? (
+        {segments.length > 0 ? (
           <a href={productUrl}>{product}</a>
         ) : (
-          <span class="breadcrumb-current">{product}</span>
+          <span class="breadcrumb-current" aria-current="page">{product}</span>
         )}
       </li>
 
-      {segments.map((segment, index) => (
+      {segments.map((segment) => (
         <>
-          <li class="breadcrumb-separator" aria-hidden="true">→</li>
+          <li class="breadcrumb-separator" aria-hidden="true">›</li>
           <li class="breadcrumb-item">
-            {index < segments.length - 1 ? (
-              <a href={`${productUrl}/${segments.slice(0, index + 1).map((s) => s.path).join('/')}`}>
-                {segment.name}
-              </a>
+            {!segment.isLast ? (
+              <a href={segment.href}>{segment.name}</a>
             ) : (
               <span class="breadcrumb-current" aria-current="page">
                 {segment.name}
@@ -71,83 +69,82 @@ const segments = path
 )}
 
 <style>
-  :root {
-    --docs-copper: oklch(0.58 0.08 50);
-    --docs-slate: oklch(0.35 0.02 240);
-    --docs-parchment: oklch(0.96 0.015 70);
+  .docs-breadcrumb-nav {
+    font-size: var(--sl-text-xs);
   }
 
-  .docs-breadcrumb-nav {
+  .docs-breadcrumb-nav.default {
     padding: 1rem 0;
-    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
   }
 
   .docs-breadcrumb-nav.compact {
     padding: 0.5rem 0;
   }
 
+  /* inline: no padding, fits inside a subnav bar */
+  .docs-breadcrumb-nav.inline {
+    padding: 0;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    min-width: 0;
+    overflow: hidden;
+  }
+
   .breadcrumb-list {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.35rem;
     list-style: none;
     margin: 0;
     padding: 0;
+    min-width: 0;
+    overflow: hidden;
   }
 
   .breadcrumb-item {
-    font-size: 0.875rem;
+    font-size: inherit;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* Only ellipsis the last item — earlier ones can wrap/hide naturally */
+  .breadcrumb-item:last-child {
+    min-width: 0;
   }
 
   .breadcrumb-item a {
-    color: var(--docs-slate);
+    color: var(--sl-color-gray-3);
     text-decoration: none;
-    opacity: 0.7;
-    transition: all 0.2s ease;
+    transition: color 0.15s ease;
   }
 
   .breadcrumb-item a:hover {
-    opacity: 1;
-    text-decoration: underline;
-    color: var(--docs-copper);
+    color: var(--sl-color-gray-1);
+    text-decoration: none;
   }
 
   .breadcrumb-current {
-    color: var(--docs-slate);
+    color: var(--sl-color-gray-2);
     font-weight: 500;
   }
 
   .breadcrumb-separator {
-    color: var(--docs-slate);
-    opacity: 0.4;
-    font-size: 0.875rem;
-  }
-
-  /* Mobile Responsive */
-  @media (max-width: 768px) {
-    .breadcrumb-list {
-      gap: 0.375rem;
-      font-size: 0.8125rem;
-    }
-
-    .breadcrumb-item,
-    .breadcrumb-separator {
-      font-size: 0.8125rem;
-    }
+    color: var(--sl-color-gray-5);
+    font-size: inherit;
+    flex-shrink: 0;
   }
 
-  /* Accessibility */
   .breadcrumb-item a:focus-visible {
-    outline: 3px solid var(--docs-copper);
-    outline-offset: 4px;
-    border-radius: 4px;
+    outline: 2px solid var(--sl-color-accent);
+    outline-offset: 2px;
+    border-radius: 2px;
   }
 
-  /* Reduced motion */
   @media (prefers-reduced-motion: reduce) {
-    * {
-      animation-duration: 0.01ms !important;
+    .breadcrumb-item a {
       transition-duration: 0.01ms !important;
     }
   }

package/src/components/DocsFooter.astro

@@ -1,181 +1,8 @@
 ---
-// SPDX-FileCopyrightText: 2025 Knitli Inc.
-// SPDX-FileContributor: Adam Poulemanos <adam@knit.li>
-//
-// SPDX-License-Identifier: MIT OR Apache-2.0
-//
-// Simple footer for Knitli documentation sites
-
-interface Props {
-  variant?: 'default' | 'minimal';
-}
-
-const { variant = 'default' } = Astro.props;
-
-// Environment-aware URL configuration
-const isDev = import.meta.env.DEV;
-
-const getSiteUrls = () => {
-  if (isDev) {
-    return {
-      marketing: import.meta.env.PUBLIC_MARKETING_URL || 'http://localhost:4321',
-      blog: import.meta.env.PUBLIC_BLOG_URL || 'http://localhost:4322',
-      docs: import.meta.env.PUBLIC_DOCS_URL || 'http://localhost:4323',
-    };
-  }
-
-  return {
-    marketing: 'https://knitli.com',
-    blog: 'https://blog.knitli.com',
-    docs: 'https://docs.knitli.com',
-  };
-};
-
-const urls = getSiteUrls();
-const currentYear = new Date().getFullYear();
+// DEPRECATED — This component has been removed.
+// Use Footer.astro instead:
+//   starlight({ components: { Footer: '@knitli/docs-components/Footer.astro' } })
+throw new Error(
+  '@knitli/docs-components: DocsFooter has been removed. Use Footer.astro instead.'
+);
 ---
-
-<footer class:list={['docs-footer', { minimal: variant === 'minimal' }]}>
-  <div class="footer-content">
-    {variant === 'default' && (
-      <nav class="footer-nav" aria-label="Footer navigation">
-        <a href={urls.marketing}>Main Site</a>
-        <a href={urls.blog}>Blog</a>
-        <a href="https://github.com/knitli" target="_blank" rel="noopener noreferrer">
-          GitHub
-        </a>
-        <a href={`${urls.marketing}/privacy`}>Privacy</a>
-      </nav>
-    )}
-
-    <div class="footer-legal">
-      <p class="copyright">
-        © {currentYear} <a href={urls.marketing}>Knitli Inc.</a> All rights reserved.
-      </p>
-      {variant === 'default' && (
-        <p class="license">
-          Documentation licensed under{' '}
-          <a
-            href="https://github.com/knitli/knitli-site/blob/main/LICENSE"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            MIT OR Apache-2.0
-          </a>
-        </p>
-      )}
-    </div>
-  </div>
-</footer>
-
-<style>
-  :root {
-    --docs-copper: oklch(0.58 0.08 50);
-    --docs-slate: oklch(0.35 0.02 240);
-    --docs-parchment: oklch(0.96 0.015 70);
-  }
-
-  .docs-footer {
-    background: var(--docs-parchment);
-    border-top: 1px solid oklch(0.85 0.01 50);
-    margin-top: 4rem;
-    padding: 2rem 0;
-  }
-
-  .docs-footer.minimal {
-    margin-top: 2rem;
-    padding: 1rem 0;
-  }
-
-  .footer-content {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 0 2rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    align-items: center;
-  }
-
-  .footer-nav {
-    display: flex;
-    gap: 2rem;
-    align-items: center;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-
-  .footer-nav a {
-    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
-    font-size: 0.875rem;
-    color: var(--docs-slate);
-    text-decoration: none;
-    transition: color 0.2s ease;
-  }
-
-  .footer-nav a:hover {
-    color: var(--docs-copper);
-  }
-
-  .footer-legal {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    text-align: center;
-  }
-
-  .copyright,
-  .license {
-    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
-    font-size: 0.8125rem;
-    color: var(--docs-slate);
-    opacity: 0.7;
-    margin: 0;
-  }
-
-  .copyright a,
-  .license a {
-    color: inherit;
-    text-decoration: none;
-    transition: opacity 0.2s ease;
-  }
-
-  .copyright a:hover,
-  .license a:hover {
-    opacity: 1;
-    text-decoration: underline;
-  }
-
-  /* Mobile Responsive */
-  @media (max-width: 768px) {
-    .footer-content {
-      padding: 0 1rem;
-    }
-
-    .footer-nav {
-      gap: 1rem;
-      flex-direction: column;
-    }
-
-    .footer-legal {
-      font-size: 0.75rem;
-    }
-  }
-
-  /* Accessibility */
-  .footer-nav a:focus-visible,
-  .copyright a:focus-visible,
-  .license 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;
-    }
-  }
-</style>