refactor(docs): better documentation on quick-start page

website/blog/2023-03-15-emulating-servers/index.mdx

@@ -7,13 +7,13 @@ import UpgradeMetatype from "../../shared/upgrade/index.mdx";
 
 ## Introducing the Embedded Typegate
 
-The embedded typegate is a feature that comes with the [Meta CLI](/docs/reference/meta-cli) which provides the option of spinning a typegate instance from the CLI with minimum configurations and installations needed from the developer. All that is required to access the _Embedded Typegate_ is to install _Meta_CLI_. The spawned typegate instance behaves similarly to cloud-deployed typegates.
+The embedded typegate is a feature that comes with the [Meta CLI](/docs/reference/meta-cli) which provides the option of spinning a typegate instance from the CLI with minimum configurations and installations needed from the developer. All that is required to access the _Embedded Typegate_ is to install _Meta CLI_. The spawned typegate instance behaves similarly to cloud-deployed typegates.
 
 ## The motive
 
-There are more than a couple of reasons why a developer would be tempted to use an emedded typegate. While developers can start a typegate instance using docker compose, the developer needs to install docker as a dependency to run the typegate container. Even though docker is familiar among many developers, it can sometimes be tricky and unbeknownst to some developers. We at metatype highly value the developer experience and one reason for adding the _embedded typegate_ feature to the _Meta_CLI_ is for users to have a smooth experience with our system by providing a docker compose free experience.
+There are more than a couple of reasons why a developer would be tempted to use an emedded typegate. While developers can start a typegate instance using docker compose, the developer needs to install docker as a dependency to run the typegate container. Even though docker is familiar among many developers, it can sometimes be tricky and unbeknownst to some developers. We at metatype highly value the developer experience and one reason for adding the _embedded typegate_ feature to the _Meta CLI_ is for users to have a smooth experience with our system by providing a docker compose free experience.
 This feature provides a great utility for developers to author and test typegraphs in their local machine before deploying them to production level typegate instances on the cloud.
-Additionally, developers need not concern themselves with deployment configurations which are needed only during deployment. The only need to focus their energy and time in developing the right application and easily test them on _embedded typegate_ running from the terminal. To add more to what is said, as the typegate engine keeps evolving, users will be abstracted away from the different configurations which might be added on the future. The _Meta_CLI_ will abstract much of what's not needed in a dev environment. Thus, leaving less headaches to developers on new changes.
+Additionally, developers need not concern themselves with deployment configurations which are needed only during deployment. The only need to focus their energy and time in developing the right application and easily test them on _embedded typegate_ running from the terminal. To add more to what is said, as the typegate engine keeps evolving, users will be abstracted away from the different configurations which might be added on the future. The _Meta CLI_ will abstract much of what's not needed in a dev environment. Thus, leaving less headaches to developers on new changes.
 Ultimately, The _embedded typegate_ is designed to be a good dev environment friendly tool which faciliates development time.
 
 ## Quick First hand example
@@ -22,7 +22,7 @@ Ultimately, The _embedded typegate_ is designed to be a good dev environment fri
 
 Either of the two [Typegraph](/docs/reference/typegraph) SDKs are needed to author typegraphs. For this example, the node SDK will be used.
 
-First, make sure the _Meta_CLI_ is installed.
+First, make sure the _Meta CLI_ is installed.
 
 ```shell
 curl -fsSL https://raw.githubusercontent.com/metatypedev/metatype/main/installer.sh | bash

website/docs/tutorials/quick-start/index.mdx

@@ -13,12 +13,8 @@ import FirstProject from "../../../shared/projects/first-project.mdx";
 
 :::note You will learn
 
-- how to install the meta CLI
-- how to install the typegraph SDK
-- how to run a typegate node
-- how to bootstrap a Metatype application
-- how to author typegraphs
-- how to deploy and run typegraphs on a typegate node.
+- how to install the Metatype SDKs and tools.
+- how to create and run a Metatype app.
 
 :::
 
@@ -79,30 +75,6 @@ node version         v18.16.0
 └————————————————————————————————————————————————————————————┘
 ```
 
-## 5. Install the development tools (Optional)
-
-:::warning
-
-🚧 This is a work in progress and still experimental.
-
-:::
-
-The development tools provide some additional real-time diagnostics on the typegraph definition and autocompletion (WIP).
-
-Currently, it only works for TypeScript/JavaScript typegraph definitions and the VS Code editor.
-
-### VS Code
-
-VS Code users can use the [VSCode extension for Metatype](https://marketplace.visualstudio.com/items?itemName=metatypedev.vscode-metatype).
-
-To install it, launch VS Code Quick Open (`Ctrl+P`), paste the following command, and press enter.
-
-```
-ext install metatypedev.vscode-metatype
-```
-
-Alternatively, you can download the `.vsix` file from the [releases page](https://github.com/metatypedev/metatype/releases) and manually install the extension.
-
 ## Writing your First App
 
 <FirstProject />

website/shared/install/meta-cli.mdx

@@ -14,9 +14,13 @@ executable and add it to your `PATH` or use the automated method below.
   curl -fsSL https://raw.githubusercontent.com/metatypedev/metatype/main/installer.sh | bash
   ```
 
+:::info
+
 - For later use, you can run the following command to upgrade `Meta CLI` to a newer version. If your Meta CLI is up to date, you will get an `Already up to date!` response.
   ```bash
   meta upgrade
   ```
 
+:::
+
 That's it! You are done installing `Meta CLI`.

website/shared/install/typegate.mdx

@@ -2,10 +2,15 @@ import EmbeddedTypegate from "../meta-cli/embedded-typegate.mdx";
 
 ### Using Embedded Typegate (Recommended)
 
-<EmbeddedTypegate />
+```shell
+meta typegate
+```
 
-### Using Docker
+The typegate instance runs on port `7890` by default. You can check if the typegate node is running by accessing [http://localhost:7890](http://localhost:7890) in your browser.
 
+<details>
+  <summary> Using docker (Not Recommended) </summary>
+
 Install [Docker](https://docs.docker.com/get-docker/) and use the following `compose.yml` to launch a typegate node. For multi-instance production workloads, Redis and an S3 object store provider are required but the typegate will run using in-memory stores if no `SYNC_*` environment variable is detected. More details can be found [here](/docs/reference/typegate/synchronization). In practice you might also want to add a database or other systems that the typegate can connect to.
 
 ```yml
@@ -30,3 +35,5 @@ docker compose up --detach
 # watch the typegate logs
 docker compose logs typegate --follow
 ```
+
+</details>

website/shared/install/typegraph.mdx

@@ -1,4 +1,6 @@
 import SDKTabs from "@site/src/components/SDKTabs";
+import PyPmTabs from "@site/src/components/PythonPackageManagerTabs";
+import TsPmTabs from "@site/src/components/TsPackageManagerTabs";
 import TabItem from "@theme/TabItem";
 
 <SDKTabs>
@@ -8,23 +10,48 @@ import TabItem from "@theme/TabItem";
 
 Install the `@typegraph/sdk` package from npm using your preferred package manager and runtime. The SDK requires Node 16+ with Typescript 4.7+, Deno 1.28+ or Bun 1+.
 
-```bash
-# using pnpm
-pnpm add @typegraph/sdk
-
-# using npm
-npm install @typegraph/sdk
-
-# using yarn
-yarn add @typegraph/sdk
-
-# using Deno
-import { ... } from "npm:@typegraph/sdk/mod.ts";
-
-# using Bun
-bun add @typegraph/sdk
-```
-
+  <TsPmTabs>
+    <TabItem value="pnpm">
+      ```bash
+      pnpm add @typegraph/sdk
+      ```
+    </TabItem>
+    <TabItem value="npm">
+      ```bash
+      npm install @typegraph/sdk
+      ```
+    </TabItem>
+    <TabItem value="yarn">
+      ```bash
+      yarn add @typegraph/sdk
+      ```
+    </TabItem>
+    <TabItem value="deno">
+      ```bash
+      import { ... } from "npm:@typegraph/sdk/mod.ts";
+      ```
+    </TabItem>
+    <TabItem value="bun">
+      ```bash
+      bun add @typegraph/sdk
+      ```
+    </TabItem>
+    <TabItem value="jsr">
+      ```bash
+      # deno
+      deno add @typegraph/sdk
+
+      # npm (one of the below, depending on your package manager)
+      npx jsr add @typegraph/sdk
+      yarn dlx jsr add @typegraph/sdk
+      pnpm dlx jsr add @typegraph/sdk
+      bunx jsr add @typegraph/sdk
+      ```
+    </TabItem>
+
+  </TsPmTabs>
+
+<br />
 When using Node, make sure to add this to your Typescript configuration:
 
 ```json
@@ -42,13 +69,14 @@ Create (and activate) your virtual environment with Python 3.8+ for your project
 # virtual env
 python3 -m venv .venv
 source .venv/bin/activate
+```
 
-# using pip
-pip3 install typegraph
+{" "}
 
-# using poetry
-poetry add typegraph
-```
+<PyPmTabs>
+  <TabItem value="pip">```bash pip3 install typegraph ```</TabItem>
+  <TabItem value="poetry">```bash poetry add typegraph ```</TabItem>
+</PyPmTabs>
 
   </TabItem>
 </SDKTabs>

website/shared/meta-cli/embedded-typegate.mdx

@@ -1,12 +1,12 @@
-The _Meta_CLI_ comes with an embedded typegate packaged inside it. A [typegate](/docs/reference/typegate) instance is where you deploy your [typegraphs](/docs/reference/typegraph) where any logic written in them is exposed via an HTTP or GraphQL endpoints. You can run an embedded typegate node from the terminal, but you first need to set a couple of environment variables which are needed to instantiate the typegate node.
+The _Meta CLI_ comes with an embedded typegate packaged inside it. A [typegate](/docs/reference/typegate) instance is where you deploy your [typegraphs](/docs/reference/typegraph) where any logic written in them is exposed via an HTTP or GraphQL endpoints. You can run an embedded typegate node from the terminal, but you first need to set a couple of environment variables which are needed to instantiate the typegate node.
 
 Set the `tg_admin_password` and `tg_secret` environment variables. You can use the following command to configure a sample value for the variables and test the embedded typegate.
 
 ```shell
 export tg_secret=a4lNi0PbEItlFZbus1oeH/+wyIxi9uH6TpL8AIqIaMBNvp7SESmuUBbfUwC0prxhGhZqHw8vMDYZAGMhSZ4fLw== tg_admin_password=password
 ```
 
-If you have not installed _Meta_CLI_ or you have downloaded the _thin_ version, you can check [this](/docs/reference/meta-cli#Installation) installation guide of the _CLI_.
+If you have not installed _Meta CLI_ or you have downloaded the _thin_ version, you can check [this](/docs/reference/meta-cli#Installation) installation guide of the _CLI_.
 
 Everything is setup to run the embedded typegate. Just run the following command below.
 

website/shared/projects/tab-first-project-python.mdx

@@ -103,7 +103,7 @@ With these simple steps, you were able to build a basic backend with database ca
   }
 </CodeBlock>
 
-You are almost there to test your first `Metatype` application. You now need to spin a [Tyepgate](/docs/reference/typegate) and deploy your typegraph to the instance. You can leverage the embedded typegate that comes with the _Meta_CLI_. To run the [embedded typegate](/docs/reference/meta-cli/embedded-typegate), execute the following command from your terminal.
+You are almost there to test your first `Metatype` application. You now need to spin a [Tyepgate](/docs/reference/typegate) and deploy your typegraph to the instance. You can leverage the embedded typegate that comes with the _Meta CLI_. To run the [embedded typegate](/docs/reference/meta-cli/embedded-typegate), execute the following command from your terminal.
 
 ```shell
 meta typegate

website/shared/projects/tab-first-project-ts.mdx

@@ -105,7 +105,7 @@ With these three simple steps, you were able to build a basic backend with datab
   }
 </CodeBlock>
 
-You are almost there to test your first `Metatype` application. You now need to spin a [Tyepgate](/docs/reference/typegate) and deploy your typegraph to the instance. You can leverage the embedded typegate that comes with the _Meta_CLI_. To run the [embedded typegate](/docs/reference/meta-cli/embedded-typegate), execute the following command from your terminal.
+You are almost there to test your first `Metatype` application. You now need to spin a [Tyepgate](/docs/reference/typegate) and deploy your typegraph to the instance. You can leverage the embedded typegate that comes with the _Meta CLI_. To run the [embedded typegate](/docs/reference/meta-cli/embedded-typegate), execute the following command from your terminal.
 
 ```bash
 meta typegate

website/src/components/PythonPackageManagerTabs/index.tsx

@@ -0,0 +1,24 @@
+// Copyright Metatype OÜ, licensed under the Elastic License 2.0.
+// SPDX-License-Identifier: Elastic-2.0
+
+import React, { PropsWithChildren } from "react";
+import { usePythonPackageManager } from "../../states/package_manager";
+import { ChoicePicker } from "../ChoicePicker";
+
+export default function NakedPythonPmPicker({
+  children,
+}: PropsWithChildren<Record<string, never>>) {
+  const [pm, setPm] = usePythonPackageManager();
+  return (
+    <ChoicePicker
+      choices={{
+        poetry: "poetry",
+        pip: "pip",
+      }}
+      choice={pm}
+      onChange={setPm}
+    >
+      {children}
+    </ChoicePicker>
+  );
+}

website/src/components/TsPackageManagerTabs/index.tsx

@@ -0,0 +1,28 @@
+// Copyright Metatype OÜ, licensed under the Elastic License 2.0.
+// SPDX-License-Identifier: Elastic-2.0
+
+import React, { PropsWithChildren } from "react";
+import { useTsPackageManager } from "../../states/package_manager";
+import { ChoicePicker } from "../ChoicePicker";
+
+export default function NakedTsPmPicker({
+  children,
+}: PropsWithChildren<Record<string, never>>) {
+  const [pm, setPm] = useTsPackageManager();
+  return (
+    <ChoicePicker
+      choices={{
+        pnpm: "pnpm",
+        npm: "npm",
+        jsr: "jsr",
+        deno: "deno",
+        yarn: "yarn",
+        bun: "bun",
+      }}
+      choice={pm}
+      onChange={setPm}
+    >
+      {children}
+    </ChoicePicker>
+  );
+}

website/src/pages/index.tsx

@@ -19,6 +19,14 @@ import Heading from "@theme/Heading";
 function Header() {
   return (
     <header className="bg-gradient-to-b from-slate-200 from-0% to-white to-100%">
+      <div className="flex justify-end mt-5 mr-5 mb-0">
+        <Link to="https://devhunt.org/tool/metatype">
+          <img
+            src="images/homepage/devhunt_tab_solid.svg"
+            alt="Devhunt result"
+          />
+        </Link>
+      </div>
       <div className="container text-center py-12">
         <div className="rounded-full bg-white w-40 h-40 flex px-6 m-auto mb-10">
           <img src="images/logo.svg" alt="Metatype logo" />