@chassis-ui/docs 0.6.3 → 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 +13 -0
- package/README.md +50 -7
- package/UPGRADING.md +140 -0
- package/package.json +11 -3
- 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/NavLink.astro +1 -1
- 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/js/search.js +2 -2
- package/src/layouts/BaseLayout.astro +14 -20
- package/src/layouts/DocsLayout.astro +51 -52
- package/src/layouts/SingleLayout.astro +2 -2
- package/src/layouts/footer/Consent.astro +18 -20
- package/src/layouts/footer/Footer.astro +62 -26
- package/src/layouts/head/Head.astro +7 -10
- package/src/layouts/header/Navigation.astro +73 -58
- 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/_layout.scss +1 -1
|
@@ -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,62 +79,77 @@ 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 class="navbar-nav flex-row flex-wrap cxd-navbar-nav mx-0 lg:mx-md">
|
|
94
|
-
<NavLink active={isActive('/tokens')} href="/tokens">
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
<NavLink active={isActive('/
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
<
|
|
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>
|
|
115
|
+
<li class="nav-item col-span-full lg:d-flex">
|
|
101
116
|
<div class="vr d-none lg:d-flex my-auto lg:mx-sm"></div>
|
|
102
117
|
<hr class="lg:d-none" />
|
|
103
118
|
</li>
|
|
104
|
-
<NavLink active={isActive('/blog')} href="/blog">
|
|
105
|
-
|
|
119
|
+
<NavLink active={isActive('/blog')} href="/blog">
|
|
120
|
+
Blog
|
|
121
|
+
</NavLink>
|
|
122
|
+
<NavLink active={isActive('/examples')} href="/examples">
|
|
123
|
+
Examples
|
|
124
|
+
</NavLink>
|
|
106
125
|
</ul>
|
|
107
126
|
|
|
108
127
|
<hr class="lg:d-none m-0" />
|
|
109
128
|
|
|
110
|
-
<ul class="navbar-nav flex-row flex-wrap lg:ms-auto align-items-center">
|
|
111
|
-
{
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
</NavLink>
|
|
135
|
-
)
|
|
136
|
-
}
|
|
137
|
-
<li class="nav-item col-12 lg:col-auto">
|
|
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
|
+
)}
|
|
152
|
+
<li class="nav-item col-span-full">
|
|
138
153
|
<div class="vr d-none lg:d-flex h-100 lg:mx-2xs"></div>
|
|
139
154
|
<hr class="lg:d-none" />
|
|
140
155
|
</li>
|
|
@@ -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>
|