From 38483dc9cf08af09c2ceaa64fdaac1f8babc2f0a Mon Sep 17 00:00:00 2001
From: Muhammad Owais Warsi <warsimuhammadowais@gmail.com>
Date: Thu, 12 Dec 2024 00:07:08 +0530
Subject: [PATCH] add instructions for creating a new project. (#318)

---
 src/content/docs/get-started.mdx              | 27 +++++++++++++
 src/snippets/get-started/bun-hono/Step0.mdx   | 39 ++++++++++++++++++
 src/snippets/get-started/bun/Step0.mdx        |  9 +++++
 src/snippets/get-started/deno/Step0.mdx       | 16 ++++++++
 src/snippets/get-started/nest-js/Step0.mdx    |  9 +++++
 src/snippets/get-started/next-js/Step0.mdx    |  8 ++++
 .../get-started/node-js-express/Step0.mdx     | 11 +++++
 .../get-started/node-js-hono/Step0.mdx        | 40 +++++++++++++++++++
 src/snippets/get-started/node-js/Step0.mdx    |  4 ++
 src/snippets/get-started/remix/Step0.mdx      |  9 +++++
 src/snippets/get-started/sveltekit/Step0.mdx  |  9 +++++
 11 files changed, 181 insertions(+)
 create mode 100644 src/snippets/get-started/bun-hono/Step0.mdx
 create mode 100644 src/snippets/get-started/bun/Step0.mdx
 create mode 100644 src/snippets/get-started/deno/Step0.mdx
 create mode 100644 src/snippets/get-started/nest-js/Step0.mdx
 create mode 100644 src/snippets/get-started/next-js/Step0.mdx
 create mode 100644 src/snippets/get-started/node-js-express/Step0.mdx
 create mode 100644 src/snippets/get-started/node-js-hono/Step0.mdx
 create mode 100644 src/snippets/get-started/node-js/Step0.mdx
 create mode 100644 src/snippets/get-started/remix/Step0.mdx
 create mode 100644 src/snippets/get-started/sveltekit/Step0.mdx

diff --git a/src/content/docs/get-started.mdx b/src/content/docs/get-started.mdx
index 07b2d4be..48a93875 100644
--- a/src/content/docs/get-started.mdx
+++ b/src/content/docs/get-started.mdx
@@ -23,6 +23,8 @@ frameworks:
   - remix
   - sveltekit
 ajToc:
+  - text: 0. Get Started
+    anchor: "0-get-started"
   - text: 1. Install Arcjet
     anchor: "1-install-arcjet"
   - text: 2. Set your key
@@ -45,60 +47,70 @@ import { LinkButton, LinkCard } from "@astrojs/starlight/components";
 import FAQs from "/src/components/FAQs.astro";
 import WhatIsArcjet from "/src/components/WhatIsArcjet.astro";
 
+import BunStep0 from "@/snippets/get-started/bun/Step0.mdx";
 import BunStep1 from "@/snippets/get-started/bun/Step1.mdx";
 import BunRequirements from "@/snippets/get-started/bun/Requirements.mdx";
 import BunStep2 from "@/snippets/get-started/bun/Step2.mdx";
 import BunStep3 from "@/snippets/get-started/bun/Step3.mdx";
 import BunStep4 from "@/snippets/get-started/bun/Step4.mdx";
 
+import BunHonoStep0 from "@/snippets/get-started/bun-hono/Step0.mdx";
 import BunHonoStep1 from "@/snippets/get-started/bun-hono/Step1.mdx";
 import BunHonoRequirements from "@/snippets/get-started/bun-hono/Requirements.mdx";
 import BunHonoStep2 from "@/snippets/get-started/bun-hono/Step2.mdx";
 import BunHonoStep3 from "@/snippets/get-started/bun-hono/Step3.mdx";
 import BunHonoStep4 from "@/snippets/get-started/bun-hono/Step4.mdx";
 
+import DenoStep0 from "@/snippets/get-started/deno/Step0.mdx";
 import DenoStep1 from "@/snippets/get-started/deno/Step1.mdx";
 import DenoRequirements from "@/snippets/get-started/deno/Requirements.mdx";
 import DenoStep2 from "@/snippets/get-started/deno/Step2.mdx";
 import DenoStep3 from "@/snippets/get-started/deno/Step3.mdx";
 import DenoStep4 from "@/snippets/get-started/deno/Step4.mdx";
 
+import NestJsStep0 from "@/snippets/get-started/nest-js/Step0.mdx";
 import NestJsStep1 from "@/snippets/get-started/nest-js/Step1.mdx";
 import NestJsRequirements from "@/snippets/get-started/nest-js/Requirements.mdx";
 import NestJsStep2 from "@/snippets/get-started/nest-js/Step2.mdx";
 import NestJsStep3 from "@/snippets/get-started/nest-js/Step3.mdx";
 import NestJsStep4 from "@/snippets/get-started/nest-js/Step4.mdx";
 
+import NextJsStep0 from "@/snippets/get-started/next-js/Step0.mdx";
 import NextJsStep1 from "@/snippets/get-started/next-js/Step1.mdx";
 import NextJsRequirements from "@/snippets/get-started/next-js/Requirements.mdx";
 import NextJsStep2 from "@/snippets/get-started/next-js/Step2.mdx";
 import NextJsStep3 from "@/snippets/get-started/next-js/Step3.mdx";
 import NextJsStep4 from "@/snippets/get-started/next-js/Step4.mdx";
 
+import NodeJsStep0 from "@/snippets/get-started/node-js/Step0.mdx";
 import NodeJsStep1 from "@/snippets/get-started/node-js/Step1.mdx";
 import NodeJsRequirements from "@/snippets/get-started/node-js/Requirements.mdx";
 import NodeJsStep2 from "@/snippets/get-started/node-js/Step2.mdx";
 import NodeJsStep3 from "@/snippets/get-started/node-js/Step3.mdx";
 import NodeJsStep4 from "@/snippets/get-started/node-js/Step4.mdx";
 
+import NodeJsExpressStep0 from "@/snippets/get-started/node-js-express/Step0.mdx";
 import NodeJsExpressStep1 from "@/snippets/get-started/node-js-express/Step1.mdx";
 import NodeJsExpressRequirements from "@/snippets/get-started/node-js-express/Requirements.mdx";
 import NodeJsExpressStep2 from "@/snippets/get-started/node-js-express/Step2.mdx";
 import NodeJsExpressStep3 from "@/snippets/get-started/node-js-express/Step3.mdx";
 import NodeJsExpressStep4 from "@/snippets/get-started/node-js-express/Step4.mdx";
 
+import NodeJsHonoStep0 from "@/snippets/get-started/node-js-hono/Step0.mdx";
 import NodeJsHonoStep1 from "@/snippets/get-started/node-js-hono/Step1.mdx";
 import NodeJsHonoRequirements from "@/snippets/get-started/node-js-hono/Requirements.mdx";
 import NodeJsHonoStep2 from "@/snippets/get-started/node-js-hono/Step2.mdx";
 import NodeJsHonoStep3 from "@/snippets/get-started/node-js-hono/Step3.mdx";
 import NodeJsHonoStep4 from "@/snippets/get-started/node-js-hono/Step4.mdx";
 
+import RemixStep0 from "@/snippets/get-started/remix/Step0.mdx";
 import RemixStep1 from "@/snippets/get-started/remix/Step1.mdx";
 import RemixRequirements from "@/snippets/get-started/remix/Requirements.mdx";
 import RemixStep2 from "@/snippets/get-started/remix/Step2.mdx";
 import RemixStep3 from "@/snippets/get-started/remix/Step3.mdx";
 import RemixStep4 from "@/snippets/get-started/remix/Step4.mdx";
 
+import SvelteKitStep0 from "@/snippets/get-started/sveltekit/Step0.mdx";
 import SvelteKitStep1 from "@/snippets/get-started/sveltekit/Step1.mdx";
 import SvelteKitRequirements from "@/snippets/get-started/sveltekit/Requirements.mdx";
 import SvelteKitStep2 from "@/snippets/get-started/sveltekit/Step2.mdx";
@@ -113,6 +125,21 @@ This guide will show you how to set up a simple API server protected by Arcjet.
 
 <FrameworkLinks title="Choose a framework" client:load />
 
+## 0. Get Started
+
+<SlotByFramework client:load>
+  <BunStep0 slot="bun" />
+  <BunHonoStep0 slot="bun-hono" />
+  <DenoStep0 slot="deno" />
+  <NestJsStep0 slot="nest-js" />
+  <NextJsStep0 slot="next-js" />
+  <NodeJsStep0 slot="node-js" />
+  <NodeJsExpressStep0 slot="node-js-express" />
+  <NodeJsHonoStep0 slot="node-js-hono" />
+  <RemixStep0 slot="remix" />
+  <SvelteKitStep0 slot="sveltekit" />
+</SlotByFramework>
+
 ## 1. Install Arcjet
 
 In your project root, run the following command:
diff --git a/src/snippets/get-started/bun-hono/Step0.mdx b/src/snippets/get-started/bun-hono/Step0.mdx
new file mode 100644
index 00000000..243ccbeb
--- /dev/null
+++ b/src/snippets/get-started/bun-hono/Step0.mdx
@@ -0,0 +1,39 @@
+import SelectableContent from "@/components/SelectableContent";
+
+{/* prettier-ignore */}
+
+Installing Bun
+
+```sh
+npm install -g bun
+```
+For detailed instructions refer to the [Bun docs](https://bun.sh/docs/installation).
+
+To install Hono: 
+
+<SelectableContent client:load syncKey="packageManager" frameworkSwitcher>
+<div slot="npm" slotIdx="1">
+
+```sh
+npm create hono@latest
+```
+
+</div>
+<div slot="pnpm" slotIdx="2">
+
+```sh
+pnpm create hono@latest
+```
+
+</div>
+<div slot="yarn" slotIdx="3">
+
+```sh
+yarn create hono
+```
+
+</div>
+</SelectableContent>
+
+For detailed instructions refer to the [Hono docs](https://hono.dev/docs/#quick-start).
+
diff --git a/src/snippets/get-started/bun/Step0.mdx b/src/snippets/get-started/bun/Step0.mdx
new file mode 100644
index 00000000..7a444ead
--- /dev/null
+++ b/src/snippets/get-started/bun/Step0.mdx
@@ -0,0 +1,9 @@
+{/* prettier-ignore */}
+
+Installing Bun:
+
+```sh
+npm install -g bun
+```
+For detailed instructions refer to the [Bun docs](https://bun.sh/docs/installation).
+
diff --git a/src/snippets/get-started/deno/Step0.mdx b/src/snippets/get-started/deno/Step0.mdx
new file mode 100644
index 00000000..4a9989e6
--- /dev/null
+++ b/src/snippets/get-started/deno/Step0.mdx
@@ -0,0 +1,16 @@
+{/* prettier-ignore */}
+
+Installing Deno:
+
+1. macOS and Linux
+```sh
+curl -fsSL https://deno.land/install.sh | sh
+```
+2. Windows
+```sh
+irm https://deno.land/install.ps1 | iex
+
+```
+
+For detailed instructions refer to the [Deno docs](https://docs.deno.com/runtime/getting_started/installation).
+
diff --git a/src/snippets/get-started/nest-js/Step0.mdx b/src/snippets/get-started/nest-js/Step0.mdx
new file mode 100644
index 00000000..0f1f51aa
--- /dev/null
+++ b/src/snippets/get-started/nest-js/Step0.mdx
@@ -0,0 +1,9 @@
+{/* prettier-ignore */}
+
+Installing Nest.js
+
+```sh
+npm i -g @nestjs/cli
+```
+For detailed instructions refer to the [Nest.js docs](https://docs.nestjs.com/).
+
diff --git a/src/snippets/get-started/next-js/Step0.mdx b/src/snippets/get-started/next-js/Step0.mdx
new file mode 100644
index 00000000..2870b8f6
--- /dev/null
+++ b/src/snippets/get-started/next-js/Step0.mdx
@@ -0,0 +1,8 @@
+{/* prettier-ignore */}
+
+To create a Next.js project:
+
+```sh
+npx create-next-app@latest
+```
+For detailed instructions refer to the [Next.js docs](https://nextjs.org/docs/app/getting-started/installation).
\ No newline at end of file
diff --git a/src/snippets/get-started/node-js-express/Step0.mdx b/src/snippets/get-started/node-js-express/Step0.mdx
new file mode 100644
index 00000000..70bbac5a
--- /dev/null
+++ b/src/snippets/get-started/node-js-express/Step0.mdx
@@ -0,0 +1,11 @@
+{/* prettier-ignore */}
+
+To install Express: 
+
+```sh
+npm install express
+```
+For detailed instructions refer to [Express.js docs](https://expressjs.com/en/starter/installing.html).
+
+To install Node.js on your system follow the official [docs](https://nodejs.org/en/download/package-manager).
+
diff --git a/src/snippets/get-started/node-js-hono/Step0.mdx b/src/snippets/get-started/node-js-hono/Step0.mdx
new file mode 100644
index 00000000..dfc16c3d
--- /dev/null
+++ b/src/snippets/get-started/node-js-hono/Step0.mdx
@@ -0,0 +1,40 @@
+import SelectableContent from "@/components/SelectableContent";
+
+{/* prettier-ignore */}
+
+To install Hono: 
+
+<SelectableContent client:load syncKey="packageManager" frameworkSwitcher>
+<div slot="npm" slotIdx="1">
+
+```sh
+npm create hono@latest
+```
+
+</div>
+<div slot="pnpm" slotIdx="2">
+
+```sh
+pnpm create hono@latest
+```
+
+</div>
+<div slot="yarn" slotIdx="3">
+
+```sh
+yarn create hono
+```
+
+</div>
+</SelectableContent>
+
+For detailed instructions refer to the [Hono docs](https://hono.dev/docs/#quick-start).
+
+To install Node.js on your system follow the official [docs](https://nodejs.org/en/download/package-manager).
+
+
+
+
+
+
+
diff --git a/src/snippets/get-started/node-js/Step0.mdx b/src/snippets/get-started/node-js/Step0.mdx
new file mode 100644
index 00000000..1e690400
--- /dev/null
+++ b/src/snippets/get-started/node-js/Step0.mdx
@@ -0,0 +1,4 @@
+{/* prettier-ignore */}
+
+To install Node.js on your system follow the official [docs](https://nodejs.org/en/download/package-manager).
+
diff --git a/src/snippets/get-started/remix/Step0.mdx b/src/snippets/get-started/remix/Step0.mdx
new file mode 100644
index 00000000..a2208316
--- /dev/null
+++ b/src/snippets/get-started/remix/Step0.mdx
@@ -0,0 +1,9 @@
+{/* prettier-ignore */}
+
+To create a Remix project:
+
+```sh
+npx create-remix@latest
+```
+For detailed instructions refer to the [Remix docs](https://remix.run/docs/en/main/start/quickstart#installation).
+
diff --git a/src/snippets/get-started/sveltekit/Step0.mdx b/src/snippets/get-started/sveltekit/Step0.mdx
new file mode 100644
index 00000000..0a615ad3
--- /dev/null
+++ b/src/snippets/get-started/sveltekit/Step0.mdx
@@ -0,0 +1,9 @@
+{/* prettier-ignore */}
+
+To create a SvelteKit project:
+
+```sh
+npx sv create my-app
+```
+For detailed instructions refer to the [SvelteKit docs](https://svelte.dev/docs/kit/creating-a-project).
+