workflow slide added

slides/datastar/slides.md

@@ -123,13 +123,13 @@ transition: fade-out
 
 ### Finding my combination of web technologies for a minimal viable web application.
 
-<div class="mt-20"/>
+<div class="mt-10"/>
 
 - Part 1: The Database: SQLite
 - Part 2: The No-ORM ORM - A very simple Data Abstraction Layer.
 - Part 3: Developing a Web Server Application in Go.
 - Part 4: Datastar - a lightweight framework for real-time collaborative web apps.
-- Part 5: Modern CSS.
+- Part 5: Modern HTML and modern CSS.
 - Part 6: Web components.
 - Part 7: Simple Deployments with a VPS, Nginx, Certbot and a single binary file.
 
@@ -226,7 +226,7 @@ Declarative vs. Imperative, DS conforms strictly to the web's specs.
 class: default
 ---
 
-# Reducing the Network to a Remote Procedure Call
+# Reducing the Network to a Function Call
 
 ```js
 {
@@ -355,36 +355,49 @@ sequenceDiagram
     Note over Browser,Backend: Real-time updates without new requests
 ```
 ---
-class: default
+layout: two-cols
+layoutClass: gap-2
 ---
 
-# Reducing the Network to a Remote Procedure Call
+```mermaid  { scale: 0.4}
+graph TD
+    Start([Client Starts]) --> GetProducts[GET /products]
     
-```js
+    GetProducts --> ProductResp["Response: Product List<br/>links:<br/>add-to-cart: /cart/items<br/>self: /products"]
-{
+    
-    const { data, error } = await to(fetch("https://api.example.com/api/board"));
+    ProductResp --> AddCart[POST /cart/items]
-    if (error) {
+    
-      // handle error
+    AddCart --> CartResp["Response: Cart Updated<br/>links:<br/>self: /cart<br/>update-item: /cart/items/id<br/>remove-item: /cart/items/id<br/>checkout: /checkout"]
-      return;
+    
-    }
+    CartResp --> Decision1{Client Action}
-    // handle data
+    Decision1 -->|Continue Shopping| GetProducts
-}
+    Decision1 -->|Proceed| Checkout[POST /checkout]
-{
+    
-    const { data, error } = await to(fetch("https://api.example.com/api/users/12"));
+    Checkout --> CheckoutResp["Response: Checkout Session<br/>links:<br/>payment: /payment<br/>cancel: /cart"]
-    if (error) {
+
-      // handle error
+    
-      return;
+```
-    }
+::right::
-    // handle data
+```mermaid  { scale: 0.4}
-}
+graph TD
+    CheckoutResp["Response: Checkout Session<br/>links:<br/>payment: /payment<br/>cancel: /cart"] --> Payment[POST /payment]
+    
+    Payment --> PaymentResp["Response: Payment Success<br/>links:<br/>order: /orders/id<br/>track: /orders/id/tracking<br/>invoice: /orders/id/invoice"]
+    
+    PaymentResp --> GetOrder[GET /orders/id]
+    
+    GetOrder --> OrderState{Order State}
+    
+    OrderState -->|Pending| PendingResp["Response: Order Pending<br/>links:<br/>self: /orders/id<br/>cancel: /orders/id/cancel<br/>track: /orders/id/tracking"]
+    
+    OrderState -->|Shipped| ShippedResp["Response: Order Shipped<br/>links:<br/>self: /orders/id<br/>track: /orders/id/tracking<br/>return: /orders/id/return"]
+    
+    OrderState -->|Delivered| DeliveredResp["Response: Order Delivered<br/>links:<br/>self: /orders/id<br/>return: /orders/id/return<br/>review: /orders/id/review"]
+    
+    PendingResp --> End([Workflow Complete])
+    ShippedResp --> End
+    DeliveredResp --> End
 
-// the function that "unwraps" the promise:
-export function to(promise: Promise<Response>) {
-  return promise
-    .then((response) => response.json())
-    .then((data) => ({ data, error: null }))
-    .catch((error) => ({ data: null, error }));
-}
     
 ```