@miragon/slidev-toolkit 1.1.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/layouts/dmn.vue +176 -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/layouts/dmn.vue
ADDED
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
/**
|
|
3
|
+
* dmn — Slide centered on a DMN decision table (STATIC world, no Mesh shader).
|
|
4
|
+
*
|
|
5
|
+
* Renders a .dmn file as a decision table via `slidev-addon-dmn`, with an
|
|
6
|
+
* optional title/eyebrow header above and an optional caption below. The
|
|
7
|
+
* decision table is the focal point. The sibling of the `bpmn` archetype: BPMN
|
|
8
|
+
* models the process, DMN models the decisions inside it.
|
|
9
|
+
*
|
|
10
|
+
* Requires: `slidev-addon-dmn` must be listed in the slides.md frontmatter
|
|
11
|
+
* `addons:` block. The component used is `<DmnTable>`, registered automatically
|
|
12
|
+
* by the addon (it also ships `<DmnDrd>` for the requirement diagram and
|
|
13
|
+
* `<DmnModeler>` for an editor, not used here).
|
|
14
|
+
*
|
|
15
|
+
* Frontmatter props:
|
|
16
|
+
* title — slide title (h2-level)
|
|
17
|
+
* eyebrow — uppercase kicker
|
|
18
|
+
* accent — "blue" | "green" | "mixed" (default blue)
|
|
19
|
+
* diagram — served URL path to the .dmn file, resolved base-aware
|
|
20
|
+
* (e.g. "/resources/04-diagrams/approval.dmn")
|
|
21
|
+
* height — CSS height for the table canvas (default "360px")
|
|
22
|
+
* decisionId — which decision to show when the file holds several (optional)
|
|
23
|
+
* fontSize — table font size (default "15px")
|
|
24
|
+
* showAnnotations — show the trailing annotations column (default false)
|
|
25
|
+
* Slot:
|
|
26
|
+
* default — optional caption / explanatory line below the table
|
|
27
|
+
*/
|
|
28
|
+
import { computed } from 'vue'
|
|
29
|
+
|
|
30
|
+
const props = withDefaults(
|
|
31
|
+
defineProps<{
|
|
32
|
+
eyebrow?: string
|
|
33
|
+
accent?: 'blue' | 'green' | 'mixed'
|
|
34
|
+
diagram?: string
|
|
35
|
+
height?: string
|
|
36
|
+
decisionId?: string
|
|
37
|
+
fontSize?: string
|
|
38
|
+
showAnnotations?: boolean
|
|
39
|
+
frontmatter?: Record<string, unknown>
|
|
40
|
+
}>(),
|
|
41
|
+
{ accent: 'blue', height: '360px', fontSize: '15px', showAnnotations: false },
|
|
42
|
+
)
|
|
43
|
+
|
|
44
|
+
const title = computed(() => props.frontmatter?.title as string | undefined)
|
|
45
|
+
const gradientVar = computed(() => `var(--miragon-gradient-${props.accent})`)
|
|
46
|
+
const accentVar = computed(() =>
|
|
47
|
+
props.accent === 'green' ? 'var(--miragon-green-deep)' : 'var(--miragon-blue)',
|
|
48
|
+
)
|
|
49
|
+
|
|
50
|
+
// Base-Pfad respektieren (Deploys bauen ggf. unter /<repo>/). Runtime-Strings
|
|
51
|
+
// werden von Vite NICHT umgeschrieben — daher manuell mit BASE_URL auflösen.
|
|
52
|
+
// Gleiche Logik wie in bpmn.vue / person.vue / content-image.vue.
|
|
53
|
+
function withBase(path?: string) {
|
|
54
|
+
if (!path) return path
|
|
55
|
+
if (/^https?:\/\//.test(path)) return path
|
|
56
|
+
return import.meta.env.BASE_URL.replace(/\/$/, '') + '/' + path.replace(/^\//, '')
|
|
57
|
+
}
|
|
58
|
+
const diagramSrc = computed(() => withBase(props.diagram))
|
|
59
|
+
</script>
|
|
60
|
+
|
|
61
|
+
<template>
|
|
62
|
+
<div class="dmn-layout" :style="{ '--dm-grad': gradientVar, '--dm-accent': accentVar }">
|
|
63
|
+
<div class="dmn-inner">
|
|
64
|
+
<header v-if="title || eyebrow" class="dmn-head">
|
|
65
|
+
<span class="dmn-bar" aria-hidden="true"></span>
|
|
66
|
+
<div v-if="eyebrow" class="dmn-eyebrow">{{ eyebrow }}</div>
|
|
67
|
+
<h2 v-if="title" class="dmn-title">{{ title }}</h2>
|
|
68
|
+
</header>
|
|
69
|
+
|
|
70
|
+
<div class="dmn-canvas">
|
|
71
|
+
<DmnTable
|
|
72
|
+
v-if="diagram"
|
|
73
|
+
:dmnFilePath="diagramSrc"
|
|
74
|
+
width="100%"
|
|
75
|
+
:height="height"
|
|
76
|
+
:decisionId="decisionId"
|
|
77
|
+
:fontSize="fontSize"
|
|
78
|
+
:showAnnotations="showAnnotations"
|
|
79
|
+
/>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<div v-if="$slots.default" class="dmn-caption">
|
|
83
|
+
<slot />
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
</template>
|
|
88
|
+
|
|
89
|
+
<style scoped>
|
|
90
|
+
.dmn-layout {
|
|
91
|
+
position: relative;
|
|
92
|
+
width: 100%;
|
|
93
|
+
height: 100%;
|
|
94
|
+
overflow: hidden;
|
|
95
|
+
background: var(--miragon-gray-bg);
|
|
96
|
+
color: var(--miragon-text-primary);
|
|
97
|
+
display: flex;
|
|
98
|
+
align-items: stretch;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.dmn-inner {
|
|
102
|
+
position: relative;
|
|
103
|
+
z-index: 1;
|
|
104
|
+
width: 100%;
|
|
105
|
+
max-width: 78rem;
|
|
106
|
+
margin: 0 auto;
|
|
107
|
+
padding: 2.5rem 4rem;
|
|
108
|
+
display: flex;
|
|
109
|
+
flex-direction: column;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.dmn-head {
|
|
113
|
+
flex: 0 0 auto;
|
|
114
|
+
margin-bottom: 1.25rem;
|
|
115
|
+
}
|
|
116
|
+
.dmn-bar {
|
|
117
|
+
display: block;
|
|
118
|
+
width: 3.5rem;
|
|
119
|
+
height: 0.35rem;
|
|
120
|
+
border-radius: 999px;
|
|
121
|
+
background: var(--dm-grad);
|
|
122
|
+
margin-bottom: 0.9rem;
|
|
123
|
+
}
|
|
124
|
+
.dmn-eyebrow {
|
|
125
|
+
font-size: 0.9rem;
|
|
126
|
+
font-weight: 600;
|
|
127
|
+
letter-spacing: 0.18em;
|
|
128
|
+
text-transform: uppercase;
|
|
129
|
+
color: var(--dm-accent);
|
|
130
|
+
margin-bottom: 0.55rem;
|
|
131
|
+
}
|
|
132
|
+
.dmn-title {
|
|
133
|
+
font-size: clamp(1.7rem, 2.7vw, 2.2rem);
|
|
134
|
+
line-height: 1.15;
|
|
135
|
+
font-weight: 800;
|
|
136
|
+
letter-spacing: -0.02em;
|
|
137
|
+
margin: 0;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.dmn-canvas {
|
|
141
|
+
flex: 1 1 auto;
|
|
142
|
+
min-height: 0;
|
|
143
|
+
background: var(--miragon-white);
|
|
144
|
+
border: 1px solid #E5E7EB;
|
|
145
|
+
border-radius: 1.1rem;
|
|
146
|
+
padding: 0.75rem;
|
|
147
|
+
box-shadow: 0 8px 20px rgba(51, 93, 229, 0.08);
|
|
148
|
+
overflow: hidden;
|
|
149
|
+
display: flex;
|
|
150
|
+
align-items: center;
|
|
151
|
+
justify-content: center;
|
|
152
|
+
}
|
|
153
|
+
/* dmn-js ships its own decision-table CSS (imported by the addon). We keep that
|
|
154
|
+
rendering intact and only frame it in the branded card above, exactly like the
|
|
155
|
+
bpmn archetype frames bpmn-js. */
|
|
156
|
+
|
|
157
|
+
.dmn-caption {
|
|
158
|
+
flex: 0 0 auto;
|
|
159
|
+
margin-top: 1rem;
|
|
160
|
+
font-size: 0.95rem;
|
|
161
|
+
color: var(--miragon-text-muted);
|
|
162
|
+
text-align: center;
|
|
163
|
+
}
|
|
164
|
+
.dmn-caption :deep(p) {
|
|
165
|
+
margin: 0;
|
|
166
|
+
line-height: 1.5;
|
|
167
|
+
}
|
|
168
|
+
.dmn-caption :deep(code) {
|
|
169
|
+
font-family: var(--miragon-font-mono);
|
|
170
|
+
font-size: 0.9em;
|
|
171
|
+
background: var(--miragon-blue-light);
|
|
172
|
+
color: var(--miragon-blue-darker);
|
|
173
|
+
padding: 0.1em 0.4em;
|
|
174
|
+
border-radius: 0.35rem;
|
|
175
|
+
}
|
|
176
|
+
</style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@miragon/slidev-toolkit",
|
|
3
|
-
"version": "1.1
|
|
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",
|