feat(node:web): implemented the docs page

nodePackages/web/src/assets/texts/gettingStarted.en.md

@@ -0,0 +1,89 @@
+<!-- markdownlint-disable MD033 MD041 -->
+
+### 🥽 For <abbr translate="no">VCC</abbr> (<span translate="no">VRChat Creator Companion</span>)
+
+#### System requirements
+
+- **<span translate="no">VRChat Creator Companion</span>** (Recommended)
+- There is a bundled sample scene created in
+  <span translate="no">Unity</span> _<span translate="no">2022.3.22f1</span>_;
+  we recommend previewing it using the same version.
+
+#### 1. Import the registry via the <span translate="no">VRChat Creator Companion (<abbr>VCC</abbr>)</span>
+
+[Add to <abbr translate="no">VCC</abbr>](vcc://vpm/addRepo?url=https%3A%2F%2Fkurone-kito.github.io%2Fvpm%2Findex.json)
+
+#### 2. Import the package to your project
+
+1. Click on the “<span translate="no">Manage Project</span>” button in the
+   <abbr translate="no">VCC</abbr>
+2. Find the “<span translate="no">LaunchPad Icons</span>” package and
+   click on the “<span translate="no">(+) Add package</span>” button
+
+#### 3. Use the package, enjoy :D
+
+---
+
+### 📲 For <span translate="no">Unity3D</span> (without <span translate="no">VRChat</span> world / avatar project)
+
+#### System requirements
+
+- There is a bundled sample scene created in
+  <span translate="no">Unity</span> _<span translate="no">2022.3.22f1</span>_;
+  we recommend previewing it using the same version.
+
+#### 1. Download the package
+
+Download the package from the
+[latest release](https://github.com/kurone-kito/launchpad-icons/releases).
+
+#### 2. Manually resolve the dependencies
+
+The package requires the following dependencies:
+
+- [<span translate="no">Unity Vector Graphics (com.unity.vectorgraphics)</span>](https://docs.unity3d.com/Packages/[email protected]/manual/index.html)
+  `>=2.0.0-preview.24`
+
+#### 3. Import the package to your project
+
+1. Open your Unity project
+2. Drag and drop the downloaded package into the
+   <span translate="no">Unity Editor</span>
+3. Click on the “Import” button
+
+#### 4. Use the package, enjoy :D
+
+---
+
+### 🌐 For Web (React / Solid)
+
+#### System requirements
+
+- [<span translate="no">Node.js</span>](https://nodejs.org/) `>=18`
+- **[<span translate="no">React</span>](https://react.dev)** or **[<span translate="no">Solid</span>](https://www.solidjs.com)**
+
+#### 1. Install the package
+
+```sh
+npm i @kurone-kito/launchpad-icons-react
+```
+
+```sh
+npm i @kurone-kito/launchpad-icons-solid
+```
+
+#### 2. Use the package, enjoy :D
+
+```tsx
+import { Avatars } from '@kurone-kito/launchpad-icons-react';
+import type { FC } from 'react';
+
+export const MyComponent: FC = () => <Avatars />;
+```
+
+```tsx
+import { Avatars } from '@kurone-kito/launchpad-icons-solid';
+import type { Component } from 'solid-js';
+
+export const MyComponent: Component = () => <Avatars />;
+```

nodePackages/web/src/assets/texts/gettingStarted.ja.md

@@ -0,0 +1,90 @@
+<!-- markdownlint-disable MD033 MD041 -->
+
+### 🥽 <span translate="no">VRChat</span> ワールド・アバターで使う (<span translate="no">VRChat Creator Companion</span>)
+
+#### システム要件
+
+- **<span translate="no">VRChat Creator Companion</span>** (強く推奨)
+- <span translate="no">Unity</span> _<span translate="no">2022.3.22f1</span>_
+  で作成したサンプルシーンを同梱しているため、同一バージョンまたはそれ以降の
+  <span translate="no">Unity</span> がサポートしているバージョンのご利用を推奨します。
+
+#### 1. <span translate="no">VRChat Creator Companion (<abbr translate="no">VCC</abbr>)</span>でレジストリをインポート
+
+[<abbr translate="no">VCC</abbr> に追加](vcc://vpm/addRepo?url=https%3A%2F%2Fkurone-kito.github.io%2Fvpm%2Findex.json)
+
+#### 2. プロジェクトにパッケージをインポート
+
+1. <abbr translate="no">VCC</abbr> で“<span translate="no">Manage Project</span>”
+   ボタンを押下します。
+2. “<span translate="no">LaunchPad Icons</span>” パッケージを探し、
+   “<span translate="no">(+) Add package</span>” ボタンを押下します。
+
+#### 3. パッケージを使用して楽しみましょう！ :D
+
+---
+
+### 📲 <span translate="no">VRChat</span> 以外における <span translate="no">Unity</span> プロジェクトでの使用方法
+
+#### システム要件
+
+- <span translate="no">Unity</span> _<span translate="no">2022.3.22f1</span>_
+  で作成したサンプルシーンを同梱しているため、
+  同一バージョンまたはそれ以降の <span translate="no">Unity</span> のご利用を推奨します。
+
+#### 1. パッケージをダウンロードする
+
+[最新版リリース](https://github.com/kurone-kito/launchpad-icons/releases)
+をダウンロードします。
+
+#### 2. 依存関係を手動で解決する
+
+このパッケージには次の依存関係が必要です:
+
+- [<span translate="no">Unity Vector Graphics (com.unity.vectorgraphics)</span>](https://docs.unity3d.com/Packages/[email protected]/manual/index.html)
+  `>=2.0.0-preview.24`
+
+#### 3. パッケージをプロジェクトにインポートする
+
+1. Unityプロジェクトを開きます。
+2. ダウンロードしたパッケージを <span translate="no">Unity Editior</span>
+   にドラッグ＆ドロップします。
+3. “インポート” ボタンを押下します。
+
+#### 4. パッケージを使用して楽しみましょう！ :D
+
+---
+
+### 🌐 Web で使用する (<span translate="no">React</span> / <span translate="no">Solid</span> 対応)
+
+#### システム要件
+
+- [<span translate="no">Node.js</span>](https://nodejs.org/) `>=18`
+- **[<span translate="no">React</span>](https://react.dev)** または
+  **[<span translate="no">Solid</span>](https://www.solidjs.com)**
+
+#### 1. パッケージをインストールする
+
+```sh
+npm i @kurone-kito/launchpad-icons-react
+```
+
+```sh
+npm i @kurone-kito/launchpad-icons-solid
+```
+
+#### 2. パッケージを使用して楽しみましょう！ :D
+
+```tsx
+import { Avatars } from '@kurone-kito/launchpad-icons-react';
+import type { FC } from 'react';
+
+export const MyComponent: FC = () => <Avatars />;
+```
+
+```tsx
+import { Avatars } from '@kurone-kito/launchpad-icons-solid';
+import type { Component } from 'solid-js';
+
+export const MyComponent: Component = () => <Avatars />;
+```

nodePackages/web/src/i18n/en.ts

@@ -19,6 +19,7 @@ const en: Resources = {
   features4Body: 'CC BY-NC 4.0 License.',
   features4Heading: 'Free & OSS!',
   gettingStarted: 'Getting Started',
+  gettingStartedTitle: 'Getting Started',
   language: '🇬🇧',
   plan: 'plan',
   planFree1: 'Unrestricted use under CC BY-NC 4.0 license',

nodePackages/web/src/i18n/ja.ts

@@ -19,6 +19,7 @@ const ja: Resources = {
   features4Body: 'CC BY-NC 4.0 ライセンス',
   features4Heading: '無料＆OSS！',
   gettingStarted: '始めましょう！',
+  gettingStartedTitle: 'ご利用方法',
   language: '🇯🇵',
   plan: 'プラン',
   planFree1: 'CC BY-NC 4.0 ライセンス下での無制限利用',

nodePackages/web/src/i18n/types.ts

@@ -20,6 +20,7 @@ export type ResourcesKeys =
   | 'features4Body'
   | 'features4Heading'
   | 'gettingStarted'
+  | 'gettingStartedTitle'
   | 'language'
   | 'plan'
   | 'planFree1'

nodePackages/web/src/routes/[[language]]/docs.tsx

@@ -1,14 +1,43 @@
 import type { Component } from 'solid-js';
+import { onMount } from 'solid-js';
+import { themeChange } from 'theme-change';
+import { html as en } from '../../assets/texts/gettingStarted.en.md';
+import { html as ja } from '../../assets/texts/gettingStarted.ja.md';
+import { Head } from '../../components/organisms/Head.js';
+import { DefaultTemplate } from '../../components/templates/DefaultTemplate';
+import {
+  createI18NText,
+  useLanguage,
+  useTranslator,
+} from '../../modules/createI18N';
+
+const mdTranslator = createI18NText({ en, ja } as const);
 
 /**
  * The documents page.
  * @returns The component.
  */
-const Docs: Component = () => (
-  <article class="article-container">
-    <h2>Docs page</h2>
-    <p>TODO: Add the content here.</p>
-  </article>
-);
+const Docs: Component = () => {
+  onMount(() => themeChange(false));
+  const language = useLanguage();
+  const md = mdTranslator(language);
+  const t = useTranslator();
+  return (
+    <DefaultTemplate>
+      <article class="article-container">
+        <Head
+          next="./explore"
+          pagePath="docs"
+          prev="."
+          title={t('gettingStartedTitle')}
+        />
+        <h2 class="article-container heading-root pt-10">
+          {t('gettingStartedTitle')}
+        </h2>
+        <section class="prose-article prose-anchor" innerHTML={md('text')} />
+      </article>
+    </DefaultTemplate>
+  );
+};
 
 export default Docs;