Merge pull request #7611 from sagemathinc/next-custom-support

next/onprem: support, chatgpt, tagline

Author: williamstein

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 {
@@ -29,6 +29,7 @@ export interface Customize {
   logoRectangularURL?: string;
   splashImage?: string;
   indexInfo?: string;
+  indexTagline?: string;
   imprint?: string;
   policies?: string;
   shareServer?: boolean;
@@ -42,7 +43,6 @@ export interface Customize {
   accountCreationInstructions?: string;
   zendesk?: boolean; // true if zendesk support is configured.
   stripePublishableKey?: string;
-  index_info_html?: string;
   imprint_html?: string;
   policies_html?: string;
   reCaptchaKey?: string;
@@ -59,6 +59,7 @@ export interface Customize {
   jupyterApiEnabled?: boolean;
   computeServersEnabled?: boolean;
   githubProjectId?: string;
+  support?: string;
 }
 
 const fallback = (a?: string, b?: string): string =>
@@ -122,8 +123,10 @@ export default async function getCustomize(): Promise<Customize> {
     googleAnalytics: settings.google_analytics,
 
     indexInfo: settings.index_info_html,
+    indexTagline: settings.index_tagline,
     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/frontend/editors/slate/elements/link/index.tsx

@@ -3,18 +3,19 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
-import { CSSProperties } from "react";
 import { Text } from "slate";
-import { register, SlateElement } from "../register";
-import { dict } from "@cocalc/util/misc";
+
+import { CSS } from "@cocalc/frontend/app-framework";
 import { useFileContext } from "@cocalc/frontend/lib/file-context";
+import { dict } from "@cocalc/util/misc";
+import { register, SlateElement } from "../register";
 
-export const LINK_STYLE = {
+export const LINK_STYLE: CSS = {
   backgroundColor: "white",
   padding: "1px",
   margin: "-1px", // so the position isn't changed; important when background is white so doesn't look weird.
   borderRadius: "2px",
-} as CSSProperties;
+} as const;
 
 export interface Link extends SlateElement {
   type: "link";
@@ -29,14 +30,15 @@ register({
   StaticElement: ({ attributes, children, element }) => {
     const node = element as Link;
     let { url, title } = node;
-    const { AnchorTagComponent, urlTransform } = useFileContext();
+    const { AnchorTagComponent, urlTransform, anchorStyle } = useFileContext();
+    const style: CSS = { ...LINK_STYLE, ...anchorStyle };
     if (AnchorTagComponent != null) {
       return (
         <AnchorTagComponent
           {...attributes}
           href={url}
           title={title}
-          style={LINK_STYLE}
+          style={style}
         >
           {children}
         </AnchorTagComponent>
@@ -52,7 +54,7 @@ register({
       };
     }
     return (
-      <a {...attributes} {...props} title={title} style={LINK_STYLE}>
+      <a {...attributes} {...props} title={title} style={style}>
         {children}
         {isBlank(element) && <span contentEditable={false}>(blank link)</span>}
       </a>

src/packages/frontend/editors/slate/static-markdown.tsx

@@ -10,10 +10,11 @@ application.
 */
 
 import { CSSProperties, useEffect, useState } from "react";
+
 import "./elements/init-ssr";
 import { getStaticRender } from "./elements/register";
-import { markdown_to_slate as markdownToSlate } from "./markdown-to-slate";
 import Leaf from "./leaf";
+import { markdown_to_slate as markdownToSlate } from "./markdown-to-slate";
 import { ChangeContext } from "./use-change";
 
 interface Props {

src/packages/frontend/lib/file-context.ts

@@ -14,7 +14,7 @@ import React, {
   ReactNode,
 } from "react";
 
-interface IFileContext {
+export interface IFileContext {
   // allow customizing anchor tags that get generated by various components, e.g., Markdown via slate.
   AnchorTagComponent?: React.FC<{
     href?: string;
@@ -41,6 +41,7 @@ interface IFileContext {
   // If given, then when an anchor (A) tag is clicked
   // on, the given function is called.
   anchorTagAction?: (url: string) => void;
+  anchorStyle?: CSSProperties;
 
   // If given, then all href and src attributes in all
   // tags are transformed by urlTransform, except anchor

src/packages/next/components/landing/cocalc-com-features.tsx

@@ -37,6 +37,7 @@ export function CoCalcComFeatures() {
     sandboxProjectId,
     jupyterApiEnabled,
     shareServer = false,
+    onCoCalcCom,
   } = useCustomize();
   const width = Grid.useBreakpoint();
 
@@ -515,7 +516,7 @@ export function CoCalcComFeatures() {
   }
 
   function renderChatGPT() {
-    if (!openaiEnabled) return;
+    if (!openaiEnabled || !onCoCalcCom) return;
     return (
       <Info
         level={LANDING_HEADER_LEVEL}
@@ -576,28 +577,3 @@ export function CoCalcComFeatures() {
     </>
   );
 }
-
-export function Hero() {
-  return (
-    <Info.Heading
-      level={2}
-      textStyle={{ color: "white" }}
-      style={{
-        backgroundColor: COLORS.BLUE_D,
-        paddingBottom: "30px",
-        marginTop: "30px",
-        paddingTop: "30px",
-      }}
-    >
-      Realtime collaborative{" "}
-      <A href="/features/jupyter-notebook" style={{ color: "white" }}>
-        Jupyter notebooks
-      </A>
-      ,{" "}
-      <A href="/features/latex-editor" style={{ color: "white" }}>
-        LaTeX
-      </A>
-      , Markdown, and Linux with GPUs
-    </Info.Heading>
-  );
-}

src/packages/next/components/landing/header.tsx

@@ -144,10 +144,7 @@ export default function Header(props: Props) {
           </a>
         )}
         {enabledPages?.store && (
-          <A
-            href="/store"
-            style={page == "store" ? SelectedStyle : LinkStyle}
-          >
+          <A href="/store" style={page == "store" ? SelectedStyle : LinkStyle}>
             Store
           </A>
         )}
@@ -255,6 +252,7 @@ export default function Header(props: Props) {
       </Layout.Header>
       <SubNav page={page} subPage={subPage} softwareEnv={softwareEnv} />
       {openaiEnabled &&
+      onCoCalcCom &&
       page === "features" &&
       typeof subPage === "string" &&
       SHOW_AI_CHAT.includes(subPage) ? (
@@ -266,9 +264,9 @@ export default function Header(props: Props) {
           />
         </div>
       ) : undefined}
-      {jupyterApiEnabled && onCoCalcCom && runnableTag && (
+      {jupyterApiEnabled && onCoCalcCom && runnableTag ? (
         <DemoCell tag={runnableTag} />
-      )}
+      ) : undefined}
     </>
   );
 }

src/packages/next/components/landing/index-list.tsx

@@ -12,7 +12,7 @@ import Image, { StaticImageData } from "components/landing/image";
 import { Paragraph, Title } from "components/misc";
 import A from "components/misc/A";
 import { MAX_WIDTH } from "lib/config";
-import useCustomize from "lib/use-customize";
+import useCustomize, { CustomizeType } from "lib/use-customize";
 
 export interface Item {
   link: string;
@@ -25,7 +25,7 @@ export interface Item {
   description: ReactNode;
   shareServer?: boolean; // only show if the share server is enabled
   landingPages?: boolean; // only show if landing pages are enabled.
-  hide?: (CustomizeType) => boolean; // if returns true, then this item will be hidden.
+  hide?: (customize: CustomizeType) => boolean; // if returns true, then this item will be hidden.
 }
 
 export type DataSource = Item[];

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",
@@ -124,10 +124,34 @@ const support = {
   community: { label: "Community" },
   new: { label: "New Ticket", hide: (customize) => !customize.zendesk },
   tickets: { label: "Tickets", hide: (customize) => !customize.zendesk },
-  chatgpt: { label: "ChatGPT", hide: (customize) => !customize.openaiEnabled },
+  chatgpt: {
+    label: "ChatGPT",
+    hide: (customize) => !customize.openaiEnabled || !customize.onCoCalcCom,
+  },
 } 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,
@@ -143,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
@@ -181,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/landing/tagline.tsx

@@ -0,0 +1,52 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2024 Sagemath, Inc.
+ *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
+ */
+
+import { COLORS } from "@cocalc/util/theme";
+import Info from "components/landing/info";
+import { CSS } from "components/misc";
+import A from "components/misc/A";
+import SanitizedMarkdown from "components/misc/sanitized-markdown";
+
+const A_STYLE: CSS = {
+  color: "white",
+  backgroundColor: "transparent",
+} as const;
+
+export function Tagline({ value }: { value?: string }) {
+  function renderContent() {
+    if (value) {
+      return <SanitizedMarkdown value={value} anchorStyle={A_STYLE} />;
+    } else {
+      return (
+        <>
+          Realtime collaborative{" "}
+          <A href="/features/jupyter-notebook" style={A_STYLE}>
+            Jupyter notebooks
+          </A>
+          ,{" "}
+          <A href="/features/latex-editor" style={A_STYLE}>
+            LaTeX
+          </A>
+          , Markdown, and Linux with GPUs
+        </>
+      );
+    }
+  }
+
+  return (
+    <Info.Heading
+      level={2}
+      textStyle={{ color: "white" }}
+      style={{
+        backgroundColor: COLORS.BLUE_D,
+        paddingBottom: "30px",
+        marginTop: "30px",
+        paddingTop: "30px",
+      }}
+    >
+      {renderContent()}
+    </Info.Heading>
+  );
+}

src/packages/next/components/misc/A.tsx

@@ -4,9 +4,10 @@
  */
 
 import Link from "next/link";
-import basePath from "lib/base-path";
 import { join } from "path";
 
+import basePath from "lib/base-path";
+
 export default function A(props: any) {
   const { href } = props;
   if (href == null) {