Added demo sitemap graph to sitemap
This commit is contained in:
parent
6d80698496
commit
3f29c20408
@ -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",
|
||||||
|
@ -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>
|
Loading…
Reference in New Issue
Block a user