next/latex: start working on the latex landing page ...

Author: haraldschilly

src/packages/frontend/account/dark-mode.ts

@@ -10,9 +10,6 @@ import { AccountStore } from "./store";
 
 export const DARK_MODE_KEYS = ["brightness", "contrast", "sepia"] as const;
 
-// Icon unicode character for dark mode toggle (◑ - circle with right half black)
-export const DARK_MODE_ICON = 0x25d1;
-
 type Config = Record<(typeof DARK_MODE_KEYS)[number], number>;
 
 export const DARK_MODE_MINS: Config = {

src/packages/frontend/account/other-settings.tsx

@@ -4,10 +4,10 @@
  */
 
 import { Button, Card, Slider } from "antd";
-import { debounce } from "lodash";
 import { Map } from "immutable";
+import { debounce } from "lodash";
 import { useMemo } from "react";
-import { defineMessages, FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage, defineMessages, useIntl } from "react-intl";
 
 import { Checkbox, Panel } from "@cocalc/frontend/antd-bootstrap";
 import { Rendered, redux, useTypedRedux } from "@cocalc/frontend/app-framework";
@@ -41,15 +41,15 @@ import {
 import { NewFilenameFamilies } from "@cocalc/frontend/project/utils";
 import track from "@cocalc/frontend/user-tracking";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
+import { DARK_MODE_ICON } from "@cocalc/util/consts/ui";
 import { DEFAULT_NEW_FILENAMES, NEW_FILENAMES } from "@cocalc/util/db-schema";
+import { DARK_MODE_DEFAULTS } from "@cocalc/util/db-schema/accounts";
 import { OTHER_SETTINGS_REPLY_ENGLISH_KEY } from "@cocalc/util/i18n/const";
 import {
-  DARK_MODE_ICON,
   DARK_MODE_KEYS,
   DARK_MODE_MINS,
   get_dark_mode_config,
 } from "./dark-mode";
-import { DARK_MODE_DEFAULTS } from "@cocalc/util/db-schema/accounts";
 import { I18NSelector, I18N_MESSAGE, I18N_TITLE } from "./i18n-selector";
 import Messages from "./messages";
 import Tours from "./tours";

src/packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx

@@ -10,7 +10,6 @@ import { debounce } from "lodash";
 import { useEffect, useRef } from "react";
 import { defineMessage, IntlShape, useIntl } from "react-intl";
 
-import { DARK_MODE_ICON } from "@cocalc/frontend/account/dark-mode";
 import { set_account_table } from "@cocalc/frontend/account/util";
 import { redux } from "@cocalc/frontend/app-framework";
 import { Icon } from "@cocalc/frontend/components";
@@ -30,6 +29,7 @@ import { isSupportedExtension } from "@cocalc/frontend/project/page/home-page/ai
 import { AI_GENERATE_DOC_TAG } from "@cocalc/frontend/project/page/home-page/ai-generate-utils";
 import openSupportTab from "@cocalc/frontend/support/open";
 import userTracking from "@cocalc/frontend/user-tracking";
+import { DARK_MODE_ICON } from "@cocalc/util/consts/ui";
 import { filename_extension } from "@cocalc/util/misc";
 import { addCommands } from "./commands";
 import { SEARCH_COMMANDS } from "./const";

src/packages/frontend/frame-editors/latex-editor/output-control-build.tsx

@@ -12,9 +12,8 @@ import type { MenuProps } from "antd";
 import { Dropdown } from "antd";
 import { useIntl } from "react-intl";
 
-import { Button as BSButton } from "@cocalc/frontend/antd-bootstrap";
-import { DARK_MODE_ICON } from "@cocalc/frontend/account/dark-mode";
 import { set_account_table } from "@cocalc/frontend/account/util";
+import { Button as BSButton } from "@cocalc/frontend/antd-bootstrap";
 import { useRedux, useTypedRedux } from "@cocalc/frontend/app-framework";
 import { Icon } from "@cocalc/frontend/components";
 import { COMMANDS } from "@cocalc/frontend/frame-editors/frame-tree/commands";
@@ -24,6 +23,7 @@ import {
   BUILD_ON_SAVE_LABEL,
 } from "@cocalc/frontend/frame-editors/frame-tree/commands/generic-commands";
 import { editor, IntlMessage } from "@cocalc/frontend/i18n";
+import { DARK_MODE_ICON } from "@cocalc/util/consts/ui";
 
 import { Actions } from "./actions";
 

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

@@ -23,7 +23,7 @@ interface Props {
   belowWide?: boolean;
   caption?: ReactNode;
   children: ReactNode;
-  icon?: IconName;
+  icon?: IconName | JSX.Element;
   image?: string | StaticImageData;
   imageComponent?: ReactNode; // if set, this replaces the image!
   level?: TitleProps["level"];
@@ -130,9 +130,9 @@ export default function Info({
         ...textStyle,
       }}
     >
-      {icon && (
+      {icon != null && (
         <span style={{ fontSize: "24pt", marginRight: "5px" }}>
-          <Icon name={icon} />{" "}
+          {typeof icon === "string" ? <Icon name={icon} /> : icon}{" "}
         </span>
       )}
       {title}

src/packages/next/pages/features/latex-editor.tsx

@@ -6,6 +6,8 @@
 import { Descriptions, Layout } from "antd";
 
 import { Icon } from "@cocalc/frontend/components/icon";
+import { DARK_MODE_ICON } from "@cocalc/util/consts/ui";
+
 import Backups from "components/landing/backups";
 import Code from "components/landing/code";
 import Collaboration from "components/landing/collaboration";
@@ -21,18 +23,22 @@ import Publishing from "components/landing/publishing";
 import SignIn from "components/landing/sign-in";
 import { Paragraph, Text, Title } from "components/misc";
 import A from "components/misc/A";
+
 import { Customize } from "lib/customize";
 import withCustomize from "lib/with-customize";
-import LatexCollab from "public/features/cocalc-latex-concurrent-editing.png";
-import LatexEditorImage from "public/features/cocalc-latex-editor-2019.png";
+
+import LatexCollab from "public/features/latex-editor-realtime-sync-20251003.png";
 import Sidechat from "public/features/cocalc-latex-side-chat-v2.png";
 import Pythontex from "public/features/cocalc-pythontex.png";
 import Sagetex from "public/features/cocalc-sagetex.png";
 import AIFormula from "public/features/latex-ai-formula.png";
 import CustomCommand from "public/features/latex-custom-command-02.png";
+import LatexDarkMode from "public/features/latex-editor-darkmode-20251003.png";
+import LatexEditorImage from "public/features/latex-editor-main-20251003.png";
 import Knitr from "public/features/latex-editor-rnw-01.png";
 import LatexTimetravel from "public/features/latex-editor-timetravel-01.png";
 import Logo from "public/features/latex-logo.svg";
+import LatexPythontex from "public/features/latex-editor-pythontex-20251003.png";
 
 export default function LatexEditor({ customize }) {
   return (
@@ -49,11 +55,11 @@ export default function LatexEditor({ customize }) {
             subtitle={
               <>
                 Focus on writing LaTeX. CoCalc takes care of everything else.
-                <hr />
+                {/*<hr />
                 <A href="https://about.cocalc.com/2023/01/13/cocalcs-online-latex-editor/">
                   Learn much more about LaTeX in CoCalc from this new blog
                   post...
-                </A>
+                </A> */}
               </>
             }
             image={LatexEditorImage}
@@ -218,7 +224,7 @@ export default function LatexEditor({ customize }) {
             anchor="a-computational"
             icon="laptop"
             title="Full computational environment"
-            image={LatexEditorImage}
+            image={LatexPythontex}
             alt="Two browser windows editing the same LaTeX file"
             wide
           >
@@ -481,6 +487,40 @@ export default function LatexEditor({ customize }) {
             </Paragraph>
           </Info>
 
+          <Info
+            anchor="a-darkmode"
+            icon={
+              <Icon style={{ fontSize: "40px" }} unicode={DARK_MODE_ICON} />
+            }
+            title={"Dark Mode with PDF Support"}
+            image={LatexDarkMode}
+          >
+            <Paragraph>
+              If you like working in{" "}
+              <span
+                style={{
+                  background: "black",
+                  color: "white",
+                  padding: "2px 5px",
+                }}
+              >
+                Dark Mode
+              </span>
+              , feel welcome to CoCalc as well!
+            </Paragraph>
+            <Paragraph>
+              {" "}
+              The <LaTeX /> editor not only supports the usual dark mode
+              funcionality, but also styling the PDF. This means despite that
+              your resulting PDF will be on a white page, you see it with a dark
+              page and bright font characters.{" "}
+            </Paragraph>
+            <Paragraph>
+              There is also a button to quickly disable the PDF dark mode, to
+              double check the actual output.
+            </Paragraph>
+          </Info>
+
           <Info
             anchor="a-timetravel"
             title="TimeTravel"