@chassis-ui/docs 0.6.0 → 0.6.2

package/src/cli/main.js

@@ -0,0 +1,131 @@
+import { parseArgs } from 'node:util'
+import { DEFAULT_BRANCH, buildAssets, syncAssets } from './assets.js'
+import { DEFAULT_PATHS, defaultIgnores } from './files.js'
+import { htmlValidate } from './html-validate.js'
+import { CommandError, log } from './shared.js'
+import { vnu } from './vnu.js'
+
+export const usage = `Usage: chassis-docs <command> [options]
+
+Paths are relative to the working directory. vendor and sync-submodules work from any
+folder of the repository.
+
+Commands:
+  vendor                 Build vendor/assets at the commit that the repository pins
+  sync-submodules        Move vendor/assets to the latest commit of a branch, and build it
+      --branch <name>    The branch of chassis-assets (default: $SUBMODULE_BRANCH or ${DEFAULT_BRANCH})
+  html-validate [paths]  Validate the HTML files in paths (default: _site) with html-validate
+      --config <file>    A JSON config of html-validate, added to the defaults
+  vnu [paths]            Validate paths (default: _site) with the Nu Html Checker. Needs Java
+      --filter <regex>   Leave out the messages that match. Repeatable
+      --filter-file <f>  Read filters from a file, one per line
+
+  Both validators:
+      --ignore <path>        Skip a file or folder as well. Repeatable
+      --no-default-ignore    Check static/icons of each path, which is skipped by default
+  help                   Show this message
+
+html-validate and vnu need the html-validate and vnu-jar packages in the site's devDependencies.`
+
+const ignoreOptions = {
+  ignore: { type: 'string', multiple: true },
+  'no-default-ignore': { type: 'boolean' }
+}
+
+// The static/icons folder of each path, unless left out, and the paths of --ignore.
+function ignoresOf(values, paths) {
+  return [...(values['no-default-ignore'] ? [] : defaultIgnores(paths)), ...(values.ignore ?? [])]
+}
+
+const commands = {
+  vendor: {
+    options: {},
+    run: () => {
+      buildAssets()
+      return 0
+    }
+  },
+  'sync-submodules': {
+    options: { branch: { type: 'string' } },
+    run: ({ values }) => {
+      syncAssets({ branch: values.branch ?? process.env.SUBMODULE_BRANCH ?? DEFAULT_BRANCH })
+      return 0
+    }
+  },
+  'html-validate': {
+    options: { config: { type: 'string' }, ...ignoreOptions },
+    positionals: true,
+    run: ({ values, paths }) =>
+      htmlValidate({
+        paths,
+        ignores: ignoresOf(values, paths),
+        config: values.config
+      })
+  },
+  vnu: {
+    options: {
+      filter: { type: 'string', multiple: true },
+      'filter-file': { type: 'string' },
+      ...ignoreOptions
+    },
+    positionals: true,
+    run: ({ values, paths }) =>
+      vnu({
+        paths,
+        ignores: ignoresOf(values, paths),
+        filters: values.filter,
+        filterFile: values['filter-file']
+      })
+  }
+}
+
+/**
+ * Runs a command and returns its exit code.
+ * @param {string[]} argv The arguments after `chassis-docs`
+ * @returns {Promise<number>}
+ */
+export async function main(argv) {
+  const [name, ...args] = argv
+
+  if (!name || ['help', '--help', '-h'].includes(name)) {
+    console.log(usage)
+    return 0
+  }
+
+  const command = commands[name]
+
+  try {
+    if (!Object.hasOwn(commands, name)) {
+      throw new CommandError(`Unknown command '${name}'. Run chassis-docs help for the list.`)
+    }
+
+    let parsed
+
+    try {
+      parsed = parseArgs({
+        args,
+        options: { ...command.options, help: { type: 'boolean', short: 'h' } },
+        allowPositionals: command.positionals ?? false,
+        strict: true
+      })
+    } catch (error) {
+      throw new CommandError(`${error.message}. Run chassis-docs help for the options.`, {
+        cause: error
+      })
+    }
+
+    if (parsed.values.help) {
+      console.log(usage)
+      return 0
+    }
+
+    const paths = parsed.positionals.length > 0 ? parsed.positionals : DEFAULT_PATHS
+
+    return await command.run({ values: parsed.values, paths })
+  } catch (error) {
+    if (!(error instanceof CommandError)) throw error
+
+    log(error.message, 'error')
+    return 1
+  }
+}

package/src/cli/shared.js

@@ -0,0 +1,69 @@
+import { execFileSync } from 'node:child_process'
+import { styleText } from 'node:util'
+
+/** An error that the command reports in one line, without a stack trace. */
+export class CommandError extends Error {}
+
+const colors = { info: 'cyan', success: 'green', warning: 'yellow', error: 'red' }
+
+/**
+ * Prints a message in the colour of its type. Errors and warnings go to stderr.
+ * @param {string} message
+ * @param {'info' | 'success' | 'warning' | 'error'} [type]
+ */
+export function log(message, type = 'info') {
+  const stream = type === 'error' || type === 'warning' ? process.stderr : process.stdout
+
+  stream.write(`${styleText(colors[type], message)}\n`)
+}
+
+/**
+ * Runs a program without a shell, except on Windows, where `pnpm` is a `.cmd` file.
+ * Returns what it printed when `quiet` is set, and prints it otherwise.
+ * @param {string} command
+ * @param {string[]} args
+ * @param {{ cwd?: string, quiet?: boolean }} [options]
+ * @returns {string}
+ */
+export function run(command, args, { cwd = process.cwd(), quiet = false } = {}) {
+  if (!quiet) {
+    log(`$ ${[command, ...args].join(' ')}`)
+  }
+
+  try {
+    return (
+      execFileSync(command, args, {
+        cwd,
+        encoding: 'utf8',
+        stdio: quiet ? 'pipe' : 'inherit',
+        shell: process.platform === 'win32'
+      }) ?? ''
+    )
+  } catch (error) {
+    const stderr = typeof error.stderr === 'string' ? error.stderr.trim() : ''
+
+    throw new CommandError(
+      `${[command, ...args].join(' ')} failed${stderr ? `:\n${stderr}` : ''}`,
+      { cause: error }
+    )
+  }
+}
+
+/**
+ * Imports an optional peer dependency, or says how to install it.
+ * @param {string} name
+ */
+export async function importPeer(name) {
+  try {
+    return await import(name)
+  } catch (error) {
+    if (error.code === 'ERR_MODULE_NOT_FOUND' && error.message.includes(`'${name}'`)) {
+      throw new CommandError(
+        `${name} is not installed. Add it to the devDependencies of the site: pnpm add -D ${name}`,
+        { cause: error }
+      )
+    }
+
+    throw error
+  }
+}

package/src/cli/vnu.js

@@ -0,0 +1,94 @@
+import { execFile, spawn } from 'node:child_process'
+import fs from 'node:fs'
+import { CommandError, importPeer, log } from './shared.js'
+import { expandPaths } from './files.js'
+
+/** Messages that every Chassis site produces. Astro writes void elements with a slash. */
+export const DEFAULT_FILTERS = ['Trailing slash on void elements.*']
+
+/**
+ * Reads a filter file: one regular expression per line. Blank lines and lines that start
+ * with `#` are skipped.
+ * @param {string} file
+ */
+export function readFilterFile(file) {
+  let text
+
+  try {
+    text = fs.readFileSync(file, 'utf8')
+  } catch (error) {
+    throw new CommandError(`Could not read ${file}: ${error.message}`, { cause: error })
+  }
+
+  return text
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter((line) => line && !line.startsWith('#'))
+}
+
+/**
+ * The arguments for `java`.
+ * @param {{ jar: string, paths: string[], filters: string[], is32bit?: boolean }} options
+ */
+export function vnuArgs({ jar, paths, filters, is32bit = false }) {
+  return [
+    // 32-bit Java needs a smaller thread stack
+    ...(is32bit ? ['-Xss512k'] : []),
+    '-jar',
+    jar,
+    '--skip-non-html',
+    '--Werror',
+    '--filterpattern',
+    filters.join('|'),
+    ...paths
+  ]
+}
+
+function javaVersion() {
+  return new Promise((resolve) => {
+    // `java -version` prints to stderr
+    execFile('java', ['-version'], (error, _stdout, stderr) => resolve(error ? null : stderr))
+  })
+}
+
+/**
+ * Validates `paths` with the Nu Html Checker. Skips, and succeeds, when Java is missing.
+ * Returns the exit code.
+ * @param {{ paths: string[], ignores: string[], filters?: string[], filterFile?: string }} options
+ */
+export async function vnu({ paths, ignores, filters = [], filterFile }) {
+  const { default: jar } = await importPeer('vnu-jar')
+  const allFilters = [
+    ...DEFAULT_FILTERS,
+    ...filters,
+    ...(filterFile ? readFilterFile(filterFile) : [])
+  ]
+  const targets = expandPaths(paths, ignores)
+  const version = await javaVersion()
+
+  if (version === null) {
+    log('Java is not installed. Skipping the Nu Html Checker.', 'warning')
+    return 0
+  }
+
+  log('Validating HTML with the Nu Html Checker')
+
+  const args = vnuArgs({
+    jar,
+    paths: targets,
+    filters: allFilters,
+    is32bit: !/64-Bit/.test(version)
+  })
+
+  const code = await new Promise((resolve) => {
+    spawn('java', args, { stdio: 'inherit' }).on('exit', (exitCode) => resolve(exitCode ?? 1))
+  })
+
+  if (code === 0) {
+    log('Every HTML file is valid.', 'success')
+  } else {
+    log('The Nu Html Checker found errors.', 'error')
+  }
+
+  return code
+}

package/src/components/shortcodes/Code.astro

@@ -226,7 +226,7 @@ if (codeToDisplay && detectedLang) {
       ) : (
         <div class:list={['cxd-code', { 'line-numbers': lineNumbers }]}>
           {/* prettier-ignore */}
-          <pre class={className}><slot /></pre>
+          <pre class={className} tabindex="0"><slot /></pre>
         </div>
       )}
     </>
@@ -279,7 +279,7 @@ if (codeToDisplay && detectedLang) {
       ) : (
         <div class:list={['cxd-code', { 'line-numbers': lineNumbers }]}>
           {/* prettier-ignore */}
-          <pre class={className}><slot /></pre>
+          <pre class={className} tabindex="0"><slot /></pre>
         </div>
       )}
     </div>

package/src/components/shortcodes/Example.astro

@@ -3,6 +3,7 @@ import { replacePlaceholdersInHtml } from '../../libs/placeholder'
 import { replaceIconsInHtml } from '../../libs/icon'
 import Code from './Code.astro'
 import Icon from './Icon.astro'
+import { getStaticPath } from '../../site'
 
 interface Props {
   /**
@@ -69,7 +70,7 @@ const {
 
 let markup = Array.isArray(code) ? code.join('\n') : code
 markup = replacePlaceholdersInHtml(markup)
-markup = replaceIconsInHtml(markup)
+markup = replaceIconsInHtml(markup, getStaticPath())
 markup = markup
   .split('\n')
   .map((line) => line.trimEnd())

package/src/components/shortcodes/Icon.astro

@@ -1,4 +1,6 @@
 ---
+import { getStaticPath } from '../../site'
+
 /**
  * Icon
  *
@@ -29,7 +31,7 @@ const {
   size = 24,
   font = false,
   title,
-  sprite = '/static/icons/chassis-icons.svg',
+  sprite = getStaticPath('icons/chassis-icons.svg'),
   ...rest
 } = Astro.props
 ---

package/src/components/shortcodes/ResizableExample.astro

@@ -3,6 +3,7 @@ import { replacePlaceholdersInHtml } from '../../libs/placeholder'
 import { replaceIconsInHtml } from '../../libs/icon'
 import Code from './Code.astro'
 import Icon from './Icon.astro'
+import { getStaticPath } from '../../site'
 
 interface Props {
   /**
@@ -67,7 +68,7 @@ const {
 
 let markup = Array.isArray(code) ? code.join('\n') : code
 markup = replacePlaceholdersInHtml(markup)
-markup = replaceIconsInHtml(markup)
+markup = replaceIconsInHtml(markup, getStaticPath())
 
 // The resizable container needs `overflow: hidden` for the CSS `resize` handle
 // to work, which clips popovers like menus/dropdowns when they open. Render them

package/src/integration.ts

@@ -90,6 +90,10 @@ declare module 'virtual:chassis-docs/paths' {
   export const packageRoot: string
 }
 
+declare module 'virtual:chassis-docs/static' {
+  export const staticPath: string
+}
+
 declare module 'virtual:chassis-docs/styles' {}
 `
 
@@ -234,6 +238,8 @@ export function chassisDocs<TSchema extends z.ZodType = typeof configSchema>(
                 paths: Object.entries(paths)
                   .map(([name, value]) => `export const ${name} = ${JSON.stringify(value)}`)
                   .join('\n'),
+                // A config that was not loaded with `loadConfig()` may lack the default.
+                static: `export const staticPath = ${JSON.stringify(config.staticPath ?? '/static')}`,
                 styles: styles.map((file) => `import ${JSON.stringify(file)}`).join('\n')
               })
             ]

package/src/js/example-mode.js

@@ -1,4 +1,5 @@
 import { Tooltip } from '@chassis-ui/css'
+import { staticPath } from 'virtual:chassis-docs/static'
 
 // Helper to detect the user's preferred theme
 function getPreferredTheme() {
@@ -43,7 +44,7 @@ function toggleTheme(button) {
   const iconUse = button.querySelector('use')
   if (iconUse) {
     const iconHref = newTheme === 'dark' ? 'sun-solid' : 'moon-solid'
-    iconUse.setAttribute('href', `/static/icons/chassis-icons.svg#${iconHref}`)
+    iconUse.setAttribute('href', `${staticPath}/icons/chassis-icons.svg#${iconHref}`)
   }
 }
 
@@ -64,7 +65,7 @@ document.addEventListener('DOMContentLoaded', () => {
       const example = button.closest('.cxd-example-snippet')?.querySelector('.cxd-example')
       const currentTheme = example?.getAttribute('data-cx-theme') || preferredTheme
       const iconHref = currentTheme === 'dark' ? 'sun-solid' : 'moon-solid'
-      iconUse.setAttribute('href', `/static/icons/chassis-icons.svg#${iconHref}`)
+      iconUse.setAttribute('href', `${staticPath}/icons/chassis-icons.svg#${iconHref}`)
     }
 
     // Add event listener if not already set through onclick

package/src/js/search.js

@@ -13,6 +13,7 @@
 // is needed here.
 
 import { getInstanceManager } from '@pagefind/component-ui'
+import { staticPath } from 'virtual:chassis-docs/static'
 
 const DIALOG_SELECTOR = '#cxdSearchDialog'
 const SUB_RESULTS_LIMIT = 3
@@ -233,7 +234,7 @@ const escapeHtml = (value) => String(value ?? '').replace(/[&<>"']/g, (char) =>
 const renderItem = ({ url, titleHtml, excerptHtml = '', icon, sub = false }) => `
   <a class="cxd-search-item${sub ? ' cxd-search-subitem' : ''}" href="${escapeHtml(url)}">
     <svg class="icon cxd-search-item-icon" width="16" height="16" aria-hidden="true">
-      <use href="/static/icons/chassis-icons.svg#${icon}"></use>
+      <use href="${staticPath}/icons/chassis-icons.svg#${icon}"></use>
     </svg>
     <div class="cxd-search-item-body">
       <div class="cxd-search-item-title">${titleHtml}</div>

package/src/layouts/BaseLayout.astro

@@ -12,6 +12,7 @@ import Head from './head/Head.astro'
 import Header from './header/Header.astro'
 import Scripts from './footer/Scripts.astro'
 import Footer from './footer/Footer.astro'
+import Consent from './footer/Consent.astro'
 import { stripMarkdown } from '../libs/utils'
 
 // The following props can be directly passed to the base layout component from any page or layout extending it,
@@ -25,7 +26,8 @@ type Props = {
   overrides?: {
     body?: LayoutOverridesHTMLAttributes<'body'>
     // Note that main can also be overridden by the Astro slot named "main" and that the slot will take precedence over
-    // any override.
+    // any override. `<main>` has `id="content"`, the target of the skip link in the header. A page that fills the "main"
+    // slot gives that id to an element of its own.
     main?: LayoutOverridesHTMLAttributes<'main'>
   }
   // An override for the page title. If not defined, the title will either be the content of the `title` frontmatter
@@ -61,7 +63,7 @@ const thumbnail = frontmatter?.thumbnail
   : 'static/images/social-image.png'
 
 const bodyProps = overrides?.body ?? {}
-const mainProps = overrides?.main ?? {}
+const mainProps = { id: 'content', ...overrides?.main }
 ---
 
 <!doctype html>
@@ -90,6 +92,7 @@ const mainProps = overrides?.main ?? {}
     }
 
     <Footer />
+    <Consent />
 
     <Scripts layout={layout}>
       <slot name="scripts" slot="scripts" />

package/src/layouts/footer/Consent.astro

@@ -0,0 +1,135 @@
+---
+/**
+ * Consent
+ *
+ * Asks before Google Analytics loads. Rendered in production builds, when
+ * `analytics.googleId` is set in `config.yml`. Nothing is loaded and no cookie is set until
+ * the visitor accepts. The choice is kept in `localStorage`, so every Chassis site served
+ * from the same host shares it. The "Cookie settings" button of the footer opens the
+ * banner again.
+ */
+
+import { getConfig } from '../../site'
+
+const isProd = import.meta.env.PROD
+const { googleId } = getConfig().analytics
+---
+
+{
+  isProd && googleId && (
+    <section class="cxd-consent" aria-label="Cookie consent" data-google-id={googleId} hidden>
+      <div class="container 2xl">
+        <div class="notification default shadow-lg d-flex flex-wrap align-items-center gap-md p-md">
+          <p class="mb-0 flex-grow-1">
+            We would like to count visits with Google Analytics, which sets cookies. Nothing is sent
+            to Google unless you accept. <a href="/privacy/">Privacy notice</a>
+          </p>
+          <div class="d-flex gap-sm">
+            <button type="button" class="button primary" data-consent="granted">
+              Accept
+            </button>
+            <button type="button" class="button default" data-consent="denied">
+              Decline
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+<script>
+  type AnalyticsWindow = Window &
+    Record<`ga-disable-${string}`, boolean> & {
+      dataLayer?: unknown[]
+      gtag?: (...args: unknown[]) => void
+    }
+
+  const KEY = 'chassis-analytics-consent'
+  const analytics = window as unknown as AnalyticsWindow
+  const banner = document.querySelector<HTMLElement>('.cxd-consent')
+  const googleId = banner?.dataset.googleId
+
+  function readChoice(): string | null {
+    try {
+      return localStorage.getItem(KEY)
+    } catch {
+      return null
+    }
+  }
+
+  function saveChoice(choice: string) {
+    try {
+      localStorage.setItem(KEY, choice)
+    } catch {
+      // Without storage the banner shows again on the next page
+    }
+  }
+
+  function loadAnalytics(id: string) {
+    analytics[`ga-disable-${id}`] = false
+    if (analytics.gtag) return
+
+    analytics.dataLayer ??= []
+    analytics.gtag = function () {
+      // gtag.js reads the `arguments` object, not an array
+      // eslint-disable-next-line prefer-rest-params
+      analytics.dataLayer!.push(arguments)
+    }
+    analytics.gtag('js', new Date())
+    analytics.gtag('config', id)
+
+    const script = document.createElement('script')
+    script.async = true
+    script.src = `https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(id)}`
+    document.head.append(script)
+  }
+
+  // Stops Google Analytics on this page and deletes its cookies, which it sets on the
+  // registrable domain, such as `.chassis-ui.com`
+  function stopAnalytics(id: string) {
+    analytics[`ga-disable-${id}`] = true
+
+    const labels = location.hostname.split('.')
+    const domains = labels.slice(0, -1).map((_, index) => labels.slice(index).join('.'))
+
+    for (const cookie of document.cookie.split(';')) {
+      const name = cookie.split('=')[0].trim()
+
+      if (!name.startsWith('_ga')) continue
+
+      for (const domain of ['', ...domains.map((d) => `; domain=.${d}`)]) {
+        document.cookie = `${name}=; max-age=0; path=/${domain}`
+      }
+    }
+  }
+
+  if (banner && googleId) {
+    const choice = readChoice()
+
+    if (choice === 'granted') loadAnalytics(googleId)
+    else if (choice !== 'denied') banner.hidden = false
+
+    banner.addEventListener('click', (event) => {
+      const button = (event.target as Element).closest<HTMLElement>('[data-consent]')
+
+      if (!button) return
+
+      const decision = button.dataset.consent!
+
+      saveChoice(decision)
+      banner.hidden = true
+
+      if (decision === 'granted') loadAnalytics(googleId)
+      else stopAnalytics(googleId)
+    })
+
+    for (const opener of document.querySelectorAll<HTMLElement>('[data-consent-open]')) {
+      opener.hidden = false
+      opener.addEventListener('click', () => {
+        banner.hidden = false
+        banner.querySelector<HTMLElement>('[data-consent]')?.focus()
+      })
+    }
+  }
+</script>

package/src/layouts/footer/Footer.astro

@@ -4,6 +4,8 @@
  *
  * Site footer with logo, license information, and navigation links.
  */
+
+import { getStaticPath } from '../../site'
 ---
 
 <footer class="cxd-footer py-6xl">
@@ -15,20 +17,27 @@
           href="/"
           aria-label="Chassis"
         >
-          <img src="/static/images/site-logo.svg" alt="Chassis UI" height="32" />
+          <img src={getStaticPath('images/site-logo.svg')} alt="Chassis UI" height="32" />
         </a>
-        <p>
+        <p class="mb-xs">
           This project is licensed under the MIT License, which allows for free use, modification,
           and distribution of the software.
         </p>
+        <p>
+          <a href="/privacy/" class="fg-main">Privacy</a>
+          <button hidden data-consent-open type="button" class="cxd-footer-link fg-main ms-md"
+            >Cookie settings</button
+          >
+        </p>
       </div>
       <div class="sm:col-4 lg:col-2 lg:offset-1 mb-md">
         <p class="h6 mb-xs">Docs</p>
         <ul class="nav">
           <li><a href="/tokens">Design Tokens</a></li>
-          <li><a href="/assets">Asset Distributor</a></li>
           <li><a href="/figma">Figma Library</a></li>
           <li><a href="/css">CSS Framework</a></li>
+          <li><a href="/react">React Components</a></li>
+          <li><a href="/assets">Asset Distributor</a></li>
           <li><a href="/icons">Icon Generator</a></li>
         </ul>
       </div>
@@ -36,9 +45,10 @@
         <p class="h6 mb-xs">Github</p>
         <ul class="nav">
           <li><a href="https://github.com/chassis-ui/tokens">Chassis Tokens</a></li>
-          <li><a href="https://github.com/chassis-ui/assets">Chassis Assets</a></li>
           <li><a href="https://github.com/chassis-ui/figma">Chassis Figma</a></li>
           <li><a href="https://github.com/chassis-ui/css">Chassis CSS</a></li>
+          <li><a href="https://github.com/chassis-ui/react">Chassis React</a></li>
+          <li><a href="https://github.com/chassis-ui/assets">Chassis Assets</a></li>
           <li><a href="https://github.com/chassis-ui/icons">Chassis Icons</a></li>
         </ul>
       </div>

package/src/layouts/head/Favicons.astro

@@ -4,12 +4,13 @@
  *
  * Favicon and app icon link tags for various platforms.
  */
+
+import { getStaticPath } from '../../site'
 ---
 
-<link rel="apple-touch-icon" href={'/static/images/apple-touch-icon.png'} sizes="180x180" />
-<link rel="icon" href={'/static/images/favicon-32x32.png'} sizes="32x32" type="image/png" />
-<link rel="icon" href={'/static/images/favicon-16x16.png'} sizes="16x16" type="image/png" />
-<link rel="manifest" href={'/static/images/manifest.json'} />
-<link rel="mask-icon" href={'/static/images/safari-pinned-tab.svg'} color="#712cf9" />
-<link rel="icon" href={'/static/images/favicon.png'} />
+<link rel="apple-touch-icon" href={getStaticPath('images/apple-touch-icon.png')} sizes="180x180" />
+<link rel="icon" href={getStaticPath('images/favicon-32x32.png')} sizes="32x32" type="image/png" />
+<link rel="icon" href={getStaticPath('images/favicon-16x16.png')} sizes="16x16" type="image/png" />
+<link rel="manifest" href={getStaticPath('images/manifest.json')} />
+<link rel="icon" href={getStaticPath('images/favicon.png')} />
 <meta name="theme-color" content="#00A4CC" />