Added socials.

components/edit/revision-socials.vue

@@ -0,0 +1,109 @@
+<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>&nbsp;
+	</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>