Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merge: Show instance sponsors if OC is set as donation url (!642)

Browse source 
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/642

Approved-by: Hazelnoot <acomputerdog@gmail.com>
Approved-by: Julia <julia@insertdomain.name>
This commit is contained in:
Marie 2024-10-08 18:07:58 +00:00
commit 72a0f16b38
6 changed files with 165 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

53
packages/frontend/src/pages/about.overview.vue
View file

@ -116,6 +116,22 @@ SPDX-License-Identifier: AGPL-3.0-only
</FormSection>
</FormSuspense>
<FormSection v-if="sponsors[0].length > 0">
<template #label>Our lovely Sponsors</template>
<div :class="$style.contributors">
<span
v-for="sponsor in sponsors[0]"
:key="sponsor"
style="margin-bottom: 0.5rem;"
>
<a :href="sponsor.website || sponsor.profile" target="_blank" :class="$style.contributor">
<img :src="sponsor.image || `https://ui-avatars.com/api/?background=0D8ABC&color=fff&name=${sponsor.name}`" :class="$style.contributorAvatar">
<span :class="$style.contributorUsername">{{ sponsor.name }}</span>
</a>
</span>
</div>
</FormSection>
<FormSection>
<template #label>Well-known resources</template>
<div class="_gaps_s">
@ -130,6 +146,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import sanitizeHtml from '@/scripts/sanitize-html.js';
import { host, version } from '@/config.js';
import { i18n } from '@/i18n.js';
@ -144,7 +161,10 @@ import MkFolder from '@/components/MkFolder.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
import MkLink from '@/components/MkLink.vue';
const sponsors = ref([]);
const initStats = () => misskeyApi('stats', {});
await misskeyApi('sponsors', { instance: true }).then((res) => sponsors.value.push(res.sponsor_data));
</script>
<style lang="scss" module>
@ -207,4 +227,37 @@ const initStats = () => misskeyApi('stats', {});
.ruleText {
padding-top: 6px;
}
.contributors {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 12px;
}
.contributor {
display: flex;
align-items: center;
padding: 12px;
background: var(--buttonBg);
border-radius: var(--radius-sm);
&:hover {
text-decoration: none;
background: var(--buttonHoverBg);
}
&.active {
color: var(--accent);
background: var(--buttonHoverBg);
}
}
.contributorAvatar {
width: 30px;
border-radius: var(--radius-full);
}
.contributorUsername {
margin-left: 12px;
}
</style>