next/support: make it possible to customize support page like for policies and imprint

Author: haraldschilly

src/packages/database/settings/customize.ts

@@ -3,13 +3,13 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
+import getStrategies from "@cocalc/database/settings/get-sso-strategies";
 import {
-  KucalcValues,
   KUCALC_COCALC_COM,
+  KucalcValues,
 } from "@cocalc/util/db-schema/site-defaults";
 import { Strategy } from "@cocalc/util/types/sso";
-import getStrategies from "@cocalc/database/settings/get-sso-strategies";
-import { getServerSettings, ServerSettings } from "./server-settings";
+import { ServerSettings, getServerSettings } from "./server-settings";
 import siteURL from "./site-url";
 
 export interface Customize {
@@ -59,6 +59,7 @@ export interface Customize {
   jupyterApiEnabled?: boolean;
   computeServersEnabled?: boolean;
   githubProjectId?: string;
+  support?: string;
 }
 
 const fallback = (a?: string, b?: string): string =>
@@ -124,6 +125,7 @@ export default async function getCustomize(): Promise<Customize> {
     indexInfo: settings.index_info_html,
     imprint: settings.imprint,
     policies: settings.policies,
+    support: settings.support,
 
     // Is important for invite emails, password reset, etc. (e.g., so we can construct a url to our site).
     // This *can* start with http:// to explicitly use http instead of https, and can end

src/packages/next/components/landing/sub-nav.tsx

@@ -19,7 +19,7 @@ import Logo from "components/logo";
 import { CSS } from "components/misc";
 import A from "components/misc/A";
 import { MAX_WIDTH_LANDING } from "lib/config";
-import { useCustomize } from "lib/customize";
+import { CustomizeType, useCustomize } from "lib/customize";
 
 const BASE_STYLE: CSS = {
   backgroundColor: "white",
@@ -130,7 +130,28 @@ const support = {
   },
 } as const;
 
-const PAGES = {
+type PageKey =
+  | "about"
+  | "features"
+  | "software"
+  | "pricing"
+  | "policies"
+  | "share"
+  | "info"
+  | "sign-up"
+  | "sign-in"
+  | "try"
+  | "support"
+  | "news"
+  | "store";
+
+const PAGES: {
+  [top in PageKey]:
+    | {
+        [page: string]: { label: string; hide?: (c: CustomizeType) => boolean };
+      }
+    | { index: {} };
+} = {
   about,
   features,
   software,
@@ -146,7 +167,7 @@ const PAGES = {
   store: {},
 } as const;
 
-export type Page = keyof typeof PAGES | "account";
+export type Page = PageKey | "account";
 export type SubPage =
   | keyof typeof software
   | keyof typeof features
@@ -184,6 +205,10 @@ export default function SubNav(props: Props) {
   }, [subnavRef]);
 
   if (page == null) return null;
+
+  // if we define a custom support page, render it instead – and hide the sub menu
+  if (customize.support && !customize.onCoCalcCom) return null;
+
   const tabs: JSX.Element[] = [];
   const p = PAGES[page];
   if (p == null || isEmpty(p)) return null;

src/packages/next/components/misc/sanitized-markdown.tsx

@@ -4,8 +4,9 @@
  */
 
 import { CSSProperties } from "react";
-import { FileContext } from "@cocalc/frontend/lib/file-context";
+
 import Markdown from "@cocalc/frontend/editors/slate/static-markdown";
+import { FileContext } from "@cocalc/frontend/lib/file-context";
 import A from "components/misc/A";
 
 export default function SanitizedMarkdown({

src/packages/next/lib/customize.ts

@@ -68,6 +68,7 @@ interface Customize extends ServerCustomize {
   jupyterApiEnabled?: boolean; // backend configured to use a pool of projects for sandboxed ephemeral jupyter code execution
   computeServersEnabled?: boolean; // backend configured to run on external compute servers
   enabledPages?: EnabledPageTree; // tree structure which specifies supported routes for this install
+  support?: string; // HTML/MD to replace the generic support pages
 }
 
 const CustomizeContext = createContext<Partial<Customize>>({});

src/packages/next/lib/with-customize.ts

@@ -101,7 +101,7 @@ export default async function withCustomize(
     share: customize.shareServer,
     software: customize.landingPages,
     store: customize.landingPages && customize.isCommercial,
-    support: true,
+    support: true, // always enabled, but for on-prem && settings.support, we render a different page
     systemActivity: true,
     status: customize.onCoCalcCom,
     termsOfService: !customize.landingPages && !!customize.termsOfServiceURL,

src/packages/next/pages/policies/imprint.tsx

@@ -3,14 +3,14 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
-import { Row, Col } from "antd";
-import withCustomize from "lib/with-customize";
-import Header from "components/landing/header";
-import Head from "components/landing/head";
+import { Col, Layout, Row } from "antd";
+
 import Footer from "components/landing/footer";
+import Head from "components/landing/head";
+import Header from "components/landing/header";
 import SanitizedMarkdown from "components/misc/sanitized-markdown";
 import { Customize } from "lib/customize";
-import { Layout } from "antd";
+import withCustomize from "lib/with-customize";
 
 export default function Imprint({ customize }) {
   const { imprint } = customize;
@@ -24,10 +24,10 @@ export default function Imprint({ customize }) {
             xs={{ span: 12, offset: 6 }}
             style={{ marginTop: "30px", marginBottom: "30px" }}
           >
-            {imprint && <SanitizedMarkdown value={imprint} />}
+            {imprint ? <SanitizedMarkdown value={imprint} /> : undefined}
           </Col>
         </Row>
-        <Footer />{" "}
+        <Footer />
       </Layout>
     </Customize>
   );

src/packages/next/pages/policies/policies.tsx

@@ -3,14 +3,14 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
-import { Row, Col } from "antd";
-import withCustomize from "lib/with-customize";
-import Header from "components/landing/header";
-import Head from "components/landing/head";
+import { Col, Layout, Row } from "antd";
+
 import Footer from "components/landing/footer";
+import Head from "components/landing/head";
+import Header from "components/landing/header";
 import SanitizedMarkdown from "components/misc/sanitized-markdown";
 import { Customize } from "lib/customize";
-import { Layout } from "antd";
+import withCustomize from "lib/with-customize";
 
 export default function Policies({ customize }) {
   const { policies } = customize;
@@ -27,7 +27,7 @@ export default function Policies({ customize }) {
             {policies && <SanitizedMarkdown value={policies} />}
           </Col>
         </Row>
-        <Footer />{" "}
+        <Footer />
       </Layout>
     </Customize>
   );

src/packages/next/pages/support/index.tsx

@@ -1,4 +1,4 @@
-import { Layout } from "antd";
+import { Col, Layout } from "antd";
 
 import Footer from "components/landing/footer";
 import Head from "components/landing/head";
@@ -9,6 +9,8 @@ import { Customize } from "lib/customize";
 import withCustomize from "lib/with-customize";
 
 import IndexList, { DataSource } from "components/landing/index-list";
+import { Title } from "components/misc";
+import SanitizedMarkdown from "components/misc/sanitized-markdown";
 
 const dataSource = [
   {
@@ -100,11 +102,24 @@ const dataSource = [
 ] as DataSource;
 
 export default function Preferences({ customize }) {
-  return (
-    <Customize value={customize}>
-      <Head title="Support" />
-      <Layout>
-        <Header page="support" />
+  const { support, onCoCalcCom } = customize;
+
+  function renderContent() {
+    if (!onCoCalcCom && support) {
+      return (
+        <Col
+          xs={{ span: 12, offset: 6 }}
+          style={{
+            marginTop: "30px",
+            marginBottom: "30px",
+          }}
+        >
+          <Title level={2}>Support</Title>
+          <SanitizedMarkdown value={support} />
+        </Col>
+      );
+    } else {
+      return (
         <IndexList
           title="Support"
           description={
@@ -118,6 +133,16 @@ export default function Preferences({ customize }) {
           }
           dataSource={dataSource}
         />
+      );
+    }
+  }
+
+  return (
+    <Customize value={customize}>
+      <Head title="Support" />
+      <Layout>
+        <Header page="support" />
+        {renderContent()}
         <Footer />
       </Layout>
     </Customize>

src/packages/util/db-schema/site-defaults.ts

@@ -53,6 +53,7 @@ export type SiteSettingsKeys =
   | "index_info_html"
   | "imprint"
   | "policies"
+  | "support"
   | "openai_enabled"
   | "google_vertexai_enabled"
   | "mistral_enabled"
@@ -473,6 +474,15 @@ export const site_settings_conf: SiteSettings = {
     multiline: 5,
     tags: ["Theme"],
   },
+  support: {
+    name: "Support page (on-prem only)",
+    desc: "If set, shown instead of the generic support pages – HTML/Markdown.",
+    default: "",
+    clearable: true,
+    show: (conf) => show_theming_vars(conf) && not_cocalc_com(conf),
+    multiline: 5,
+    tags: ["Theme"],
+  },
   // ============== END THEMING ============
 
   versions: {