get build working - switching to new components

Author: davemooreuws

docs/concepts/cicd.mdx

@@ -40,42 +40,3 @@ Providers have already been written for a variety of foundational services such
 ## CI/CD Guides
 
 Nitric has several guides for integrating with popular CI/CD pipelines.
-
-<GuidesGrid>
-  <Guide
-    href="/guides/deploying/github-actions"
-    name="GitHub Actions"
-    iconClassName={
-      'fill-zinc-700/50 dark:fill-white/40 dark:group-hover:fill-primary-300/60'
-    }
-    customIcon={FaGithub}
-    description="Use GitHub Actions to deploy your Nitric application."
-  />
-  <Guide
-    href="/guides/deploying/gitlab-ci"
-    name="GitLab Actions"
-    iconClassName={
-      'fill-zinc-700/50 dark:fill-white/40 dark:group-hover:fill-primary-300/60'
-    }
-    customIcon={FaGitlab}
-    description="Use GitLab CI to deploy your Nitric application."
-  />
-  <Guide
-    href="/guides/deploying/azure-pipelines"
-    name="Azure Pipelines"
-    iconClassName={
-      'fill-zinc-700/50 dark:fill-white/40 dark:group-hover:fill-primary-300/60'
-    }
-    customIcon={SiAzurepipelines}
-    description="Use Azure Pipelines to deploy your Nitric application."
-  />
-  <Guide
-    href="/guides/deploying/google-cloud-build"
-    name="Google Cloud Build"
-    iconClassName={
-      'fill-zinc-700/50 dark:fill-white/40 dark:group-hover:fill-primary-300/60'
-    }
-    customIcon={SiGooglecloud}
-    description="Use Google Cloud Build to deploy your Nitric application."
-  />
-</GuidesGrid>

docs/concepts/comparison/ampt.mdx

@@ -17,9 +17,13 @@ These are the main differences between the two:
 
 To get a deeper understanding of the differences, let's see the same app built in both Nitric and Ampt.
 
-<CodeSwitcher compare>
+<Row>
 
-```javascript {{title: 'Nitric', label: 'hello.ts' }}
+<Col>
+
+**Nitric**
+
+```typescript file:hello.ts
 import { api } from '@nitric/sdk'
 
 const helloApi = api('main')
@@ -31,7 +35,13 @@ helloApi.get('/hello/:name', async (ctx) => {
 })
 ```
 
-```javascript {{title: 'Ampt (Experimental)', label: 'hello.ts' }}
+</Col>
+
+<Col>
+
+**Ampt (Experimental)**
+
+```typescript file:hello.ts
 import { api } from '@ampt/api'
 
 const helloApi = api('main').router('/hello')
@@ -43,7 +53,9 @@ helloApi.get('/:name', async (event) => {
 })
 ```
 
-</CodeSwitcher>
+</Col>
+
+</Row>
 
 ## Differences
 

docs/concepts/comparison/aws-cdk.mdx

@@ -18,9 +18,13 @@ These are the main differences between the two:
 
 To get a deeper understanding of the differences, let's see the same app built in both Nitric and AWS CDK. This simple cloud app uses a Function to retrieve a hello world message using a path parameter.
 
-<CodeSwitcher compare>
+<Row>
 
-```javascript {{title: 'Nitric', label: 'hello.ts' }}
+<Col>
+
+**Nitric**
+
+```typescript file:hello.ts
 import { api } from '@nitric/sdk'
 
 const helloApi = api('main')
@@ -32,7 +36,13 @@ helloApi.get('/hello/:name', async (ctx) => {
 })
 ```
 
-```javascript {{title: 'AWS CDK', label: 'src/index.js'}}
+</Col>
+
+<Col>
+
+**AWS CDK**
+
+```javascript file:src/index.js
 exports.handler = async function (event = {}) {
   const name = event.pathParameters.name
 
@@ -43,7 +53,7 @@ exports.handler = async function (event = {}) {
 }
 ```
 
-```javascript {{title: 'AWS CDK', label: 'lib/hello-stack.ts'}}
+```typescript file:lib/hello-stack.ts
 import * as cdk from 'aws-cdk-lib'
 import { Construct } from 'constructs'
 import * as apigateway from 'aws-cdk-lib/aws-apigateway'
@@ -71,7 +81,9 @@ export class HelloWorldStack extends cdk.Stack {
 }
 ```
 
-</CodeSwitcher>
+</Col>
+
+</Row>
 
 Nitric offers a simplified, user-friendly way to define APIs with the added benefit of being able to use custom providers for greater control and flexibility, while maintaining cloud neutrality. On the other hand, AWS CDK, with its verbose and explicit syntax, provides deep customization and control specifically within the AWS ecosystem, but might be more complex for beginners.
 

docs/concepts/comparison/encore.mdx

@@ -17,38 +17,40 @@ These are the main differences between the two:
 
 To get a deeper understanding of the differences, let's see the same app built in both Nitric and Encore.
 
-<CodeSwitcher compare>
+<Row>
 
-```go {{title: 'Nitric', label: 'services/hello/main.go' }}
+<Col>
+
+**Nitric**
+
+```go file:services/hello/main.go
 package main
 
 import (
-	"fmt"
+  "context"
 
-	"github.com/nitrictech/go-sdk/nitric/apis"
-	"github.com/nitrictech/go-sdk/nitric"
+  "github.com/nitrictech/go-sdk/nitric"
+  "github.com/nitrictech/go-sdk/nitric/apis"
 )
 
 func main() {
-	mainApi, err := nitric.NewApi("main")
-	if err != nil {
-		fmt.Println(err)
-		return
-	}
+  api := nitric.NewApi("main")
 
-	mainApi.Get("/hello/:name", func(ctx *apis.Ctx) {
-		params := ctx.Request.PathParams()
+  api.Get("/hello/:name", func(ctx *apis.Ctx) {
+    ctx.Response.Body = []byte("Hello " + ctx.Request.PathParams()["name"])
+  })
 
-		ctx.Response.Body = []byte("Hello " + params["name"])
-	})
-
-	if err := nitric.Run(); err != nil {
-		fmt.Println(err)
-	}
+  nitric.Run()
 }
 ```
 
-```go {{title: 'Encore', label: 'hello.go'}}
+</Col>
+
+<Col>
+
+**Encore**
+
+```go file:hello.go
 package hello
 
 import (
@@ -66,7 +68,9 @@ type Response struct {
 }
 ```
 
-</CodeSwitcher>
+</Col>
+
+</Row>
 
 The Nitric example shows an API where HTTP request handling is achieved using `faas.HttpContext`, providing control over the request and response objects. The Encore example demonstrates an API where HTTP request handling is reflected through the function parameters and return types, with defined structs for responses.
 

docs/concepts/comparison/pulumi.mdx

@@ -28,9 +28,13 @@ Nitric is a framework designed to aid developers in building full cloud applicat
 
 To showcase the power of the abstraction provided by Nitric here is a showcase of a Nitric program with an equivalent Pulumi program with application code.
 
-<CodeSwitcher compare>
+<Row>
 
-```javascript {{title: 'Nitric', label: 'handle.ts' }}
+<Col>
+
+**Nitric**
+
+```javascript file:handle.js
 import * as nitric from '@nitric/sdk'
 
 const bucket = nitric.bucket('my-bucket').allow('read', 'write')
@@ -40,7 +44,13 @@ bucket.on('create', '*', async (ctx) => {
 })
 ```
 
-```javascript {{title: 'Pulumi', label: 'src/index.js'}}
+</Col>
+
+<Col>
+
+**Pulumi**
+
+```javascript file:src/index.js
 const AWS = require('aws-sdk')
 
 exports.handler = async (event) => {
@@ -51,7 +61,7 @@ exports.handler = async (event) => {
 }
 ```
 
-```javascript {{title: 'Pulumi', label: 'lib/handle-stack.ts'}}
+```javascript file:lib/handle-stack.js
 import * as pulumi from '@pulumi/pulumi'
 import * as aws from '@pulumi/aws'
 import * as fs from 'fs'
@@ -143,7 +153,9 @@ export const bucketName = bucket.bucket
 export const lambdaFunctionName = lambdaFunction.name
 ```
 
-</CodeSwitcher>
+</Col>
+
+</Row>
 
 <Note>
   In the pulumi example we get control over absolutely every facet of our

docs/concepts/comparison/sst.mdx

@@ -18,9 +18,13 @@ These are the main differences between the two:
 
 To get a deeper understanding of the differences, let's see the same app built in both Nitric and SST. The SST App in this example is standalone without the frontend code.
 
-<CodeSwitcher compare>
+<Row>
 
-```javascript {{title: 'Nitric', label: 'hello.ts' }}
+<Col>
+
+**Nitric**
+
+```javascript file:hello.js
 import { api } from '@nitric/sdk'
 
 const helloApi = api('main')
@@ -32,7 +36,13 @@ helloApi.get('/hello/:name', async (ctx) => {
 })
 ```
 
-```javascript {{title: 'SST', label: 'packages/functions/hello.ts'}}
+</Col>
+
+<Col>
+
+**SST**
+
+```javascript file:packages/functions/hello.ts
 import { ApiHandler, usePathParam } from 'sst/node/api'
 
 export const handler = ApiHandler(async (evt) => {
@@ -45,7 +55,7 @@ export const handler = ApiHandler(async (evt) => {
 })
 ```
 
-```javascript {{title: 'SST', label: 'stacks/hello-stack.ts'}}
+```javascript file: stacks/hello-stack.ts
 import { StackContext, Api } from 'sst/constructs'
 
 export function API({ stack }: StackContext) {
@@ -61,7 +71,9 @@ export function API({ stack }: StackContext) {
 }
 ```
 
-</CodeSwitcher>
+</Col>
+
+</Row>
 
 One key difference between Nitric and SST examples is while Nitric allows defining the API route handler inline which streamlines and simplifies the code, SST separates the route definition and the handler into different files for modularity. Another difference is that Nitric is cloud-neutral while SST is designed specifically for AWS.
 

docs/concepts/comparison/terraform.mdx

@@ -26,9 +26,13 @@ Nitric is a framework designed to aid developers in building full cloud applicat
 
 To showcase the power of the abstraction provided by Nitric here is a showcase of a Nitric program with an equivalent Terraform configuration with application code.
 
-<CodeSwitcher compare>
+<Row>
 
-```javascript {{title: 'Nitric', label: 'handle.ts' }}
+<Col>
+
+**Nitric**
+
+```javascript file:handle.js
 import * as nitric from '@nitric/sdk'
 
 const bucket = nitric.bucket('my-bucket').allow('read', 'write')
@@ -38,7 +42,13 @@ bucket.on('create', '*', async (ctx) => {
 })
 ```
 
-```javascript {{title: 'Terraform', label: 'src/index.js'}}
+</Col>
+
+<Col>
+
+**Terraform**
+
+```javascript file:src/index.js
 const AWS = require('aws-sdk')
 
 exports.handler = async (event) => {
@@ -49,7 +59,7 @@ exports.handler = async (event) => {
 }
 ```
 
-```hcl {{title: 'Terraform', label: 'main.tf'}}
+```hcl file:main.tf
 terraform {
   required_providers {
     aws = {
@@ -167,7 +177,9 @@ output "lambda_function_name" {
 }
 ```
 
-</CodeSwitcher>
+</Col>
+
+</Row>
 
 <Note>
   In the Terraform example we get control over absolutely every facet of our

docs/concepts/comparison/winglang.mdx

@@ -14,9 +14,13 @@ Both options are extremely productive, it's up to you which approach you prefer.
 
 ## Code Comparison
 
-<CodeSwitcher compare>
+<Row>
 
-```javascript {{title: 'Nitric', label: 'hello.js' }}
+<Col>
+
+**Nitric**
+
+```javascript file:hello.js
 import { api } from '@nitric/sdk'
 
 const helloApi = api('far-away-galaxy-api')
@@ -26,7 +30,13 @@ helloApi.get('/', async ({ req, res }) => {
 })
 ```
 
-```javascript {{title: 'Wing', label: 'hello.w'}}
+</Col>
+
+<Col>
+
+**Wing**
+
+```javascript title:hello.w
 bring cloud;
 
 let api = new cloud.Api();
@@ -39,4 +49,6 @@ api.get("/", inflight (request: cloud.ApiRequest): cloud.ApiResponse => {
 });
 ```
 
-</CodeSwitcher>
+</Col>
+
+</Row>