{"_id":"@quartz-community/graph","_rev":"2-d298841a5171c6453efc57f755748162","name":"@quartz-community/graph","dist-tags":{"latest":"1.0.0"},"versions":{"0.1.0":{"name":"@quartz-community/graph","version":"0.1.0","keywords":["quartz","quartz-plugin","graph","visualization","network","d3","pixi"],"author":{"name":"Quartz Community"},"license":"MIT","_id":"@quartz-community/graph@0.1.0","maintainers":[{"name":"aarnphm","email":"aaron.pham.2k21@gmail.com"},{"name":"saberzero1","email":"github@emilebangma.com"}],"homepage":"https://quartz.jzhao.xyz","bugs":{"url":"https://github.com/quartz-community/graph/issues"},"dist":{"shasum":"15c4ff211b6479c608459376065d18695b7872be","tarball":"https://registry.npmjs.org/@quartz-community/graph/-/graph-0.1.0.tgz","fileCount":13,"integrity":"sha512-q3Hhu4RqblHbIA45KM79QmNoXLAjaVBOiquYx7E1FS6UozDrn/JG4XOJrrIQnlug73GgqsHFYEAKagZt1rC3dw==","signatures":[{"sig":"MEYCIQCmbXABljWNwtG2PcX7/BxQTOHzK5B+hD/M7rJDVYS48wIhAKD3tvKLG69uzHCSyHtPtlvXnLAQ5aSZbeyW9xhACMnm","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@quartz-community%2fgraph@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":209971},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","quartz":{"name":"graph","version":"1.0.0","category":"component","components":{"Graph":{"displayName":"Graph","defaultPosition":"right","defaultPriority":10}},"displayName":"Graph","defaultOrder":50,"dependencies":[],"optionSchema":{"localGraph":{"type":"object"},"globalGraph":{"type":"object"}},"quartzVersion":">=5.0.0","defaultEnabled":true,"defaultOptions":{"localGraph":{"drag":true,"zoom":true,"depth":1,"scale":1.1,"fontSize":0.6,"showTags":true,"removeTags":[],"repelForce":0.5,"centerForce":0.3,"enableRadial":false,"focusOnHover":false,"linkDistance":30,"opacityScale":1},"globalGraph":{"drag":true,"zoom":true,"depth":-1,"scale":0.9,"fontSize":0.6,"showTags":true,"removeTags":[],"repelForce":0.5,"centerForce":0.2,"enableRadial":true,"focusOnHover":true,"linkDistance":30,"opacityScale":1}}},"engines":{"npm":">=10.9.2","node":">=22"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./types":{"types":"./dist/types.d.ts","import":"./dist/types.js"},"./components":{"types":"./dist/components/index.d.ts","import":"./dist/components/index.js"},"./package.json":"./package.json"},"gitHead":"da64c23f68bb8c451951b60850be949963c37c27","scripts":{"dev":"tsup --watch","lint":"eslint . --max-warnings=0","test":"vitest run","build":"tsup","check":"npm run typecheck && npm run lint && npm run format && npm run test","format":"prettier . --check","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"saberzero1","email":"github@emilebangma.com"},"repository":{"url":"git+https://github.com/quartz-community/graph.git","type":"git"},"_npmVersion":"10.9.8","description":"Interactive graph visualization component for Quartz - visualize your content as a network graph.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","dependencies":{"@quartz-community/types":"^0.2.1","@quartz-community/utils":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.97.3","tsup":"^8.5.0","eslint":"^8.57.0","preact":"^10.28.2","vitest":"^2.1.9","prettier":"^3.6.2","typescript":"^5.9.3","@types/hast":"^3.0.4","@types/node":"^24.10.0","@types/mdast":"^4.0.4","github-slugger":"^2.0.0","eslint-config-prettier":"^9.1.0","hast-util-to-jsx-runtime":"^2.3.6","@typescript-eslint/parser":"^7.18.0","@typescript-eslint/eslint-plugin":"^7.18.0"},"peerDependencies":{"preact":"^10.0.0"},"peerDependenciesMeta":{"preact":{"optional":false}},"_npmOperationalInternal":{"tmp":"tmp/graph_0.1.0_1784761095426_0.827201942116498","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"_id":"@quartz-community/graph@1.0.0","bugs":{"url":"https://github.com/quartz-community/graph/issues"},"dist":{"shasum":"0bf66c9a678417fb4ca637dbfe7fd46c528eaaf2","tarball":"https://registry.npmjs.org/@quartz-community/graph/-/graph-1.0.0.tgz","fileCount":13,"integrity":"sha512-ZmYPp33vF73Vnfx/JFWlD1W23/5bwBlG8fYHgewdCJ5M4xBCbbrWPcoS0MGlHVitruzrk2kZeAD+HqCQ7ULfgg==","signatures":[{"sig":"MEUCICm0i/XPcFM0dNoIF7W4VfNN67G2edo9RrQWprzTuKIWAiEAx8NBsa5FYOIxO5cR782zpX7OzQ0hIxEwmcdcapepH5g=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDH0AAKjdsDr2WpyB5rSfI01yUWc3IXd8tzmORxnEGKXAIhALcjNvWclOhwdBrBf42YC+RsjU3U+0yPMXj6mFL7K+5t"}],"unpackedSize":211075},"main":"./dist/index.js","name":"@quartz-community/graph","type":"module","types":"./dist/index.d.ts","author":{"name":"Quartz Community"},"quartz":{"name":"graph","version":"1.0.0","category":"component","components":{"Graph":{"displayName":"Graph","defaultPosition":"right","defaultPriority":10}},"displayName":"Graph","defaultOrder":50,"dependencies":[],"optionSchema":{"localGraph":{"type":"object"},"globalGraph":{"type":"object"}},"quartzVersion":">=5.0.0","defaultEnabled":true,"defaultOptions":{"localGraph":{"drag":true,"zoom":true,"depth":1,"scale":1.1,"fontSize":0.6,"showTags":true,"removeTags":[],"repelForce":0.5,"centerForce":0.3,"enableRadial":false,"focusOnHover":false,"linkDistance":30,"opacityScale":1},"globalGraph":{"drag":true,"zoom":true,"depth":-1,"scale":0.9,"fontSize":0.6,"showTags":true,"removeTags":[],"repelForce":0.5,"centerForce":0.2,"enableRadial":true,"focusOnHover":true,"linkDistance":30,"opacityScale":1}}},"engines":{"npm":">=10.9.2","node":">=22"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./types":{"types":"./dist/types.d.ts","import":"./dist/types.js"},"./components":{"types":"./dist/components/index.d.ts","import":"./dist/components/index.js"},"./package.json":"./package.json"},"gitHead":"e647019c05ab2a3279c9cddd7bc2f18acb9858b8","license":"MIT","scripts":{"dev":"tsup --watch","lint":"eslint . --max-warnings=0","test":"vitest run","build":"tsup","check":"npm run typecheck && npm run lint && npm run format && npm run test","format":"prettier . --check","release":"npm run build && changeset publish","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"version":"1.0.0","_npmUser":{"name":"saberzero1","email":"github@emilebangma.com"},"homepage":"https://quartz.jzhao.xyz","keywords":["quartz","quartz-plugin","graph","visualization","network","d3","pixi"],"repository":{"url":"git+https://github.com/quartz-community/graph.git","type":"git"},"_npmVersion":"10.9.8","description":"Interactive graph visualization component for Quartz - visualize your content as a network graph.","directories":{},"maintainers":[{"name":"aarnphm","email":"aaron.pham.2k21@gmail.com"},{"name":"saberzero1","email":"github@emilebangma.com"}],"sideEffects":false,"_nodeVersion":"22.23.2","dependencies":{"@quartz-community/types":"^1.0.0","@quartz-community/utils":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.97.3","tsup":"^8.5.0","eslint":"^8.57.0","preact":"^10.28.2","vitest":"^2.1.9","prettier":"^3.6.2","typescript":"^5.9.3","@types/hast":"^3.0.4","@types/node":"^24.10.0","@types/mdast":"^4.0.4","github-slugger":"^2.0.0","@changesets/cli":"^2.29.2","eslint-config-prettier":"^9.1.0","hast-util-to-jsx-runtime":"^2.3.6","@typescript-eslint/parser":"^7.18.0","@typescript-eslint/eslint-plugin":"^7.18.0"},"peerDependencies":{"preact":"^10.0.0"},"peerDependenciesMeta":{"preact":{"optional":false}},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/graph_1.0.0_1789429471716_0.4551162841690828"}}},"time":{"created":"2026-07-22T22:58:15.264Z","modified":"2026-09-14T23:44:31.997Z","0.1.0":"2026-07-22T22:58:15.570Z","1.0.0":"2026-09-14T23:44:31.803Z"},"bugs":{"url":"https://github.com/quartz-community/graph/issues"},"author":{"name":"Quartz Community"},"license":"MIT","homepage":"https://quartz.jzhao.xyz","keywords":["quartz","quartz-plugin","graph","visualization","network","d3","pixi"],"repository":{"url":"git+https://github.com/quartz-community/graph.git","type":"git"},"description":"Interactive graph visualization component for Quartz - visualize your content as a network graph.","maintainers":[{"name":"aarnphm","email":"aaron.pham.2k21@gmail.com"},{"name":"saberzero1","email":"github@emilebangma.com"}],"readme":"# @quartz-community/graph\n\nThe Graph View component for Quartz - visualize your digital garden as an interactive network graph.\n\n## Features\n\n- 🕸️ **Interactive Network Graph** - Visualize connections between your pages\n- 🎨 **Local & Global Views** - See connections to current page or explore the entire graph\n- ⚡ **Smooth Animations** - Built with D3 force simulation and PixiJS rendering\n- 🏷️ **Tag Support** - Visualize tags as nodes in the graph\n- 🖱️ **Interactive Controls** - Drag, zoom, and pan around the graph\n- 💾 **Visited Tracking** - Highlights pages you've already visited\n- ⌨️ **Keyboard Shortcuts** - Press `Ctrl/Cmd + G` to toggle the global graph\n\n## Installation\n\n```bash\nnpx quartz plugin add github:quartz-community/graph\n```\n\n## Usage\n\n```yaml title=\"quartz.config.yaml\"\nplugins:\n  - source: github:quartz-community/graph\n    enabled: true\n    layout:\n      position: right\n      priority: 10\n```\n\nFor advanced use cases, you can override in TypeScript:\n\n```ts title=\"quartz.ts (override)\"\nimport * as ExternalPlugin from \"./.quartz/plugins\";\n\nExternalPlugin.Graph({\n  localGraph: {\n    drag: true,\n    zoom: true,\n    depth: 1,\n  },\n  globalGraph: {\n    drag: true,\n    zoom: true,\n    depth: -1,\n  },\n});\n```\n\n## Configuration Options\n\n```typescript\ninterface D3Config {\n  /** Enable node dragging */\n  drag: boolean;\n  /** Enable zooming */\n  zoom: boolean;\n  /** Depth of connections to show (-1 for all) */\n  depth: number;\n  /** Graph scale factor */\n  scale: number;\n  /** Force repelling strength */\n  repelForce: number;\n  /** Center force strength */\n  centerForce: number;\n  /** Distance between linked nodes */\n  linkDistance: number;\n  /** Label font size */\n  fontSize: number;\n  /** Opacity multiplier */\n  opacityScale: number;\n  /** Tags to exclude */\n  removeTags: string[];\n  /** Show tags as nodes */\n  showTags: boolean;\n  /** Dim non-hovered nodes on hover */\n  focusOnHover?: boolean;\n  /** Enable radial layout */\n  enableRadial?: boolean;\n}\n\ninterface GraphOptions {\n  localGraph?: Partial<D3Config>; // Local page graph config\n  globalGraph?: Partial<D3Config>; // Global graph config\n}\n```\n\n## Default Behavior\n\n### Local Graph\n\nBy default, the local graph:\n\n- Shows 1 level of connections (direct links only)\n- Dragging enabled\n- Zoom enabled\n- Tags shown as nodes\n- 250px height\n- Displays on the right side of pages\n\n### Global Graph\n\nBy default, the global graph:\n\n- Shows all connections (depth: -1)\n- Opens in fullscreen modal when clicking the graph icon\n- Keyboard shortcut: `Ctrl/Cmd + G`\n- Focus on hover enabled (dims non-connected nodes)\n- Radial layout enabled\n- Click outside or press Escape to close\n\n## How It Works\n\nThe Graph component fetches connection data from `/static/contentIndex.json` (generated by the ContentIndex emitter) and renders it using:\n\n- **D3** for physics simulation (force-directed layout)\n- **PixiJS** for high-performance WebGL rendering\n\nExternal libraries are loaded from CDN when the graph is first rendered.\n\n> [!info]\n> Graph View requires the `ContentIndex` emitter plugin to be present in your Quartz configuration.\n\n## Development\n\nThis is a first-party Quartz community plugin. It serves as both:\n\n1. A production-ready Graph View component\n2. A reference implementation for building Quartz community plugins\n\nTo build locally:\n\n```bash\nnpm install\nnpm run build\n```\n\nThe `prepare` script automatically builds during installation.\n\n## Documentation\n\nSee the [Quartz documentation](https://quartz.jzhao.xyz/features/graph%20view) for more information.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}