From c58fd6d8c66edc3427d813091e38a8783cc11def Mon Sep 17 00:00:00 2001 From: Eduardo Mozart de Oliveira <2974895+eduardomozart@users.noreply.github.com> Date: Thu, 23 Jul 2026 21:56:19 -0300 Subject: [PATCH] refactor: clients section to dynamically fetch from app-directory (#5380) --- gh-pages-template/_data/clients.yml | 180 --------------------- gh-pages-template/index.html | 160 ++++++++++++------ src_assets/common/assets/web/featured.html | 76 +++++++-- 3 files changed, 172 insertions(+), 244 deletions(-) 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 187793bfd..000000000 --- a/gh-pages-template/_data/clients.yml +++ /dev/null @@ -1,180 +0,0 @@ ---- -- 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 3c9dd9955..414a8a3a5 100644 --- a/gh-pages-template/index.html +++ b/gh-pages-template/index.html @@ -59,57 +59,8 @@ cover-img:

Clients

-
- {% for client in site.data.clients %} -
-
-
-
-
- {% for icon in client.icons %} - {{ icon.alt }} - {% endfor %} -
-
-
- - {{ client.name }} - -
-
-
- {% if client.type == "official" %} - Official - {% elsif client.type == "community" %} - Community - {% endif %} -
-
-
- {% if client.downloads %} -
- {% for download in client.downloads %} -
- {% if download.img_src %} - - {{ download.label }} - - {% else %} - - {% if download.icon_fa %}{% endif %} - {{ download.label }} - - {% endif %} -
- {% endfor %} -
- {% endif %} -
-
- {% endfor %} +
+
@@ -245,4 +196,111 @@ cover-img: } } }); + + // 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 += `${icon.alt}`; + }); + } + + const typeBadge = app.official + ? 'Official' + : 'Community'; + + 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'; + let imgHost = ''; + try { imgHost = new URL(download.img).hostname; } catch (e) {} + + if (imgHost === 'play.google.com' || imgHost.endsWith('.ssl-images-amazon.com') || imgHost === 'fdroid.gitlab.io') { + heightAttr = '60'; + } + if (imgHost.endsWith('.ssl-images-amazon.com')) { + styleAttr = 'style="padding: 10px;"'; + } + + downloadsHtml += ` +
+ + ${download.label} + +
+ `; + } else { + let btnClass = 'btn btn-info'; + let iconHtml = ' '; + let urlHost = ''; + try { urlHost = new URL(download.url).hostname; } catch (e) {} + + if (urlHost === 'github.com') { + iconHtml = ' '; + } + downloadsHtml += ` +
+ + ${iconHtml}${download.label} + +
+ `; + } + }); + } + + const projectLink = (app.links && app.links.github) || (app.links && app.links.website) || '#'; + + const clientHtml = ` +
+
+
+
+
+ ${iconsHtml} +
+
+
+ + ${app.name} + +
+
+
+ ${typeBadge} +
+
+
+ ${downloadsHtml ? ` +
+ ${downloadsHtml} +
` : ''} +
+
+ `; + clientsContainer.innerHTML += clientHtml; + }); + }); diff --git a/src_assets/common/assets/web/featured.html b/src_assets/common/assets/web/featured.html index 5f2c67259..c92780596 100644 --- a/src_assets/common/assets/web/featured.html +++ b/src_assets/common/assets/web/featured.html @@ -133,22 +133,46 @@ -
- - - {{ $t('featured.get') }} - +
+ + {{ $t('featured.docs') }} @@ -158,7 +182,7 @@ :href="app.links.website" target="_blank" rel="noopener noreferrer" - class="btn btn-outline-secondary btn-sm" + class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center justify-content-center" :title="$t('featured.website')"> @@ -167,7 +191,7 @@ :href="app.links.github" target="_blank" rel="noopener noreferrer" - class="btn btn-outline-secondary btn-sm" + class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center justify-content-center" :title="$t('featured.github')"> @@ -438,6 +462,32 @@ const relative = formatDistanceToNow(date, { addSuffix: true }); return { relative, absolute }; + }, + getDownloadHeight(img) { + if (!img) return '40'; + let imgHost = ''; + try { imgHost = new URL(img).hostname; } catch (e) {} + if (imgHost === 'play.google.com' || imgHost.endsWith('.ssl-images-amazon.com') || imgHost === 'fdroid.gitlab.io') { + return '60'; + } + return '40'; + }, + getDownloadStyle(img) { + if (!img) return ''; + let imgHost = ''; + try { imgHost = new URL(img).hostname; } catch (e) {} + if (imgHost.endsWith('.ssl-images-amazon.com')) { + return 'padding: 10px;'; + } + return ''; + }, + isGithubUrl(url) { + if (!url) return false; + try { + return new URL(url).hostname === 'github.com'; + } catch (e) { + return false; + } } }, });