Update app.astro

linux-themes · Feb 15, 2025 · 3fd3424 · 3fd3424
1 parent 2eeae12
commit 3fd3424
Showing 1 changed file with 23 additions and 6 deletions.
diff --git a/src/pages/app.astro b/src/pages/app.astro
@@ -27,10 +27,10 @@ import { Icon } from "astro-icon/components";
           </div>
 
           <div class="flex space-y-4 flex-col w-full md:w-auto">
-            <a href="https://linuxthemes.org/download" class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 flex items-center justify-center">
+            <button id="install-button" name="!THEME_CATEGORY! !THEME_PACKAGE_NUMBER!" class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 flex items-center justify-center">
               <Icon name="material-symbols:cloud-download" class="w-5 h-5 inline mr-2" />
-              How to Install
-            </a>
+              Install
+            </button>
             <button id="openReview" class="bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-700 flex items-center justify-center">
               <Icon name="material-symbols:rate-review" class="w-5 h-5 inline mr-2" />
               Read Review
@@ -101,8 +101,24 @@ import { Icon } from "astro-icon/components";
     const package_number = window.location.hash.substring(1).split("_")[1];
     const pkg = await fetchPackage(category, package_number);
     populateDetails(pkg);
+    initializeButtions();
   });
 
+  function initializeButtions() {
+    const button: HTMLButtonElement = document.getElementById("install-button") as HTMLButtonElement;
+    let button_content = button.innerHTML;
+    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.innerHTML = button_content;
+    });
+  }
+
   async function fetchPackage(category: string, package_number: string) {
     const response = await fetch(`https://raw.githubusercontent.com/linux-themes/database/refs/heads/main/${category}/index.yml`);
     const data = await response.text();
@@ -137,13 +153,14 @@ import { Icon } from "astro-icon/components";
   function populateDetails(card: Theme | Icon | Config) {
     document.body.innerHTML = document.body.innerHTML
       .replace(/!THEME_NAME!/g, card.name)
-      .replace(/!THEME_DESCRIPTION!/g, card.description)
       .replace(/!THEME_DESKTOP!/g, card.desktop)
       .replace(/!THEME_CATEGORY!/g, card.category)
+      .replace(/!THEME_DESCRIPTION!/g, card.description)
+      .replace(/!THEME_PACKAGE_NUMBER!/g, card.package_number.toString())
       .replace(/!THEME_DESKTOP_DESCRIPTION!/g, card.description)
-      .replace(/!THEME_SHORT_URL!/g, card.name.toLowerCase().replace(/\s+/g, "-"))
       .replace(/!THEME_DESKTOP_CLASS!/g, getDesktopColor(card.desktop))
-      .replace(/!THEME_CATEGORY_CLASS!/g, getCategoryColor(card.category));
+      .replace(/!THEME_CATEGORY_CLASS!/g, getCategoryColor(card.category))
+      .replace(/!THEME_SHORT_URL!/g, card.name.toLowerCase().replace(/\s+/g, "-"));
 
     updateImage("theme_icon", card.url_icon);
     updateImage("theme_screenshot", card.url_screenshot);