@chassis-ui/docs 0.7.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/README.md +48 -6
- package/UPGRADING.md +76 -0
- package/package.json +2 -2
- package/src/cli/assets.js +57 -9
- package/src/cli/main.js +32 -5
- package/src/components/DocsSidebar.astro +100 -102
- package/src/components/FeatureCard.astro +5 -7
- package/src/components/TableOfContents.astro +10 -12
- package/src/components/ThemeToggler.astro +5 -2
- package/src/components/shortcodes/Blockquote.astro +11 -13
- package/src/components/shortcodes/CSSOnly.astro +3 -3
- package/src/components/shortcodes/Code.astro +104 -108
- package/src/components/shortcodes/DeprecatedIn.astro +1 -3
- package/src/components/shortcodes/Example.astro +29 -33
- package/src/components/shortcodes/Icon.astro +19 -21
- package/src/components/shortcodes/InFigma.astro +3 -3
- package/src/components/shortcodes/Placeholder.astro +14 -16
- package/src/components/shortcodes/ResizableExample.astro +3 -5
- package/src/layouts/BaseLayout.astro +14 -20
- package/src/layouts/DocsLayout.astro +51 -52
- package/src/layouts/footer/Consent.astro +18 -20
- package/src/layouts/footer/Footer.astro +57 -21
- package/src/layouts/head/Head.astro +7 -10
- package/src/layouts/header/Navigation.astro +71 -60
- package/src/layouts/header/SearchDialog.astro +10 -4
- package/src/layouts/header/SearchTrigger.astro +2 -4
- package/src/layouts/header/Skippy.astro +8 -8
|
@@ -15,28 +15,26 @@ const isProd = import.meta.env.PROD
|
|
|
15
15
|
const { googleId } = getConfig().analytics
|
|
16
16
|
---
|
|
17
17
|
|
|
18
|
-
{
|
|
19
|
-
|
|
20
|
-
<
|
|
21
|
-
<div class="
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
</button>
|
|
34
|
-
</div>
|
|
18
|
+
{isProd && googleId && (
|
|
19
|
+
<section class="cxd-consent" aria-label="Cookie consent" data-google-id={googleId} hidden>
|
|
20
|
+
<div class="container 2xl">
|
|
21
|
+
<div class="notification default shadow-lg d-flex flex-wrap align-items-center gap-md p-md">
|
|
22
|
+
<p class="mb-0 flex-grow-1">
|
|
23
|
+
We would like to count visits with Google Analytics, which sets cookies. Nothing is sent
|
|
24
|
+
to Google unless you accept. <a href="/privacy/">Privacy notice</a>
|
|
25
|
+
</p>
|
|
26
|
+
<div class="d-flex gap-sm">
|
|
27
|
+
<button type="button" class="button primary" data-consent="granted">
|
|
28
|
+
Accept
|
|
29
|
+
</button>
|
|
30
|
+
<button type="button" class="button default" data-consent="denied">
|
|
31
|
+
Decline
|
|
32
|
+
</button>
|
|
35
33
|
</div>
|
|
36
34
|
</div>
|
|
37
|
-
</
|
|
38
|
-
|
|
39
|
-
}
|
|
35
|
+
</div>
|
|
36
|
+
</section>
|
|
37
|
+
)}
|
|
40
38
|
|
|
41
39
|
<script>
|
|
42
40
|
type AnalyticsWindow = Window &
|
|
@@ -24,42 +24,78 @@ import { getStaticPath } from '../../site'
|
|
|
24
24
|
and distribution of the software.
|
|
25
25
|
</p>
|
|
26
26
|
<p>
|
|
27
|
-
<a href="/privacy/" class="fg-main">
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
>
|
|
27
|
+
<a href="/privacy/" class="fg-main">
|
|
28
|
+
Privacy
|
|
29
|
+
</a>
|
|
30
|
+
<button hidden data-consent-open type="button" class="cxd-footer-link fg-main ms-md">
|
|
31
|
+
Cookie settings
|
|
32
|
+
</button>
|
|
31
33
|
</p>
|
|
32
34
|
</div>
|
|
33
35
|
<div class="col-span-full sm:col-span-4 lg:col-span-2 lg:col-start-7 mb-md">
|
|
34
36
|
<p class="h6 mb-xs">Docs</p>
|
|
35
37
|
<ul class="nav">
|
|
36
|
-
<li
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<li
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
<li>
|
|
39
|
+
<a href="/tokens">Design Tokens</a>
|
|
40
|
+
</li>
|
|
41
|
+
<li>
|
|
42
|
+
<a href="/figma">Figma Library</a>
|
|
43
|
+
</li>
|
|
44
|
+
<li>
|
|
45
|
+
<a href="/css">CSS Framework</a>
|
|
46
|
+
</li>
|
|
47
|
+
<li>
|
|
48
|
+
<a href="/react">React Components</a>
|
|
49
|
+
</li>
|
|
50
|
+
<li>
|
|
51
|
+
<a href="/assets">Asset Distributor</a>
|
|
52
|
+
</li>
|
|
53
|
+
<li>
|
|
54
|
+
<a href="/icons">Icon Generator</a>
|
|
55
|
+
</li>
|
|
42
56
|
</ul>
|
|
43
57
|
</div>
|
|
44
58
|
<div class="col-span-full sm:col-span-4 lg:col-span-2 mb-md">
|
|
45
59
|
<p class="h6 mb-xs">Github</p>
|
|
46
60
|
<ul class="nav">
|
|
47
|
-
<li
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
<li
|
|
51
|
-
|
|
52
|
-
|
|
61
|
+
<li>
|
|
62
|
+
<a href="https://github.com/chassis-ui/tokens">Chassis Tokens</a>
|
|
63
|
+
</li>
|
|
64
|
+
<li>
|
|
65
|
+
<a href="https://github.com/chassis-ui/figma">Chassis Figma</a>
|
|
66
|
+
</li>
|
|
67
|
+
<li>
|
|
68
|
+
<a href="https://github.com/chassis-ui/css">Chassis CSS</a>
|
|
69
|
+
</li>
|
|
70
|
+
<li>
|
|
71
|
+
<a href="https://github.com/chassis-ui/react">Chassis React</a>
|
|
72
|
+
</li>
|
|
73
|
+
<li>
|
|
74
|
+
<a href="https://github.com/chassis-ui/assets">Chassis Assets</a>
|
|
75
|
+
</li>
|
|
76
|
+
<li>
|
|
77
|
+
<a href="https://github.com/chassis-ui/icons">Chassis Icons</a>
|
|
78
|
+
</li>
|
|
53
79
|
</ul>
|
|
54
80
|
</div>
|
|
55
81
|
<div class="col-span-full sm:col-span-4 lg:col-span-2 mb-md">
|
|
56
82
|
<p class="h6 mb-xs">Project</p>
|
|
57
83
|
<ul class="nav">
|
|
58
|
-
<li
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<li
|
|
62
|
-
|
|
84
|
+
<li>
|
|
85
|
+
<a href="/about">About</a>
|
|
86
|
+
</li>
|
|
87
|
+
<li>
|
|
88
|
+
<a href="/blog">Blog</a>
|
|
89
|
+
</li>
|
|
90
|
+
<li>
|
|
91
|
+
<a href="/examples">Examples</a>
|
|
92
|
+
</li>
|
|
93
|
+
<li>
|
|
94
|
+
<a href="https://github.com/chassis-ui">Contribute</a>
|
|
95
|
+
</li>
|
|
96
|
+
<li>
|
|
97
|
+
<a href="https://x.com/chassis_ui">@chassis_ui on X</a>
|
|
98
|
+
</li>
|
|
63
99
|
</ul>
|
|
64
100
|
</div>
|
|
65
101
|
</div>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* HTML head section with meta tags, stylesheets, and SEO configuration.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import { getConfig } from '../../site'
|
|
8
|
+
import { getConfig, getStaticPath } from '../../site'
|
|
9
9
|
import { isHomePath } from '../../libs/docs-path'
|
|
10
10
|
import type { Layout } from '../../libs/layout'
|
|
11
11
|
import Stylesheet from './Stylesheet.astro'
|
|
@@ -41,16 +41,14 @@ const pageTitle = isHome
|
|
|
41
41
|
<meta charset="UTF-8" />
|
|
42
42
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
43
43
|
|
|
44
|
-
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
45
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
46
44
|
<!--
|
|
47
|
-
|
|
48
|
-
not
|
|
45
|
+
The fonts of the text, display and code roles, from the docs build of chassis-assets.
|
|
46
|
+
Links, not `@import`s in the styles, so that the browser finds them with the page and
|
|
47
|
+
not after the stylesheet that imports them
|
|
49
48
|
-->
|
|
50
|
-
<link
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
/>
|
|
49
|
+
<link rel="stylesheet" href={getStaticPath('fonts/text.css')} />
|
|
50
|
+
<link rel="stylesheet" href={getStaticPath('fonts/display.css')} />
|
|
51
|
+
<link rel="stylesheet" href={getStaticPath('fonts/code.css')} />
|
|
54
52
|
|
|
55
53
|
<meta name="description" content={description} />
|
|
56
54
|
|
|
@@ -68,7 +66,6 @@ const pageTitle = isHome
|
|
|
68
66
|
after the document is parsed, and a page in dark mode would show light first
|
|
69
67
|
-->
|
|
70
68
|
<script is:inline set:html={colorModes} />
|
|
71
|
-
|
|
72
69
|
<Stylesheet />
|
|
73
70
|
<slot name="styles" />
|
|
74
71
|
<Favicons />
|
|
@@ -35,23 +35,21 @@ const isActive = (path: string) => {
|
|
|
35
35
|
|
|
36
36
|
<header class="navbar translucent lg:navbar-expand cxd-navbar sticky-top">
|
|
37
37
|
<nav class="container 2xl" aria-label="Site navigation">
|
|
38
|
-
{
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
)
|
|
54
|
-
}
|
|
38
|
+
{layout === 'docs' && (
|
|
39
|
+
<div class="cxd-navbar-toggle">
|
|
40
|
+
<button
|
|
41
|
+
class="button icon-only navbar-toggler"
|
|
42
|
+
type="button"
|
|
43
|
+
data-cx-toggle="drawer"
|
|
44
|
+
data-cx-target="#cxdSidebar"
|
|
45
|
+
aria-controls="cxdSidebar"
|
|
46
|
+
aria-label="Toggle docs navigation"
|
|
47
|
+
>
|
|
48
|
+
<Icon name="bars-solid" class="icon-lg" />
|
|
49
|
+
<span class="d-none lg:d-inline fs-6 pe-2xs">Browse</span>
|
|
50
|
+
</button>
|
|
51
|
+
</div>
|
|
52
|
+
)}
|
|
55
53
|
{layout !== 'docs' && <div class="lg:d-none" style="width: 4.25rem;" />}
|
|
56
54
|
|
|
57
55
|
<a class="navbar-brand m-0 py-sm lg:me-md" href="/" aria-label="Chassis">
|
|
@@ -59,7 +57,9 @@ const isActive = (path: string) => {
|
|
|
59
57
|
</a>
|
|
60
58
|
|
|
61
59
|
<div class="d-flex">
|
|
62
|
-
<div class="cxd-search"
|
|
60
|
+
<div class="cxd-search">
|
|
61
|
+
<SearchTrigger placeholder="Search docs…" />
|
|
62
|
+
</div>
|
|
63
63
|
|
|
64
64
|
<button
|
|
65
65
|
class="button icon-only navbar-toggler"
|
|
@@ -79,65 +79,76 @@ const isActive = (path: string) => {
|
|
|
79
79
|
aria-labelledby="cxdNavbarOffcanvasLabel"
|
|
80
80
|
>
|
|
81
81
|
<div class="drawer-header">
|
|
82
|
-
<h2 class="drawer-title" id="cxdNavbarOffcanvasLabel">
|
|
82
|
+
<h2 class="drawer-title" id="cxdNavbarOffcanvasLabel">
|
|
83
|
+
Chassis
|
|
84
|
+
</h2>
|
|
83
85
|
<button
|
|
84
86
|
type="button"
|
|
85
87
|
class="close-button close-button-white"
|
|
86
88
|
data-cx-dismiss="drawer"
|
|
87
89
|
aria-label="Close"
|
|
88
|
-
data-cx-target="#cxdNavbar"
|
|
90
|
+
data-cx-target="#cxdNavbar"
|
|
91
|
+
></button>
|
|
89
92
|
</div>
|
|
90
93
|
|
|
91
94
|
<hr class="lg:d-none m-0" />
|
|
92
95
|
<div class="drawer-body lg:p-0">
|
|
93
|
-
<ul
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
<NavLink active={isActive('/figma')} href="/figma">
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
<NavLink active={isActive('/
|
|
101
|
-
|
|
96
|
+
<ul class="navbar-nav d-grid grid-cols-2 lg:d-flex flex-row flex-wrap cxd-navbar-nav mx-0 lg:mx-md">
|
|
97
|
+
<NavLink active={isActive('/tokens')} href="/tokens">
|
|
98
|
+
Tokens
|
|
99
|
+
</NavLink>
|
|
100
|
+
<NavLink active={isActive('/figma')} href="/figma">
|
|
101
|
+
Figma
|
|
102
|
+
</NavLink>
|
|
103
|
+
<NavLink active={isActive('/css')} href="/css">
|
|
104
|
+
CSS
|
|
105
|
+
</NavLink>
|
|
106
|
+
<NavLink active={isActive('/react')} href="/react">
|
|
107
|
+
React
|
|
108
|
+
</NavLink>
|
|
109
|
+
<NavLink active={isActive('/assets')} href="/assets">
|
|
110
|
+
Assets
|
|
111
|
+
</NavLink>
|
|
112
|
+
<NavLink active={isActive('/icons')} href="/icons">
|
|
113
|
+
Icons
|
|
114
|
+
</NavLink>
|
|
102
115
|
<li class="nav-item col-span-full lg:d-flex">
|
|
103
116
|
<div class="vr d-none lg:d-flex my-auto lg:mx-sm"></div>
|
|
104
117
|
<hr class="lg:d-none" />
|
|
105
118
|
</li>
|
|
106
|
-
<NavLink active={isActive('/blog')} href="/blog">
|
|
107
|
-
|
|
119
|
+
<NavLink active={isActive('/blog')} href="/blog">
|
|
120
|
+
Blog
|
|
121
|
+
</NavLink>
|
|
122
|
+
<NavLink active={isActive('/examples')} href="/examples">
|
|
123
|
+
Examples
|
|
124
|
+
</NavLink>
|
|
108
125
|
</ul>
|
|
109
126
|
|
|
110
127
|
<hr class="lg:d-none m-0" />
|
|
111
128
|
|
|
112
|
-
<ul
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
>
|
|
136
|
-
<Icon name="github-brand" title="GitHub" />
|
|
137
|
-
<small class="lg:d-none ms-xs">GitHub</small>
|
|
138
|
-
</NavLink>
|
|
139
|
-
)
|
|
140
|
-
}
|
|
129
|
+
<ul class="navbar-nav d-grid grid-cols-2 lg:d-flex flex-row flex-wrap lg:ms-auto align-items-center">
|
|
130
|
+
{figmaHandle && (
|
|
131
|
+
<NavLink
|
|
132
|
+
class="px-0 lg:px-xs"
|
|
133
|
+
href={`https://figma.com/@${figmaHandle}`}
|
|
134
|
+
target="_blank"
|
|
135
|
+
rel="noopener"
|
|
136
|
+
>
|
|
137
|
+
<Icon name="figma-brand" title="Figma" />
|
|
138
|
+
<small class="lg:d-none ms-xs">Figma Community</small>
|
|
139
|
+
</NavLink>
|
|
140
|
+
)}
|
|
141
|
+
{githubOrg && (
|
|
142
|
+
<NavLink
|
|
143
|
+
class="px-0 lg:px-xs"
|
|
144
|
+
href={`https://github.com/${githubOrg}`}
|
|
145
|
+
target="_blank"
|
|
146
|
+
rel="noopener"
|
|
147
|
+
>
|
|
148
|
+
<Icon name="github-brand" title="GitHub" />
|
|
149
|
+
<small class="lg:d-none ms-xs">GitHub</small>
|
|
150
|
+
</NavLink>
|
|
151
|
+
)}
|
|
141
152
|
<li class="nav-item col-span-full">
|
|
142
153
|
<div class="vr d-none lg:d-flex h-100 lg:mx-2xs"></div>
|
|
143
154
|
<hr class="lg:d-none" />
|
|
@@ -45,7 +45,9 @@ const { id = 'cxdSearchDialog', placeholder = 'Search docs…' } = Astro.props
|
|
|
45
45
|
</div>
|
|
46
46
|
</cxd-search-input>
|
|
47
47
|
<cxd-search-filter class="cxd-search-filter" hidden>
|
|
48
|
-
<label class="visually-hidden" for={`${id}-filter`}>
|
|
48
|
+
<label class="visually-hidden" for={`${id}-filter`}>
|
|
49
|
+
Search in
|
|
50
|
+
</label>
|
|
49
51
|
<select id={`${id}-filter`} class="form-input cxd-search-filter-select"></select>
|
|
50
52
|
</cxd-search-filter>
|
|
51
53
|
<button
|
|
@@ -53,8 +55,10 @@ const { id = 'cxdSearchDialog', placeholder = 'Search docs…' } = Astro.props
|
|
|
53
55
|
class="close-button"
|
|
54
56
|
aria-label="Close"
|
|
55
57
|
data-cx-dismiss="dialog"
|
|
56
|
-
data-cx-target={`#${id}`}
|
|
58
|
+
data-cx-target={`#${id}`}
|
|
57
59
|
>
|
|
60
|
+
×
|
|
61
|
+
</button>
|
|
58
62
|
</search>
|
|
59
63
|
|
|
60
64
|
<div class="modal-body cxd-search-body">
|
|
@@ -65,11 +69,13 @@ const { id = 'cxdSearchDialog', placeholder = 'Search docs…' } = Astro.props
|
|
|
65
69
|
<li class="list-item">
|
|
66
70
|
<kbd class="cxd-search-shortcut-key font-2xs">⮐</kbd>
|
|
67
71
|
<span class="cxd-search-shortcut-label">to select</span>
|
|
68
|
-
</li
|
|
72
|
+
</li>
|
|
73
|
+
<li class="list-item">
|
|
69
74
|
<kbd class="cxd-search-shortcut-key font-sm">↑</kbd>
|
|
70
75
|
<kbd class="cxd-search-shortcut-key font-sm">↓</kbd>
|
|
71
76
|
<span class="cxd-search-shortcut-label">to navigate</span>
|
|
72
|
-
</li
|
|
77
|
+
</li>
|
|
78
|
+
<li class="list-item">
|
|
73
79
|
<kbd class="cxd-search-shortcut-key font-xs">ESC</kbd>
|
|
74
80
|
<span class="cxd-search-shortcut-label">to close</span>
|
|
75
81
|
</li>
|
|
@@ -32,10 +32,8 @@ const { class: className, placeholder = 'Search docs…', target = '#cxdSearchDi
|
|
|
32
32
|
>
|
|
33
33
|
<Icon name="search-solid" size={16} />
|
|
34
34
|
<span class="cxd-search-trigger-label">{placeholder}</span>
|
|
35
|
-
{
|
|
36
|
-
/* Shortcut hint is empty + hidden until search.js detects the platform and
|
|
35
|
+
{/* Shortcut hint is empty + hidden until search.js detects the platform and
|
|
37
36
|
fills in either ⌘K (Mac) or Ctrl K (other). Without JS the shortcut
|
|
38
|
-
itself doesn't work, so showing nothing is more honest than guessing. */
|
|
39
|
-
}
|
|
37
|
+
itself doesn't work, so showing nothing is more honest than guessing. */}
|
|
40
38
|
<span class="cxd-search-trigger-shortcut" hidden></span>
|
|
41
39
|
</button>
|
|
@@ -17,13 +17,13 @@ const { layout } = Astro.props
|
|
|
17
17
|
|
|
18
18
|
<div class="skippy visually-hidden-focusable overflow-hidden">
|
|
19
19
|
<div class="container xl">
|
|
20
|
-
<a class="d-inline-flex p-xs m-xs" href="#content">
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
20
|
+
<a class="d-inline-flex p-xs m-xs" href="#content">
|
|
21
|
+
Skip to main content
|
|
22
|
+
</a>
|
|
23
|
+
{layout === 'docs' && (
|
|
24
|
+
<a class="d-none d-md-inline-flex p-xs m-xs" href="#cxd-docs-nav">
|
|
25
|
+
Skip to docs navigation
|
|
26
|
+
</a>
|
|
27
|
+
)}
|
|
28
28
|
</div>
|
|
29
29
|
</div>
|