add document / remove unused part

README.md

@@ -2,90 +2,20 @@
 
 # game3-front
 
-[Nuxt 3](https://nuxt.com/docs/getting-started/introduction)を使用して作成しています。
-
-## 開発環境の準備
-
-開発環境を構築するために必要な手順です。一度実行すればOKです。
-
-### 1. Node.jsのインストール
-
-Node.jsをインストールします。すでにインストールされている場合はスキップしてください。
-
-<https://nodejs.org/en>からダウンロードしてインストールします。
-LTS版で問題ありません。
-
-インストール後、バージョンを確認します。
-
-```bash
-node -v
-```
-
-`v21.X.X`のようにバージョンが表示されればOKです。
-
-### 2. pnpmのインストール
-
-本プロジェクトではパッケージマネージャーとしてpnpmを使用しています。
-pnpmをインストールします。すでにインストールされている場合はスキップしてください。
-
-corepackを使用してpnpmインストールします。(corepack自体はNode.jsのインストール時に勝手にインストールされています。)
-
-```bash
-corepack enable
-```
-
-### 3. 依存パッケージのインストール
+[Game³](https://game3.trap.games)のフロントです。
 
-```bash
-pnpm install
-```
+バックエンド: <https://github.com/traPtitech/game3-back>
 
-## 開発サーバーの起動
-
-`http://localhost:3000`で開発サーバーが起動します。
-
-```bash
-pnpm run dev
-```
-
-## 本番環境のビルド
-
-本番環境向けにビルドします。NeoShowcaseのデプロイ時に実行する必要があります。
-
-```bash
-pnpm run build
-```
-
-ローカルで本番環境のビルドを確認する場合は以下のコマンドを実行します。
-
-```bash
-pnpm run preview
-```
-
-[deployment documentation](https://nuxt.com/docs/getting-started/deployment)も参照してください。
-
-## APIクライアントの生成
-
-バックエンドの[OpenAPI](https://github.com/traPtitech/game3-back/blob/main/docs/openapi.yaml)に変更があった場合は、APIクライアントを再生成する必要があります。
-[openapi-generator-cli](https://github.com/OpenAPITools/openapi-generator-cli)を使用しています。
-次のコマンドを実行すると、`src/lib/api`以下にAPIクライアントが生成されます。**実行にはDockerが必要です**。
-
-```bash
-pnpm run gen:api-client
-```
-
-## 構成
+[Nuxt 3](https://nuxt.com/docs/getting-started/introduction)を使用して作成しています。
 
-基本的には[Nuxt 3の標準ディレクトリ構成](https://nuxt.com/docs/guide/directory-structure)に従っています。
+## 開発資料
 
-### ページの作成
+see: [docs/development.md](./docs/development.md)
 
-サイト内のページは
+## デプロイ資料
 
-- `src/pages`以下にvueファイルとして配置
-- `src/content`以下にMarkdownファイルとして配置
+see: [docs/deployment.md](./docs/deployment.md)
 
-されています。いずれの場合でも、フォルダ/ファイル名がURLになります。(例: `src/pages/entry/register.vue` → `/entry/register`, `src/content/event/17th/index.md` → `/event/17th`)
+## 開発に関わるメモ
 
-Markdownファイル内で画像を使用する場合、画像ファイルは`src/public`以下に配置してください。
-例えば画像ファイルを`src/public/img/content/17th/map.png`に配置した場合、Markdown内では`![地図](/img/content/17th/map.png)`のパスで参照できます(`src/public`は不要)。
+see: [docs/dev-note.md](./docs/dev-note.md)

components/content/ProseImg.vue

@@ -11,7 +11,8 @@
 
 <script setup lang="ts">
 import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
-import { useRuntimeConfig, computed } from '#imports'
+import { computed } from '#imports'
+import { basePath } from '~/lib/url'
 
 const props = defineProps({
   src: {
@@ -34,7 +35,7 @@ const props = defineProps({
 
 const refinedSrc = computed(() => {
   if (props.src?.startsWith('/') && !props.src.startsWith('//')) {
-    const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
+    const _base = withLeadingSlash(withTrailingSlash(basePath))
     if (_base !== '/' && !props.src.startsWith(_base)) {
       return joinURL(_base, props.src)
     }

composables/useLogin.ts

@@ -1,16 +1,16 @@
+import { basePath } from '~/lib/url'
 import { useMe } from '~/store/me'
 
 export const useLogin = () => {
   const { useMeStore, logout } = useMe()
   const { redirectPath } = useRedirectParam()
-  const config = useRuntimeConfig()
 
   const login = () => {
     const params = new URLSearchParams({
-      redirect: config.public.basePath + (redirectPath.value ?? '/')
+      redirect: basePath + (redirectPath.value ?? '/')
     })
     const authPath =
-      config.public.basePath + '/api/auth/login?' + params.toString()
+      basePath + '/api/auth/login?' + params.toString()
 
     // 本来はAuthApi.login()を使うべきだが
     // CORSの問題で使えないため直接location.hrefを変更しています

docs/deployment.md

@@ -0,0 +1,29 @@
+# デプロイ資料
+
+本番環境向けにビルドします。NeoShowcaseでのデプロイ時に実行する必要があります。
+
+## ビルド
+
+```bash
+corepack enable
+pnpm install
+pnpm build
+```
+
+上記コマンドを実行すると、`.output`ディレクトリにビルドされたファイルが出力されます。
+
+ローカルで本番環境のビルドを確認する場合は以下のコマンドを実行します。
+
+```bash
+pnpm run preview
+```
+
+## サーバーの起動
+
+```bash
+pnpm run start
+```
+
+上記コマンドを実行すると、`.output`ディレクトリのファイルを使って本番環境のサーバーが3000番ポートで起動します。
+
+[deployment documentation](https://nuxt.com/docs/getting-started/deployment)も参照してください。

docs/dev-note.md

@@ -0,0 +1,52 @@
+# 開発に関わるメモ
+
+## 構成
+
+基本的には[Nuxt 3の標準ディレクトリ構成](https://nuxt.com/docs/guide/directory-structure)に従っています。
+
+### ページの作成
+
+サイト内のページは
+
+- `/pages`以下にvueファイルとして配置
+- `/content`以下にMarkdownファイルとして配置
+
+されています。いずれの場合でも、フォルダ/ファイル名がURLになります。
+(例: `/pages/entry/register.vue` → `/entry/register`, `/content/event/17th/index.md` → `/event/17th`)
+
+#### `/pages`
+
+see: <https://nuxt.com/docs/guide/directory-structure/pages>
+
+`/pages`以下にvueファイルを配置することで、そのファイルがページとして認識されます。複雑なロジックを持つページを作成したい場合に向いています。
+
+#### `/content`
+
+see:
+
+- <https://nuxt.com/docs/guide/directory-structure/content>
+- <https://content.nuxt.com>
+
+`/content`以下にMarkdownファイルを配置することで、そのファイルがページとして認識されます。テキスト/画像のみシンプルなページを作成したい場合に向いています。
+
+お問い合わせページ(`/content/contact.md`)やプライバシーポリシーページ(`/content/about-google-analytics.md`)などが該当します。
+
+> [!IMPORTANT]
+> Markdownファイル内で画像を使用する場合、画像ファイルは`/public`以下に配置してください。
+> 例えば画像ファイルを`/public/img/content/17th/map.png`に配置した場合、Markdown内では`![地図](/img/content/17th/map.png)`のパスで参照できます(`/public`部分は不要)。
+
+> [!TIP]
+> `/components/content`以下に作成されたVueコンポーネントであれば、Markdownファイル内でも使用できます。例えばイベント開催概要ページでのゲーム一覧表示には`/components/content/ContentEntryList.vue`を使用しています。
+> `<ContentEntryList slug="18th"></ContentEntryList>`のように記述することで使用できます。
+> see: <https://content.nuxt.com/usage/markdown#vue-components>>
+
+> [!TIP]
+> Markdownファイルの表示に使用される`<h1>`や`<p>`をカスタマイズしたい場合、`/components/content/XXX.vue`を作成してください。どのようなコンポーネントが使えるかは<https://github.com/nuxt-modules/mdc/tree/main/src/runtime/components/prose>を参照してください。
+> see: <https://content.nuxt.com/usage/markdown#prose-components>
+
+<details>
+<summary><code>/content</code>以下のMarkdownファイルの表示の仕組み</summary>
+
+例えば`/event/10th/report`へのページアクセスが発生すると、`/pages/event/10th/report.vue`の存在が確かめられます。このファイルが存在しなかった場合、次に[Catch-all Route](https://nuxt.com/docs/guide/directory-structure/pages#catch-all-route)となっている`/pages/[...slug].vue`が読み込まれます。このファイル内で`nuxt/content`によるMarkdownファイルの読み込みを行い、その内容を表示しています。
+
+</details>

docs/development.md

@@ -0,0 +1,67 @@
+# 開発資料
+
+## 開発環境の準備
+
+開発環境を構築するために必要な手順です。一度実行すればOKです。
+
+### 1. Node.jsのインストール
+
+Node.jsをインストールします。すでにインストールされている場合はスキップしてください。
+
+<https://nodejs.org/en>からダウンロードしてインストールします。
+LTS版で問題ありません。
+
+インストール後、バージョンを確認します。
+
+```bash
+node -v
+```
+
+`v21.X.X`のようにバージョンが表示されればOKです。
+
+### 2. pnpmのインストール
+
+本プロジェクトではパッケージマネージャーとしてpnpmを使用しています。
+pnpmをインストールします。すでにインストールされている場合はスキップしてください。
+
+corepackを使用してpnpmインストールします。(corepack自体はNode.jsのインストール時に勝手にインストールされています。)
+
+```bash
+corepack enable
+```
+
+### 3. 依存パッケージのインストール
+
+```bash
+pnpm install
+```
+
+## 開発サーバーの起動
+
+```bash
+pnpm run dev
+```
+
+`http://localhost:3000`で開発サーバーが起動します。
+
+## APIクライアントの生成
+
+バックエンドの[OpenAPI](https://github.com/traPtitech/game3-back/blob/main/docs/openapi.yaml)に変更があった場合は、APIクライアントを再生成する必要があります。
+[openapi-generator-cli](https://github.com/OpenAPITools/openapi-generator-cli)を使用しています。
+次のコマンドを実行すると、`src/lib/api`以下にAPIクライアントが生成されます。**実行にはDockerが必要です**。
+
+```bash
+pnpm run gen:api-client
+```
+
+## APIモックの作成
+
+本アプリの開発環境では[Mock Service Worker](https://mswjs.io/)を使用してAPIモックを作成しています。
+
+OpenAPI定義からモックを自動生成する場合は、次のコマンドを実行します。`src/mocks/handlers.ts`が上書きされます。この自動生成には[zoubingwu/msw-auto-mock](https://github.com/zoubingwu/msw-auto-mock)を使用しています。
+
+```bash
+pnpm run gen:api-mock
+```
+
+手動でモックを作成する場合は、`src/mocks/handlers.ts`を編集してください。

lib/url.ts

@@ -16,6 +16,12 @@ export const getParamsArray = (params: string | string[] | undefined) => {
   return params ? [params] : undefined
 }
 
+// 本来なら
+// const config = useRuntimeConfig()
+// basePath = config.public.basePath
+// のように書くべきだが
+// composableの外で`useRuntimeConfig()`が使用できず不便なのでハードコードしています
+// see: https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables
 export const basePath = process.env.NODE_ENV === 'development'
   ? 'http://localhost:3000'
   : 'https://game3.trap.games'