@miragon/slidev-toolkit 1.2.0 → 1.2.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/README.md +74 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# @miragon/slidev-toolkit
|
|
2
|
+
|
|
3
|
+
The Miragon-branded [Slidev](https://sli.dev) design system: a fixed brand theme, twelve layout archetypes, reusable components (`Card`, `CardGrid`, `StepList`, `Figure`, `SplitView`, `Agenda`), the animated `BrandMeshBackground`, and always-on progress chrome (a stepper bar and a chapter footer). One source of design truth, so a Miragon deck stays on-brand without hand-written HTML or CSS.
|
|
4
|
+
|
|
5
|
+
> Building a **new** deck? The easiest path is the [template repository](https://github.com/Miragon/slidev-deck-template) ("Use this template") — it ships this toolkit together with a demo deck, authoring guidance, and CI. Use the npm package below when you want the brand in an **existing** or standalone Slidev project.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm i @miragon/slidev-toolkit
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Peers: Slidev `>= 0.48.0` and Vue 3.5.
|
|
14
|
+
|
|
15
|
+
## Use
|
|
16
|
+
|
|
17
|
+
Point your deck at the theme in the headmatter of `slides.md`:
|
|
18
|
+
|
|
19
|
+
```yaml
|
|
20
|
+
---
|
|
21
|
+
theme: '@miragon/slidev-toolkit'
|
|
22
|
+
---
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
That is all the wiring needed. You now get, automatically:
|
|
26
|
+
|
|
27
|
+
- **Brand tokens and fonts** — the Miragon colours (primary blue `#335DE5`, sparing green) and the bundled Geist / Geist Mono variable fonts.
|
|
28
|
+
- **The components**, auto-imported (use them by tag, no import): `Card`, `CardGrid`, `StepList` / `Step`, `Figure`, `SplitView`, `Agenda`, `BrandMeshBackground`.
|
|
29
|
+
- **The global chrome** — a thin progress bar on top and a chapter/position footer at the bottom, on every content slide.
|
|
30
|
+
|
|
31
|
+
## Layouts
|
|
32
|
+
|
|
33
|
+
Set `layout:` per slide to one of the twelve archetypes:
|
|
34
|
+
|
|
35
|
+
| Group | Layouts |
|
|
36
|
+
|---|---|
|
|
37
|
+
| Openers | `cover`, `hero`, `person`, `section` |
|
|
38
|
+
| Content | `content`, `content-image` |
|
|
39
|
+
| Decisions | `compare`, `goodbad` |
|
|
40
|
+
| Process and rules | `bpmn`, `dmn` |
|
|
41
|
+
| Explore and close | `showcase`, `closing` |
|
|
42
|
+
|
|
43
|
+
`cover` and `closing` run the animated `BrandMeshBackground`; the rest are the calm static world on light grey.
|
|
44
|
+
|
|
45
|
+
### BPMN and DMN need an addon
|
|
46
|
+
|
|
47
|
+
The `bpmn` and `dmn` layouts render real diagrams via community addons, which are **not** dependencies of this toolkit. Add whichever you use to your deck:
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
npm i slidev-addon-bpmn slidev-addon-dmn
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
```yaml
|
|
54
|
+
---
|
|
55
|
+
theme: '@miragon/slidev-toolkit'
|
|
56
|
+
addons:
|
|
57
|
+
- slidev-addon-bpmn # for layout: bpmn
|
|
58
|
+
- slidev-addon-dmn # for layout: dmn
|
|
59
|
+
---
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Then reference the file: `diagram: /resources/<path>/<file>.bpmn` (or `.dmn`).
|
|
63
|
+
|
|
64
|
+
## Assets and diagrams
|
|
65
|
+
|
|
66
|
+
This package ships the design system only, not an asset pipeline. Serve your own images, `.bpmn` / `.dmn` files and `.excalidraw.svg` diagrams from Slidev's `public/` folder (or your own Vite setup) and reference them by URL path.
|
|
67
|
+
|
|
68
|
+
## Editorial conventions
|
|
69
|
+
|
|
70
|
+
The brand is intentionally fixed: headings are black (blue is for kickers and accents), cards are always white with the accent on the title only, no em-dashes, no emoji. The full authoring guide, demo slides, and a design-system verify suite live in the [template repository](https://github.com/Miragon/slidev-deck-template), not in this package.
|
|
71
|
+
|
|
72
|
+
## License
|
|
73
|
+
|
|
74
|
+
MIT. The bundled Geist fonts are OFL (see `assets/fonts/LICENSE.txt`).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@miragon/slidev-toolkit",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "Miragon Slidev toolkit: the brand theme, the layout archetypes, the reusable components (Card, CardGrid, StepList, Figure, SplitView) and the BrandMeshBackground animation. Single source of design truth, consumed by the reference deck in this repo.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"slidev-theme",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"@paper-design/shaders": "0.0.77"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"vue": "3.5.
|
|
26
|
+
"vue": "^3.5.0"
|
|
27
27
|
},
|
|
28
28
|
"files": [
|
|
29
29
|
"layouts",
|