Add documentation links (#343)

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>
-    </>
-  );
-}