first commit

common/resources/client/custom-page/custom-page-body.css

@@ -0,0 +1,4 @@
+.custom-page-body p:empty:before {
+  content: '';
+  display: inline-block;
+}

common/resources/client/custom-page/custom-page-body.tsx

@@ -0,0 +1,28 @@
+import {CustomPage} from '@common/admin/custom-pages/custom-page';
+import {useEffect, useRef} from 'react';
+import {highlightAllCode} from '@common/text-editor/highlight/highlight-code';
+
+interface CustomPageBodyProps {
+  page: CustomPage;
+}
+export function CustomPageBody({page}: CustomPageBodyProps) {
+  const bodyRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (bodyRef.current) {
+      highlightAllCode(bodyRef.current);
+    }
+  }, []);
+
+  return (
+    <div className="px-16 md:px-24">
+      <div className="custom-page-body prose mx-auto my-50 dark:prose-invert">
+        <h1>{page.title}</h1>
+        <div
+          ref={bodyRef}
+          className="whitespace-pre-wrap break-words"
+          dangerouslySetInnerHTML={{__html: page.body}}
+        />
+      </div>
+    </div>
+  );
+}

common/resources/client/custom-page/custom-page-layout.tsx

@@ -0,0 +1,40 @@
+import {useParams} from 'react-router-dom';
+import {useCustomPage} from './use-custom-page';
+import {Navbar} from '../ui/navigation/navbar/navbar';
+import {Footer} from '../ui/footer/footer';
+import {CustomPageBody} from '@common/custom-page/custom-page-body';
+import {PageMetaTags} from '@common/http/page-meta-tags';
+import {PageStatus} from '@common/http/page-status';
+import {useEffect} from 'react';
+
+interface Props {
+  slug?: string;
+}
+export function CustomPageLayout({slug}: Props) {
+  const {pageSlug} = useParams();
+  const query = useCustomPage(slug || pageSlug!);
+
+  useEffect(() => {
+    if (query.data?.page) {
+      window.scrollTo(0, 0);
+    }
+  }, [query]);
+
+  return (
+    <div className="flex flex-col min-h-screen bg">
+      <PageMetaTags query={query} />
+      <Navbar
+        menuPosition="custom-page-navbar"
+        className="flex-shrink-0 sticky top-0"
+      />
+      <div className="flex-auto">
+        {query.data ? (
+          <CustomPageBody page={query.data.page} />
+        ) : (
+          <PageStatus query={query} loaderClassName="mt-80" />
+        )}
+      </div>
+      <Footer className="mx-14 md:mx-40" />
+    </div>
+  );
+}

common/resources/client/custom-page/use-custom-page.ts

@@ -0,0 +1,35 @@
+import {useQuery} from '@tanstack/react-query';
+import {apiClient} from '../http/query-client';
+import {BackendResponse} from '../http/backend-response/backend-response';
+import {CustomPage} from '../admin/custom-pages/custom-page';
+import {useParams} from 'react-router-dom';
+import {getBootstrapData} from '@common/core/bootstrap-data/use-backend-bootstrap-data';
+
+const endpoint = (slugOrId: number | string) => `custom-pages/${slugOrId}`;
+
+export interface FetchCustomPageResponse extends BackendResponse {
+  page: CustomPage;
+}
+
+export function useCustomPage(pageId?: number | string) {
+  const params = useParams();
+  if (!pageId) {
+    pageId = params.pageId;
+  }
+  return useQuery({
+    queryKey: [endpoint(pageId!)],
+    queryFn: () => fetchCustomPage(pageId!),
+    initialData: () => {
+      const data = getBootstrapData().loaders?.customPage;
+      if (data?.page && (data.page.id == pageId || data.page.slug == pageId)) {
+        return data;
+      }
+    },
+  });
+}
+
+function fetchCustomPage(
+  slugOrId: number | string,
+): Promise<FetchCustomPageResponse> {
+  return apiClient.get(endpoint(slugOrId)).then(response => response.data);
+}