ontoink 0.1.0__tar.gz

ontoink-0.1.0/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 FIZ Karlsruhe - Leibniz Institute for Information Infrastructure
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

ontoink-0.1.0/PKG-INFO

@@ -0,0 +1,233 @@
+Metadata-Version: 2.4
+Name: ontoink
+Version: 0.1.0
+Summary: Interactive ontology visualization, SHACL validation, and live TTL editing plugin for MkDocs
+Author-email: Ebrahim Norouzi <ebrahim.norouzi@fiz-karlsruhe.de>
+Maintainer-email: Ebrahim Norouzi <ebrahim.norouzi@fiz-karlsruhe.de>
+License: MIT
+Project-URL: Homepage, https://github.com/ISE-FIZKarlsruhe/ontoink
+Project-URL: Documentation, https://ise-fizkarlsruhe.github.io/ontoink/
+Project-URL: Repository, https://github.com/ISE-FIZKarlsruhe/ontoink
+Project-URL: Issues, https://github.com/ISE-FIZKarlsruhe/ontoink/issues
+Keywords: mkdocs,ontology,visualization,shacl,rdf,turtle,cytoscape,linked-data,semantic-web,nfdi
+Classifier: Development Status :: 4 - Beta
+Classifier: Intended Audience :: Science/Research
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.9
+Classifier: Programming Language :: Python :: 3.10
+Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
+Classifier: Programming Language :: Python :: 3.13
+Classifier: Topic :: Documentation
+Classifier: Topic :: Scientific/Engineering
+Classifier: Topic :: Software Development :: Documentation
+Requires-Python: >=3.9
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: mkdocs>=1.4
+Requires-Dist: rdflib>=6.0
+Requires-Dist: pyshacl>=0.25.0
+Requires-Dist: pymdown-extensions>=10.0
+Requires-Dist: pyyaml>=6.0
+Provides-Extra: dev
+Requires-Dist: pytest>=7.0; extra == "dev"
+Requires-Dist: pytest-cov; extra == "dev"
+Dynamic: license-file
+
+# ontoink
+
+**Interactive ontology visualization, SHACL validation, and live TTL editing for MkDocs.**
+
+[![CI](https://github.com/ISE-FIZKarlsruhe/ontoink/actions/workflows/ci.yml/badge.svg)](https://github.com/ISE-FIZKarlsruhe/ontoink/actions/workflows/ci.yml)
+[![PyPI](https://img.shields.io/pypi/v/ontoink)](https://pypi.org/project/ontoink/)
+[![Python](https://img.shields.io/pypi/pyversions/ontoink)](https://pypi.org/project/ontoink/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+ontoink is a MkDocs plugin that transforms RDF/Turtle files into interactive, publication-ready ontology diagrams with SHACL constraint visualization. Write a simple code block in your markdown, and ontoink generates a fully interactive graph.
+
+**[Live Demo](https://ise-fizkarlsruhe.github.io/ontoink/)**
+
+## Features
+
+### Interactive Graph Visualization
+- Formal ontology notation with distinct shapes per element type
+- Hierarchical layout (dagre) optimized for ontology patterns
+- Pan, zoom, fullscreen support
+- Color-coded by ontology source (BFO, IAO, FOAF, Schema.org, etc.)
+
+### Visual Notation
+
+| Element | Shape | Default Color |
+|---------|-------|---------------|
+| Class | Rectangle (solid border) | By ontology source |
+| Individual | Ellipse | `#E6E6E6` |
+| Literal | Ellipse (dashed border) | `#93D053` |
+| Object Property | Blue solid line, filled arrow | `#2563eb` |
+| Data Property | Green line, hollow arrow | `#16a34a` |
+| rdf:type | Grey dashed line | `#9ca3af` |
+| rdfs:subClassOf | Black solid line | `#374151` |
+| SHACL Constraint | Cyan dashed bold line | `#0891b2` |
+
+### Click Popups
+- Node label, type badge, full IRI (clickable)
+- Copy Label / Copy IRI buttons
+- Ontology source indicator
+- Connected edges (incoming/outgoing)
+- SHACL constraints applicable to the node
+
+### SHACL Constraint Overlay
+- Constraints shown as bold dashed cyan edges with cardinality badges `[1..*]`
+- Build-time validation using pySHACL
+- Violations highlighted in the validation panel
+
+### Inline TTL Editor + Live Validation
+- Expandable editor panel below each diagram
+- CodeMirror with Turtle syntax highlighting
+- Edit TTL data and validate against SHACL shapes in real-time
+- Update the graph live from edited TTL
+- Reset to original data
+
+### Export Preview + Publication-Ready Output
+- **PNG export** — clicking PNG/SVG opens a preview dialog showing the final image
+- Toggle options: include/exclude legend and namespace prefixes
+- High-DPI (3x scale) with white background
+- Legend rendered in a clean rounded box with proper shape icons and edge arrows
+- Namespace prefixes shown as compact tags below the legend
+- **SVG export** — vector graphics for papers and presentations
+- **TTL download** — download the current (possibly edited) TTL data
+
+### Color Customization
+- **Colors** button in the toolbar opens a color settings panel
+- Change colors per node type (Class, Individual, Literal)
+- Change colors per namespace (all BFO nodes, all FOAF nodes, etc.)
+- Changes apply live to the graph and are reflected in exports
+
+### Smart Namespace Legend
+- Only active prefixes (used in the graph) shown by default
+- "Show all" toggle reveals all declared prefixes
+- Unused prefixes shown dimmed
+- Prefixes displayed as compact styled tags, separated from the main legend
+
+## Installation
+
+```bash
+pip install ontoink
+```
+
+Or install from source:
+
+```bash
+pip install git+https://github.com/ISE-FIZKarlsruhe/ontoink.git
+```
+
+## Usage
+
+### 1. Add to mkdocs.yml
+
+```yaml
+plugins:
+  - search
+  - ontoink
+
+markdown_extensions:
+  - pymdownx.superfences:
+      preserve_tabs: true
+```
+
+### 2. Write ontoink blocks in markdown
+
+````markdown
+```ontoink
+source: path/to/instance-data.ttl
+shape: path/to/shacl-shape.ttl
+```
+````
+
+### 3. Build or serve
+
+```bash
+mkdocs serve
+```
+
+### Configuration Options
+
+| Option | Default | Description |
+|--------|---------|-------------|
+| `source` | (required) | Path to TTL data file (relative to docs/) |
+| `shape` | (optional) | Path to SHACL shape file |
+| `height` | `500px` | Height of the graph canvas |
+| `editor` | `true` | Show the "Edit & Validate" button |
+| `legend` | `true` | Show the legend panel |
+| `namespaces` | `true` | Show namespace prefixes |
+
+### Full example
+
+````markdown
+```ontoink
+source: shapes/foaf-person/shape-data.ttl
+shape: shapes/foaf-person/shape.ttl
+height: 600px
+editor: true
+legend: true
+namespaces: true
+```
+````
+
+## How It Works
+
+1. **Build time (Python):** The plugin parses your TTL files with rdflib, classifies nodes (Class/Individual/Literal), resolves labels, detects ontology sources for color coding, extracts SHACL constraints, and runs pySHACL validation. The result is serialized as JSON and embedded in the HTML.
+
+2. **Browser (JavaScript):** Cytoscape.js renders the graph with dagre layout. CodeMirror provides the TTL editor. A lightweight JavaScript SHACL checker enables live validation without server round-trips.
+
+## Development
+
+```bash
+git clone https://github.com/ISE-FIZKarlsruhe/ontoink.git
+cd ontoink
+pip install -e ".[dev]"
+pytest -v
+```
+
+### Demo site
+
+```bash
+cd demo
+mkdocs serve
+```
+
+## Requirements
+
+- Python >= 3.9
+- MkDocs >= 1.4
+- rdflib >= 6.0
+- pySHACL >= 0.25.0
+- pymdown-extensions >= 10.0
+
+Browser-side dependencies are loaded from CDN (no npm/bundling needed):
+- Cytoscape.js, cytoscape-dagre, cytoscape-svg
+- CodeMirror 5 with Turtle mode
+
+## Contributing
+
+Contributions are welcome. Please open an issue first to discuss proposed changes.
+
+1. Fork the repository
+2. Create a feature branch
+3. Add tests for new functionality
+4. Ensure `pytest` passes
+5. Submit a pull request
+
+## License
+
+MIT License. See [LICENSE](LICENSE).
+
+## Author
+
+[Ebrahim Norouzi](https://ebrahimnorouzi.github.io/) — [FIZ Karlsruhe](https://www.fiz-karlsruhe.de/), [ISE](https://www.fiz-karlsruhe.de/en/forschung/information-service-engineering)
+
+## Acknowledgments
+
+- Developed in the context of [NFDI](https://www.nfdi.de/) and [NFDI-MatWerk](https://nfdi-matwerk.de/)
+- Visual notation inspired by ontology diagramming best practices and formal OWL notation
+- Interactive visualization powered by [Cytoscape.js](https://js.cytoscape.org/)

ontoink-0.1.0/README.md

@@ -0,0 +1,196 @@
+# ontoink
+
+**Interactive ontology visualization, SHACL validation, and live TTL editing for MkDocs.**
+
+[![CI](https://github.com/ISE-FIZKarlsruhe/ontoink/actions/workflows/ci.yml/badge.svg)](https://github.com/ISE-FIZKarlsruhe/ontoink/actions/workflows/ci.yml)
+[![PyPI](https://img.shields.io/pypi/v/ontoink)](https://pypi.org/project/ontoink/)
+[![Python](https://img.shields.io/pypi/pyversions/ontoink)](https://pypi.org/project/ontoink/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+ontoink is a MkDocs plugin that transforms RDF/Turtle files into interactive, publication-ready ontology diagrams with SHACL constraint visualization. Write a simple code block in your markdown, and ontoink generates a fully interactive graph.
+
+**[Live Demo](https://ise-fizkarlsruhe.github.io/ontoink/)**
+
+## Features
+
+### Interactive Graph Visualization
+- Formal ontology notation with distinct shapes per element type
+- Hierarchical layout (dagre) optimized for ontology patterns
+- Pan, zoom, fullscreen support
+- Color-coded by ontology source (BFO, IAO, FOAF, Schema.org, etc.)
+
+### Visual Notation
+
+| Element | Shape | Default Color |
+|---------|-------|---------------|
+| Class | Rectangle (solid border) | By ontology source |
+| Individual | Ellipse | `#E6E6E6` |
+| Literal | Ellipse (dashed border) | `#93D053` |
+| Object Property | Blue solid line, filled arrow | `#2563eb` |
+| Data Property | Green line, hollow arrow | `#16a34a` |
+| rdf:type | Grey dashed line | `#9ca3af` |
+| rdfs:subClassOf | Black solid line | `#374151` |
+| SHACL Constraint | Cyan dashed bold line | `#0891b2` |
+
+### Click Popups
+- Node label, type badge, full IRI (clickable)
+- Copy Label / Copy IRI buttons
+- Ontology source indicator
+- Connected edges (incoming/outgoing)
+- SHACL constraints applicable to the node
+
+### SHACL Constraint Overlay
+- Constraints shown as bold dashed cyan edges with cardinality badges `[1..*]`
+- Build-time validation using pySHACL
+- Violations highlighted in the validation panel
+
+### Inline TTL Editor + Live Validation
+- Expandable editor panel below each diagram
+- CodeMirror with Turtle syntax highlighting
+- Edit TTL data and validate against SHACL shapes in real-time
+- Update the graph live from edited TTL
+- Reset to original data
+
+### Export Preview + Publication-Ready Output
+- **PNG export** — clicking PNG/SVG opens a preview dialog showing the final image
+- Toggle options: include/exclude legend and namespace prefixes
+- High-DPI (3x scale) with white background
+- Legend rendered in a clean rounded box with proper shape icons and edge arrows
+- Namespace prefixes shown as compact tags below the legend
+- **SVG export** — vector graphics for papers and presentations
+- **TTL download** — download the current (possibly edited) TTL data
+
+### Color Customization
+- **Colors** button in the toolbar opens a color settings panel
+- Change colors per node type (Class, Individual, Literal)
+- Change colors per namespace (all BFO nodes, all FOAF nodes, etc.)
+- Changes apply live to the graph and are reflected in exports
+
+### Smart Namespace Legend
+- Only active prefixes (used in the graph) shown by default
+- "Show all" toggle reveals all declared prefixes
+- Unused prefixes shown dimmed
+- Prefixes displayed as compact styled tags, separated from the main legend
+
+## Installation
+
+```bash
+pip install ontoink
+```
+
+Or install from source:
+
+```bash
+pip install git+https://github.com/ISE-FIZKarlsruhe/ontoink.git
+```
+
+## Usage
+
+### 1. Add to mkdocs.yml
+
+```yaml
+plugins:
+  - search
+  - ontoink
+
+markdown_extensions:
+  - pymdownx.superfences:
+      preserve_tabs: true
+```
+
+### 2. Write ontoink blocks in markdown
+
+````markdown
+```ontoink
+source: path/to/instance-data.ttl
+shape: path/to/shacl-shape.ttl
+```
+````
+
+### 3. Build or serve
+
+```bash
+mkdocs serve
+```
+
+### Configuration Options
+
+| Option | Default | Description |
+|--------|---------|-------------|
+| `source` | (required) | Path to TTL data file (relative to docs/) |
+| `shape` | (optional) | Path to SHACL shape file |
+| `height` | `500px` | Height of the graph canvas |
+| `editor` | `true` | Show the "Edit & Validate" button |
+| `legend` | `true` | Show the legend panel |
+| `namespaces` | `true` | Show namespace prefixes |
+
+### Full example
+
+````markdown
+```ontoink
+source: shapes/foaf-person/shape-data.ttl
+shape: shapes/foaf-person/shape.ttl
+height: 600px
+editor: true
+legend: true
+namespaces: true
+```
+````
+
+## How It Works
+
+1. **Build time (Python):** The plugin parses your TTL files with rdflib, classifies nodes (Class/Individual/Literal), resolves labels, detects ontology sources for color coding, extracts SHACL constraints, and runs pySHACL validation. The result is serialized as JSON and embedded in the HTML.
+
+2. **Browser (JavaScript):** Cytoscape.js renders the graph with dagre layout. CodeMirror provides the TTL editor. A lightweight JavaScript SHACL checker enables live validation without server round-trips.
+
+## Development
+
+```bash
+git clone https://github.com/ISE-FIZKarlsruhe/ontoink.git
+cd ontoink
+pip install -e ".[dev]"
+pytest -v
+```
+
+### Demo site
+
+```bash
+cd demo
+mkdocs serve
+```
+
+## Requirements
+
+- Python >= 3.9
+- MkDocs >= 1.4
+- rdflib >= 6.0
+- pySHACL >= 0.25.0
+- pymdown-extensions >= 10.0
+
+Browser-side dependencies are loaded from CDN (no npm/bundling needed):
+- Cytoscape.js, cytoscape-dagre, cytoscape-svg
+- CodeMirror 5 with Turtle mode
+
+## Contributing
+
+Contributions are welcome. Please open an issue first to discuss proposed changes.
+
+1. Fork the repository
+2. Create a feature branch
+3. Add tests for new functionality
+4. Ensure `pytest` passes
+5. Submit a pull request
+
+## License
+
+MIT License. See [LICENSE](LICENSE).
+
+## Author
+
+[Ebrahim Norouzi](https://ebrahimnorouzi.github.io/) — [FIZ Karlsruhe](https://www.fiz-karlsruhe.de/), [ISE](https://www.fiz-karlsruhe.de/en/forschung/information-service-engineering)
+
+## Acknowledgments
+
+- Developed in the context of [NFDI](https://www.nfdi.de/) and [NFDI-MatWerk](https://nfdi-matwerk.de/)
+- Visual notation inspired by ontology diagramming best practices and formal OWL notation
+- Interactive visualization powered by [Cytoscape.js](https://js.cytoscape.org/)

ontoink-0.1.0/ontoink/__init__.py

@@ -0,0 +1,3 @@
+"""ontoink - Interactive ontology visualization and SHACL validation for MkDocs."""
+
+__version__ = "0.1.0"

ontoink-0.1.0/ontoink/fence.py

@@ -0,0 +1,126 @@
+"""Custom fence handler for ```ontoink code blocks."""
+
+import base64
+import json
+import os
+import traceback
+
+import yaml
+
+from .ttl_parser import parse_ttl_to_cytoscape
+from .shacl_validator import validate_graph
+
+_graph_counter = 0
+
+
+def reset_counter():
+    global _graph_counter
+    _graph_counter = 0
+
+
+def render_ontoink(source, language, class_name, options, md, **kwargs):
+    """
+    Custom fence handler called by pymdownx.superfences.
+
+    Source block YAML:
+        source: shapes/role-bearer/shape-data.ttl
+        shape: shapes/role-bearer/shape.ttl
+        height: 500px          # optional, default 500px
+        editor: true           # optional, default true
+        legend: true           # optional, default true
+        namespaces: true       # optional, default true
+    """
+    global _graph_counter
+    graph_id = f"ontoink-graph-{_graph_counter}"
+    _graph_counter += 1
+
+    try:
+        config = yaml.safe_load(source)
+        docs_dir = getattr(render_ontoink, "docs_dir", ".")
+
+        data_path = os.path.join(docs_dir, config["source"])
+        shape_path = ""
+        if "shape" in config:
+            shape_path = os.path.join(docs_dir, config["shape"])
+
+        # Parse TTL → Cytoscape JSON
+        cytoscape_data = parse_ttl_to_cytoscape(data_path, shape_path)
+
+        # Build-time SHACL validation
+        if shape_path:
+            try:
+                validation = validate_graph(data_path, shape_path)
+                cytoscape_data["validation"] = validation
+            except Exception:
+                cytoscape_data["validation"] = None
+        else:
+            cytoscape_data["validation"] = None
+
+        json_str = json.dumps(cytoscape_data, ensure_ascii=False)
+        b64_data = base64.b64encode(json_str.encode("utf-8")).decode("ascii")
+
+        height = config.get("height", "500px")
+        show_editor = str(config.get("editor", "true")).lower() == "true"
+        show_legend = str(config.get("legend", "true")).lower() == "true"
+        show_ns = str(config.get("namespaces", "true")).lower() == "true"
+
+        editor_btn = ""
+        if show_editor:
+            editor_btn = f'<button class="ov-btn ov-btn-accent" onclick="ontoink.toggleEditor(\'{graph_id}\')" title="Edit TTL & Validate">Edit &amp; Validate</button>\n'
+
+        return (
+            f'<div id="{graph_id}" class="ontoink-container" '
+            f'data-ontoink-graph="{b64_data}" '
+            f'data-show-legend="{str(show_legend).lower()}" '
+            f'data-show-ns="{str(show_ns).lower()}">\n'
+            f'  <div class="ov-toolbar">\n'
+            f'    <div class="ov-toolbar-group">\n'
+            f'      <button class="ov-btn" onclick="ontoink.zoomIn(\'{graph_id}\')" title="Zoom in">+</button>\n'
+            f'      <button class="ov-btn" onclick="ontoink.zoomOut(\'{graph_id}\')" title="Zoom out">&minus;</button>\n'
+            f'      <button class="ov-btn" onclick="ontoink.fit(\'{graph_id}\')" title="Fit to view">Fit</button>\n'
+            f'      <button class="ov-btn" onclick="ontoink.fullscreen(\'{graph_id}\')" title="Fullscreen">&#x26F6;</button>\n'
+            f'    </div>\n'
+            f'    <div class="ov-toolbar-group">\n'
+            f'      <button class="ov-btn" onclick="ontoink.exportPNG(\'{graph_id}\')" title="Export PNG">PNG</button>\n'
+            f'      <button class="ov-btn" onclick="ontoink.exportSVG(\'{graph_id}\')" title="Export SVG">SVG</button>\n'
+            f'      <button class="ov-btn" onclick="ontoink.downloadTTL(\'{graph_id}\')" title="Download TTL">TTL</button>\n'
+            f'    </div>\n'
+            f'    <div class="ov-toolbar-group">\n'
+            f'      <button class="ov-btn" onclick="ontoink.toggleColors(\'{graph_id}\')" title="Color settings">Colors</button>\n'
+            f'      {editor_btn}'
+            f'    </div>\n'
+            f'  </div>\n'
+            f'  <div class="ov-canvas-wrap" style="position:relative;width:100%;height:{height};">\n'
+            f'    <div class="ov-canvas" style="width:100%;height:100%;"></div>\n'
+            f'    <div class="ov-legend-overlay ov-draggable" style="bottom:12px;left:12px;"></div>\n'
+            f'    <div class="ov-ns-overlay ov-draggable" style="bottom:12px;right:12px;"></div>\n'
+            f'  </div>\n'
+            f'  <div class="ov-editor-panel" style="display:none;">\n'
+            f'    <div class="ov-editor-split">\n'
+            f'      <div class="ov-editor-left">\n'
+            f'        <div class="ov-editor-header">TTL Editor</div>\n'
+            f'        <textarea class="ov-editor-textarea"></textarea>\n'
+            f'      </div>\n'
+            f'      <div class="ov-editor-right">\n'
+            f'        <div class="ov-editor-header">Validation Results</div>\n'
+            f'        <div class="ov-validation-output"></div>\n'
+            f'      </div>\n'
+            f'    </div>\n'
+            f'    <div class="ov-editor-actions">\n'
+            f'      <button class="ov-btn ov-btn-primary" onclick="ontoink.validate(\'{graph_id}\')">Validate</button>\n'
+            f'      <button class="ov-btn" onclick="ontoink.updateGraph(\'{graph_id}\')">Update Graph</button>\n'
+            f'      <button class="ov-btn" onclick="ontoink.resetEditor(\'{graph_id}\')">Reset</button>\n'
+            f'    </div>\n'
+            f'  </div>\n'
+            f'</div>\n'
+        )
+
+    except Exception as e:
+        tb = traceback.format_exc()
+        return (
+            f'<div class="ov-error">'
+            f'<strong>Error rendering ontoink:</strong><br>'
+            f'<code>{e}</code>'
+            f'<pre style="font-size:11px;overflow:auto;max-height:200px;">{tb}</pre>'
+            f'</div>'
+        )

ontoink-0.1.0/ontoink/plugin.py

@@ -0,0 +1,57 @@
+"""MkDocs plugin that registers the ontoink custom fence and injects assets."""
+
+from pathlib import Path
+
+from mkdocs.plugins import BasePlugin
+
+
+class OntoinkPlugin(BasePlugin):
+
+    def on_config(self, config):
+        """Register the ontoink custom fence with pymdownx.superfences."""
+        from .fence import render_ontoink, reset_counter
+
+        reset_counter()
+        render_ontoink.docs_dir = config["docs_dir"]
+
+        fence_entry = {
+            "name": "ontoink",
+            "class": "ontoink",
+            "format": render_ontoink,
+        }
+
+        mdx_configs = config.setdefault("mdx_configs", {})
+        sf_key = "pymdownx.superfences"
+        if sf_key in mdx_configs:
+            mdx_configs[sf_key].setdefault("custom_fences", []).append(fence_entry)
+        else:
+            mdx_configs[sf_key] = {"custom_fences": [fence_entry]}
+
+        return config
+
+    def on_post_page(self, output, page, config):
+        """Inject CDN scripts and plugin JS/CSS into pages that use ontoink."""
+        if "data-ontoink-graph" not in output:
+            return output
+
+        resources_dir = Path(__file__).parent / "resources"
+        js_content = (resources_dir / "ontoink.js").read_text(encoding="utf-8")
+        css_content = (resources_dir / "ontoink.css").read_text(encoding="utf-8")
+
+        cdn_tags = "\n".join([
+            # Cytoscape.js core + dagre layout
+            '<script src="https://cdn.jsdelivr.net/npm/cytoscape@3.30.4/dist/cytoscape.min.js"></script>',
+            '<script src="https://cdn.jsdelivr.net/npm/dagre@0.8.5/dist/dagre.min.js"></script>',
+            '<script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.5.0/cytoscape-dagre.js"></script>',
+            # Cytoscape SVG export
+            '<script src="https://cdn.jsdelivr.net/npm/cytoscape-svg@0.4.0/cytoscape-svg.min.js"></script>',
+            # CodeMirror for TTL editing
+            '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/lib/codemirror.min.css">',
+            '<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/lib/codemirror.min.js"></script>',
+            '<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/turtle/turtle.min.js"></script>',
+        ])
+
+        inline_assets = f"<style>\n{css_content}\n</style>\n<script>\n{js_content}\n</script>\n"
+
+        output = output.replace("</body>", cdn_tags + "\n" + inline_assets + "</body>")
+        return output