tom/Datastar_Meetup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

signals example2

Browse Source
This commit is contained in:
thomashamburg 2025-10-31 19:03:08 +01:00
parent bedfe1aa02
commit 1a23b54513
15 changed files with 2995 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
hypermedia/1-example/index.html
View File

@ -6,13 +6,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hypermedia</title> <title>Hypermedia</title>
<link rel="stylesheet" href="pico.blue.css"> <link rel="stylesheet" href="pico.blue.css">
<meta name="color-scheme" content="light dark">
<script type="module" src="datastar.js"></script> <script type="module" src="datastar.js"></script>
</head> </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="record1" data-init="@get('display-record1.html')"></article>
<article id="record2" data-init="@get('display-record2.html')"></article> <article id="record2" data-init="@get('display-record2.html')"></article>
<article id="record3" data-init="@get('display-record3.html')"></article> <article id="record3" data-init="@get('display-record3.html')"></article>

6
hypermedia/1-example/pico.blue.css
View File

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

9
hypermedia/2-example/datastar.js Normal file
View File

File diff suppressed because one or more lines are too long

7
hypermedia/2-example/datastar.js.map Normal file
View File

File diff suppressed because one or more lines are too long

70
hypermedia/2-example/index.html Normal file
View File

@ -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>

2808
hypermedia/2-example/pico.blue.css Normal file
View File

File diff suppressed because it is too large Load Diff

11
hypermedia/2-example/record1.json Normal file
View File

@ -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"
}

11
hypermedia/2-example/record2.json Normal file
View File

@ -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"
}

11
hypermedia/2-example/record3.json Normal file
View File

@ -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"
}

11
hypermedia/2-example/record4.json Normal file
View File

@ -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"
}

11
hypermedia/2-example/record5.json Normal file
View File

@ -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"
}

11
hypermedia/2-example/record6.json Normal file
View File

@ -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"
}