New: configにoriginを追加 / Chg(Performance): /api以外の場合にトークンの認証をバイパス / New: server-infoエンドポイントにiconを追加 / New: setup/initializationでconfigテーブルにLynqChatロゴをiconとして追加する処理 / New: .content-main用の背景色を追加 / Chg: 背景色を変更 / Chg: .left-menuを更新

config/example.yaml

@@ -1,5 +1,10 @@
 # サーバー設定
 server:
+  # Origin
+  # string
+  # 最終的にユーザーがリクエストするOrigin
+  origin: http://lynqchat.example.com
+
   # 配信ポート
   # number
   # 0から65535が使用できます。

packages/backend/src/lib/auth.ts

@@ -14,9 +14,17 @@ const logger = new Logger("Lib | auth");
 
 const Authorization: FastifyPluginCallback = (fastify) => {
   fastify.addHook("onRequest", async (req, res) => {
+    if (!(req.url.startsWith("/api"))) {
+      return req.token = ErrorBase({
+        bad: "client",
+        code: "token_invalid",
+        message: "トークンが不正です。",
+      });
+    }
+
     let token = req.headers["authorization"];
     if (typeof token !== "string") {
-      return ErrorBase({
+      return req.token = ErrorBase({
         bad: "client",
         code: "token_invalid",
         message: "トークンが不正です。",
@@ -24,13 +32,11 @@ const Authorization: FastifyPluginCallback = (fastify) => {
     }
 
     if (!token.startsWith("Bearer ")) {
-      req.token = ErrorBase({
+      return req.token = ErrorBase({
         bad: "client",
         code: "token_invalid",
         message: "トークンが不正です。",
       });
-
-      return;
     }
 
     token = token.replace("Bearer ", "");

packages/backend/src/lib/config.ts

@@ -8,6 +8,7 @@ const logger = new Logger("Lib | config");
 
 const schema = z.object({
   server: z.object({
+    origin: z.string().refine(data => data === new URL(data).origin),
     port: z.number().min(0).max(65535),
     host: z.string().ip(),
     trustProxy: z.union([

packages/backend/src/routes/server-info.ts

@@ -1,3 +1,4 @@
+import config from "@/lib/config";
 import { DatabaseError } from "@/errors";
 import Logger from "@/lib/logger";
 import { ConfigEntity } from "@/modules/entities/Config";
@@ -9,18 +10,20 @@ export default async function ServerInfo(fastify: FastifyInstance) {
 
   fastify.post("/", async (req, res) => {
     try {
-      const config = fastify.orm.em.getRepository(ConfigEntity);
+      const configRepo = fastify.orm.em.getRepository(ConfigEntity);
-      const user = fastify.orm.em.getRepository(UserEntity);
+      const userRepo = fastify.orm.em.getRepository(UserEntity);
-      const configCount = await config.count();
+      const configCount = await configRepo.count();
-      const userCount = await user.count();
+      const userCount = await userRepo.count();
 
-      const serverName = await config.findOne({ name: "name" });
+      const serverName = await configRepo.findOne({ name: "name" });
-      const serverDescription = await config.findOne({ name: "description" });
+      const serverDescription = await configRepo.findOne({ name: "description" });
+      const serverIcon = await configRepo.findOne({ name: "icon" });
 
       return res.send({
         success: true,
         name: serverName?.value ?? null,
         description: serverDescription?.value ?? null,
+        icon: serverIcon?.value ?? `${config.server.origin}/assets/lynqchat.svg`,
         isInitialized: configCount > 0,
         isFirstAdminExists: userCount > 0,
         userCount,

packages/backend/src/routes/setup/initialization.ts

@@ -4,6 +4,7 @@ import { ConfigEntity } from "@/modules/entities/Config";
 import type { FastifyInstance } from "fastify";
 import webpush from "web-push";
 import z from "zod/v3";
+import config from "@/lib/config";
 
 export default function SetupInitialization(fastify: FastifyInstance) {
   const logger = new Logger("Endpoint | setup/initialization");
@@ -48,6 +49,7 @@ export default function SetupInitialization(fastify: FastifyInstance) {
     try {
       const entries = Object.entries(result.data).filter(([key]) => key !== "force");
 
+      entries.push(["icon", `${config.server.origin}/assets/lynqchat.svg`]);
       const vapid = webpush.generateVAPIDKeys();
       entries.push(["VAPID_PUBLIC", vapid.publicKey]);
       entries.push(["VAPID_PRIVATE", vapid.privateKey]);

packages/frontend/src/Layout.vue

@@ -7,10 +7,14 @@
 
   <div class="modals-container" />
 
-  <main class="layout">
+  <main class="layout" v-if="serverInfo.success && account.success">
     <div class="left-menu">
-      <div>
+      <div :class='$route.path === "/" ? "isActive" : ""'>
-        ホーム
+        <img :src="serverInfo.icon" />
+      </div>
+
+      <div :class='$route.path === "/home" ? "isActive" : ""'>
+        <Icon icon="material-symbols:home-rounded" />
       </div>
     </div>
 
@@ -37,10 +41,10 @@
 <style scoped>
 main.layout {
   display: flex;
-  gap: 1rem;
   width: 100dvw;
   height: 100dvh;
-  padding: 1.5rem;
+  padding: 0.5rem;
+  gap: 0.5rem;
   box-sizing: border-box;
 }
 
@@ -48,39 +52,69 @@ main.layout {
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
-  justify-content: center;
+  padding: 0.5rem 0;
-  gap: 1rem;
+  height: 100%;
+  overflow: scroll;
+  gap: 0.5rem;
+  box-sizing: border-box;
   user-select: none;
   -webkit-user-select: none;
 }
 
 .left-menu div {
-  width: 6rem;
+  position: relative;
-  text-align: center;
+  z-index: 0;
-  font-weight: bold;
+  border-radius: 0.5rem;
-  font-size: 1.4rem;
+  width: 3rem;
-  border-radius: 2rem;
+  height: 3rem;
-  padding: 1rem 1.5rem;
+  padding: 0.5rem;
-  transition: background-color 250ms ease-out;
+  transition: background-color 200ms ease-out;
 }
 
-.left-menu div:hover {
+.left-menu div * {
+  font-size: 3rem;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  width: 3rem;
+  height: 3rem;
+  display: block;
+  overflow: hidden;
+  object-fit: contain;
+  box-sizing: border-box;
+}
+
+.left-menu div.isActive::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 0.3rem;
+  transform: translateY(-50%);
+  width: 0.25rem;
+  height: 70%;
+  border-radius: 0.5rem;
+  background-color: var(--text-color);
+}
+
+.left-menu div:hover,
+.left-menu div.isActive {
   background-color: var(--border-color);
 }
 
 .content-main {
   border: 1px solid var(--border-color);
-  border-radius: 1rem;
+  background-color: var(--route-bg-color);
+  border-radius: 0.5rem;
   overflow: hidden;
   flex-grow: 1;
 }
 
 .content-header {
-  padding: 1.25rem 1.5rem;
+  padding: 1rem 1.25rem;
-  font-size: 1.6rem;
+  font-size: 1.3rem;
   font-weight: bold;
-  border-bottom-left-radius: 1rem;
+  border-bottom-left-radius: 0.5rem;
-  border-bottom-right-radius: 1rem;
+  border-bottom-right-radius: 0.5rem;
   border-bottom: 1px solid var(--border-color);
   box-shadow: 0px 1px 10px var(--border-color);
   user-select: none;
@@ -124,8 +158,9 @@ main.layout {
 <script lang="ts" setup>
 import { RouterView, useRouter } from "vue-router";
 import routerStatus from "@/lib/router";
+import { Icon } from "@iconify/vue";
 import Progress from "@/components/Progress.vue";
-import { serverInfo } from "@/lib/account";
+import { account, serverInfo } from "@/lib/account";
 
 const router = useRouter();
 

packages/frontend/src/global.css

@@ -1,8 +1,9 @@
 @import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&display=swap");
 
 :root {
-  --bg-color: #ffffff;
+  --bg-color: #f0f0f0;
   --bg-sub-color: #f1f1f1;
+  --route-bg-color: #ffffff;
   --text-color: #000000;
   --text-sub-color: #595959;
   --border-color: #e0e0e0;
@@ -14,8 +15,9 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg-color: #1b1b1b;
+    --bg-color: #181818;
-    --bg-sub-color: #252525;
+    --bg-sub-color: #1e1e1e;
+    --route-bg-color: #242424;
     --text-color: #ffffff;
     --text-sub-color: #a4a4a4;
     --border-color: #2c2c2c;

packages/frontend/src/routes/index.vue

@@ -1,5 +1,4 @@
 <template>
-  <h1>Hello World</h1>
 </template>
 
 <script lang="ts" setup>

packages/lynqchat-js/src/1.0.0-alpha.0/api/server-info.d.ts

@@ -9,6 +9,7 @@ export default interface ServerInfo {
     response: (Success & {
       name: string | null;
       description: string | null;
+      icon: string;
       isInitialized: boolean;
       isFirstAdminExists: boolean;
       userCount: number;