@chassis-ui/docs 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @chassis-ui/docs
 
+## 0.10.0
+
+### Minor Changes
+
+- **Breaking.** The head links one font stylesheet, `fonts/fonts.css` under the static path, in place of `fonts/text.css`, `fonts/display.css` and `fonts/code.css`, and the navigation bar and the footer inline the logo, `images/site-logo.svg`, in place of loading it with `<img>`. chassis-assets made both changes on `app/docs` on 2026-10-19: a brand has one `fonts.css`, and the logo of the `chassis` brand has no `xmlns` and is colored by the classes `icon-default` and `icon-primary` of the page, so it shows only inline. A site moves its `vendor/assets` submodule to `db6d64b` of `app/docs` or later with `pnpm sync-submodules`; with an earlier commit the pages show the fallback fonts. The build reads `static/images/site-logo.svg` of the site's `public` directory and fails without it. The logo is `2rem` high, and the footer gives its link the margin `mb-md` in place of `mb-xs`. The search of the header is `5rem` wide from the `lg` breakpoint, the icon and the shortcut, and `12.5rem` from `xl`, where it was 200px, so that no link of the header runs under it. See [UPGRADING.md](https://github.com/chassis-ui/website/blob/main/packages/docs/UPGRADING.md#from-09-to-010).
+
 ## 0.9.0
 
 ### Minor Changes

package/README.md

@@ -188,10 +188,10 @@ The layouts link to files under `/static/`, which the site puts into `static/` o
 | ---------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
 | `/static/css/chassis.css`, `/static/css/chassis.min.css`                                                                           | the `dist` folder of `@chassis-ui/css`                   |
 | `/static/icons/chassis-icons.svg`, `/static/icons/chassis-icons.css`                                                               | the `icons` folder of `@chassis-ui/icons`                |
-| `/static/images/site-logo.svg`, the logo of the navigation bar and the footer                                                      | the docs build of `chassis-assets`                       |
+| `/static/images/site-logo.svg`, the logo of the navigation bar and the footer. The build inlines it, and fails without the file    | the docs build of `chassis-assets`                       |
 | `/static/images/favicon.png`, `favicon-16x16.png`, `favicon-32x32.png` and `apple-touch-icon.png`                                  | the docs build of `chassis-assets`                       |
 | `/static/images/social-image.png`, the image of a page without a `thumbnail`. The build reads its size, and fails without the file | the docs build of `chassis-assets`                       |
-| `/static/fonts/text.css`, `/static/fonts/display.css`, `/static/fonts/code.css`, and the font files they load                      | the docs build of `chassis-assets`                       |
+| `/static/fonts/fonts.css`, and the font files it loads                                                                             | the docs build of `chassis-assets`                       |
 | `/static/images/manifest.json`, the web app manifest                                                                               | the site itself. The starter has one in `static/images/` |
 
 `chassis-docs vendor` builds the docs build of `chassis-assets` in the `vendor/assets` submodule. See [Commands](#commands).
@@ -417,6 +417,7 @@ The integration provides five modules: `virtual:chassis-docs/config`, `virtual:c
 
 | `@chassis-ui/docs` | Requires Astro             | Requires `@chassis-ui/css` | Requires Node | Built with                             |
 | ------------------ | -------------------------- | -------------------------- | ------------- | -------------------------------------- |
+| 0.10.0             | `^7.0.0`                   | `>=0.10.0`                 | `>=22.12.0`   | Astro 7.3.8, css 0.10.0, tokens 0.10.0 |
 | 0.9.0              | `^7.0.0`                   | `>=0.10.0`                 | `>=22.12.0`   | Astro 7.3.8, css 0.10.0, tokens 0.10.0 |
 | 0.8.0              | `^7.0.0`                   | `>=0.6.0`                  | `>=22.12.0`   | Astro 7.3.5, css 0.7.1, tokens 0.7.0   |
 | 0.7.0              | `^7.0.0`                   | `>=0.6.0`                  | `>=22.12.0`   | Astro 7.3.5, css 0.6.0, tokens 0.6.0   |

package/UPGRADING.md

@@ -1,5 +1,41 @@
 # Upgrading @chassis-ui/docs
 
+## From 0.9 to 0.10
+
+0.10.0 links one font stylesheet, `fonts/fonts.css`, in place of `fonts/text.css`,
+`fonts/display.css` and `fonts/code.css`, and inlines the logo of the navigation bar and the
+footer, `images/site-logo.svg`, in place of loading it with `<img>`. chassis-assets made both
+changes on `app/docs` on 2026-10-19: a brand has one `fonts.css`, the files of the `text`
+role are `ui` files, and the logo of the `chassis` brand is for inline use. It has no `xmlns`,
+and the classes `icon-default` and `icon-primary` of the page color its paths.
+
+### 1. Update the dependency and the assets
+
+```sh
+pnpm add -D @chassis-ui/docs@^0.10.0
+pnpm sync-submodules
+```
+
+The docs build of `chassis-assets` has `fonts/fonts.css` from `db6d64b` of `app/docs` on. With
+an earlier commit the pages show the fallback fonts. A site that does not copy the docs build
+provides `fonts/fonts.css` itself.
+
+### What changes in the package
+
+- **The head links `fonts/fonts.css`** under the static path, and no longer the three
+  stylesheets of the roles.
+- **The navigation bar and the footer inline the logo.** The build reads
+  `static/images/site-logo.svg` of the site's `public` directory and fails without it. The
+  logo is `2rem` high, its width follows its `viewBox`, and the link around it names it. A
+  logo of an earlier docs build, with its own colors, a width and a height, shows at the same
+  height.
+- **The link of the logo in the footer has the bottom margin `mb-md`,** where it was `mb-xs`.
+
+### Check the result
+
+Build the site before and after the upgrade and compare the pages in a browser, in both color
+modes: the logo takes the colors of the theme.
+
 ## From 0.8 to 0.9
 
 0.9.0 needs `@chassis-ui/css` 0.10.0 or later. css 0.10 names the font families by their

package/package.json

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

package/src/layouts/SiteLogo.astro

@@ -0,0 +1,22 @@
+---
+/**
+ * SiteLogo
+ *
+ * The logo of the site, `images/site-logo.svg` of the static files, inlined: the logo of the
+ * docs build of chassis-assets colors its paths with the classes `icon-default` and
+ * `icon-primary` of `@chassis-ui/css`, which reach a file that is in the page only. The link
+ * around it names it, so the drawing is hidden from assistive technology. The build fails
+ * without the file.
+ */
+
+import fs from 'node:fs'
+import { getPublicFsPath } from '../site'
+
+const svg = fs
+  .readFileSync(getPublicFsPath('static/images/site-logo.svg'), 'utf8')
+  .replace(/^\s*<\?xml[^>]*\?>\s*/, '')
+  .replace(/^<svg\b/, '<svg aria-hidden="true" focusable="false"')
+  .trim()
+---
+
+<Fragment set:html={svg} />

package/src/layouts/footer/Footer.astro

@@ -5,7 +5,7 @@
  * Site footer with logo, license information, and navigation links.
  */
 
-import { getStaticPath } from '../../site'
+import SiteLogo from '../SiteLogo.astro'
 ---
 
 <footer class="cxd-footer py-6xl">
@@ -13,11 +13,11 @@ import { getStaticPath } from '../../site'
     <div class="grid row-gap-0">
       <div class="col-span-full md:col-span-10 lg:col-span-5 mb-md">
         <a
-          class="d-inline-flex align-items-center mb-xs text-body-emphasis text-decoration-none"
+          class="cxd-site-logo d-inline-flex align-items-center mb-md text-body-emphasis text-decoration-none"
           href="/"
           aria-label="Chassis"
         >
-          <img src={getStaticPath('images/site-logo.svg')} alt="Chassis UI" height="32" />
+          <SiteLogo />
         </a>
         <p class="mb-xs">
           This project is licensed under the MIT License, which allows for free use, modification,

package/src/layouts/head/Head.astro

@@ -42,13 +42,11 @@ const pageTitle = isHome
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 
 <!--
-  The fonts of the text, display and code roles, from the docs build of chassis-assets.
-  Links, not `@import`s in the styles, so that the browser finds them with the page and
-  not after the stylesheet that imports them
+  The fonts of the brand, from the docs build of chassis-assets: one stylesheet declares the
+  family of every role. A link, not an `@import` in the styles, so that the browser finds it
+  with the page and not after the stylesheet that imports it
 -->
-<link rel="stylesheet" href={getStaticPath('fonts/text.css')} />
-<link rel="stylesheet" href={getStaticPath('fonts/display.css')} />
-<link rel="stylesheet" href={getStaticPath('fonts/code.css')} />
+<link rel="stylesheet" href={getStaticPath('fonts/fonts.css')} />
 
 <meta name="description" content={description} />
 

package/src/layouts/header/Navigation.astro

@@ -6,7 +6,8 @@
  */
 
 import type { Layout } from '../../libs/layout'
-import { getConfig, getStaticPath } from '../../site'
+import { getConfig } from '../../site'
+import SiteLogo from '../SiteLogo.astro'
 import NavLink from '../../components/NavLink.astro'
 import ThemeToggler from '../../components/ThemeToggler.astro'
 import SearchTrigger from './SearchTrigger.astro'
@@ -52,8 +53,8 @@ const isActive = (path: string) => {
     )}
     {layout !== 'docs' && <div class="lg:d-none" style="width: 4.25rem;" />}
 
-    <a class="navbar-brand m-0 py-sm lg:me-md" href="/" aria-label="Chassis">
-      <img src={getStaticPath('images/site-logo.svg')} alt="Chassis UI" width="123" height="32" />
+    <a class="navbar-brand cxd-site-logo m-0 py-sm lg:me-md" href="/" aria-label="Chassis">
+      <SiteLogo />
     </a>
 
     <div class="d-flex">

package/src/scss/_layout.scss

@@ -2,6 +2,14 @@
 @use "@chassis-ui/css/scss/mixins" as *;
 
 @layer custom {
+  // The navbar and the footer inline the logo. The height sets its size, also for a file that
+  // has a width and a height of its own.
+  .cxd-site-logo > svg {
+    display: block;
+    width: auto;
+    height: 2rem;
+  }
+
   .cxd-gutter {
     --cx-container-padding: #{$cxd-gutter-x * .5};
   }

package/src/scss/_search.scss

@@ -12,15 +12,17 @@
     @include media-breakpoint-up(lg) {
       position: absolute;
       top: 20%;
-      right: 11rem;
-      width: 200px;
+      right: 11.5rem;
+      width: 5rem;
 
       [dir="rtl"] & {
         right: auto;
-        left: 11rem;
+        left: 11.5rem;
       }
     }
-
+    @include media-breakpoint-up(xl) {
+      width: 12.5rem;
+    }
   }