From 956d35579b91db3f31bf6b3ca846d0c07b6711cb Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Wed, 26 Mar 2025 16:53:54 +0500
Subject: [PATCH] feat: add about page

---
 app/about/page.tsx  |  16 ++++++
 app/pages/About.tsx | 119 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 135 insertions(+)
 create mode 100644 app/about/page.tsx
 create mode 100644 app/pages/About.tsx

diff --git a/app/about/page.tsx b/app/about/page.tsx
new file mode 100644
index 0000000..a44f27e
--- /dev/null
+++ b/app/about/page.tsx
@@ -0,0 +1,16 @@
+export const metadata = {
+  title: "О приложении",
+  openGraph: {
+    title: "AniX - Неофициальный веб клиент для Anixart",
+    description:
+      "AniX - это неофициальный веб-клиент для Android-приложения Anixart. Он позволяет вам получать доступ к своей учетной записи Anixart и управлять ею из веб-браузера. Так-же можно синхронизировать и управлять списками и избранным. И самое главное смотреть все доступные аниме из базы Anixart.",
+  },
+};
+
+export const dynamic = "force-static";
+
+import { AboutPage } from "#/pages/About";
+
+export default function Index() {
+  return <AboutPage />;
+}
diff --git a/app/pages/About.tsx b/app/pages/About.tsx
new file mode 100644
index 0000000..0d423be
--- /dev/null
+++ b/app/pages/About.tsx
@@ -0,0 +1,119 @@
+// "use client";
+
+import { Card } from "flowbite-react";
+import Image from "next/image";
+
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { CURRENT_APP_VERSION } from "#/api/config";
+import Styles from "../components/ChangelogModal/ChangelogModal.module.css";
+import Markdown from "markdown-to-jsx";
+
+export const AboutPage = () => {
+  const directoryPath = path.join(process.cwd(), "public/changelog");
+  const files = fs.readdirSync(directoryPath);
+  const changelogs = [];
+
+  files.forEach((file) => {
+    if (file != `${CURRENT_APP_VERSION}.md`) {
+      const changelog = fs.readFileSync(path.join(directoryPath, file), "utf8");
+      changelogs.push({
+        version: file.replace(".md", ""),
+        changelog: changelog,
+      });
+    }
+  });
+
+  if (!files.includes(`${CURRENT_APP_VERSION}.md`)) {
+    changelogs.push({
+      version: CURRENT_APP_VERSION,
+      changelog: "Нет списка изменений",
+    });
+  } else {
+    const changelog = fs.readFileSync(
+      path.join(directoryPath, `${CURRENT_APP_VERSION}.md`),
+      "utf8"
+    );
+    changelogs.push({
+      version: CURRENT_APP_VERSION,
+      changelog: changelog,
+    });
+  }
+
+  return (
+    <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
+      <Card className="md:col-span-2 lg:col-span-3">
+        <div className="flex flex-col items-center gap-4 md:flex-row">
+          <Image
+            src="/images/icons/icon-512x512.png"
+            className="flex-shrink-0 w-32 h-32 rounded-full"
+            alt="about image"
+            width={128}
+            height={128}
+          />
+          <div>
+            <h1 className="text-xl font-bold">
+              AniX - Неофициальный веб клиент для Anixart
+            </h1>
+            <p className="max-w-[900px]">
+              AniX - это неофициальный веб-клиент для Android-приложения
+              Anixart. Он позволяет вам получать доступ к своей учетной записи
+              Anixart и управлять ею из веб-браузера. Так-же можно
+              синхронизировать и управлять списками и избранным. И самое главное
+              смотреть все доступные аниме из базы Anixart.
+            </p>
+          </div>
+        </div>
+      </Card>
+      <Card>
+        <div className="flex items-center gap-4">
+          <Image
+            src="https://radiquum.wah.su/static/avatar_512.jpg"
+            className="flex-shrink-0 w-16 h-16 rounded-full"
+            alt="developer image"
+            width={128}
+            height={128}
+          />
+          <div>
+            <h1 className="text-xl font-bold">Radiquum</h1>
+            <p className="text-sm text-gray-500 dark:text-gray-200">
+              Разработчик
+            </p>
+          </div>
+        </div>
+      </Card>
+      <Card>
+        <div className="flex items-center gap-4">
+          <span className="w-16 h-16 iconify fa6-brands--telegram text-[#001725] dark:text-[#faf8f9]"></span>
+          <div>
+            <h1 className="text-xl font-bold">Телеграм канал</h1>
+            <p className="text-sm text-gray-500 dark:text-gray-200">
+              @anix_web
+            </p>
+          </div>
+        </div>
+      </Card>
+      <Card>
+        <div className="flex items-center gap-4">
+          <span className="flex-shrink-0 w-16 h-16 iconify fa6-brands--github text-[#001725] dark:text-[#faf8f9]"></span>
+          <div>
+            <h1 className="text-xl font-bold">Код на GitHub</h1>
+            <p className="text-sm text-gray-500 dark:text-gray-200">
+              github.com/Radiquum/AniX
+            </p>
+          </div>
+        </div>
+      </Card>
+      <Card className="md:col-span-2 lg:col-span-3">
+        <h1 className="text-2xl font-bold">Список изменений</h1>
+        {changelogs.reverse().map((changelog) => (
+          <div key={changelog.version} className="my-4">
+            <Markdown className={Styles.markdown}>
+              {changelog.changelog}
+            </Markdown>
+          </div>
+        ))}
+      </Card>
+    </div>
+  );
+};