@chassis-ui/docs 0.1.0 → 0.1.2
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/README.md +1 -1
- package/index.ts +1 -1
- package/package.json +5 -8
- package/src/components/Card.astro +19 -0
- package/src/layouts/BaseLayout.astro +1 -0
- package/src/layouts/footer/Scripts.astro +1 -1
- package/src/layouts/head/Head.astro +2 -2
- package/src/layouts/head/Stylesheet.astro +1 -2
- package/src/libs/chassis.ts +38 -0
- package/src/scss/_buttons.scss +0 -4
- package/src/scss/main.scss +2 -55
- package/src/layouts/head/Scss.astro +0 -9
- package/src/libs/remark.ts +0 -205
- package/src/scss/search.scss +0 -26
package/README.md
CHANGED
|
@@ -95,4 +95,4 @@ Contributions are welcome! Please read the contributing guidelines in the main r
|
|
|
95
95
|
- [Documentation](https://chassis-ui.com/docs)
|
|
96
96
|
- [GitHub Repository](https://github.com/chassis-ui/website)
|
|
97
97
|
- [Issue Tracker](https://github.com/chassis-ui/website/issues)
|
|
98
|
-
- [Chassis UI Website](https://chassis-ui.com)
|
|
98
|
+
- [Chassis UI Website](https://chassis-ui.com)
|
package/index.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Shared libraries for documentation sites
|
|
2
|
+
export * from './src/libs/chassis'
|
|
2
3
|
export * from './src/libs/image'
|
|
3
4
|
export * from './src/libs/layout'
|
|
4
5
|
export * from './src/libs/rehype'
|
|
5
|
-
export * from './src/libs/remark'
|
|
6
6
|
export * from './src/libs/toc'
|
|
7
7
|
export * from './src/libs/utils'
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chassis-ui/docs",
|
|
3
3
|
"description": "Shared Astro components and layouts for Chassis documentation sites.",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -37,16 +37,13 @@
|
|
|
37
37
|
"./js/*": "./src/js/*",
|
|
38
38
|
"./scss/*": "./src/scss/*"
|
|
39
39
|
},
|
|
40
|
+
"publishConfig": {
|
|
41
|
+
"access": "public"
|
|
42
|
+
},
|
|
40
43
|
"peerDependencies": {
|
|
41
|
-
"
|
|
42
|
-
"@chassis-ui/icons": "*",
|
|
43
|
-
"@chassis-ui/tokens": "*",
|
|
44
|
-
"astro": "^4.0.0 || ^5.0.0"
|
|
44
|
+
"astro": "^5.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@chassis-ui/css": "github:chassis-ui/css#app/docs",
|
|
48
|
-
"@chassis-ui/icons": "github:chassis-ui/icons#app/docs",
|
|
49
|
-
"@chassis-ui/tokens": "github:chassis-ui/tokens#app/docs",
|
|
50
47
|
"@docsearch/css": "^3.9.0",
|
|
51
48
|
"@docsearch/js": "^3.9.0",
|
|
52
49
|
"@types/hast": "^3.0.4",
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
---
|
|
2
|
+
const { title, body, icon } = Astro.props
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<div class="card large border-0">
|
|
6
|
+
<div class="card-content">
|
|
7
|
+
{
|
|
8
|
+
icon && (
|
|
9
|
+
<svg class="icon card-icon icon-4xlarge mb-medium">
|
|
10
|
+
<use xlink:href={`#${icon}`} />
|
|
11
|
+
</svg>
|
|
12
|
+
)
|
|
13
|
+
}
|
|
14
|
+
<h4 class="card-title">{title}</h4>
|
|
15
|
+
<p class="card-body">
|
|
16
|
+
{body}
|
|
17
|
+
</p>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
@@ -6,7 +6,7 @@ import Stylesheet from './Stylesheet.astro'
|
|
|
6
6
|
import Favicons from './Favicons.astro'
|
|
7
7
|
import Social from './Social.astro'
|
|
8
8
|
import Analytics from './Analytics.astro'
|
|
9
|
-
import
|
|
9
|
+
import '@scss/docs.scss'
|
|
10
10
|
|
|
11
11
|
interface Props {
|
|
12
12
|
description: string
|
|
@@ -48,7 +48,7 @@ const pageTitle = isHome
|
|
|
48
48
|
<script src="../../js/color-modes.js"></script>
|
|
49
49
|
|
|
50
50
|
<Stylesheet direction={direction} layout={layout} />
|
|
51
|
-
<
|
|
51
|
+
<slot name="styles" />
|
|
52
52
|
<Favicons />
|
|
53
53
|
<Social description={description} layout={layout} thumbnail={thumbnail} title={title} />
|
|
54
54
|
<Analytics />
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'astro/types'
|
|
2
|
+
|
|
3
|
+
export function getChassisCssProps(direction: 'rtl' | undefined) {
|
|
4
|
+
let cxCssLinkHref = '/static/css/chassis'
|
|
5
|
+
|
|
6
|
+
if (direction === 'rtl') {
|
|
7
|
+
cxCssLinkHref = `${cxCssLinkHref}.rtl`
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
if (import.meta.env.PROD) {
|
|
11
|
+
cxCssLinkHref = `${cxCssLinkHref}.min`
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
cxCssLinkHref = `${cxCssLinkHref}.css`
|
|
15
|
+
|
|
16
|
+
const cxCssLinkProps: HTMLAttributes<'link'> = {
|
|
17
|
+
href: cxCssLinkHref,
|
|
18
|
+
rel: 'stylesheet'
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
return cxCssLinkProps
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export function getChassisJsProps() {
|
|
25
|
+
let cxJsScriptSrc = '/static/js/chassis.bundle'
|
|
26
|
+
|
|
27
|
+
if (import.meta.env.PROD) {
|
|
28
|
+
cxJsScriptSrc = `${cxJsScriptSrc}.min`
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
cxJsScriptSrc = `${cxJsScriptSrc}.js`
|
|
32
|
+
|
|
33
|
+
const cxJsLinkProps: HTMLAttributes<'script'> = {
|
|
34
|
+
src: cxJsScriptSrc
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
return cxJsLinkProps
|
|
38
|
+
}
|
package/src/scss/_buttons.scss
CHANGED
package/src/scss/main.scss
CHANGED
|
@@ -1,63 +1,9 @@
|
|
|
1
|
-
@use "@chassis-ui/tokens/dist/web/chassis-docs/number-large" as large;
|
|
2
|
-
@use "@chassis-ui/tokens/dist/web/chassis-docs/number-medium" as medium;
|
|
3
|
-
@use "@chassis-ui/tokens/dist/web/chassis-docs/number-small" as small;
|
|
4
|
-
// $prefix: cx- !default;
|
|
5
|
-
|
|
6
|
-
/*!
|
|
7
|
-
* Chassis - CSS Docs (https://ozgurgunes.github.io/chassis-css//)
|
|
8
|
-
* Copyright 2025 Chassis
|
|
9
|
-
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
|
10
|
-
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
|
-
// Dev notes
|
|
14
|
-
//
|
|
15
|
-
// Background information on nomenclature and architecture decisions here.
|
|
16
|
-
//
|
|
17
|
-
// - Chassis - CSS functions, variables, and mixins are included for easy reuse.
|
|
18
|
-
// Doing so gives us access to the same core utilities provided by Chassis - CSS.
|
|
19
|
-
// For example, consistent media queries through those mixins.
|
|
20
|
-
//
|
|
21
|
-
// - Chassis - CSS's **docs variables** are prefixed with `$cxd-`.
|
|
22
|
-
// These custom colors avoid collision with the components Chassis - CSS provides.
|
|
23
|
-
//
|
|
24
|
-
// - Classes are prefixed with `.cxd-`.
|
|
25
|
-
// These classes indicate custom-built or modified components for the design
|
|
26
|
-
// and layout of the Chassis - CSS docs. They are not included in our builds.
|
|
27
|
-
//
|
|
28
|
-
// Happy Chassis - CSSing!
|
|
29
|
-
|
|
30
|
-
// Load Chassis - CSS variables and mixins
|
|
31
|
-
//@import "chassis-css/scss/functions";
|
|
32
|
-
// fusv-disable
|
|
33
|
-
$enable-grid-classes: true;
|
|
34
|
-
$enable-cssgrid: true;
|
|
35
|
-
//@import "colors";
|
|
36
|
-
// @import "../../../chassis-tokens/dist/tokens/web/chassis_docs_light";
|
|
37
|
-
|
|
38
1
|
@import "settings";
|
|
39
|
-
@import "@chassis-ui/tokens/dist/web/chassis-docs/main";
|
|
40
|
-
|
|
41
|
-
@import "@chassis-ui/css/scss/functions";
|
|
42
|
-
@import "@chassis-ui/css/scss/tokens";
|
|
43
|
-
@import "@chassis-ui/css/scss/variables";
|
|
44
|
-
@import "@chassis-ui/css/scss/rfs";
|
|
45
|
-
@import "@chassis-ui/css/scss/maps";
|
|
46
|
-
@import "@chassis-ui/css/scss/mixins";
|
|
47
|
-
@import "@chassis-ui/css/scss/grid";
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
// fusv-enable
|
|
51
|
-
|
|
52
2
|
|
|
53
3
|
@import "colors";
|
|
54
4
|
@import "variables";
|
|
55
5
|
@import "fonts";
|
|
56
6
|
|
|
57
|
-
// @import "@chassis-ui/css/scss/core";
|
|
58
|
-
|
|
59
|
-
// Load docs components
|
|
60
|
-
//@import "colors";
|
|
61
7
|
@import "navbar";
|
|
62
8
|
@import "masthead";
|
|
63
9
|
@import "content";
|
|
@@ -74,10 +20,11 @@ $enable-cssgrid: true;
|
|
|
74
20
|
@import "placeholder-img";
|
|
75
21
|
@import "scrolling";
|
|
76
22
|
|
|
77
|
-
// Load docs dependencies
|
|
78
23
|
@import "syntax";
|
|
79
24
|
@import "anchor";
|
|
80
25
|
|
|
26
|
+
@import "@docsearch/css/dist/style";
|
|
27
|
+
@import "docsearch";
|
|
81
28
|
|
|
82
29
|
/* Hide light-mode things when in dark mode */
|
|
83
30
|
[data-cx-theme="dark"] .display-light {
|
package/src/libs/remark.ts
DELETED
|
@@ -1,205 +0,0 @@
|
|
|
1
|
-
import type { Root } from 'mdast'
|
|
2
|
-
import type { MdxJsxAttribute, MdxJsxExpressionAttribute } from 'mdast-util-mdx-jsx'
|
|
3
|
-
import type { Plugin } from 'unified'
|
|
4
|
-
import { visit } from 'unist-util-visit'
|
|
5
|
-
|
|
6
|
-
// Global registry for config and path functions
|
|
7
|
-
let globalConfigGetter: (() => any) | null = null
|
|
8
|
-
let globalPathGetter: ((path: string) => string) | null = null
|
|
9
|
-
|
|
10
|
-
// Registration function for consuming sites to provide their config and path functions
|
|
11
|
-
export function registerRemarkFunctions(
|
|
12
|
-
getConfig: () => any,
|
|
13
|
-
getChassisDocsPath: (path: string) => string
|
|
14
|
-
) {
|
|
15
|
-
globalConfigGetter = getConfig
|
|
16
|
-
globalPathGetter = getChassisDocsPath
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
// [[config:foo]]
|
|
20
|
-
// [[config:foo.bar]]
|
|
21
|
-
const configRegExp = /\[\[config:(?<name>[\w.]+)]]/g
|
|
22
|
-
// [[docsref:/foo]]
|
|
23
|
-
// [[docsref:/foo/bar#baz]]
|
|
24
|
-
const docsrefRegExp = /\[\[docsref:(?<path>[\w./#-]+)]]/g
|
|
25
|
-
|
|
26
|
-
// A remark plugin to replace config values embedded in markdown (or MDX) files.
|
|
27
|
-
// For example, [[config:foo]] will be replaced with the value of the `foo` key in the `config.yml` file.
|
|
28
|
-
// Nested values are also supported, e.g. [[config:foo.bar]].
|
|
29
|
-
// Note: this also works in frontmatter.
|
|
30
|
-
// Note: this plugin is meant to facilitate the migration from Hugo to Astro while keeping the differences to a minimum.
|
|
31
|
-
// At some point, this plugin should maybe be removed and embrace a more MDX-friendly syntax.
|
|
32
|
-
export const remarkCxConfig: Plugin<[], Root> = function () {
|
|
33
|
-
return function remarkCxConfigPlugin(ast, file) {
|
|
34
|
-
if (containsFrontmatter(file.data.astro)) {
|
|
35
|
-
replaceInFrontmatter(file.data.astro.frontmatter, replaceConfigInText)
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
// https://github.com/syntax-tree/mdast#nodes
|
|
39
|
-
// https://github.com/syntax-tree/mdast-util-mdx-jsx#nodes
|
|
40
|
-
visit(
|
|
41
|
-
ast,
|
|
42
|
-
['code', 'definition', 'image', 'inlineCode', 'link', 'mdxJsxFlowElement', 'text'],
|
|
43
|
-
(node) => {
|
|
44
|
-
switch (node.type) {
|
|
45
|
-
case 'code':
|
|
46
|
-
case 'inlineCode':
|
|
47
|
-
case 'text': {
|
|
48
|
-
node.value = replaceConfigInText(node.value)
|
|
49
|
-
break
|
|
50
|
-
}
|
|
51
|
-
case 'image': {
|
|
52
|
-
if (node.alt) {
|
|
53
|
-
node.alt = replaceConfigInText(node.alt)
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
node.url = replaceConfigInText(node.url)
|
|
57
|
-
break
|
|
58
|
-
}
|
|
59
|
-
case 'definition':
|
|
60
|
-
case 'link': {
|
|
61
|
-
node.url = replaceConfigInText(node.url)
|
|
62
|
-
break
|
|
63
|
-
}
|
|
64
|
-
case 'mdxJsxFlowElement': {
|
|
65
|
-
node.attributes = replaceConfigInAttributes(node.attributes)
|
|
66
|
-
break
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
)
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
// A remark plugin to add versionned docs links in markdown (or MDX) files.
|
|
75
|
-
// For example, [[docsref:/foo]] will be replaced with the `/docs/${docs_version}/foo` value with the `docs_version`
|
|
76
|
-
// value being read from the `config.yml` file.
|
|
77
|
-
// Note: this also works in frontmatter.
|
|
78
|
-
// Note: this plugin is meant to facilitate the migration from Hugo to Astro while keeping the differences to a minimum.
|
|
79
|
-
// At some point, this plugin should maybe be removed and embrace a more MDX-friendly syntax.
|
|
80
|
-
export const remarkCxDocsref: Plugin<[], Root> = function () {
|
|
81
|
-
return function remarkCxDocsrefPlugin(ast, file) {
|
|
82
|
-
if (containsFrontmatter(file.data.astro)) {
|
|
83
|
-
replaceInFrontmatter(file.data.astro.frontmatter, replaceDocsrefInText)
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// https://github.com/syntax-tree/mdast#nodes
|
|
87
|
-
// https://github.com/syntax-tree/mdast-util-mdx-jsx#nodes
|
|
88
|
-
visit(
|
|
89
|
-
ast,
|
|
90
|
-
[
|
|
91
|
-
'code',
|
|
92
|
-
'definition',
|
|
93
|
-
'image',
|
|
94
|
-
'inlineCode',
|
|
95
|
-
'link',
|
|
96
|
-
'mdxJsxFlowElement',
|
|
97
|
-
'mdxJsxTextElement',
|
|
98
|
-
'text'
|
|
99
|
-
],
|
|
100
|
-
(node) => {
|
|
101
|
-
switch (node.type) {
|
|
102
|
-
case 'code':
|
|
103
|
-
case 'inlineCode':
|
|
104
|
-
case 'text': {
|
|
105
|
-
node.value = replaceDocsrefInText(node.value)
|
|
106
|
-
break
|
|
107
|
-
}
|
|
108
|
-
case 'definition':
|
|
109
|
-
case 'link': {
|
|
110
|
-
node.url = replaceDocsrefInText(node.url)
|
|
111
|
-
break
|
|
112
|
-
}
|
|
113
|
-
case 'mdxJsxFlowElement':
|
|
114
|
-
case 'mdxJsxTextElement': {
|
|
115
|
-
node.attributes = replaceDocsrefInAttributes(node.attributes)
|
|
116
|
-
break
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
)
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
export function replaceConfigInText(text: string) {
|
|
125
|
-
return text.replace(configRegExp, (_match, path) => {
|
|
126
|
-
const value = getConfigValueAtPath(path)
|
|
127
|
-
|
|
128
|
-
if (!value) {
|
|
129
|
-
throw new Error(`Failed to find a valid configuration value for '${path}'.`)
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
return value
|
|
133
|
-
})
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
function replaceConfigInAttributes(attributes: (MdxJsxAttribute | MdxJsxExpressionAttribute)[]) {
|
|
137
|
-
return attributes.map((attribute) => {
|
|
138
|
-
if (attribute.type === 'mdxJsxAttribute' && typeof attribute.value === 'string') {
|
|
139
|
-
attribute.value = replaceConfigInText(attribute.value)
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
return attribute
|
|
143
|
-
})
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
export function replaceDocsrefInText(text: string) {
|
|
147
|
-
if (!globalPathGetter) {
|
|
148
|
-
throw new Error('remark functions not registered. Call registerRemarkFunctions() first.')
|
|
149
|
-
}
|
|
150
|
-
return text.replace(docsrefRegExp, (_match, path) => {
|
|
151
|
-
return globalPathGetter!(path)
|
|
152
|
-
})
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
function replaceDocsrefInAttributes(attributes: (MdxJsxAttribute | MdxJsxExpressionAttribute)[]) {
|
|
156
|
-
return attributes.map((attribute) => {
|
|
157
|
-
if (attribute.type === 'mdxJsxAttribute' && typeof attribute.value === 'string') {
|
|
158
|
-
attribute.value = replaceDocsrefInText(attribute.value)
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
return attribute
|
|
162
|
-
})
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
function getConfigValueAtPath(path: string) {
|
|
166
|
-
if (!globalConfigGetter) {
|
|
167
|
-
throw new Error('remark functions not registered. Call registerRemarkFunctions() first.')
|
|
168
|
-
}
|
|
169
|
-
const config = globalConfigGetter()
|
|
170
|
-
|
|
171
|
-
const value = path.split('.').reduce((values, part) => {
|
|
172
|
-
if (!values || typeof values !== 'object') {
|
|
173
|
-
return undefined
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
return (values as any)?.[part]
|
|
177
|
-
}, config as unknown)
|
|
178
|
-
|
|
179
|
-
return typeof value === 'string' ? value : undefined
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
function replaceInFrontmatter(
|
|
183
|
-
record: Record<string, unknown>,
|
|
184
|
-
replacer: (value: string) => string
|
|
185
|
-
) {
|
|
186
|
-
for (const [key, value] of Object.entries(record)) {
|
|
187
|
-
if (typeof value === 'string') {
|
|
188
|
-
record[key] = replacer(value)
|
|
189
|
-
} else if (Array.isArray(value)) {
|
|
190
|
-
record[key] = value.map((arrayValue) => {
|
|
191
|
-
return typeof arrayValue === 'string'
|
|
192
|
-
? replacer(arrayValue)
|
|
193
|
-
: typeof arrayValue === 'object'
|
|
194
|
-
? replaceInFrontmatter(arrayValue, replacer)
|
|
195
|
-
: arrayValue
|
|
196
|
-
})
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
return record
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
function containsFrontmatter(data: unknown): data is { frontmatter: Record<string, unknown> } {
|
|
204
|
-
return data != undefined && typeof data === 'object' && 'frontmatter' in data
|
|
205
|
-
}
|
package/src/scss/search.scss
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
$prefix: cx- !default;
|
|
2
|
-
|
|
3
|
-
/*!
|
|
4
|
-
* Chassis - CSS Docs (https://ozgurgunes.github.io/chassis-css//)
|
|
5
|
-
* Copyright 2025 Chassis
|
|
6
|
-
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
|
7
|
-
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
//@import "../../../chassis-tokens/dist/tokens/web/chassis_docs_light";
|
|
11
|
-
|
|
12
|
-
@import "settings";
|
|
13
|
-
@import "@chassis-ui/tokens/dist/web/chassis-docs/main";
|
|
14
|
-
|
|
15
|
-
@import "@chassis-ui/css/scss/functions";
|
|
16
|
-
@import "@chassis-ui/css/scss/tokens";
|
|
17
|
-
@import "@chassis-ui/css/scss/variables";
|
|
18
|
-
@import "@chassis-ui/css/scss/rfs";
|
|
19
|
-
@import "@chassis-ui/css/scss/maps";
|
|
20
|
-
@import "@chassis-ui/css/scss/mixins";
|
|
21
|
-
@import "@chassis-ui/css/scss/grid";
|
|
22
|
-
|
|
23
|
-
@import "variables";
|
|
24
|
-
|
|
25
|
-
@import "@docsearch/css/dist/style";
|
|
26
|
-
@import "docsearch";
|