code tab updates wip

Author: davemooreuws

docs/apis.mdx

@@ -68,7 +68,7 @@ batch-services:
 
 Within a Batch we create Job Definitions, by creating a new Job with a unique name and defining a handler function that will be executed when the job is submitted.
 
-<CodeSwitcher>
+<CodeSwitcher tabs>
 
 ```typescript !!
 import { job, JobContext } from '@nitric/sdk'
@@ -138,7 +138,7 @@ void main() {
 
 Jobs may be submitted from Nitric `services` or other `batches` using the `submit` method on the job reference. When submitting a job you can provide a payload that will be passed to the job handler function.
 
-<CodeSwitcher>
+<CodeSwitcher tabs>
 
 ```javascript !!
 import * as nitric from '@nitric/sdk'

docs/batch.mdx

@@ -40,7 +40,7 @@ An API named 'milkyway' with:
   - A storage bucket named planets_images.
     - This service intends to read and write content to the bucket.
 
-<CodeSwitcher>
+<CodeSwitcher tabs>
 
 ```javascript !!
 import { api, kv, bucket } from '@nitric/sdk'

docs/further-reading/how-devs-use-nitric.mdx

@@ -20,7 +20,19 @@ The Nitric deployment engine does not evaluate runtime code at deployment time a
 
 A working example:
 
-<CodeSwitcher>
+<CodeSwitcher tabs>
+
+```javascript !!
+import { api, bucket } from '@nitric/sdk'
+
+// ✅ This declaration will work
+const files = bucket('files').allow('read')
+
+api('public').get('/files/:name', (ctx) => {
+  // ❌ This declaration will not work, as this is only called at runtime.
+  const badBucket = bucket('wont-work').allow('read')
+})
+```
 
 ```typescript !!
 import { api, bucket } from '@nitric/sdk'
@@ -113,7 +125,21 @@ Calling runtime methods in top-level code can lead to unintended side effects. N
 
 A working example:
 
-<CodeSwitcher>
+<CodeSwitcher tabs>
+
+```javascript !!
+import { api, bucket } from '@nitric/sdk'
+
+const files = bucket('files').allow('read')
+
+// ❌ This access will not work.
+const fileContents = files.file('example.txt').read()
+
+api('public').get('/files/:name', (ctx) => {
+  // ✅ This access will work.
+  const fileContents = files.file('example.txt').read()
+})
+```
 
 ```typescript !!
 import { api, bucket } from '@nitric/sdk'
@@ -239,7 +265,32 @@ When many services share a resource it's helpful to re-use resource declaration
 
 For example:
 
-<CodeSwitcher>
+<CodeSwitcher tabs>
+
+```javascript !!
+// lib/resources.ts
+import { api, topic } from '@nitric/sdk'
+
+export const publicApi = api('public')
+
+export const updateTopic = topic('updates')
+
+// services/api.ts
+import { publicApi, updateTopic } from '../lib/resources'
+
+const publisher = updateTopic.allow('publish')
+
+publicApi.post('/update', async (ctx) => {
+  await publisher.publish({ test: 'message' })
+})
+
+// services/updates.ts
+import { updateTopic } from '../lib/resources'
+
+updateTopic.subscribe((ctx) => {
+  console.log('got the message')
+})
+```
 
 ```typescript !!
 // lib/resources.ts
@@ -411,7 +462,31 @@ void main() {
 
 Creating resource permissions in the same context as the resources can make those permissions leak. This is demonstrated in the below example:
 
-<CodeSwitcher>
+<CodeSwitcher tabs>
+
+```javascript !!
+// lib/resources.ts
+import { api, bucket } from '@nitric/sdk'
+
+export const publicApi = api('public')
+
+export const bucketOne = bucket('bucket-one').allow('read')
+export const bucketTwo = bucket('bucket-two').allow('read')
+
+// services/service-one.ts
+import { publicApi, bucketOne } from '../lib/resources'
+
+publicApi.get('bucket-one/file/:name', (ctx) => {
+  // do something with the file
+})
+
+// services/service-two.ts
+import { publicApi, bucketTwo } from '../lib/resources'
+
+publicApi.get('bucket-two/file/:name', (ctx) => {
+  // do something with the file
+})
+```
 
 ```typescript !!
 // lib/resources.ts

docs/get-started/foundations/infrastructure/resources.mdx

@@ -24,32 +24,30 @@ We recommend starting with a template, using the `nitric new` CLI command. These
 
 Here are some examples of basic Nitric project structures:
 
-<Tabs>
+<CodeTabs>
 
-<TabItem label="Go">
+<TabItem label="JavaScript">
 
-```text Go
+```text JavaScript
 my-project/
 ├── nitric.yaml
 ├── nitric.aws.yaml
 └── services/
-    ├── service1/
-    │   └── main.go
-    └── service2/
-        └── main.go
+    ├── service1.js
+    └── service2.js
 ```
 
 </TabItem>
 
-<TabItem label="JavaScript">
+<TabItem label="TypeScript">
 
 ```text JavaScript
 my-project/
 ├── nitric.yaml
 ├── nitric.aws.yaml
 └── services/
-    ├── service1.js
-    └── service2.js
+    ├── service1.ts
+    └── service2.ts
 ```
 
 </TabItem>
@@ -67,7 +65,35 @@ my-project/
 
 </TabItem>
 
-</Tabs>
+<TabItem label="Go">
+
+```text Go
+my-project/
+├── nitric.yaml
+├── nitric.aws.yaml
+└── services/
+    ├── service1/
+    │   └── main.go
+    └── service2/
+        └── main.go
+```
+
+</TabItem>
+
+<TabItem label="Dart">
+
+```text
+my-project/
+├── nitric.yaml
+├── nitric.aws.yaml
+└── services/
+    ├── service1.dart
+    └── service2.dart
+```
+
+</TabItem>
+
+</CodeTabs>
 
 This flexibility allows you to build apps as a single monolithic service, multiple microservices, or something else entirely.
 

docs/get-started/foundations/projects/index.mdx

@@ -276,7 +276,7 @@ Nitric's language templates enable hot-reloading by default, so at this point, y
 
 Start by opening the `hello` service in your editor and adding a new route to the API, then save, and execute the file:
 
-<CodeSwitcher>
+<CodeSwitcher tabs>
 
 ```typescript !! title:services/hello.ts
 import { api } from '@nitric/sdk'

docs/get-started/quickstart.mdx

@@ -32,7 +32,7 @@ nitric new
 
 In this new Nitric project there will be an example API with a single `GET: /hello/:name` route. We'll start by securing this route.
 
-<CodeSwitcher>
+<CodeSwitcher tabs>
 
 ```typescript !! title:services/hello.ts
 import { api } from '@nitric/sdk'
@@ -66,7 +66,7 @@ helloApi.get('/hello/:name', async (ctx) => {
 
 To add this API Gateway authentication we need to create a `security definition` and then apply that definition to specific routes or the entire API. Here we'll update the `main` API by adding a new security definition named `cognito`.
 
-<CodeSwitcher>
+<CodeSwitcher tabs>
 
 ```typescript !! title:services/hello.ts
 import { api } from '@nitric/sdk'
@@ -123,7 +123,7 @@ Next, we need to ensure this security definition is applied, otherwise it won't
 
 In this example we'll apply the security at the API level, ensuring all routes require authentication.
 
-<CodeSwitcher>
+<CodeSwitcher tabs>
 
 ```typescript !! title:services/hello.ts
 import { api } from '@nitric/sdk'
@@ -197,7 +197,7 @@ In the example below we're simply checking whether the user is a member of a par
   handlers or middleware.
 </Note>
 
-<CodeSwitcher>
+<CodeSwitcher tabs>
 
 ```typescript !! title:services/hello.ts
 import { api, HttpContext, HttpMiddleware } from '@nitric/sdk'

docs/guides/nodejs/amazon-cognito.mdx

@@ -16,15 +16,9 @@ It's what's missing between applications and infrastructure automation.
 
 Oh, and it supports basically any language, like JavaScript, TypeScript, Python, Go, you name it.
 
-<div className="flex items-center flex-col gap-4 mt-10">
-
-<div className="not-prose">
-  <LanguageSwitch />
-</div>
-
 <div className="w-full">
 
-<CodeSwitcher className="xl:max-h-[300px]">
+<CodeSwitcher className="xl:max-h-[300px]" tabs>
 
 ```javascript !! title:services/api.js
 import { api } from '@nitric/sdk'
@@ -103,8 +97,6 @@ void main() {
 
 </div>
 
-</div>
-
 If you're familiar Nitric already, you might want to jump to the [Installation](/getting-started/installation), [Guides](/guides) or [Resources](/apis) sections. Otherwise, keep reading to learn more about Nitric.
 
 ---
@@ -128,14 +120,20 @@ You might have one service that handles everything, or a service for each route.
 
 Resources are the building blocks of your apps. They're the databases, queues, buckets, etc. that your services interact with. To request a resource, import the resource type and create one with a name.
 
-<CodeSwitcher>
+<CodeSwitcher tabs>
 
 ```javascript !! title:services/example.js
 import { bucket } from '@nitric/sdk'
 
 const profiles = bucket('profiles').allow('read', 'write', 'delete')
 ```
 
+```typescript !! title:services/example.ts
+import { bucket } from '@nitric/sdk'
+
+const profiles = bucket('profiles').allow('read', 'write', 'delete')
+```
+
 ```python !! title:services/example.py
 from nitric.resources import bucket
 from nitric.application import Nitric
@@ -262,7 +260,7 @@ Nitric uses this to find your services, then it turns each service into a contai
 
 So, a project structure might look something like this:
 
-<Tabs>
+<CodeTabs>
 
 <TabItem label="JavaScript">
 
@@ -277,6 +275,19 @@ example/
 
 </TabItem>
 
+<TabItem label="TypeScript">
+
+```bash
+example/
+├── nitric.yaml
+├── services/
+│   └── orders.ts
+│   └── users.ts
+└── package.json
+```
+
+</TabItem>
+
 <TabItem label="Python">
 
 ```bash
@@ -319,7 +330,7 @@ example/
 
 </TabItem>
 
-</Tabs>
+</CodeTabs>
 
 ---
 
@@ -443,7 +454,7 @@ Here are some ways you can extend or escape Nitric.
 
 If you need to access a service in a way Nitric doesn't support, you can always use the provider's SDK directly. Code like this will always work:
 
-<CodeSwitcher>
+<CodeSwitcher tabs>
 
 ```javascript !!
 // Import the AWS SDK
@@ -454,6 +465,15 @@ const s3 = new S3Client({ region: 'us-east-1' })
 const { Contents } = await s3.listObjectsV2({ Bucket: 'my-bucket' })
 ```
 
+```typescript !!
+// Import the AWS SDK
+import { S3Client } from '@aws-sdk/client-s3'
+
+// Use it like you normally would
+const s3 = new S3Client({ region: 'us-east-1' })
+const { Contents } = await s3.listObjectsV2({ Bucket: 'my-bucket' })
+```
+
 ```python !!
 # Import the boto3 (AWS) SDK
 from boto3 import client