From 2f8c38f55edd286a34bc1e7db2df0e260d2b6908 Mon Sep 17 00:00:00 2001
From: andatoshiki <hello@toshiki.dev>
Date: Sun, 15 Sep 2024 09:43:42 -0700
Subject: [PATCH] feat(confetti): add vue confetti component utility source to
 vitepress component directory and add registered component to index landing
 page of vitepress note site

---
 docs/.vitepress/theme/components/Confetti.vue | 13 +++
 docs/index.md                                 | 86 +------------------
 2 files changed, 14 insertions(+), 85 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/Confetti.vue

diff --git a/docs/.vitepress/theme/components/Confetti.vue b/docs/.vitepress/theme/components/Confetti.vue
new file mode 100644
index 00000000..e1764b38
--- /dev/null
+++ b/docs/.vitepress/theme/components/Confetti.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import confetti from 'canvas-confetti'
+import { inBrowser } from 'vitepress'
+
+if (inBrowser) {
+    /* confetti */
+    confetti({
+        particleCount: 100,
+        spread: 170,
+        origin: { y: 0.6 },
+    })
+}
+</script>
diff --git a/docs/index.md b/docs/index.md
index b02f3105..7fcebda2 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -31,88 +31,4 @@ features:
       details: An epiphany, derived from the Latin word "epiphania," is a moment of sudden and brilliant realization or insight. These moments of clarity and inspiration are precious and should be treated as such; to ensure that we don't forget these valuable ideas.
 ---
 
-<!-- <script setup>
-import { VPTeamMembers } from 'vitepress/theme'
-
-const khanacademySVG = {
-  svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Khan Academy</title><path d="M21.724 4.973L13.418.328a3.214 3.214 0 0 0-2.828 0L2.276 4.973A3.05 3.05 0 0 0 .862 7.371v9.256a3.05 3.05 0 0 0 1.414 2.4l8.306 4.645a3.214 3.214 0 0 0 2.828 0l8.314-4.645a3.05 3.05 0 0 0 1.414-2.4V7.373a3.05 3.05 0 0 0-1.414-2.4zM12 4.921a2.571 2.571 0 1 1 .001 5.143A2.571 2.571 0 0 1 12 4.92zm3.094 13.627a9.119 9.119 0 0 1-3.103.549 8.972 8.972 0 0 1-3.076-.55 8.493 8.493 0 0 1-5.486-7.987v-.857c4.646.017 8.074 3.823 8.074 8.51v.198h.926v-.197c0-4.688 3.445-8.51 8.056-8.51.026.29.043.582.086.856a8.502 8.502 0 0 1-5.477 7.988z"/></svg>'
-}
-
-const members = [
-  {
-    avatar: "/logos/khancademy.svg",
-    name: "Khan Academy",
-    title: "Khan Academy is a non-profit educational organization that provides free online learning resources.",
-    links: [
-      { icon: "github", link: "https://github.com/Khan" },
-      { icon: khanacademySVG, link: "https://khanacademy.org" }
-    ],
-  },
-    {
-    avatar: "/logos/khancademy.svg",
-    name: "Khan Academy",
-    title: "Khan Academy is a non-profit educational organization that provides free online learning resources.",
-    links: [
-      { icon: "github", link: "https://github.com/Khan" },
-      { icon: khanacademySVG, link: "https://khanacademy.org" }
-    ],
-  },
-    {
-    avatar: "/logos/khancademy.svg",
-    name: "Khan Academy",
-    title: "Khan Academy is a non-profit educational organization that provides free online learning resources.",
-    links: [
-      { icon: "github", link: "https://github.com/Khan" },
-      { icon: khanacademySVG, link: "https://khanacademy.org" }
-    ],
-  },
-    {
-    avatar: "/logos/khancademy.svg",
-    name: "Khan Academy",
-    title: "Khan Academy is a non-profit educational organization that provides free online learning resources.",
-    links: [
-      { icon: "github", link: "https://github.com/Khan" },
-      { icon: khanacademySVG, link: "https://khanacademy.org" }
-    ],
-  },
-  {
-    avatar: "https://avatars.githubusercontent.com/u/5837277?v=4",
-    name: "Knut Sveidqvist",
-    title: "Creator",
-    links: [{ icon: "github", link: "https://github.com/knsv" }],
-  },
-];
-</script>
-
-<div class="vp-doc" >
-  <h2 id="meet-the-team"> 👀 My Learning Platforms </h2>
-  <VPTeamMembers size="small" :members="members" />
-</div>
-
-<style>
-  .image-container .image-src {
-    margin: 1rem auto;
-    /* max-width: 100%;
-    width: 100%; */
-}
-
-  .dark .image-src{
-    filter: invert(1) hue-rotate(217deg)  contrast(0.72);
-  }
-
-  .vp-doc {
-    align-items: center;
-    flex-direction: column;
-    display: flex;
-    margin: 1.5rem;
-  }
-
-  .vp-doc h2 {
-    margin: 48px 0 16px;
-    border-top: 1px solid var(--vp-c-divider-light);
-    padding-top: 24px;
-    letter-spacing: -.02em;
-    line-height: 32px;
-    font-size: 24px;
-}
-</style> -->
+<Confetti />