Add documentation links (#343)

Author: 1ilit

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,18 +1,22 @@
+import { socials } from "../data/socials";
+
 export default function NotFound() {
   return (
     <div className="p-3 space-y-2">
       <p>hey there!</p>
 
       <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:[email protected]">
           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>
   );
 }