Skip to content

refactor: clients section to dynamically fetch from sunshine.json #5380

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eduardomozart wants to merge 3 commits into
base: master
Choose a base branch
from
+150 −240
Open

refactor: clients section to dynamically fetch from sunshine.json #5380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a1bed94
Refactor clients section to dynamically fetch from sunshine.json
eduardomozart Jul 5, 2026
0de96dd
Delete gh-pages-template/_data/clients.yml
eduardomozart Jul 5, 2026
390b4fe
Update featured apps UI to use download images from sunshine.json
eduardomozart Jul 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
180 changes: 0 additions & 180 deletions gh-pages-template/_data/clients.yml
View file
Open in desktop

This file was deleted.

154 changes: 103 additions & 51 deletions gh-pages-template/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Loading