chore(docs): update home page

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

docs/components/home/Acknowledgement.vue

@@ -3,7 +3,7 @@ import Heart from '~icons/mdi/heart'
 </script>
 
 <template>
-  <div id="acknowledgement" class="w-full">
+  <div id="acknowledgement" class="w-full pb-20">
     <div class="max-w-[1024px] md:max-w-3/4 m-auto py-4 md:(pb-12 pt-6) text-center">
       <div>
         <h1 class="md:mb-8 flex justify-center items-center"><Heart class="text-red-500" /> Acknowledgement</h1>

docs/components/home/Banner.vue

@@ -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>

docs/components/home/Home.vue

@@ -7,7 +7,7 @@ const { smaller } = useBreakpoints(breakpointsTailwind)
 
 const isMobile = smaller('md')
 
-const { blobity, reset } = useBlobity()
+const { blobity } = useBlobity()
 
 const usesDark = useDark({
   storageKey: 'vuepress-color-scheme',
@@ -22,7 +22,7 @@ onMounted(() => {
   usesDark.value = html.classList.contains('dark')
 
   const observer = new MutationObserver((mutations) => {
-    for (const m of mutations) {
+    for (const _ of mutations) {
       dark.value = html.classList.contains('dark')
     }
   })
@@ -42,7 +42,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="relative h-[calc(100vh-var(--vp-nav-height-mobile))] lg:h-[calc(100vh-var(--vp-nav-height))]">
+  <div class="relative h-[calc(100vh-var(--vp-nav-height-mobile))] lg:h-[calc(100vh-var(--vp-nav-height)-176px)]">
     <Intro />
   </div>
 </template>
@@ -52,6 +52,10 @@ button:focus {
   outline: none;
 }
 
+.VPHome {
+  @apply !pb-24;
+}
+
 h1 {
   @apply text-xl lg:text-4xl mb-4 font-bold;
 }

docs/components/home/flows/Intro.vue

@@ -53,7 +53,7 @@ const initialEdges = [
     style: { strokeWidth: 4, stroke: '#0ea5e9' },
   },
 ]
-const { onNodeClick, getNodes, findNode, setEdges, updateNodeInternals, fitView } = useVueFlow({
+const { onNodeClick, getNodes, findNode, setEdges, updateNodeInternals, dimensions, onNodesInitialized } = useVueFlow({
   nodes: [
     { id: 'intro', type: 'box', position: { x: 0, y: 0 } },
     { id: 'examples', type: 'box', position: { x: -50, y: 400 } },
@@ -115,33 +115,47 @@ onNodeClick(async ({ node }) => {
   }
 })
 
+onNodesInitialized(setElements)
+
 const el = templateRef<HTMLDivElement>('el', null)
 
-const setNodes = () => {
+function setElements() {
+  const offsetX = dimensions.value.width / 2
+  const offsetY = dimensions.value.height / 4
+
   if (breakpoints.isSmaller('md')) {
     const mainNode = findNode('intro')!
 
     getNodes.value.forEach((node) => {
       switch (node.id) {
         case 'intro':
-          node.position = { x: 0, y: 0 }
+          if (node.dimensions.width >= dimensions.value.width) {
+            node.width = dimensions.value.width - 50
+          } else {
+            node.width = node.dimensions.width
+          }
+
+          node.position = {
+            x: offsetX - ((node.width as number) ?? node.dimensions.width) / 2,
+            y: offsetY - node.dimensions.height / 2,
+          }
           break
         case 'examples':
           node.position = {
-            x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
-            y: mainNode.dimensions.height * 1.5,
+            x: offsetX - node.dimensions.width / 2,
+            y: mainNode.position.y + mainNode.dimensions.height * 1.5,
           }
           break
         case 'documentation':
           node.position = {
-            x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
-            y: mainNode.dimensions.height * 2 + 50,
+            x: offsetX - node.dimensions.width / 2,
+            y: mainNode.position.y + mainNode.dimensions.height * 2 + 50,
           }
           break
         case 'acknowledgement':
           node.position = {
-            x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
-            y: mainNode.dimensions.height * 3,
+            x: offsetX - node.dimensions.width / 2,
+            y: mainNode.position.y + mainNode.dimensions.height * 3,
           }
           break
       }
@@ -178,21 +192,25 @@ const setNodes = () => {
       const mainNode = findNode('intro')!
       switch (node.id) {
         case 'intro':
-          node.position = { x: 0, y: 0 }
+          node.width = undefined
+          node.position = { x: offsetX - node.dimensions.width / 2, y: offsetY - node.dimensions.height / 2 }
           break
         case 'examples':
-          node.position = { x: -node.dimensions.width / 2, y: mainNode.dimensions.height * 1.5 }
+          node.position = {
+            x: mainNode.position.x - node.dimensions.width / 2,
+            y: mainNode.position.y + mainNode.dimensions.height * 1.5,
+          }
           break
         case 'documentation':
           node.position = {
-            x: mainNode.dimensions.width - node.dimensions.width / 2,
-            y: mainNode.dimensions.height * 1.5,
+            x: mainNode.position.x + mainNode.dimensions.width - node.dimensions.width / 2,
+            y: mainNode.position.y + mainNode.dimensions.height * 1.5,
           }
           break
         case 'acknowledgement':
           node.position = {
-            x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
-            y: mainNode.dimensions.height * 2,
+            x: offsetX - node.dimensions.width / 2,
+            y: mainNode.position.y + mainNode.dimensions.height * 2,
           }
           break
       }
@@ -203,11 +221,9 @@ const setNodes = () => {
 
   nextTick(() => {
     updateNodeInternals()
-
-    fitView()
   })
 }
-const { stop } = useResizeObserver(el, useDebounceFn(setNodes, 5))
+const { stop } = useResizeObserver(el, useDebounceFn(setElements, 5))
 onBeforeUnmount(stop)
 
 const scrollTo = () => {

docs/src/index.md

@@ -5,9 +5,7 @@ layout: home
 
 <Home />
 
-<Suspense>
-  <Banner />
-</Suspense>
+<Banner />
 
 <Features />