@knitli/docs-components

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

npm install @knitli/docs-components
# or
bun add @knitli/docs-components

Usage

Quick Start with Starlight

// astro.config.mjs
import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";

export default defineConfig({
  integrations: [
    starlight({
      title: "Your Product Docs",
      components: {
        Header: "@knitli/docs-components/DocsHeader.astro",
      },
      customCss: ["@knitli/docs-components/styles/theme.css"],
    }),
  ],
});

Components

DocsHeader.astro

Branded header with Knitli logo, product navigation, and breadcrumbs.

Props:

interface Props {
  currentProduct?: "Recoco" | "CodeWeaver" | "Thread"; // Current product being documented
  currentPath?: string; // Current URL path
  productUrl?: string; // URL to product docs home
  showBreadcrumb?: boolean; // Show breadcrumb navigation (default: true)
  variant?: "default" | "minimal"; // Visual variant (default: 'default')
}

Features:

• Environment-aware URLs (dev vs production)
• Sticky positioning with copper accent line
• Responsive mobile menu
• Accessible navigation with ARIA labels
• Cross-site navigation to Main Site, Blog, GitHub

Example:

---
import DocsHeader from '@knitli/docs-components/DocsHeader.astro';
const { pathname } = Astro.url;
---

<DocsHeader
  currentProduct="Recoco"
  currentPath={pathname}
  productUrl="/Recoco"
  showBreadcrumb={true}
/>

DocsFooter.astro

Simple footer with cross-site links and copyright notice.

Props:

interface Props {
  variant?: "default" | "minimal"; // Visual variant (default: 'default')
}

Features:

• Cross-site navigation links (default variant)
• Copyright notice with current year
• License information
• Minimal variant for compact layouts

Example:

---
import DocsFooter from '@knitli/docs-components/DocsFooter.astro';
---

<DocsFooter variant="default" />

DocsBreadcrumb.astro

Optional standalone breadcrumb component for product-specific navigation.

Props:

interface Props {
  product?: "Recoco" | "CodeWeaver" | "Thread"; // Product name
  productUrl?: string; // URL to product docs home
  path?: string; // Current path within product docs
  variant?: "default" | "compact"; // Visual variant (default: 'default')
}

Features:

• Automatic path segment parsing
• Semantic HTML with <nav> and <ol>
• ARIA current page indicator
• Responsive compact mode

Example:

---
import DocsBreadcrumb from '@knitli/docs-components/DocsBreadcrumb.astro';
---

<DocsBreadcrumb
  product="Recoco"
  productUrl="/Recoco"
  path="/getting-started/installation"
  variant="default"
/>

Styles

• styles/theme.css - Complete Copper Archive theme with all visual elements
• styles/copper.css - Just the copper color scheme
• styles/variables.css - CSS custom properties only

Logos

Logo assets are available at `@knitli/docs-components/logos/:

• knitli-logo.svg - Standard Knitli logo
• knitli-logo-copper.svg - Copper variant for docs theme

Environment Configuration

Components automatically adapt URLs based on environment.

.env.development:

PUBLIC_MARKETING_URL=http://localhost:4321
PUBLIC_BLOG_URL=http://localhost:4322
PUBLIC_DOCS_URL=http://localhost:4323

Production (automatic):

• Marketing: https://knitli.com
• Blog: https://blog.knitli.com
• Docs: https://docs.knitli.com

Customization

Override CSS variables in your custom.css:

:root {
  --docs-copper: oklch(0.6 0.1 50); /* Custom copper shade */
  --docs-slate: oklch(0.3 0.02 240); /* Darker slate */
  --docs-parchment: oklch(0.96 0.015 70); /* Background color */
}

Copper Archive Aesthetic

The Copper Archive theme bridges Knitli's warmth with technical documentation's utilitarian purpose. Key design elements:

• Color: Copper (#b56c30) as primary accent
• Typography: DM Mono (headings), IBM Plex Serif (body), JetBrains Mono (code)
• Visual Elements: Copper corner brackets, embossed shadows, paper grain texture

Development

# Build package
bun run build

# Publish (requires npm login)
npm publish

Changelog

See CHANGELOG.md