graphgarden-web 0.1.0 → 0.2.0
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 +10 -8
- package/dist/graphgarden.iife.js +12 -49
- package/dist/graphgarden.iife.js.map +3 -3
- package/dist/graphgarden.js +12 -49
- package/dist/graphgarden.js.map +3 -3
- package/dist/index.d.ts +4 -2
- package/package.json +2 -2
- package/dist/test-setup.d.ts +0 -0
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Drop-in `<graph-garden>` custom element that renders an interactive node graph from a site's [`graphgarden.json`](../../crates/graphgarden-protocol/README.md) file.
|
|
4
4
|
|
|
5
|
-
The component fetches the site's protocol file, merges friend graphs, computes a force-directed layout via ForceAtlas2, and renders an interactive visualisation with [Sigma.js](https://www.sigmajs.org/). Local nodes are shown in indigo, friend nodes in amber,
|
|
5
|
+
The component fetches the site's protocol file, merges friend graphs, computes a force-directed layout via ForceAtlas2, and renders an interactive visualisation with [Sigma.js](https://www.sigmajs.org/). Local nodes are shown in indigo, friend nodes in amber, and frontier nodes (broken links or unreachable friends) in grey. Edge colours follow the same origin-based scheme.
|
|
6
6
|
|
|
7
7
|
## Usage
|
|
8
8
|
|
|
@@ -40,14 +40,16 @@ import "graphgarden-web";
|
|
|
40
40
|
|
|
41
41
|
Override colors via CSS custom properties on the `<graph-garden>` element or any ancestor:
|
|
42
42
|
|
|
43
|
-
| Property | Default | Description
|
|
44
|
-
| -------------------------- | --------- |
|
|
45
|
-
| `--gg-local-node-color` | `#6366f1` | Color of nodes from the local site
|
|
46
|
-
| `--gg-friend-node-color` | `#f59e0b` | Color of nodes from friend sites
|
|
47
|
-
| `--gg-
|
|
48
|
-
| `--gg-
|
|
49
|
-
| `--gg-
|
|
43
|
+
| Property | Default | Description |
|
|
44
|
+
| -------------------------- | --------- | ----------------------------------------------------------- |
|
|
45
|
+
| `--gg-local-node-color` | `#6366f1` | Color of nodes from the local site |
|
|
46
|
+
| `--gg-friend-node-color` | `#f59e0b` | Color of nodes from friend sites |
|
|
47
|
+
| `--gg-frontier-node-color` | `#9ca3af` | Color of frontier nodes (broken links, unreachable friends) |
|
|
48
|
+
| `--gg-local-edge-color` | `#94a3b8` | Color of edges between local pages |
|
|
49
|
+
| `--gg-friend-edge-color` | `#fbbf24` | Color of edges to friend sites |
|
|
50
|
+
| `--gg-label-color` | `#334155` | Color of node labels |
|
|
50
51
|
|
|
52
|
+
> [!IMPORTANT]
|
|
51
53
|
> Colors can be any format supported by Sigma.js: hex (`#rrggbb`, `#rgb`), `rgb()`, `rgba()`, or named CSS colors (e.g. `red`, `darkgreen`).
|
|
52
54
|
|
|
53
55
|
#### Layout and sizing (HTML attributes)
|