feat(SPA): screens for Sites and Authors

web/src/components/AuthorAvatar.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { initialsOf } from '@/lib/directory'
+
+const TONES = ['bg-(--rc-sand)', 'bg-(--ui-bg-accented)', 'bg-(--ui-bg-elevated)'] as const
+
+const props = withDefaults(
+	defineProps<{
+		name: string
+		size?: number
+		ring?: boolean
+	}>(),
+	{ size: 32, ring: false },
+)
+
+const tone = computed(() => TONES[props.name.length % TONES.length])
+const fontSize = computed(() => `${Math.round(props.size * 0.36)}px`)
+</script>
+
+<template>
+	<UAvatar
+		:alt="name"
+		:text="initialsOf(name)"
+		aria-hidden="true"
+		:style="{ width: `${size}px`, height: `${size}px`, fontSize }"
+		:class="[tone, ring ? 'border-2 border-(--ui-bg)' : 'border border-default']"
+		:ui="{
+			root: 'shrink-0 rounded-none text-highlighted',
+			fallback: 'font-semibold leading-none text-highlighted',
+		}"
+	/>
+</template>