TypeScript compatibility (#379)

* Update file extensions and exports for TypeScript compatibility

* docs: fix typo in getting-started.md

* chore: add no-trailing-punctuation rule to VS Code settings

* feat: add @docusaurus/theme-mermaid for mermaid diagram support

* Update import paths for MermaidDiagram component

* remove redudndant check, use effect only runs after the component is mounted

* Update docusaurus.config.ts to fix syntax error

* bring back check because it's not possible to properly cancel a dynamic import

* feat: optimize dynamic import in CodeBlock component

* chore: update VS Code extensions.json with eslint recommendation

* Update docusaurus.config.ts to add GitHub repository link in header

src/components/code_block.tsx

@@ -1,31 +1,38 @@
 import React, { useState, useEffect } from "react";
 import RenderCodeBlock from "@theme/CodeBlock";
+import { useIsMounted } from "usehooks-ts";
 
-const CodeBlock = ({ example, file, section, language }) => {
+type Props = {
+  example: string;
+  file?: string;
+  section: string;
+  language?: string;
+};
+
+const CodeBlock = ({ example, file, section, language }: Props) => {
+  const isMounted = useIsMounted();
   const [code, setCode] = useState("");
 
   useEffect(() => {
-    let isMounted = true;
-
     const path =
       file === "manifest" ? "Cargo.toml" : `src/${file ?? "main.rs"}`;
 
     import(`!!raw-loader!@site/examples/${example}/${path}`)
       .then((source) => {
+        if (!isMounted()) {
+          return;
+        }
+
         source = source.default.match(
           new RegExp(
-            `(?:\/\/|#) <${section}>\n([\\s\\S]*)(?:\/\/|#) <\/${section}>`,
-          ),
+            `(?:\/\/|#) <${section}>\n([\\s\\S]*)(?:\/\/|#) <\/${section}>`
+          )
         )[1];
 
-        if (isMounted) setCode(source);
+        setCode(source);
       })
       .catch((err) => console.log(err));
-
-    return () => {
-      isMounted = false;
-    };
-  }, []);
+  }, [isMounted]);
 
   return (
     <RenderCodeBlock className={`language-${language ?? "rust"}`}>

src/components/mermaid_diagram.tsx

@@ -0,0 +1,12 @@
+import Mermaid from "@theme/Mermaid";
+import React from "react";
+
+type Props = {
+  value: string;
+};
+
+const MermaidDiagram = ({ value }: Props) => {
+  return <Mermaid value={value} />;
+};
+
+export default MermaidDiagram;

src/components/shell_block.jsx

@@ -1,11 +0,0 @@
-import RenderCodeBlock from "@theme/CodeBlock";
-
-const ShellBlock = ({ children }) => {
-  return (
-    <RenderCodeBlock className={`language-console`}>
-      {children}
-    </RenderCodeBlock>
-  );
-};
-
-export default ShellBlock;

src/components/shell_block.tsx

@@ -0,0 +1,14 @@
+import RenderCodeBlock from "@theme/CodeBlock";
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const ShellBlock = ({ children }: Props) => {
+  return (
+    <RenderCodeBlock className={`language-console`}>{children}</RenderCodeBlock>
+  );
+};
+
+export default ShellBlock;