Add basic help modal

src/components/app.tsx

@@ -2,15 +2,23 @@ import { Fragment, h } from "preact";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
 import { Session } from "../session";
-import { useStoredString, getRandomColour, randomName } from "../utils";
+import {
+  useStoredString,
+  getRandomColour,
+  randomName,
+  useFlag,
+} from "../utils";
 
 import Editor from "./editor";
 import Header from "./header";
+import Help from "./help";
 import MermaidRenderer from "./mermaid-renderer";
+import Modal from "./modal";
 import Resizable from "./resizable";
 
 export default function App({ session }: { session: Session }) {
   const [contents, setContents] = useState("");
+  const helpFlag = useFlag(false);
 
   // TODO: Allow changing.
   const [username] = useStoredString("username", randomName());
@@ -37,7 +45,7 @@ export default function App({ session }: { session: Session }) {
   return (
     <Fragment>
       <div className="vh-100 d-flex flex-column">
-        <Header session={session} />
+        <Header session={session} showHelp={helpFlag.turnOn} />
         <div className="h-100 flex-fill d-flex">
           <Resizable initialWidth={460} minWidth={200}>
             <div className="h-100 overflow-auto">
@@ -53,6 +61,15 @@ export default function App({ session }: { session: Session }) {
           </div>
         </div>
       </div>
+      {/* Modals */}
+      <Modal
+        visible={helpFlag.on}
+        onHide={helpFlag.turnOff}
+        title="Help"
+        scrollable
+      >
+        <Help />
+      </Modal>
     </Fragment>
   );
 }

src/components/header.tsx

@@ -4,7 +4,13 @@ import { Session } from "../session";
 
 import ClipboardButton from "./clipboard-button";
 
-const Header = ({ session }: { session: Session }) => {
+const Header = ({
+  session,
+  showHelp,
+}: {
+  session: Session;
+  showHelp?: () => void;
+}) => {
   return (
     <header className="navbar-light bg-light">
       <nav className="container-fluid d-flex flex-wrap align-items-baseline justify-content-between border-bottom">
@@ -24,11 +30,19 @@ const Header = ({ session }: { session: Session }) => {
             Copy session URL
           </ClipboardButton>
           <button
-            className="btn btn-danger btn-sm"
+            className="btn btn-danger btn-sm me-2"
             onClick={() => session.refresh()}
           >
             New session
           </button>
+          {showHelp && (
+            <button
+              className="btn btn-outline-secondary btn-sm"
+              onClick={showHelp}
+            >
+              Help
+            </button>
+          )}
         </div>
       </nav>
     </header>

src/components/help.tsx

@@ -0,0 +1,48 @@
+import { h, Fragment } from "preact";
+
+// TODO: Check about using MDX for this.
+const Help = () => (
+  <Fragment>
+    <p className="alert alert-warning">
+      🚧 This is very much a work in progress. Expect rough edges and paper
+      cuts. 🚧
+    </p>
+    <h3 className="h5">What is this?</h3>
+    <p>
+      This is a collaborative live editor for{" "}
+      <a href="https://mermaid.js.org">Mermaid</a> diagrams. If you don't care
+      about multiplayer, the existing{" "}
+      <a href="https://mermaid.live">live editor</a> is probably a better option
+      for a single user.
+    </p>
+    <h3>How do I collaborate?</h3>
+    <ul>
+      <li>
+        If you share the current URL with someone you'll be able to edit the
+        diagram concurrently with live rendering.
+      </li>
+      <li>All diagrams supported by Mermaid v10+ should be supported as is.</li>
+      <li>
+        There is no persistence, when the last user leaves a room the document
+        will be lost. This is primarily aimed at live collaboration sessions
+        after which the diagram can be copy-pasted in a document.
+      </li>
+    </ul>
+    <h3 className="h5">Security / privacy</h3>
+    <p>
+      This tool currently relies on a WebSocket sharing server which sees the
+      document updates. It's not recording anything but you generally shouldn't
+      use it for anything sensitive.
+      <br />
+      Work is in progress to support peer to peer through WEB RTC and encrypted
+      collaboration.
+    </p>
+    <hr />
+    <p>
+      Find more details on{" "}
+      <a href="https://github.com/lirsacc/siren-chorus">GitHub</a>
+    </p>
+  </Fragment>
+);
+
+export default Help;

src/components/modal.tsx

@@ -2,15 +2,23 @@ import { ComponentChildren, h } from "preact";
 import { useRef, useState, useEffect } from "preact/hooks";
 
 import * as b from "bootstrap";
+import classNames from "classnames";
 
 interface ModalProps {
   children: ComponentChildren;
   visible: boolean;
   title: ComponentChildren;
+  scrollable: boolean;
   onHide?: () => void;
 }
 
-const Modal = ({ children, visible, title, onHide }: ModalProps) => {
+const Modal = ({
+  children,
+  visible,
+  title,
+  onHide,
+  scrollable,
+}: ModalProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const [modal, setModal] = useState<b.Modal | null>(null);
 
@@ -35,12 +43,14 @@ const Modal = ({ children, visible, title, onHide }: ModalProps) => {
 
   return (
     <div className="modal fade" ref={ref} tabIndex={-1} aria-hidden={!visible}>
-      <div className="modal-dialog">
+      <div
+        className={classNames("modal-dialog", {
+          "modal-dialog-scrollable": scrollable,
+        })}
+      >
         <div className="modal-content">
           <div className="modal-header">
-            <h5 className="modal-title" id="exampleModalLabel">
-              {title}
-            </h5>
+            <h5 className="modal-title">{title}</h5>
             {onHide && (
               <button
                 type="button"