Move function to get page mod info into a separate file and get more …

…info about the mods
QuestPackageManager · Jul 31, 2024 · 2eb1472 · 2eb1472
1 parent 496c056
commit 2eb1472
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 32 deletions.
diff --git a/website/src/components/FundingButton.astro b/website/src/components/FundingButton.astro
@@ -21,6 +21,7 @@ const filteredFunding = funding.filter((url) => isValidUrl(url));
         btn
         btn-error
         btn-sm
+        funding-link
         mr-2
         qavs-none
         rounded-lg
@@ -81,9 +82,10 @@ const filteredFunding = funding.filter((url) => isValidUrl(url));
               target="_blank"
               class={`
                 block
+                block
+                funding-link
                 px-4
                 py-2
-                block
               `}
             >
               <img

diff --git a/website/src/components/ModCard.astro b/website/src/components/ModCard.astro
@@ -146,6 +146,7 @@ const { mods } = Astro.props as Props;
                       btn-primary
                       btn-sm
                       join-item
+                      mod-download
                       rounded-lg
                       text-white
                     `}
@@ -225,6 +226,7 @@ const { mods } = Astro.props as Props;
                     btn
                     btn-primary
                     btn-sm
+                    mod-source
                     mr-2
                     qavs-none
                     rounded-lg

diff --git a/website/src/components/ModFilter.astro b/website/src/components/ModFilter.astro
@@ -33,15 +33,7 @@ const {
   />
 </mod-filter>
 <script>
-  interface ModObject {
-    element: HTMLElement;
-    id: string;
-    title: string;
-    version: string;
-    author: string;
-    description: string;
-  }
-
+  import { type ModObject, getModInfo } from "../getModInfo";
   class ModFilter extends HTMLElement {
     inputElement: HTMLInputElement;
     mods: ModObject[];
@@ -60,30 +52,9 @@ const {
       }
     }
 
-    static getMods(): ModObject[] {
-      return [...document.querySelectorAll<HTMLElement>("mod-card")].map(
-        (card) => ({
-          element: card,
-          id: (card.dataset.modId || "").toLowerCase(),
-          title: (
-            card.querySelector<HTMLElement>("mod-name")?.innerText || ""
-          ).toLowerCase(),
-          version: (
-            card.querySelector<HTMLElement>("mod-version")?.innerText || ""
-          ).toLowerCase(),
-          author: (
-            card.querySelector<HTMLElement>("mod-author")?.innerText || ""
-          ).toLowerCase(),
-          description: (
-            card.querySelector<HTMLElement>("mod-description")?.innerText || ""
-          ).toLowerCase(),
-        })
-      );
-    }
-
     constructor() {
       super();
-      this.mods = ModFilter.getMods();
+      this.mods = getModInfo();
       this.inputElement = this.children[0] as HTMLInputElement;
       this.inputElement.addEventListener("keyup", () => this.filter());
       this.style.display = "";

diff --git a/website/src/getModInfo.ts b/website/src/getModInfo.ts
@@ -0,0 +1,46 @@
+let mods: ModObject[] | null = null;
+
+export interface ModObject {
+  element: HTMLElement;
+  id: string;
+  title: string;
+  version: string;
+  author: string;
+  description: string;
+  download: string;
+  source: string | null
+  funding: string[]
+}
+
+/**
+ * Searches the page for mod-card elements and returns information about the mods within.
+ *
+ * @returns An array of mod information
+ */
+export function getModInfo(): ModObject[] {
+  if (mods === null) {
+    mods = ([...document.querySelectorAll<HTMLElement>("mod-card")].map(
+      (card) => ({
+        element: card,
+        id: (card.dataset.modId || "").toLowerCase(),
+        title: (
+          card.querySelector<HTMLElement>("mod-name")?.innerText || ""
+        ).toLowerCase(),
+        version: (
+          card.querySelector<HTMLElement>("mod-version")?.innerText || ""
+        ).toLowerCase(),
+        author: (
+          card.querySelector<HTMLElement>("mod-author")?.innerText || ""
+        ).toLowerCase(),
+        description: (
+          card.querySelector<HTMLElement>("mod-description")?.innerText || ""
+        ).toLowerCase(),
+        download: card.querySelector<HTMLAnchorElement>("a.mod-download")!.href,
+        source: card.querySelector<HTMLAnchorElement>("a.mod-source")?.href || null,
+        funding: [...card.querySelectorAll<HTMLAnchorElement>("a.funding-link")].map(link => link.href)
+      })
+    ));
+  }
+
+  return mods;
+}