Function Router Example

This is identical to the router example, but written in function components.

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!

Concepts

This example involves many different parts, here are just the Yew specific things:

• Uses yew-router to render and switch between multiple pages.

The example automatically adapts to the --public-url value passed to Trunk. This allows it to be hosted on any path, not just at the root. For example, our demo is hosted at /router.

This is achieved by adding <base data-trunk-public-url /> to the index.html file. Trunk rewrites this tag to contain the value passed to --public-url which can then be retrieved at runtime. Take a look at Route for the implementation.

Improvements

• Use a special image component which shows a progress bar until the image is loaded.
• Scroll back to the top after switching route
• Run content generation in a dedicated web worker
• Use longer Markov chains to achieve more coherent results
• Make images deterministic (the same seed should produce the same images)
• Show posts by the author on their page (this is currently impossible because we need to find post seeds which in turn generate the author's seed)
• Show other posts at the end of a post ("continue reading")
• Home (/) should include links to the post list and the author introduction
• Detect sub-path from --public-url value passed to Trunk. See: trunk-rs/trunk#51

Running

Run this application with the trunk development server:

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.