Release

.github/workflows/release.yml

@@ -78,4 +78,4 @@ jobs:
                       flocon_web_server.zip
                       flocon_api_server_flyio.zip
                   draft: true
-                  name: ${{ env.release_name }} (${{ github.ref_name }}) ※ Web サーバーと API サーバーのバージョンは推定値です
+                  name: '${{ env.release_name }} - (全体: ${{ github.ref_name }}) ※ Web サーバーと API サーバーのバージョンは推定値です'

apps/api-server/src/VERSION.ts

@@ -4,5 +4,4 @@ export const VERSION = new SemVer({
     major: 0,
     minor: 7,
     patch: 16,
-    prerelease: { type: 'rc', version: 5 },
 });

apps/api-server/src/run-generateGithubReleaseName.ts

@@ -2,7 +2,7 @@ import fs from 'fs-extra';
 import { getApiServerVersion, getWebServerVersion } from './gitTags';
 
 const main = (): void => {
-    const txt = `Web サーバー ${getWebServerVersion()} & API サーバー ${getApiServerVersion()}`;
+    const txt = `Web サーバー v${getWebServerVersion()} & API サーバー v${getApiServerVersion()}`;
     fs.writeFileSync('./github-release-name.txt', txt);
 };
 

apps/web-server/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flocon-trpg/web-server",
-    "version": "0.9.0-rc.5",
+    "version": "0.9.0",
     "private": true,
     "type": "module",
     "scripts": {

apps/web-server/src/components/models/room/Room/subcomponents/components/RoomMenu/RoomMenu.tsx

@@ -1013,13 +1013,16 @@ export const RoomMenu: React.FC = React.memo(function RoomMenu() {
         const menuItems: ItemType[] = [
             {
                 key: 'logo@menu',
+                // span タグで囲まないとアイコン画像が中央に表示されない。
                 label: (
-                    <img
-                        src="/assets/logo.png"
-                        width={24}
-                        height={24}
-                        style={{ verticalAlign: 'middle' }}
-                    />
+                    <span>
+                        <img
+                            src="/assets/logo.png"
+                            width={24}
+                            height={24}
+                            style={{ verticalAlign: 'middle' }}
+                        />
+                    </span>
                 ),
                 // routing であれば複数回実行されてもあまり問題ないため、Promise の結果を無視してコードを簡略化している。
                 onClick: () => void router({ to: '/' }),

apps/web-server/src/main.tsx

@@ -12,6 +12,8 @@ import React, { PropsWithChildren, StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import { AllContextProvider } from './components/behaviors/AllContextProvider';
 import { AntdThemeConfigProvider } from './components/behaviors/AntdThemeConfigProvider';
+import { EnvsMonitor } from './components/models/envs/EnvsMonitor/EnvsMonitor';
+import { AlertCounter, AlertCounterContext } from './components/ui/AlertCounter/AlertCounter';
 import { LayoutWithNoHook } from './components/ui/Layout/Layout';
 import { SuspenseWithFallback } from './components/ui/SuspenseWithFallback/SuspenseWithFallback';
 import { useOnFirebaseAppChange, useSetupApp } from './hooks/useSetupApp';
@@ -47,6 +49,8 @@ declare module '@tanstack/react-router' {
     }
 }
 
+const alertCounterSymbol = Symbol();
+
 const App = ({ children }: PropsWithChildren) => {
     const { authNotFoundState, urqlClient, reactQueryClient, clientId, httpUri, wsUri } =
         useSetupApp();
@@ -72,10 +76,16 @@ const App = ({ children }: PropsWithChildren) => {
 
     if (authNotFoundState) {
         return (
-            <ThemedDiv style={{ padding: 5 }}>
+            <ThemedDiv style={{ padding: 12 }}>
                 {
-                    '予期しないエラーが発生しました: authNotFound / An unexpected error occured: authNotFound'
+                    'エラーが発生しました。環境変数をセットし忘れている可能性があります。 - authNotFound / An unexpected error occured: authNotFound'
                 }
+                <h3>環境変数</h3>
+                <p>{'この Web サーバーに設定されている環境変数は次のとおりです。'}</p>
+                <AlertCounterContext.Provider value={alertCounterSymbol}>
+                    <AlertCounter.Counter />
+                    <EnvsMonitor />
+                </AlertCounterContext.Provider>
             </ThemedDiv>
         );
     }

commitlint.config.js

@@ -19,6 +19,7 @@ module.exports = {
                 'sdk',
                 'sdk-react',
                 'sdk-urql',
+                'tools',
                 'utils',
                 'web-server-utils',
             ],

websites/docs/docs/intro.md

@@ -1,11 +1,23 @@
 ---
-title: 'はじめに'
+title: '初めて Flocon をご利用になる方へ'
 sidebar_position: 1
 ---
 
-セッションツールの操作方法を知りたい方は、左側のメニューから`セッションツールの操作方法`を選択してください。
+## Flocon を利用する方法
 
-自鯖の設置方法を知りたい方は、[サーバーの設置方法>チュートリアル](./server/tutorial/)をご覧ください。
+### 自鯖に設置する方法
+
+ご自身で身内向けサーバーを設置したい方は、[サーバーの設置方法>チュートリアル](./server/tutorial/)をご覧ください。
+
+### 公開サーバーを利用する、もしくは試しに使ってみる方法
+
+公開サーバーは [公開サーバー一覧](./public_servers) をご覧ください。
+
+## Flocon の操作方法
+
+Flocon の操作方法を知りたい方は、左側のメニューから`セッションツールの操作方法`を選択してください。
+
+## 備考
 
 ドキュメントは一部未整備の部分がありますのでご了承ください。もしわからない部分があればFlocon作者に遠慮なくご質問ください。
 

websites/docs/docusaurus.config.ts

@@ -27,7 +27,7 @@ const config: Config = {
                     sidebarPath: './sidebars.ts',
                     // Please change this to your repo.
                     // Remove this to remove the "edit this page" links.
-                    editUrl: 'https://github.com/flocon-trpg/servers/edit/main/',
+                    editUrl: 'https://github.com/flocon-trpg/servers/edit/main/websites/docs',
                 },
                 blog: {
                     showReadingTime: true,
@@ -37,7 +37,7 @@ const config: Config = {
                     // },
                     // Please change this to your repo.
                     // Remove this to remove the "edit this page" links.
-                    editUrl: 'https://github.com/flocon-trpg/servers/edit/main/',
+                    editUrl: 'https://github.com/flocon-trpg/servers/edit/main/websites/docs',
                     // Useful options to enforce blogging best practices
                     onInlineTags: 'warn',
                     onInlineAuthors: 'warn',
@@ -71,6 +71,11 @@ const config: Config = {
                     label: '公開サーバー一覧',
                     position: 'left',
                 },
+                {
+                    href: '/tools',
+                    label: 'ツール',
+                    position: 'left',
+                },
                 {
                     href: 'https://github.com/flocon-trpg/servers/releases',
                     label: 'ダウンロード',

websites/docs/src/components/ToolsHeader.tsx

@@ -0,0 +1,25 @@
+import { Button, Layout } from 'antd';
+
+export const ToolsHeader: React.FC = () => {
+    return (
+        <Layout.Header style={{ display: 'flex', alignItems: 'center' }}>
+            <Button
+                type="text"
+                onClick={() => {
+                    location.href = '/';
+                }}
+            >
+                <img
+                    src="/img/logo.png"
+                    style={{ verticalAlign: 'middle' }}
+                    width={32}
+                    height={32}
+                />
+                <span style={{ fontWeight: 'bold' }}>{'Flocon'}</span>
+            </Button>
+            <Button type="text" onClick={() => (location.href = '/tools')}>
+                {'ツールTOP'}
+            </Button>
+        </Layout.Header>
+    );
+};

websites/docs/src/pages/tools/bcrypt.tsx

@@ -1,3 +1,4 @@
+import { ToolsHeader } from '@site/src/components/ToolsHeader';
 import { AntDesign } from '../../components/AntDesign';
 import { Button, Input, Layout, Select, Typography } from 'antd';
 import { hash } from 'bcryptjs';
@@ -38,7 +39,7 @@ const Bcrypt: React.FC = () => {
         return await hash(textRef.current, saltRef.current);
     }, [keyToGenerate]);
 
-    let resultElement;
+    let resultElement: JSX.Element;
     if (result.loading) {
         resultElement = <div>生成中です…</div>;
     } else if (result.value != null) {
@@ -81,6 +82,7 @@ export default function Home(): JSX.Element {
     return (
         <AntDesign id={id}>
             <Layout style={{ minHeight: '100vh' }}>
+                <ToolsHeader />
                 {/* もし Layout.Content がないと、Layout.Content の中身のコンポーネントの文字色が Docusaurus のテーマの色になってしまう。このため、例えば Ant Design がダークモードの場合は文字色は白であってほしいが、Docusaurus がライトテーマだと文字色が黒っぽくなり見づらくなる。 */}
                 <Layout.Content>
                     <Bcrypt />

websites/docs/src/pages/tools/index.tsx

@@ -1,24 +1,17 @@
 import { AntDesign } from '@site/src/components/AntDesign';
-import { Layout } from 'antd';
+import { ToolsHeader } from '@site/src/components/ToolsHeader';
+import { Button, Layout } from 'antd';
 
 const Index: React.FC = () => {
     return (
         <div style={{ padding: 16 }}>
             <h2>Floconツール</h2>
             <p>
-                <a href="./web-server">Webサーバーの設定を作成する</a>
+                <a href="/tools/web-server">Webサーバーの設定を作成する</a>
             </p>
             <p>
-                <a href="./bcrypt">エントリーパスワードに用いるbcryptハッシュを生成する</a>
+                <a href="/tools/bcrypt">エントリーパスワードに用いるbcryptハッシュを生成する</a>
             </p>
-            <h2>その他</h2>
-            <a
-                href="https://github.com/flocon-trpg/servers"
-                target="_blank"
-                rel="noopener noreferrer"
-            >
-                ソースコード
-            </a>
         </div>
     );
 };
@@ -29,7 +22,10 @@ export default function Home(): JSX.Element {
     return (
         <AntDesign id={id}>
             <Layout style={{ minHeight: '100vh' }}>
-                <Index />
+                <ToolsHeader />
+                <Layout.Content>
+                    <Index />
+                </Layout.Content>
             </Layout>
         </AntDesign>
     );

websites/docs/src/pages/tools/web-server.tsx

@@ -2,13 +2,15 @@ import { Layout } from 'antd';
 import React from 'react';
 import { AntDesign } from '../../components/AntDesign';
 import { CreateEnv } from '../../components/CreateEnv';
+import { ToolsHeader } from '@site/src/components/ToolsHeader';
 
 const id = 'env-web-nHwcPQ1UyYZh6e';
 
 export default function Home(): JSX.Element {
     return (
         <AntDesign id={id}>
             <Layout style={{ minHeight: '100vh' }}>
+                <ToolsHeader />
                 {/* もし Layout.Content がないと、Layout.Content の中身のコンポーネントの文字色が Docusaurus のテーマの色になってしまう。このため、例えば Ant Design がダークモードの場合は文字色は白であってほしいが、Docusaurus がライトテーマだと文字色が黒っぽくなり見づらくなる。 */}
                 <Layout.Content>
                     <CreateEnv />

websites/tools/.eslintrc.js

@@ -0,0 +1,37 @@
+module.exports = {
+    env: {
+        browser: true,
+        es6: true,
+    },
+    settings: {
+        react: { version: 'detect' },
+    },
+    extends: ['@flocon-trpg/eslint-config-v8', 'plugin:@next/next/recommended'],
+    globals: {
+        Atomics: 'readonly',
+        SharedArrayBuffer: 'readonly',
+    },
+    parserOptions: {
+        project: './tsconfig.json',
+        // vscodeのeslintが正常に動くようにtsconfigRootDirを設定している
+        tsconfigRootDir: __dirname,
+        ecmaFeatures: {
+            jsx: true,
+        },
+        ecmaVersion: 2018,
+        sourceType: 'module',
+    },
+    plugins: ['@typescript-eslint', 'react', 'react-hooks'],
+    rules: {
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': [
+            'error',
+            {
+                additionalHooks: '^use((Memo|Callback)One|DeepCompareEffect)$',
+            },
+        ],
+        '@typescript-eslint/switch-exhaustiveness-check': 'error',
+        'react/prop-types': 'off',
+        '@next/next/no-img-element': 'off',
+    },
+};

websites/tools/.gitignore

@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Custom
+*.tsbuildinfo
+
+*storybook.log

websites/tools/.prettierignore

@@ -0,0 +1,2 @@
+/dist/
+/coverage/

websites/tools/.prettierrc

@@ -0,0 +1 @@
+"@flocon-trpg/prettier-config"

websites/tools/README.md

@@ -0,0 +1,5 @@
+# tools
+
+https://tools.flocon.app のソースコードです。
+
+このサイトの内容は https://flocon.app/tools に統合しました。https://tools.flocon.app は https://flocon.app/tools への誘導のためだけに残されています。

websites/tools/eslint.config.js

@@ -0,0 +1,32 @@
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import Config from '@flocon-trpg/eslint-config';
+
+export default tseslint.config({
+    extends: [...Config],
+    files: ['**/*.{ts,tsx}'],
+    ignores: ['dist', '**/*.d.ts'],
+    languageOptions: {
+        ecmaVersion: 2020,
+        globals: globals.browser,
+        // other options...
+        parserOptions: {
+            project: ['./tsconfig.node.json', './tsconfig.app.json'],
+            tsconfigRootDir: import.meta.dirname,
+        },
+    },
+    plugins: {
+        'react-hooks': reactHooks,
+        'react-refresh': reactRefresh,
+    },
+    rules: {
+        ...reactHooks.configs.recommended.rules,
+        'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+
+        // TODO: Flocon の eslint パッケージと eslint のバージョンが異なるため暫定的に独立した rule を書いているが、パッケージを利用する
+        '@typescript-eslint/no-namespace': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+    },
+});

websites/tools/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Flocon ツール</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>