docs: 運営者情報ページの各ユーザ情報の表示を変更

src/components/content/ContentUser.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { siDiscord, siTwitter } from 'simple-icons'
+
+const props = withDefaults(
+  defineProps<{
+    /** ユーザの名前を指定します */
+    name: string
+    /** アイコン画像を指定します */
+    icon: string
+    /** Minecraftのアカウントを指定します */
+    minecraft: string
+    /** Discordのアカウントを指定します */
+    discord: {
+      username: string
+      url: string
+    }
+    /** Twitterのアカウントを指定します */
+    twitter?: string
+  }>(),
+  {
+    twitter: undefined,
+  }
+)
+</script>
+
+<template>
+  <div
+    class="mb-3 flex items-center gap-4 rounded-lg border border-gray-100 p-6"
+  >
+    <div
+      class="not-prose aspect-square w-20 shrink-0 overflow-hidden rounded-xl bg-gray-100"
+    >
+      <img :src="props.icon" alt="icon" class="h-full w-full object-cover" />
+    </div>
+    <div class="grid grow gap-2">
+      <div class="grid gap-2 pl-2">
+        <div class="flex flex-wrap items-center gap-x-2">
+          <div
+            :to="`https://users.jaoafa.com/${props.minecraft}`"
+            class="text-xl font-bold text-current"
+          >
+            {{ props.name }}
+          </div>
+          <NuxtLink
+            :to="`https://users.jaoafa.com/${props.minecraft}`"
+            class="translate-y-px font-accent text-xs text-gray-500"
+          >
+            Minecraft: {{ props.minecraft }}
+          </NuxtLink>
+        </div>
+
+        <div
+          class="flex flex-wrap items-center gap-x-3 gap-y-1 font-accent text-xs"
+        >
+          <div class="flex items-center gap-2">
+            <AppIcon size="16px">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path :d="siDiscord.path" />
+              </svg>
+            </AppIcon>
+            <NuxtLink :to="props.discord.url">
+              {{ props.discord.username }}
+            </NuxtLink>
+          </div>
+          <div v-if="props.twitter" class="flex items-center gap-2">
+            <AppIcon size="16px">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path :d="siTwitter.path" />
+              </svg>
+            </AppIcon>
+            <NuxtLink :to="`https://twitter.com/${props.twitter}`">
+              {{ props.twitter }}
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+      <div class="text-xs">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

src/content/4.support/3.profiles.md

@@ -12,23 +12,126 @@ created: null
 
 ## Admin
 
-当サーバの総合的な管理業務を担います。
+::content-user
+---
+name: じゃり
+icon: https://crafatar.com/avatars/5799296a-d1ec-4252-93bd-440bb9caa65c?overlay=true
+minecraft: X4Z
+discord:
+  username: za96
+  url: https://discord.com/users/206692134991036416
+twitter: XYZ4096
+---
+- 管理者
+- サーバ全体の管理指揮を担当
+::
+
+::content-user
+---
+name: ひらたけ
+icon: https://crafatar.com/avatars/39cf878b-ef0b-44fc-a2c6-de3d540a4728?overlay=true
+minecraft: Hirotaisou2012
+discord:
+  username: hiratake
+  url: https://discord.com/users/221498004505362433
+twitter: Hirotaisou2012
+---
+- 副管理者
+- 主に Web サイト・システムのデザインや実装などを担当
+::
+
+::content-user
+---
+name: Tomachi
+icon: https://crafatar.com/avatars/32ff7cdc-a1b4-450a-aa7e-6af75fe8c37c?overlay=true
+minecraft: mine_book000
+discord:
+  username: tomachi
+  url: https://discord.com/users/221991565567066112
+twitter: book000
+---
+- Web サイト、Minecraft サーバ、Discord サーバなどの全般管理・運用
+- プラグインや Bot の開発・管理・運用
+::
 
-|スキン|名前|MinecraftID|TwitterID|DiscordID|役割|
-|:-|:-|:-|:-|:-|:-|
-|![X4Z](https://storage.jaoafa.com/67cd820a7b65f917c5f551ae5273bb5a.png)|Zakuro|X4Z|[@XYZ4096](https://twitter.com/XYZ4096)|[za96](https://discord.com/users/206692134991036416)|サーバ管理者,<br>サーバ全体管理指揮|
-|![Hirotaisou2012](https://storage.jaoafa.com/b7e612706c25b7bb967dc6faa7ab63ce.png)|Hiratake|Hirotaisou2012|[@Hirotaisou2012](https://twitter.com/hirotaisou2012)|[hiratake](https://discord.com/users/221498004505362433)|サーバ副管理者,<br>Webサイトデザイン,<br>システム管理運用|
-|![mine_book000](https://storage.jaoafa.com/ef4563b6e3235a68c2fd8c7a0f37e9c7.png)|Tomachi|mine_book000|[@book000](https://twitter.com/book000)|[tomachi](https://discord.com/users/221991565567066112)|Webサイト全般管理運用,<br>システム管理運用,<br>プラグイン制作管理,<br>Discord管理,<br>コミュニティ保全管理|
-|![X9Z](https://storage.jaoafa.com/224daa04ffa77231bb22b13bbbd15be3.png)|Omelet|X9Z|[@_O602](https://twitter.com/_O602)|[0me1et](https://discord.com/users/222337959087702016)|お問い合わせ対応,<br>交通系管理運用|
+::content-user
+---
+name: オムレツ
+icon: https://crafatar.com/avatars/7008531a-539b-4dfc-8b81-7b267d18dd0a?overlay=true
+minecraft: X9Z
+discord:
+  username: 0me1et
+  url: https://discord.com/users/222337959087702016
+twitter: _O602
+---
+- お問い合わせ対応、コミュニティ保全管理
+::
 
 ## Moderator
 
-Admin を補佐する役割を担います。
+::content-user
+---
+name: コホナ
+icon: https://crafatar.com/avatars/26728d53-add7-46d1-97c3-0a25bc6607f5?overlay=true
+minecraft: kohonayoshi
+discord:
+  username: kohonayoshi
+  url: https://discord.com/users/315726390844719114
+twitter: kohona_poke
+---
+- 鯖落とし
+::
 
-|スキン|名前|MinecraftID|TwitterID|DiscordID|役割|
-|:-|:-|:-|:-|:-|:-|
-|![kohonayoshi](https://storage.jaoafa.com/d3c6d204dd7fea3d5efb77d4dc848e8b.png)|Kohona|kohonayoshi|[@kohona_poke](https://twitter.com/kohona_poke)|[kohonayoshi](https://discord.com/users/315726390844719114)|鯖落とし,<br>開発の補助,<br>交通系管理の補助|
-|![MinHero_exp](https://storage.jaoafa.com/fb68e673c41ce79f66bd5b930f8be5d5.png)|EKipa|MinHero_exp|[@minhero_exp](https://twitter.com/minhero_exp)|[minhero_exp](https://discord.com/users/310570792691826688)|中央市の管理,<br>コミュニティ管理,<br>荒らし対応,<br>Webサイト編集|
-|![Ekusas83](https://storage.jaoafa.com/b7e612706c25b7bb967dc6faa7ab63ce.png)|Ekusas|Ekusas83|[@ekusas55000](https://twitter.com/ekusas55000)|[ekusas83](https://discord.com/users/189377054955798528)|コミュニティ管理,<br>開発補助,<br>サスケ・ディナー|
-|![X5Z](https://storage.jaoafa.com/56f1b4514b6bcf5e98a58a18c2d2c27e.png)|Zozokasu|X5Z|[@Zozokasu](https://twitter.com/Zozokasu)|[zozokasu](https://discord.com/users/189372008147058688)|コミュニティ管理,<br>開発補助|
-|![yuuaHP](https://crafatar.com/avatars/13976d72-1389-4332-818e-9cecad363b12?size=96)|ゆうあ|yuuaHP|[@yuuaHP_dev](https://twitter.com/yuuaHP_dev)|[yuua](https://discord.com/users/492088741167366144)|プラグイン開発,<br>システム開発,<br>メンテナー|
+::content-user
+---
+name: えきぱ
+icon: https://crafatar.com/avatars/0ad34a33-3ca4-4c86-84f3-a4591920b06a?overlay=true
+minecraft: MinHero_exp
+discord:
+  username: minhero_exp
+  url: https://discord.com/users/310570792691826688
+twitter: minhero_exp
+---
+- 中央市の管理、荒らし対応
+- Web サイト編集
+::
+
+::content-user
+---
+name: えくさす
+icon: https://crafatar.com/avatars/22ab15d6-2e88-4fdd-91c0-e459f0f804f8?overlay=true
+minecraft: Ekusas83
+discord:
+  username: ekusas83
+  url: https://discord.com/users/189377054955798528
+twitter: ekusas55000
+---
+- サスケ・ディナー
+- 運営業務の補助
+::
+
+::content-user
+---
+name: ゆうあ
+icon: https://crafatar.com/avatars/13976d72-1389-4332-818e-9cecad363b12?overlay=true
+minecraft: yuuaHP
+discord:
+  username: yuua
+  url: https://discord.com/users/492088741167366144
+twitter: yuuadev
+---
+- プラグインや Bot の開発補助・保守
+::
+
+::content-user
+---
+name: ぞぞかす
+icon: https://crafatar.com/avatars/0bdc0219-f3c3-4d73-a4df-1d8bd088f419?overlay=true
+minecraft: X5Z
+discord:
+  username: zozokasu
+  url: https://discord.com/users/189372008147058688
+twitter: Zozokasu
+---
+- 運営業務の補助
+::