Skip to content

Commit 6443d3a

Browse files
VimCommandoVimCommando
authored
Add Axum activity feed example (#2)
* Add axum activity feed example * Remove state, use signals * Make signal patches partial * UX refinements * Update formatting * Refactoring and comments
1 parent 9ababdd commit 6443d3a

File tree

4 files changed

+354
-0
lines changed

4 files changed

+354
-0
lines changed

‎Cargo.lock‎

Lines changed: 96 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Cargo.toml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ axum = { version = "0.8.4", default-features = false, optional = true, features
3232
"tokio",
3333
"json",
3434
] }
35+
chrono = { version = "0.4.41", default-features = false, features = ["clock"] }
3536
rocket = { version = "0.5.1", default-features = false, optional = true }
3637
serde = { version = "1", default-features = false, optional = true, features = [
3738
"derive",

‎examples/activity-feed.html‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Datastar SDK Activity Feed Demo</title>
5+
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
6+
<script
7+
type="module"
8+
src="https://cdn.jsdelivr.net/gh/starfederation/datastar@main/bundles/datastar.js"
9+
></script>
10+
</head>
11+
<body class="bg-white dark:bg-gray-900 text-lg max-w-xl mx-auto my-16">
12+
<div
13+
class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5 space-y-2"
14+
>
15+
<div class="flex justify-between items-center">
16+
<h1 class="text-gray-900 dark:text-white text-3xl font-semibold">Datastar SDK Activity Feed Demo</h1>
17+
<img src="https://data-star.dev/static/images/rocket-64x64.png" alt="Rocket" width="64" height="64" />
18+
</div>
19+
<p class="mt-2">SSE events will be streamed from the backend to the frontend.</p>
20+
<div class="space-x-2">
21+
<input
22+
id="events"
23+
data-signals-events="200"
24+
data-bind-events
25+
type="number"
26+
step="100"
27+
min="0"
28+
class="w-36 rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20"
29+
/>
30+
<label for="events"> Number of events </label>
31+
</div>
32+
<div class="space-x-2">
33+
<input
34+
id="interval"
35+
data-signals-interval="10"
36+
data-bind-interval
37+
type="number"
38+
step="10"
39+
min="0"
40+
class="w-36 rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20"
41+
/>
42+
<label for="interval"> Interval in milliseconds </label>
43+
</div>
44+
<button
45+
id="start-button"
46+
data-on-click="@post(&#39;/event/generate&#39;)"
47+
data-signals-generating="false"
48+
data-attr-disabled="$generating"
49+
data-class="{
50+
'bg-gray-500 text-gray-300 cursor-wait': $generating,
51+
'bg-sky-500 text-white cursor-pointer hover:bg-sky-700 hover:text-gray-100': !$generating,
52+
}"
53+
class="rounded-md px-5 py-2.5 leading-5 font-semibold"
54+
>
55+
Generate
56+
</button>
57+
<span>&nbsp;|&nbsp;</span>
58+
<button
59+
data-on-click="@post(&#39;/event/done&#39;)"
60+
class="rounded-md bg-sky-500 px-5 py-2.5 leading-5 font-semibold text-white hover:bg-sky-700 hover:text-gray-100 cursor-pointer"
61+
>
62+
Done
63+
</button>
64+
<button
65+
data-on-click="@post(&#39;/event/warn&#39;)"
66+
class="rounded-md bg-sky-500 px-5 py-2.5 leading-5 font-semibold text-white hover:bg-sky-700 hover:text-gray-100 cursor-pointer"
67+
>
68+
Warn
69+
</button>
70+
<button
71+
data-on-click="@post(&#39;/event/fail&#39;)"
72+
class="rounded-md bg-sky-500 px-5 py-2.5 leading-5 font-semibold text-white hover:bg-sky-700 hover:text-gray-100 cursor-pointer"
73+
>
74+
Fail
75+
</button>
76+
<button
77+
data-on-click="@post(&#39;/event/info&#39;)"
78+
class="rounded-md bg-sky-500 px-5 py-2.5 leading-5 font-semibold text-white hover:bg-sky-700 hover:text-gray-100 cursor-pointer"
79+
>
80+
Info
81+
</button>
82+
</div>
83+
<div class="mt-2 text-gray-400 font-mono text-sm rounded-md bg-black p-4">
84+
<div id="feed">
85+
Click <code class="text-fuchsia-600">Generate</code> to create
86+
<span data-text="$events">200</span> events, <span data-text="$interval">10</span> milliseconds
87+
apart.<br />
88+
<span class="text-gray-100" data-signals-total="0"> Total: <span data-text="$total">0</span> </span>
89+
|
90+
<span class="text-green-500" data-signals-done="0"> Done: <span data-text="$done">0</span> </span>
91+
|
92+
<span class="text-yellow-500" data-signals-warn="0"> Warn: <span data-text="$warn">0</span> </span>
93+
|
94+
<span class="text-red-500" data-signals-fail="0"> Fail: <span data-text="$fail">0</span> </span>
95+
|
96+
<span class="text-blue-500" data-signals-info="0"> Info: <span data-text="$info">0</span> </span>
97+
<br />
98+
-------------------------------------------------------------
99+
</div>
100+
</div>
101+
</body>
102+
</html>

0 commit comments

Comments
 (0)