Skip to content

Rewrite yew.rs with Yew#4069

Draft
Madoshakalaka wants to merge 5 commits intomasterfrom
yew-docs
Draft

Rewrite yew.rs with Yew#4069
Madoshakalaka wants to merge 5 commits 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, 0.23, and 0.22 docs are not diverged, which allows 0.23 docs and 0.22 docs to reuse the same data. This reduces 100, 000 lines of mdx to 50 ,000 lines of Rust.
  • 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 page filtering, --jobs N flags, 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.
  • home pages are version and locale aware now. The Get Started button and the Learn More buttons on each feature card now consume the version and locale too. (new feature)
  • 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

  • binary size investigation. getting-started/examples and getting-started/editor-setup loads JavaScript of identical size but our "examples" page should be smaller because that page doesn't have codeblocks and we should not bundle syntect
  • Verify localized and versioned home page SSG (important SEO optimization)
  • remove mdx refences from the workflow and the website directory.
  • site-ssg only works on workspace root for now
  • the url of the tutorial page currently is prefixed with the /docs/ slug. It doesn't make sense as the nav bar suggests "tutorial" and "docs" are on the same level, handled just like the Community pages and Blog pages with no "docs" prefix. We should remove the docs prefix from the tutorial's url. This will also cause some 404s to old references.
image image
  • we might want to embed the playground directly into yew.rs now. (Should we make code blocks actually runnable ?)
  • SPA: we still generate all static pages. But we make it have dynamic navigation between them. Thanks @kirillsemyonkin for the idea
  • terrible readibility of some highlighting in codeblock in dark mode
  • Some meta description mismatch
  • Table rendering on the /docs/concepts/function-components/state page
  • Language and version menu on small height phone overflows and can't be scrolled

@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.055 101.096 +0.041 +0.041%
boids 168.881 168.900 +0.020 +0.012%
communication_child_to_parent 94.509 94.510 +0.001 +0.001%
communication_grandchild_with_grandparent 106.351 106.352 +0.001 +0.001%
communication_grandparent_to_grandchild 102.689 102.691 +0.002 +0.002%
communication_parent_to_child 91.920 91.920 0 0.000%
contexts 106.415 106.407 -0.008 -0.007%
counter 87.230 87.232 +0.002 +0.002%
counter_functional 89.267 89.269 +0.002 +0.002%
dyn_create_destroy_apps 91.149 91.147 -0.002 -0.002%
file_upload 100.324 100.325 +0.001 +0.001%
function_delayed_input 95.237 95.241 +0.004 +0.004%
function_memory_game 174.101 174.104 +0.004 +0.002%
function_router 396.038 396.089 +0.051 +0.013%
function_todomvc 165.383 165.393 +0.010 +0.006%
futures 235.983 235.982 -0.001 -0.000%
game_of_life 105.531 105.533 +0.002 +0.002%
immutable 260.334 260.406 +0.072 +0.028%
inner_html 81.773 81.775 +0.002 +0.002%
js_callback 110.394 110.393 -0.001 -0.001%
keyed_list 180.710 180.708 -0.002 -0.001%
mount_point 85.146 85.147 +0.001 +0.001%
nested_list 114.092 114.093 +0.001 +0.001%
node_refs 92.520 92.521 +0.002 +0.002%
password_strength 1719.357 1719.396 +0.039 +0.002%
portals 93.993 93.997 +0.004 +0.004%
router 366.668 366.735 +0.067 +0.018%
suspense 114.396 114.395 -0.001 -0.001%
timer 89.368 89.370 +0.002 +0.002%
timer_functional 99.805 99.804 -0.001 -0.001%
todomvc 143.095 143.097 +0.002 +0.001%
two_apps 87.144 87.146 +0.002 +0.002%
web_worker_fib 137.051 137.051 0 0.000%
web_worker_prime 188.236 188.229 -0.007 -0.004%
webgl 83.921 83.920 -0.001 -0.001%

✅ 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 cb587a3):

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

(expires Sun, 22 Mar 2026 15:32:37 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 6 times, most recently from ce3a6d7 to 15b5594 Compare March 14, 2026 11:51
@Madoshakalaka
Copy link
Member Author

@WorldSEnder still a draft PR but any opinions are welcome. you can already try the wasm website in the preview URL

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