feat: add ecosystem component, fix: paths

2024-12-04/src/components/EcosystemVite.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+/// <reference types="vite/client" />
+
+import { useNow } from "@vueuse/core";
+import { computed, onActivated, ref } from "vue";
+
+const imagesRecord = import.meta.glob("../public/ecosystem/*.{svg,png,webp}", {
+  eager: true,
+  import: "default",
+  query: "?url",
+});
+const images = Object.values(imagesRecord)
+  .map((i: any) => i.replace("/public/", "/"))
+  .sort(() => Math.random() - 0.5);
+
+const lines = Array.from({ length: 6 }, (_, idx) =>
+  (idx % 3 === 0
+    ? images.slice(0, images.length / 3)
+    : idx % 3 === 1
+      ? images.slice(images.length / 3, (images.length / 3) * 2)
+      : images.slice((images.length / 3) * 2)
+  ).sort(() => Math.random() - 0.5),
+);
+
+const time = useNow({ interval: "requestAnimationFrame" });
+const _now = ref(Date.now());
+const offset = computed(() => +time.value - _now.value);
+
+// eslint-disable-next-line unused-imports/no-unused-vars
+const speed = Array.from({ length: 6 }, (_) => 60 + Math.random() * 40);
+
+onActivated(() => {
+  _now.value = Date.now();
+});
+</script>
+
+<template>
+  <div flex="~ col gap-6" mt--10>
+    <div
+      v-for="(line, idx) in lines"
+      :key="idx"
+      flex="~ gap-8 items-center justify-center"
+      :class="idx % 2 ? 'ml15' : ''"
+      :style="{
+        transform: `translateX(${(idx % 2) * 400 + idx * 20 - (offset / speed[idx]) * (idx % 2 ? 1 : -1)}px)`,
+      }"
+    >
+      <img
+        v-for="url in line"
+        :key="url"
+        :src="url"
+        h-18
+        max-w-25
+        object-contain
+      />
+      <img
+        v-for="url in line"
+        :key="url + 1"
+        :src="url"
+        h-18
+        max-w-25
+        object-contain
+      />
+      <img
+        v-for="url in line"
+        :key="url + 2"
+        :src="url"
+        h-18
+        max-w-25
+        object-contain
+      />
+    </div>
+  </div>
+</template>

2024-12-04/src/parts/comparison.md

@@ -15,10 +15,10 @@ dragPos:
   <img src="/base/webpack.webp" :class="[$clicks >= 1 ? 'translate-y-20' : '']" h-32 />
   <img v-drag="'t'" v-click="1" v-mark.red.linethrough="{at: 3, strokeWidth: 3, iterations: 4, roughness: 1.6, maxRandomnessOffset: 10, seed: 8 }" src="/base/turbopack.svg" class="!h-24 !w-fit" />
 
-  <img v-drag="'n'" v-click="2" src="/base/next.png" class="!h-18 !w-fit" />
-  <img v-drag="'v-1'" v-click="2" src="/base/vue.webp" class="!h-16 !w-fit" />
-  <img v-drag="'v-2'" v-click="2" src="/base/react.png" class="!h-16 !w-fit" />
-  <img v-drag="'v-3'" v-click="2" src="/base/svelte.png" class="!h-16 !w-fit" />
+  <img v-drag="'n'" v-click="2" src="/base/next.png" class="!h-18 !w-18" />
+  <img v-drag="'v-1'" v-click="2" src="/base/vue.webp" class="!h-18 !w-17" />
+  <img v-drag="'v-2'" v-click="2" src="/base/react.png" class="!h-18 !w-19" />
+  <img v-drag="'v-3'" v-click="2" src="/base/svelte.png" class="!h-18 !w-14" />
   <p v-drag="'v-4'" v-click="2" text-sm whitespace-nowrap>и еще много других</p>
 </div>
 

2024-12-04/src/parts/conclusions.md

@@ -8,11 +8,11 @@ layout: center
 layout: center
 ---
 
-<div class="grid w-full items-center grid-cols-2 gap-10">
-  <img src="/soj/1.png" h-full rounded-md />
-  <img src="/soj/2.png" h-full rounded-md />
-  <img src="/soj/3.png" h-full rounded-md />
-  <img src="/soj/4.png" h-full rounded-md />
+<div class="grid w-full items-center grid-cols-2 grid-rows-2 gap-10">
+  <img src="/soj/1.png" h-56 rounded-md />
+  <img src="/soj/2.png" h-56 rounded-md />
+  <img src="/soj/3.png" h-56 rounded-md />
+  <img src="/soj/4.png" h-56 rounded-md />
 </div>
 
 

2024-12-04/src/parts/ecosystem.md

@@ -5,57 +5,10 @@ layout: center
 <h1 text="5xl!">Экосистема</h1>
 
 ---
-layout: center
+glowX: 50
+glowY: 0
+preload: false
 ---
 
-<div relative h-full flex="~ items-center justify-center" class="sm:w-[95%] 2xl:w-full">
-<v-clicks>
-<div flex="~ gap-2 items-center justify-center" absolute top-10 left-20 class="!w-fit !h-fit">
-   <img src="/base/vue.webp" h-14 />
-   <p class="!text-3xl">Vue</p>
-</div>
-<div flex="~ gap-2 items-center justify-center" absolute top-30 left-60 w-fit h-fit>
-   <img src="/base/react.png" h-14 />
-   <p class="!text-3xl">React</p>
-</div>
-<div flex="~ gap-2 items-center justify-center" absolute top-10 left-100 w-fit h-fit>
-   <img src="/base/angular.svg" h-12 />
-   <p class="!text-3xl">Angular</p>
-</div>
-<div flex="~ gap-2 items-center justify-center" absolute top-30 left-140 w-fit h-fit>
-   <img src="/base/svelte.png" h-14 />
-   <p class="!text-3xl">Svelte</p>
-</div>
-<div flex="~ gap-2 items-center justify-center" absolute top-10 left-180 w-fit h-fit>
-   <img src="/base/solid.svg" h-14 />
-   <p class="!text-3xl">Solid</p>
-</div>
-<div flex="~ gap-2 items-center justify-center" absolute top-60 left-20 w-fit h-fit>
-   <img src="/base/preact.svg" h-14 />
-   <p class="!text-3xl">Preact</p>
-</div>
-<div flex="~ gap-2 items-center justify-center" absolute top-80 left-60 w-fit h-fit>
-   <img src="/base/astro.svg" h-14 />
-   <p class="!text-3xl">Astro</p>
-</div>
-<div flex="~ gap-2 items-center justify-center" absolute top-60 left-100 w-fit h-fit>
-   <img src="/base/remix.svg" h-14 />
-   <p class="!text-3xl">Remix</p>
-</div>
-<div flex="~ gap-2 items-center justify-center" absolute top-80 left-140 w-fit h-fit>
-   <img src="/base/nuxt.svg" h-14 />
-   <p class="!text-3xl">Nuxt</p>
-</div>
-<div flex="~ gap-2 items-center justify-center" absolute top-60 left-180 w-fit h-fit>
-   <img src="/base/vitest.svg" h-14 />
-   <p class="!text-3xl">Vitest</p>
-</div>
-<div flex="~ gap-2 items-center justify-center" class="absolute top-110 left-1/4 translate-x-1/6" w-fit h-fit>
-   <img src="/base/vitepress.webp" h-14 />
-   <p class="!text-3xl">Vitepress</p>
-</div>
-<div flex="~ gap-2 items-center justify-center" class="absolute top-110 right-1/3 translate-x-1/6" w-fit h-fit>
-   <p class="!text-3xl">...</p>
-</div>
-</v-clicks>
-</div>
+<EcosystemVite w-full h-full />
+

2024-12-04/src/parts/future.md

@@ -9,9 +9,9 @@ layout: statement
 ---
 layout: center
 dragPos: 
-  a-1: 386,162,9,102,47
-  a-2: 490,175,9,102,0
-  a-3: 595,161,9,102,-47
+  a-1: 386,148,9,102,47
+  a-2: 490,162,9,102,0
+  a-3: 595,148,9,102,-47
 ---
 
 <TechnologyCard 
@@ -28,7 +28,7 @@ dragPos:
       title="esbuild" 
       color="yellow" 
       :disabled="$clicks >= 3"
-      icon="/base/esbuild.png" 
+      icon="../public/base/esbuild.png" 
       iconClass="h-9"
       class="!w-fit" 
     />
@@ -54,7 +54,7 @@ dragPos:
     <TechnologyCard 
       title="SWC" 
       color="orange"
-      icon="/base/swc.png" 
+      icon="../public/base/swc.png" 
       iconClass="h-5"
       class="!w-fit" 
       :disabled="$clicks >= 1 && $clicks < 5"
@@ -66,15 +66,15 @@ dragPos:
 </div>
 
 <div v-drag="'a-1'">
-  <SharedArrow inert x1="435" y1="314" x2="435" y2="114" stroke="dashed" :color="$clicks >=3 ? '#2b2b2b' : '#fde047'" />
+  <SharedArrow inert x1="435" y1="344" x2="435" y2="114" stroke="dashed" :color="$clicks >=3 ? '#2b2b2b' : '#fde047'" />
 </div>
 
 <div v-drag="'a-2'">
-  <SharedArrow inert x1="435" y1="252" x2="435" y2="114" stroke="dashed" :color="($clicks >= 1 && $clicks < 3) || $clicks > 4 ? '#2b2b2b' : '#fca5a5'" />
+  <SharedArrow inert x1="435" y1="274" x2="435" y2="114" stroke="dashed" :color="($clicks >= 1 && $clicks < 3) || $clicks > 4 ? '#2b2b2b' : '#fca5a5'" />
 </div>
 
 <div v-drag="'a-3'">
-  <SharedArrow inert x1="435" y1="314" x2="435" y2="114" stroke="dashed" :color="$clicks >= 1 && $clicks < 5 ? '#2b2b2b' : '#fdba74'" />
+  <SharedArrow inert x1="435" y1="344" x2="435" y2="114" stroke="dashed" :color="$clicks >= 1 && $clicks < 5 ? '#2b2b2b' : '#fdba74'" />
 </div>
 
 
@@ -90,48 +90,48 @@ layout: center
 ---
 
 <div flex="~ items-center justify-center gap-6">
-  <img src="/base/rolldown.png" h-16 />
+  <img src="../public/base/rolldown.png" h-16 />
   <h1 class="!text-5xl mt-4">Rolldown</h1>
 </div>
 
 
 ---
 layout: center
 dragPos:
-  a-1: 488,154,9,102,0
-  a-2: 488,307,9,102,0
+  a-1: 488,136,9,102,0
+  a-2: 488,310,9,102,0
 ---
 
 <div class="flex flex-col gap-30">
   <TechnologyCard 
     title="Vite" 
-    icon="/base/vite.png"
+    icon="../public/base/vite.png"
     iconClass="h-12 my-1" 
     class="!w-[200px] !h-fit flex items-center justify-center pl-2" 
   />
   <TechnologyCard
     v-click="1" 
     title="Rolldown" 
-    icon="/base/rolldown.png" 
+    icon="../public/base/rolldown.png" 
     color="yellow" 
     iconClass="h-8 my-1"
     class="!w-[200px] flex items-center justify-center" 
   />
   <TechnologyCard 
     v-click="2"
     title="OXC" 
-    icon="/base/oxc.svg" 
+    icon="../public/base/oxc.svg" 
     color="blue" 
     class="!w-[200px] flex items-center justify-center pl-2" 
   />
 </div>
 
 <div v-drag="'a-1'" v-click="1" >
-  <SharedArrow inert x1="435" y1="214" x2="435" y2="114" stroke="dashed" color="#fde047" />
+  <SharedArrow inert x1="435" y1="234" x2="435" y2="114" stroke="dashed" color="#fde047" />
 </div>
 
 <div v-drag="'a-2'" v-click="2" >
-  <SharedArrow inert x1="435" y1="214" x2="435" y2="114" stroke="dashed" color="#60a5fa" />
+  <SharedArrow inert x1="435" y1="234" x2="435" y2="114" stroke="dashed" color="#60a5fa" />
 </div>
 
 

2024-12-04/src/parts/under_hood.md

@@ -1,14 +1,14 @@
 ---
 layout: center
 dragPos: 
-  a-1: 386,162,9,102,47
-  a-2: 490,175,9,102,0
-  a-3: 595,161,9,102,-47
+  a-1: 386,148,9,102,47
+  a-2: 490,162,9,102,0
+  a-3: 595,148,9,102,-47
 ---
 
 <TechnologyCard 
   title="Vite" 
-  icon="/base/vite.png" 
+  icon="../public/base/vite.png" 
   iconClass="h-12"
   class="!w-[210px] translate-y--30 !h-fit" 
 />
@@ -19,7 +19,7 @@ dragPos:
       v-click="1" 
       title="esbuild" 
       color="yellow" 
-      icon="/base/esbuild.png" 
+      icon="../public/base/esbuild.png" 
       iconClass="h-9"
       class="!w-fit" 
     />
@@ -48,7 +48,7 @@ dragPos:
       v-click="3" 
       title="SWC" 
       color="orange" 
-      icon="/base/swc.png" 
+      icon="../public/base/swc.png" 
       iconClass="h-5"
       class="!w-fit" 
     />
@@ -60,13 +60,13 @@ dragPos:
 </div>
 
 <div v-click="1" v-drag="'a-1'">
-  <SharedArrow inert x1="435" y1="320" x2="435" y2="114" stroke="dashed" color="#fde047" />
+  <SharedArrow inert x1="435" y1="344" x2="435" y2="114" stroke="dashed" color="#fde047" />
 </div>
 
 <div v-click="2" v-drag="'a-2'">
-  <SharedArrow inert x1="435" y1="256" x2="435" y2="114" stroke="dashed" color="#fca5a5" />
+  <SharedArrow inert x1="435" y1="274" x2="435" y2="114" stroke="dashed" color="#fca5a5" />
 </div>
 
 <div v-click="3" v-drag="'a-3'">
-  <SharedArrow inert x1="435" y1="320" x2="435" y2="114" stroke="dashed" color="#fdba74" />
+  <SharedArrow inert x1="435" y1="344" x2="435" y2="114" stroke="dashed" color="#fdba74" />
 </div>