@chassis-ui/docs 0.7.0 → 0.9.0-next.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 +13 -0
- package/README.md +50 -8
- package/UPGRADING.md +123 -0
- package/package.json +13 -13
- 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 +60 -24
- 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
- package/src/scss/_content.scss +1 -1
|
@@ -36,24 +36,22 @@ const {
|
|
|
36
36
|
} = Astro.props
|
|
37
37
|
---
|
|
38
38
|
|
|
39
|
-
{
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
>
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
)
|
|
59
|
-
}
|
|
39
|
+
{font ? (
|
|
40
|
+
<span
|
|
41
|
+
class:list={['icon', `cx-${name}`, className]}
|
|
42
|
+
aria-hidden={title ? undefined : 'true'}
|
|
43
|
+
aria-label={title}
|
|
44
|
+
{...rest}
|
|
45
|
+
/>
|
|
46
|
+
) : (
|
|
47
|
+
<svg
|
|
48
|
+
class:list={['icon', className]}
|
|
49
|
+
width={size}
|
|
50
|
+
height={size}
|
|
51
|
+
aria-hidden={title ? undefined : 'true'}
|
|
52
|
+
{...rest}
|
|
53
|
+
>
|
|
54
|
+
{title && <title>{title}</title>}
|
|
55
|
+
<use href={`${sprite}#${name}`} />
|
|
56
|
+
</svg>
|
|
57
|
+
)}
|
|
@@ -19,6 +19,6 @@ const tooltipText =
|
|
|
19
19
|
`This variant${plural ? 's' : ''} exist${plural ? '' : 's'} in the Figma component library with bound design tokens.`
|
|
20
20
|
---
|
|
21
21
|
|
|
22
|
-
<span class="badge lg primary smooth mb-md rounded-md" data-cx-toggle="tooltip" title={tooltipText}
|
|
23
|
-
|
|
24
|
-
>
|
|
22
|
+
<span class="badge lg primary smooth mb-md rounded-md" data-cx-toggle="tooltip" title={tooltipText}>
|
|
23
|
+
In Figma
|
|
24
|
+
</span>
|
|
@@ -10,19 +10,17 @@ const {
|
|
|
10
10
|
} = getPlaceholder(Astro.props)
|
|
11
11
|
---
|
|
12
12
|
|
|
13
|
-
{
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
{
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
)
|
|
28
|
-
}
|
|
13
|
+
{type === 'img' ? (
|
|
14
|
+
// eslint-disable-next-line astro/jsx-a11y/alt-text
|
|
15
|
+
<img {...props} />
|
|
16
|
+
) : (
|
|
17
|
+
<svg {...props}>
|
|
18
|
+
{showTitle && <title>{title}</title>}
|
|
19
|
+
<rect width="100%" height="100%" fill={background} />
|
|
20
|
+
{showText && (
|
|
21
|
+
<text x="50%" y="50%" fill={color} dy=".3em">
|
|
22
|
+
{text}
|
|
23
|
+
</text>
|
|
24
|
+
)}
|
|
25
|
+
</svg>
|
|
26
|
+
)}
|
|
@@ -119,9 +119,7 @@ const simplifiedMarkup = sourceMarkup
|
|
|
119
119
|
<Fragment set:html={previewMarkup} />
|
|
120
120
|
</div>
|
|
121
121
|
</div>
|
|
122
|
-
{
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
)
|
|
126
|
-
}
|
|
122
|
+
{showMarkup && (
|
|
123
|
+
<Code code={simplifiedMarkup} lang="html" nestedInExample={true} lineNumbers={lineNumbers} />
|
|
124
|
+
)}
|
|
127
125
|
</div>
|
|
@@ -81,15 +81,13 @@ const mainProps = { id: 'content', ...overrides?.main }
|
|
|
81
81
|
<body {...bodyProps}>
|
|
82
82
|
<Header layout={layout} title={title} />
|
|
83
83
|
|
|
84
|
-
{
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
)
|
|
92
|
-
}
|
|
84
|
+
{Astro.slots.has('main') ? (
|
|
85
|
+
<slot name="main" />
|
|
86
|
+
) : (
|
|
87
|
+
<main {...mainProps}>
|
|
88
|
+
<slot />
|
|
89
|
+
</main>
|
|
90
|
+
)}
|
|
93
91
|
|
|
94
92
|
<Footer />
|
|
95
93
|
<Consent />
|
|
@@ -98,17 +96,13 @@ const mainProps = { id: 'content', ...overrides?.main }
|
|
|
98
96
|
<slot name="scripts" slot="scripts" />
|
|
99
97
|
</Scripts>
|
|
100
98
|
|
|
101
|
-
{
|
|
102
|
-
frontmatter
|
|
103
|
-
frontmatter.extraJs.map((js: ExtraJS) => <script is:inline async={js.async} src={js.src} />)
|
|
104
|
-
}
|
|
99
|
+
{frontmatter?.extraJs &&
|
|
100
|
+
frontmatter.extraJs.map((js: ExtraJS) => <script is:inline async={js.async} src={js.src} />)}
|
|
105
101
|
|
|
106
|
-
{
|
|
107
|
-
|
|
108
|
-
<
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
)
|
|
112
|
-
}
|
|
102
|
+
{(layout === 'docs' || layout === 'icons') && (
|
|
103
|
+
<div class="position-fixed" aria-hidden="true">
|
|
104
|
+
<input type="text" tabindex="-1" />
|
|
105
|
+
</div>
|
|
106
|
+
)}
|
|
113
107
|
</body>
|
|
114
108
|
</html>
|
|
@@ -61,13 +61,16 @@ if (frontmatter.toc) {
|
|
|
61
61
|
aria-labelledby="cxdSidebarOffcanvasLabel"
|
|
62
62
|
>
|
|
63
63
|
<div class="drawer-header">
|
|
64
|
-
<h2 class="drawer-title" id="cxdSidebarOffcanvasLabel">
|
|
64
|
+
<h2 class="drawer-title" id="cxdSidebarOffcanvasLabel">
|
|
65
|
+
Browse docs
|
|
66
|
+
</h2>
|
|
65
67
|
<button
|
|
66
68
|
type="button"
|
|
67
69
|
class="close-button"
|
|
68
70
|
data-cx-dismiss="drawer"
|
|
69
71
|
aria-label="Close"
|
|
70
|
-
data-cx-target="#cxdSidebar"
|
|
72
|
+
data-cx-target="#cxdSidebar"
|
|
73
|
+
></button>
|
|
71
74
|
</div>
|
|
72
75
|
<hr class="lg:d-none m-0" />
|
|
73
76
|
<div class="drawer-body lg:p-0">
|
|
@@ -104,65 +107,61 @@ if (frontmatter.toc) {
|
|
|
104
107
|
View on GitHub
|
|
105
108
|
</a>
|
|
106
109
|
</div>
|
|
107
|
-
<h1 class="cxd-title mb-sm" id="content">
|
|
110
|
+
<h1 class="cxd-title mb-sm" id="content">
|
|
111
|
+
{frontmatter.title}
|
|
112
|
+
</h1>
|
|
108
113
|
</div>
|
|
109
114
|
<div class="cxd-subtitle">
|
|
110
|
-
{
|
|
111
|
-
frontmatter.description
|
|
112
|
-
|
|
113
|
-
)
|
|
114
|
-
}
|
|
115
|
+
{frontmatter.description && (
|
|
116
|
+
<Fragment set:html={processMarkdownToHtml(frontmatter.description)} />
|
|
117
|
+
)}
|
|
115
118
|
</div>
|
|
116
119
|
</slot>
|
|
117
120
|
</div>
|
|
118
121
|
|
|
119
|
-
{
|
|
120
|
-
|
|
121
|
-
<
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
<
|
|
136
|
-
<
|
|
137
|
-
<
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
</nav>
|
|
141
|
-
</div>
|
|
122
|
+
{frontmatter.toc && headings && (
|
|
123
|
+
<div class="cxd-toc">
|
|
124
|
+
<button
|
|
125
|
+
class="button default mb-lg text-decoration-none cxd-toc-toggle md:d-none"
|
|
126
|
+
type="button"
|
|
127
|
+
data-cx-toggle="collapse"
|
|
128
|
+
data-cx-target="#tocContents"
|
|
129
|
+
aria-expanded="false"
|
|
130
|
+
aria-controls="tocContents"
|
|
131
|
+
>
|
|
132
|
+
On this page
|
|
133
|
+
<Icon name="chevron-sort-solid" class="icon-sm" />
|
|
134
|
+
</button>
|
|
135
|
+
<strong class="d-none md:d-block font-h6 my-xs">On this page</strong>
|
|
136
|
+
<hr class="d-none md:d-block my-xs" />
|
|
137
|
+
<div class="collapse cxd-toc-collapse" id="tocContents">
|
|
138
|
+
<nav id="TableOfContents" aria-label="Table of contents">
|
|
139
|
+
<slot name="toc">
|
|
140
|
+
<TableOfContents headings={headings} config={getConfig()} />
|
|
141
|
+
</slot>
|
|
142
|
+
</nav>
|
|
142
143
|
</div>
|
|
143
|
-
|
|
144
|
-
}
|
|
144
|
+
</div>
|
|
145
|
+
)}
|
|
145
146
|
|
|
146
147
|
<div class="cxd-content">
|
|
147
|
-
{
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
<
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
>
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
)
|
|
165
|
-
}
|
|
148
|
+
{frontmatter.sections && (
|
|
149
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-xl">
|
|
150
|
+
{frontmatter.sections.map((section: DocSection) => (
|
|
151
|
+
<div>
|
|
152
|
+
<a
|
|
153
|
+
class="d-block text-decoration-none"
|
|
154
|
+
href={getDocsPath(
|
|
155
|
+
`${parentDirectory ? parentDirectory + '/' : ''}${section.slug ? section.slug : getSlug(section.title)}/`
|
|
156
|
+
)}
|
|
157
|
+
>
|
|
158
|
+
<strong class="d-block font-h5 mb-2xs">{section.title}</strong>
|
|
159
|
+
<span class="fg-subtle">{section.description}</span>
|
|
160
|
+
</a>
|
|
161
|
+
</div>
|
|
162
|
+
))}
|
|
163
|
+
</div>
|
|
164
|
+
)}
|
|
166
165
|
|
|
167
166
|
<slot />
|
|
168
167
|
</div>
|
|
@@ -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
|
-
<p class="h6 mb-xs">Docs</p>
|
|
36
|
+
<p class="font-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
|
-
<p class="h6 mb-xs">Github</p>
|
|
59
|
+
<p class="font-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
|
-
<p class="h6 mb-xs">Project</p>
|
|
82
|
+
<p class="font-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 />
|