signals example2

hypermedia/1-example/display-record1.html

@@ -6,35 +6,35 @@
     <form inert>
         <div class="form-group">
             <label for="email1">Email</label>
-            <input type="email" id="email1" value="Sincere@april.biz" >
+            <input type="email" id="email1" value="Sincere@april.biz">
         </div>
         <div class="form-group">
             <label for="phone1">Phone</label>
-            <input type="tel" id="phone1" value="1-770-736-8031 x56442" >
+            <input type="tel" id="phone1" value="1-770-736-8031 x56442">
         </div>
         <div class="form-group">
             <label for="website1">Website</label>
-            <input type="text" id="website1" value="hildegard.org" >
+            <input type="text" id="website1" value="hildegard.org">
         </div>
         <div class="form-group">
             <label for="address1">Address</label>
-            <input type="text" id="address1" value="Apt. 556, Kulas Light" >
+            <input type="text" id="address1" value="Apt. 556, Kulas Light">
         </div>
         <div class="form-group">
             <label for="city1">City</label>
-            <input type="text" id="city1" value="Gwenborough, 92998-3874" >
+            <input type="text" id="city1" value="Gwenborough, 92998-3874">
         </div>
         <div class="form-group">
             <label for="company1">Company</label>
-            <input type="text" id="company1" value="Romaguera-Crona" >
+            <input type="text" id="company1" value="Romaguera-Crona">
         </div>
         <div class="form-group">
             <label for="catchphrase1">Catchphrase</label>
-            <input type="text" id="catchphrase1" value="Multi-layered client-server neural-net" >
+            <input type="text" id="catchphrase1" value="Multi-layered client-server neural-net">
         </div>
     </form>
     <footer class="grid">
         <button class="primary" data-on:click="@get('edit-record1.html')">Edit</button>
         <button class="secondary" data-on:click="@get('deleted-record1.html')">Delete</button>
     </footer>
-</article>
+</article>

hypermedia/1-example/display-record2.html

@@ -6,35 +6,35 @@
     <form inert>
         <div class="form-group">
             <label for="email2">Email</label>
-            <input type="email" id="email2" value="Shanna@melissa.tv" >
+            <input type="email" id="email2" value="Shanna@melissa.tv">
         </div>
         <div class="form-group">
             <label for="phone2">Phone</label>
-            <input type="tel" id="phone2" value="010-692-6593 x09125" >
+            <input type="tel" id="phone2" value="010-692-6593 x09125">
         </div>
         <div class="form-group">
             <label for="website2">Website</label>
-            <input type="text" id="website2" value="anastasia.net" >
+            <input type="text" id="website2" value="anastasia.net">
         </div>
         <div class="form-group">
             <label for="address2">Address</label>
-            <input type="text" id="address2" value="Suite 879, Victor Plains" >
+            <input type="text" id="address2" value="Suite 879, Victor Plains">
         </div>
         <div class="form-group">
             <label for="city2">City</label>
-            <input type="text" id="city2" value="Wisokyburgh, 90566-7771" >
+            <input type="text" id="city2" value="Wisokyburgh, 90566-7771">
         </div>
         <div class="form-group">
             <label for="company2">Company</label>
-            <input type="text" id="company2" value="Deckow-Crist" >
+            <input type="text" id="company2" value="Deckow-Crist">
         </div>
         <div class="form-group">
             <label for="catchphrase2">Catchphrase</label>
-            <input type="text" id="catchphrase2" value="Proactive didactic contingency" >
+            <input type="text" id="catchphrase2" value="Proactive didactic contingency">
         </div>
     </form>
     <footer class="grid">
         <button class="primary" data-on:click="@get('edit-record2.html')">Edit</button>
-       <button class="secondary" data-on:click="@get('deleted-record2.html')">Delete</button>
+        <button class="secondary" data-on:click="@get('deleted-record2.html')">Delete</button>
     </footer>
 </article>

hypermedia/1-example/display-record3.html

@@ -6,31 +6,31 @@
     <form inert>
         <div class="form-group">
             <label for="email3">Email</label>
-            <input type="email" id="email3" value="Nathan@yesenia.net" >
+            <input type="email" id="email3" value="Nathan@yesenia.net">
         </div>
         <div class="form-group">
             <label for="phone3">Phone</label>
-            <input type="tel" id="phone3" value="1-463-123-4447" >
+            <input type="tel" id="phone3" value="1-463-123-4447">
         </div>
         <div class="form-group">
             <label for="website3">Website</label>
-            <input type="text" id="website3" value="ramiro.info" >
+            <input type="text" id="website3" value="ramiro.info">
         </div>
         <div class="form-group">
             <label for="address3">Address</label>
-            <input type="text" id="address3" value="Suite 847, Douglas Extension" >
+            <input type="text" id="address3" value="Suite 847, Douglas Extension">
         </div>
         <div class="form-group">
             <label for="city3">City</label>
-            <input type="text" id="city3" value="McKenziehaven, 59590-4157" >
+            <input type="text" id="city3" value="McKenziehaven, 59590-4157">
         </div>
         <div class="form-group">
             <label for="company3">Company</label>
-            <input type="text" id="company3" value="Romaguera-Jacobson" >
+            <input type="text" id="company3" value="Romaguera-Jacobson">
         </div>
         <div class="form-group">
             <label for="catchphrase3">Catchphrase</label>
-            <input type="text" id="catchphrase3" value="Face to face bifurcated interface" >
+            <input type="text" id="catchphrase3" value="Face to face bifurcated interface">
         </div>
     </form>
     <footer class="grid">

hypermedia/1-example/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html >
 <html lang="en">
 
 <head>
@@ -6,13 +6,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hypermedia</title>
     <link rel="stylesheet" href="pico.blue.css">
+    <meta name="color-scheme" content="light dark">
     <script type="module" src="datastar.js"></script>
 </head>
 
-<body class="container">
+<body class="container" data-theme="light">
-    <h1>Hypermedia as the Engine of Application State</h1>
 
-    <main class="grid">
+    <h1 style="margin-top: 1em; text-align:center">Hypermedia as the Engine of Application State</h1>
+
+    <main class="grid" data-theme="dark">
         <article id="record1" data-init="@get('display-record1.html')"></article>
         <article id="record2" data-init="@get('display-record2.html')"></article>
         <article id="record3" data-init="@get('display-record3.html')"></article>

hypermedia/1-example/pico.blue.css

@@ -6,6 +6,12 @@
 /**
  * Styles
  */
+
+@view-transition {
+  navigation: auto;
+}
+
+
 :root {
   --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);

hypermedia/2-example/index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hypermedia</title>
+    <link rel="stylesheet" href="pico.blue.css">
+    <meta name="color-scheme" content="light dark">
+    <script type="module" src="datastar.js"></script>
+</head>
+
+<body class="container" data-theme="light">
+
+    <h1 style="margin-top: 1em; text-align:center">Signals</h1>
+
+    <main class="grid" data-theme="dark">
+        <article id="record" data-init="@get('record1.json')" data-signals:recordnumber="1">
+            <header>
+                <h3 data-text="$name"></h3>
+                <p></p>
+            </header>
+            <form>
+                <div class="form-group" >
+                    <label for="username">username</label>
+                    <input type="username" id="username" data-bind:username >
+                </div>
+                <div class="form-group" >
+                    <label for="email">Email</label>
+                    <input type="email" id="email" data-bind:email>
+                </div>
+                <div class="form-group">
+                    <label for="phone">Phone</label>
+                    <input type="tel" id="phone" data-bind:phone>
+                </div>
+                <div class="form-group">
+                    <label for="street">Street</label>
+                    <input type="text" id="street"  data-bind:street>
+                </div>
+                <div class="form-group">
+                    <label for="suite">Suite</label>
+                    <input type="text" id="suite"  data-bind:suite>
+                </div>
+                <div class="form-group">
+                    <label for="city">City</label>
+                    <input type="text" id="city" data-bind:city>
+                </div>
+                <div class="form-group">
+                    <label for="zipcode">Zipcode</label>
+                    <input type="text" id="zipcode" data-bind:zipcode>
+                </div>
+                <div class="form-group">
+                    <label for="website">Website</label>
+                    <input type="text" id="website" data-bind:website>
+                </div>
+            </form>
+            <footer class="grid">
+                <button class="primary" data-attr:disabled="$recordnumber <= 1" data-on:click="@get(`record${$recordnumber - 1}.json`); $recordnumber--">Previous</button>
+                <button class="primary" data-attr:disabled="$recordnumber >= 6" data-on:click="@get(`record${$recordnumber + 1}.json`) ; $recordnumber++">Next</button>
+            </footer>
+        </article>
+    </main>
+
+
+    <pre data-json-signals></pre>
+
+
+</body>
+
+</html>

hypermedia/2-example/record1.json

@@ -0,0 +1,11 @@
+{
+  "name": "Marcus Thompson",
+  "username": "MarcusT",
+  "email": "marcus.thompson@techmail.com",
+  "street": "Sunset Boulevard",
+  "suite": "Apt 42",
+  "city": "Riverside",
+  "zipcode": "92501-3345",
+  "phone": "555-123-4567 x1024",
+  "website": "marcusthompson.io"
+}

hypermedia/2-example/record2.json

@@ -0,0 +1,11 @@
+{
+    "name": "Sofia Chen",
+    "username": "SofiaChen",
+    "email": "sofia.c@cloudnet.org",
+    "street": "Maple Avenue",
+    "suite": "Suite 210",
+    "city": "Oakridge",
+    "zipcode": "45678-9012",
+    "phone": "555-987-6543 x2156",
+    "website": "sofiachen.dev"
+  }

hypermedia/2-example/record3.json

@@ -0,0 +1,11 @@
+{
+    "name": "Liam O'Brien",
+    "username": "LiamOB",
+    "email": "liam.obrien@mailservice.net",
+    "street": "Highland Drive",
+    "suite": "Unit 5B",
+    "city": "Greenfield",
+    "zipcode": "78945-1234",
+    "phone": "555-456-7890 x3401",
+    "website": "liamobrien.co"
+}

hypermedia/2-example/record4.json

@@ -0,0 +1,11 @@
+{
+    "name": "Priya Sharma",
+    "username": "PriyaS",
+    "email": "priya@techspace.com",
+    "street": "Ocean Park Road",
+    "suite": "Suite 1505",
+    "city": "Bayshore",
+    "zipcode": "34567-8901",
+    "phone": "555-234-5678 x7890",
+    "website": "priyasharma.net"
+}

hypermedia/2-example/record5.json

@@ -0,0 +1,11 @@
+{
+    "name": "Daniel Foster",
+    "username": "DanFoster",
+    "email": "d.foster@inbox.tv",
+    "street": "Riverside Terrace",
+    "suite": "Apt 302",
+    "city": "Lakewood",
+    "zipcode": "56789-0123",
+    "phone": "555-345-6789 x4512",
+    "website": "danielfoster.com"
+}

hypermedia/2-example/record6.json

@@ -0,0 +1,11 @@
+{
+    "name": "Amara Johnson",
+    "username": "AmaraJ",
+    "email": "amara.j@webmail.org",
+    "street": "Park Lane",
+    "suite": "Suite 650",
+    "city": "Mountainview",
+    "zipcode": "67890-2345",
+    "phone": "555-678-9012 x5623",
+    "website": "amarajohnson.io"
+}