fix(home): improve responsive layout

.github/workflows/build.yml

@@ -59,10 +59,10 @@ jobs:
         with:
           node-version: 20
           cache: yarn
-      - name: Install Playwright 🚀
-        run: npx playwright install --with-deps
       - name: Install dependencies 🚀
         run: yarn install --immutable
+      - name: Install Playwright 🚀
+        run: yarn playwright install
       - name: Build Storybook
         run: yarn storybook:build --quiet
       - name: Serve Storybook and run tests 🔍

.github/workflows/website.yml

@@ -45,7 +45,7 @@ jobs:
         run: |
           yarn docs:build
           touch docs/.vitepress/dist/.nojekyll
-          echo "beta.tsed.io" > docs/.vitepress/dist/CNAME
+          echo "beta.tsed.dev" > docs/.vitepress/dist/CNAME
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

docs/.vitepress/theme/atoms/svg/MessageCircleHeart.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-message-circle-heart"
+  >
+    <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
+    <path
+      d="M15.8 9.2a2.5 2.5 0 0 0-3.5 0l-.3.4-.35-.3a2.42 2.42 0 1 0-3.2 3.6l3.6 3.5 3.6-3.5c1.2-1.2 1.1-2.7.2-3.7"
+    />
+  </svg>
+</template>

docs/.vitepress/theme/composables/randomize/useRandom.ts

@@ -0,0 +1,54 @@
+import {ref} from "vue";
+
+export interface UseRandomProps<Data = any> {
+  initItems: Data[];
+  maxItems: number;
+  numberToChange: number;
+}
+
+const getRandomIndex = (arrayLength: number) => {
+  if (arrayLength === 0) {
+    return 0;
+  }
+  return Math.floor(Math.random() * arrayLength);
+};
+
+export function useRandomItems<Data = unknown>({initItems, maxItems, numberToChange}: UseRandomProps<Data>) {
+  const randomItems = ref<Data[]>([]);
+  const shuffledItems = ref<Data[]>([]);
+  const lastChangedIndex = ref<number>(-1);
+
+  function update() {
+    if (initItems.length > 0) {
+      // Si randomItems est vide, remplir initialement avec 10 éléments aléatoires
+      if (randomItems.value.length === 0) {
+        shuffledItems.value = initItems.sort(() => 0.5 - Math.random()) as never;
+
+        randomItems.value = shuffledItems.value.slice(0, maxItems);
+      } else {
+        const currentList = [...randomItems.value];
+
+        // Remplacer partiellement les éléments existants
+        for (let i = 0; i < numberToChange; i++) {
+          let randomItemIndex = getRandomIndex(currentList.length);
+
+          while (lastChangedIndex.value === randomItemIndex) {
+            randomItemIndex = getRandomIndex(currentList.length);
+          }
+
+          lastChangedIndex.value = randomItemIndex;
+
+          const item = shuffledItems.value.pop()!;
+
+          shuffledItems.value.unshift(currentList[randomItemIndex]);
+
+          currentList[randomItemIndex] = item;
+        }
+
+        randomItems.value = currentList;
+      }
+    }
+  }
+
+  return {update, lastChangedIndex, items: randomItems};
+}

docs/.vitepress/theme/index.ts

@@ -13,13 +13,17 @@ import CodeSandbox from "./molecules/codesandbox/CodeSandbox.vue";
 import Projects from "./organisms/projects/Projects.vue";
 import Banner from "./molecules/banner/Banner.vue";
 import HomeBanner from "./organisms/home/HomeBanner.vue";
-import Frameworks from "./organisms/frameworks/Frameworks.vue";
+import HomePartners from "./organisms/home/HomePartners.vue";
+import HomeFrameworks from "./organisms/home/HomeFrameworks.vue";
+import HomeBody from "./organisms/home/HomeBody.vue";
 
 export default {
   extends: DefaultTheme,
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
-      "home-hero-image": () => h(HomeBanner)
+      "home-hero-image": () => h(HomeBanner),
+      "home-features-before": () => h(HomePartners),
+      "home-features-after": () => h(HomeBody)
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
     });
   },
@@ -29,7 +33,7 @@ export default {
     app.component("GithubContributors", GithubContributors);
     app.component("CodeSandbox", CodeSandbox);
     app.component("Projects", Projects);
-    app.component("Frameworks", Frameworks);
+    app.component("HomeFrameworks", HomeFrameworks);
     // eslint-disable-next-line vue/no-reserved-component-names
     app.component("Button", Button);
     app.component("Banner", Banner);

docs/.vitepress/theme/molecules/frameworks/Frameworks.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import ButtonBadge, {type ButtonBadgeProps} from "../../molecules/button-badge/ButtonBadge.vue";
+import {useInterval} from "@vueuse/core";
+import {watch} from "vue";
+import {useRandomItems} from "../../composables/randomize/useRandom";
+
+export interface Framework {
+  id: number;
+  title: string;
+  href: string;
+  src: string;
+}
+
+export interface FrameworksProps extends ButtonBadgeProps {
+  innerPadding?: number;
+  maxItems?: number;
+  numberToChange?: number;
+  delay?: number;
+  items?: Framework[];
+}
+
+const props = withDefaults(defineProps<FrameworksProps>(), {
+  width: 80,
+  bgColor: "purple-50 dark:bg-api-default",
+  textSize: "sm",
+  blur: 0,
+  shadow: "none",
+  innerPadding: 4,
+  maxItems: 15,
+  numberToChange: 1,
+  delay: 1500,
+  items: () => []
+});
+
+const counter = useInterval(props.delay, {});
+const {items, update} = useRandomItems({
+  maxItems: props.maxItems,
+  numberToChange: props.numberToChange,
+  initItems: props.items
+});
+
+watch(counter, () => {
+  update();
+});
+
+update();
+
+function beforeLeave(el: any) {
+  const {marginLeft, marginTop, width, height} = window.getComputedStyle(el);
+  el.style.left = `${el.offsetLeft - parseFloat(marginLeft)}px`;
+  el.style.top = `${el.offsetTop - parseFloat(marginTop)}px`;
+  el.style.width = width;
+  el.style.height = height;
+}
+</script>
+<template>
+  <ul name="list" tag="ul" class="mb-5 reset-list flex flex-wrap items-center gap-5" @before-leave="beforeLeave">
+    <li v-for="item in items" :key="item.id" class="w-1/5 sm:w-auto relative">
+      <ButtonBadge
+        v-bind="props"
+        :title="item.title"
+        :href="item.href"
+        :src="item.src"
+        :padding="innerPadding"
+        show-title
+      />
+    </li>
+  </ul>
+</template>
+<style scoped>
+.list-item {
+  transition: all 1.5s ease;
+}
+
+.list-enter-active,
+.list-leave-active {
+  transition:
+    opacity 1.5s,
+    transform 1.5s;
+}
+
+.list-leave-active {
+  position: absolute;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}
+</style>

docs/.vitepress/theme/molecules/partners/Partners.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+export interface Partner {
+  href: string;
+  title: string;
+  src: string;
+  style: string;
+  class: string;
+}
+
+interface PartnerProps {
+  items: Partner[];
+}
+
+const props = withDefaults(defineProps<PartnerProps>(), {
+  items: () => []
+});
+</script>
+<template>
+  <div class="flex flex-wrap gap-12 justify-center items-stretch w-full">
+    <div v-for="partner in props.items" :key="partner.href" :class="partner.class">
+      <a
+        :href="partner.href"
+        :title="partner.title"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="link external partner-logo flex items-center h-full justify-center"
+      >
+        <img :src="partner.src" :style="partner.style" />
+      </a>
+    </div>
+  </div>
+</template>
+<style>
+.partner-logo {
+  max-width: 150px;
+}
+.partner-logo img {
+  transition: all ease-in-out 0.3s;
+  filter: grayscale(1);
+  opacity: 0.5;
+  max-width: 100%;
+
+  &:is(.dark *) {
+    filter: contrast(0%);
+
+    &:hover {
+      filter: contrast(100%);
+      opacity: 1;
+    }
+  }
+
+  &:hover {
+    filter: grayscale(0);
+    opacity: 1;
+  }
+}
+</style>