@knitli/docs-components 1.1.1 → 1.1.3

package/src/components/PageFrame.astro

@@ -10,32 +10,31 @@
 // Usage in astro.config.mjs:
 //   starlight({ components: { PageFrame: '@knitli/docs-components/PageFrame.astro' } })
 //
-// Required env variable: PUBLIC_DOCS_PRODUCT = 'ReCoco' | 'CodeWeaver' | 'Thread'
+// 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';
+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
-  | 'ReCoco'
-  | 'CodeWeaver'
-  | 'Thread'
+  | "Recoco"
+  | "CodeWeaver"
+  | "Thread"
   | 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(/\/?$/, '/');
+// 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(/^\//, '');
+  .replace(/^\//, "");
 ---
 
 <div class="page sl-flex">
-
   <nav class="knitli-subnav sl-flex" aria-label="Knitli">
     {product && (
       <div class="subnav-breadcrumb">
@@ -53,7 +52,9 @@ const currentPath = Astro.url.pathname
     </div>
   </nav>
 
-  <header class="header"><slot name="header" /></header>
+  <header class="header">
+    <slot name="header"/>
+  </header>
 
   {
     hasSidebar && (
@@ -68,123 +69,129 @@ const currentPath = Astro.url.pathname
     )
   }
 
-  <div class="main-frame"><slot /></div>
+  <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;
-    }
+@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);
-    }
+  .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)
-      );
-    }
+  :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;
-    }
+  .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;
-    }
+  :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;
-    }
+  .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;
-      }
+  @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);
-    }
+  .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);
-      }
+  @media (min-width: 50rem) {
+    :global([data-has-sidebar]) .header {
+      padding-inline-end: var(--sl-nav-pad-x);
     }
-
-    /* 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;
+    .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);
     }
+  }
 
-    .subnav-breadcrumb {
-      flex: 1;
-      min-width: 0; /* allows breadcrumb to shrink and truncate */
-      overflow: hidden;
-    }
+  /* 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-links {
-      gap: 1.25rem;
-      align-items: center;
-      flex-shrink: 0;
-      margin-inline-start: auto;
-    }
+  .subnav-breadcrumb {
+    flex: 1;
+    min-width: 0; /* allows breadcrumb to shrink and truncate */
+    overflow: hidden;
+  }
 
-    .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-links {
+    gap: 1.25rem;
+    align-items: center;
+    flex-shrink: 0;
+    margin-inline-start: auto;
+  }
 
-    .subnav-link:hover {
-      color: var(--sl-color-white);
-    }
+  .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>

package/src/index.d.ts

@@ -0,0 +1,32 @@
+export type Components = {
+  DocsBreadcrumb: () => Promise<
+    typeof import("./components/DocsBreadcrumb.astro")
+  >;
+  DocsFooter: () => Promise<typeof import("./components/Footer.astro")>;
+  PageFrame: () => Promise<typeof import("./components/PageFrame.astro")>;
+};
+
+export type DocsAssets = {
+  knitliLogo: string;
+  recocoLogoMed: string;
+  recocoLogoSm: string;
+  recocoLogoXl: string;
+  codeweaverPrimary: string;
+  codeweaverReverse: string;
+  codeweaverTheme: string;
+  variables: string;
+  threadLogoDark: string;
+  threadLogoLight: string;
+  headlineLogoDark: string;
+  headlineLogoLight: string;
+  knitliWordmark: string;
+  docsStyle: string;
+};
+
+export type DocsComponentsPackage = Components & {
+  DocsAssets: DocsAssets;
+};
+
+declare const DocsComponents: DocsComponentsPackage;
+
+export default DocsComponents;

package/src/index.ts

@@ -6,10 +6,50 @@
 // Main exports for @knitli/docs-components package
 
 // Export type definitions
-export * from './types/index.js';
+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';
+import {
+  codeweaverPrimary,
+  codeweaverReverse,
+  headlineLogoDark,
+  headlineLogoLight,
+  knitliLogo,
+  knitliWordmark,
+  recocoLogoMed,
+  recocoLogoSm,
+  recocoLogoXl,
+  threadLogoDark,
+  threadLogoLight,
+} from "./assets/logos/index.js";
+
+import { codeweaverTheme, variables } from "./assets/styles/index.js";
+
+import { docsStyle } from "./styles/index.js";
+
+export const DocsAssets = {
+  knitliLogo,
+  recocoLogoMed,
+  recocoLogoSm,
+  recocoLogoXl,
+  codeweaverPrimary,
+  codeweaverReverse,
+  codeweaverTheme,
+  variables,
+  threadLogoDark,
+  threadLogoLight,
+  headlineLogoDark,
+  headlineLogoLight,
+  knitliWordmark,
+  docsStyle,
+};
+
+const components = {
+  DocsBreadcrumb: async () => await import("./components/DocsBreadcrumb.astro"),
+  DocsFooter: async () => await import("./components/Footer.astro"),
+  PageFrame: async () => await import("./components/PageFrame.astro"),
+};
+
+export default {
+  ...components,
+  DocsAssets,
+};

package/src/styles/custom.css

@@ -0,0 +1,73 @@
+/* Custom styles for docs-home - Override Knitli global styles */
+/* Reset body to use Starlight defaults instead of Knitli's parchment background */
+body {
+  background: var(--sl-color-bg) !important;
+  font-family:
+    "DM Mono", "Roboto Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace !important;
+  color: var(--sl-color-text) !important;
+}
+
+/* Ensure main content panel uses Starlight theme colors */
+.content-panel {
+  background-color: var(--sl-color-bg-nav) !important;
+}
+
+/* Ensure page background respects Starlight theme, and fills viewport height */
+.page {
+  background-color: var(--sl-color-bg) !important;
+  min-height: 100dvh !important;
+  flex-direction: column !important;
+}
+
+/* Make the main frame grow to push footer to bottom on short pages */
+.main-frame {
+  flex: 1 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  background-color: var(--sl-color-bg-nav);
+}
+
+.main-frame > main {
+  flex: 1 !important;
+}
+
+/* Splash page hero - keep transparent but ensure text uses Starlight colors */
+.splash .hero {
+  background-color: transparent;
+  color: var(--sl-color-text) !important;
+}
+
+/* Dark mode colors. */
+:root {
+  --font-sans:
+    "DM Mono", "Roboto Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+  --font-mono: "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+  --sl-subnav-height: 2rem;
+
+  --sl-color-accent-low: #3d170d;
+  --sl-color-accent: #ba3100;
+  --sl-color-accent-high: #eebbad;
+  --sl-color-white: #ffffff;
+  --sl-color-gray-1: #efedef;
+  --sl-color-gray-2: #cac7ca;
+  --sl-color-gray-3: #a8a2a7;
+  --sl-color-gray-4: #5c565a;
+  --sl-color-gray-5: #3b363a;
+  --sl-color-gray-6: #2a2529;
+  --sl-color-black: #1a1719;
+}
+/* Light mode colors. */
+:root[data-theme="light"] {
+  --sl-color-accent-low: #f4cdc2;
+  --sl-color-accent: #982600;
+  --sl-color-accent-high: #581b0b;
+  --sl-color-white: #1a1719;
+  --sl-color-gray-1: #2a2529;
+  --sl-color-gray-2: #3b363a;
+  --sl-color-gray-3: #5c565a;
+  --sl-color-gray-4: #8f898e;
+  --sl-color-gray-5: #c4c1c3;
+  --sl-color-gray-6: #efedef;
+  --sl-color-gray-7: #f7f6f7;
+  --sl-color-black: #ffffff;
+}

package/src/styles/custom.d.css.ts

@@ -0,0 +1,8 @@
+// Type definitions for custom.css
+
+// This file is necessary to allow importing CSS files in TypeScript without errors.
+
+declare module "*.css" {
+  const content: string;
+  export default content;
+}

package/src/styles/index.ts

@@ -0,0 +1,3 @@
+import DocsStyle from "#style/custom.css";
+
+export const docsStyle = DocsStyle;

package/src/types/index.ts

@@ -8,7 +8,7 @@
 /**
  * Supported Knitli products for documentation
  */
-export type ProductName = 'ReCoco' | 'CodeWeaver' | 'Thread';
+export type ProductName = "Recoco" | "CodeWeaver" | "Thread";
 
 /**
  * Site URLs configuration
@@ -19,49 +19,6 @@ export interface SiteUrls {
   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
  */
@@ -85,5 +42,5 @@ export interface DocsBreadcrumbProps {
    * Visual variant of the breadcrumb
    * @default 'default'
    */
-  variant?: 'default' | 'compact';
+  variant?: "default" | "compact";
 }