feat: add custome sidebar fucntion

i18n/en_US.yaml

@@ -1420,6 +1420,9 @@ ui:
       footer:
         label: Footer
         text: This will insert before </html>.
+      sidebar:
+        label: Sidebar
+        text: This will insert in sidebar.
     login:
       page_title: Login
       membership:

ui/src/common/interface.ts

@@ -385,6 +385,7 @@ export interface AdminSettingsCustom {
   custom_head: string;
   custom_header: string;
   custom_footer: string;
+  custom_sidebar: string;
 }
 
 export interface AdminSettingsLogin {

ui/src/components/CustomSidebar/index.tsx

@@ -0,0 +1,11 @@
+import { memo } from 'react';
+
+import { customizeStore } from '@/stores';
+
+const Index = () => {
+  const { custom_sidebar } = customizeStore((state) => state);
+  if (!custom_sidebar) return null;
+  return <div dangerouslySetInnerHTML={{ __html: custom_sidebar }} />;
+};
+
+export default memo(Index);

ui/src/components/index.ts

@@ -38,6 +38,7 @@ import Counts from './Counts';
 import QuestionList from './QuestionList';
 import HotQuestions from './HotQuestions';
 import HttpErrorContent from './HttpErrorContent';
+import CustomSidebar from './CustomSidebar';
 
 export {
   Avatar,
@@ -82,5 +83,6 @@ export {
   QuestionList,
   HotQuestions,
   HttpErrorContent,
+  CustomSidebar,
 };
 export type { EditorRef, JSONSchema, UISchema };

ui/src/pages/Admin/CssAndHtml/index.tsx

@@ -31,6 +31,11 @@ const Index: FC = () => {
         title: t('header.label'),
         description: t('header.text'),
       },
+      custom_sidebar: {
+        type: 'string',
+        title: t('sidebar.label'),
+        description: t('sidebar.text'),
+      },
       custom_footer: {
         type: 'string',
         title: t('footer.label'),
@@ -60,6 +65,13 @@ const Index: FC = () => {
         className: ['fs-14', 'font-monospace'],
       },
     },
+    custom_sidebar: {
+      'ui:widget': 'textarea',
+      'ui:options': {
+        rows: 10,
+        className: ['fs-14', 'font-monospace'],
+      },
+    },
     custom_footer: {
       'ui:widget': 'textarea',
       'ui:options': {
@@ -77,6 +89,7 @@ const Index: FC = () => {
       custom_css: formData.custom_css.value,
       custom_head: formData.custom_head.value,
       custom_header: formData.custom_header.value,
+      custom_sidebar: formData.custom_sidebar.value,
       custom_footer: formData.custom_footer.value,
     };
 
@@ -103,6 +116,7 @@ const Index: FC = () => {
         formMeta.custom_css.value = setting.custom_css;
         formMeta.custom_head.value = setting.custom_head;
         formMeta.custom_header.value = setting.custom_header;
+        formMeta.custom_sidebar.value = setting.custom_sidebar;
         formMeta.custom_footer.value = setting.custom_footer;
         setFormData(formMeta);
       }

ui/src/pages/Questions/Detail/index.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
-import { Pagination } from '@/components';
+import { Pagination, CustomSidebar } from '@/components';
 import { loggedUserInfoStore, toastStore } from '@/stores';
 import { scrollToElementTop } from '@/utils';
 import { usePageTags, usePageUsers } from '@/hooks';
@@ -256,6 +256,7 @@ const Index = () => {
             )}
         </Col>
         <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
+          <CustomSidebar />
           <RelatedQuestions id={question?.id || ''} />
         </Col>
       </Row>

ui/src/pages/Questions/index.tsx

@@ -4,7 +4,12 @@ import { useMatch, Link, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import { usePageTags } from '@/hooks';
-import { FollowingTags, QuestionList, HotQuestions } from '@/components';
+import {
+  FollowingTags,
+  QuestionList,
+  HotQuestions,
+  CustomSidebar,
+} from '@/components';
 import { siteInfoStore, loggedUserInfoStore } from '@/stores';
 import { useQuestionList } from '@/services';
 import * as Type from '@/common/interface';
@@ -44,6 +49,7 @@ const Questions: FC = () => {
           />
         </Col>
         <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
+          <CustomSidebar />
           {!loggedUser.username && (
             <div className="card mb-4">
               <div className="card-body">

ui/src/pages/Tags/Detail/index.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 
 import { usePageTags } from '@/hooks';
 import * as Type from '@/common/interface';
-import { FollowingTags } from '@/components';
+import { FollowingTags, CustomSidebar } from '@/components';
 import {
   useTagInfo,
   useFollow,
@@ -152,6 +152,7 @@ const Questions: FC = () => {
           <QuestionList source="tag" data={listData} isLoading={listLoading} />
         </Col>
         <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
+          <CustomSidebar />
           <FollowingTags />
           <HotQuestions />
         </Col>

ui/src/stores/customize.ts

@@ -5,11 +5,13 @@ interface IType {
   custom_head: string;
   custom_header: string;
   custom_footer: string;
+  custom_sidebar: string;
   update: (params: {
     custom_css?: string;
     custom_head?: string;
     custom_header?: string;
     custom_footer?: string;
+    custom_sidebar?: string;
   }) => void;
 }
 
@@ -18,6 +20,7 @@ const loginSetting = create<IType>((set) => ({
   custom_head: '',
   custom_header: '',
   custom_footer: '',
+  custom_sidebar: '',
   update: (params) =>
     set((state) => {
       return {