enhance(frontend): サーバー情報ページでサーバールールを見れるように

1 files changed, 61 insertions, 21 deletions

diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index 1ca5ba6ca7..8e29990426 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -3,10 +3,10 @@
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer v-if="tab === 'overview'" :content-max="600" :margin-min="20">
 		<div class="_gaps_m">
-			<div class="fwhjspax" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
-				<div class="content">
-					<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" class="icon"/>
-					<div class="name">
+			<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
+				<div style="overflow: clip;">
+					<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
+					<div :class="$style.bannerName">
 						<b>{{ instance.name ?? host }}</b>
 					</div>
 				</div>
@@ -41,6 +41,13 @@
 							<template #value>{{ instance.maintainerEmail }}</template>
 						</MkKeyValue>
 					</FormSplit>
+					<MkFolder v-if="instance.serverRules.length > 0">
+						<template #label>{{ i18n.ts.serverRules }}</template>
+
+						<ol class="_gaps_s" :class="$style.rules">
+							<li v-for="item in instance.serverRules" :class="$style.rule"><div :class="$style.ruleText" v-html="item"></div></li>
+						</ol>
+					</MkFolder>
 					<FormLink v-if="instance.tosUrl" :to="instance.tosUrl" external>{{ i18n.ts.termsOfService }}</FormLink>
 				</div>
 			</FormSection>
@@ -94,6 +101,7 @@ import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import FormSplit from '@/components/form/split.vue';
+import MkFolder from '@/components/MkFolder.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkInstanceStats from '@/components/MkInstanceStats.vue';
 import * as os from '@/os';
@@ -148,31 +156,63 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss" scoped>
-.fwhjspax {
+<style lang="scss" module>
+.banner {
 	text-align: center;
 	border-radius: 10px;
 	overflow: clip;
 	background-size: cover;
 	background-position: center center;
+}
 
-	> .content {
-		overflow: hidden;
+.bannerIcon {
+	display: block;
+	margin: 16px auto 0 auto;
+	height: 64px;
+	border-radius: 8px;
+}
 
-		> .icon {
-			display: block;
-			margin: 16px auto 0 auto;
-			height: 64px;
-			border-radius: 8px;
-		}
+.bannerName {
+	display: block;
+	padding: 16px;
+	color: #fff;
+	text-shadow: 0 0 8px #000;
+	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+}
 
-		> .name {
-			display: block;
-			padding: 16px;
-			color: #fff;
-			text-shadow: 0 0 8px #000;
-			background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
-		}
+.rules {
+	counter-reset: item;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.rule {
+	display: flex;
+	gap: 8px;
+	word-break: break-word;
+
+	&::before {
+		flex-shrink: 0;
+		display: flex;
+		position: sticky;
+		top: calc(var(--stickyTop, 0px) + 8px);
+		counter-increment: item;
+		content: counter(item);
+		width: 32px;
+		height: 32px;
+		line-height: 32px;
+		background-color: var(--accentedBg);
+		color: var(--accent);
+		font-size: 13px;
+		font-weight: bold;
+		align-items: center;
+		justify-content: center;
+		border-radius: 999px;
 	}
 }
+
+.ruleText {
+	padding-top: 6px;
+}
 </style>