Added demo sitemap graph to sitemap

This commit is contained in:
Thomas Cole 2023-02-15 10:09:45 -05:00
parent 6d80698496
commit 3f29c20408
2 changed files with 99 additions and 2 deletions

View File

@ -15,6 +15,7 @@
"@astrojs/svelte": "^1.0.2", "@astrojs/svelte": "^1.0.2",
"@astrojs/tailwind": "^2.1.3", "@astrojs/tailwind": "^2.1.3",
"astro": "^1.6.15", "astro": "^1.6.15",
"cytoscape": "^3.23.0",
"daisyui": "^2.45.0", "daisyui": "^2.45.0",
"p5-svelte": "^3.1.2", "p5-svelte": "^3.1.2",
"svelte": "^3.55.0", "svelte": "^3.55.0",

View File

@ -1,11 +1,107 @@
<script> <script>
import cytoscape from 'cytoscape';
import { onMount } from 'svelte';
let div;
let data = {"map":[{"name":"root","adj":[{"destination":{"name":"http://localhost:8000/","ajd":[{"destination":{"name":"http://localhost:8000/about.html","ajd":[]}},{"destination":{"name":"http://localhost:8000/blog/demo1.html","ajd":[]}},{"destination":{"name":"http://localhost:8000/blog/demo2.html","ajd":[]}}]}}]},{"name":"http://localhost:8000/","adj":[{"destination":{"name":"http://localhost:8000/about.html","ajd":[]}},{"destination":{"name":"http://localhost:8000/blog/demo1.html","ajd":[]}},{"destination":{"name":"http://localhost:8000/blog/demo2.html","ajd":[]}}]},{"name":"http://localhost:8000/about.html","adj":[]},{"name":"http://localhost:8000/blog/demo1.html","adj":[]},{"name":"http://localhost:8000/blog/demo2.html","adj":[]}]};
let cyElements = [];
onMount(()=>{
//load all vertexes into cytoscape
data.map.forEach((element) => {
let shortURL = element.name.replace(/^(?:\/\/|[^/]+)*\//, "/");
cyElements.push({
data: {
id: element.name,
name: element.name,
short: shortURL,
href: element.name,
},
});
});
data.map.forEach((element) => {
if (element.adj.length > 0) {
for (let i = 0; i < element.adj.length; i++) {
const e = element.adj[i];
let cyid = element.name + "," + element.adj[i].destination.name;
let cysrc = element.name;
let cytgt = element.adj[i].destination.name;
cyElements.push({
data: {
id: cyid,
source: cysrc,
target: cytgt,
},
});
}
}
});
cytoscape({
container: div,
elements: cyElements,
style: [
{
selector: "node",
style: {
'content': "data(name)",
'text-valign' : 'center',
'shape': 'round-rectangle',
'width': '500px',
'height': '50px',
'background-color' : '#F8F9FA',
'border-color': '#000',
},
},
{
selector: "edge",
style: {
'line-color': "#fff"
}
}
],
layout: {
name: "breadthfirst",
fit: true, // whether to fit the viewport to the graph
directed: true, // whether the tree is directed downwards (or edges can point in any direction if false)
padding: 10, // padding on fit
circle: false, // put depths in concentric circles if true, put depths top down if false
grid: false, // whether to create an even grid into which the DAG is placed (circle:false only)
spacingFactor: 1, // positive spacing factor, larger => more space between nodes (N.B. n/a if causes overlap)
boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
roots: cyElements[0], // the roots of the trees
maximal: false, // whether to shift nodes down their natural BFS depths in order to avoid upwards edges (DAGS only)
depthSort: undefined, // a sorting function to order nodes at equal depth. e.g. function(a, b){ return a.data('weight') - b.data('weight') }
animate: false, // whether to transition the node positions
animationDuration: 500, // duration of animation in ms if enabled
animationEasing: undefined, // easing of animation if enabled,
animateFilter: function (node, i) {
return true;
}, // a function that determines whether the node should be animated. All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts
ready: undefined, // callback on layoutready
stop: undefined, // callback on layoutstop
transform: function (node, position) {
return position;
},
},
});
})
</script> </script>
<style>
<style>
#cy {
width: 100%;
height: 75vh;
display: block;
background-color: #343A40;
}
</style> </style>
<div> <div bind:this={div} id="cy">
</div> </div>