cosmos-docusaurus-theme 2.0.2 → 2.1.1
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 +90 -1
- package/README.md +92 -67
- package/package.json +12 -3
- package/src/css/theme.css +1049 -285
- package/src/index.js +57 -9
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,95 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
|
|
|
7
7
|
|
|
8
8
|
---
|
|
9
9
|
|
|
10
|
+
## [2.1.1] — 2026-03-11
|
|
11
|
+
|
|
12
|
+
### Fixed
|
|
13
|
+
|
|
14
|
+
- **Breadcrumb**: `ul.breadcrumbs { display: flex }` + `::after { content: none }` — kills Infima's
|
|
15
|
+
whitespace injection between items; ChevronRight separator correctly aligned as flex child
|
|
16
|
+
- **Sidebar sub-menu**: corrected CSS selector from `.theme-doc-sidebar-menu .menu__list .menu__list`
|
|
17
|
+
to `.menu__list > .menu__list-item > .menu__list` (direct child `>`) — matches actual DOM depth;
|
|
18
|
+
`margin-left: 35px !important` aligns `|` line under category title text (measured 51.3px)
|
|
19
|
+
- **Sidebar sub-menu color**: `var(--ifm-menu-color)` instead of muted secondary
|
|
20
|
+
- **Banners (admonitions)**: reverted unsolicited CSS overrides; kept only the two requested rules:
|
|
21
|
+
`[class*='admonitionHeading']:not(:last-child) { margin-bottom: 1rem }` and
|
|
22
|
+
`[class*='admonitionIcon'] { display: inline-block; vertical-align: middle; margin-right: 0.4em }`
|
|
23
|
+
- **Demo MDX**: `class=` → `className=` in 7 files (fixes React DOM property warning)
|
|
24
|
+
|
|
25
|
+
### Added
|
|
26
|
+
|
|
27
|
+
- **`lint-mdx`** Makefile target — scans `demo/docs/**/*.md` for `class=` outside code blocks,
|
|
28
|
+
preventing React prop warnings from slipping through the lint pipeline
|
|
29
|
+
- **`demo-check`** Makefile target — verifies 12 key pages exist in the static build output
|
|
30
|
+
after `make demo-build`; more reliable than HTTP checks against the SPA dev server
|
|
31
|
+
- **`demo/scripts/check-pages.js`** — static build file checker used by `demo-check`
|
|
32
|
+
- `lint` target now includes `lint-mdx` as 5th step
|
|
33
|
+
|
|
34
|
+
## [2.1.0] — 2026-03-11
|
|
35
|
+
|
|
36
|
+
### Added
|
|
37
|
+
|
|
38
|
+
- **Banners (admonitions) — complete redesign**: Dismissible Alert style from Rackscope
|
|
39
|
+
`ui-library/alerts` — uniform full border (not left-only), semantic icon colors, flex
|
|
40
|
+
heading layout, `overflow: hidden` clips child shadows at rounded corners
|
|
41
|
+
- **Navbar COSMOS wordmark**: Outfit 700 uppercase, brand indigo `#465fff` / `#7592ff` dark;
|
|
42
|
+
`|` vertical separator; active nav tab underline indicator matching Tabs style
|
|
43
|
+
- **Tabs**: flat underline (no border-radius), brand active state, proper dark mode vars
|
|
44
|
+
- **Pagination**: `rounded-lg`, monospace uppercase sublabel, brand hover ring
|
|
45
|
+
- **Breadcrumb**: ChevronRight SVG separator (disables Infima default), brand hover
|
|
46
|
+
- **Details accordion**: ChevronRight SVG arrow replacing `›` character
|
|
47
|
+
- **Blockquote**: brand left border + subtle tint
|
|
48
|
+
- **`<kbd>`**: chip style with 3D bottom border
|
|
49
|
+
- **Markdown images**: `border-radius: 12px` + shadow
|
|
50
|
+
- **`<abbr title>`**: styled tooltip on hover
|
|
51
|
+
- **Buttons**: `.btn` `.btn-primary` `.btn-secondary` `.btn-danger` `.btn-sm` `.btn-lg`
|
|
52
|
+
- **Release badges**: `.badge-new` `.badge-beta` `.badge-deprecated` `.badge-experimental`
|
|
53
|
+
- **Steps**: `ol.steps` — numbered procedure with circle indicators
|
|
54
|
+
- **Timeline**: `ul.timeline` — versioned event list with vertical line
|
|
55
|
+
- **Check list**: `ul.list-check` — feature list with checkmarks
|
|
56
|
+
- **Footer CSS**: 4-column grid, responsive (4→2→1), monospace section titles, brand colors
|
|
57
|
+
- **Announcement bar**: gradient indigo, improved link style
|
|
58
|
+
- **Favicon**: cosmos atom SVG injected via `injectHtmlTags()` with opt-out option
|
|
59
|
+
`injectFavicon: false`; SVG properly `encodeURIComponent()`-encoded for `data:` URI
|
|
60
|
+
- **`validateOptions()`** exported — Docusaurus options validation for the theme plugin
|
|
61
|
+
- **Demo site restructure**: `showcase/` → `components/` (10 pages); dual navbar
|
|
62
|
+
Documentation | Components; Components sidebar dedicated; `class=` → `className=` in MDX
|
|
63
|
+
|
|
64
|
+
### Changed
|
|
65
|
+
|
|
66
|
+
- **Font**: JetBrains Mono → **IBM Plex Mono** (code blocks, kbd, monospace elements)
|
|
67
|
+
- **Sidebar sub-menu**: `var(--ifm-menu-color)` color; `|` line aligned under title text
|
|
68
|
+
- **GitHub Actions**: all SHA-pinned (supply chain hardening); Node 20.19 pinned
|
|
69
|
+
- **CI**: Trivy vulnerability scan before Docker push; `npm ci` in all demo jobs;
|
|
70
|
+
`publish.yml` runs full `npm run lint` before publish; `workflow_dispatch` default removed
|
|
71
|
+
- **Dockerfile**: `node:20.19-alpine3.21` (was floating `node:20-alpine`)
|
|
72
|
+
- **`demo/package.json`**: `@easyops-cn ^0.55` (was `latest`); `file:..` dependency
|
|
73
|
+
- **package.json**: description updated, removes stale "TailAdmin" reference
|
|
74
|
+
|
|
75
|
+
## [2.0.3] — 2026-03-11
|
|
76
|
+
|
|
77
|
+
### Added
|
|
78
|
+
|
|
79
|
+
- **Makefile** — developer targets: `lint`, `lint-css`, `lint-js`, `lint-md`,
|
|
80
|
+
`lint-format`, `format`, `lint-fix`, `security`, `audit`, `install`,
|
|
81
|
+
`demo-build`, `demo-start`, `demo-serve`, `demo-clear`, `docker-build`,
|
|
82
|
+
`docker-up`, `docker-down`, `clean`
|
|
83
|
+
- **ESLint** (`eslint@9`, `@eslint/js`) — flat config (`eslint.config.mjs`),
|
|
84
|
+
lints `src/**/*.js`; rules: `no-unused-vars` (allow `_` prefix), `no-console off`
|
|
85
|
+
- **Prettier** (`prettier@3`) — formats CSS, JS, JSON, MD; `.prettierrc` + `.prettierignore`
|
|
86
|
+
- **markdownlint-cli** (`@0.48`) — lints `*.md` and `docs/**/*.md`; `.markdownlint.json`
|
|
87
|
+
with `MD024: siblings_only` (CHANGELOG-friendly), `MD013/MD033/MD041` disabled
|
|
88
|
+
- `npm` scripts: `lint:js`, `lint:md`, `lint:format`, `format`, `lint:fix`;
|
|
89
|
+
`lint` now runs all four linters in sequence
|
|
90
|
+
- **CI** — `lint` job extended with JS (ESLint), Markdown, and Prettier steps
|
|
91
|
+
|
|
92
|
+
### Fixed
|
|
93
|
+
|
|
94
|
+
- `README.md`: `MD001` heading jump `###` → `##` for Live Demo link; `MD060` table
|
|
95
|
+
pipe spacing on two tables; Development section updated to reference `make` commands
|
|
96
|
+
- `CHANGELOG.md`: `MD004` unordered list style — `+` continuation replaced with `and`
|
|
97
|
+
- `src/css/theme.css`: reformatted by Prettier (alignment, spacing — no logic change)
|
|
98
|
+
|
|
10
99
|
## [2.0.2] — 2026-03-11
|
|
11
100
|
|
|
12
101
|
### Added
|
|
@@ -85,7 +174,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
|
|
|
85
174
|
- **Search position**: add `{ type: 'search' }` in demo config before external links
|
|
86
175
|
(CSS `order` alone insufficient when easyops inserts search last in DOM)
|
|
87
176
|
- **Search CSS selectors**: `[class*="navbarSearchContainer"]` with `order: -1 !important`
|
|
88
|
-
|
|
177
|
+
and `[class*="navbarSearch"]` — previous `.navbar__search` didn't match actual class
|
|
89
178
|
- **Search input styling**: `!important` on bg/color to beat CSS module specificity
|
|
90
179
|
- **CTRL+K**: redesigned as compact transparent pill with clean kbd elements
|
|
91
180
|
- **colorModeToggle**: `order: 1 !important` on wrapper div (not button)
|
package/README.md
CHANGED
|
@@ -10,38 +10,37 @@
|
|
|
10
10
|
[](LICENSE)
|
|
11
11
|
[](https://docusaurus.io)
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
## [Live Demo](https://sckyzo.github.io/cosmos-docusaurus-theme/) · [Releases](https://github.com/SckyzO/cosmos-docusaurus-theme/releases) · [npm](https://www.npmjs.com/package/cosmos-docusaurus-theme)
|
|
14
14
|
|
|
15
15
|
</div>
|
|
16
16
|
|
|
17
17
|
---
|
|
18
18
|
|
|
19
|
-
A **CSS-only** Docusaurus theme built from the same design system that powers
|
|
20
|
-
|
|
21
|
-
Dark-first, opinionated, and refined.
|
|
19
|
+
A **CSS-only** Docusaurus theme built from the same design system that powers [Rackscope](https://rackscope.dev).
|
|
20
|
+
Dark-first, opinionated, pixel-perfect.
|
|
22
21
|
|
|
23
22
|
- **Void** dark palette — deep neutral blacks (`#030712 / #111827`) with indigo accents
|
|
24
23
|
- **Slate** light palette — warm white surfaces with brown text tones, not cold blue-gray
|
|
25
|
-
- **Outfit** display typeface + **
|
|
24
|
+
- **Outfit** display typeface + **IBM Plex Mono** for code
|
|
26
25
|
- Zero JavaScript, no swizzled components — pure CSS override of Docusaurus Infima
|
|
27
|
-
- Every
|
|
28
|
-
-
|
|
26
|
+
- Every native Docusaurus element styled out of the box
|
|
27
|
+
- Utility classes for MDX pages: buttons, badges, steps, timeline, check lists
|
|
29
28
|
|
|
30
29
|
---
|
|
31
30
|
|
|
32
31
|
## Screenshots
|
|
33
32
|
|
|
34
|
-
> Dark mode — Void palette
|
|
33
|
+
> Dark mode — Void palette
|
|
35
34
|
|
|
36
35
|
|
|
37
36
|
|
|
38
|
-
>
|
|
37
|
+
> Light mode — Slate palette
|
|
39
38
|
|
|
40
|
-
|
|
41
40
|
|
|
42
|
-
>
|
|
41
|
+
> Banners — Dismissible Alert style, semantic icons, full border
|
|
43
42
|
|
|
44
|
-
|
|
45
44
|
|
|
46
45
|
> See all components live → **[sckyzo.github.io/cosmos-docusaurus-theme](https://sckyzo.github.io/cosmos-docusaurus-theme/)**
|
|
47
46
|
|
|
@@ -65,9 +64,17 @@ export default {
|
|
|
65
64
|
};
|
|
66
65
|
```
|
|
67
66
|
|
|
68
|
-
###
|
|
67
|
+
### Options
|
|
69
68
|
|
|
70
|
-
|
|
69
|
+
```js title="docusaurus.config.js"
|
|
70
|
+
themes: [
|
|
71
|
+
['cosmos-docusaurus-theme', {
|
|
72
|
+
injectFavicon: false, // disable cosmos favicon injection (default: true)
|
|
73
|
+
}],
|
|
74
|
+
],
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### Try it instantly with Docker
|
|
71
78
|
|
|
72
79
|
```bash
|
|
73
80
|
git clone https://github.com/SckyzO/cosmos-docusaurus-theme.git
|
|
@@ -76,82 +83,100 @@ docker compose up
|
|
|
76
83
|
# → http://localhost:3000
|
|
77
84
|
```
|
|
78
85
|
|
|
79
|
-
|
|
86
|
+
---
|
|
80
87
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
88
|
+
## What's covered
|
|
89
|
+
|
|
90
|
+
### Native Docusaurus elements
|
|
91
|
+
|
|
92
|
+
Styled automatically — no configuration needed:
|
|
93
|
+
|
|
94
|
+
| Element | Notes |
|
|
95
|
+
| ------------------------------------------------------- | --------------------------------------------- |
|
|
96
|
+
| Navbar — COSMOS wordmark, ghost buttons, `\|` separator | Brand indigo title |
|
|
97
|
+
| Sidebar — icons, sub-menu line, version badge | `className: 'sidebar-cat-*'` for icons |
|
|
98
|
+
| Breadcrumb — ChevronRight separator, brand hover | Automatic |
|
|
99
|
+
| Tabs — flat underline, brand active | `import Tabs from '@theme/Tabs'` |
|
|
100
|
+
| Pagination — monospace sublabel, brand hover | Automatic prev / next |
|
|
101
|
+
| Code blocks — all languages, titles | IBM Plex Mono |
|
|
102
|
+
| Banners — Dismissible Alert style, semantic icons | 5 types: note / tip / info / warning / danger |
|
|
103
|
+
| Tables — full-width desktop, scroll mobile | Automatic |
|
|
104
|
+
| Cards — rounded-2xl, dark shadow, hover | `<div class="card">` |
|
|
105
|
+
| Tags | `<span class="tag">` |
|
|
106
|
+
| Details / summary — accordion style | `<details><summary>` |
|
|
107
|
+
| TOC — H2/H3 hierarchy + active pill | Right panel |
|
|
108
|
+
| Blockquote — brand left border | `>` markdown syntax |
|
|
109
|
+
| `<kbd>` — chip style | `<kbd>Ctrl</kbd>` |
|
|
110
|
+
| Images — rounded-xl, shadow | `` |
|
|
111
|
+
| `<abbr title>` — tooltip on hover | `<abbr title="...">` |
|
|
112
|
+
| Back-to-top + progress bar | Automatic |
|
|
113
|
+
| Algolia DocSearch | `--docsearch-*` variables |
|
|
114
|
+
| Local search (easyops-cn) | `--search-local-*` variables |
|
|
115
|
+
| Announcement bar | `themeConfig.announcementBar` |
|
|
116
|
+
| Smooth dark/light transition | Automatic |
|
|
117
|
+
|
|
118
|
+
### Utility classes
|
|
119
|
+
|
|
120
|
+
For use in MDX pages (`className=` in JSX context):
|
|
121
|
+
|
|
122
|
+
| Class | Purpose |
|
|
123
|
+
| -------------------------------------------------------------------- | --------------------------- |
|
|
124
|
+
| `.btn` `.btn-primary` `.btn-secondary` `.btn-danger` | CTA buttons |
|
|
125
|
+
| `.btn-sm` `.btn-lg` | Button sizes |
|
|
126
|
+
| `.badge-new` `.badge-beta` `.badge-deprecated` `.badge-experimental` | Release lifecycle labels |
|
|
127
|
+
| `.method-get/post/put/delete/patch` | HTTP method labels |
|
|
128
|
+
| `.status-ok/warn/crit/unknown` | Operational health labels |
|
|
129
|
+
| `ol.steps` | Numbered procedure guide |
|
|
130
|
+
| `ul.timeline` | Version history / changelog |
|
|
131
|
+
| `ul.list-check` | Feature checklist |
|
|
84
132
|
|
|
85
133
|
---
|
|
86
134
|
|
|
87
|
-
##
|
|
135
|
+
## Sidebar icons
|
|
88
136
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
| TOC — H2/H3 hierarchy + active pill | ✅ |
|
|
102
|
-
| Pagination | ✅ |
|
|
103
|
-
| Announcement bar | ✅ |
|
|
104
|
-
| Back-to-top + Progress bar | ✅ |
|
|
105
|
-
| Algolia DocSearch | ✅ |
|
|
106
|
-
| Smooth dark/light transition | ✅ |
|
|
137
|
+
Add `className: 'sidebar-cat-*'` to any category in `sidebars.js`:
|
|
138
|
+
|
|
139
|
+
```js title="sidebars.js"
|
|
140
|
+
{
|
|
141
|
+
type: 'category',
|
|
142
|
+
label: 'Getting Started',
|
|
143
|
+
className: 'sidebar-cat-rocket',
|
|
144
|
+
items: ['getting-started'],
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
Available icons: `rocket` `monitor` `pencil` `puzzle` `sliders` `folder` `server` `database` `layers` `grid` `code`
|
|
107
149
|
|
|
108
150
|
---
|
|
109
151
|
|
|
110
152
|
## Customization
|
|
111
153
|
|
|
112
|
-
Override any CSS variable in
|
|
154
|
+
Override any CSS variable in `custom.css`:
|
|
113
155
|
|
|
114
156
|
```css title="src/css/custom.css"
|
|
115
|
-
/* Brand color */
|
|
116
157
|
:root {
|
|
117
|
-
--ifm-color-primary:
|
|
118
|
-
--ifm-color-primary-dark:
|
|
119
|
-
--ifm-color-primary-darker:
|
|
158
|
+
--ifm-color-primary: #e11d48;
|
|
159
|
+
--ifm-color-primary-dark: #be123c;
|
|
160
|
+
--ifm-color-primary-darker: #9f1239;
|
|
120
161
|
--ifm-color-primary-darkest: #881337;
|
|
121
|
-
--ifm-color-primary-light:
|
|
162
|
+
--ifm-color-primary-light: #fb7185;
|
|
122
163
|
--ifm-color-primary-lighter: #fda4af;
|
|
123
|
-
--ifm-color-primary-lightest
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
/* Font */
|
|
127
|
-
:root {
|
|
128
|
-
--ifm-font-family-base: 'Inter', system-ui, sans-serif;
|
|
164
|
+
--ifm-color-primary-lightest: #ffe4e6;
|
|
129
165
|
}
|
|
130
166
|
```
|
|
131
167
|
|
|
132
|
-
See the [Color Tokens](https://sckyzo.github.io/cosmos-docusaurus-theme/color-tokens) page
|
|
133
|
-
for all available tokens (dark + light with visual swatches).
|
|
134
|
-
|
|
135
|
-
---
|
|
136
|
-
|
|
137
|
-
## Utility classes
|
|
138
|
-
|
|
139
|
-
| Class | Usage |
|
|
140
|
-
|---|---|
|
|
141
|
-
| `.method-get/post/put/delete/patch` | HTTP method labels (monospace, semantic color) |
|
|
142
|
-
| `.status-ok/warn/crit/unknown` | Health state labels |
|
|
143
|
-
| `.state-ok/warn/crit/unknown` | Aliases for the above |
|
|
144
|
-
|
|
145
168
|
---
|
|
146
169
|
|
|
147
170
|
## Development
|
|
148
171
|
|
|
149
172
|
```bash
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
#
|
|
154
|
-
|
|
173
|
+
make install # install devDependencies
|
|
174
|
+
make lint # CSS + JS + Markdown + format + MDX class= check
|
|
175
|
+
make security # npm audit + no-runtime-deps
|
|
176
|
+
make demo-build # build demo static site
|
|
177
|
+
make demo-check # verify 12 key pages exist in build output
|
|
178
|
+
make demo-start # dev server at http://localhost:3000
|
|
179
|
+
make docker-up # demo in Docker at http://localhost:3000
|
|
155
180
|
```
|
|
156
181
|
|
|
157
182
|
---
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cosmos-docusaurus-theme",
|
|
3
|
-
"version": "2.
|
|
4
|
-
"description": "A clean, dark-first Docusaurus
|
|
3
|
+
"version": "2.1.1",
|
|
4
|
+
"description": "A clean, dark-first Docusaurus theme aligned with the Rackscope Void/Slate design system — CSS-only, IBM Plex Mono + Outfit typography, brand indigo",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"docusaurus",
|
|
7
7
|
"docusaurus-theme",
|
|
@@ -35,10 +35,19 @@
|
|
|
35
35
|
],
|
|
36
36
|
"scripts": {
|
|
37
37
|
"lint:css": "stylelint \"src/css/**/*.css\"",
|
|
38
|
-
"lint": "
|
|
38
|
+
"lint:js": "eslint src/",
|
|
39
|
+
"lint:md": "markdownlint \"*.md\" \"docs/**/*.md\"",
|
|
40
|
+
"lint:format": "prettier --check \"src/**/*.{js,css}\" \"*.{json,md}\"",
|
|
41
|
+
"lint": "npm run lint:css && npm run lint:js && npm run lint:md && npm run lint:format",
|
|
42
|
+
"format": "prettier --write \"src/**/*.{js,css}\" \"*.{json,md}\"",
|
|
43
|
+
"lint:fix": "stylelint --fix \"src/css/**/*.css\" && eslint --fix src/ && prettier --write \"src/**/*.{js,css}\" \"*.{json,md}\"",
|
|
39
44
|
"audit:check": "npm audit --audit-level=moderate"
|
|
40
45
|
},
|
|
41
46
|
"devDependencies": {
|
|
47
|
+
"@eslint/js": "^9.39.4",
|
|
48
|
+
"eslint": "^9.39.4",
|
|
49
|
+
"markdownlint-cli": "^0.48.0",
|
|
50
|
+
"prettier": "^3.8.1",
|
|
42
51
|
"stylelint": "^17.4.0",
|
|
43
52
|
"stylelint-config-standard": "^40.0.0"
|
|
44
53
|
},
|