docs: make it easy to see how to run each example in its README (#2085)

examples/animated_show/README.md

@@ -8,3 +8,7 @@ CSS.
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/counter/README.md

@@ -5,3 +5,7 @@ This example creates a simple counter in a client side rendered app with Rust an
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/counter_isomorphic/README.md

@@ -5,3 +5,7 @@ This example demonstrates how to use a function isomorphically, to run a server
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/counter_url_query/README.md

@@ -5,3 +5,7 @@ This example creates a simple counter whose state is persisted and synced in the
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/counter_without_macros/README.md

@@ -5,3 +5,7 @@ This example is the same like the `counter` but it's written without using macro
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/counters/README.md

@@ -5,3 +5,7 @@ This example showcases a basic leptos app with many counters. It is a good examp
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/counters_stable/README.md

@@ -5,3 +5,7 @@ This example showcases a basic Leptos app with many counters. It is a good examp
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/directives/README.md

@@ -1,7 +1,11 @@
 # Leptos Directives Example
 
-This example showcases a basic leptos app that shows how to write and use directives. 
+This example showcases a basic leptos app that shows how to write and use directives.
 
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/error_boundary/README.md

@@ -9,3 +9,7 @@ See the [Examples README](../README.md) for setup and run instructions.
 ## Testing
 
 This project is configured to run start and stop of processes for integration tests wihtout the use of Cargo Leptos or Node.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/fetch/README.md

@@ -4,4 +4,8 @@ This example shows how to fetch data from the client in WebAssembly.
 
 ## Getting Started
 
-See the [Examples README](../README.md) for setup and run instructions.
+See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/hackernews/README.md

@@ -5,3 +5,7 @@ This example creates a basic clone of the Hacker News site. It showcases Leptos'
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` or `cargo leptos watch` to run this example.

examples/hackernews_axum/README.md

@@ -5,3 +5,7 @@ This example creates a basic clone of the Hacker News site. It showcases Leptos'
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` or `cargo leptos watch` to run this example.

examples/hackernews_islands_axum/README.md

@@ -5,3 +5,7 @@ This example creates a basic clone of the Hacker News site. It showcases Leptos'
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/js-framework-benchmark/README.md

@@ -6,3 +6,7 @@ This example creates a large table with randomized entries, it also shows usage
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/parent_child/README.md

@@ -12,3 +12,7 @@ This example highlights four different ways that child components can communicat
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/portal/README.md

@@ -5,3 +5,7 @@ This example showcases a basic leptos app with a portal.
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/router/README.md

@@ -5,3 +5,7 @@ This example demonstrates how Leptos’s router works for client side routing.
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/session_auth_axum/README.md

@@ -5,3 +5,7 @@ This example creates a basic todo app with an Axum backend that uses Leptos' ser
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/slots/README.md

@@ -5,3 +5,7 @@ This example shows how to use Slots in Leptos.
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/ssr_modes/README.md

@@ -9,18 +9,25 @@ See the [Examples README](../README.md) for setup and run instructions.
 ## Server-Side Rendering Modes
 
 1. **Synchronous**: Serve an HTML shell that includes `fallback` for any `Suspense`. Load data on the client, replacing `fallback` once they're loaded.
-     - *Pros*: App shell appears very quickly: great TTFB (time to first byte).
-     - *Cons*: Resources load relatively slowly; you need to wait for JS + Wasm to load before even making a request.
+
+   - _Pros_: App shell appears very quickly: great TTFB (time to first byte).
+   - _Cons_: Resources load relatively slowly; you need to wait for JS + Wasm to load before even making a request.
 
 2. **Out-of-order streaming**: Serve an HTML shell that includes `fallback` for any `Suspense`. Load data on the **server**, streaming it down to the client as it resolves, and streaming down HTML for `Suspense` nodes.
-     - *Pros*: Combines the best of **synchronous** and **`async`**, with a very fast shell and resources that begin loading on the server.
-     - *Cons*: Requires JS for suspended fragments to appear in correct order. Weaker meta tag support when it depends on data that's under suspense (has already streamed down `<head>`)
+
+   - _Pros_: Combines the best of **synchronous** and **`async`**, with a very fast shell and resources that begin loading on the server.
+   - _Cons_: Requires JS for suspended fragments to appear in correct order. Weaker meta tag support when it depends on data that's under suspense (has already streamed down `<head>`)
 
 3. **In-order streaming**: Walk through the tree, returning HTML synchronously as in synchronous rendering and out-of-order streaming until you hit a `Suspense`. At that point, wait for all its data to load, then render it, then the rest of the tree.
-     - *Pros*: Does not require JS for HTML to appear in correct order.
-     - *Cons*: Loads the shell more slowly than out-of-order streaming or synchronous rendering because it needs to pause at every `Suspense`. Cannot begin hydration until the entire page has loaded, so earlier pieces
-       of the page will not be interactive until the suspended chunks have loaded.
+
+   - _Pros_: Does not require JS for HTML to appear in correct order.
+   - _Cons_: Loads the shell more slowly than out-of-order streaming or synchronous rendering because it needs to pause at every `Suspense`. Cannot begin hydration until the entire page has loaded, so earlier pieces
+     of the page will not be interactive until the suspended chunks have loaded.
 
 4. **`async`**: Load all resources on the server. Wait until all data are loaded, and render HTML in one sweep.
-     - *Pros*: Better handling for meta tags (because you know async data even before you render the `<head>`). Faster complete load than **synchronous** because async resources begin loading on server.
-     - *Cons*: Slower load time/TTFB: you need to wait for all async resources to load before displaying anything on the client.
+   - _Pros_: Better handling for meta tags (because you know async data even before you render the `<head>`). Faster complete load than **synchronous** because async resources begin loading on server.
+   - _Cons_: Slower load time/TTFB: you need to wait for all async resources to load before displaying anything on the client.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/ssr_modes_axum/README.md

@@ -9,19 +9,25 @@ See the [Examples README](../README.md) for setup and run instructions.
 ## Server-Side Rendering Modes
 
 1. **Synchronous**: Serve an HTML shell that includes `fallback` for any `Suspense`. Load data on the client, replacing `fallback` once they're loaded.
-     - *Pros*: App shell appears very quickly: great TTFB (time to first byte).
-     - *Cons*: Resources load relatively slowly; you need to wait for JS + Wasm to load before even making a request.
+
+   - _Pros_: App shell appears very quickly: great TTFB (time to first byte).
+   - _Cons_: Resources load relatively slowly; you need to wait for JS + Wasm to load before even making a request.
 
 2. **Out-of-order streaming**: Serve an HTML shell that includes `fallback` for any `Suspense`. Load data on the **server**, streaming it down to the client as it resolves, and streaming down HTML for `Suspense` nodes.
-     - *Pros*: Combines the best of **synchronous** and **`async`**, with a very fast shell and resources that begin loading on the server.
-     - *Cons*: Requires JS for suspended fragments to appear in correct order. Weaker meta tag support when it depends on data that's under suspense (has already streamed down `<head>`)
+
+   - _Pros_: Combines the best of **synchronous** and **`async`**, with a very fast shell and resources that begin loading on the server.
+   - _Cons_: Requires JS for suspended fragments to appear in correct order. Weaker meta tag support when it depends on data that's under suspense (has already streamed down `<head>`)
 
 3. **In-order streaming**: Walk through the tree, returning HTML synchronously as in synchronous rendering and out-of-order streaming until you hit a `Suspense`. At that point, wait for all its data to load, then render it, then the rest of the tree.
-     - *Pros*: Does not require JS for HTML to appear in correct order.
-     - *Cons*: Loads the shell more slowly than out-of-order streaming or synchronous rendering because it needs to pause at every `Suspense`. Cannot begin hydration until the entire page has loaded, so earlier pieces
-       of the page will not be interactive until the suspended chunks have loaded.
+
+   - _Pros_: Does not require JS for HTML to appear in correct order.
+   - _Cons_: Loads the shell more slowly than out-of-order streaming or synchronous rendering because it needs to pause at every `Suspense`. Cannot begin hydration until the entire page has loaded, so earlier pieces
+     of the page will not be interactive until the suspended chunks have loaded.
 
 4. **`async`**: Load all resources on the server. Wait until all data are loaded, and render HTML in one sweep.
-     - *Pros*: Better handling for meta tags (because you know async data even before you render the `<head>`). Faster complete load than **synchronous** because async resources begin loading on server.
-     - *Cons*: Slower load time/TTFB: you need to wait for all async resources to load before displaying anything on the client.
+   - _Pros_: Better handling for meta tags (because you know async data even before you render the `<head>`). Faster complete load than **synchronous** because async resources begin loading on server.
+   - _Cons_: Slower load time/TTFB: you need to wait for all async resources to load before displaying anything on the client.
 
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/suspense_tests/README.md

@@ -9,3 +9,7 @@ See the [Examples README](../README.md) for setup and run instructions.
 ## Test Strategy
 
 See the [E2E README](./e2e/README.md) to learn about the web testing strategy for this project.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/tailwind_axum/README.md

@@ -5,3 +5,7 @@ This is a template demonstrating how to integrate [TailwindCSS](https://tailwind
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/tailwind_csr/README.md

@@ -51,3 +51,7 @@ Allow vscode Ports forward: 3000, 3001.
 ### Attribution
 
 Many thanks to GreatGreg for putting together this guide. You can find the original, with added details, [here](https://github.com/leptos-rs/leptos/discussions/125).
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/timer/README.md

@@ -5,3 +5,7 @@ This example creates a simple timer based on `setInterval` in a client side rend
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/todo_app_sqlite/README.md

@@ -13,3 +13,7 @@ See the [E2E README](./e2e/README.md) for more information about the testing str
 ## Rendering
 
 See the [SSR Notes](../SSR_NOTES.md) for more information about Server Side Rendering.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/todo_app_sqlite_axum/README.md

@@ -13,3 +13,7 @@ See the [E2E README](./e2e/README.md) for more information about the testing str
 ## Rendering
 
 See the [SSR Notes](../SSR_NOTES.md) for more information about Server Side Rendering.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/todo_app_sqlite_csr/README.md

@@ -13,3 +13,7 @@ See the [E2E README](./e2e/README.md) for more information about the testing str
 ## Rendering
 
 See the [SSR Notes](../SSR_NOTES.md) for more information about Server Side Rendering.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/todo_app_sqlite_viz/README.md

@@ -9,3 +9,7 @@ See the [Examples README](../README.md) for setup and run instructions.
 ## Rendering
 
 See the [SSR Notes](../SSR_NOTES.md) for more information about Server Side Rendering.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/todomvc/README.md

@@ -5,3 +5,7 @@ This is a Leptos implementation of the TodoMVC example common to many frameworks
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.