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

docs/conn_lifecycle.md

@@ -2,6 +2,12 @@
 title: Connection Lifecycle
 ---
 
+import MermaidDiagram from "@site/src/components/mermaid_diagram";
+import connection_overview from '!!raw-loader!@site/static/img/diagrams/connection_overview.mmd';
+import connection_accept from '!!raw-loader!@site/static/img/diagrams/connection_accept.mmd';
+import connection_worker from '!!raw-loader!@site/static/img/diagrams/connection_worker.mmd';
+import connection_request from '!!raw-loader!@site/static/img/diagrams/connection_request.mmd';
+
 # Architecture overview
 
 After Server has started listening to all sockets, [`Accept`][accept] and [`Worker`][worker] are two main loops responsible for processing incoming client connections.
@@ -10,23 +16,23 @@ Once connection accepted Application level protocol processing happens in a prot
 
     Please note, below diagrams are outlining happy-path scenarios only.
 
-![Connection Overview](/img/diagrams/connection_overview.svg)
+<MermaidDiagram value={connection_overview}  />
 
 ## Accept loop in more detail
 
-![Connection Accept](/img/diagrams/connection_accept.svg "Connection Accept")
+<MermaidDiagram value={connection_accept}  />
 
 Most of code implementation resides in [`actix-server`][server] crate for struct [`Accept`][accept].
 
 ## Worker loop in more detail
 
-![Connection Worker](/img/diagrams/connection_worker.svg "Connection Worker")
+<MermaidDiagram value={connection_worker}  />
 
 Most of code implementation resides in [`actix-server`][server] crate for struct [`Worker`][worker].
 
 ## Request loop roughly
 
-![Connection Request](/img/diagrams/connection_request.svg "Connection Request")
+<MermaidDiagram value={connection_request}  />
 
 Most of code implementation for request loop resides in [`actix-web`][web] and [`actix-http`][http] crates.
 

docs/getting-started.md

@@ -2,14 +2,16 @@
 title: Getting Started
 ---
 
-import RenderCodeBlock from '@theme/CodeBlock'; import CodeBlock from "@site/src/components/code_block"; import { rustVersion, actixWebMajorVersion } from "@site/vars";
+import RenderCodeBlock from '@theme/CodeBlock';
+import CodeBlock from "@site/src/components/code_block";
+import vars from "@site/vars";
 
 ## Installing Rust
 
 If you don't have Rust yet, we recommend you use `rustup` to manage your Rust installation. The [official rust guide][rustguide] has a wonderful section on getting started.
 
 <p>
-Actix Web currently has a minimum supported Rust version (MSRV) of { rustVersion }. Running <code>rustup update</code> will ensure you have the latest and greatest Rust version available. As such, this guide assumes you are running Rust { rustVersion } or later.
+Actix Web currently has a minimum supported Rust version (MSRV) of { vars.rustVersion }. Running <code>rustup update</code> will ensure you have the latest and greatest Rust version available. As such, this guide assumes you are running Rust { vars.rustVersion } or later.
 </p>
 
 ## Hello, world!
@@ -27,7 +29,7 @@ Add `actix-web` as a dependency of your project by adding the following to your
 
 <RenderCodeBlock className="language-toml">
 {`[dependencies]
-actix-web = "${actixWebMajorVersion}"`}
+actix-web = "${vars.actixWebMajorVersion}"`}
 </RenderCodeBlock>
 
 Request handlers use async functions that accept zero or more parameters. These parameters can be extracted from a request (see `FromRequest` trait) and returns a type that can be converted into an `HttpResponse` (see `Responder` trait):

docs/http2.md

@@ -2,7 +2,8 @@
 title: HTTP/2
 ---
 
-import RenderCodeBlock from '@theme/CodeBlock'; import CodeBlock from '@site/src/components/code_block'; import { actixWebMajorVersion } from "@site/vars";
+import RenderCodeBlock from '@theme/CodeBlock';
+import CodeBlock from '@site/src/components/code_block';
 
 `actix-web` automatically upgrades connections to _HTTP/2_ if possible.
 

docs/http_server_init.md

@@ -2,6 +2,10 @@
 title: HTTP Server Initialization
 ---
 
+import CodeBlock from "@site/src/components/code_block";
+import MermaidDiagram from "@site/src/components/mermaid_diagram";
+import http_server from '!!raw-loader!@site/static/img/diagrams/http_server.mmd';
+
 # Architecture overview
 
 Below is a diagram of HttpServer initialization, which happens on the following code
@@ -19,4 +23,4 @@ async fn main() -> std::io::Result<()> {
 }
 ```
 
-![HTTP Server Diagram](/img/diagrams/http_server.svg)
+<MermaidDiagram value={http_server}  />

docs/server.md

@@ -2,7 +2,9 @@
 title: Server
 ---
 
-import RenderCodeBlock from '@theme/CodeBlock'; import CodeBlock from '@site/src/components/code_block'; import { actixWebMajorVersion } from "@site/vars";
+import RenderCodeBlock from '@theme/CodeBlock';
+import CodeBlock from '@site/src/components/code_block';
+import vars from "@site/vars";
 
 # The HTTP Server
 
@@ -60,7 +62,7 @@ The `rustls` crate feature is for `rustls` integration and `openssl` is for `ope
 
 <RenderCodeBlock className="language-toml">
 {`[dependencies]
-actix-web = { version = "${actixWebMajorVersion}", features = ["openssl"] }
+actix-web = { version = "${vars.actixWebMajorVersion}", features = ["openssl"] }
 openssl = { version = "0.10" }
 `}
 </RenderCodeBlock>

docs/whatis.md

@@ -2,7 +2,7 @@
 title: What is Actix Web
 ---
 
-import { rustVersion } from "@site/vars";
+import vars from "@site/vars";
 
 # Actix Web is part of an Ecosystem of Crates
 
@@ -16,7 +16,7 @@ We call Actix Web a powerful and pragmatic framework. For all intents and purpos
 An application developed with Actix Web will expose an HTTP server contained within a native executable. You can either put this behind another HTTP server like nginx or serve it up as-is. Even in the complete absence of another HTTP server, Actix Web is powerful enough to provide HTTP/1 and HTTP/2 support as well as TLS (HTTPS). This makes it useful for building small services ready for production.
 
 <p>
-Most importantly: Actix Web runs on Rust { rustVersion } or later and it works with stable releases.
+Most importantly: Actix Web runs on Rust { vars.rustVersion } or later and it works with stable releases.
 </p>
 
 <!-- TODO -->