Add documentation links (#343)

public/robots.txt

@@ -2,7 +2,6 @@
 User-agent: *
 Allow: /
 Allow: /editor
-Allow: /shortcuts
 Allow: /templates
 Disallow: /bug-report
 Disallow: /survey

src/App.jsx

@@ -3,7 +3,6 @@ import { useLayoutEffect } from "react";
 import Editor from "./pages/Editor";
 import Survey from "./pages/Survey";
 import BugReport from "./pages/BugReport";
-import Shortcuts from "./pages/Shortcuts";
 import Templates from "./pages/Templates";
 import LandingPage from "./pages/LandingPage";
 import SettingsContextProvider from "./context/SettingsContext";
@@ -33,14 +32,6 @@ export default function App() {
               </ThemedPage>
             }
           />
-          <Route
-            path="/shortcuts"
-            element={
-              <ThemedPage>
-                <Shortcuts />
-              </ThemedPage>
-            }
-          />
           <Route
             path="/bug-report"
             element={

src/components/EditorHeader/ControlPanel.jsx

@@ -73,6 +73,7 @@ import { jsonToMermaid } from "../../utils/exportAs/mermaid";
 import { isRtl } from "../../i18n/utils/rtl";
 import { jsonToDocumentation } from "../../utils/exportAs/documentation";
 import { IdContext } from "../Workspace";
+import { socials } from "../../data/socials";
 
 export default function ControlPanel({
   diagramId,
@@ -1341,12 +1342,15 @@ export default function ControlPanel({
       },
     },
     help: {
-      shortcuts: {
-        function: () => window.open("/shortcuts", "_blank"),
+      docs: {
+        function: () => window.open(`${socials.docs}`, "_blank"),
         shortcut: "Ctrl+H",
       },
+      shortcuts: {
+        function: () => window.open(`${socials.docs}/shortcuts`, "_blank"),
+      },
       ask_on_discord: {
-        function: () => window.open("https://discord.gg/BrjZgNrmR6", "_blank"),
+        function: () => window.open(socials.discord, "_blank"),
       },
       report_bug: {
         function: () => window.open("/bug-report", "_blank"),
@@ -1382,7 +1386,7 @@ export default function ControlPanel({
   });
   useHotkeys("ctrl+alt+c, meta+alt+c", copyAsImage, { preventDefault: true });
   useHotkeys("ctrl+r, meta+r", resetView, { preventDefault: true });
-  useHotkeys("ctrl+h, meta+h", () => window.open("/shortcuts", "_blank"), {
+  useHotkeys("ctrl+h, meta+h", () => window.open(socials.docs, "_blank"), {
     preventDefault: true,
   });
   useHotkeys("ctrl+alt+w, meta+alt+w", fitWindow, { preventDefault: true });

src/components/Navbar.jsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import logo from "../assets/logo_light_160.png";
 import { SideSheet } from "@douyinfe/semi-ui";
 import { IconMenu } from "@douyinfe/semi-icons";
+import { socials } from "../data/socials";
 
 export default function Navbar() {
   const [openMenu, setOpenMenu] = useState(false);
@@ -37,12 +38,18 @@ export default function Navbar() {
             >
               Templates
             </Link>
+            <Link
+              to={socials.docs}
+              className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
+            >
+              Docs
+            </Link>
           </div>
           <div className="md:hidden block space-x-3 ms-12">
             <a
               title="Jump to Github"
               className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
-              href="https://github.com/drawdb-io/drawdb"
+              href={socials.github}
               target="_blank"
               rel="noreferrer"
             >
@@ -51,7 +58,7 @@ export default function Navbar() {
             <a
               title="Follow us on X"
               className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
-              href="https://x.com/drawDB_"
+              href={socials.twitter}
               target="_blank"
               rel="noreferrer"
             >
@@ -60,7 +67,7 @@ export default function Navbar() {
             <a
               title="Join the community on Discord"
               className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
-              href="https://discord.gg/BrjZgNrmR6"
+              href={socials.discord}
               target="_blank"
               rel="noreferrer"
             >
@@ -110,6 +117,12 @@ export default function Navbar() {
           Templates
         </Link>
         <hr />
+        <Link
+          to={socials.docs}
+          className="hover:bg-zinc-100 block p-3 text-base font-semibold"
+        >
+          Docs
+        </Link>
       </SideSheet>
     </>
   );

src/data/socials.js

@@ -0,0 +1,6 @@
+export const socials = {
+  docs: "https://drawdb-io.github.io/docs",
+  discord: "https://discord.gg/BrjZgNrmR6",
+  twitter: "https://x.com/drawDB_",
+  github: "https://github.com/drawdb-io/drawdb",
+};

src/i18n/locales/en.js

@@ -244,6 +244,7 @@ const en = {
     share_info:
       "* Sharing this link will not create a live real-time collaboration session.",
     show_relationship_labels: "Show relationship labels",
+    docs: "Docs",
   },
 };
 

src/pages/BugReport.jsx

@@ -16,6 +16,7 @@ import { $generateHtmlFromNodes } from "@lexical/html";
 import { CLEAR_EDITOR_COMMAND } from "lexical";
 import axios from "axios";
 import { Link } from "react-router-dom";
+import { socials } from "../data/socials";
 
 function Form({ theme }) {
   const [editor] = useLexicalComposerContext();
@@ -247,10 +248,7 @@ export default function BugReport() {
               icon={<IconGithubLogo />}
               style={{ backgroundColor: "#239144", color: "white" }}
               onClick={() => {
-                window.open(
-                  "https://github.com/drawdb-io/drawdb/issues",
-                  "_self",
-                );
+                window.open(`${socials.github}/issues`, "_self");
               }}
             >
               Add an issue

src/pages/LandingPage.jsx

@@ -16,6 +16,7 @@ import FadeIn from "../animations/FadeIn";
 import axios from "axios";
 import { languages } from "../i18n/i18n";
 import { Tweet } from "react-tweet";
+import { socials } from "../data/socials";
 
 function shortenNumber(number) {
   if (number < 1000) return number;
@@ -255,7 +256,7 @@ export default function LandingPage() {
           <div className="md:block md:space-y-3 flex gap-3 justify-center">
             <a
               className="inline-block"
-              href="https://github.com/drawdb-io/drawdb"
+              href={socials.github}
               target="_blank"
               rel="noreferrer"
             >
@@ -268,7 +269,7 @@ export default function LandingPage() {
             </a>
             <a
               className="inline-block"
-              href="https://discord.gg/BrjZgNrmR6"
+              href={socials.discord}
               target="_blank"
               rel="noreferrer"
             >
@@ -281,7 +282,7 @@ export default function LandingPage() {
             </a>
             <a
               className="inline-block"
-              href="https://x.com/drawdb_"
+              href={socials.twitter}
               target="_blank"
               rel="noreferrer"
             >
@@ -363,7 +364,10 @@ const features = [
     content: (
       <div>
         Speed up development with keyboard shortuts. See all available shortcuts
-        <Link to="/shortcuts" className="ms-1.5 text-blue-500 hover:underline">
+        <Link
+          to={`${socials.docs}/shortcuts`}
+          className="ms-1.5 text-blue-500 hover:underline"
+        >
           here
         </Link>
         .

src/pages/NotFound.jsx

@@ -1,3 +1,5 @@
+import { socials } from "../data/socials";
+
 export default function NotFound() {
   return (
     <div className="p-3 space-y-2">
@@ -5,14 +7,16 @@ export default function NotFound() {
 
       <p>looking for something you couldn&apos;t find?</p>
       <p>
+        check out the{" "}
+        <a className="text-blue-600" href={socials.docs}>
+          docs
+        </a>
+        ,{" "}
         <a className="text-blue-600" href="mailto:drawdb@outlook.com">
           shoot us an email
         </a>{" "}
         or{" "}
-        <a
-          className="text-blue-600"
-          href="https://discord.gg/BrjZgNrmR6"
-        >
+        <a className="text-blue-600" href={socials.discord}>
           a message on discord
         </a>
       </p>
@@ -21,6 +25,12 @@ export default function NotFound() {
         * to create a relationship hold the blue dot of a field and drag it
         towards the field you want to connect it to
       </p>
+      <a
+        className="text-blue-600"
+        href={`${socials.docs}/create-diagram#relationships`}
+      >
+        see here
+      </a>
     </div>
   );
 }

src/pages/Shortcuts.jsx

@@ -1,143 +0,0 @@
-import { useEffect, useState } from "react";
-import logo_light from "../assets/logo_light_160.png";
-import logo_dark from "../assets/logo_dark_160.png";
-import { AutoComplete, Button } from "@douyinfe/semi-ui";
-import { IconSearch, IconSun, IconMoon } from "@douyinfe/semi-icons";
-import { Link } from "react-router-dom";
-import { shortcuts } from "../data/shortcuts";
-
-export default function Shortcuts() {
-  const [theme, setTheme] = useState("");
-  const [value, setValue] = useState("");
-  const [filteredResult, setFilteredResult] = useState(
-    shortcuts.map((t) => {
-      return t.shortcut;
-    })
-  );
-
-  const handleStringSearch = (value) => {
-    setFilteredResult(
-      shortcuts
-        .filter(
-          (i) =>
-            i.shortcut.toLowerCase().includes(value.toLowerCase()) ||
-            i.title.toLowerCase().includes(value.toLowerCase())
-        )
-        .map((i) => i.shortcut)
-    );
-  };
-
-  useEffect(() => {
-    setTheme(localStorage.getItem("theme"));
-    document.title = "Shortcuts | drawDB";
-    document.body.setAttribute("class", "theme");
-  }, [setTheme]);
-
-  const changeTheme = () => {
-    const body = document.body;
-    const t = body.getAttribute("theme-mode");
-    if (t === "dark") {
-      if (body.hasAttribute("theme-mode")) {
-        body.setAttribute("theme-mode", "light");
-        setTheme("light");
-      }
-    } else {
-      if (body.hasAttribute("theme-mode")) {
-        body.setAttribute("theme-mode", "dark");
-        setTheme("dark");
-      }
-    }
-  };
-
-  return (
-    <>
-      <div className="sm:py-3 py-5 px-20 sm:px-6 flex justify-between items-center">
-        <div className="flex items-center justify-start">
-          <Link to="/">
-            <img
-              src={theme === "dark" ? logo_dark : logo_light}
-              alt="logo"
-              className="me-2 sm:h-[28px] md:h-[46px] h-[48px]"
-            />
-          </Link>
-          <div className="ms-4 sm:text-sm xl:text-lg font-semibold">
-            Keyboard shortcuts
-          </div>
-        </div>
-        <div className="flex items-center">
-          <Button
-            icon={
-              theme === "dark" ? (
-                <IconSun size="extra-large" />
-              ) : (
-                <IconMoon size="extra-large" />
-              )
-            }
-            theme="borderless"
-            onClick={changeTheme}
-          />
-          <div className="ms-2 lg:inline md:inline sm:hidden">
-            <AutoComplete
-              prefix={<IconSearch />}
-              placeholder="Search..."
-              data={filteredResult}
-              value={value}
-              onSearch={(v) => handleStringSearch(v)}
-              emptyContent={
-                <div className="p-3 popover-theme">No shortcuts found</div>
-              }
-              onChange={(v) => setValue(v)}
-              onSelect={() => {}}
-            ></AutoComplete>
-          </div>
-        </div>
-      </div>
-      <hr
-        className={theme === "dark" ? "border-zinc-700" : "border-zinc-300"}
-      />
-      <div className="w-full mt-4 mx-auto sm:inline-block hidden text-center">
-        <AutoComplete
-          prefix={<IconSearch />}
-          placeholder="Search..."
-          className="w-[80%]"
-          data={filteredResult}
-          value={value}
-          onSearch={(v) => handleStringSearch(v)}
-          emptyContent={
-            <div className="p-3 popover-theme">No shortcuts found</div>
-          }
-          onChange={(v) => setValue(v)}
-          onSelect={() => {}}
-        ></AutoComplete>
-      </div>
-      <div className="grid sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 my-6 mx-20 sm:mx-6 gap-5 select-none">
-        {shortcuts.map((s, i) => (
-          <div className="p-3 card-theme rounded" key={i}>
-            <div className="flex justify-between sm:text-sm">
-              <div className="font-semibold me-2">{s.shortcut}</div>
-              <div>{s.title}</div>
-            </div>
-            {s.description && (
-              <>
-                <hr
-                  className={`${
-                    theme === "dark" ? "border-zinc-600" : "border-zinc-400"
-                  } my-2`}
-                />
-                <div className="sm:text-xs text-sm">{s.description}</div>
-              </>
-            )}
-          </div>
-        ))}
-      </div>
-      <hr
-        className={`${
-          theme === "dark" ? "border-zinc-700" : "border-zinc-300"
-        } my-1`}
-      />
-      <div className="text-center text-sm py-3">
-        &copy; 2024 <strong>drawDB</strong> - All right reserved.
-      </div>
-    </>
-  );
-}