diff --git a/examples/animated_show/README.md b/examples/animated_show/README.md index a4cfb65bce..fe966c9ded 100644 --- a/examples/animated_show/README.md +++ b/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. diff --git a/examples/counter/README.md b/examples/counter/README.md index 04812db84f..70d6662cec 100644 --- a/examples/counter/README.md +++ b/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. diff --git a/examples/counter_isomorphic/README.md b/examples/counter_isomorphic/README.md index 26c7a0c86a..1a196bcd44 100644 --- a/examples/counter_isomorphic/README.md +++ b/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. diff --git a/examples/counter_url_query/README.md b/examples/counter_url_query/README.md index c62839087e..031d27bb73 100644 --- a/examples/counter_url_query/README.md +++ b/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. diff --git a/examples/counter_without_macros/README.md b/examples/counter_without_macros/README.md index 2ea983cff3..f37c0259bd 100644 --- a/examples/counter_without_macros/README.md +++ b/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. diff --git a/examples/counters/README.md b/examples/counters/README.md index 35305e4320..bfd9d00b24 100644 --- a/examples/counters/README.md +++ b/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. diff --git a/examples/counters_stable/README.md b/examples/counters_stable/README.md index a015cb6db4..f009121d87 100644 --- a/examples/counters_stable/README.md +++ b/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. diff --git a/examples/directives/README.md b/examples/directives/README.md index 9ad496184f..b7906beaf2 100644 --- a/examples/directives/README.md +++ b/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. diff --git a/examples/error_boundary/README.md b/examples/error_boundary/README.md index 10e62be952..eda9fe563c 100644 --- a/examples/error_boundary/README.md +++ b/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. diff --git a/examples/fetch/README.md b/examples/fetch/README.md index dd43ccba20..85e920b580 100644 --- a/examples/fetch/README.md +++ b/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. \ No newline at end of file +See the [Examples README](../README.md) for setup and run instructions. + +## Quick Start + +Run `trunk serve --open` to run this example. diff --git a/examples/hackernews/README.md b/examples/hackernews/README.md index 89d2126914..785389d680 100644 --- a/examples/hackernews/README.md +++ b/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. diff --git a/examples/hackernews_axum/README.md b/examples/hackernews_axum/README.md index 1d5a297255..4c64435bee 100644 --- a/examples/hackernews_axum/README.md +++ b/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. diff --git a/examples/hackernews_islands_axum/README.md b/examples/hackernews_islands_axum/README.md index 1d5a297255..0d546362ef 100644 --- a/examples/hackernews_islands_axum/README.md +++ b/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. diff --git a/examples/js-framework-benchmark/README.md b/examples/js-framework-benchmark/README.md index a75dc430ef..71c228c0d7 100644 --- a/examples/js-framework-benchmark/README.md +++ b/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. diff --git a/examples/parent_child/README.md b/examples/parent_child/README.md index 8bf987f341..ea18c65c3b 100644 --- a/examples/parent_child/README.md +++ b/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. diff --git a/examples/portal/README.md b/examples/portal/README.md index 287d85ea33..e487b2f442 100644 --- a/examples/portal/README.md +++ b/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. diff --git a/examples/router/README.md b/examples/router/README.md index 7450774be9..9a90ed3150 100644 --- a/examples/router/README.md +++ b/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. diff --git a/examples/session_auth_axum/README.md b/examples/session_auth_axum/README.md index 02ff829d3c..b0b841c0f9 100644 --- a/examples/session_auth_axum/README.md +++ b/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. diff --git a/examples/slots/README.md b/examples/slots/README.md index c48f10be75..e81eb7bad0 100644 --- a/examples/slots/README.md +++ b/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. diff --git a/examples/ssr_modes/README.md b/examples/ssr_modes/README.md index eb0325b8cd..08efb5b1b9 100644 --- a/examples/ssr_modes/README.md +++ b/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 ``) + + - _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 ``) 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 ``). 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 ``). 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. diff --git a/examples/ssr_modes_axum/README.md b/examples/ssr_modes_axum/README.md index c6edb14106..1f96e481b8 100644 --- a/examples/ssr_modes_axum/README.md +++ b/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 ``) + + - _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 ``) 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 ``). 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 ``). 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. diff --git a/examples/suspense_tests/README.md b/examples/suspense_tests/README.md index ea8188d492..e4c184d0ba 100644 --- a/examples/suspense_tests/README.md +++ b/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. diff --git a/examples/tailwind_axum/README.md b/examples/tailwind_axum/README.md index 4dc8bfdd37..ea2f705f7c 100644 --- a/examples/tailwind_axum/README.md +++ b/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. diff --git a/examples/tailwind_csr/README.md b/examples/tailwind_csr/README.md index 2a975d1a7b..fa5951fd11 100644 --- a/examples/tailwind_csr/README.md +++ b/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. diff --git a/examples/timer/README.md b/examples/timer/README.md index 7bbc25c29a..a5b7b76533 100644 --- a/examples/timer/README.md +++ b/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. diff --git a/examples/todo_app_sqlite/README.md b/examples/todo_app_sqlite/README.md index aebf885ece..1a2ceade58 100644 --- a/examples/todo_app_sqlite/README.md +++ b/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. diff --git a/examples/todo_app_sqlite_axum/README.md b/examples/todo_app_sqlite_axum/README.md index 48e8ec23da..b4f1639c47 100644 --- a/examples/todo_app_sqlite_axum/README.md +++ b/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. diff --git a/examples/todo_app_sqlite_csr/README.md b/examples/todo_app_sqlite_csr/README.md index 53b7929f13..46a5f753f1 100644 --- a/examples/todo_app_sqlite_csr/README.md +++ b/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. diff --git a/examples/todo_app_sqlite_viz/README.md b/examples/todo_app_sqlite_viz/README.md index ba5c021731..d17a34644d 100644 --- a/examples/todo_app_sqlite_viz/README.md +++ b/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. diff --git a/examples/todomvc/README.md b/examples/todomvc/README.md index 73ff173531..3b3eca5006 100644 --- a/examples/todomvc/README.md +++ b/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.