@chassis-ui/docs 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @chassis-ui/docs
 
+## 0.7.0
+
+### Minor Changes
+
+- **Breaking.** The package needs `@chassis-ui/css` 0.6.0 or later: the peer range is `>=0.6.0`, it was `^0.5.0-0`. The layouts use the CSS grid of css 0.6, `.grid` with `col-span-*`, in place of the flexbox grid, `.row` with `.col-*`, which css 0.6 deprecates and css 0.7 removes. The header of `SingleLayout`, the sections list of `DocsLayout`, the footer and the lists of the header are grids. `NavLink` no longer sets a width: the lists of the header are two columns below `lg` by themselves. The loading rows of the search use the fraction widths, `w-4/12`. `.cxd-gutter` sets `--cx-container-padding` in place of `--cx-gutter-x`, with the same page margin of 1rem. The pages look as before, except that the footer columns are separated by the gutter of the breakpoint and move by a few pixels. See [UPGRADING.md](https://github.com/chassis-ui/website/blob/main/packages/docs/UPGRADING.md#from-06-to-07) for the classes to replace in a site's own pages.
+
+## 0.6.3
+
+### Patch Changes
+
+- The home page of a site under a path gets the home form of the title, `title · subtitle`. The layouts took the page at `/` as the home page, so a site with `baseURL` `https://chassis-ui.com/css/` never got it: its home page is at `/css/`. The home page is now the page at the path of `baseURL`. The title of such a home page changes with this release, and the `title` prop of its layout is used for the social tags only. Keep `title · subtitle` within 70 characters where the site validates its HTML.
+- The color mode script is inline in the head and runs before the first paint. It was a module, which runs after the document is parsed, so a page in dark mode showed light first.
+- Five fixes of the search dialog. The page scrolls again after a search result on the current page is opened: the dialog closed without removing the scroll lock of the body. The input has the focus when the dialog is opened with the button, so typing works at once. The keyboard shortcuts open the dialog as the button does: the page behind it no longer scrolls, and a click outside closes it. A click or Enter on a loading placeholder no longer closes the dialog and saves an empty visit. Escape closes the dialog in Safari when the focus is in the empty input.
+
 ## 0.6.2
 
 ### Patch Changes

package/README.md

@@ -23,7 +23,7 @@ pnpm add @chassis-ui/docs
 ```json
 {
   "@astrojs/markdown-remark": "^7.0.0",
-  "@chassis-ui/css": "^0.5.0-0",
+  "@chassis-ui/css": ">=0.6.0",
   "@pagefind/component-ui": "^1.0.0",
   "@shikijs/transformers": "^4.3.1",
   "astro": "^7.0.0",
@@ -109,7 +109,7 @@ currentVersion: '0.5.2'
 | Key                                           | Required | Meaning                                                                                                                    |
 | --------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------- |
 | `title`, `subtitle`, `description`, `authors` | yes      | Used in the page title and the meta tags                                                                                   |
-| `baseURL`                                     | yes      | Canonical URL of the site                                                                                                  |
+| `baseURL`                                     | yes      | Canonical URL of the site. The page at its path is the home page: `/css/` for `https://chassis-ui.com/css/`                |
 | `docsPath`                                    | yes      | URL path of the docs pages. Starts with `/`                                                                                |
 | `staticPath`                                  | no       | URL path that the pages load the static files from. Default `/static`. See [A site under a prefix](#a-site-under-a-prefix) |
 | `repo`                                        | yes      | URL of the repository                                                                                                      |
@@ -207,7 +207,7 @@ staticPath: '/css/static'
 
 The layouts, the `Icon` shortcode and the scripts of the package then link `/css/static/css/chassis.min.css` and so on. The files do not move: they stay in `static/` of the `public` directory. Two rewrites make the path answer:
 
-- on the host, from `/css/static/*` to `/static/*` of the site's deployment. chassis-ui.com has one for each Chassis site.
+- on the host, from `/css/static/*` to `/static/*` of the site's deployment.
 - in the site's own `vercel.json`, from `/css/static/(.*)` to `/static/$1`, so that the deployment also works when it is opened directly.
 
 Two kinds of URL are the site's own to move:
@@ -229,6 +229,8 @@ import SingleLayout from '@chassis-ui/docs/layouts/SingleLayout.astro'
 </SingleLayout>
 ```
 
+The `<title>` of a page is its `title` and the `title` of `config.yml`: `About · Chassis UI`. The home page, which is the page at the path of `baseURL`, gets `title` and `subtitle` of `config.yml` instead: `Chassis UI · Design Systems that Scale & Sync`. Its own `title` is used for the social tags only. html-validate reports a `<title>` of more than 70 characters, so keep the two within that.
+
 ## Shortcodes
 
 Every component in `@chassis-ui/docs/shortcodes/` is available in MDX files without an import. So is every component in the site's `src/components/shortcodes/`. A component of the site replaces the package's component of the same name.
@@ -374,6 +376,8 @@ 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.7.0              | `^7.0.0`                   | `>=0.6.0`                  | `>=22.12.0`   | Astro 7.3.5, css 0.6.0, tokens 0.6.0 |
+| 0.6.3              | `^7.0.0`                   | `^0.5.0-0`                 | `>=22.12.0`   | Astro 7.3.5, css 0.5.2, tokens 0.6.0 |
 | 0.6.2              | `^7.0.0`                   | `^0.5.0-0`                 | `>=22.12.0`   | Astro 7.3.5, css 0.5.2, tokens 0.6.0 |
 | 0.6.1              | `^7.0.0`                   | `^0.5.0-0`                 | `>=22.12.0`   | Astro 7.3.5, css 0.5.2, tokens 0.6.0 |
 | 0.6.0              | `^7.0.0`                   | `^0.5.0-0`                 | `>=22.12.0`   | Astro 7.3.5, css 0.5.2, tokens 0.5.3 |

package/UPGRADING.md

@@ -1,5 +1,69 @@
 # Upgrading @chassis-ui/docs
 
+## From 0.6 to 0.7
+
+0.7.0 needs `@chassis-ui/css` 0.6.0 or later. The layouts use the CSS grid of that version,
+`.grid` with `col-span-*`, in place of the flexbox grid, `.row` with `.col-*`. css 0.6
+deprecates the flexbox grid and css 0.7 removes it.
+
+### 1. Update the dependencies
+
+```sh
+pnpm add -D @chassis-ui/docs@^0.7.0 @chassis-ui/css@^0.6.0
+```
+
+css 0.6.0 has changes of its own. Read its
+[changelog](https://github.com/chassis-ui/css/blob/main/packages/css/CHANGELOG.md) first:
+among them, the default gap of `.grid` is now the gutter token of the breakpoint.
+
+### 2. Move your own pages off the flexbox grid
+
+css 0.6 still has the flexbox grid, so the site builds and looks as before without this
+step. css 0.7 removes it. Replace the classes in your own components, pages and content:
+
+| Flexbox grid                             | CSS grid                                           |
+| ---------------------------------------- | -------------------------------------------------- |
+| `row`                                    | `grid`                                             |
+| `col-6`, `md:col-6`                      | `col-span-6`, `col-span-full md:col-span-6`        |
+| `col-12`                                 | `col-span-full`                                    |
+| `row row-cols-1 md:row-cols-3` and `col` | `grid grid-cols-1 md:grid-cols-3`, no class inside |
+| `offset-1`                               | `col-start-2`                                      |
+| `col lg:col-10 mx-auto`                  | `col-span-full lg:col-span-10 lg:col-start-2`      |
+| `g-md`, `gx-md`, `gy-md`                 | `gap-md`, `column-gap-md`, `row-gap-md`            |
+| `col-auto`                               | `d-flex` with `gap-*` on the parent                |
+| `col-6` outside a `row`                  | `w-6/12`                                           |
+| `col` outside a `row`                    | `flex-fill`                                        |
+
+- An item without a span is one column wide. A column that was full width below its
+  breakpoint, such as `md:col-6`, needs `col-span-full` too.
+- A `row` without a gutter class had a gutter of 1.5rem between columns and none between
+  rows. A `grid` has the gutter of the breakpoint in both directions, from 0.5rem to 3rem.
+  Add `row-gap-0` where the items have margins of their own.
+- A grid beside the sidebar, or in a card, is narrower than the viewport that the gutter
+  follows. Give it a `gap-*` class, and `grid-cols-{n}` in place of twelve columns.
+- An auto margin shrinks a grid item to its content. Center an item with `col-start-*`.
+
+The [grid page](https://chassis-ui.com/css/docs/layout/grid/) of Chassis CSS has the full
+table.
+
+### What changes in the package
+
+- **`NavLink` sets no width.** Its item was `nav-item col-6 lg:col-auto`, half of the list
+  below `lg`. It is `nav-item` now, and the lists of the header are a grid of two columns
+  below `lg`. A list of your own that relied on the two columns takes
+  `d-grid grid-cols-2 lg:d-flex`.
+- **`.cxd-gutter` sets `--cx-container-padding`.** It set `--cx-gutter-x`, which the
+  container stops reading in css 0.7. The page margin of the docs layout is 1rem, as
+  before. A rule of your own that set `--cx-gutter-x` on that element sets
+  `--cx-container-padding` to half of it.
+- **The footer and the header of `SingleLayout` take the gutter of the breakpoint.** The
+  footer columns move by a few pixels, 20 at most on the widest screens.
+
+### Check the result
+
+Build the site before and after the upgrade and compare the pages in a browser, at a phone
+width and a desktop width. Apart from the footer columns, nothing of the package moves.
+
 ## From 0.5 to 0.6
 
 0.6.0 is a breaking release. In 0.5 a site had to supply five modules behind a `@libs/*`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chassis-ui/docs",
   "description": "Shared Astro components and layouts for Chassis documentation sites.",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -70,7 +70,7 @@
   },
   "peerDependencies": {
     "@astrojs/markdown-remark": "^7.0.0",
-    "@chassis-ui/css": "^0.5.0-0",
+    "@chassis-ui/css": ">=0.6.0",
     "@pagefind/component-ui": "^1.0.0",
     "@shikijs/transformers": "^4.3.1",
     "astro": "^7.0.0",
@@ -106,8 +106,16 @@
     "unist-util-visit": "^5.1.0"
   },
   "devDependencies": {
+    "@astrojs/markdown-remark": "^7.3.1",
+    "@chassis-ui/css": "^0.6.0",
+    "@pagefind/component-ui": "^1.5.2",
+    "@shikijs/transformers": "^4.5.0",
     "astro": "^7.3.5",
+    "html-validate": "^11.16.1",
+    "rehype-autolink-headings": "^7.1.0",
     "remark-mdx": "^3.1.1",
-    "vfile": "^6.0.3"
+    "sass": "^1.105.1",
+    "vfile": "^6.0.3",
+    "vnu-jar": "^26.10.2"
   }
 }

package/src/components/NavLink.astro

@@ -21,7 +21,7 @@ interface Props {
 const { active, class: className, ...props } = Astro.props
 ---
 
-<li class="nav-item col-6 lg:col-auto">
+<li class="nav-item">
   <a
     aria-current={active ? true : undefined}
     class:list={['nav-link', className, { active }]}

package/src/js/search.js

@@ -16,6 +16,9 @@ import { getInstanceManager } from '@pagefind/component-ui'
 import { staticPath } from 'virtual:chassis-docs/static'
 
 const DIALOG_SELECTOR = '#cxdSearchDialog'
+// The rows that are links. The loading skeleton reuses the class on a `<div>`,
+// which must not be followed, focused or saved as a visit.
+const ITEM_SELECTOR = 'a.cxd-search-item'
 const SUB_RESULTS_LIMIT = 3
 // How long a search may take before we show the loading skeleton. Most queries
 // resolve faster, so the previous results stay on-screen instead of flashing.
@@ -294,12 +297,21 @@ class CxdSearchInput extends HTMLElement {
       return
     }
 
+    // Safari keeps Escape for the search field, even an empty one, and the
+    // dialog never gets its cancel event. With text in the field the key clears
+    // it, as in every browser; without text it closes the dialog here.
+    if (event.key === 'Escape' && !this.input.value) {
+      event.preventDefault()
+      closeSearchDialog(this.closest('dialog'))
+      return
+    }
+
     // Enter follows the first result link.
     // Always preventDefault so the form never implicit-submits.
     if (event.key === 'Enter') {
       event.preventDefault()
       const dialogEl = this.closest('dialog')
-      dialogEl?.querySelector('.cxd-search-item')?.click()
+      dialogEl?.querySelector(ITEM_SELECTOR)?.click()
     }
   }
 
@@ -339,11 +351,11 @@ class CxdSearchResults extends HTMLElement {
   }
 
   _getLinks() {
-    return [...this.querySelectorAll('.cxd-search-item')]
+    return [...this.querySelectorAll(ITEM_SELECTOR)]
   }
 
   _onKeydown(event) {
-    const link = event.target.closest('.cxd-search-item')
+    const link = event.target.closest(ITEM_SELECTOR)
     if (!link) return
 
     const links = this._getLinks()
@@ -460,8 +472,8 @@ class CxdSearchResults extends HTMLElement {
             <div class="icon cxd-search-icon skeleton">
             </div>
             <div class="cxd-search-item-body">
-              <div class="skeleton col-4"></div>
-              <div class="skeleton col-12"></div>
+              <div class="skeleton w-4/12"></div>
+              <div class="skeleton w-100"></div>
             </div>
           </div>
         `
@@ -617,6 +629,29 @@ const isEditableTarget = (target) => {
   return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT'
 }
 
+const TRIGGER_SELECTOR = `[data-cx-toggle="dialog"][data-cx-target="${DIALOG_SELECTOR}"]`
+
+// Puts the caret in the input once the dialog is open. The chassis Dialog
+// focuses the dialog element itself when it opens, so a key typed right after a
+// click on the trigger went nowhere.
+const focusSearchInput = (dialogEl) => {
+  requestAnimationFrame(() => {
+    if (!dialogEl.open) return
+    dialogEl.querySelector('cxd-search-input')?.focus()
+    if (!instance.searchTerm) {
+      dialogEl.querySelector('cxd-search-results')?._renderEmpty?.()
+    }
+  })
+}
+
+const registerTriggerHandler = () => {
+  document.addEventListener('click', (event) => {
+    if (!event.target.closest(TRIGGER_SELECTOR)) return
+    const dialogEl = document.querySelector(DIALOG_SELECTOR)
+    if (dialogEl) focusSearchInput(dialogEl)
+  })
+}
+
 const openSearchDialog = () => {
   const dialogEl = document.querySelector(DIALOG_SELECTOR)
   if (!dialogEl) return
@@ -626,15 +661,24 @@ const openSearchDialog = () => {
     return
   }
 
-  // Native showModal() — CSS @starting-style handles the entry animation without
-  // needing the chassis bundle. Works in both dev (no bundle) and prod.
-  dialogEl.showModal()
-  requestAnimationFrame(() => {
-    dialogEl.querySelector('cxd-search-input')?.focus()
-    if (!instance.searchTerm) {
-      dialogEl.querySelector('cxd-search-results')?._renderEmpty?.()
-    }
-  })
+  // Open through the trigger, so that a shortcut does what the button does: the
+  // chassis Dialog locks the scroll of the body, closes on a click on the
+  // backdrop and gives the focus back. Without the chassis bundle the click does
+  // nothing, and the native showModal() opens the dialog.
+  document.querySelector(TRIGGER_SELECTOR)?.click()
+  if (!dialogEl.open) {
+    dialogEl.showModal()
+    focusSearchInput(dialogEl)
+  }
+}
+
+// Closes through the dismiss button, so that the chassis Dialog animates the
+// dialog out, unlocks the scroll of the body and gives the focus back. Without
+// the chassis bundle the click does nothing, and the native close() closes it.
+const closeSearchDialog = (dialogEl) => {
+  if (!dialogEl?.open) return
+  dialogEl.querySelector('[data-cx-dismiss="dialog"]')?.click()
+  if (dialogEl.open && !dialogEl.classList.contains('hiding')) dialogEl.close()
 }
 
 const registerGlobalShortcuts = () => {
@@ -683,7 +727,7 @@ const setupDialogResetOnClose = () => {
 
 const registerResultLinkHandler = () => {
   document.addEventListener('click', (event) => {
-    const link = event.target.closest('.cxd-search-item')
+    const link = event.target.closest(ITEM_SELECTOR)
     if (!link) return
     const dialogEl = link.closest('dialog')
     if (!dialogEl?.matches(DIALOG_SELECTOR)) return
@@ -697,6 +741,14 @@ const registerResultLinkHandler = () => {
     })
 
     dialogEl.close()
+
+    // The trigger opens the dialog through the chassis Dialog, which locks the
+    // scroll of the body with this class and unlocks it in its own hide(). The
+    // native close() above skips that, so the class stays: when the result is on
+    // the current page, nothing reloads and the page can no longer scroll.
+    if (!document.querySelector('dialog[open]:modal')) {
+      document.body.classList.remove('dialog-open')
+    }
   })
 }
 
@@ -704,6 +756,7 @@ const registerResultLinkHandler = () => {
 
 defineSearchCustomElements()
 registerGlobalShortcuts()
+registerTriggerHandler()
 registerResultLinkHandler()
 
 if (document.readyState === 'loading') {

package/src/layouts/DocsLayout.astro

@@ -146,9 +146,9 @@ if (frontmatter.toc) {
       <div class="cxd-content">
         {
           frontmatter.sections && (
-            <div class="row g-xl">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-xl">
               {frontmatter.sections.map((section: DocSection) => (
-                <div class="md:col-6">
+                <div>
                   <a
                     class="d-block text-decoration-none"
                     href={getDocsPath(

package/src/layouts/SingleLayout.astro

@@ -24,8 +24,8 @@ mainProps['class'] = 'min-vh-100'
 <BaseLayout {...Astro.props} layout="single" overrides={{ main: mainProps }}>
   <header class="py-xl md:py-3xl border-bottom border-subtle">
     <div class="container 2xl">
-      <div class="row">
-        <div class="col lg:col-10 2xl:col-8">
+      <div class="grid">
+        <div class="col-span-full lg:col-span-10 2xl:col-span-8">
           <h1 class="mt-0">{title}</h1>
           <p class="font-lead">{description}</p>
           <slot name="header-content" />

package/src/layouts/footer/Footer.astro

@@ -10,8 +10,8 @@ import { getStaticPath } from '../../site'
 
 <footer class="cxd-footer py-6xl">
   <div class="container 2xl fg-subtle">
-    <div class="row">
-      <div class="md:col-10 lg:col-5 mb-md">
+    <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"
           href="/"
@@ -30,7 +30,7 @@ import { getStaticPath } from '../../site'
           >
         </p>
       </div>
-      <div class="sm:col-4 lg:col-2 lg:offset-1 mb-md">
+      <div class="col-span-full sm:col-span-4 lg:col-span-2 lg:col-start-7 mb-md">
         <p class="h6 mb-xs">Docs</p>
         <ul class="nav">
           <li><a href="/tokens">Design Tokens</a></li>
@@ -41,7 +41,7 @@ import { getStaticPath } from '../../site'
           <li><a href="/icons">Icon Generator</a></li>
         </ul>
       </div>
-      <div class="sm:col-4 lg:col-2 mb-md">
+      <div class="col-span-full sm:col-span-4 lg:col-span-2 mb-md">
         <p class="h6 mb-xs">Github</p>
         <ul class="nav">
           <li><a href="https://github.com/chassis-ui/tokens">Chassis Tokens</a></li>
@@ -52,7 +52,7 @@ import { getStaticPath } from '../../site'
           <li><a href="https://github.com/chassis-ui/icons">Chassis Icons</a></li>
         </ul>
       </div>
-      <div class="sm:col-4 lg:col-2 mb-md">
+      <div class="col-span-full sm:col-span-4 lg:col-span-2 mb-md">
         <p class="h6 mb-xs">Project</p>
         <ul class="nav">
           <li><a href="/about">About</a></li>

package/src/layouts/head/Head.astro

@@ -6,10 +6,12 @@
  */
 
 import { getConfig } from '../../site'
+import { isHomePath } from '../../libs/docs-path'
 import type { Layout } from '../../libs/layout'
 import Stylesheet from './Stylesheet.astro'
 import Favicons from './Favicons.astro'
 import Social from './Social.astro'
+import colorModes from '../../js/color-modes.js?raw'
 import 'virtual:chassis-docs/styles'
 
 interface Props {
@@ -29,7 +31,8 @@ const { description, layout, robots, thumbnail, title } = Astro.props
 
 const canonicalUrl = new URL(Astro.url.pathname, Astro.site)
 
-const isHome = Astro.url.pathname === '/'
+// The home page of a site under a path, such as `/css/`, is not at `/`
+const isHome = isHomePath(getConfig().baseURL, Astro.url.pathname)
 const pageTitle = isHome
   ? `${getConfig().title} · ${getConfig().subtitle}`
   : `${title} · ${getConfig().title}`
@@ -60,7 +63,11 @@ const pageTitle = isHome
 
 {robots && <meta name="robots" content={robots} />}
 
-<script src="../../js/color-modes.js"></script>
+<!--
+  Inline and not a module, so that it sets the theme before the first paint. A module runs
+  after the document is parsed, and a page in dark mode would show light first
+-->
+<script is:inline set:html={colorModes} />
 
 <Stylesheet />
 <slot name="styles" />

package/src/layouts/header/Navigation.astro

@@ -90,14 +90,16 @@ const isActive = (path: string) => {
 
       <hr class="lg:d-none m-0" />
       <div class="drawer-body lg:p-0">
-        <ul class="navbar-nav flex-row flex-wrap cxd-navbar-nav mx-0 lg:mx-md">
+        <ul
+          class="navbar-nav d-grid grid-cols-2 lg:d-flex flex-row flex-wrap cxd-navbar-nav mx-0 lg:mx-md"
+        >
           <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('/react')} href="/react">React</NavLink>
           <NavLink active={isActive('/assets')} href="/assets">Assets</NavLink>
           <NavLink active={isActive('/icons')} href="/icons">Icons</NavLink>
-          <li class="nav-item col-12 lg:col-auto lg:d-flex">
+          <li class="nav-item col-span-full lg:d-flex">
             <div class="vr d-none lg:d-flex my-auto lg:mx-sm"></div>
             <hr class="lg:d-none" />
           </li>
@@ -107,7 +109,9 @@ const isActive = (path: string) => {
 
         <hr class="lg:d-none m-0" />
 
-        <ul class="navbar-nav flex-row flex-wrap lg:ms-auto align-items-center">
+        <ul
+          class="navbar-nav d-grid grid-cols-2 lg:d-flex flex-row flex-wrap lg:ms-auto align-items-center"
+        >
           {
             figmaHandle && (
               <NavLink
@@ -134,7 +138,7 @@ const isActive = (path: string) => {
               </NavLink>
             )
           }
-          <li class="nav-item col-12 lg:col-auto">
+          <li class="nav-item col-span-full">
             <div class="vr d-none lg:d-flex h-100 lg:mx-2xs"></div>
             <hr class="lg:d-none" />
           </li>

package/src/libs/docs-path.ts

@@ -17,3 +17,16 @@ export function joinStaticPath(staticPath: string, file = ''): string {
 
   return name ? `${staticPath}/${name}` : staticPath
 }
+
+/**
+ * Whether a page is the home page of the site: the page at the path of `baseURL`. That is
+ * `/` for `https://chassis-ui.com` and `/css/` for `https://chassis-ui.com/css/`.
+ *
+ * @param baseURL The `baseURL` of the site's `config.yml`.
+ * @param pathname URL path of the page, with or without a trailing slash.
+ */
+export function isHomePath(baseURL: string, pathname: string): boolean {
+  const trim = (value: string) => value.replace(/\/+$/, '')
+
+  return trim(pathname) === trim(new URL(baseURL).pathname)
+}

package/src/scss/_layout.scss

@@ -3,7 +3,7 @@
 
 @layer custom {
   .cxd-gutter {
-    --cx-gutter-x: #{$cxd-gutter-x};
+    --cx-container-padding: #{$cxd-gutter-x * .5};
   }
 
   .cxd-layout {