feat(homepage): add network case demo

.github/workflows/homepage-deploy.yml

@@ -7,7 +7,7 @@ on:
       - master
     paths:
       - .github/workflows/homepage-deploy.yml
-#      - packages/**/* FIXME: do we need to watch packages ?
+      - packages/simple-pie/**/*
       - apps/homepage/**/*
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}

apps/homepage/package.json

@@ -11,10 +11,12 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/check": "0.9.3",
     "@astrojs/starlight": "0.27.1",
     "astro": "4.15.4",
     "sharp": "0.33.5",
-    "@astrojs/check": "0.9.3",
-    "typescript": "5.5.4"
+    "simple-pie": "*",
+    "typescript": "5.5.4",
+    "vis-network": "9.1.9"
   }
 }

apps/homepage/src/components/Network.astro

@@ -0,0 +1,108 @@
+---
+---
+
+<div id="network-container" class="network-container">hi</div>
+
+<script>
+  import { simplePie } from "simple-pie";
+  import { DataSet } from "vis-data";
+  import { Network } from "vis-network";
+  import "vis-network/styles/vis-network.css";
+
+  function getRandomPieDataUri() {
+    const values = Array.from({ length: Math.ceil(Math.random() * 10) }, () =>
+      Math.ceil(Math.random() * 10),
+    );
+    const element = simplePie(values);
+    element.setAttribute("width", "70");
+    element.setAttribute("height", "70");
+
+    const svg = new XMLSerializer().serializeToString(element);
+
+    return `data:image/svg+xml;base64,${btoa(svg)}`;
+  }
+
+  // @ts-ignore
+  const nodes = new DataSet([
+    {
+      id: 1,
+      shape: "image",
+      image: getRandomPieDataUri(),
+      shapeProperties: { useImageSize: true },
+    },
+    {
+      id: 2,
+      shape: "image",
+      image: getRandomPieDataUri(),
+      shapeProperties: { useImageSize: true },
+    },
+    {
+      id: 3,
+      shape: "image",
+      image: getRandomPieDataUri(),
+      shapeProperties: { useImageSize: true },
+      label: "Pull me! I'm interactive!",
+    },
+    {
+      id: 4,
+      shape: "image",
+      image: getRandomPieDataUri(),
+      shapeProperties: { useImageSize: true },
+    },
+    {
+      id: 5,
+      shape: "image",
+      image: getRandomPieDataUri(),
+      shapeProperties: { useImageSize: true },
+    },
+    {
+      id: 6,
+      shape: "image",
+      image: getRandomPieDataUri(),
+      shapeProperties: { useImageSize: true },
+    },
+    {
+      id: 7,
+      shape: "image",
+      image: getRandomPieDataUri(),
+      shapeProperties: { useImageSize: true },
+    },
+  ]);
+
+  // @ts-ignore
+  const edges = new DataSet([
+    { from: 1, to: 2 },
+    { from: 1, to: 3 },
+    { from: 2, to: 4 },
+    { from: 2, to: 5 },
+    { from: 6, to: 2 },
+    { from: 7, to: 2 },
+  ]);
+
+  // create a network
+  const container = document.getElementById("network-container");
+
+  if (!container) {
+    throw new Error("html container not found");
+  }
+
+  const data = {
+    nodes: nodes,
+    edges: edges,
+  };
+  const options = {};
+
+  new Network(container, data, options);
+</script>
+
+<style>
+  .network-container {
+    height: 400px;
+    width: 100%;
+    border: 1px dashed darksalmon;
+  }
+
+  .network-container .vis-network:focus{
+    outline: none;
+  }
+</style>

apps/homepage/src/content/docs/getting-started/introduction.md → apps/homepage/src/content/docs/getting-started/introduction.mdx

@@ -2,6 +2,7 @@
 title: Introduction
 description: A guide in my new Starlight docs site.
 ---
+import Network from '@components/Network.astro'
 
 The `simple-pie` package family offers an easy way to create `SVG` pie and doughnut charts. These packages are lightweight
 and ideal for situations where you need small, simple charts, such as in network graphs or other compact visualizations.
@@ -24,4 +25,10 @@ That's where `simple-pie` comes in. It provides a straightforward solution for c
 doughnut charts. These charts are perfect for embedding in network graphs, maps, or any application where you need
 a simple and efficient way to visualize data without the bulk of heavier libraries.
 
-![net and map cases](https://raw.githubusercontent.com/serjilyashenko/simple-pie-project/master/docs/images/map-and-net-case.png)
+## Network
+
+<Network />
+
+## Map
+
+![map case](https://raw.githubusercontent.com/serjilyashenko/simple-pie-project/master/docs/images/map-case.png)

apps/homepage/tsconfig.json

@@ -1,3 +1,11 @@
 {
-  "extends": "astro/tsconfigs/strict"
-}
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@assets/*": ["src/assets/*"],
+      "@components/*": ["src/components/*"],
+      "@content/*": ["src/content/*"]
+    }
+  }
+}