add contact info

packages/client/src/components/MkKeyValue.vue

@@ -4,7 +4,11 @@
 			<slot name="key"></slot>
 		</div>
 		<div class="value">
-			<slot name="value"></slot>
+			<Mfm
+				v-if="text"
+				:text="text"
+			></Mfm>
+			<slot v-else name="value"></slot>
 			<button
 				v-if="copy"
 				v-tooltip="i18n.ts.copy"
@@ -26,6 +30,7 @@ import { i18n } from "@/i18n";
 
 const props = withDefaults(
 	defineProps<{
+		text?: string;
 		copy?: string | null;
 		oneline?: boolean;
 	}>(),

packages/client/src/components/MkMention.vue

@@ -1,6 +1,18 @@
 <template>
+	<a
+		v-if="to"
+		class="mention"
+		:href="to"
+		rel="noopener"
+		@click.stop
+	>
+		<i class="icon ph-bold ph-large" :class="'ph-' + icon"></i>
+		<span class="main">
+			<slot></slot>
+		</span>
+	</a>
 	<MkA
-		v-if="url.startsWith('/')"
+		v-else-if="url.startsWith('/')"
 		v-user-preview="canonical"
 		class="mention"
 		:class="{ isMe }"
@@ -40,21 +52,25 @@ import { host as localHost } from "@/config";
 import { $i } from "@/account";
 
 const props = defineProps<{
-	username: string;
+	username?: string;
-	host: string;
+	host?: string;
+	to?: string;
+	icon?: string;
 }>();
 
 const canonical =
-	props.host === localHost
+	props.host ?
-		? `@${props.username}`
+		props.host === localHost
-		: `@${props.username}@${toUnicode(props.host)}`;
+			? `@${props.username}`
+			: `@${props.username}@${toUnicode(props.host)}` : null;
 
 const url = `/${canonical}`;
 
 const isMe =
-	$i &&
+	props.username ?
-	`@${props.username}@${toUnicode(props.host)}` ===
+		$i &&
-		`@${$i.username}@${toUnicode(localHost)}`.toLowerCase();
+		`@${props.username}@${toUnicode(props.host)}` ===
+			`@${$i.username}@${toUnicode(localHost)}`.toLowerCase() : null;
 </script>
 
 <style lang="scss" scoped>
@@ -93,6 +109,12 @@ const isMe =
 		border-radius: 100%;
 	}
 
+	> i.icon {
+		vertical-align: middle;
+		font-size: 1.2em;
+		margin-left: .4em;
+	}
+
 	> .main > .host {
 		opacity: 0.5;
 	}

packages/client/src/ui/visitor/kanban.vue

@@ -33,6 +33,7 @@
 						<MkButton
 							primary gradate
 							rounded
+							@click="signup"
 						>
 							<i
 								class="ph-sign-in ph-bold"
@@ -41,6 +42,7 @@
 						</MkButton>
 						<MkButton
 							rounded
+							@click="signin"
 						>
 							<i
 								class="ph-sign-out ph-bold"
@@ -63,6 +65,26 @@
 					</div>
 				</section>
 
+				<FormSection>
+					<div class="_formLinksGrid">
+						<MkKeyValue :text="meta.maintainerName">
+							<template #key>{{
+								i18n.ts.administrator
+							}}</template>
+						</MkKeyValue>
+						<MkKeyValue>
+							<template #key>{{
+								i18n.ts.contact
+							}}</template>
+							<template #value>
+								<MkMention :to="'mailto:' + meta.maintainerEmail" :icon="'envelope'">
+									{{ meta.maintainerEmail }}
+								</MkMention>
+							</template>
+						</MkKeyValue>
+					</div>
+				</FormSection>
+
 				<FormSection>
 					<div class="_formLinksGrid">
 						<FormLink v-if="meta?.tosUrl" :to="meta.tosUrl"
@@ -135,6 +157,11 @@ import FormLink from "@/components/form/link.vue";
 import XShowMoreButton from "@/components/MkShowMoreButton.vue";
 import { i18n } from "@/i18n";
 import { DetailedInstanceMetadata } from "calckey-js/built/entities";
+import XSigninDialog from "@/components/MkSigninDialog.vue";
+import XSignupDialog from "@/components/MkSignupDialog.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import MkMention from "@/components/MkMention.vue";
+
 
 defineProps<{
 	poweredBy?: boolean,
@@ -154,6 +181,27 @@ os.api("meta", { detail: true }).then((res) => {
 	isLong = meta.description && (meta.description.length > 500);
 });
 
+function signin() {
+	os.popup(
+		XSigninDialog,
+		{
+			autoSet: true,
+		},
+		{},
+		"closed"
+	);
+};
+
+function signup() {
+	os.popup(
+		XSignupDialog,
+		{
+			autoSet: true,
+		},
+		{},
+		"closed"
+	);
+};
 
 
 </script>