Add site information management with Markdown support

frontend/src/app.ts

@@ -3,6 +3,7 @@ import {User} from "./network/models.ts";
 interface MyWindow extends Window {
   serverName?: string;
   cloudflareTurnstileSiteKey?: string;
+  siteInfo?: string;
 }
 
 class App {
@@ -14,6 +15,8 @@ class App {
 
   cloudflareTurnstileSiteKey: string | null = null;
 
+  siteInfo = ""
+
   constructor() {
     this.init();
   }
@@ -29,6 +32,7 @@ class App {
     }
     this.appName = (window as MyWindow).serverName || this.appName;
     this.cloudflareTurnstileSiteKey = (window as MyWindow).cloudflareTurnstileSiteKey || null;
+    this.siteInfo = (window as MyWindow).siteInfo || "";
   }
 
   saveData() {

frontend/src/components/input.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 interface InputProps {
   type?: string;
   placeholder?: string;
@@ -19,4 +21,20 @@ export default function Input(props: InputProps) {
       <input type={props.type} className="input w-full" placeholder={props.placeholder} value={props.value} onChange={props.onChange} />
     </fieldset>
   }
+}
+
+interface TextAreaProps {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  label: string;
+  height?: string | number;
+}
+
+export function TextArea(props: TextAreaProps) {
+  return <fieldset className="fieldset w-full">
+    <legend className="fieldset-legend">{props.label}</legend>
+    <textarea className={`textarea w-full ${props.height != undefined ? "resize-none" : ""}`} value={props.value} onChange={props.onChange} style={{
+      height: props.height,
+    }} />
+  </fieldset>
 }

frontend/src/i18n.ts

@@ -149,6 +149,7 @@ export const i18nData = {
       "Search Tags": "Search Tags",
       "Edit Resource": "Edit Resource",
       "Change Bio": "Change Bio",
+      "About this site": "About this site",
     }
   },
   "zh-CN": {
@@ -301,6 +302,7 @@ export const i18nData = {
       "Search Tags": "搜索标签",
       "Edit Resource": "编辑资源",
       "Change Bio": "更改个人简介",
+      "About this site": "关于此网站",
     }
   },
   "zh-TW": {
@@ -453,6 +455,7 @@ export const i18nData = {
       "Search Tags": "搜尋標籤",
       "Edit Resource": "編輯資源",
       "Change Bio": "更改個人簡介",
+      "About this site": "關於此網站",
     }
   }
 }

frontend/src/network/models.ts

@@ -122,4 +122,5 @@ export interface ServerConfig {
   cloudflare_turnstile_secret_key: string;
   server_name: string;
   server_description: string;
+  site_info: string;
 }

frontend/src/pages/home_page.tsx

@@ -1,12 +1,33 @@
-import { useEffect } from "react";
+import {useEffect, useState} from "react";
 import ResourcesView from "../components/resources_view.tsx";
 import {network} from "../network/network.ts";
 import { app } from "../app.ts";
+import Markdown from "react-markdown";
+import {useTranslation} from "react-i18next";
 
 export default function HomePage() {
   useEffect(() => {
     document.title = app.appName;
   }, [])
 
-  return <ResourcesView loader={(page) => network.getResources(page)}></ResourcesView>
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const {t} = useTranslation()
+
+  return <>
+    {
+      app.siteInfo && <div className={"mt-4 px-4"}>
+        <div className="collapse collapse-arrow bg-base-100 border border-base-300 cursor-pointer" onClick={() => setIsCollapsed(!isCollapsed)}>
+          <input type="radio" name="my-accordion-2" checked={isCollapsed}/>
+          <div className="collapse-title font-semibold">{t("About this site")}</div>
+          <article className="collapse-content text-sm">
+            <Markdown>
+              {app.siteInfo}
+            </Markdown>
+          </article>
+        </div>
+      </div>
+    }
+    <ResourcesView loader={(page) => network.getResources(page)}></ResourcesView>
+  </>
 }

frontend/src/pages/manage_server_config_page.tsx

@@ -4,7 +4,7 @@ import { ErrorAlert, InfoAlert } from "../components/alert"
 import { useEffect, useState } from "react";
 import { ServerConfig } from "../network/models";
 import Loading from "../components/loading";
-import Input from "../components/input";
+import Input, {TextArea} from "../components/input";
 import { network } from "../network/network";
 import showToast from "../components/toast";
 import Button from "../components/button";
@@ -90,6 +90,9 @@ export default function ManageServerConfigPage() {
     <Input type="text" value={config.cloudflare_turnstile_secret_key} label="Cloudflare Turnstile Secret Key" onChange={(e) => {
       setConfig({...config, cloudflare_turnstile_secret_key: e.target.value })
     }}></Input>
+    <TextArea value={config.site_info} onChange={(e) => {
+      setConfig({...config, site_info: e.target.value })
+    }} label="Site info (Markdown)" height={180} />
     <InfoAlert className="my-2" message="If the cloudflare turnstile keys are not empty, the turnstile will be used for register and download." />
     <div className="flex justify-end">
       <Button className="btn-accent shadow" isLoading={isLoading}>{t("Submit")}</Button>