From 25eb0a0c682ae067a6ae61523e7da32a7c17d588 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 27 Aug 2024 13:24:26 +0900
Subject: [PATCH] Create EmMention.vue
---
.../src/components/EmMention.vue | 58 +++++++++++++++++++
1 file changed, 58 insertions(+)
create mode 100644 packages/frontend-embed/src/components/EmMention.vue
diff --git a/packages/frontend-embed/src/components/EmMention.vue b/packages/frontend-embed/src/components/EmMention.vue
new file mode 100644
index 0000000000..521afad332
--- /dev/null
+++ b/packages/frontend-embed/src/components/EmMention.vue
@@ -0,0 +1,58 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkA v-user-preview="canonical" :class="[$style.root]" :to="url" :style="{ background: bgCss }">
+ <img :class="$style.icon" :src="avatarUrl" alt="">
+ <span>
+ <span>@{{ username }}</span>
+ <span v-if="(host != localHost)" :class="$style.host">@{{ toUnicode(host) }}</span>
+ </span>
+</MkA>
+</template>
+
+<script lang="ts" setup>
+import { toUnicode } from 'punycode';
+import { } from 'vue';
+import tinycolor from 'tinycolor2';
+import { host as localHost } from '@/config.js';
+
+const props = defineProps<{
+ username: string;
+ host: string;
+}>();
+
+const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`;
+
+const url = `/${canonical}`;
+
+const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--mention'));
+bg.setAlpha(0.1);
+const bgCss = bg.toRgbString();
+
+const avatarUrl = `/avatar/@${props.username}@${props.host}`;
+</script>
+
+<style lang="scss" module>
+.root {
+ display: inline-block;
+ padding: 4px 8px 4px 4px;
+ border-radius: 999px;
+ color: var(--mention);
+}
+
+.icon {
+ width: 1.5em;
+ height: 1.5em;
+ object-fit: cover;
+ margin: 0 0.2em 0 0;
+ vertical-align: bottom;
+ border-radius: 100%;
+}
+
+.host {
+ opacity: 0.5;
+}
+</style>