110 lines
1.9 KiB
Vue
110 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<ul class="socials nolist">
|
||
|
|
<li
|
||
|
|
v-for="social in socials"
|
||
|
|
:key="`social-${rev.id}-${index}-${social.id}`"
|
||
|
|
class="delta-item"
|
||
|
|
:class="{ modified: social.modified }"
|
||
|
|
>
|
||
|
|
<a
|
||
|
|
:href="getUrl(social)"
|
||
|
|
target="_blank"
|
||
|
|
class="link"
|
||
|
|
>
|
||
|
|
<Icon
|
||
|
|
v-if="social.platform && env.socials.urls[social.platform]"
|
||
|
|
:icon="iconMap[social.platform] || social.platform"
|
||
|
|
:title="social.platform"
|
||
|
|
:class="`icon-social icon-${social.platform}`"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Icon
|
||
|
|
v-else-if="social.platform"
|
||
|
|
icon="bubbles10"
|
||
|
|
:title="social.platform"
|
||
|
|
:class="`icon-social icon-${social.platform} icon-generic`"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Icon
|
||
|
|
v-else-if="social.url"
|
||
|
|
icon="sphere"
|
||
|
|
:title="social.platform"
|
||
|
|
:class="`icon-social icon-${social.platform} icon-generic`"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{{ social.handle || social.url }}
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { inject } from 'vue';
|
||
|
|
|
||
|
|
import formatTemplate from 'template-format';
|
||
|
|
|
||
|
|
const pageContext = inject('pageContext');
|
||
|
|
const { env } = pageContext;
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
rev: {
|
||
|
|
type: Object,
|
||
|
|
default: null,
|
||
|
|
},
|
||
|
|
index: {
|
||
|
|
type: Number,
|
||
|
|
default: null,
|
||
|
|
},
|
||
|
|
socials: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const iconMap = {
|
||
|
|
twitter: 'twitter-x',
|
||
|
|
};
|
||
|
|
|
||
|
|
function getUrl(social) {
|
||
|
|
if (social.url) {
|
||
|
|
return social.url;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (env.socials.urls[social.platform]) {
|
||
|
|
return formatTemplate(env.socials.urls[social.platform], { handle: social.handle });
|
||
|
|
}
|
||
|
|
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.socials {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: .5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.delta-item .link {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: .25rem .5rem;
|
||
|
|
border-radius: .25rem;
|
||
|
|
box-shadow: 0 0 3px var(--shadow-weak-20);
|
||
|
|
color: inherit;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
margin-right: .5rem;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-generic {
|
||
|
|
fill: var(--glass-strong-10);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.delta-item.modified {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
</style>
|