Simplified and Uniform Example Instructions (#3113)

* Add `--open` to `boids`

* Added running instructions to `contexts`

* Amended `counter` instructions

- Added `--open` flag
- Removed unnecessary instructions on how to run with `release` profile

* Amended `counter_functional` instructions

- Added `--open` flag
- Removed unnecessary instructions on how to run with `release` profile

* Amended `dyn_create_destroy_apps` instructions

- Added `--open` flag
- Removed unnecessary instructions on how to run with `release` profile

* Added running instructions to `file_upload`

* Added running instructions to `function_memory_game``

* Amended `function_router` instructions

- Amended `release` profile instructions
- Added `--open` flag

* Added running instructions to `function_todomvc`

* Added running instructions to `futures`

* Added running instructions to `game_of_life`

* Added running instructions to `immutable`

* Added running instructions to `inner_html`

* Added running instructions to `js_callback`

* Amended `keyed_list` instructions

- Added `--open` flag
- Amended `release` profile notice

* Added running instructions to `mount_point`

* Added running instructions to `nested_list`

* Added running instructions to `node_refs`

* Amended `password_strength` instructions

- Added `--open` flag
- Amended `release` profile notice

* Added running instructions to `portals`

* Amended `router` instructions

- Added `--open` flag
- Amended `release` profile notice

* Amended `simple_ssr` instructions

- Simplified wording
- Removed unnecessary notes
- Changed commands so that they should be executed from the `examples/simple_ssr` directory like every other example

* Amended `ssr_router` instructions

- Removed unnecessary notes
- Changed commands so that they should be executed from the `examples/ssr_router` directory like every other example

* Added running instructions to `suspense`

* Added running instructions to `timer`

* Added running instructions to `todo_mvc`

* Added running instructions to `two_apps`

* Added running instructions to `web_worker_fib`

* Added running instructions to `webgl`

* Amended various examples

- Simplified running instructions
- Moved running instructions to the bottom of each `README.md`

* Amended `examples/README.md` instructions

- Added `release` profile notice
- Added `--open` flag
- Removed `--release` flag

* Apply grammar suggestions from code review

Co-authored-by: Kaede Hoshikawa <futursolo@users.noreply.github.com>

* Update examples/function_router/README.md Grammar

Co-authored-by: Kaede Hoshikawa <futursolo@users.noreply.github.com>

* Add Grammar Suggestions from Review

* Apply Spelling Suggestion

Co-authored-by: Kaede Hoshikawa <futursolo@users.noreply.github.com>

---------

Co-authored-by: Kaede Hoshikawa <futursolo@users.noreply.github.com>

examples/README.md

@@ -17,9 +17,11 @@ Running an example is as easy as running a single command:
 cd examples/todomvc
 
 # build and serve the example
-trunk serve --release
+trunk serve --open
 ```
 
+Some examples may perform better using the `release` profile. If something is slow, you can try running it with the `--release` argument.
+
 We're also publicly hosting the examples at `https://examples.yew.rs/<EXAMPLE>`.
 As an example, check out the TodoMVC example here: <https://examples.yew.rs/todomvc>
 

examples/async_clock/README.md

@@ -13,8 +13,8 @@ features:
 
 ## Running
 
-Run this application:
+Run this application with the trunk development server:
 
 ```bash
 trunk serve --open
-```
+```

examples/boids/README.md

@@ -7,14 +7,6 @@ A version of [Boids](https://en.wikipedia.org/wiki/Boids) implemented in Yew.
 This example doesn't make use of a [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API),
 instead, each boid has its own element demonstrating the performance of Yew's virtual DOM.
 
-## Running
-
-You should run this example with the `--release` flag:
-
-```bash
-trunk serve --release
-```
-
 ## Concepts
 
 The example uses [`gloo::timers`](https://docs.rs/gloo-timers/latest/gloo_timers/) implementation of `setInterval` to drive the Yew game loop.
@@ -29,3 +21,11 @@ The example uses [`gloo::timers`](https://docs.rs/gloo-timers/latest/gloo_timers
 - Share settings by encoding them into the URL
 - Resize the boids when "Spacing" is changed.
   The setting should then also be renamed to something like "Size".
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/communication_child_to_parent/README.md

@@ -4,7 +4,7 @@ A simple example of updating a parent from two children using a callback mechani
 
 ## Running
 
-Run this application:
+Run this application with the trunk development server:
 
 ```bash
 trunk serve --open

examples/communication_grandchild_with_grandparent/README.md

@@ -5,8 +5,8 @@ The grandchildren themselves also update whenever the grandparent updates the sh
 
 ## Running
 
-Run this application:
+Run this application with the trunk development server:
 
 ```bash
 trunk serve --open
-```
+```

examples/communication_grandparent_to_grandchild/README.md

@@ -4,8 +4,8 @@ A simple example of updating a grandchild component from a grandparent using a s
 
 ## Running
 
-Run this application:
+Run this application with the trunk development server:
 
 ```bash
 trunk serve --open
-```
+```

examples/communication_parent_to_child/README.md

@@ -4,8 +4,8 @@ A simple example of updating a child from a parent using properties
 
 ## Running
 
-Run this application:
+Run this application with the trunk development server:
 
 ```bash
 trunk serve --open
-```
+```

examples/contexts/README.md

@@ -8,3 +8,11 @@ This is currently a technical demonstration of Context API.
 
 The example has two components, which communicates through a context
 as opposed to the traditional method using component links.
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/counter/README.md

@@ -4,20 +4,14 @@
 
 A simple example of a counter which can be increased or decreased with the press of a button.
 
-## Running
-
-Run a debug version of this application:
-
-```bash
-trunk serve
-```
-
-Run a release version of this application:
-
-```bash
-trunk serve --release
-```
-
 ## Concepts
 
 Demonstrates the use of messages to update state.
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/counter_functional/README.md

@@ -2,20 +2,14 @@
 
 A simple example of a counter which can be increased or decreased with the press of a button implemented using function components
 
-## Running
-
-Run a debug version of this application:
-
-```bash
-trunk serve
-```
-
-Run a release version of this application:
-
-```bash
-trunk serve --release
-```
-
 ## Concepts
 
-Demonstrates the use of function components.
+Demonstrates the use of function components.
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/dyn_create_destroy_apps/README.md

@@ -2,20 +2,14 @@
 
 An example of how to create and destroy Yew apps on demand.
 
-## Running
-
-Run a debug version of this application:
-
-```bash
-trunk serve
-```
-
-Run a release version of this application:
-
-```bash
-trunk serve --release
-```
-
 ## Concepts
 
 Demonstrates the use of the Yew app handle by dynamically creating and destroying apps.
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/file_upload/README.md

@@ -14,3 +14,11 @@ Demonstrates reading from files in Yew with the help of [`gloo::file`](https://d
 - Show a progress bar if the file is read in chunks
 - Do something interesting with the uploaded file like displaying pictures
 - Improve the presentation of the example with CSS.
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/function_memory_game/README.md

@@ -12,4 +12,12 @@ This is an implementation of [Memory Game](https://github.com/bradlygreen/Memory
 
 ## Note
 
-Images are authorized by [@bradlygreen](https://github.com/bradlygreen), see [authorization-issue](https://github.com/bradlygreen/Memory-Game/issues/6)
+Images are authorized by [@bradlygreen](https://github.com/bradlygreen), see [authorization-issue](https://github.com/bradlygreen/Memory-Game/issues/6)
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/function_router/README.md

@@ -9,16 +9,6 @@ A blog all about yew.
 The best way to figure out what this example is about is to just open it up.
 It's mobile friendly too!
 
-## Running
-
-While not strictly necessary, this example should be built in release mode:
-
-```bash
-trunk serve --release
-```
-
-Content generation can take up quite a bit of time in debug builds.
-
 ## Concepts
 
 This example involves many different parts, here are just the Yew specific things:
@@ -47,3 +37,15 @@ Take a look at [`Route`](src/main.rs) for the implementation.
 - Detect sub-path from `--public-url` value passed to Trunk. See: thedodd/trunk#51
 
 [`yew-router`]: https://docs.rs/yew-router/latest/yew_router/
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```
+
+### Notes
+
+Content generation can take up quite a bit of time in debug builds. It may be better to run this example in release mode if it is slow.

examples/function_todomvc/README.md

@@ -13,3 +13,11 @@ This is an implementation of [TodoMVC](http://todomvc.com/) for Yew using functi
 
 - Use `yew-router` for the hash based routing
 - Clean up the code
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/futures/README.md

@@ -18,3 +18,11 @@ It also contains a Markdown renderer which manually creates `Html` without using
 - Since this features a Markdown renderer it should be possible to render more than just one document.
 
 [`linkfuture`]: https://docs.rs/yewtil/latest/yewtil/future/trait.LinkFuture.html
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/game_of_life/README.md

@@ -17,3 +17,11 @@ trunk serve --release
 
 - Uses [`gloo_timer`](https://docs.rs/gloo-timers/latest/gloo_timers/) to automatically step the simulation.
 - Logs to the console using the [`weblog`](https://crates.io/crates/weblog) crate.
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/immutable/README.md

@@ -3,3 +3,11 @@
 [![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fexamples.yew.rs%2Fimmutable)](https://examples.yew.rs/immutable)
 
 This is a technical demonstration for how to use immutables types in Yew.
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/inner_html/README.md

@@ -8,3 +8,11 @@ This example renders unescaped HTML by manually handling the DOM element.
 
 - Manually creating `Html` without the `html!` macro.
 - Using `web-sys` to manipulate the DOM.
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/js_callback/README.md

@@ -40,3 +40,11 @@ The best way to improve this example would be to incorporate this concept into a
 
 - Do something more complex in the Javascript code to demonstrate more of `wasm-bindgen`'s capabilities.
 - Improve the presentation of the example with CSS.
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/keyed_list/README.md

@@ -4,13 +4,9 @@
 
 This example consists of a list which can be manipulated in various ways.
 
-## Running
+### Notes
 
-Because this example is a performance demonstration you should use it with the `--release` flag:
-
-```bash
-trunk serve --release
-```
+If you would like to view this example as a performance demonstation, run this example in `release` mode.
 
 ## Concepts
 
@@ -21,3 +17,11 @@ Demonstrates how using keyed elements improves the performance of comparing chan
 - Improve the name and address generation so that they don't look like gibberish
 - Show the time it took to update the DOM on the page instead of just the console
 - Improve the presentation of the example with CSS
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/mount_point/README.md

@@ -14,3 +14,11 @@ which contains the contents of the input box in reverse.
 
 This example is very similar to [`two_apps`](../two_apps).
 The two should be merged into a single example.
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/nested_list/README.md

@@ -13,3 +13,11 @@ This example shows a nested list and displays which item was last hovered.
 
 - `ListItem` Component has a `hide` prop which is currently only used statically.
   It should be possible to make the hidden items visible by pressing a button.
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/node_refs/README.md

@@ -8,3 +8,11 @@ This example shows two input fields which are automatically focused when hovered
 
 The example uses [Refs](https://yew.rs/docs/concepts/components/refs/) to
 manipulate the underlying DOM element directly.
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/password_strength/README.md

@@ -4,13 +4,9 @@
 
 A password strength estimator implemented in Yew.
 
-## Running
+### Notes
 
-You should run this example with the `--release` flag:
-
-```bash
-trunk serve --release
-```
+If this example is a bit slow, you should try running it with the `release` profile.
 
 ## Concepts
 
@@ -19,3 +15,11 @@ This example
 - makes use of controlled components.
 - extracts new value from `InputEvent`
 - calls out to `js_sys` to invoke a foreign function, `Math.random()`
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/portals/README.md

@@ -8,3 +8,11 @@ This example renders elements into out-of-tree nodes with the help of portals.
 
 - Manually creating `Html` without the `html!` macro.
 - Using `web-sys` to manipulate the DOM.
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/router/README.md

@@ -6,16 +6,6 @@ A blog all about yew.
 The best way to figure out what this example is about is to just open it up.
 It's mobile friendly too!
 
-## Running
-
-While not strictly necessary, this example should be built in release mode:
-
-```bash
-trunk serve --release
-```
-
-Content generation can take up quite a bit of time in debug builds.
-
 ## Concepts
 
 This example involves many different parts, here are just the Yew specific things:
@@ -44,3 +34,15 @@ Take a look at [`Route`](src/main.rs) for the implementation.
 - Detect sub-path from `--public-url` value passed to Trunk. See: thedodd/trunk#51
 
 [`yew-router`]: https://docs.rs/yew-router/latest/yew_router/
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```
+
+### Notes
+
+Content generation can take up quite a bit of time in debug builds. If it is too slow, you should try running with the `release` profile.

examples/simple_ssr/README.md

@@ -2,20 +2,12 @@
 
 This example demonstrates server-side rendering.
 
-# How to run this example
-
-Execute the following commands from the `examples/` folder of the repo
+# Running
 
 1. Build hydration bundle
 
-`trunk build simple_ssr/index.html`
-
-This builds static artifacts that will be served and places them in `simple_ssr/dist`.
+`trunk build index.html`
 
 2. Run the server
 
-`cargo run --features=ssr --bin simple_ssr_server -- --dir simple_ssr/dist`
-
-3. Open Browser
-
-Navigate to http://localhost:8080/ to view results.
+`cargo run --features=ssr --bin simple_ssr_server -- --dir dist`

examples/ssr_router/README.md

@@ -8,12 +8,8 @@ of the function router example.
 
 1. Build Hydration Bundle
 
-`trunk build examples/ssr_router/index.html`
+`trunk build index.html`
 
 2. Run the server
 
-`cargo run --features=ssr --bin ssr_router_server -- --dir examples/ssr_router/dist`
-
-3. Open Browser
-
-Navigate to http://localhost:8080/ to view results.
+`cargo run --features=ssr --bin ssr_router_server -- --dir dist`

examples/suspense/README.md

@@ -8,3 +8,11 @@ This is an example that demonstrates `<Suspense />` support.
 
 This example shows how `<Suspense />` works in Yew and how you can
 create hooks that utilises suspense.
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/timer/README.md

@@ -13,3 +13,11 @@ more advanced web console features.
 ## Improvements
 
 - Apply the concept to something more fun than just a dry technical demonstration
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/todomvc/README.md

@@ -18,3 +18,11 @@ including: all entries, entered text and chosen filter.
 - Clean up the code
 
 [`refs`]: https://yew.rs/docs/concepts/components/refs/
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/two_apps/README.md

@@ -15,3 +15,11 @@ One of the components could even accept a generic "remote" component using a tra
 
 This example is very similar to [`mount_point`](../mount_point).
 The two should be merged into a single example.
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/web_worker_fib/README.md

@@ -12,3 +12,11 @@ The example illustrates how to use `gloo-worker` to send tasks to a worker threa
 
 - [insou22](https://github.com/insou22) for writing up the demo.
 - [https://github.com/yvt/img2text](https://github.com/yvt/img2text) -- for how to make web workers compile in wasm
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```

examples/webgl/README.md

@@ -13,3 +13,11 @@ a render loop, and draw to the canvas with basic shaders using `web-sys`.
 ## Improvements
 
 - Use a much more flashy shader
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```