From bec26f3363b8db25da50ad887dc0cd34abb35e8c Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 5 Apr 2022 09:10:05 +0200
Subject: [PATCH] docs: Remove data script and fetch data in Banner.vue

* Wrap Banner in suspension
---
 docs/components/home/Banner.vue | 11 +++++++----
 docs/data.js                    | 11 -----------
 docs/package.json               |  4 +---
 docs/src/index.md               |  4 +++-
 4 files changed, 11 insertions(+), 19 deletions(-)
 delete mode 100644 docs/data.js

diff --git a/docs/components/home/Banner.vue b/docs/components/home/Banner.vue
index ecaeaba7..d851f78f 100644
--- a/docs/components/home/Banner.vue
+++ b/docs/components/home/Banner.vue
@@ -1,7 +1,10 @@
 <script lang="ts" setup>
-import data from '../../.data.json'
+import { $fetch } from 'ohmyfetch'
 import Star from '~icons/carbon/star'
 import Download from '~icons/carbon/download'
+
+const githubData = await $fetch('https://api.github.com/repos/bcakmakoglu/vue-flow?page=$i&per_page=100')
+const npmData = await $fetch('https://api.npmjs.org/downloads/point/last-month/@braks/vue-flow')
 </script>
 <template>
   <div class="w-full bg-black text-white border-b-1 border-white">
@@ -9,16 +12,16 @@ import Download from '~icons/carbon/download'
       <div class="grid md:grid-cols-3 gap-3 text-center <md:divide-y md:divide-x divide-white">
         <div class="grid grid-rows-auto gap-2 py-4 md:py-0">
           <div class="text-gray-400 font-semibold text-lg">Stargazers</div>
-          <div class="font-bold text-3xl flex gap-2 items-center justify-center"><Star /> {{ data.stargazers_count }}</div>
+          <div class="font-bold text-3xl flex gap-2 items-center justify-center"><Star /> {{ githubData.stargazers_count }}</div>
         </div>
         <div class="grid grid-rows-2 gap-2 py-4 md:py-0">
           <div class="text-gray-400 font-semibold text-lg">Downloads (last month)</div>
-          <div class="font-bold text-3xl flex gap-2 items-center justify-center"><Download /> {{ data.downloads }}</div>
+          <div class="font-bold text-3xl flex gap-2 items-center justify-center"><Download /> {{ npmData.downloads }}</div>
         </div>
         <div class="grid grid-rows-2 gap-2 py-4 md:py-0">
           <div class="text-gray-400 font-semibold text-lg">License</div>
           <div class="font-bold text-3xl">
-            {{ data.license.key.toUpperCase() }}
+            {{ githubData.license.key.toUpperCase() }}
           </div>
         </div>
       </div>
diff --git a/docs/data.js b/docs/data.js
deleted file mode 100644
index 9b86f5d5..00000000
--- a/docs/data.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-const { $fetch } = require('ohmyfetch')
-
-const run = async () => {
-  const githubData = await $fetch('https://api.github.com/repos/bcakmakoglu/vue-flow?page=$i&per_page=100')
-  const npmData = await $fetch('https://api.npmjs.org/downloads/point/last-month/@braks/vue-flow')
-  fs.writeFileSync(path.resolve(__dirname, './.data.json'), JSON.stringify({ ...githubData, ...npmData }))
-}
-
-run().then(() => console.log('done'))
diff --git a/docs/package.json b/docs/package.json
index 8fba3d55..89046aea 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -6,9 +6,7 @@
   "author": "Burak Cakmakoglu<brainbraks@googlemail.com>",
   "scripts": {
     "dev": "vuepress dev src",
-    "prebuild": "yarn data",
-    "build": "vuepress build src",
-    "data": "node data.js"
+    "build": "vuepress build src"
   },
   "dependencies": {
     "@braks/vue-flow": "^0.4.0",
diff --git a/docs/src/index.md b/docs/src/index.md
index 5ee29a8e..6dfebc01 100644
--- a/docs/src/index.md
+++ b/docs/src/index.md
@@ -7,6 +7,8 @@ footer: MIT Licensed | Copyright © 2021-present Burak Cakmakoglu
 
 <Home />
 
-<Banner />
+<Suspense>
+  <Banner />
+</Suspense>
 
 <Features />