@chassis-ui/docs 0.1.7 → 0.1.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chassis-ui/docs",
   "description": "Shared Astro components and layouts for Chassis documentation sites.",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/FeatureCard.astro

@@ -27,7 +27,7 @@ const hasContent = Astro.slots.has('default')
 const cardClasses = [
   'feature-item bg-even d-flex flex-column rounded-large',
   'p-medium p-large-xlarge gap-medium gap-medium-xlarge',
-  horizontal ? 'h-auto' : 'h-100',
+  horizontal ? '' : 'h-100',
   classes
 ]
   .filter(Boolean)

package/src/components/NavLink.astro

@@ -16,8 +16,6 @@ interface Props {
   rel?: HTMLAnchorElement['rel']
   /** Link target attribute */
   target?: HTMLAnchorElement['target']
-  /** Enable analytics tracking */
-  track?: boolean
 }
 
 const { active, class: className, ...props } = Astro.props

package/src/js/icon-loader.js

@@ -102,7 +102,16 @@
     container.id = 'chassis-icons-sprite'
     container.style.display = 'none'
     container.setAttribute('aria-hidden', 'true')
-    container.innerHTML = spriteContent
+
+    // Use DOMParser to safely parse SVG content instead of innerHTML
+    const parsed = new DOMParser().parseFromString(spriteContent, 'image/svg+xml')
+    const svgEl = parsed.querySelector('svg')
+    if (svgEl) {
+      container.appendChild(svgEl)
+    } else {
+      // Fallback: should not happen given fetchSprite validation
+      container.innerHTML = spriteContent
+    }
 
     // Insert at the end of body
     document.body.appendChild(container)

package/src/js/search.js

@@ -24,16 +24,11 @@ import docsearch from '@docsearch/js'
     return
   }
 
-  const siteDocsVersion = searchElement.getAttribute('data-cxd-docs-version')
-
   docsearch({
     apiKey: CONFIG.apiKey,
     indexName: CONFIG.indexName,
     appId: CONFIG.appId,
     container: searchElement,
-    searchParameters: {
-      facetFilters: [`version:${siteDocsVersion}`]
-    },
     transformItems(items) {
       return items.map((item) => {
         const liveUrl = 'https://chassis-ui.com/'
@@ -41,7 +36,7 @@ import docsearch from '@docsearch/js'
         item.url = window.location.origin.startsWith(liveUrl)
           ? // On production, return the result as is
             item.url
-          : // On development or Netlify, replace `item.url` with a trailing slash,
+          : // On development or Vercel, replace `item.url` with a trailing slash,
             // so that the result link is relative to the server root
             item.url.replace(liveUrl, '/')
 

package/src/js/sidebar.js

@@ -1,7 +1,3 @@
-// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
-// IT'S ALL JUST JUNK FOR OUR DOCS!
-// ++++++++++++++++++++++++++++++++++++++++++
-
 /*
  * JavaScript for Chassis's docs (https://chassis-ui.com/)
  * Copyright 2011-2025 The Chassis Authors

package/src/layouts/DocsLayout.astro

@@ -31,8 +31,9 @@ const parentDirectory = id.includes('/') ? id.split('/')[0] : ''
 
 const bodyProps: LayoutOverridesHTMLAttributes<'body'> = {}
 
+bodyProps['class'] = 'docs-body'
+
 if (frontmatter.toc) {
-  bodyProps['class'] = 'docs-body'
   bodyProps['data-cx-spy'] = 'scroll'
   bodyProps['data-cx-target'] = '#TableOfContents'
 }

package/src/layouts/footer/Scripts.astro

@@ -14,8 +14,6 @@ interface Props {
 }
 
 const { layout } = Astro.props
-
-console.log('layout in Scripts:', layout)
 ---
 
 <script is:inline {...getChassisJsProps()}></script>

package/src/layouts/head/Head.astro

@@ -35,7 +35,7 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site)
 const isHome = Astro.url.pathname === '/'
 const pageTitle = isHome
   ? `${getConfig().title} · ${getConfig().subtitle}`
-  : `${title} · ${getConfig().title} v${getConfig().docs_version}`
+  : `${title} · ${getConfig().title}`
 ---
 
 <meta charset="UTF-8" />
@@ -46,11 +46,10 @@ const pageTitle = isHome
 <meta name="author" content={getConfig().authors} />
 <meta name="generator" content={Astro.generator} />
 <meta name="docsearch:language" content="en" />
-<meta name="docsearch:version" content={getConfig().docs_version} />
 
 <link rel="canonical" href={canonicalUrl} />
 
-<link rel="preconnect" href=`https://${getConfig().algolia.app_id}-dsn.algolia.net` crossorigin />
+<link rel="preconnect" href={`https://${getConfig().algolia.app_id}-dsn.algolia.net`} crossorigin />
 
 <title>{pageTitle}</title>
 

package/src/layouts/header/Navigation.astro

@@ -18,6 +18,17 @@ interface Props {
 }
 
 const { layout, title } = Astro.props
+const { pathname } = Astro.url
+const isActive = (path: string) => {
+  if (path === '/') {
+    return pathname === '/' || pathname === ''
+  }
+  // Remove trailing slashes for a cleaner comparison
+  const cleanPathname = pathname.endsWith('/') ? pathname.slice(0, -1) : pathname
+  const cleanLinkPath = path.endsWith('/') ? path.slice(0, -1) : path
+
+  return cleanPathname.startsWith(cleanLinkPath)
+}
 ---
 
 <header class="navbar navbar-expand-large cxd-navbar sticky-top">
@@ -48,7 +59,7 @@ const { layout, title } = Astro.props
     </a>
 
     <div class="d-flex">
-      <div class="cxd-search" id="docsearch" data-cxd-docs-version={getConfig().docs_version}></div>
+      <div class="cxd-search" id="docsearch"></div>
 
       <button
         class="navbar-toggler d-flex d-large-none order-3 p-xsmall"
@@ -81,12 +92,11 @@ const { layout, title } = Astro.props
       <div class="offcanvas-body p-large pt-0 p-large-0">
         <hr class="d-large-none text-white-50" />
         <ul class="navbar-nav flex-row flex-wrap cxd-navbar-nav mx-0 mx-large-medium">
-          <NavLink active={layout === 'docs'} href="/docs" track>Docs</NavLink>
-          <NavLink active={title === 'Tokens'} href="/tokens" track>Tokens</NavLink>
-          <NavLink active={title === 'Assets'} href="/assets" track>Assets</NavLink>
-          <NavLink active={title === 'Figma'} href="/figma" track>Figma</NavLink>
-          <NavLink active={layout === 'icons'} href="/icons" track>Icons</NavLink>
-          <NavLink active={title === 'CSS'} href="/css" track>CSS</NavLink>
+          <NavLink active={isActive('/tokens')} href="/tokens">Tokens</NavLink>
+          <NavLink active={isActive('/figma')} href="/figma">Figma</NavLink>
+          <NavLink active={isActive('/css')} href="/css">CSS</NavLink>
+          <NavLink active={isActive('/assets')} href="/assets">Assets</NavLink>
+          <NavLink active={isActive('/icons')} href="/icons">Icons</NavLink>
           <li class="nav-item dropdown ms-medium">
             <a
               class="nav-link dropdown-toggle"

package/src/scss/_docsearch.scss

@@ -1,29 +1,53 @@
 // stylelint-disable selector-class-pattern
 
 :root {
-  --docsearch-primary-color: var(--cxd-subtle);
-  --docsearch-logo-color: var(--cxd-subtle);
+  --docsearch-primary-color: var(--cx-primary);
+  --docsearch-text-color: var(--cx-fg-main);
+  --docsearch-spacing: var(--cx-space-medium);
+  // --docsearch-icon-stroke-width: 1.4;
+  --docsearch-highlight-color: var(--cx-primary);
+  --docsearch-muted-color: var(--cx-fg-subtle);
+  --docsearch-container-background: var(--cx-black-dim-main);
+  --docsearch-logo-color: var(--cx-primary);
+  // --docsearch-modal-width: 560px;
+  // --docsearch-modal-height: 600px;
+  --docsearch-modal-background: var(--cx-bg-even);
+  --docsearch-modal-shadow: var(--cx-box-shadow-large); // inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+  // --docsearch-searchbox-height: 56px;
+  --docsearch-searchbox-background: var(--cx-bg-main);
+  --docsearch-searchbox-focus-background: var(--cx-bg-hover);
+  // --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
+  // --docsearch-hit-height: 56px;
+  --docsearch-hit-color: var(--cx-fg-main);
+  --docsearch-hit-active-color: var(--cx-primary-fg-solid);
+  --docsearch-hit-background: var(--cx-bg-main);
+  --docsearch-hit-shadow: none;
+  // --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
+  // --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
+  // --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 1px 0 rgba(30, 35, 90, .4);
+  // --docsearch-footer-height: 44px;
+  --docsearch-footer-background: var(--cx-bg-evident);
+  --docsearch-footer-shadow: none; // inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
 }
 
 @include color-mode(dark, true) {
   // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
   // in html[data-theme="dark"] selector
   // and are slightly modified for formatting purpose
-  --docsearch-text-color: var(--cx-fg-main);
-  --docsearch-container-background: rgba(9, 10, 17, .8);
-  --docsearch-modal-background: #15172a;
-  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
-  --docsearch-searchbox-background: var(--cx-bg-main, #fc0);
-  --docsearch-searchbox-focus-background:
-    var(--cx-bg-hover, #fc0)
-    --docsearch-hit-color: #bec3c9;
-  --docsearch-hit-shadow: none;
-  --docsearch-hit-background: #090a11;
-  --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
-  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
-  --docsearch-footer-background: #1e2136;
-  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
-  --docsearch-muted-color: #7f8497;
+  // --docsearch-text-color: var(--cx-fg-main);
+  // --docsearch-container-background: var(--cx-dim-main);
+  // --docsearch-modal-background: var(--cx-bg-even);
+  // --docsearch-modal-shadow: var(--cx-box-shadow-large); // inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+  // --docsearch-searchbox-background: var(--cx-bg-main, #fc0);
+  // --docsearch-searchbox-focus-background: var(--cx-bg-hover, #fc0);
+  // --docsearch-hit-color: #bec3c9;
+  // --docsearch-hit-shadow: none;
+  // --docsearch-hit-background: #090a11;
+  // --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
+  // --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
+  // --docsearch-footer-background: #1e2136;
+  // --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
+  // --docsearch-muted-color: #7f8497;
 }
 
 .cxd-search {
@@ -149,7 +173,7 @@
 
   a {
     @include border-radius(0);
-    border: solid var(--cx-border-color);
+    border: solid var(--cx-border-subtle);
     border-width: 0 1px 1px;
   }
 

package/src/scss/_settings.scss

@@ -12,6 +12,7 @@ $enable-cssgrid:                true !default;
 $enable-dark-mode:              true !default;
 $enable-deprecation-messages:   true !default;
 $enable-elevation-shadows:      true !default;
+$enable-exclude-strokes:        true !default;
 $enable-grid-classes:           true !default;
 $enable-important-utilities:    true !default;
 $enable-negative-margins:       true !default;