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;

src/css/custom.css

@@ -50,3 +50,18 @@ html[data-theme="dark"] {
 .navbar__logo {
   filter: var(--logo-filter);
 }
+
+.header-github-link::before {
+  content: "";
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background-color: var(--ifm-navbar-link-color);
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
+  transition: background-color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.header-github-link:hover::before {
+  background-color: var(--ifm-navbar-link-hover-color);
+}

src/plugin.js

@@ -1,11 +0,0 @@
-module.exports = function (context, options) {
-  return {
-    configureWebpack(config, isServer, utils) {
-      return {
-        module: {
-          rules: [{ test: /\.rs$/, use: "raw-loader" }],
-        },
-      };
-    },
-  };
-};