Fix and add examples

Signed-off-by: Charles d'Avernas <charles.davernas@neuroglia.io>

Author: cdavernas

src/pages/index.astro

@@ -70,7 +70,7 @@ import { Code } from 'astro:components';
           <Code themes={{'light': 'github-light', 'dark': 'github-dark'}} lang="yaml" code={`document:
   dsl: '1.0.0-alpha5'
   namespace: examples
-  name: call-http-shorthand-endpoint
+  name: call-http
   version: '1.0.0'
 do:
 - getPet:
@@ -79,13 +79,13 @@ do:
       method: get
       endpoint: https://petstore.swagger.io/v2/pet/{petId}`} />
         </div>
-        <input type="radio" name="code_tabs" role="tab" class="tab" aria-label="Async API" />
+        <input type="radio" name="code_tabs" role="tab" class="tab" aria-label="AsyncAPI" />
         <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
-          <h3 class="text-xl font-bold mb-4">Async API Example</h3>
+          <h3 class="text-xl font-bold mb-4">AsyncAPI Example</h3>
           <Code themes={{'light': 'github-light', 'dark': 'github-dark'}} lang="yaml" code={`document:
   dsl: '1.0.0-alpha5'
   namespace: examples
-  name: bearer-auth
+  name: call-asyncapi
   version: '1.0.0'
 do:
 - findPet:
@@ -95,14 +95,67 @@ do:
         uri: https://fake.com/docs/asyncapi.json
       operationRef: findPetsByStatus
       server: staging
-      message: getPetByStatusQuery
-      binding: http
-      payload:
-        petId: $\{ .pet.id }
+      message:
+        payload:
+          petId: $\{ .pet.id }
       authentication:
         bearer:
           token: $\{ .token }`} />
         </div>
+        <input type="radio" name="code_tabs" role="tab" class="tab" aria-label="OpenAPI" />
+        <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
+          <h3 class="text-xl font-bold mb-4">OpenAPI Example</h3>
+          <Code themes={{'light': 'github-light', 'dark': 'github-dark'}} lang="yaml" code={`document:
+  dsl: '1.0.0-alpha5'
+  namespace: examples
+  name: call-openapi
+  version: '1.0.0'
+do:
+  - findPet:
+      call: openapi
+      with:
+        document: 
+          endpoint: https://petstore.swagger.io/v2/swagger.json
+        operationId: findPetsByStatus
+        parameters:
+          status: available`} />
+        </div>
+        <input type="radio" name="code_tabs" role="tab" class="tab" aria-label="gRPC" />
+        <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
+          <h3 class="text-xl font-bold mb-4">gRPC Example</h3>
+          <Code themes={{'light': 'github-light', 'dark': 'github-dark'}} lang="yaml" code={`document:
+  dsl: '1.0.0-alpha5'
+  namespace: examples
+  name: call-grpc
+  version: '1.0.0'
+do:
+  - greet:
+      call: grpc
+      with:
+        proto: 
+          endpoint: file://app/greet.proto
+        service:
+          name: GreeterApi.Greeter
+          host: localhost
+          port: 5011
+        method: SayHello
+        arguments:
+          name: '$\{ .user.preferredDisplayName }'`} />
+        </div>
+        <input type="radio" name="code_tabs" role="tab" class="tab" aria-label="container" />
+        <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
+          <h3 class="text-xl font-bold mb-4">Container Example</h3>
+          <Code themes={{'light': 'github-light', 'dark': 'github-dark'}} lang="yaml" code={`document:
+  dsl: '1.0.0-alpha5'
+  namespace: examples
+  name: run-container
+  version: '1.0.0'
+do:
+  - runContainer:
+      run:
+        container:
+          image: fake-image`} />
+        </div>
       </div>
   </Section>