next/index: customize the tagline in blue

Author: haraldschilly

src/packages/database/settings/customize.ts

@@ -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;
@@ -123,6 +123,7 @@ 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,

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

@@ -577,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/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) {

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

@@ -6,19 +6,22 @@
 import { CSSProperties } from "react";
 
 import Markdown from "@cocalc/frontend/editors/slate/static-markdown";
-import { FileContext } from "@cocalc/frontend/lib/file-context";
+import { FileContext, IFileContext } from "@cocalc/frontend/lib/file-context";
 import A from "components/misc/A";
 
 export default function SanitizedMarkdown({
   style,
   value,
+  anchorStyle,
 }: {
   style?: CSSProperties;
+  anchorStyle?: CSSProperties;
   value: string;
 }) {
-  const ctx = {
+  const ctx: IFileContext = {
     AnchorTagComponent: A,
     noSanitize: false,
+    anchorStyle,
   };
   return (
     <FileContext.Provider value={ctx}>

src/packages/next/components/support/create.tsx

@@ -1,6 +1,3 @@
-import { Icon } from "@cocalc/frontend/components/icon";
-import { is_valid_email_address as isValidEmailAddress } from "@cocalc/util/misc";
-import { COLORS } from "@cocalc/util/theme";
 import {
   Alert,
   Button,
@@ -11,6 +8,12 @@ import {
   Radio,
   Space,
 } from "antd";
+import { useRouter } from "next/router";
+import { ReactNode, useRef, useState } from "react";
+
+import { Icon } from "@cocalc/frontend/components/icon";
+import { is_valid_email_address as isValidEmailAddress } from "@cocalc/util/misc";
+import { COLORS } from "@cocalc/util/theme";
 import { Paragraph, Title } from "components/misc";
 import A from "components/misc/A";
 import ChatGPTHelp from "components/openai/chatgpt-help";
@@ -20,8 +23,6 @@ import SiteName from "components/share/site-name";
 import apiPost from "lib/api/post";
 import { MAX_WIDTH } from "lib/config";
 import { useCustomize } from "lib/customize";
-import { useRouter } from "next/router";
-import { ReactNode, useRef, useState } from "react";
 import getBrowserInfo from "./browser-info";
 import RecentFiles from "./recent-files";
 import { Type } from "./tickets";

src/packages/next/pages/index.tsx

@@ -12,7 +12,6 @@ import { COLORS } from "@cocalc/util/theme";
 import { RecentHeadline } from "@cocalc/util/types/news";
 import {
   CoCalcComFeatures,
-  Hero,
 } from "components/landing/cocalc-com-features";
 import Content from "components/landing/content";
 import Footer from "components/landing/footer";
@@ -29,6 +28,7 @@ import { Customize, CustomizeType } from "lib/customize";
 import { PublicPath as PublicPathType } from "lib/share/types";
 import withCustomize from "lib/with-customize";
 import screenshot from "public/cocalc-screenshot-20200128-nq8.png";
+import { Tagline } from "components/landing/tagline";
 
 const TOP_LINK_STYLE: CSS = { marginRight: "20px" } as const;
 
@@ -51,6 +51,7 @@ export default function Home(props: Props) {
     onCoCalcCom,
     account,
     isCommercial,
+    indexTagline,
   } = customize;
 
   function contentDescription() {
@@ -172,7 +173,7 @@ export default function Home(props: Props) {
               onCoCalcCom ? <Videos videos={YOUTUBE_IDS} /> : indexInfo
             }
           />
-          <Hero />
+          <Tagline value={indexTagline} />
           {renderCoCalcComFeatures()}
           <Footer />
         </Layout.Content>