feat: github raw icon url

This commit is contained in:
Alex
2023-01-24 20:04:43 +00:00
parent 23bfc119d9
commit 077aa4445a

View File

@@ -1,25 +1,20 @@
<script lang="ts"> <script lang="ts">
export let type: string; export let type: string;
export let isAbsolute = false; export let isAbsolute = false;
let githubRawIconUrl =
'https://raw.githubusercontent.com/coollabsio/coolify-community-templates/main/services/icons';
let fallback = '/icons/default.png'; let fallback = '/icons/default.png';
const handleError = (ev: { target: { src: string } }) => (ev.target.src = fallback); let useFallback: boolean = false;
let extension = 'png';
let svgs = [ const handleError = (ev: { target: { src: string } }) => {
'mattermost', if (useFallback) {
'directus', ev.target.src = fallback;
'pocketbase', } else {
'gitea', ev.target.src = `${githubRawIconUrl}/${name}.svg`;
'languagetool', useFallback = true;
'meilisearch', }
'n8n', };
'glitchtip',
'searxng',
'umami',
'uptimekuma',
'vaultwarden',
'weblate',
'wordpress'
];
const name: any = const name: any =
type && type &&
@@ -29,32 +24,15 @@
.split('-')[0] .split('-')[0]
.toLowerCase(); .toLowerCase();
if (svgs.includes(name)) {
extension = 'svg';
}
function generateClass() { function generateClass() {
switch (name) {
case 'n8n':
if (isAbsolute) {
return 'w-12 h-12 absolute -m-9 -mt-12';
}
return 'w-12 h-12 -mt-3';
case 'weblate':
if (isAbsolute) {
return 'w-12 h-12 absolute -m-9 -mt-12';
}
return 'w-12 h-12 -mt-3';
default:
return isAbsolute ? 'w-10 h-10 absolute -m-4 -mt-9 left-0' : 'w-10 h-10'; return isAbsolute ? 'w-10 h-10 absolute -m-4 -mt-9 left-0' : 'w-10 h-10';
} }
}
</script> </script>
{#if name} {#if name}
<img <img
class={generateClass()} class={generateClass()}
src={`/icons/${name}.${extension}`} src={`${githubRawIconUrl}/${name}.png`}
on:error={handleError} on:error={handleError}
alt={`Icon of ${name}`} alt={`Icon of ${name}`}
/> />