New: フロントエンドにL.jsを導入 / Fix: 初期設定前にserver-infoが利用できない問題 / Feat: manifest.json / Chg: isOwnerをisAdminに戻しました / Fix: UserRepositoryのschemaの記述順序を統一 / Feat: server-infoにサーバー名とサーバー説明を記載 / New: manifest.jsonをフロントエンドで読み込み / New: スクロールバーのスタイルを指定 / New: フォントを指定 / New: line-heightを指定 / New: tab-sizeを指定 / New: <label>のwidthをfit-contentとして指定 / New: CSS変数にアクセントカラーなどを追加 / New: <a>のcolorをaccent-colorとして指定 / Feat: ページのレイアウトを作成 / Feat: 各ページのヘッダーでタイトルを表示 / Feat: スマホUI / Feat: セットアップウィザードをフロントエンドに実装 / Feat: NotFoundページ / New: Button,Input,InputPassword,Toggle,Textareaコンポーネントを作成 / Feat: modal機能 / Chg: server-infoをrefに変更 / Fix: L.jsのsetup/initializationがsetup/initilizationになっていたtypoを修正

packages/frontend/src/main.ts

@@ -1,30 +1,69 @@
 import { createApp } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
 import routerStatus from "@/lib/router";
+import { createHead } from "@unhead/vue/client";
+import serverInfo from "@/lib/account";
 
 import "@/global.css";
 import Layout from "@/Layout.vue";
 
 const app = createApp(Layout);
 
+app.use(createHead());
+
 const router = createRouter({
   history: createWebHistory(),
   routes: [
     {
       path: "/",
+      meta: {
+        title: "ホーム",
+      },
       component: () => import("@/routes/index.vue"),
     },
     {
       path: "/setup",
-      component: () => import("@/routes/setup.vue"),
-    }
+      redirect: "/setup/initialization",
+    },
+    {
+      path: "/setup/initialization",
+      meta: {
+        title: "初期設定",
+      },
+      component: () => import("@/routes/setup/initialization.vue"),
+    },
+    {
+      path: "/setup/create-admin",
+      meta: {
+        title: "管理者アカウントの作成",
+      },
+      component: () => import("@/routes/setup/create-admin.vue"),
+    },
+    {
+      path: "/:NotFound(.*)*",
+      meta: {
+        title: "お探しのページは見つかりませんでした。",
+      },
+      component: () => import("@/NotFound.vue"),
+    },
   ],
 });
 router.beforeEach(() => {
   routerStatus.isLoad = true;
   return;
 });
-router.afterEach(() => {
+router.afterEach((to) => {
+  const title = to.meta.title;
+
+  let serverName = "LynqChat";
+
+  if (serverInfo.value.success && serverInfo.value.name) {
+    serverName = serverInfo.value.name;
+  }
+
+  document.title = title
+    ? `${title} | ${serverName}`
+    : serverName;
   routerStatus.isLoad = false;
 });
 app.use(router);