Merge pull request #30 from saasquatch/sandpack

Update quickstart docs with live code examples

.devcontainer/devcontainer.json

@@ -1,12 +1,9 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
-// README at: https://github.com/devcontainers/templates/tree/main/src/alpine
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 {
-	"name": "Alpine",
+	"name": "Node.js & TypeScript",
 	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-	"image": "mcr.microsoft.com/devcontainers/base:alpine-3.18",
-	"features": {
-		"ghcr.io/devcontainers/features/node:1": {}
-	},
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
 	"customizations": {
 		"vscode": {
 			"extensions": [
@@ -28,7 +25,7 @@
 	// "forwardPorts": [],
 
 	// Use 'postCreateCommand' to run commands after the container is created.
-	// "postCreateCommand": "uname -a",
+	// "postCreateCommand": "yarn install",
 
 	// Configure tool-specific properties.
 	// "customizations": {},

website/astro.config.mjs

@@ -1,71 +1,72 @@
-import starlight from '@astrojs/starlight';
-import { defineConfig } from 'astro/config';
-import { generateTypeDoc } from 'starlight-typedoc';
+import react from "@astrojs/react";
+import starlight from "@astrojs/starlight";
+import { defineConfig } from "astro/config";
+import { generateTypeDoc } from "starlight-typedoc";
 
 const apiSidebarGroup = await generateTypeDoc({
-	output: "reference/vanilla",
-	sidebar: {
-		label: "Vanilla Reference",
-		collapsed: true
-	},
+  output: "reference/vanilla",
+  sidebar: {
+    label: "Vanilla Reference",
+    collapsed: true,
+  },
 
-	entryPoints: ['../src/vanilla/index.ts'],
-	tsconfig: '../src/vanilla/tsconfig.docs.json',
-})
+  entryPoints: ["../src/vanilla/index.ts"],
+  tsconfig: "../src/vanilla/tsconfig.docs.json",
+});
 
 const reactSidebar = await generateTypeDoc({
-	output: "reference/react",
-	sidebar: {
-		label: "React Reference",
-		collapsed: true
-	},
-	entryPoints: ['../src/react/index.ts'],
-	tsconfig: '../src/react/tsconfig.docs.json',
-})
+  output: "reference/react",
+  sidebar: {
+    label: "React Reference",
+    collapsed: true,
+  },
+  entryPoints: ["../src/react/index.ts"],
+  tsconfig: "../src/react/tsconfig.docs.json",
+});
 const vueSidebar = await generateTypeDoc({
-	output: "reference/vue",
-	sidebar: {
-		label: "Vue Reference",
-		collapsed: true
-	},
-	entryPoints: ['../src/vue/index.ts'],
-	tsconfig: '../src/vue/tsconfig.docs.json',
-})
-
+  output: "reference/vue",
+  sidebar: {
+    label: "Vue Reference",
+    collapsed: true,
+  },
+  entryPoints: ["../src/vue/index.ts"],
+  tsconfig: "../src/vue/tsconfig.docs.json",
+});
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [
-		starlight({
-			title: 'Bunshi',
-			favicon: "./public/favicon.ico",
-			logo: {
-				src: "./src/assets/bunshi.svg",
-			},
-			customCss: [
-				// Relative path to your custom CSS file
-				'./src/styles/custom.css',
-			],
-			social: {
-				github: 'https://github.com/saasquatch/bunshi',
-			},
-			sidebar: [
-				{
-					label: 'Concepts',
-					autogenerate: { directory: 'concepts' },
-				},
-				{
-					label: 'Integrations',
-					autogenerate: { directory: 'integrations' },
-				},
-				{
-					label: 'Advanced',
-					autogenerate: { directory: 'advanced' },
-				},
-				reactSidebar,
-				vueSidebar,
-				apiSidebarGroup,
-			],
-		}),
-	],
+  integrations: [
+    react(),
+    starlight({
+      title: "Bunshi",
+      favicon: "./public/favicon.ico",
+      logo: {
+        src: "./src/assets/bunshi.svg",
+      },
+      customCss: [
+        // Relative path to your custom CSS file
+        "./src/styles/custom.css",
+      ],
+      social: {
+        github: "https://github.com/saasquatch/bunshi",
+      },
+      sidebar: [
+        {
+          label: "Concepts",
+          autogenerate: { directory: "concepts" },
+        },
+        {
+          label: "Integrations",
+          autogenerate: { directory: "integrations" },
+        },
+        {
+          label: "Advanced",
+          autogenerate: { directory: "advanced" },
+        },
+        reactSidebar,
+        vueSidebar,
+        apiSidebarGroup,
+      ],
+    }),
+  ],
 });