Add site information management with Markdown support

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>