Add: Copy Command

- add copy to clipboard function
linux-themes · Feb 15, 2025 · 737f06c · 737f06c
1 parent b662f41
commit 737f06c
Show file tree

Hide file tree

Showing 4 changed files with 188 additions and 154 deletions.
diff --git a/src/pages/database/configs.astro b/src/pages/database/configs.astro
@@ -58,40 +58,42 @@ const cards = configs;
 
     <div id="storeResults" class="grid grid-cols-1 md:grid-cols-3 gap-6">
       {
-        cards.map((card, index) => (
-          <div class="card bg-white rounded-lg shadow-md justify-between flex flex-col relative top-0 transition-all hover:shadow-lg hover:-top-1 dark:bg-gray-800 dark:text-gray-200">
-            <div class="p-4 flex flex-col ">
-              <div class="flex gap-4 justify-between">
-                <div>
-                  <h3 class="text-2xl font-bold mb-2">{card.name}</h3>
+        cards.map((card) => {
+          return (
+            <section class="card bg-white rounded-lg shadow-md justify-between flex flex-col relative top-0 transition-all hover:shadow-lg hover:-top-1 dark:bg-gray-800 dark:text-gray-200">
+              <div class="p-4 flex flex-col ">
+                <div class="flex gap-4 justify-between">
+                  <div>
+                    <h3 class="text-2xl font-bold mb-2">{card.name}</h3>
+                  </div>
+                  <h3 class="text-2xl font-bold mb-2">{card.package_number}</h3>
                 </div>
-                <h3 class="text-2xl font-bold mb-2">{card.package_number}</h3>
-              </div>
-              <img src={`${card.url_icon}`} alt={`${card.name}`} class="h-60 self-center p-4" />
-              <p class="text-gray-600 mb-4 text-xl dark:text-gray-300">{card.description}</p>
-              <div class="tags flex justify-between mb-4">
-                <div>
-                  <span class={`${getDesktopColor(card.desktop)} px-2 py-1 rounded-lg text-sm`}>{card.desktop}</span>
-                  <span class={`${getCategoryColor(card.category)} px-2 py-1 rounded-lg text-sm`}>{card.category}</span>
-                </div>
-                <div>
-                  <span class={`bg-blue-300 text-blue-900 px-2 py-1 rounded-lg text-sm flex gap-2 items-center`}>
-                    <Icon name="material-symbols:download" />
-                    {getDownloads(card.maintainer, card.repository)}
-                  </span>
+                <img src={`${card.url_icon}`} alt={`${card.name}`} class="h-60 self-center p-4" />
+                <p class="text-gray-600 mb-4 text-xl dark:text-gray-300">{card.description}</p>
+                <div class="tags flex justify-between mb-4">
+                  <div>
+                    <span class={`${getDesktopColor(card.desktop)} px-2 py-1 rounded-lg text-sm`}>{card.desktop}</span>
+                    <span class={`${getCategoryColor(card.category)} px-2 py-1 rounded-lg text-sm`}>{card.category}</span>
+                  </div>
+                  <div>
+                    <span class={`bg-blue-300 text-blue-900 px-2 py-1 rounded-lg text-sm flex gap-2 items-center`}>
+                      <Icon name="material-symbols:download" />
+                      {getDownloads(card.maintainer, card.repository)}
+                    </span>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="bg-gray-100 rounded-b-lg text-center flex gap-2 justify-between dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
-              <a class="block font-medium text-lg size-full p-2 hover:bg-gray-500 rounded-bl-lg" href={`/app#${card.category}_${card.package_number}`}>
-                Details
-              </a>
-              <a class="block font-medium text-lg size-full p-2 hover:bg-gray-500 rounded-br-lg" href="https://linuxthemes.org/download/">
-                Install
-              </a>
-            </div>
-          </div>
-        ))
+              <div class="bg-gray-100 rounded-b-lg text-center flex gap-2 justify-between dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
+                <a class="block font-medium text-lg size-full p-2 active:bg-gray-600 hover:bg-gray-500 rounded-bl-lg" href={`/app#${card.category}_${card.package_number}`}>
+                  <button class={`${card.category} ${card.package_number}`}>Details</button>
+                </a>
+                <button id="install-button" name={`${card.category} ${card.package_number}`} class="block font-medium text-lg size-full p-2 active:bg-gray-600 hover:bg-gray-500 rounded-br-lg ">
+                  Install
+                </button>
+              </div>
+            </section>
+          );
+        })
       }
     </div>
   </div>
@@ -103,20 +105,27 @@ const cards = configs;
 <script>
   let searchInput = document.getElementById("storeSearch") as HTMLInputElement;
 
-  // Initialization when the DOM is fully loaded
-  document.addEventListener("DOMContentLoaded", () => {
-    initSearch();
+  const buttons: NodeListOf<HTMLButtonElement> = document.querySelectorAll("#install-button");
+  buttons.forEach((button) => {
+    button.addEventListener("click", () => {
+      const category = button.name.split(" ")[0];
+      const package_number = button.name.split(" ")[1];
+      navigator.clipboard.writeText(`themes install ${category} ${package_number}`);
+      button.textContent = "Command copied ✅";
+    });
+
+    button.addEventListener("mouseout", () => {
+      button.textContent = "Install";
+    });
   });
 
-  function initSearch(): void {
-    searchInput.addEventListener("keyup", () => {
-      const search = searchInput.value.toLowerCase();
-      const cards = document.querySelectorAll("#storeResults .card");
-      cards.forEach((element) => {
-        const card = element as HTMLElement;
-        if (!card.textContent?.toLowerCase().includes(search)) card.style.display = "none";
-        if (card.textContent?.toLowerCase().includes(search)) card.style.display = "flex";
-      });
+  searchInput.addEventListener("keyup", () => {
+    const search = searchInput.value.toLowerCase();
+    const cards = document.querySelectorAll("#storeResults .card");
+    cards.forEach((element) => {
+      const card = element as HTMLElement;
+      if (!card.textContent?.toLowerCase().includes(search)) card.style.display = "none";
+      if (card.textContent?.toLowerCase().includes(search)) card.style.display = "flex";
     });
-  }
+  });
 </script>
diff --git a/src/pages/database/icons.astro b/src/pages/database/icons.astro
@@ -58,40 +58,42 @@ const cards = icons;
 
     <div id="storeResults" class="grid grid-cols-1 md:grid-cols-3 gap-6">
       {
-        cards.map((card, index) => (
-          <div class="card bg-white rounded-lg shadow-md justify-between flex flex-col relative top-0 transition-all hover:shadow-lg hover:-top-1 dark:bg-gray-800 dark:text-gray-200">
-            <div class="p-4 flex flex-col ">
-              <div class="flex gap-4 justify-between">
-                <div>
-                  <h3 class="text-2xl font-bold mb-2">{card.name}</h3>
+        cards.map((card) => {
+          return (
+            <section class="card bg-white rounded-lg shadow-md justify-between flex flex-col relative top-0 transition-all hover:shadow-lg hover:-top-1 dark:bg-gray-800 dark:text-gray-200">
+              <div class="p-4 flex flex-col ">
+                <div class="flex gap-4 justify-between">
+                  <div>
+                    <h3 class="text-2xl font-bold mb-2">{card.name}</h3>
+                  </div>
+                  <h3 class="text-2xl font-bold mb-2">{card.package_number}</h3>
                 </div>
-                <h3 class="text-2xl font-bold mb-2">{card.package_number}</h3>
-              </div>
-              <img src={`${card.url_icon}`} alt={`${card.name}`} class="h-60 self-center p-4" />
-              <p class="text-gray-600 mb-4 text-xl dark:text-gray-300">{card.description}</p>
-              <div class="tags flex justify-between mb-4">
-                <div>
-                  <span class={`${getDesktopColor(card.desktop)} px-2 py-1 rounded-lg text-sm`}>{card.desktop}</span>
-                  <span class={`${getCategoryColor(card.category)} px-2 py-1 rounded-lg text-sm`}>{card.category}</span>
-                </div>
-                <div>
-                  <span class={`bg-blue-300 text-blue-900 px-2 py-1 rounded-lg text-sm flex gap-2 items-center`}>
-                    <Icon name="material-symbols:download" />
-                    {getDownloads(card.maintainer, card.repository)}
-                  </span>
+                <img src={`${card.url_icon}`} alt={`${card.name}`} class="h-60 self-center p-4" />
+                <p class="text-gray-600 mb-4 text-xl dark:text-gray-300">{card.description}</p>
+                <div class="tags flex justify-between mb-4">
+                  <div>
+                    <span class={`${getDesktopColor(card.desktop)} px-2 py-1 rounded-lg text-sm`}>{card.desktop}</span>
+                    <span class={`${getCategoryColor(card.category)} px-2 py-1 rounded-lg text-sm`}>{card.category}</span>
+                  </div>
+                  <div>
+                    <span class={`bg-blue-300 text-blue-900 px-2 py-1 rounded-lg text-sm flex gap-2 items-center`}>
+                      <Icon name="material-symbols:download" />
+                      {getDownloads(card.maintainer, card.repository)}
+                    </span>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="bg-gray-100 rounded-b-lg text-center flex gap-2 justify-between dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
-              <a class="block font-medium text-lg size-full p-2 hover:bg-gray-500 rounded-bl-lg" href={`/app#${card.category}_${card.package_number}`}>
-                Details
-              </a>
-              <a class="block font-medium text-lg size-full p-2 hover:bg-gray-500 rounded-br-lg" href="https://linuxthemes.org/download/">
-                Install
-              </a>
-            </div>
-          </div>
-        ))
+              <div class="bg-gray-100 rounded-b-lg text-center flex gap-2 justify-between dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
+                <a class="block font-medium text-lg size-full p-2 active:bg-gray-600 hover:bg-gray-500 rounded-bl-lg" href={`/app#${card.category}_${card.package_number}`}>
+                  <button class={`${card.category} ${card.package_number}`}>Details</button>
+                </a>
+                <button id="install-button" name={`${card.category} ${card.package_number}`} class="block font-medium text-lg size-full p-2 active:bg-gray-600 hover:bg-gray-500 rounded-br-lg ">
+                  Install
+                </button>
+              </div>
+            </section>
+          );
+        })
       }
     </div>
   </div>
@@ -103,20 +105,27 @@ const cards = icons;
 <script>
   let searchInput = document.getElementById("storeSearch") as HTMLInputElement;
 
-  // Initialization when the DOM is fully loaded
-  document.addEventListener("DOMContentLoaded", () => {
-    initSearch();
+  const buttons: NodeListOf<HTMLButtonElement> = document.querySelectorAll("#install-button");
+  buttons.forEach((button) => {
+    button.addEventListener("click", () => {
+      const category = button.name.split(" ")[0];
+      const package_number = button.name.split(" ")[1];
+      navigator.clipboard.writeText(`themes install ${category} ${package_number}`);
+      button.textContent = "Command copied ✅";
+    });
+
+    button.addEventListener("mouseout", () => {
+      button.textContent = "Install";
+    });
   });
 
-  function initSearch(): void {
-    searchInput.addEventListener("keyup", () => {
-      const search = searchInput.value.toLowerCase();
-      const cards = document.querySelectorAll("#storeResults .card");
-      cards.forEach((element) => {
-        const card = element as HTMLElement;
-        if (!card.textContent?.toLowerCase().includes(search)) card.style.display = "none";
-        if (card.textContent?.toLowerCase().includes(search)) card.style.display = "flex";
-      });
+  searchInput.addEventListener("keyup", () => {
+    const search = searchInput.value.toLowerCase();
+    const cards = document.querySelectorAll("#storeResults .card");
+    cards.forEach((element) => {
+      const card = element as HTMLElement;
+      if (!card.textContent?.toLowerCase().includes(search)) card.style.display = "none";
+      if (card.textContent?.toLowerCase().includes(search)) card.style.display = "flex";
     });
-  }
+  });
 </script>
diff --git a/src/pages/database/themes.astro b/src/pages/database/themes.astro
@@ -58,40 +58,42 @@ const cards = themes;
 
     <div id="storeResults" class="grid grid-cols-1 md:grid-cols-3 gap-6">
       {
-        cards.map((card, index) => (
-          <div class="card bg-white rounded-lg shadow-md justify-between flex flex-col relative top-0 transition-all hover:shadow-lg hover:-top-1 dark:bg-gray-800 dark:text-gray-200">
-            <div class="p-4 flex flex-col ">
-              <div class="flex gap-4 justify-between">
-                <div>
-                  <h3 class="text-2xl font-bold mb-2">{card.name}</h3>
+        cards.map((card) => {
+          return (
+            <section class="card bg-white rounded-lg shadow-md justify-between flex flex-col relative top-0 transition-all hover:shadow-lg hover:-top-1 dark:bg-gray-800 dark:text-gray-200">
+              <div class="p-4 flex flex-col ">
+                <div class="flex gap-4 justify-between">
+                  <div>
+                    <h3 class="text-2xl font-bold mb-2">{card.name}</h3>
+                  </div>
+                  <h3 class="text-2xl font-bold mb-2">{card.package_number}</h3>
                 </div>
-                <h3 class="text-2xl font-bold mb-2">{card.package_number}</h3>
-              </div>
-              <img src={`${card.url_icon}`} alt={`${card.name}`} class="h-60 self-center p-4" />
-              <p class="text-gray-600 mb-4 text-xl dark:text-gray-300">{card.description}</p>
-              <div class="tags flex justify-between mb-4">
-                <div>
-                  <span class={`${getDesktopColor(card.desktop)} px-2 py-1 rounded-lg text-sm`}>{card.desktop}</span>
-                  <span class={`${getCategoryColor(card.category)} px-2 py-1 rounded-lg text-sm`}>{card.category}</span>
-                </div>
-                <div>
-                  <span class={`bg-blue-300 text-blue-900 px-2 py-1 rounded-lg text-sm flex gap-2 items-center`}>
-                    <Icon name="material-symbols:download" />
-                    {getDownloads(card.maintainer, card.repository)}
-                  </span>
+                <img src={`${card.url_icon}`} alt={`${card.name}`} class="h-60 self-center p-4" />
+                <p class="text-gray-600 mb-4 text-xl dark:text-gray-300">{card.description}</p>
+                <div class="tags flex justify-between mb-4">
+                  <div>
+                    <span class={`${getDesktopColor(card.desktop)} px-2 py-1 rounded-lg text-sm`}>{card.desktop}</span>
+                    <span class={`${getCategoryColor(card.category)} px-2 py-1 rounded-lg text-sm`}>{card.category}</span>
+                  </div>
+                  <div>
+                    <span class={`bg-blue-300 text-blue-900 px-2 py-1 rounded-lg text-sm flex gap-2 items-center`}>
+                      <Icon name="material-symbols:download" />
+                      {getDownloads(card.maintainer, card.repository)}
+                    </span>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="bg-gray-100 rounded-b-lg text-center flex gap-2 justify-between dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
-              <a class="block font-medium text-lg size-full p-2 hover:bg-gray-500 rounded-bl-lg" href={`/app#${card.category}_${card.package_number}`}>
-                Details
-              </a>
-              <a class="block font-medium text-lg size-full p-2 hover:bg-gray-500 rounded-br-lg" href="https://linuxthemes.org/download/">
-                Install
-              </a>
-            </div>
-          </div>
-        ))
+              <div class="bg-gray-100 rounded-b-lg text-center flex gap-2 justify-between dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
+                <a class="block font-medium text-lg size-full p-2 active:bg-gray-600 hover:bg-gray-500 rounded-bl-lg" href={`/app#${card.category}_${card.package_number}`}>
+                  <button class={`${card.category} ${card.package_number}`}>Details</button>
+                </a>
+                <button id="install-button" name={`${card.category} ${card.package_number}`} class="block font-medium text-lg size-full p-2 active:bg-gray-600 hover:bg-gray-500 rounded-br-lg ">
+                  Install
+                </button>
+              </div>
+            </section>
+          );
+        })
       }
     </div>
   </div>
@@ -103,20 +105,27 @@ const cards = themes;
 <script>
   let searchInput = document.getElementById("storeSearch") as HTMLInputElement;
 
-  // Initialization when the DOM is fully loaded
-  document.addEventListener("DOMContentLoaded", () => {
-    initSearch();
+  const buttons: NodeListOf<HTMLButtonElement> = document.querySelectorAll("#install-button");
+  buttons.forEach((button) => {
+    button.addEventListener("click", () => {
+      const category = button.name.split(" ")[0];
+      const package_number = button.name.split(" ")[1];
+      navigator.clipboard.writeText(`themes install ${category} ${package_number}`);
+      button.textContent = "Command copied ✅";
+    });
+
+    button.addEventListener("mouseout", () => {
+      button.textContent = "Install";
+    });
   });
 
-  function initSearch(): void {
-    searchInput.addEventListener("keyup", () => {
-      const search = searchInput.value.toLowerCase();
-      const cards = document.querySelectorAll("#storeResults .card");
-      cards.forEach((element) => {
-        const card = element as HTMLElement;
-        if (!card.textContent?.toLowerCase().includes(search)) card.style.display = "none";
-        if (card.textContent?.toLowerCase().includes(search)) card.style.display = "flex";
-      });
+  searchInput.addEventListener("keyup", () => {
+    const search = searchInput.value.toLowerCase();
+    const cards = document.querySelectorAll("#storeResults .card");
+    cards.forEach((element) => {
+      const card = element as HTMLElement;
+      if (!card.textContent?.toLowerCase().includes(search)) card.style.display = "none";
+      if (card.textContent?.toLowerCase().includes(search)) card.style.display = "flex";
     });
-  }
+  });
 </script>