@knitli/docs-components 1.3.4 → 1.3.5

package/dist/AllContributors-7n8pafkm.astro

@@ -0,0 +1,38 @@
+---
+// SPDX-FileCopyrightText: 2026 Knitli Inc.
+// SPDX-FileContributor: Adam Poulemanos <adam@knit.li>
+//
+// SPDX-License-Identifier: MIT OR Apache-2.0
+//
+// Knitli-branded wrapper around astro-contributors AllContributors grid.
+// Reads from .all-contributorsrc and pre-applies brand colors.
+//
+// Usage:
+//   <AllContributors />
+
+import { AllContributors as BaseAllContributors } from "astro-contributors";
+
+export interface Props {
+  /** Focus/accent color for hover outlines */
+  focusColor?: string;
+  /** Card background color */
+  bgColor?: string;
+  /** Card border color */
+  borderColor?: string;
+  /** Primary text color */
+  textColor?: string;
+  /** Contribution badge background color */
+  badgeBgColor?: string;
+  /** Contribution badge text color */
+  badgeTextColor?: string;
+}
+
+const {
+  focusColor = "var(--sl-color-accent, #ea5932)",
+  bgColor = "var(--sl-color-bg-nav, #f8f9fa)",
+  borderColor = "var(--sl-color-hairline, #e5e7eb)",
+  ...rest
+} = Astro.props;
+---
+
+<BaseAllContributors focusColor={focusColor} bgColor={bgColor} borderColor={borderColor} {...rest} />

package/dist/Contributors-he0tpj6t.astro

@@ -0,0 +1,30 @@
+---
+// SPDX-FileCopyrightText: 2026 Knitli Inc.
+// SPDX-FileContributor: Adam Poulemanos <adam@knit.li>
+//
+// SPDX-License-Identifier: MIT OR Apache-2.0
+//
+// Knitli-branded wrapper around astro-contributors ContributorList.
+// Pre-applies brand colors while allowing per-instance overrides.
+//
+// Usage:
+//   <Contributors githubRepo="knitli/recoco" />
+
+import { ContributorList } from "astro-contributors";
+
+export interface Props {
+  /** GitHub repo in "owner/repo" format */
+  githubRepo?: `${string}/${string}`;
+  /** Usernames to exclude from the list */
+  ignore?: string[];
+  /** Focus/accent color for hover states. Defaults to Knitli rust. */
+  focusColor?: string;
+}
+
+const {
+  focusColor = "var(--sl-color-accent, #ea5932)",
+  ...rest
+} = Astro.props;
+---
+
+<ContributorList focusColor={focusColor} {...rest} />

package/dist/DocsBreadcrumb-120137a7.astro

@@ -0,0 +1,152 @@
+---
+// SPDX-FileCopyrightText: 2025 Knitli Inc.
+// SPDX-FileContributor: Adam Poulemanos <adam@knit.li>
+//
+// SPDX-License-Identifier: MIT OR Apache-2.0
+
+interface Props {
+  /** Product name — validated against the product catalog */
+  product?: string;
+  productUrl?: string;
+  path?: string;
+  /** 'inline' — no padding, designed for embedding in a subnav bar */
+  variant?: "default" | "compact" | "inline";
+}
+
+const {
+  product,
+  productUrl = "/",
+  path = "",
+  variant = "default",
+} = Astro.props;
+
+// Parse path into segments for breadcrumb display
+const segments = path
+  .split("/")
+  .filter(Boolean)
+  .map((segment, index, all) => ({
+    name: segment.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
+    href: `${productUrl}${all.slice(0, index + 1).join("/")}/`,
+    isLast: index === all.length - 1,
+  }));
+---
+
+{product && (
+  <nav
+    class:list={['docs-breadcrumb-nav', variant]}
+    aria-label="Breadcrumb"
+  >
+    <ol class="breadcrumb-list">
+      <li class="breadcrumb-item">
+        <a href="https://docs.knitli.com">Documentation</a>
+      </li>
+
+      <li class="breadcrumb-separator" aria-hidden="true">›</li>
+
+      <li class="breadcrumb-item">
+        {segments.length > 0 ? (
+          <a href={productUrl}>{product}</a>
+        ) : (
+          <span class="breadcrumb-current" aria-current="page">{product}</span>
+        )}
+      </li>
+
+      {segments.map((segment) => (
+        <>
+          <li class="breadcrumb-separator" aria-hidden="true">›</li>
+          <li class="breadcrumb-item">
+            {!segment.isLast ? (
+              <a href={segment.href}>{segment.name}</a>
+            ) : (
+              <span class="breadcrumb-current" aria-current="page">
+                {segment.name}
+              </span>
+            )}
+          </li>
+        </>
+      ))}
+    </ol>
+  </nav>
+)}
+
+<style>
+.docs-breadcrumb-nav {
+  font-size: var(--sl-text-xs);
+}
+
+.docs-breadcrumb-nav.default {
+  padding: 1rem 0;
+}
+
+.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: nowrap;
+  align-items: center;
+  gap: 0.35rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.breadcrumb-item {
+  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(--sl-color-gray-3);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.breadcrumb-item a:hover {
+  color: var(--sl-color-gray-1);
+  text-decoration: none;
+}
+
+.breadcrumb-current {
+  color: var(--sl-color-gray-2);
+  font-weight: 500;
+}
+
+.breadcrumb-separator {
+  color: var(--sl-color-gray-5);
+  font-size: inherit;
+  flex-shrink: 0;
+}
+
+.breadcrumb-item a:focus-visible {
+  outline: 2px solid var(--sl-color-accent);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .breadcrumb-item a {
+    transition-duration: 0.01ms !important;
+  }
+}
+</style>

package/dist/Footer-eayrt0r3.astro

@@ -0,0 +1,269 @@
+---
+// SPDX-FileCopyrightText: 2025 Knitli Inc.
+// SPDX-FileContributor: Adam Poulemanos <adam@knit.li>
+//
+// SPDX-License-Identifier: MIT OR Apache-2.0
+//
+// Starlight Footer override for Knitli product documentation sites.
+// Renders Starlight's native page-level footer (edit link, last updated,
+// pagination, optional credits) followed by the Knitli site footer.
+//
+// Usage in astro.config.mjs:
+//   starlight({ components: { Footer: '@knitli/docs-components/Footer.astro' } })
+
+// @ts-expect-error: virtual modules are typed in virtual-internal.d.ts (not in Starlight's public exports map)
+import EditLink from "virtual:starlight/components/EditLink";
+// @ts-expect-error
+import LastUpdated from "virtual:starlight/components/LastUpdated";
+// @ts-expect-error
+import Pagination from "virtual:starlight/components/Pagination";
+// @ts-expect-error
+import config from "virtual:starlight/user-config";
+import { Icon } from "@astrojs/starlight/components";
+import { products } from "../data/products.js";
+
+const currentYear = new Date().getFullYear();
+
+const product = (import.meta.env.PUBLIC_DOCS_PRODUCT ?? "") as string;
+
+const shouldShowDocsHomeLink = Astro.url.pathname !== "/";
+---
+
+<footer class="sl-flex knitli-page-footer">
+  <!-- Starlight's native page-level footer: edit link, last updated, pagination, optional credits -->
+  <div class="sl-flex page-actions">
+    <div class="meta sl-flex">
+      <EditLink />
+      <LastUpdated />
+    </div>
+    <Pagination />
+    {config.credits && (
+			<a class="kudos sl-flex" href="https://starlight.astro.build">
+				
+				<Icon name="starlight" /> {
+				// @ts-ignore: 2339
+				Astro.locals.t('builtWithStarlight.label')}
+			</a>
+		)}
+  </div>
+
+  <!-- Knitli site footer -->
+  <div class="site-footer sl-flex">
+    <div class="footer-content sl-flex">
+      <div class="footer-brand">
+        <p class="copyright">
+          © {currentYear}Knitli, Inc. All rights reserved.
+        </p>
+        <div class="social-links sl-flex">
+          <a
+            href="https://github.com/knitli"
+            aria-label="GitHub"
+            class="social-link"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Icon name="github" size="1.1rem" />
+          </a>
+          <a
+            href="https://x.com/knitli_inc"
+            aria-label="X"
+            class="social-link"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Icon name="x.com" size="1.1rem" />
+          </a>
+          <a
+            href="https://bsky.app/profile/knitli.com"
+            aria-label="Bluesky"
+            class="social-link"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Icon name="blueSky" size="1.1rem" />
+          </a>
+          <a
+            href="https://linkedin.com/company/knitli"
+            aria-label="LinkedIn"
+            class="social-link"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Icon name="linkedin" size="1.1rem" />
+          </a>
+        </div>
+      </div>
+
+      <nav class="footer-nav" aria-label="Knitli">
+        <p class="nav-heading">Knitli</p>
+        <ul>
+          <li><a href="https://knitli.com">knitli.com</a></li>
+          <li><a href="https://blog.knitli.com">Blog</a></li>
+        </ul>
+      </nav>
+
+      <nav class="footer-nav" aria-label="Documentation">
+        <p class="nav-heading">Docs</p>
+        <ul>
+          {shouldShowDocsHomeLink && <li><a href="https://docs.knitli.com">Developer Docs</a></li>}
+          {products
+            .filter((p) => p.docsUrl)
+            .sort((a, b) => a.order - b.order)
+            .map((p) => (
+              <li key={p.name}>
+                {product === p.name ? (
+                  <span class="link-current">{p.name}</span>
+                ) : p.external ? (
+                  <a
+                    href={p.docsUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {p.name} ↗
+                  </a>
+                ) : (
+                  <a href={`https://docs.knitli.com/${p.slug}/`}>{p.name}</a>
+                )}
+              </li>
+            ))}
+        </ul>
+      </nav>
+    </div>
+  </div>
+</footer>
+
+<style>
+@layer starlight.core {
+  /* ---- Outer wrapper ---- */
+  .knitli-page-footer {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  /* ---- Starlight native page actions (replicated from Starlight's Footer) ---- */
+  .page-actions {
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .meta {
+    gap: 0.75rem 3rem;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-top: 3rem;
+    font-size: var(--sl-text-sm);
+    color: var(--sl-color-gray-3);
+  }
+
+  .meta > :global(p:only-child) {
+    margin-inline-start: auto;
+  }
+
+  .kudos {
+    align-items: center;
+    gap: 0.5em;
+    margin: 1.5rem auto;
+    font-size: var(--sl-text-xs);
+    text-decoration: none;
+    color: var(--sl-color-gray-3);
+  }
+
+  .kudos:hover {
+    color: var(--sl-color-white);
+  }
+
+  /* ---- Knitli site footer ---- */
+  .site-footer {
+    flex-direction: column;
+    border-top: 1px solid var(--sl-color-gray-5);
+    padding-top: 2rem;
+    margin-top: 2rem;
+    gap: 1.5rem;
+  }
+
+  .footer-content {
+    flex-wrap: wrap;
+    gap: 2rem 4rem;
+    align-items: flex-start;
+  }
+
+  .footer-brand {
+    flex: 1;
+    min-width: 200px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .copyright {
+    margin: 0;
+    font-size: var(--sl-text-sm);
+    color: var(--sl-color-gray-3);
+  }
+
+  .social-links {
+    gap: 0.75rem;
+    align-items: center;
+  }
+
+  .social-link {
+    display: flex;
+    align-items: center;
+    color: var(--sl-color-gray-3);
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+
+  .social-link:hover {
+    color: var(--sl-color-accent-high);
+  }
+
+  .footer-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .nav-heading {
+    margin: 0 0 0.5rem;
+    font-size: var(--sl-text-xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--sl-color-accent);
+  }
+
+  .footer-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .footer-nav a {
+    font-size: var(--sl-text-sm);
+    color: var(--sl-color-gray-2);
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+
+  .footer-nav a:hover {
+    color: var(--sl-color-accent-high);
+  }
+
+  .link-current {
+    font-size: var(--sl-text-sm);
+    color: var(--sl-color-white);
+    font-weight: 500;
+  }
+}
+
+@layer starlight.components {
+  /* Starlight icon color in the kudos link */
+  .kudos :global(svg) {
+    color: var(--sl-color-orange);
+  }
+}
+</style>

package/dist/PageFrame-y7qynxws.astro

@@ -0,0 +1,187 @@
+---
+// SPDX-FileCopyrightText: 2025 Knitli Inc.
+// SPDX-FileContributor: Adam Poulemanos <adam@knit.li>
+//
+// SPDX-License-Identifier: MIT OR Apache-2.0
+//
+// Starlight PageFrame override for Knitli product documentation sites.
+// Adds the cross-site subnav bar (with breadcrumb) above the Starlight header.
+//
+// Usage in astro.config.mjs:
+//   starlight({ components: { PageFrame: '@knitli/docs-components/PageFrame.astro' } })
+//
+// Required env variable: PUBLIC_DOCS_PRODUCT = 'Recoco' | 'CodeWeaver' | 'Thread'
+// The --sl-subnav-height CSS variable defaults to 2rem if not set in customCss.
+
+// @ts-expect-error: virtual:starlight/components/* are typed in virtual-internal.d.ts,
+// which is not in Starlight's public exports map
+import MobileMenuToggle from "virtual:starlight/components/MobileMenuToggle";
+import DocsBreadcrumb from "./DocsBreadcrumb.astro";
+
+const { hasSidebar } = Astro.locals.starlightRoute;
+
+const product = import.meta.env.PUBLIC_DOCS_PRODUCT as string | undefined;
+
+// Strip the configured base URL to get the within-product path for the breadcrumb.
+// e.g. for base='/Recoco/' and pathname='/Recoco/guide/start', path = 'guide/start'
+const basePath = (import.meta.env.BASE_URL ?? "/").replace(/\/?$/, "/");
+const currentPath = Astro.url.pathname
+  .slice(basePath.length)
+  .replace(/^\//, "");
+---
+
+<div class="page sl-flex">
+  <nav class="knitli-subnav sl-flex" aria-label="Knitli">
+    {product && (
+      <div class="subnav-breadcrumb">
+        <DocsBreadcrumb
+          product={product}
+          productUrl={basePath}
+          path={currentPath}
+          variant="inline"
+        />
+      </div>
+    )}
+    <div class="subnav-links sl-flex">
+      <a href="https://knitli.com" class="subnav-link">Knitli Home</a>
+      <a href="https://blog.knitli.com" class="subnav-link">Blog</a>
+    </div>
+  </nav>
+
+  <header class="header"><slot name="header" /></header>
+
+  {hasSidebar && (
+      <nav class="sidebar print:hidden" aria-label={Astro.locals.t('sidebarNav.accessibleLabel')}>
+        <MobileMenuToggle />
+        <div id="starlight__sidebar" class="sidebar-pane">
+          <div class="sidebar-content sl-flex">
+            <slot name="sidebar" />
+          </div>
+        </div>
+      </nav>
+    )}
+
+  <div class="main-frame"><slot /></div>
+</div>
+
+<style>
+@layer starlight.core {
+  /* Replicated from Starlight's PageFrame — only positional values modified */
+  .page {
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .header {
+    z-index: var(--sl-z-index-navbar);
+    position: fixed;
+    inset-inline-start: 0;
+    inset-block-start: var(--sl-subnav-height, 2rem); /* offset below subnav */
+    width: 100%;
+    height: var(--sl-nav-height);
+    border-bottom: 1px solid var(--sl-color-hairline-shade);
+    padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
+    padding-inline-end: var(--sl-nav-pad-x);
+    background-color: var(--sl-color-bg-nav);
+  }
+
+  :global([data-has-sidebar]) .header {
+    padding-inline-end: calc(
+      var(--sl-nav-gap) +
+      var(--sl-nav-pad-x) +
+      var(--sl-menu-button-size)
+    );
+  }
+
+  .sidebar-pane {
+    visibility: var(--sl-sidebar-visibility, hidden);
+    position: fixed;
+    z-index: var(--sl-z-index-menu);
+    inset-block: calc(var(--sl-nav-height) + var(--sl-subnav-height, 2rem)) 0;
+    inset-inline-start: 0;
+    width: 100%;
+    background-color: var(--sl-color-black);
+    overflow-y: auto;
+  }
+
+  :global([aria-expanded="true"]) ~ .sidebar-pane {
+    --sl-sidebar-visibility: visible;
+  }
+
+  .sidebar-content {
+    height: 100%;
+    min-height: max-content;
+    padding: 1rem var(--sl-sidebar-pad-x) 0;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  @media (min-width: 50rem) {
+    .sidebar-content::after {
+      content: "";
+      padding-bottom: 1px;
+    }
+  }
+
+  .main-frame {
+    padding-top: calc(
+      var(--sl-nav-height) +
+      var(--sl-subnav-height, 2rem) +
+      var(--sl-mobile-toc-height)
+    );
+    padding-inline-start: var(--sl-content-inline-start);
+  }
+
+  @media (min-width: 50rem) {
+    :global([data-has-sidebar]) .header {
+      padding-inline-end: var(--sl-nav-pad-x);
+    }
+    .sidebar-pane {
+      --sl-sidebar-visibility: visible;
+      width: var(--sl-sidebar-width);
+      background-color: var(--sl-color-bg-sidebar);
+      border-inline-end: 1px solid var(--sl-color-hairline-shade);
+    }
+  }
+
+  /* Knitli cross-site subnav */
+  .knitli-subnav {
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: var(--sl-subnav-height, 2rem);
+    z-index: var(--sl-z-index-navbar);
+    background-color: var(--sl-color-bg-nav);
+    padding-inline: var(--sl-nav-pad-x);
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .subnav-breadcrumb {
+    flex: 1;
+    min-width: 0; /* allows breadcrumb to shrink and truncate */
+    overflow: hidden;
+  }
+
+  .subnav-links {
+    gap: 1.25rem;
+    align-items: center;
+    flex-shrink: 0;
+    margin-inline-start: auto;
+  }
+
+  .subnav-link {
+    font-size: var(--sl-text-xs);
+    color: var(--sl-color-gray-3);
+    text-decoration: none;
+    transition: color 0.2s ease;
+    white-space: nowrap;
+  }
+
+  .subnav-link:hover {
+    color: var(--sl-color-white);
+  }
+}
+</style>