Skip to content

Rewrite yew.rs with Yew#4069

Draft
Madoshakalaka wants to merge 1 commit intomasterfrom
yew-docs
Draft

Rewrite yew.rs with Yew#4069
Madoshakalaka wants to merge 1 commit intomasterfrom
yew-docs

Conversation

@Madoshakalaka
Copy link
Member

@Madoshakalaka Madoshakalaka commented Mar 11, 2026

fixes #2779
Replace the Docusaurus-based website with a pure Rust/Yew implementation.

The SSG pipeline compiles each page to WASM, runs wasm-bindgen and wasm-opt, then captures SSR output for SEO-friendly HTML. All docs (5 versions x 4 languages), blog posts, community pages, search, and 404 are generated as static files.

This is a quite faithful rewrite of our old docusaurus based website.

Key features:

  • Content model with dual HTML/Markdown rendering which enables a copy-as-markdown button on each page (new feature)
  • Syntax highlighting via syntect (rust solution) with light/dark themes (old site used prism.js)
  • Collapsible sidebar, table of contents, breadcrumbs, and pagination (matching old site)
  • 3-state theme toggle (light/dark/system) (matching old site)
  • Blog with date-prefixed URLs, index, sidebar, RSS and Atom feeds (matching old site)
  • Full-page Algolia search with version faceting (matching old site)
  • OpenSearch descriptor, sitemap, robots.txt, 404 page (matching old site)
  • SEO: hreflang, OG tags, JSON-LD breadcrumbs, canonical URLs (matching old site)
  • wasm bundle and javascript hashing for cache control
  • CI workflow builds with Rust toolchain instead of Node.js

Some design choices and notes:

  • fantoccini is used for e2e testing the website. Site navigation needs to be tested because version + i18n selectors + side menu interaction can get very tricky. Alternatives to Fantoccini like thirtyfour, chromiumoxide were considered and Fantoccini has the most downloads, most stars, most recent release cadence.
  • Code snippet testing and tutorial testing preserved.
  • Data-as-code allows us to deduplicate greatly. Next and 0.23 docs are not diverged, which allows 0.23 docs to reuse the same data.
  • stylist-rs is used for more concise styling. Its SSR support renders the same styling during SSG and runtime, causing no content flickering at all.
  • the new build tool, at ./yew-rs/ssg/, accepts --jobs N and --skip-wasm-opt flags that can shrink build time greatly. Since we don't have beefy runners and we do have to run wasm-opt in the CI, a fresh build might take one hour.
  • the new website uses stable yew (pinned to 0.23 at the moment) for cache friendliness.
  • Categories and subcategories all have {category}/introduction.mdx files. Most pages (7 out of 9) have a slug in the old mdx files so that the slug {category} by itself shows the introduction page, (and {category}/introduction gives a 404). The only two exceptions are: https://yew.rs/docs/next/getting-started/introduction and https://yew.rs/docs/advanced-topics/struct-components/introduction. The new code unifies the aliasing behaviour. It means old references to docs/next/getting-started/introduction and docs/advanced-topics/struct-components/introduction will hit 404.

Todos

@github-actions
Copy link

github-actions bot commented Mar 11, 2026

Size Comparison

Details
examples master (KB) pull request (KB) diff (KB) diff (%)
async_clock 101.056 101.056 0 0.000%
boids 168.881 168.902 +0.021 +0.013%
communication_child_to_parent 94.511 94.508 -0.003 -0.003%
communication_grandchild_with_grandparent 106.345 106.352 +0.007 +0.006%
communication_grandparent_to_grandchild 102.690 102.691 +0.001 +0.001%
communication_parent_to_child 91.919 91.919 0 0.000%
contexts 106.417 106.412 -0.005 -0.005%
counter 87.231 87.231 0 0.000%
counter_functional 89.267 89.269 +0.002 +0.002%
dyn_create_destroy_apps 91.147 91.147 0 0.000%
file_upload 100.326 100.324 -0.002 -0.002%
function_delayed_input 95.238 95.242 +0.004 +0.004%
function_memory_game 174.100 174.104 +0.004 +0.002%
function_router 395.810 394.940 -0.869 -0.220%
function_todomvc 165.387 165.396 +0.009 +0.005%
futures 235.984 235.981 -0.003 -0.001%
game_of_life 105.532 105.532 0 0.000%
immutable 260.574 260.573 -0.001 -0.000%
inner_html 81.774 81.774 0 0.000%
js_callback 110.396 110.396 -0.001 -0.001%
keyed_list 180.710 180.709 -0.001 -0.001%
mount_point 85.147 85.147 0 0.000%
nested_list 114.095 114.091 -0.004 -0.003%
node_refs 92.521 92.521 0 0.000%
password_strength 1719.354 1719.396 +0.043 +0.002%
portals 93.994 93.995 +0.001 +0.001%
router 366.460 365.598 -0.862 -0.235%
suspense 114.396 114.395 -0.001 -0.001%
timer 89.369 89.369 0 0.000%
timer_functional 99.805 99.807 +0.002 +0.002%
todomvc 143.096 143.096 0 0.000%
two_apps 87.145 87.145 0 0.000%
web_worker_fib 137.050 137.049 -0.001 -0.001%
web_worker_prime 188.234 188.232 -0.002 -0.001%
webgl 83.920 83.922 +0.002 +0.002%

✅ None of the examples has changed their size significantly.

@Madoshakalaka Madoshakalaka added documentation A-ci Area: The continuous integration labels Mar 11, 2026
@Madoshakalaka Madoshakalaka force-pushed the yew-docs branch 2 times, most recently from 832800f to 0ec8ecd Compare March 11, 2026 12:24
@github-actions
Copy link

github-actions bot commented Mar 11, 2026

Visit the preview URL for this PR (updated for commit 82d0745):

https://yew-rs--pr4069-yew-docs-185gwe7t.web.app

(expires Sat, 21 Mar 2026 11:02:55 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Madoshakalaka added a commit that referenced this pull request Mar 13, 2026
Replace the Docusaurus-based website with a pure Rust/Yew implementation.

The SSG pipeline compiles each page to WASM, runs wasm-bindgen and
wasm-opt, then captures SSR output for SEO-friendly HTML. All docs
(5 versions x 4 languages), blog posts, community pages, search, and
404 are generated as static files.

Key features:
- Content model with dual HTML/Markdown rendering for copy-as-markdown
- Syntax highlighting via syntect with light/dark themes
- Collapsible sidebar, table of contents, breadcrumbs, pagination
- 3-state theme toggle (light/dark/system)
- Blog with date-prefixed URLs, index, sidebar, RSS and Atom feeds
- Full-page Algolia search with version faceting
- SEO: hreflang, OG tags, JSON-LD breadcrumbs, canonical URLs
- E2E tests with fantoccini/geckodriver
- Deduplicated versioned docs across 0.20/0.21/0.22/0.23/next
Madoshakalaka added a commit that referenced this pull request Mar 13, 2026
Replace the Docusaurus-based website with a pure Rust/Yew implementation.

The SSG pipeline compiles each page to WASM, runs wasm-bindgen and
wasm-opt, then captures SSR output for SEO-friendly HTML. All docs
(5 versions x 4 languages), blog posts, community pages, search, and
404 are generated as static files.

Key features:
- Content model with dual HTML/Markdown rendering for copy-as-markdown
- Syntax highlighting via syntect with light/dark themes
- Collapsible sidebar, table of contents, breadcrumbs, pagination
- 3-state theme toggle (light/dark/system)
- Blog with date-prefixed URLs, index, sidebar, RSS and Atom feeds
- Full-page Algolia search with version faceting
- SEO: hreflang, OG tags, JSON-LD breadcrumbs, canonical URLs
- E2E tests with fantoccini/geckodriver
- Deduplicated versioned docs across 0.20/0.21/0.22/0.23/next
@Madoshakalaka Madoshakalaka force-pushed the yew-docs branch 5 times, most recently from 82d0745 to ce3a6d7 Compare March 14, 2026 11:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A-ci Area: The continuous integration documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Build Yew website with Yew

1 participant