feat(components): add Warehouse

tsedio · Oct 21, 2024 · a796560 · a796560
1 parent 1cdbcc9
commit a796560
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 164 deletions.
diff --git a/docs/.vitepress/theme/composables/api/useWarehouse.ts b/docs/.vitepress/theme/composables/api/useWarehouse.ts
@@ -0,0 +1,48 @@
+import {ref} from "vue";
+import axios from "axios";
+
+export interface WarehousePackage {
+  name: string;
+  description: string;
+  icon: string;
+  homepage: string;
+  npm: string;
+  repository: string;
+  stars: number;
+  downloads: number;
+  tags: string[];
+  maintainers: {username: string; avatar: string}[];
+  type: "official" | "premium" | "community";
+  category: string;
+}
+
+export function useWarehouse(docsRepo: string) {
+  const packages = ref<WarehousePackage[]>([]);
+  const tags = ref<string[]>([]);
+  const isActive = ref(false);
+
+  const fetchPackages = async () => {
+    isActive.value = true;
+    const endpoint = `${docsRepo.split("/rest")[0]}/rest/warehouse`;
+    try {
+      const {data} = await axios.get<WarehousePackage[]>(endpoint);
+
+      packages.value = data;
+
+      const items = data.reduce((set, plugin) => {
+        plugin.tags.forEach((tag) => set.add(tag));
+        return set;
+      }, new Set<string>());
+
+      tags.value = Array.from(items);
+
+      return packages;
+    } catch (error) {
+      packages.value = [];
+    } finally {
+      isActive.value = false;
+    }
+  };
+
+  return {packages, fetchPackages, tags, isActive};
+}
diff --git a/docs/.vitepress/theme/directives/lazyLoadObserver.ts b/docs/.vitepress/theme/directives/lazyLoadObserver.ts
@@ -1,20 +1,27 @@
 export default {
-  mounted(el: HTMLElement) {
-    function display() {
-      const imgEl = el.querySelector("img");
+  mounted(el: HTMLElement, binding: any) {
+    if (binding.modifiers["self"]) {
+      el.classList.add("opacity-0");
+    }
 
-      if (imgEl) {
-        imgEl.addEventListener("load", () => {
-          setTimeout(() => {
-            imgEl.classList.remove("opacity-0");
-          }, 100);
-        });
-        imgEl.src = imgEl.dataset.url || "";
+    function display() {
+      if (binding.modifiers["self"]) {
+        el.classList.remove("opacity-0");
       } else {
+        const imgEl = el.querySelector("img");
         const iframe = el.querySelector("iframe");
 
-        if (iframe) {
+        if (imgEl) {
+          imgEl.addEventListener("load", () => {
+            setTimeout(() => {
+              imgEl.classList.remove("opacity-0");
+            }, 100);
+          });
+          imgEl.src = imgEl.dataset.url || "";
+        } else if (iframe) {
           iframe.src = iframe.dataset.url || "";
+        } else {
+          el.classList.add("opacity-0");
         }
       }
     }

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -17,6 +17,7 @@ import HomePartners from "./organisms/home/HomePartners.vue";
 import HomeFrameworks from "./organisms/home/HomeFrameworks.vue";
 import HomeBody from "./organisms/home/HomeBody.vue";
 import MessageCircleHeart from "./atoms/svg/MessageCircleHeart.vue";
+import Warehouse from "./organisms/warehouse/Warehouse.vue";
 
 export default {
   extends: DefaultTheme,
@@ -39,6 +40,7 @@ export default {
     // eslint-disable-next-line vue/no-reserved-component-names
     app.component("Button", Button);
     app.component("Banner", Banner);
+    app.component("Warehouse", Warehouse);
     app.directive("lazyload-observer", LazyLoadObserver);
 
     // Layouts