@plotwork.official/viewer 0.1.0 → 0.1.2
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 +24 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,28 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://plotwork.dev">
|
|
3
|
+
<picture>
|
|
4
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://plotwork.dev/brand/logo/plotwork-lockup-on-dark.svg">
|
|
5
|
+
<img alt="Plotwork" src="https://plotwork.dev/brand/logo/plotwork-lockup-on-light.svg" width="240">
|
|
6
|
+
</picture>
|
|
7
|
+
</a>
|
|
8
|
+
</p>
|
|
9
|
+
|
|
1
10
|
# @plotwork.official/viewer
|
|
2
11
|
|
|
12
|
+
<p>
|
|
13
|
+
<a href="https://www.npmjs.com/package/@plotwork.official/viewer"><img alt="npm" src="https://img.shields.io/npm/v/%40plotwork.official%2Fviewer?logo=npm&color=0f766e"></a>
|
|
14
|
+
<img alt="Provenance" src="https://img.shields.io/badge/provenance-signed-0f766e?logo=sigstore&logoColor=white">
|
|
15
|
+
<img alt="Runtime dependencies" src="https://img.shields.io/badge/runtime%20dependencies-0-0f766e?logo=dependabot&logoColor=white">
|
|
16
|
+
<img alt="TypeScript" src="https://img.shields.io/badge/types-included-3178c6?logo=typescript&logoColor=white">
|
|
17
|
+
<a href="https://github.com/plotwork-official/plotwork-sdk/blob/main/LICENSE"><img alt="MIT licence" src="https://img.shields.io/badge/licence-MIT-52514e"></a>
|
|
18
|
+
</p>
|
|
19
|
+
|
|
3
20
|
Embed interactive Plotwork diagrams in any page: pan and zoom, trace a box's lines, drill from an overview box into its part, light and dark, and live updates when a new version is published. A web component, `<plotwork-diagram>`, and a React component, `<PlotworkDiagram>`.
|
|
4
21
|
|
|
22
|
+
<p align="center">
|
|
23
|
+
<img alt="The viewer showing a checkout flow, with the Orders API box traced: its three lines and the boxes they reach are highlighted" src="https://raw.githubusercontent.com/plotwork-official/plotwork-sdk/main/docs/assets/viewer-light.png" width="760">
|
|
24
|
+
</p>
|
|
25
|
+
|
|
5
26
|
## TL;DR
|
|
6
27
|
|
|
7
28
|
| Question | Answer |
|
|
@@ -96,6 +117,6 @@ Set custom properties on the element: `--plotwork-height`, `--plotwork-paper`, `
|
|
|
96
117
|
|
|
97
118
|
| Page | Why |
|
|
98
119
|
|---|---|
|
|
99
|
-
| [Picture contract](
|
|
100
|
-
| [Core](
|
|
101
|
-
| [Element](
|
|
120
|
+
| [Picture contract](https://github.com/plotwork-official/plotwork-sdk/blob/main/spec/picture.md) | What the viewer reads from a picture |
|
|
121
|
+
| [Core](https://github.com/plotwork-official/plotwork-sdk/blob/main/packages/viewer/src/core/README.md) | The parts that need no element |
|
|
122
|
+
| [Element](https://github.com/plotwork-official/plotwork-sdk/blob/main/packages/viewer/src/element/README.md) | How `<plotwork-diagram>` is built |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plotwork.official/viewer",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Embed interactive Plotwork diagrams in any page: a <plotwork-diagram> web component and a React component, with no runtime dependencies.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|