diff --git a/README.md b/README.md index 3e0ca2c..38c307b 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@

- TrailBase logo + TrailBase logo

@@ -39,7 +39,7 @@

- Admin UI + Admin UI

diff --git a/examples/README.md b/examples/README.md index afbba56..31f2667 100644 --- a/examples/README.md +++ b/examples/README.md @@ -1,6 +1,6 @@ # TrailBase Examples -#### Blog +#### [Blog](blog/) A simple styled Blog example with UIs both for web and Flutter: @@ -8,28 +8,47 @@ A simple styled Blog example with UIs both for web and Flutter: Screenshot Web Screenshot Flutter

-#### 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 + +

+ +#### [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/) -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 index 4e25ca4..d1b59fb 100644 --- a/examples/blog/README.md +++ b/examples/blog/README.md @@ -4,7 +4,7 @@ Screenshot Web @@ -12,7 +12,7 @@ Screenshot Flutter diff --git a/examples/blog/assets/screenshot_flutter.png b/examples/blog/screenshots/screenshot_flutter.png similarity index 100% rename from examples/blog/assets/screenshot_flutter.png rename to examples/blog/screenshots/screenshot_flutter.png diff --git a/examples/blog/assets/screenshot_web.png b/examples/blog/screenshots/screenshot_web.png similarity index 100% rename from examples/blog/assets/screenshot_web.png rename to examples/blog/screenshots/screenshot_web.png diff --git a/examples/collab-clicker-ssr/screenshots/screenshot0.png b/examples/collab-clicker-ssr/screenshots/screenshot0.png new file mode 100644 index 0000000..e87a031 Binary files /dev/null and b/examples/collab-clicker-ssr/screenshots/screenshot0.png differ diff --git a/examples/collab-clicker-ssr/src/App.tsx b/examples/collab-clicker-ssr/src/App.tsx index ca9315e..54f58cc 100644 --- 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 (
-

TrailBase Clicker

+

TrailBase

-
+
-

- Click the button across different tabs, windows or browsers. -

+ + +

Click the acorn across different tabs, browsers or computers.

+ +
+

Context

+

+ 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. +

+
) }