From cb41487b26d6a876960590c0b5c23e6c54e02e9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robin=20Br=C3=A4mer?= <robin.braemer@web.de>
Date: Tue, 23 Jan 2024 16:17:32 +0100
Subject: [PATCH] docs: hero logo motion (#40)

---
 .../.vitepress/theme/components/Graph.vue     |  89 ++++++++++++++++++
 .../theme/components/HeroAnimation.vue        |  51 ++++++++++
 .../theme/components/HomeHeroImage.vue        |  47 +++++++++
 .../.vitepress/theme/components/Layout.vue    |   6 +-
 .../.vitepress/theme/components/VPImage.vue   |  47 +++++++++
 .web/docs/public/gate.png                     | Bin 0 -> 3582 bytes
 6 files changed, 239 insertions(+), 1 deletion(-)
 create mode 100644 .web/docs/.vitepress/theme/components/Graph.vue
 create mode 100644 .web/docs/.vitepress/theme/components/HeroAnimation.vue
 create mode 100644 .web/docs/.vitepress/theme/components/HomeHeroImage.vue
 create mode 100644 .web/docs/.vitepress/theme/components/VPImage.vue
 create mode 100644 .web/docs/public/gate.png

diff --git a/.web/docs/.vitepress/theme/components/Graph.vue b/.web/docs/.vitepress/theme/components/Graph.vue
new file mode 100644
index 0000000..771bf68
--- /dev/null
+++ b/.web/docs/.vitepress/theme/components/Graph.vue
@@ -0,0 +1,89 @@
+<script setup>
+import {computed} from 'vue';
+import VPImage from "./VPImage.vue";
+
+// Define props
+const props = defineProps({
+  nodes: Array,
+  connections: Array
+});
+
+// Compute paths for each connection
+const paths = computed(() => {
+  return props.connections.map(([i, j]) => {
+    const node1 = props.nodes[i];
+    const node2 = props.nodes[j];
+    const dx = node2.x - node1.x; // x distance between nodes
+    const dy = node2.y - node1.y; // y distance between nodes
+    const distance = Math.sqrt(dx * dx + dy * dy); // Euclidean distance between nodes
+    const curviness = distance * 0.2; // Curviness as a function of distance
+    const cx1 = (node1.x + node2.x) / 2 - dx * 0.2; // x-coordinate of first control point
+    const cy1 = Math.max(node1.y, node2.y) - curviness; // y-coordinate of first control point
+    const cx2 = (node1.x + node2.x) / 2 + dx * 0.2; // x-coordinate of second control point
+    const cy2 = cy1; // y-coordinate of second control point
+    return `M${node1.x} ${node1.y} C${cx1} ${cy1} ${cx2} ${cy2} ${node2.x} ${node2.y}`;
+  });
+});
+
+// Compute the maximum x and y coordinates
+const maxWidth = computed(() => Math.max(...props.nodes.map(node => node.x), ...props.connections.map(([i, j]) => Math.max(props.nodes[i].x, props.nodes[j].x))));
+const maxHeight = computed(() => Math.max(...props.nodes.map(node => node.y), ...props.connections.map(([i, j]) => Math.max(props.nodes[i].y, props.nodes[j].y))));
+
+</script>
+
+<template>
+  <div class="animated left-6 top-6">
+    <!-- Create each node -->
+    <div v-for="(node, index) in nodes" :key="index"
+         :style="{ position: 'absolute', left: `${node.x}px`, top: `${node.y}px`, zIndex: index }">
+      <a v-if="node.link" :href="node.link">
+        <VPImage v-if="node.image" :alt="`Image ${index + 1}`" :class="`image-src w-20 rounded-2xl ${node.class ?? ''}`"
+                 :image="node.image"/>
+        <div v-else class="node-html" v-html="node.content"></div>
+      </a>
+      <template v-else>
+        <VPImage v-if="node.image" :alt="`Image ${index + 1}`" :class="`image-src w-20 rounded-2xl ${node.class ?? ''}`"
+                 :image="node.image"/>
+        <div v-else class="node-html" v-html="node.content"></div>
+      </template>
+    </div>
+
+    <svg :height="maxHeight" :width="maxWidth">
+      <!-- Create paths for each connection -->
+      <path v-for="(d, index) in paths" :key="index" :d="d" class="dashed-line" fill="none"/>
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+@keyframes animation {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(20px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.animated {
+  animation: animation 4s infinite ease-in-out;
+  position: relative;
+}
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 1000;
+  }
+}
+
+.dashed-line {
+  stroke-width: 2;
+  stroke: var(--vp-c-text-1);
+  stroke-dasharray: 5;
+  stroke-dashoffset: 0;
+  animation: dashdraw linear infinite 50s;
+}
+</style>
\ No newline at end of file
diff --git a/.web/docs/.vitepress/theme/components/HeroAnimation.vue b/.web/docs/.vitepress/theme/components/HeroAnimation.vue
new file mode 100644
index 0000000..cbbe1c7
--- /dev/null
+++ b/.web/docs/.vitepress/theme/components/HeroAnimation.vue
@@ -0,0 +1,51 @@
+<template>
+  <div id="animation-container" class="relative h-128 w-128">
+    <div class="absolute left-1/2 animate-logo">
+      <img alt="Bottom Middle Node" src="/minekube-logo.png" width="128">
+    </div>
+    <div class="absolute left-1/2 top-64 animate-logo">
+      <img alt="Top Middle Node" src="/minekube-logo.png" width="128">
+    </div>
+    <div class="line animate-logo "></div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes logo-animation {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(20px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.animate-logo {
+  animation: logo-animation 4s infinite ease-in-out;
+}
+
+@keyframes line-animation {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+}
+
+.line {
+  position: absolute;
+  top: 64px;
+  left: 50%;
+  width: 2px;
+  height: 64px;
+  background: linear-gradient(90deg, transparent, #d00808, transparent);
+  background-size: 200% 200%;
+  animation: line-animation 2s infinite;
+}
+</style>
+<script setup>
+</script>
\ No newline at end of file
diff --git a/.web/docs/.vitepress/theme/components/HomeHeroImage.vue b/.web/docs/.vitepress/theme/components/HomeHeroImage.vue
new file mode 100644
index 0000000..7659a5c
--- /dev/null
+++ b/.web/docs/.vitepress/theme/components/HomeHeroImage.vue
@@ -0,0 +1,47 @@
+<script setup>
+import Graph from "./Graph.vue";
+import VPImage from "./VPImage.vue";
+
+const velocity = 'https://avatars.githubusercontent.com/u/41710604?s=200&v=4'
+const paper = 'https://avatars.githubusercontent.com/u/7608950?s=200&v=4'
+const spigot = 'https://avatars.githubusercontent.com/u/4350249?s=48&v=4'
+
+const center = {x: 100, y: 0};
+const space = 100; // Define your space constant here
+
+const nodes = [
+  {x: center.x, y: center.y, link: '/guide/', image: '/minekube-logo.png', class: 'w-48'}, // Top center node
+  {x: center.x - space * 1.5, y: 200, link: '/guide/connectors/gate', image: '/gate.png', class: 'w-32'}, // First bottom node (Gate)
+  {x: center.x - space * 0.5, y: 250, link: '/guide/connectors/plugin', image: velocity}, // Second bottom node
+  {x: center.x + space * 0.5, y: 250, link: '/guide/connectors/plugin', image: paper, class: 'w-16'}, // Third bottom node
+  {x: center.x + space * 1.5, y: 200, link: '/guide/connectors/plugin', image: spigot}, // Fourth bottom node
+
+  // {x: center.x, y: 0, image: '/mascot.png', class: 'w-12'},
+
+];
+
+// Define connections between nodes by their index
+const connections = [
+  [0, 1],
+  [0, 2],
+  [0, 3],
+  [0, 4],
+];
+
+</script>
+
+<template>
+
+  <div class="hidden lg:block">
+    <Graph :connections="connections" :nodes="nodes"/>
+  </div>
+
+  <div class="block lg:hidden">
+    <VPImage class="image-src" image="/minekube-logo.png"/>
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/.web/docs/.vitepress/theme/components/Layout.vue b/.web/docs/.vitepress/theme/components/Layout.vue
index 565f7c7..d02905b 100644
--- a/.web/docs/.vitepress/theme/components/Layout.vue
+++ b/.web/docs/.vitepress/theme/components/Layout.vue
@@ -4,6 +4,7 @@ import {useRouter} from 'vitepress';
 import {watch} from 'vue';
 import MeetTeam from "./MeetTeam.vue";
 import Landing from "./Landing.vue";
+import HomeHeroImage from "./HomeHeroImage.vue";
 
 const {Layout} = DefaultTheme
 
@@ -20,9 +21,12 @@ if (typeof window !== 'undefined' && window.posthog) {
 
 <template>
   <Layout>
+    <template #home-hero-image>
+      <HomeHeroImage/>
+    </template>
     <template #home-features-after>
       <Landing/>
       <MeetTeam/>
     </template>
   </Layout>
-</template>
\ No newline at end of file
+</template>
diff --git a/.web/docs/.vitepress/theme/components/VPImage.vue b/.web/docs/.vitepress/theme/components/VPImage.vue
new file mode 100644
index 0000000..23701e7
--- /dev/null
+++ b/.web/docs/.vitepress/theme/components/VPImage.vue
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import type {DefaultTheme} from 'vitepress/theme'
+import {withBase} from 'vitepress'
+
+defineProps<{
+  image: DefaultTheme.ThemeableImage
+  alt?: string
+}>()
+
+defineOptions({inheritAttrs: false})
+</script>
+
+<template>
+  <template v-if="image">
+    <img
+        v-if="typeof image === 'string' || 'src' in image"
+        :alt="alt ?? (typeof image === 'string' ? '' : image.alt || '')"
+        :src="withBase(typeof image === 'string' ? image : image.src)"
+        class="VPImage"
+        v-bind="typeof image === 'string' ? $attrs : { ...image, ...$attrs }"
+    />
+    <template v-else>
+      <VPImage
+          :alt="image.alt"
+          :image="image.dark"
+          class="dark"
+          v-bind="$attrs"
+      />
+      <VPImage
+          :alt="image.alt"
+          :image="image.light"
+          class="light"
+          v-bind="$attrs"
+      />
+    </template>
+  </template>
+</template>
+
+<style scoped>
+html:not(.dark) .VPImage.dark {
+  display: none;
+}
+
+.dark .VPImage.light {
+  display: none;
+}
+</style>
diff --git a/.web/docs/public/gate.png b/.web/docs/public/gate.png
new file mode 100644
index 0000000000000000000000000000000000000000..836568dffbca55b010003e7c0f449d75a669ab9a
GIT binary patch
literal 3582
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
UjUvzf{yG|cZ4)i51}ysj0G{>$tN;K2

literal 0
HcmV?d00001