Merge pull request #17 from subtrace/dev/sachin/sveltekit

sveltekit: add docs

Author: sachin9996

mint.json

@@ -50,6 +50,7 @@
       "pages": [
         "nodejs-express",
         "nextjs",
+        "sveltekit",
         "python-fastapi",
         "python-gunicorn",
         "python-flask",

nextjs-link.png

@@ -57,4 +57,8 @@ npm install
 Open the `subt.link` URL in your browser to get to the Subtrace dashboard. Go to `localhost:3000`
 and make some requests to the server to see them show up in realtime on the Subtrace dashboard!
 
+<Expandable title="example output">
+  <img className="rounded-xl" src="/nextjs-link.png" />
+</Expandable>
+
 You can find the complete source code used in this demo [here](https://github.com/subtrace/nextjs-demo).

nextjs.mdx

@@ -0,0 +1,69 @@
+---
+title: "SvelteKit"
+sidebarTitle: "SvelteKit"
+description: "Connect your SvelteKit app to Chrome DevTools using Subtrace"
+icon: "node-js"
+---
+
+You can connect your SvelteKit app to Chrome DevTools with just one command
+to see the status, headers, payload, and latency of all API requests.
+
+For this guide, we'll use a simple SvelteKit app as an example. The app has one page (`+page.svelte`) and one API handler (`routes/api/hello/+server.ts`).
+
+```html
+<!-- +page.svelte -->
+<script>
+  let message = "";
+
+  async function getMessage() {
+    const res = await fetch("/api/hello");
+    const data = await res.json();
+    message = data.message;
+  }
+</script>
+
+<main>
+  <h1>Trigger a GET request with the button.</h1>
+  <button on:click="{getMessage}">Make API call</button>
+  <h2>{message}</h2>
+</main>
+```
+
+```ts
+// routes/api/hello/+server.ts
+let count = 0;
+
+export function GET(): Response {
+  count++;
+  return new Response(
+    JSON.stringify({
+      message: `Called ${count} ${count === 1 ? "time" : "times"}.`,
+    }),
+    { headers: { "Content-Type": "application/json" } }
+  );
+}
+```
+
+To get started, download the latest version of Subtrace using the following command:
+
+```bash
+curl -fsSLO "https://subtrace.dev/download/latest/$(uname -s)/$(uname -m)/subtrace"
+chmod +x ./subtrace
+```
+
+Build and start your server using Subtrace:
+
+```bash
+npm install
+npm run build
+./subtrace run -- npm run dev
+```
+
+Open the `subt.link` URL in your browser to get to the Subtrace dashboard. Go to `localhost:5173`
+and make some requests to the server to see them show up in realtime on the Subtrace dashboard!
+
+<Expandable title="example output">
+  <img className="rounded-xl" src="/sveltekit-link.png" />
+</Expandable>
+
+You can find the complete source code for this example [here](https://github.com/subtrace/sveltekit-demo).