@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 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.0",
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
- "@chassis-ui/css": "*",
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>
@@ -58,6 +58,7 @@ const mainProps = overrides?.main ?? {}
58
58
  thumbnail={thumbnail}
59
59
  title={title}
60
60
  />
61
+ <slot name="styles" slot="styles" />
61
62
  </head>
62
63
  <body {...bodyProps}>
63
64
  <Header layout={layout} title={title} />
@@ -1,5 +1,5 @@
1
1
  ---
2
- import { getChassisJsProps } from '@libs/chassis'
2
+ import { getChassisJsProps } from '../../libs/chassis'
3
3
  import type { Layout } from '../../libs/layout'
4
4
 
5
5
  interface Props {
@@ -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 Scss from './Scss.astro'
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
- <Scss />
51
+ <slot name="styles" />
52
52
  <Favicons />
53
53
  <Social description={description} layout={layout} thumbnail={thumbnail} title={title} />
54
54
  <Analytics />
@@ -1,6 +1,5 @@
1
1
  ---
2
- import { getChassisCssProps } from '@libs/chassis'
3
- import { getChassisDocsPath } from '@libs/path'
2
+ import { getChassisCssProps } from '../../libs/chassis'
4
3
  import type { Layout } from '../../libs/layout'
5
4
 
6
5
  interface Props {
@@ -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
+ }
@@ -1,7 +1,3 @@
1
- @import "@chassis-ui/css/scss/mixins/context";
2
- @import "@chassis-ui/css/scss/placeholders/context";
3
- @import "@chassis-ui/css/scss/placeholders/component";
4
- @import "@chassis-ui/css/scss/placeholders/button";
5
1
  // Buttons
6
2
  //
7
3
  // Custom buttons for the docs.
@@ -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 {
@@ -1,9 +0,0 @@
1
- ---
2
-
3
- ---
4
-
5
- <style is:global lang="scss">
6
- @import '../../scss/main';
7
- @import '../../scss/search';
8
- </style>
9
- <slot name="styles" />
@@ -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
- }
@@ -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";