Minor: add more context on and around the collaborative clicker example.

examples/README.md

@@ -1,35 +1,52 @@
 # TrailBase Examples
 
-#### Blog
+#### [Blog](blog/)
 
 A simple styled Blog example with UIs both for web and Flutter:
 
 <p align="center">
   <picture align="center">
     <img
       height="420"
-      src="https://raw.githubusercontent.com/ignatz/trailbase/refs/heads/main/examples/blog/assets/screenshot_web.png"
-      alt="Screenshot Web"
+      src="https://raw.githubusercontent.com/ignatz/trailbase/refs/heads/main/examples/blog/screenshots/screenshot_web.png"
+      alt="Blog Web"
     />
   </picture>
 
   <picture align="center">
     <img
       height="420"
-      src="https://raw.githubusercontent.com/ignatz/trailbase/refs/heads/main/examples/blog/assets/screenshot_flutter.png"
-      alt="Screenshot Flutter"
+      src="https://raw.githubusercontent.com/ignatz/trailbase/refs/heads/main/examples/blog/screenshots/screenshot_flutter.png"
+      alt="BlogFlutter"
     />
   </picture>
 </p>
 
-#### Coffee Search
+#### [Collaborate Server-Side Rendered Clicker](collab-clicker-ssr/)
 
-A very small web app demonstrating vector search and custom JS/TS endpoints.
+A small clicker application, where we can collaboratively make it go 🚀. It
+show-cases server-side rendering using SolidJS, however it could equally be
+React, Vue, Svelte, Preact, ... . After client-side hydration, click counter
+changes are streamed to everyone listening.
 
-#### First App Tutorial
+![Collaborative acorn clicker](collab-clicker-ssr/screenshots/screenshot0.png)
 
-The code for the [tutorial](https://trailbase.io/getting-started/first-app).
+<p align="center">
+  <picture align="center">
+    ![Collaborative acorn clicker](collab-clicker-ssr/screenshots/screenshot0.png)
+  </picture>
+</p>
+
+#### [Coffee Search](coffee-vector-search/)
+
+A small single-page web app demonstrating vector search and custom JS/TS endpoints.
+
+#### [Data CLI App](data-cli-tutorial/)
+
+This code belongs to the command-line app
+[tutorial](https://trailbase.io/getting-started/first-cli-app): IMDB data is
+ingested and queried both with curl using the record list API and a custom CLI.
 
-#### Custom Rust Binary
+#### [Custom Rust Binary](custom-binary/)
 
 A quick example on how to use TrailBase as a library.

examples/collab-clicker-ssr/src/App.tsx

@@ -1,4 +1,5 @@
 import { createSignal, onMount } from "solid-js"
+import logo from "../public/favicon.svg";
 
 export type Clicked = {
   count: number
@@ -58,20 +59,33 @@ export function App({ initialCount }: { initialCount?: number }) {
 
   return (
     <div class="flex flex-col gap-4 text-neutral-800">
-      <h1>TrailBase Clicker</h1>
+      <h1>TrailBase</h1>
 
-      <div class="px-4 py-2">
+      <div>
         <button
-          class="rounded bg-neutral-100 p-2 font-medium hover:scale-110 hover:outline outline-accent-600 active:scale-100 animate-all"
+          class="p-2 rounded-full hover:bg-accent-200 hover:scale-100 active:scale-90 animate-all"
           onClick={onClick}
         >
-          clicked {count()} times
+          <img class="size-[256px] m-2" src={logo} />
         </button>
       </div>
 
-      <p>
-        Click the button across different tabs, windows or browsers.
-      </p>
+      <button class="px-4 py-2" onClick={onClick}>
+        <span class="p-2 bg-neutral-100 rounded font-bold">Clicked {count()} times</span>
+      </button>
+
+      <p>Click the acorn across different tabs, browsers or computers.</p>
+
+      <div class="m-4 p-4 outline outline-1 outline-natural-200 rounded text-sm max-w-[680px]">
+        <p class="font-bold py-1">Context</p>
+        <p>
+          This page showcases TrailBase's "realtime" APIs and server-side rendering (SSR) capabilities.
+          The initial page-load contains pre-rendered HTML, which is then hydrated on the client.
+          This reduces latency by saving the client a round-trip to fetch the initial counter value.
+          The client also subscribes to counter changes and is updates the page whenever someone else
+          presses the acorn.
+        </p>
+      </div>
     </div>
   )
 }