Polish Docs (#4112)

* fix(branding): do not scare away new adopters

In fact Yew has the reputation of being the most «mature» Rust frontend framework.

* fix(docs): correct outdated website docs: camelCase svg elements just work now.

* docs: mention nested router RFC

* docs: update SSR situation

* docs: remove experimental warning and glaze yew-autoprops

* docs: promote tracing-web as recommended logging crate

* fix: make the svg icon a real square

* fix(website): icon not showing

* branding: tagline

Author: Madoshakalaka

README.md

@@ -42,8 +42,6 @@
 
 Yew is named after a type of evergreen tree, and is pronounced /juː/. [Entry with audio on Cambridge Dictionary](https://dictionary.cambridge.org/dictionary/english/yew).
 
-*Note: Yew is not 1.0 yet. Be prepared to do major refactoring due to breaking API changes.*
-
 ## Contributing
 
 Yew is a community-driven effort and we welcome all kinds of contributions, big or small, from developers of all backgrounds. We want the Yew community to be a fun and friendly place, so please review our [Code of Conduct](https://github.com/yewstack/yew/blob/master/CODE_OF_CONDUCT.md) to learn what behavior will not be tolerated.

website/docs/advanced-topics/server-side-rendering.mdx

@@ -261,9 +261,8 @@ Example: [wasi_ssr_module](https://github.com/yewstack/yew/tree/master/examples/
 If you are using the `wasm32-unknown-unknown` target to build a SSR application, you can use the `not_browser_env` feature flag to disable access of browser-specific APIs inside of Yew. This would be useful on serverless platforms like Cloudflare Worker.
 :::
 
-:::caution
+:::note
 
-Server-side rendering is currently experimental. If you find a bug, please file
-an issue on [GitHub](https://github.com/yewstack/yew/issues/new?assignees=&labels=bug&template=bug_report.md&title=).
+We are improving the SSR experience by providing integration with popular frameworks like Axum. Feel free to submit PRs with your favorite frameworks.
 
 :::

website/docs/concepts/function-components/properties.mdx

@@ -310,6 +310,33 @@ fn Greetings(
 // `name` will use references because of the leading `&` in the definition.
 ```
 
+Compared to standalone prop structs, `yew-autoprops` has the additional advantage of exposing unused props.
+
+```rust
+use yew::prelude::*;
+use yew_autoprops::autoprops;
+
+#[autoprops]
+#[component]
+// highlight-next-line
+pub fn Foo(bar0: AttrValue, bar1: AttrValue) -> Html {
+    // `bar1` will turn into a compiler warning about unused variables
+    html! {<div>{bar0}</div>}
+}
+
+#[derive(PartialEq, Properties, Clone)]
+pub struct BarProps {
+    bar0: AttrValue,
+    // this property is unused but the compiler cannot detect it
+    bar1: AttrValue,
+}
+
+#[component]
+pub fn Bar(props: &BarProps) -> Html {
+    html! {<div>{&props.bar0}</div>}
+}
+```
+
 ## Evaluation Order
 
 Props are evaluated in the order they're specified, as shown by the following example:
@@ -348,7 +375,3 @@ These include, but are not limited to:
    See that crate to learn more.
 4. You tell us. Did you run into an edge-case you wish you knew about earlier? Feel free to create an issue
    or PR a fix to this documentation.
-
-## yew-autoprops
-
-[yew-autoprops](https://crates.io/crates/yew-autoprops) is an experimental package that allows one to create the Props struct on the fly out of the arguments of your function. Might be useful, if the properties struct is never reused.

website/docs/concepts/html/introduction.mdx

@@ -13,10 +13,9 @@ The `html!` macro allows you to write HTML and SVG code declaratively. It is sim
 
 **Important notes**
 
-1. The `html!` macro accepts any number of root nodes, including zero. An empty
-   `html! {}` invocation is valid and will not render anything.
-2. Literals must always be quoted and wrapped in braces: `html! { <p>{ "Hello, World" }</p> }`
-3. The `html!` macro will make all tag names lowercase. To use upper case characters (which are required for some SVG elements) use [dynamic tag names](concepts/html/elements.mdx#dynamic-tag-names): `html! { <@{"myTag"}></@> }`
+1. The `html!` macro accepts any number of root nodes. An empty `html! {}` invocation will not render anything.
+2. String literals need to be quoted and usually needs to be wrapped in braces: `html! { <p>{ "Hello, World" }</p> }`.
+3. Bool types and number types can be used directly: `html!{ <span>{1}</span> <span>{true}</span> }`
 
 :::note
 The `html!` macro can reach the default recursion limit of the compiler. If you encounter compilation errors,

website/docs/concepts/router.mdx

@@ -426,12 +426,6 @@ because the inner `SettingsRoute` only defines routes without a bare trailing sl
 (see [Trailing Slashes](#trailing-slashes)). Unrecognized sub-paths like `/settings/gibberish`
 are redirected to the main `NotFound` route at `/404`.
 
-:::caution
-
-Though note that this is still a work in progress so the way we do this is not final
-
-:::
-
 It can be implemented with the following code:
 
 ```rust
@@ -502,6 +496,12 @@ pub fn app() -> Html {
 }
 ```
 
+:::caution
+
+If you want more ergonomic nested router support. Please comment under [the first-class nested routing RFC](https://github.com/yewstack/yew/discussions/4111).
+
+:::
+
 ### Basename
 
 It's possible to define a basename with `yew-router`.

website/docs/more/debugging.mdx

@@ -10,19 +10,26 @@ Yew automatically logs panics in the browser console.
 
 In JavaScript, `console.log()` is used to log to the browser console. Some options for Yew are listed below.
 
-### [`wasm-logger`](https://crates.io/crates/wasm-logger)
+### [`tracing-web`](https://crates.io/crates/tracing-web) (recommended)
 
-`wasm-logger` crate integrates with [`log`](https://crates.io/crates/log) crate to send the log level, source line, and filename to the browser console.
+`tracing-web` can be used with [`tracing-subscriber`](https://crates.io/crates/tracing-subscriber) to output messages to the browser console. It works seamlessly on both the client and the server, making it a natural fit for SSR applications where you want a single logging setup across both ends.
 
 ```rust ,ignore
-use log::info;
+use tracing_subscriber::prelude::*;
 use wasm_bindgen::JsValue;
 
 fn main() {
-    wasm_logger::init(wasm_logger::Config::default());
+    let fmt_layer = tracing_subscriber::fmt::layer()
+        .with_ansi(false) // only partially supported across browsers
+        .without_time()   // browsers can show timestamps natively in the dev console
+        .with_writer(tracing_web::MakeWebConsoleWriter::new());
+
+    tracing_subscriber::registry()
+        .with(fmt_layer)
+        .init();
 
     let object = JsValue::from("world");
-    info!("Hello {}", object.as_string().unwrap());
+    tracing::info!("Hello {}", object.as_string().unwrap());
 }
 ```
 
@@ -41,40 +48,25 @@ fn main() {
 }
 ```
 
-### [`tracing-web`](https://crates.io/crates/tracing-web)
+### [`wasm-logger`](https://crates.io/crates/wasm-logger) (unmaintained)
 
-`tracing-web` can be used with [`tracing-subscriber`](https://crates.io/crates/tracing-subscriber) to output messages to the browser console.
+`wasm-logger` crate integrates with [`log`](https://crates.io/crates/log) crate to send the log level, source line, and filename to the browser console. Note that this crate is no longer actively maintained. Consider using `tracing-web` instead.
 
 ```rust ,ignore
-use tracing_subscriber::{
-    fmt::{
-        format::{FmtSpan, Pretty},
-        time::UtcTime,
-    },
-    prelude::*,
-};
+use log::info;
 use wasm_bindgen::JsValue;
 
 fn main() {
-    let fmt_layer = tracing_subscriber::fmt::layer()
-        .with_ansi(false)
-        .with_timer(UtcTime::rfc_3339())
-        .with_writer(tracing_web::MakeConsoleWriter)
-        .with_span_events(FmtSpan::ACTIVE);
-    let perf_layer = tracing_web::performance_layer().with_details_from_fields(Pretty::default());
+    wasm_logger::init(wasm_logger::Config::default());
 
-    tracing_subscriber::registry()
-        .with(fmt_layer)
-        .with(perf_layer)
-        .init();
     let object = JsValue::from("world");
-    tracing::info!("Hello {}", object.as_string().unwrap());
+    info!("Hello {}", object.as_string().unwrap());
 }
 ```
 
 ## Debugging component lifecycles
 
-[`tracing`](https://crates.io/crates/tracing) can be used to collect event information related to a component's lifecycle. `tracing` also comes with a feature flag for `log` support, which integrates nicely with `wasm-logger`.
+[`tracing`](https://crates.io/crates/tracing) can be used to collect event information related to a component's lifecycle. `tracing` also comes with a feature flag for `log` support, which integrates nicely with `tracing-web`.
 
 [Compile time filters](https://docs.rs/tracing/latest/tracing/level_filters/index.html#compile-time-filters) can be used to adjust verbosity or disable logging, which should result in a smaller Wasm file.
 

website/docusaurus.config.js

@@ -13,6 +13,23 @@ module.exports = {
     favicon: 'img/logo.svg',
     organizationName: 'yewstack', // Usually your GitHub org/user name.
     projectName: 'yew', // Usually your repo name.
+    headTags: [
+        {
+            tagName: 'link',
+            attributes: {
+                rel: 'icon',
+                href: '/favicon.ico',
+                sizes: 'any',
+            },
+        },
+        {
+            tagName: 'link',
+            attributes: {
+                rel: 'apple-touch-icon',
+                href: '/apple-touch-icon.png',
+            },
+        },
+    ],
     themeConfig: {
         colorMode: {
             respectPrefersColorScheme: true,

website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/function-components/properties.mdx

@@ -302,6 +302,33 @@ fn Greetings(
 // `is_loading` は値としてコンポーネントに渡され、`message` と `name` は定義に先行する `&` があるため参照として渡されます。
 ```
 
+独立したプロパティ構造体と比較して、`yew-autoprops` には未使用のプロパティを検出できるという追加の利点があります。
+
+```rust
+use yew::prelude::*;
+use yew_autoprops::autoprops;
+
+#[autoprops]
+#[component]
+// highlight-next-line
+pub fn Foo(bar0: AttrValue, bar1: AttrValue) -> Html {
+    // `bar1` は未使用変数に関するコンパイラ警告になります
+    html! {<div>{bar0}</div>}
+}
+
+#[derive(PartialEq, Properties, Clone)]
+pub struct BarProps {
+    bar0: AttrValue,
+    // このプロパティは未使用ですが、コンパイラはそれを検出できません
+    bar1: AttrValue,
+}
+
+#[component]
+pub fn Bar(props: &BarProps) -> Html {
+    html! {<div>{&props.bar0}</div>}
+}
+```
+
 ## 評価順序
 
 属性は指定された順序で評価されます。以下の例を参照してください：
@@ -333,7 +360,3 @@ fn main() {
    **なぜ悪いのか？** `Vec<T>` も `String` と同様にクローンのコストが高いです。`IArray<T>` は参照カウントされたスライス (`Rc<[T]>`) または `&'static [T]` であり、非常に安価にクローンできます。<br />
    **注意**：`IArray` は [implicit-clone](https://crates.io/crates/implicit-clone) からインポートできます。詳細はそのパッケージを参照してください。
 4. 新しい発見があるかもしれません。早く知っておきたかったエッジケースに遭遇しましたか？問題を作成するか、このドキュメントに修正のPRを提供してください。
-
-## yew-autoprops
-
-[yew-autoprops](https://crates.io/crates/yew-autoprops) は実験的なパッケージで、関数の引数に基づいて動的にProps構造体を作成することを可能にします。プロパティ構造体が再利用されない場合、これは有用かもしれません。

website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/introduction.mdx

@@ -12,9 +12,9 @@ import TabItem from '@theme/TabItem'
 
 **重要な注意点**
 
-1. `html!` マクロは、0 を含む任意の数のルートノードを受け入れます。空の `html! {}` 呼び出しは有効で、何もレンダリングしません。
-2. リテラルは常に引用符で囲み、中括弧で囲む必要があります：`html! { <p>{ "Hello, World" }</p> }`
-3. `html!` マクロはすべてのタグ名を小文字に変換します。大文字の文字（特定の SVG 要素に必要な文字）を使用するには、[動的タグ名](concepts/html/elements.mdx#dynamic-tag-names) を使用してください：`html! { <@{"myTag"}></@> }`
+1. `html!` マクロは任意の数のルートノードを受け入れます。空の `html! {}` 呼び出しは何もレンダリングしません。
+2. 文字列リテラルは引用符で囲む必要があり、通常は中括弧で囲む必要があります：`html! { <p>{ "Hello, World" }</p> }`。
+3. Bool 型と数値型は直接使用できます：`html!{ <span>{1}</span> <span>{true}</span> }`
 
 :::note
 `html!` マクロはコンパイラのデフォルトの再帰制限に達する可能性があります。コンパイル エラーが発生した場合は、クレートのルートに `#![recursion_limit="1024"]` のような属性を追加して問題を解決してください。

website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/router.mdx

@@ -391,12 +391,6 @@ import ThemedImage from '@theme/ThemedImage'
 
 ネストされた `SettingsRouter` は、すべての `/settings` で始まる URL を処理します。外側のルーターでは `/settings/` 用に別の `SettingsSlash` バリアントを定義し、`SettingsRoot` にリダイレクトします。これは、内側の `SettingsRoute` が末尾スラッシュのみのルートを定義していないためです（[末尾のスラッシュ](#末尾のスラッシュ) を参照）。`/settings/gibberish` のような認識されないサブパスは、メインの `NotFound` ルート `/404` にリダイレクトされます。
 
-:::caution
-
-このインターフェースはまだ開発中であり、このように記述する方法は最終決定されていません。
-
-:::
-
 以下のコードで実装できます：
 
 ```rust
@@ -467,6 +461,12 @@ pub fn app() -> Html {
 }
 ```
 
+:::caution
+
+より使いやすいネストされたルーターのサポートをご希望の場合は、[ファーストクラスのネストルーティング RFC](https://github.com/yewstack/yew/discussions/4111) にコメントしてください。
+
+:::
+
 ### ベースパス (Basename)
 
 `yew-router` を使用してベースパス (Basename) を定義できます。