js

This is a follow-up to the previous post Network Graphs in Hugo. I’m feeling fruity. These aren’t all tree fruits, but a few clusters organized by tree grafting compatibility. Data for the network is stored in two separate JSON files, both located in /static/data/fruit/: nodes.json edges.json The javascript and the shortcode, as one file: fruit-network.html {{ $nodesPath := .Get "nodesPath" }} {{ $edgesPath := .Get "edgesPath" }} <style> #mynetwork { background-color: #f5f5f5; /* a medium gray color */ border-radius: 10px; border: 1px solid #cccccc; margin: 5px 0 40px 0; } </style> <div id="mynetwork" data-nodes-path={{ $nodesPath }} data-edges-path={{ $edgesPath }}></div> <script src="https://visjs....

This is a simple toy to see how a network graph can be added in a Hugo article. I’ll be testing new features on it as I learn new things. Relative to the root of the Hugo website directory, here’s some basic files to make this interactive. Note that The JSON data and CSS is added inline here to make the scope of this tutorial focus on Hugo-specific structures. The javascript file was put in /static/js/ and can be found here:...