remark-dgmo 0.1.1 → 0.1.3
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 +2 -2
- package/dist/client.css +71 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Framework-agnostic [remark](https://github.com/remarkjs/remark) plugin that renders [DGMO](https://diagrammo.app) diagrams from `` ```dgmo `` fenced code blocks at build time. Powered by [`@diagrammo/dgmo`](https://www.npmjs.com/package/@diagrammo/dgmo). Zero client JavaScript by default.
|
|
4
4
|
|
|
5
5
|
```dgmo
|
|
6
|
-
|
|
6
|
+
sequence
|
|
7
7
|
Client -POST /login-> API
|
|
8
8
|
API -validate-> Auth
|
|
9
9
|
Auth -JWT-> API
|
|
@@ -162,7 +162,7 @@ Append options to the fence info string. Tokens are space-separated; values may
|
|
|
162
162
|
|
|
163
163
|
````markdown
|
|
164
164
|
```dgmo showcase title="Login flow" palette=catppuccin theme=light
|
|
165
|
-
|
|
165
|
+
sequence
|
|
166
166
|
A -> B
|
|
167
167
|
```
|
|
168
168
|
````
|
package/dist/client.css
CHANGED
|
@@ -1,4 +1,74 @@
|
|
|
1
|
-
/* remark-dgmo
|
|
1
|
+
/* remark-dgmo — visibility, sizing, and showcase chrome.
|
|
2
|
+
* Override the `[data-theme="dark"]` selector if your site uses
|
|
3
|
+
* `.dark` or another convention. */
|
|
4
|
+
|
|
5
|
+
/* === Color-mode visibility === */
|
|
2
6
|
.dgmo-dark { display: none; }
|
|
3
7
|
[data-theme="dark"] .dgmo-light { display: none; }
|
|
4
8
|
[data-theme="dark"] .dgmo-dark { display: block; }
|
|
9
|
+
|
|
10
|
+
/* === Diagram sizing ===
|
|
11
|
+
* SVGs are emitted with viewBox only (no fixed width/height). Force them
|
|
12
|
+
* to fill their wrapper so light and dark variants render at identical
|
|
13
|
+
* sizes — without this, browsers fall back to the 300x150 UA default and
|
|
14
|
+
* the two themes can disagree depending on host CSS. */
|
|
15
|
+
.dgmo-light > svg,
|
|
16
|
+
.dgmo-dark > svg,
|
|
17
|
+
.dgmo-svg > svg {
|
|
18
|
+
display: block;
|
|
19
|
+
width: 100%;
|
|
20
|
+
height: auto;
|
|
21
|
+
max-width: 100%;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* === Showcase mode: source block ===
|
|
25
|
+
* <pre> is browser-default `white-space: pre`, but Docusaurus and several
|
|
26
|
+
* other docs frameworks reset that. Force preservation here so the source
|
|
27
|
+
* keeps its newlines and renders as code. */
|
|
28
|
+
.dgmo-pre {
|
|
29
|
+
white-space: pre;
|
|
30
|
+
overflow-x: auto;
|
|
31
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
32
|
+
font-size: 0.85em;
|
|
33
|
+
line-height: 1.5;
|
|
34
|
+
margin: 0;
|
|
35
|
+
padding: 1em;
|
|
36
|
+
}
|
|
37
|
+
.dgmo-code { display: block; }
|
|
38
|
+
|
|
39
|
+
/* === Showcase mode: card + toolbar === */
|
|
40
|
+
.dgmo-card {
|
|
41
|
+
border: 1px solid rgba(127, 127, 127, 0.2);
|
|
42
|
+
border-radius: 0.5em;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
}
|
|
45
|
+
.dgmo-source-wrap {
|
|
46
|
+
border-bottom: 1px solid rgba(127, 127, 127, 0.2);
|
|
47
|
+
}
|
|
48
|
+
.dgmo-toolbar {
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
justify-content: space-between;
|
|
52
|
+
padding: 0.4em 0.75em;
|
|
53
|
+
background: rgba(127, 127, 127, 0.07);
|
|
54
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
55
|
+
font-size: 0.75em;
|
|
56
|
+
color: rgba(127, 127, 127, 0.95);
|
|
57
|
+
}
|
|
58
|
+
.dgmo-toolbar-actions {
|
|
59
|
+
display: flex;
|
|
60
|
+
gap: 0.4em;
|
|
61
|
+
}
|
|
62
|
+
.dgmo-toolbar-btn {
|
|
63
|
+
background: none;
|
|
64
|
+
border: 0;
|
|
65
|
+
padding: 0.25em;
|
|
66
|
+
color: inherit;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
display: inline-flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
opacity: 0.7;
|
|
71
|
+
transition: opacity 0.15s ease;
|
|
72
|
+
}
|
|
73
|
+
.dgmo-toolbar-btn:hover { opacity: 1; }
|
|
74
|
+
.dgmo-copy--success { color: #5cba7a; opacity: 1; }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "remark-dgmo",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Remark plugin to render DGMO diagrams from fenced code blocks at build time. Framework-agnostic core shared by astro-dgmo, docusaurus-plugin-dgmo, and any unified pipeline.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|