switch to a Document trait and introduce Script/Head/Style/Meta components (#2635)

* switch to a Document trait and introduce Script/Head/Style/Meta components

* Fix desktop title

* Insert special elements into the head during the inital SSR render

* Make all head component attributes optional

* hydrate head elements

* improve the server streaming head warning

* Document fullstack head hydration approach

* deduplicate head elements by href

* move Link into head::Link

* document head components

* add meta and title examples

* Fix a few doc examples

* fix formatting

* Add title to playwright tests

* serde is optional on web, but it is enabled by hydrate

* remove leftover console log

examples/meta.rs

@@ -0,0 +1,36 @@
+//! This example shows how to add metadata to the page with the Meta component
+
+use dioxus::prelude::*;
+
+fn main() {
+    tracing_subscriber::fmt::init();
+    launch(app);
+}
+
+fn app() -> Element {
+    rsx! {
+        // You can use the Meta component to render a meta tag into the head of the page
+        // Meta tags are useful to provide information about the page to search engines and social media sites
+        // This example sets up meta tags for the open graph protocol for social media previews
+        Meta {
+            property: "og:title",
+            content: "My Site",
+        }
+        Meta {
+            property: "og:type",
+            content: "website",
+        }
+        Meta {
+            property: "og:url",
+            content: "https://www.example.com",
+        }
+        Meta {
+            property: "og:image",
+            content: "https://example.com/image.jpg",
+        }
+        Meta {
+            name: "description",
+            content: "My Site is a site",
+        }
+    }
+}

examples/title.rs

@@ -0,0 +1,22 @@
+//! This example shows how to set the title of the page or window with the Title component
+
+use dioxus::prelude::*;
+
+fn main() {
+    tracing_subscriber::fmt::init();
+    launch(app);
+}
+
+fn app() -> Element {
+    let mut count = use_signal(|| 0);
+
+    rsx! {
+        div {
+            // You can set the title of the page with the Title component
+            // In web applications, this sets the title in the head. On desktop, it sets the window title
+            Title { "My Application (Count {count})" }
+            button { onclick: move |_| count += 1, "Up high!" }
+            button { onclick: move |_| count -= 1, "Down low!" }
+        }
+    }
+}