feat: add explore

next.config.js

@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
 /**
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
  * for Docker builds.
@@ -16,6 +19,14 @@ const config = {
     testProxy: true,
   },
   trailingSlash: true,
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.md/,
+      type: 'asset/source',
+    })
+
+    return config
+  },
 }
 
 export default config

package.json

@@ -37,6 +37,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.0.2",
+    "remark": "^15.0.1",
+    "remark-html": "^16.0.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "ua-parser-js": "2.0.0-beta.3",
@@ -45,6 +47,7 @@
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240925.0",
     "@playwright/test": "^1.47.2",
+    "@tailwindcss/typography": "^0.5.15",
     "@types/eslint": "^8.56.10",
     "@types/lodash": "^4.17.9",
     "@types/node": "^20.14.10",

src/app/[locale]/download/[[...options]]/page.tsx

@@ -3,15 +3,14 @@ import { notFound } from 'next/navigation'
 import { PlatformSelect } from './platform-select'
 
 import { Button } from '~/components/ui/button'
-import { Separator } from '~/components/ui/separator'
 import { initTranslations } from '~/i18n'
 import { fetchPoiVersions } from '~/lib/fetch-poi-versions'
 import {
   getDownloadLink,
   platformToTarget,
-  type Target,
   type OS,
   type PlatformSpec,
+  type Target,
 } from '~/lib/target'
 import { cn } from '~/lib/utils'
 
@@ -42,14 +41,15 @@ export default async function DownloadPage({
   const betaURL = target ? getDownloadLink(poiVersions.betaVersion, target) : ''
 
   return (
-    <div className="flex w-full grow flex-col items-center">
-      <h2>{t('Download')}</h2>
-      <section className="mb-32 mt-16">
+    <div className="prose dark:prose-invert flex w-full max-w-none grow flex-col">
+      <h2 className="">{t('Download')}</h2>
+      <section className="">
         <PlatformSelect os={os} spec={spec} />
-
         <div
           aria-hidden={!os || !spec}
-          className={cn('my-8 flex gap-8', { 'opacity-0': !os || !spec })}
+          className={cn('not-prose my-8 flex gap-8', {
+            'opacity-0': !os || !spec,
+          })}
         >
           <Button className="h-fit flex-col" asChild disabled={!stableURL}>
             <a href={stableURL}>
@@ -71,7 +71,7 @@ export default async function DownloadPage({
         </div>
       </section>
       <h2>{t('Others')}</h2>
-      <section className="mt-4 flex w-fit flex-col items-center">
+      <section className="flex w-fit flex-col items-center">
         <div>
           <Button variant="link" asChild>
             <a

src/app/[locale]/explore/page.tsx

@@ -1,4 +1,5 @@
-import { initTranslations } from '~/i18n'
+import { remark } from 'remark'
+import html from 'remark-html'
 
 export const runtime = 'edge'
 
@@ -7,6 +8,18 @@ export default async function HomePage({
 }: {
   params: { locale: string }
 }) {
-  const { t } = await initTranslations(locale, ['common'])
-  return <div className="w-full grow">{t('Explore')}</div>
+  console.log(locale, `~/contents/explore/${locale}.md`)
+
+  const content =
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    (await import(`~/contents/explore/${locale}.md`)).default as string
+  const processedContent = await remark().use(html).process(content)
+  const contentHtml = processedContent.toString()
+
+  return (
+    <div
+      className="prose dark:prose-invert w-full max-w-none grow"
+      dangerouslySetInnerHTML={{ __html: contentHtml }}
+    ></div>
+  )
 }

src/contents/explore/en.md

@@ -0,0 +1,14 @@
+## what is poi
+
+poi is an open-source, cross-platform Kantai Collection(Kancolle) browser built upon Electron and React.js.
+
+## Overview
+
+- Game browser with screenshot, refreshing, muting and resolution support.
+- Proxy for HTTP Socks5 and PAC. Data forwarding is also supported.
+- Naval base overview including Admiral info, resources, fleets and LBAS
+- Information for expeditions, docking, constructions and quests (quest description provided by plugins)
+- Notifications for constructions, epeditions, docking and moral recovery. Checks ships and equipments count and ship locking.
+- UI customization for layout, theme, icons and fleet girl avatars.
+- Localization support
+- Game data and plugin API for better extensions

src/contents/explore/fr.md

@@ -0,0 +1,14 @@
+## Qu'est-ce que poi
+
+poi est un navigateur open-source et multiplateforme pour Kantai Collection (Kancolle) construit sur Electron et React.js.
+
+## Aperçu
+
+- Navigateur de jeu avec prise en charge des captures d'écran, du rafraîchissement, de la mise en sourdine et de la résolution.
+- Proxy pour HTTP, Socks5 et PAC. Le transfert de données est également pris en charge.
+- Vue d'ensemble de la base navale incluant les informations de l'amiral, les ressources, les flottes et LBAS.
+- Informations sur les expéditions, les réparations, les constructions et les quêtes (description des quêtes fournie par des plugins).
+- Notifications pour les constructions, les expéditions, les réparations et la récupération de moral. Vérifie le nombre de navires et d'équipements et le verrouillage des navires.
+- Personnalisation de l'interface utilisateur pour la disposition, le thème, les icônes et les avatars des filles de la flotte.
+- Support de la localisation.
+- API de données de jeu et de plugins pour de meilleures extensions.

src/contents/explore/ja.md

@@ -0,0 +1,14 @@
+## poi とは
+
+poi は Electron と React.js をベースに開発された、オープンソースのクロスプラットフォーム「艦隊これくしょん」ブラウザです。poi の動作は Electron の対応バージョンの Chrome と一致し、原則としてパケットの送受信に影響を与える機能は提供しません。基本機能に加えて、poi は各種プラグインのインストールをサポートし、拡張機能を提供します。
+
+## 基本機能
+
+- ゲームブラウザとして、スクリーンショットの撮影、ゲームのリフレッシュ、音声再生の停止が可能で、ゲームの解像度設定をサポート
+- プロキシ機能として、HTTP、Socks5、および PAC（HTTP と Socks5）のプロキシ設定をサポートし、ゲームデータの転送をサポート
+- 基本的な鎮守府情報の表示、提督情報、各種資源データ、艦隊情報、基地航空隊情報の表示
+- 提督活動情報の表示、遠征情報、入渠情報、建造情報、および任務情報の表示（注：任務の詳細な説明は「任務情報」プラグインによって提供）
+- 通知機能として、建造、遠征、入渠、疲労回復通知、出撃時の艦船、装備およびロック状況の確認、大破時の進撃警告（注：大破通知機能は「未卜先知」プラグインによって提供）
+- インターフェースのカスタマイズをサポート、レイアウト、テーマ、アイコンおよび艦娘のアバター表示のカスタマイズ
+- 多言語インターフェースのサポート
+- データインターフェースおよびプラグイン API のサポートを提供し、プラグインによる拡張を容易に

src/contents/explore/ko.md

@@ -0,0 +1,14 @@
+## poi가 무엇인가요?
+
+poi는 Electron과 React.js를 사용하여 만들어진 오픈소스 크로스플랫폼 함대 컬렉션 ~칸코레~ 브라우저입니다.
+
+## 기능 소개
+
+- 스크린샷, 새로고침, 음소거, 해상도 변경 기능을 지원하는 게임 브라우저
+- HTTP Socks5와 PAC를 이용한 프록시 지원 (데이터 전달 기능 포함)
+- 제독 정보, 자원, 함대, 기지항공대 정보를 한 눈에 볼 수 있는 진수부 정보 창
+- 원정, 입거, 건조, 퀘스트 정보 (퀘스트 정보는 플러그인에 의해 제공)
+- 건조, 원정, 입거, 피로도 알림 제공
+- 레이아웃, 테마, 아이콘, 칸무스 아바타 변경과 같은 UI 커스텀 기능
+- 다국어 지원
+- 더 나은 확장 프로그램 개발을 위한 게임 데이터 및 플러그인 API

src/contents/explore/zh-Hans.md

@@ -0,0 +1,14 @@
+## poi 是什么
+
+poi 基于 Electron 与 React.js 开发，是一个开源的跨平台的「艦隊これくしょん」浏览器。poi 的行为与 Electron 对应版本的 Chrome 一致，原则上不提供任何影响收发包的功能。在基本功能之外，poi 还支持安装各类插件来提供扩展功能。
+
+## 基本功能
+
+- 游戏浏览器，可以进行截图、快速刷新游戏与关闭声音播放，支持设置游戏分辨率
+- 代理功能，支持 HTTP，Socks5 与 PAC（HTTP 与 Socks5 ）的代理设置，支持将游戏数据进行转发
+- 镇守府基本信息查看，包括提督信息，各类资源数据，舰队信息，基地航空队信息
+- 提督活动信息查看，包括远征信息，入渠信息，建造信息与任务信息（注：任务的详细描述由「任务信息」插件提供）
+- 通知功能，包括建造，远征，入渠，疲劳回复通知，出击时的船位、装备与锁船情况检查，以及大破情况下进击的提示（注：大破通知功能由「未卜先知」插件提供）
+- 支持界面自定义，包括界面布局，主题，图标与舰娘头像显示
+- 界面多语言支持
+- 提供了数据接口与插件 API 支持，便于通过插件进行扩展

src/contents/explore/zh-Hant.md

@@ -0,0 +1,14 @@
+## poi 是什麼
+
+poi 基於 Electron 與 React.js 開發，是一個開源的跨平臺的「艦隊これくしょん」瀏覽器。poi 的行爲與 Electron 對應版本的 Chrome 一致，原則上不提供任何影響收發包的功能。在基本功能之外，poi 還支持安裝各類插件來提供擴展功能。
+
+## 基本功能
+
+- 遊戲瀏覽器，可以進行截圖、快速刷新遊戲與關閉聲音播放，支持設置遊戲分辨率
+- 代理功能，支持 HTTP，Socks5 與 PAC（HTTP 與 Socks5 ）的代理設置，支持將遊戲數據進行轉發
+- 鎮守府基本信息查看，包括提督信息，各類資源數據，艦隊信息，基地航空隊信息
+- 提督活動信息查看，包括遠征信息，入渠信息，建造信息與任務信息（注：任務的詳細描述由「任務信息」插件提供）
+- 通知功能，包括建造，遠征，入渠，疲勞回覆通知，出擊時的船位、裝備與鎖船情況檢查，以及大破情況下進擊的提示（注：大破通知功能由「未卜先知」插件提供）
+- 支持界面自定義，包括界面佈局，主題，圖標與艦娘頭像顯示
+- 界面多語言支持
+- 提供了數據接口與插件 API 支持，便於通過插件進行擴展

tailwind.config.ts

@@ -63,5 +63,5 @@ export default {
     },
   },
   // eslint-disable-next-line @typescript-eslint/no-require-imports
-  plugins: [require('tailwindcss-animate')],
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
 } satisfies Config