Added socials.

components/actors/bio.vue

@@ -294,6 +294,44 @@
 				>{{ actor.agency }}</span>
 			</li>
 
+			<div class="bio-item bio-socials hideable">
+				<ul class="socials">
+					<a
+						v-for="social in socials"
+						:key="`social-${social.id}`"
+						:href="getSocialUrl(social)"
+						target="_blank"
+						rel="noopener"
+						:title="social.platform || social.url"
+						class="social ellipsis"
+					>
+						<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`"
+						/>
+
+						<template v-if="social.platform">{{ env.socials.prefix[social.platform] || env.socials.prefix.default }}</template>
+						{{ social.handle }}
+					</a>
+				</ul>
+			</div>
+
 			<li class="bio-item updated">
 				<span
 					class="ellipsis"
@@ -372,6 +410,7 @@
 
 <script setup>
 import { ref, inject } from 'vue';
+import formatTemplate from 'template-format';
 
 import getPath from '#/src/get-path.js';
 import { formatDate } from '#/utils/format.js';
@@ -379,7 +418,7 @@ import { formatDate } from '#/utils/format.js';
 const expanded = ref(false);
 
 const pageContext = inject('pageContext');
-const user = pageContext.user;
+const { user, env } = pageContext;
 
 const props = defineProps({
 	actor: {
@@ -388,6 +427,10 @@ const props = defineProps({
 	},
 });
 
+const iconMap = {
+	twitter: 'twitter-x',
+};
+
 // if the profile is empty, the expand button overlaps the header
 const showExpand = [
 	'age',
@@ -429,6 +472,25 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
 		text: profile.description,
 		entity: profile.entity,
 	}])));
+
+function getSocialUrl(social) {
+	if (social.url) {
+		return social.url;
+	}
+
+	if (pageContext.env.socials.urls[social.platform]) {
+		return formatTemplate(pageContext.env.socials.urls[social.platform], { handle: social.handle });
+	}
+
+	return null;
+}
+
+const socials = props.actor.socials.map((social) => ({
+	...social,
+	handle: social.url
+		? new URL(social.url).hostname
+		: social.handle,
+}));
 </script>
 
 <style>
@@ -653,6 +715,49 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
 	}
 }
 
+.bio-socials {
+	display: block;
+}
+
+.socials {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+	grid-gap: 0 0;
+	overflow: hidden;
+	gap: .25rem;
+	padding: 0;
+}
+
+.social {
+	display: flex;
+	height: 2rem;
+	align-items: center;
+	padding: .1rem .5rem;
+	border-radius: .25rem;
+	color: inherit;
+	text-decoration: none;
+	font-size: .9rem;
+	font-weight: normal;
+	background: var(--highlight-weak-40);
+
+	.icon {
+		margin-right: .5rem;
+	}
+
+	.icon-generic {
+		fill: var(--highlight);
+	}
+
+	&:hover {
+		color: var(--primary);
+		cursor: pointer;
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+}
+
 .actor-actions {
 	display: flex;
 	flex-shrink: 0;