@markgrafhq/starlight-markgraf 0.0.26 → 0.0.28
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 +7 -7
- package/dist/markgraf-react.css +290 -0
- package/package.json +7 -5
package/README.md
CHANGED
|
@@ -25,7 +25,7 @@ export default defineConfig({
|
|
|
25
25
|
Import the player CSS in a global stylesheet:
|
|
26
26
|
|
|
27
27
|
```css
|
|
28
|
-
@import "@markgrafhq/markgraf
|
|
28
|
+
@import "@markgrafhq/starlight-markgraf/css";
|
|
29
29
|
```
|
|
30
30
|
|
|
31
31
|
## Use
|
|
@@ -35,11 +35,11 @@ Fenced code blocks with the `markgraf` language render as live players:
|
|
|
35
35
|
````markdown
|
|
36
36
|
```markgraf
|
|
37
37
|
seed 1
|
|
38
|
-
|
|
39
|
-
+
|
|
40
|
-
+
|
|
41
|
-
+
|
|
42
|
-
client
|
|
38
|
+
scene v1 {
|
|
39
|
+
+ client: Client
|
|
40
|
+
+ api: API
|
|
41
|
+
+ client -> api
|
|
42
|
+
client ~> api: GET /user/42
|
|
43
43
|
}
|
|
44
44
|
```
|
|
45
45
|
````
|
|
@@ -51,5 +51,5 @@ Or use the component directly in MDX/Astro:
|
|
|
51
51
|
import Markgraf from "@markgrafhq/starlight-markgraf/Markgraf.astro";
|
|
52
52
|
---
|
|
53
53
|
|
|
54
|
-
<Markgraf src={`seed 1\
|
|
54
|
+
<Markgraf src={`seed 1\nscene v1 { + a: A }`} />
|
|
55
55
|
```
|
|
@@ -0,0 +1,290 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: 'CommitMono';
|
|
3
|
+
src: url('./CommitMono-Regular.woff2') format('woff2');
|
|
4
|
+
font-weight: 400;
|
|
5
|
+
font-display: swap;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.markgraf-embed {
|
|
9
|
+
--mg-bg: #ffffff;
|
|
10
|
+
--mg-fg: #111111;
|
|
11
|
+
--mg-bar-bg: #111111;
|
|
12
|
+
--mg-bar-fg: #ffffff;
|
|
13
|
+
--mg-muted: #9a9a9a;
|
|
14
|
+
--mg-accent: #ffffff;
|
|
15
|
+
--mg-track: #111111;
|
|
16
|
+
--mg-track-hover: #111111;
|
|
17
|
+
position: relative;
|
|
18
|
+
border-radius: 10px;
|
|
19
|
+
background: transparent;
|
|
20
|
+
color: var(--mg-fg);
|
|
21
|
+
font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
22
|
+
overflow: hidden;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.markgraf-embed canvas[data-mg="stage"],
|
|
26
|
+
.markgraf-embed svg[data-mg="stage"] {
|
|
27
|
+
width: 100%;
|
|
28
|
+
height: auto;
|
|
29
|
+
display: block;
|
|
30
|
+
max-height: var(--mg-max-height, 90svh);
|
|
31
|
+
object-fit: contain;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.markgraf-embed :focus,
|
|
35
|
+
.markgraf-embed :focus-visible {
|
|
36
|
+
outline: none;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Big centered play hint shown while paused. Hidden as soon as a play
|
|
40
|
+
button anywhere in the embed flips to data-mg-playing="1". */
|
|
41
|
+
.markgraf-embed [data-mg="play-overlay"] {
|
|
42
|
+
position: absolute;
|
|
43
|
+
inset: 0;
|
|
44
|
+
margin: auto;
|
|
45
|
+
width: 72px;
|
|
46
|
+
height: 72px;
|
|
47
|
+
border-radius: 50%;
|
|
48
|
+
background: rgba(0, 0, 0, 0.55);
|
|
49
|
+
pointer-events: none;
|
|
50
|
+
opacity: 0;
|
|
51
|
+
transform: scale(0.85);
|
|
52
|
+
transition: opacity 0.12s ease, transform 0.12s ease;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.markgraf-embed [data-mg="play-overlay"]::before {
|
|
56
|
+
content: "";
|
|
57
|
+
position: absolute;
|
|
58
|
+
inset: 0;
|
|
59
|
+
margin: auto;
|
|
60
|
+
width: 32px;
|
|
61
|
+
height: 32px;
|
|
62
|
+
background: #fff;
|
|
63
|
+
-webkit-mask: var(--mg-icon-play) center / contain no-repeat;
|
|
64
|
+
mask: var(--mg-icon-play) center / contain no-repeat;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.markgraf-embed:has([data-mg="play"][data-mg-playing="0"]) [data-mg="play-overlay"] {
|
|
68
|
+
opacity: 1;
|
|
69
|
+
transform: scale(1);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.markgraf-embed [data-mg="bar"] {
|
|
73
|
+
position: absolute;
|
|
74
|
+
left: 0;
|
|
75
|
+
right: 0;
|
|
76
|
+
bottom: 0;
|
|
77
|
+
display: flex;
|
|
78
|
+
align-items: center;
|
|
79
|
+
gap: 8px;
|
|
80
|
+
padding: 6px 8px;
|
|
81
|
+
background: rgba(255, 255, 255, 0.92);
|
|
82
|
+
color: var(--mg-fg);
|
|
83
|
+
opacity: 0;
|
|
84
|
+
transform: translateY(2px);
|
|
85
|
+
transition: opacity 0.08s ease, transform 0.08s ease;
|
|
86
|
+
pointer-events: none;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.markgraf-embed:hover [data-mg="bar"],
|
|
90
|
+
.markgraf-embed:focus-within [data-mg="bar"] {
|
|
91
|
+
opacity: 1;
|
|
92
|
+
transform: translateY(0);
|
|
93
|
+
pointer-events: auto;
|
|
94
|
+
transition: opacity 0.16s ease, transform 0.16s ease;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.markgraf-embed [data-mg="play"] {
|
|
98
|
+
background: transparent;
|
|
99
|
+
color: var(--mg-fg);
|
|
100
|
+
border: 0;
|
|
101
|
+
border-radius: 999px;
|
|
102
|
+
width: 22px;
|
|
103
|
+
height: 22px;
|
|
104
|
+
padding: 0;
|
|
105
|
+
cursor: pointer;
|
|
106
|
+
display: inline-flex;
|
|
107
|
+
align-items: center;
|
|
108
|
+
justify-content: center;
|
|
109
|
+
transition: background 0.1s ease;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.markgraf-embed [data-mg="play"]:hover {
|
|
113
|
+
background: rgba(0, 0, 0, 0.08);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* Heroicons v2 solid play / pause, rendered as a mask so the icon picks up
|
|
117
|
+
currentColor (light-mode black, dark-mode white via the bar override). */
|
|
118
|
+
.markgraf-embed [data-mg="play"]::before {
|
|
119
|
+
content: "";
|
|
120
|
+
display: block;
|
|
121
|
+
width: 14px;
|
|
122
|
+
height: 14px;
|
|
123
|
+
background: currentColor;
|
|
124
|
+
-webkit-mask: var(--mg-icon-play) center / contain no-repeat;
|
|
125
|
+
mask: var(--mg-icon-play) center / contain no-repeat;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.markgraf-embed [data-mg="play"][data-mg-playing="1"]::before {
|
|
129
|
+
-webkit-mask: var(--mg-icon-pause) center / contain no-repeat;
|
|
130
|
+
mask: var(--mg-icon-pause) center / contain no-repeat;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.markgraf-embed {
|
|
134
|
+
--mg-icon-play: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653Z'/></svg>");
|
|
135
|
+
--mg-icon-pause: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z'/></svg>");
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.markgraf-embed [data-mg="time"] {
|
|
139
|
+
font-variant-numeric: tabular-nums;
|
|
140
|
+
font-size: 11px;
|
|
141
|
+
color: var(--mg-fg);
|
|
142
|
+
white-space: nowrap;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.markgraf-embed [data-mg="speed"] {
|
|
146
|
+
background: transparent;
|
|
147
|
+
border: 1px solid currentColor;
|
|
148
|
+
border-radius: 4px;
|
|
149
|
+
padding: 1px 4px;
|
|
150
|
+
color: var(--mg-fg);
|
|
151
|
+
font: 11px/1 inherit;
|
|
152
|
+
cursor: pointer;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.markgraf-embed [data-mg="speed"] option {
|
|
156
|
+
color: var(--mg-fg);
|
|
157
|
+
background: var(--mg-bg);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.markgraf-embed [data-mg="scrub-wrap"] {
|
|
161
|
+
position: relative;
|
|
162
|
+
flex: 1;
|
|
163
|
+
display: flex;
|
|
164
|
+
align-items: center;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.markgraf-embed [data-mg="ticks"] {
|
|
168
|
+
position: absolute;
|
|
169
|
+
left: 7px;
|
|
170
|
+
right: 7px;
|
|
171
|
+
top: 50%;
|
|
172
|
+
transform: translateY(-50%);
|
|
173
|
+
height: 18px;
|
|
174
|
+
pointer-events: none;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.markgraf-embed .mg-tick {
|
|
178
|
+
position: absolute;
|
|
179
|
+
top: 50%;
|
|
180
|
+
width: 4px;
|
|
181
|
+
height: 4px;
|
|
182
|
+
margin-left: -2px;
|
|
183
|
+
margin-top: -2px;
|
|
184
|
+
border-radius: 50%;
|
|
185
|
+
background: #fff;
|
|
186
|
+
opacity: 0.7;
|
|
187
|
+
pointer-events: auto;
|
|
188
|
+
cursor: pointer;
|
|
189
|
+
transition: transform 0.1s ease, opacity 0.1s ease;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.markgraf-embed .mg-tick:hover {
|
|
193
|
+
opacity: 1;
|
|
194
|
+
transform: scale(1.6);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.markgraf-embed .mg-tick::after {
|
|
198
|
+
content: attr(data-label);
|
|
199
|
+
position: absolute;
|
|
200
|
+
bottom: 100%;
|
|
201
|
+
left: 50%;
|
|
202
|
+
transform: translate(-50%, -4px);
|
|
203
|
+
background: rgba(15, 23, 42, 0.95);
|
|
204
|
+
color: #fff;
|
|
205
|
+
font-size: 11px;
|
|
206
|
+
padding: 2px 6px;
|
|
207
|
+
border-radius: 4px;
|
|
208
|
+
white-space: nowrap;
|
|
209
|
+
opacity: 0;
|
|
210
|
+
pointer-events: none;
|
|
211
|
+
transition: opacity 0.1s ease;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.markgraf-embed .mg-tick:hover::after {
|
|
215
|
+
opacity: 1;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/* Custom-styled scrubber. Cross-browser range inputs are notoriously ugly,
|
|
219
|
+
so we strip the native chrome and rebuild from CSS primitives. */
|
|
220
|
+
.markgraf-embed [data-mg="scrub"] {
|
|
221
|
+
-webkit-appearance: none;
|
|
222
|
+
appearance: none;
|
|
223
|
+
width: 100%;
|
|
224
|
+
height: 18px;
|
|
225
|
+
background: transparent;
|
|
226
|
+
cursor: pointer;
|
|
227
|
+
margin: 0;
|
|
228
|
+
position: relative;
|
|
229
|
+
z-index: 1;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.markgraf-embed [data-mg="scrub"]::-webkit-slider-runnable-track {
|
|
233
|
+
height: 4px;
|
|
234
|
+
background: var(--mg-track);
|
|
235
|
+
border-radius: 999px;
|
|
236
|
+
transition: background 0.15s ease;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.markgraf-embed [data-mg="scrub"]:hover::-webkit-slider-runnable-track {
|
|
240
|
+
background: var(--mg-track-hover);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.markgraf-embed [data-mg="scrub"]::-moz-range-track {
|
|
244
|
+
height: 4px;
|
|
245
|
+
background: var(--mg-track);
|
|
246
|
+
border-radius: 999px;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.markgraf-embed [data-mg="scrub"]::-webkit-slider-thumb {
|
|
250
|
+
-webkit-appearance: none;
|
|
251
|
+
appearance: none;
|
|
252
|
+
width: 14px;
|
|
253
|
+
height: 14px;
|
|
254
|
+
border-radius: 50%;
|
|
255
|
+
background: #111;
|
|
256
|
+
border: 2px solid #fff;
|
|
257
|
+
margin-top: -5px;
|
|
258
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
259
|
+
transition: transform 0.08s ease;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.markgraf-embed [data-mg="scrub"]:hover::-webkit-slider-thumb {
|
|
263
|
+
transform: scale(1.15);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.markgraf-embed [data-mg="scrub"]::-moz-range-thumb {
|
|
267
|
+
width: 14px;
|
|
268
|
+
height: 14px;
|
|
269
|
+
border-radius: 50%;
|
|
270
|
+
background: #111;
|
|
271
|
+
border: 2px solid #fff;
|
|
272
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
@media (prefers-color-scheme: dark) {
|
|
276
|
+
.markgraf-embed {
|
|
277
|
+
--mg-bg: #111111;
|
|
278
|
+
--mg-fg: #ffffff;
|
|
279
|
+
--mg-track: #ffffff;
|
|
280
|
+
--mg-track-hover: #ffffff;
|
|
281
|
+
}
|
|
282
|
+
.markgraf-embed [data-mg="bar"] {
|
|
283
|
+
background: rgba(17, 17, 17, 0.92);
|
|
284
|
+
}
|
|
285
|
+
.markgraf-embed [data-mg="scrub"]::-webkit-slider-thumb,
|
|
286
|
+
.markgraf-embed [data-mg="scrub"]::-moz-range-thumb {
|
|
287
|
+
background: #fff;
|
|
288
|
+
border-color: #111;
|
|
289
|
+
}
|
|
290
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@markgrafhq/starlight-markgraf",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.28",
|
|
4
4
|
"description": "Starlight/Astro integration for embedding markgraf animations. Transforms ```markgraf fenced code blocks into a live player and exposes a <Markgraf src=\"…\" /> component.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"./remark": {
|
|
16
16
|
"default": "./dist/remark-markgraf.js"
|
|
17
17
|
},
|
|
18
|
-
"./css": "./
|
|
18
|
+
"./css": "./dist/markgraf-react.css"
|
|
19
19
|
},
|
|
20
20
|
"files": [
|
|
21
21
|
"dist",
|
|
@@ -23,9 +23,11 @@
|
|
|
23
23
|
"README.md",
|
|
24
24
|
"LICENSE"
|
|
25
25
|
],
|
|
26
|
-
"sideEffects":
|
|
26
|
+
"sideEffects": [
|
|
27
|
+
"./dist/markgraf-react.css"
|
|
28
|
+
],
|
|
27
29
|
"scripts": {
|
|
28
|
-
"build": "tsc -p tsconfig.json && cp src/remark-markgraf.mjs dist/remark-markgraf.mjs && cp src/remark-markgraf.mjs dist/remark-markgraf.js"
|
|
30
|
+
"build": "tsc -p tsconfig.json && cp src/remark-markgraf.mjs dist/remark-markgraf.mjs && cp src/remark-markgraf.mjs dist/remark-markgraf.js && cp node_modules/@markgrafhq/markgraf-react/dist/markgraf-react.css dist/markgraf-react.css"
|
|
29
31
|
},
|
|
30
32
|
"peerDependencies": {
|
|
31
33
|
"astro": ">=4",
|
|
@@ -34,7 +36,7 @@
|
|
|
34
36
|
"react-dom": ">=18"
|
|
35
37
|
},
|
|
36
38
|
"dependencies": {
|
|
37
|
-
"@markgrafhq/markgraf-react": "^0.0.
|
|
39
|
+
"@markgrafhq/markgraf-react": "^0.0.29",
|
|
38
40
|
"unist-util-visit": "^5"
|
|
39
41
|
},
|
|
40
42
|
"devDependencies": {
|