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

ignatz · ignatz · commit cf85a5311209 · 2025-01-24T16:58:57.000+01:00
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <p align="center">
   <a href="https://trailbase.io" target="_blank">
     <picture>
-      <img alt="TrailBase logo" width="150" src="https://raw.githubusercontent.com/trailbaseio/trailbase/refs/heads/main/assets/logo.svg" />
+      <img alt="TrailBase logo" width="150" src="assets/logo.svg" />
     </picture>
   </a>
 </p>
@@ -39,7 +39,7 @@
 <p align="center">
   <a href="https://demo.trailbase.io/_/admin" target="_blank">
     <picture>
-      <img alt="Admin UI" width="512" src="https://raw.githubusercontent.com/trailbaseio/trailbase/refs/heads/main/docs/src/assets/screenshot.webp" />
+      <img alt="Admin UI" width="512" src="assets/screenshot.webp" />
     </picture>
   </a>
 </p>
diff --git a/docs/src/content/docs/getting-started/first-ui-app.mdx b/docs/src/content/docs/getting-started/first-ui-app.mdx
@@ -13,7 +13,7 @@ production-ready web app all in ~100 lines of code.
 
 <div class="flex justify-center">
   <div class="w-[80%] shadow-lg	 ">
-    ![screenshot](../../../../../examples/coffee-vector-search/assets/screenshot.png)
+    ![screenshot](../../../../../examples/coffee-vector-search/screenshots/screenshot0.png)
   </div>
 </div>
 
diff --git a/examples/README.md b/examples/README.md
@@ -1,35 +1,63 @@
 # 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="blog/screenshots/screenshot_web.png"
+      alt="Blog web app"
     />
   </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="blog/screenshots/screenshot_flutter.png"
+      alt="Blog Flutter app"
     />
   </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
+<p align="center">
+  <picture align="center">
+     <img
+      height="420"
+      src="collab-clicker-ssr/screenshots/screenshot0.png"
+      alt="Collaborative acorn clicker"
+    />
+  </picture>
+</p>
+
+#### [Coffee Vector Search](coffee-vector-search/)
+
+A small single-page web app demonstrating vector search and custom JS/TS endpoints.
+
+<p align="center">
+  <picture align="center">
+    <img
+      height="420"
+      src="coffee-vector-search/screenshots/screenshot0.png"
+      alt="Coffee vector search web app"
+    />
+  </picture>
+</p>
+
+#### [Data CLI App](data-cli-tutorial/)
 
-The code for the [tutorial](https://trailbase.io/getting-started/first-app).
+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.
diff --git a/examples/blog/README.md b/examples/blog/README.md
@@ -4,15 +4,15 @@
   <picture align="center">
     <img
       height="420"
-      src="https://raw.githubusercontent.com/ignatz/trailbase/refs/heads/main/examples/blog/assets/screenshot_web.png"
+      src="screenshots/screenshot_web.png"
       alt="Screenshot Web"
     />
   </picture>
 
   <picture align="center">
     <img
       height="420"
-      src="https://raw.githubusercontent.com/ignatz/trailbase/refs/heads/main/examples/blog/assets/screenshot_flutter.png"
+      src="screenshots/screenshot_flutter.png"
       alt="Screenshot Flutter"
     />
   </picture>
diff --git a/examples/blog/screenshots/screenshot_flutter.png b/examples/blog/screenshots/screenshot_flutter.png
diff --git a/examples/blog/screenshots/screenshot_web.png b/examples/blog/screenshots/screenshot_web.png
diff --git a/examples/coffee-vector-search/README.md b/examples/coffee-vector-search/README.md
@@ -1,4 +1,4 @@
-# Coffee Search
+# Coffee Vector Search
 
 A small web application demonstrating the use of TrailBase and its vector
 search to build a coffee search.
diff --git a/examples/coffee-vector-search/screenshots/screenshot0.png b/examples/coffee-vector-search/screenshots/screenshot0.png
diff --git a/examples/coffee-vector-search/src/App.tsx b/examples/coffee-vector-search/src/App.tsx
@@ -42,7 +42,7 @@ function Table() {
 
   return (
     <>
-      <div className="inputs">
+      <div className="inputs" style={{ margin: "2rem" }}>
         <Input label="Aroma" value={aroma} update={setAroma} />
         <Input label="Flavor" value={flavor} update={setFlavor} />
         <Input label="Acidity" value={acidity} update={setAcidity} />
@@ -78,7 +78,7 @@ function Table() {
 
 export const App = () => (
   <>
-    <h1>Coffee Search</h1>
+    <h1>☕ search</h1>
     <Table />
   </>
 );
diff --git a/examples/collab-clicker-ssr/README.md b/examples/collab-clicker-ssr/README.md
@@ -1,4 +1,8 @@
-# SSR Web App with Client-Side Hydration
+# Collaborative Clicker App with SSR
+
+This app serves as a showcase for "realtime" API subscriptions and server-side
+rendering (SSR). This app uses SolidJS but the same approach applies to React,
+Vue, Svelte, Preact, ... .
 
 ## Generate the App
 
diff --git a/examples/collab-clicker-ssr/screenshots/screenshot0.png b/examples/collab-clicker-ssr/screenshots/screenshot0.png
diff --git a/examples/collab-clicker-ssr/src/App.tsx b/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>
   )
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-# Coffee Search`
	`1`	`+# Coffee Vector Search`
`2`	`2`
`3`	`3`	`A small web application demonstrating the use of TrailBase and its vector`
`4`	`4`	`search to build a coffee search.`