refactor: clients section to dynamically fetch from app-directory (#5380)

This commit is contained in:
Eduardo Mozart de Oliveira
2026-07-23 21:56:19 -03:00
committed by GitHub
parent c6bef3397d
commit c58fd6d8c6
3 changed files with 172 additions and 244 deletions
+63 -13
View File
@@ -133,22 +133,46 @@
</div>
<!-- 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>
<div class="d-flex gap-2 flex-wrap align-items-center">
<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 d-inline-flex align-items-center justify-content-center gap-1'">
<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="isGithubUrl(download.url)" 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 d-inline-flex align-items-center justify-content-center gap-1">
<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"
target="_blank"
rel="noopener noreferrer"
class="btn btn-outline-primary btn-sm"
class="btn btn-outline-primary btn-sm d-inline-flex align-items-center justify-content-center gap-1"
:title="$t('featured.documentation')">
<external-link :size="16" class="icon"></external-link>
{{ $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')">
<external-link :size="16" class="icon"></external-link>
</a>
@@ -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')">
<simple-icon icon="GitHub" :size="16" class="icon"></simple-icon>
</a>
@@ -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;
}
}
},
});