From a1bed942b76cb325ec8a1cf5b1e213b51a6a97ff Mon Sep 17 00:00:00 2001
From: E <2974895+eduardomozart@users.noreply.github.com>
Date: Sun, 5 Jul 2026 12:28:37 -0300
Subject: [PATCH 1/3] Refactor clients section to dynamically fetch from
 sunshine.json

---
 gh-pages-template/_data/clients.yml | 179 ----------------------------
 gh-pages-template/index.html        | 154 ++++++++++++++++--------
 2 files changed, 103 insertions(+), 230 deletions(-)

diff --git a/gh-pages-template/_data/clients.yml b/gh-pages-template/_data/clients.yml
index 187793bfdb5..8b137891791 100644
--- a/gh-pages-template/_data/clients.yml
+++ b/gh-pages-template/_data/clients.yml
@@ -1,180 +1 @@
----
-- name: "Android"
-  type: "official"
-  github: "https://github.com/moonlight-stream/moonlight-android"
-  icons:
-    - src: "https://cdn.jsdelivr.net/npm/simple-icons@16/icons/android.svg"
-      alt: "Android"
-      invert: true
-  downloads:
-    - label: "Get it on Google Play"
-      url: "https://play.google.com/store/apps/details?id=com.limelight"
-      img_src: "https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
-      img_height: 60
-    - label: "Available at Amazon Appstore"
-      url: "https://www.amazon.com/gp/product/B00JK4MFN2"
-      img_src: "https://images-na.ssl-images-amazon.com/images/G/01/mobile-apps/devportal2/res/images/amazon-appstore-badge-english-black.png"  # yamllint disable rule:line-length
-      img_height: 60
-      img_style: "padding: 10px;"
-    - label: "Get it on F-Droid"
-      url: "https://f-droid.org/packages/com.limelight"
-      img_src: "https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
-      img_height: 60
 
-- name: "iOS"
-  type: "official"
-  github: "https://github.com/moonlight-stream/moonlight-ios"
-  icons:
-    - src: "https://cdn.jsdelivr.net/npm/simple-icons@16/icons/ios.svg"
-      alt: "iOS"
-      invert: true
-    - src: "https://cdn.jsdelivr.net/npm/simple-icons@16/icons/appletv.svg"
-      alt: "Apple TV"
-      invert: true
-  downloads:
-    - label: "Download on the App Store"
-      url: "https://apps.apple.com/us/app/moonlight-game-streaming/id1000551566"
-      img_src: "https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
-      img_height: 40
-    - label: "Download on Apple TV"
-      url: "https://apps.apple.com/us/app/moonlight-game-streaming/id1000551566"
-      img_src: "https://developer.apple.com/app-store/marketing/guidelines/images/badge-download-on-apple-tv.svg"
-      img_height: 40
-
-- name: "QT"
-  type: "official"
-  github: "https://github.com/moonlight-stream/moonlight-qt"
-  icons:
-    - src: "https://cdn.jsdelivr.net/npm/simple-icons@16/icons/linux.svg"
-      alt: "Linux"
-      invert: true
-    - src: "https://cdn.jsdelivr.net/npm/simple-icons@16/icons/macos.svg"
-      alt: "macOS"
-      invert: true
-    - src: "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/icons/windows.svg"
-      alt: "Windows"
-      invert: true
-    - src: "https://cdn.jsdelivr.net/npm/simple-icons@16/icons/steam.svg"
-      alt: "Steam"
-      invert: true
-  downloads:
-    - label: "Download on GitHub"
-      url: "https://github.com/moonlight-stream/moonlight-qt/releases"
-      icon_fa: "fab fa-github"
-      btn_class: "btn btn-info"
-
-- name: "Embedded"
-  type: "official"
-  github: "https://github.com/moonlight-stream/moonlight-embedded"
-  icons:
-    - src: "https://cdn.jsdelivr.net/npm/simple-icons@16/icons/raspberrypi.svg"
-      alt: "Raspberry Pi"
-      invert: true
-  downloads:
-    - label: "Download"
-      url: "https://github.com/irtimmer/moonlight-embedded/wiki/Packages"
-      icon_fa: "fas fa-download"
-      btn_class: "btn btn-info"
-
-- name: "Xbox One/Series"
-  type: "community"
-  github: "https://github.com/TheElixZammuto/moonlight-xbox"
-  icons:
-    - src: "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/icons/xbox.svg"
-      alt: "Xbox"
-      invert: true
-  downloads:
-    - label: "Get it from Microsoft"
-      url: "https://apps.microsoft.com/store/detail/moonlight-uwp/9MW1BS08ZBTH"
-      img_src: "https://get.microsoft.com/images/en-us%20dark.svg"
-      img_height: 40
-
-- name: "PS Vita"
-  type: "community"
-  github: "https://github.com/xyzz/vita-moonlight"
-  icons:
-    - src: "https://cdn.jsdelivr.net/npm/simple-icons@16/icons/playstationvita.svg"
-      alt: "PlayStation Vita"
-      invert: true
-  downloads:
-    - label: "Download on GitHub"
-      url: "https://github.com/xyzz/vita-moonlight/releases"
-      icon_fa: "fab fa-github"
-      btn_class: "btn btn-info"
-
-- name: "Moonlight Switch"
-  type: "community"
-  github: "https://github.com/XITRIX/Moonlight-Switch"
-  icons:
-    - src: "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/icons/nintendo-switch.svg"
-      alt: "Nintendo Switch"
-      invert: true
-    - src: "https://cdn.jsdelivr.net/npm/simple-icons@16/icons/android.svg"
-      alt: "Android"
-      invert: true
-    - src: "https://cdn.jsdelivr.net/npm/simple-icons@16/icons/appletv.svg"
-      alt: "Apple TV"
-      invert: true
-    - src: "https://cdn.jsdelivr.net/npm/simple-icons@16/icons/ios.svg"
-      alt: "iOS"
-      invert: true
-    - src: "https://cdn.jsdelivr.net/npm/simple-icons@16/icons/macos.svg"
-      alt: "macOS"
-      invert: true
-  downloads:
-    - label: "Download on GitHub"
-      url: "https://github.com/XITRIX/Moonlight-Switch/releases"
-      icon_fa: "fab fa-github"
-      btn_class: "btn btn-info"
-
-- name: "Nintendo Wii U"
-  type: "community"
-  github: "https://github.com/GaryOderNichts/moonlight-wiiu"
-  icons:
-    - src: "https://cdn.jsdelivr.net/npm/simple-icons@13/icons/wiiu.svg"
-      alt: "Wii U"
-      invert: true
-  downloads:
-    - label: "Download"
-      url: "https://github.com/GaryOderNichts/moonlight-wiiu#quick-start"
-      icon_fa: "fas fa-download"
-      btn_class: "btn btn-info"
-
-- name: "New Nintendo 3DS"
-  type: "community"
-  github: "https://github.com/zoeyjodon/moonlight-N3DS"
-  icons:
-    - src: "https://cdn.jsdelivr.net/npm/simple-icons@13/icons/nintendo3ds.svg"
-      alt: "3DS"
-      invert: true
-  downloads:
-    - label: "Download"
-      url: "https://github.com/zoeyjodon/moonlight-N3DS"
-      icon_fa: "fas fa-download"
-      btn_class: "btn btn-info"
-
-- name: "LG webOS TV"
-  type: "community"
-  github: "https://github.com/mariotaku/moonlight-tv"
-  icons:
-    - src: "https://cdn.jsdelivr.net/npm/simple-icons@16/icons/lg.svg"
-      alt: "LG webOS TV"
-      invert: true
-  downloads:
-    - label: "Download"
-      url: "https://github.com/mariotaku/moonlight-tv#download"
-      icon_fa: "fas fa-download"
-      btn_class: "btn btn-info"
-
-- name: "Samsung Tizen TV"
-  type: "community"
-  github: "https://github.com/brightcraft/moonlight-tizen"
-  icons:
-    - src: "https://cdn.jsdelivr.net/npm/simple-icons@16/icons/samsung.svg"
-      alt: "Samsung Tizen TV"
-      invert: true
-  downloads:
-    - label: "Download on GitHub"
-      url: "https://github.com/brightcraft/moonlight-tizen/releases"
-      icon_fa: "fab fa-github"
-      btn_class: "btn btn-info"
diff --git a/gh-pages-template/index.html b/gh-pages-template/index.html
index 3c9dd995550..e679be74a60 100644
--- a/gh-pages-template/index.html
+++ b/gh-pages-template/index.html
@@ -59,57 +59,8 @@ <h5 class="fw-bolder mb-0">{{ feature.title }}</h5>
 <section class="py-5" id="Clients">
     <div class="container px-auto">
         <h2 class="text-center fw-bolder my-5">Clients</h2>
-        <div class="row gx-5">
-            {% for client in site.data.clients %}
-            <div class="col-md-6 col-lg-4 mb-5">
-                <div class="card-custom h-100 shadow border-0 rounded-0 d-flex flex-column">
-                    <div class="card-body p-4">
-                        <div class="d-flex align-items-center">
-                            <div class="icon">
-                                {% for icon in client.icons %}
-                                <img {% if icon.invert %}class="invert"{% endif %} src="{{ icon.src }}" alt="{{ icon.alt }}"/>
-                                {% endfor %}
-                            </div>
-                            <div class="ms-3">
-                                <h5 class="fw-bolder mb-0">
-                                    <a href="{{ client.github }}" target="_blank" class="text-decoration-none project-card-link crowdin-ignore">
-                                        {{ client.name }}
-                                    </a>
-                                </h5>
-                            </div>
-                            <div class="ms-auto">
-                                {% if client.type == "official" %}
-                                <span class="badge text-bg-info rounded-pill">Official</span>
-                                {% elsif client.type == "community" %}
-                                <span class="badge text-bg-warning rounded-pill">Community</span>
-                                {% endif %}
-                            </div>
-                        </div>
-                    </div>
-                    {% if client.downloads %}
-                    <div class="card-footer p-3 px-4">
-                        {% for download in client.downloads %}
-                        <div class="{% unless forloop.last %}pb-3{% endunless %}">
-                            {% if download.img_src %}
-                            <a href="{{ download.url }}" target="_blank"{% if download.btn_class %} class="{{ download.btn_class }}"{% endif %}>
-                                <img alt="{{ download.label }}"
-                                     src="{{ download.img_src }}"
-                                     height="{{ download.img_height }}"
-                                     {% if download.img_style %}style="{{ download.img_style }}"{% endif %}/>
-                            </a>
-                            {% else %}
-                            <a href="{{ download.url }}" target="_blank" class="{{ download.btn_class | default: 'btn btn-info' }}">
-                                {% if download.icon_fa %}<i class="{{ download.icon_fa }}"></i>{% endif %}
-                                {{ download.label }}
-                            </a>
-                            {% endif %}
-                        </div>
-                        {% endfor %}
-                    </div>
-                    {% endif %}
-                </div>
-            </div>
-            {% endfor %}
+        <div class="row gx-5" id="clients-container">
+            <!-- Dynamically populated from sunshine.json -->
         </div>
     </div>
 </section>
@@ -245,4 +196,105 @@ <h2 class="fw-bolder mb-0">Download</h2>
         }
       }
     });
+
+  // Fetch clients from app directory
+  fetch('https://app.lizardbyte.dev/app-directory/sunshine.json')
+    .then(response => response.json())
+    .then(data => {
+      const clientsContainer = document.getElementById('clients-container');
+      if (!clientsContainer) return;
+
+      const apps = data.apps || [];
+
+      apps.forEach(app => {
+        let iconsHtml = '';
+
+        // Dynamic generation from JSON icons array
+        if (app.icons && Array.isArray(app.icons)) {
+          app.icons.forEach(icon => {
+            iconsHtml += `<img ${icon.invert ? 'class="invert"' : ''} src="${icon.src}" alt="${icon.alt}"/>`;
+          });
+        }
+
+        const typeBadge = app.official 
+            ? '<span class="badge text-bg-info rounded-pill">Official</span>' 
+            : '<span class="badge text-bg-warning rounded-pill">Community</span>';
+
+        let downloadsHtml = '';
+        
+        // Dynamic generation from JSON downloads array
+        if (app.downloads && Array.isArray(app.downloads)) {
+          app.downloads.forEach((download, index) => {
+            const isLast = index === app.downloads.length - 1;
+            const pbClass = isLast ? '' : ' pb-3';
+            
+            if (download.img) {
+              let styleAttr = '';
+              let heightAttr = '40';
+              if (download.img.includes('play.google.com') || download.img.includes('amazon-appstore') || download.img.includes('fdroid')) {
+                  heightAttr = '60';
+              }
+              if (download.img.includes('amazon-appstore')) {
+                  styleAttr = 'style="padding: 10px;"';
+              }
+              
+              downloadsHtml += `
+                  <div class="${pbClass.trim()}">
+                      <a href="${download.url}" target="_blank">
+                          <img alt="${download.label}"
+                               src="${download.img}"
+                               height="${heightAttr}"
+                               ${styleAttr}/>
+                      </a>
+                  </div>
+              `;
+            } else {
+              let btnClass = 'btn btn-info';
+              let iconHtml = '<i class="fas fa-download"></i> ';
+              if (download.url && download.url.includes('github.com')) {
+                  iconHtml = '<i class="fab fa-github"></i> ';
+              }
+              downloadsHtml += `
+                  <div class="${pbClass.trim()}">
+                      <a href="${download.url}" target="_blank" class="${btnClass}">
+                          ${iconHtml}${download.label}
+                      </a>
+                  </div>
+              `;
+            }
+          });
+        }
+
+        const projectLink = (app.links && app.links.github) || (app.links && app.links.website) || '#';
+
+        const clientHtml = `
+            <div class="col-md-6 col-lg-4 mb-5">
+                <div class="card-custom h-100 shadow border-0 rounded-0 d-flex flex-column">
+                    <div class="card-body p-4">
+                        <div class="d-flex align-items-center">
+                            <div class="icon">
+                                ${iconsHtml}
+                            </div>
+                            <div class="ms-3">
+                                <h5 class="fw-bolder mb-0">
+                                    <a href="${projectLink}" target="_blank" class="text-decoration-none project-card-link crowdin-ignore">
+                                        ${app.name}
+                                    </a>
+                                </h5>
+                            </div>
+                            <div class="ms-auto">
+                                ${typeBadge}
+                            </div>
+                        </div>
+                    </div>
+                    ${downloadsHtml ? \`
+                    <div class="card-footer p-3 px-4">
+                        \${downloadsHtml}
+                    </div>\` : ''}
+                </div>
+            </div>
+        `;
+        clientsContainer.innerHTML += clientHtml;
+      });
+    });
 </script>

From 0de96ddbf25d29d6538a86cb762306859e6fd018 Mon Sep 17 00:00:00 2001
From: Eduardo Mozart de Oliveira
 <2974895+eduardomozart@users.noreply.github.com>
Date: Sun, 5 Jul 2026 13:46:30 -0300
Subject: [PATCH 2/3] Delete gh-pages-template/_data/clients.yml

---
 gh-pages-template/_data/clients.yml | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 gh-pages-template/_data/clients.yml

diff --git a/gh-pages-template/_data/clients.yml b/gh-pages-template/_data/clients.yml
deleted file mode 100644
index 8b137891791..00000000000
--- a/gh-pages-template/_data/clients.yml
+++ /dev/null
@@ -1 +0,0 @@
-

From 390b4feb445d06513be3db7846a4f8d972aa46b9 Mon Sep 17 00:00:00 2001
From: E <2974895+eduardomozart@users.noreply.github.com>
Date: Sun, 5 Jul 2026 14:55:13 -0300
Subject: [PATCH 3/3] Update featured apps UI to use download images from
 sunshine.json

---
 src_assets/common/assets/web/featured.html | 56 ++++++++++++++++++----
 1 file changed, 47 insertions(+), 9 deletions(-)

diff --git a/src_assets/common/assets/web/featured.html b/src_assets/common/assets/web/featured.html
index 5f2c67259c5..737c6cbf10b 100644
--- a/src_assets/common/assets/web/featured.html
+++ b/src_assets/common/assets/web/featured.html
@@ -134,15 +134,39 @@ <h5 class="card-title mb-1">{{ app.name }}</h5>
 
             <!-- Action Buttons -->
             <div class="d-flex gap-2 flex-wrap">
-              <a
-                v-if="app.links && app.links.download"
-                :href="app.links.download"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="btn btn-primary btn-sm flex-fill">
-                <arrow-down-circle :size="16" class="icon"></arrow-down-circle>
-                {{ $t('featured.get') }}
-              </a>
+              <template v-if="app.downloads && app.downloads.length > 0">
+                <a
+                  v-for="(download, index) in app.downloads"
+                  :key="index"
+                  :href="download.url"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  :class="download.img ? 'flex-fill text-center d-inline-flex align-items-center justify-content-center' : 'btn btn-primary btn-sm flex-fill'">
+                  
+                  <img v-if="download.img" 
+                       :src="download.img" 
+                       :alt="download.label" 
+                       :height="getDownloadHeight(download.img)"
+                       :style="getDownloadStyle(download.img)" />
+                       
+                  <template v-else>
+                    <simple-icon v-if="download.url && download.url.includes('github.com')" icon="GitHub" :size="16" class="icon"></simple-icon>
+                    <arrow-down-circle v-else :size="16" class="icon"></arrow-down-circle>
+                    {{ download.label }}
+                  </template>
+                </a>
+              </template>
+              <template v-else>
+                <a
+                  v-if="app.links && app.links.download"
+                  :href="app.links.download"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="btn btn-primary btn-sm flex-fill">
+                  <arrow-down-circle :size="16" class="icon"></arrow-down-circle>
+                  {{ $t('featured.get') }}
+                </a>
+              </template>
               <a
                 v-if="app.links && app.links.documentation"
                 :href="app.links.documentation"
@@ -438,6 +462,20 @@ <h5 class="card-title mb-1">{{ app.name }}</h5>
         const relative = formatDistanceToNow(date, { addSuffix: true });
 
         return { relative, absolute };
+      },
+      getDownloadHeight(img) {
+        if (!img) return '40';
+        if (img.includes('play.google.com') || img.includes('amazon-appstore') || img.includes('fdroid')) {
+            return '60';
+        }
+        return '40';
+      },
+      getDownloadStyle(img) {
+        if (!img) return '';
+        if (img.includes('amazon-appstore')) {
+            return 'padding: 10px;';
+        }
+        return '';
       }
     },
   });