From 504de5ccd252069b5352aaf46783d9257c6fce43 Mon Sep 17 00:00:00 2001
From: Serge Ilyashenko <age_bookend_0j@icloud.com>
Date: Sun, 22 Sep 2024 09:27:09 +0200
Subject: [PATCH] feat(homepage): add simple-pie examples

---
 apps/homepage/src/components/PieScript.astro  | 26 ++++++++++
 .../src/components/SimplePieCases.mdx         | 51 +++++++++++++++++++
 .../docs/getting-started/simple-pie.mdx       |  6 ++-
 3 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 apps/homepage/src/components/PieScript.astro
 create mode 100644 apps/homepage/src/components/SimplePieCases.mdx

diff --git a/apps/homepage/src/components/PieScript.astro b/apps/homepage/src/components/PieScript.astro
new file mode 100644
index 0000000..7b5a4c3
--- /dev/null
+++ b/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>
diff --git a/apps/homepage/src/components/SimplePieCases.mdx b/apps/homepage/src/components/SimplePieCases.mdx
new file mode 100644
index 0000000..859a541
--- /dev/null
+++ b/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>
diff --git a/apps/homepage/src/content/docs/getting-started/simple-pie.mdx b/apps/homepage/src/content/docs/getting-started/simple-pie.mdx
index c3323bc..17c05ae 100644
--- a/apps/homepage/src/content/docs/getting-started/simple-pie.mdx
+++ b/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