alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(docs): update home page

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-03-03 13:02:10 +01:00
parent 4bfd89bca5
commit 6d19bb165b
5 changed files with 57 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/home/Banner.vue
+14 -6
View File
@@ -3,26 +3,34 @@ 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/@vue-flow/core')
const githubData = ref()
$fetch('https://api.github.com/repos/bcakmakoglu/vue-flow?page=$i&per_page=100').then((data) => {
githubData.value = data
})
const npmData = ref()
$fetch('https://api.npmjs.org/downloads/point/last-month/@vue-flow/core').then((data) => {
npmData.value = data
})
</script>
<template>
<div class="w-full dark:(border-white) border-black border-y-1">
<div class="w-full dark:(border-white) border-black border-y-1 min-h-44">
<div class="max-w-full md:max-w-11/12 m-auto py-4 md:py-12 <md:(dark:border-t-1 border-white)">
<div class="grid md:grid-cols-3 gap-3 text-center <md:divide-y md:divide-x dark:divide-white divide-black">
<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 /> {{ githubData.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 /> {{ npmData.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">
{{ githubData.license.key.toUpperCase() }}
{{ githubData?.license.key.toUpperCase() }}
</div>
</div>
</div>