In-app help manual

ui/v2.5/src/components/Changelog/versions/v030.tsx

@@ -3,6 +3,7 @@ import ReactMarkdown from "react-markdown";
 
 const markup = `
 ### ✨ New Features
+*  Add in-app help manual.
 *  Add support for parent/child studios.
 
 ### 🎨 Improvements

ui/v2.5/src/components/Help/Manual.tsx

@@ -0,0 +1,150 @@
+import React, { useState } from "react";
+import { Modal, Container, Row, Col, Nav, Tab } from "react-bootstrap";
+import Introduction from "src/docs/en/Introduction.md";
+import Tasks from "src/docs/en/Tasks.md";
+import AutoTagging from "src/docs/en/AutoTagging.md";
+import JSONSpec from "src/docs/en/JSONSpec.md";
+import Configuration from "src/docs/en/Configuration.md";
+import Interface from "src/docs/en/Interface.md";
+import Galleries from "src/docs/en/Galleries.md";
+import Scraping from "src/docs/en/Scraping.md";
+import Contributing from "src/docs/en/Contributing.md";
+import SceneFilenameParser from "src/docs/en/SceneFilenameParser.md";
+import Help from "src/docs/en/Help.md";
+import { Page } from "./Page";
+
+interface IManualProps {
+  show: boolean;
+  onClose: () => void;
+}
+
+export const Manual: React.FC<IManualProps> = ({ show, onClose }) => {
+  const content = [
+    {
+      key: "Introduction.md",
+      title: "Introduction",
+      content: Introduction,
+    },
+    {
+      key: "Configuration.md",
+      title: "Configuration",
+      content: Configuration,
+    },
+    {
+      key: "Interface.md",
+      title: "Interface",
+      content: Interface,
+    },
+    {
+      key: "Tasks.md",
+      title: "Tasks",
+      content: Tasks,
+    },
+    {
+      key: "AutoTagging.md",
+      title: "Auto Tagging",
+      content: AutoTagging,
+      className: "indent-1",
+    },
+    {
+      key: "SceneFilenameParser.md",
+      title: "Scene Filename Parser",
+      content: SceneFilenameParser,
+      className: "indent-1",
+    },
+    {
+      key: "JSONSpec.md",
+      title: "JSON Specification",
+      content: JSONSpec,
+      className: "indent-1",
+    },
+    {
+      key: "Galleries.md",
+      title: "Image Galleries",
+      content: Galleries,
+    },
+    {
+      key: "Scraping.md",
+      title: "Metadata Scraping",
+      content: Scraping,
+    },
+    {
+      key: "Contributing.md",
+      title: "Contributing",
+      content: Contributing,
+    },
+    {
+      key: "Help.md",
+      title: "Further Help",
+      content: Help,
+    },
+  ];
+
+  const [activeTab, setActiveTab] = useState(content[0].key);
+
+  // links to other manual pages are specified as "/help/page.md"
+  // intercept clicks to these pages and set the tab accordingly
+  function interceptLinkClick(
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) {
+    if (event.target instanceof HTMLAnchorElement) {
+      const href = (event.target as HTMLAnchorElement).getAttribute("href");
+      if (href && href.startsWith("/help")) {
+        const newKey = (event.target as HTMLAnchorElement).pathname.substring(
+          "/help/".length
+        );
+        setActiveTab(newKey);
+        event.preventDefault();
+      }
+    }
+  }
+
+  return (
+    <Modal
+      show={show}
+      onHide={onClose}
+      dialogClassName="modal-dialog-scrollable manual modal-xl"
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>Help</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Container className="manual-container">
+          <Tab.Container
+            activeKey={activeTab}
+            onSelect={(k) => setActiveTab(k)}
+            id="manual-tabs"
+          >
+            <Row>
+              <Col lg={3} className="mb-3 mb-lg-0">
+                <Nav variant="pills" className="flex-column">
+                  {content.map((c) => {
+                    return (
+                      <Nav.Item>
+                        <Nav.Link className={c.className} eventKey={c.key}>
+                          {c.title}
+                        </Nav.Link>
+                      </Nav.Item>
+                    );
+                  })}
+                  <hr className="d-sm-none" />
+                </Nav>
+              </Col>
+              <Col lg={9} className="manual-content">
+                <Tab.Content>
+                  {content.map((c) => {
+                    return (
+                      <Tab.Pane eventKey={c.key} onClick={interceptLinkClick}>
+                        <Page page={c.content} />
+                      </Tab.Pane>
+                    );
+                  })}
+                </Tab.Content>
+              </Col>
+            </Row>
+          </Tab.Container>
+        </Container>
+      </Modal.Body>
+    </Modal>
+  );
+};

ui/v2.5/src/components/Help/Page.tsx

@@ -0,0 +1,22 @@
+import React, { useEffect, useState } from "react";
+import ReactMarkdown from "react-markdown";
+
+interface IPageProps {
+  // page is a markdown module
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  page: any;
+}
+
+export const Page: React.FC<IPageProps> = ({ page }) => {
+  const [markdown, setMarkdown] = useState("");
+
+  useEffect(() => {
+    if (!markdown) {
+      fetch(page)
+        .then((res) => res.text())
+        .then((text) => setMarkdown(text));
+    }
+  }, [page, markdown]);
+
+  return <ReactMarkdown className="manual-page" source={markdown} />;
+};

ui/v2.5/src/components/Help/styles.scss

@@ -0,0 +1,137 @@
+.manual {
+  background-color: #30404d;
+  color: $text-color;
+
+  .close {
+    color: $text-color;
+  }
+
+  .manual-container {
+    padding-left: 1px;
+    padding-right: 5px;
+  }
+
+  .modal-header,
+  .modal-body {
+    background-color: #30404d;
+    color: $text-color;
+    overflow-y: hidden;
+  }
+}
+
+.manual .manual-content {
+  max-height: calc(100vh - 10rem);
+  overflow-y: auto;
+
+  .manual-page {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-bottom: 16px;
+      margin-top: 24px;
+    }
+
+    & > h1:first-child,
+    & > h2:first-child,
+    & > h3:first-child,
+    & > h4:first-child,
+    & > h5:first-child,
+    & > h6:first-child {
+      margin-top: 0;
+    }
+
+    h1,
+    h2 {
+      padding-bottom: 0.3em;
+    }
+
+    h1 {
+      font-size: 2rem;
+    }
+
+    h2 {
+      font-size: 1.83rem;
+    }
+
+    h3 {
+      font-size: 1.67rem;
+    }
+
+    h4 {
+      font-size: 1.5rem;
+    }
+
+    h5 {
+      font-size: 1.33rem;
+    }
+
+    code {
+      background-color: darken($color: #30404d, $amount: 3);
+      color: $text-color;
+      padding: 0.2em 0.4em;
+    }
+
+    blockquote {
+      p {
+        margin-bottom: 0;
+        vertical-align: middle;
+      }
+    }
+
+    blockquote,
+    pre {
+      code {
+        padding: 0;
+      }
+
+      background-color: darken($color: #30404d, $amount: 3);
+      border-radius: 3px;
+      padding: 16px;
+    }
+
+    pre {
+      font-size: 85%;
+      line-height: 1.45;
+      overflow: auto;
+    }
+
+    table {
+      display: block;
+      margin-bottom: 16px;
+      overflow: auto;
+      width: 100%;
+
+      tr {
+        border-top: 1px solid darken($color: #201d1a, $amount: 3);
+      }
+
+      tr:nth-child(2n) {
+        background-color: darken($color: #30404d, $amount: 2);
+      }
+
+      td,
+      th {
+        border: 1px solid darken($color: #201d1a, $amount: 3);
+        padding: 6px 13px;
+      }
+    }
+  }
+
+  .indent-1 {
+    padding-left: 2rem;
+  }
+}
+
+@media (max-width: 992px) {
+  .manual .modal-body {
+    overflow-y: auto;
+
+    .manual-content {
+      max-height: inherit;
+      overflow-y: hidden;
+    }
+  }
+}