feat(homepage): add simple-pie examples

apps/homepage/src/components/PieScript.astro

@@ -0,0 +1,26 @@
+---
+---
+
+<style is:global>
+  .pie {
+    width: 200px;
+    height: 200px;
+    margin: 0 auto;
+  }
+</style>
+
+<script>
+  import {simplePie, simpleDoughnut} from 'simple-pie';
+
+  document.querySelectorAll("[data-pie]").forEach(container => {
+    const {pie, options} = container.dataset;
+    const pieElement = simplePie(JSON.parse(pie), JSON.parse(options));
+    container.appendChild(pieElement);
+  });
+
+  document.querySelectorAll("[data-doughnut]").forEach(container => {
+    const {doughnut, options} = container.dataset;
+    const pieElement = simpleDoughnut(JSON.parse(doughnut), JSON.parse(options));
+    container.appendChild(pieElement);
+  });
+</script>

apps/homepage/src/components/SimplePieCases.mdx

@@ -0,0 +1,51 @@
+---
+---
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+import './PieScript.astro';
+
+<CardGrid>
+  <Card>
+    <div class="pie"
+         data-pie={JSON.stringify([2, 1, 1, 2])}
+         data-options={JSON.stringify({})}
+    ></div>
+    ```js
+      simplePie([2, 1, 1, 2])
+    ```
+  </Card>
+  <Card>
+    <div class="pie"
+         data-pie={JSON.stringify([2, 1, 1, 2])}
+         data-options={JSON.stringify({ borderColor: "transparent" })}
+    ></div>
+    ```js
+      simplePie([2, 1, 1, 2], {
+        borderColor: "transparent"
+      })
+    ```
+  </Card>
+  <Card>
+    <div class="pie"
+         data-doughnut={JSON.stringify([2, 1, 1, 2])}
+         data-options={JSON.stringify({ borderWidth: 3 })}
+    ></div>
+    ```js
+      simpleDoughnut([2, 1, 1, 2], {
+        borderWidth: 3
+      })
+    ```
+  </Card>
+  <Card>
+    <div class="pie"
+         data-doughnut={JSON.stringify([2, 1, 1, 2])}
+         data-options={JSON.stringify({ borderColor: "transparent", inner: 0.3 })}
+    ></div>
+    ```js
+      simpleDoughnut([2, 1, 1, 2], {
+        borderColor: "transparent",
+        inner: 0.3,
+      })
+    ```
+  </Card>
+</CardGrid>

apps/homepage/src/content/docs/getting-started/simple-pie.mdx

@@ -2,7 +2,7 @@
 title: simple-pie
 description: How to install and use simple-pie npm package
 ---
-import { Aside, Code, Tabs, TabItem } from '@astrojs/starlight/components';
+import { Aside, Card, CardGrid, Code, Tabs, TabItem } from '@astrojs/starlight/components';
 
 `simple-pie` creates simple svg pie and doughnut charts for infographics like graphs and others in browser environments.
 
@@ -79,7 +79,9 @@ function simpleDoughnut(
 
 ## Examples
 
-TBD
+import SimplePieCases from '@components/SimplePieCases.mdx'
+
+<SimplePieCases />
 
 ## Guides