Update docosaurus to v2 beta 9

website/docs/concepts/components.md → website/docs/concepts/components/introduction.md

@@ -91,7 +91,7 @@ impl Component for MyComponent {
 }
 ```
 
-For usage details, check out [the `html!` guide](html.md).
+For usage details, check out [the `html!` guide](./../html.md).
 
 ### Rendered
 

website/docs/concepts/function-components/attribute.md

@@ -3,6 +3,9 @@ title: "#[function_component]"
 description: "The #[function_component] attribute"
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 `#[function_component(_)]` turns a normal Rust function into a function component.
 Functions with the attribute have to return `Html` and may take a single parameter for the type of props the component should accept.
 The parameter type needs to be a reference to a `Properties` type (ex. `props: &MyProps`).
@@ -28,8 +31,8 @@ html! {
 
 ## Example
 
-<!--DOCUSAURUS_CODE_TABS-->
-<!--With props-->
+<Tabs>
+  <TabItem value="With props" label="With props">
 
 ```rust
 use yew::{function_component, html, Properties};
@@ -50,7 +53,8 @@ pub fn rendered_at(props: &RenderedAtProps) -> Html {
 }
 ```
 
-<!--Without props-->
+  </TabItem>
+  <TabItem value="Without props" label="Without props">
 
 ```rust
 use yew::{function_component, html, use_state, Callback};
@@ -76,13 +80,14 @@ fn app() -> Html {
 }
 ```
 
-<!--END_DOCUSAURUS_CODE_TABS-->
+  </TabItem>
+</Tabs>
 
 ## Generic function components
 
 The `#[function_component(_)]` attribute also works with generic functions for creating generic components.
 
-```rust
+```rust title=my_generic_component.rs
 use std::fmt::Display;
 use yew::{function_component, html, Properties};
 
@@ -106,24 +111,13 @@ where
     }
 }
 
-#[derive(PartialEq)]
-struct Foo;
-
-impl Display for Foo {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        f.write_str("foo")
-    }
-}
-
 // used like this
 html! {
     <MyGenericComponent<i32> data=123 />
 };
 
 // or
-let foo = Foo;
-
 html! {
-    <MyGenericComponent<Foo> data={foo} />
+    <MyGenericComponent<String> data={"foo".to_string()} />
 };
 ```

website/docs/concepts/function-components.md → website/docs/concepts/function-components/introduction.md

@@ -13,7 +13,7 @@ implement the `Component` trait.
 
 ## Creating function components
 
-The easiest way to create a function component is to add the [`#[function_component]`](function-components/attribute.md) attribute to a function.
+The easiest way to create a function component is to add the [`#[function_component]`](./../function-components/attribute.md) attribute to a function.
 
 ```rust
 use yew::{function_component, html};
@@ -43,17 +43,17 @@ actions. Yew comes with a few pre-defined Hooks. You can also create your own.
 #### Pre-defined Hooks
 
 Yew comes with the following predefined Hooks:
-- [`use_state`](function-components/pre-defined-hooks.md#use_state)
-- [`use_ref`](function-components/pre-defined-hooks.md#use_ref)
-- [`use_reducer`](function-components/pre-defined-hooks.md#use_reducer)
-- [`use_reducer_with_init`](function-components/pre-defined-hooks.md#use_reducer_with_init)
-- [`use_effect`](function-components/pre-defined-hooks.md#use_effect)
-- [`use_effect_with_deps`](function-components/pre-defined-hooks.md#use_effect_with_deps)
+- [`use_state`](./../function-components/pre-defined-hooks.md#use_state)
+- [`use_ref`](./../function-components/pre-defined-hooks.md#use_ref)
+- [`use_reducer`](./../function-components/pre-defined-hooks.md#use_reducer)
+- [`use_reducer_with_init`](./../function-components/pre-defined-hooks.md#use_reducer_with_init)
+- [`use_effect`](./../function-components/pre-defined-hooks.md#use_effect)
+- [`use_effect_with_deps`](./../function-components/pre-defined-hooks.md#use_effect_with_deps)
 
 #### Custom Hooks
 
 There are cases where you want to define your own Hooks for reasons. Yew allows you to define your own Hooks which lets you extract your potentially stateful logic from the component into reusable functions. 
-See the [Defining custom hooks](function-components/custom-hooks.md#defining-custom-hooks) section for more information.
+See the [Defining custom hooks](./../function-components/custom-hooks.md#defining-custom-hooks) section for more information.
 
 ## Further reading
 

website/docs/concepts/html/classes.md

@@ -3,6 +3,9 @@ title: "Classes"
 description: "A handy macro to handle classes"
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 ## Classes
 
 The struct `Classes` can be used to deal with HTML classes.
@@ -19,8 +22,8 @@ The macro `classes!` is a convenient macro that creates one single `Classes`.
 Its input accepts a comma separated list of expressions. The only requirement
 is that every expression implements `Into<Classes>`.
 
-<!--DOCUSAURUS_CODE_TABS-->
-<!--Literal-->
+<Tabs>
+  <TabItem value="Literal" label="Literal">
 
 ```rust
 use yew::{classes, html};
@@ -30,7 +33,8 @@ html! {
 };
 ```
 
-<!--Multiple-->
+  </TabItem>
+  <TabItem value="Multiple" label="Multiple">
 
 ```rust
 use yew::{classes, html};
@@ -40,7 +44,8 @@ html! {
 };
 ```
 
-<!--String-->
+  </TabItem>
+  <TabItem value="String" label="String">
 
 ```rust
 use yew::{classes, html};
@@ -52,7 +57,8 @@ html! {
 };
 ```
 
-<!--Optional-->
+  </TabItem>
+  <TabItem value="Optional" label="Optional">
 
 ```rust
 use yew::{classes, html};
@@ -62,7 +68,8 @@ html! {
 };
 ```
 
-<!--Vector-->
+  </TabItem>
+  <TabItem value="Vector" label="Vector">
 
 ```rust
 use yew::{classes, html};
@@ -72,7 +79,8 @@ html! {
 };
 ```
 
-<!--Array-->
+  </TabItem>
+  <TabItem value="Array" label="Array">
 
 ```rust
 use yew::{classes, html};
@@ -84,7 +92,8 @@ html! {
 };
 ```
 
-<!--END_DOCUSAURUS_CODE_TABS-->
+  </TabItem>
+</Tabs>
 
 ## Components that accept classes
 
@@ -93,7 +102,6 @@ use yew::{
     classes, html, Children, Classes, Component,
     Context, Html, Properties
 };
-use boolinator::Boolinator;
 
 #[derive(PartialEq, Properties)]
 struct Props {
@@ -123,7 +131,7 @@ impl Component for MyComponent {
             <div
                 class={classes!(
                     "my-container-class",
-                    fill.as_some("my-fill-class"),
+                    fill.then(|| Some("my-fill-class")),
                     class.clone(),
                 )}
             >
@@ -133,7 +141,3 @@ impl Component for MyComponent {
     }
 }
 ```
-
-The example makes use of the [boolinator](https://crates.io/crates/boolinator)
-crate to conditionally add the "my-fill-class" class based on the `fill`
-boolean attribute.

website/docs/concepts/html/elements.md

@@ -3,12 +3,15 @@ title: "Elements"
 description: "Both HTML and SVG elements are supported"
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 ## DOM nodes
 
 There are many reasons why you might want to create or manage DOM nodes manually in Yew, such as
 when integrating with JS libraries that can cause conflicts with managed components.
 
-Using `web-sys`, you can create DOM elements and convert them into a `Node` - which can then be 
+Using `web-sys`, you can create DOM elements and convert them into a `Node` - which can then be
 used as a `Html` value using `VRef`:
 
 ```rust
@@ -57,9 +60,9 @@ html! {
 };
 ```
 
-## Boolean Attributes 
+## Boolean Attributes
 
-Some content attributes (e.g checked, hidden, required) are called boolean attributes. In Yew, 
+Some content attributes (e.g checked, hidden, required) are called boolean attributes. In Yew,
 boolean attributes need to be set to a bool value:
 
 ```rust
@@ -73,11 +76,12 @@ html! {
 ```
 
 This will result in **HTML** that's functionally equivalent to this:
+
 ```html
 <div hidden>This div is hidden.</div>
 ```
 
-Setting a boolean attribute to false is equivalent to not using the attribute at all; values from 
+Setting a boolean attribute to false is equivalent to not using the attribute at all; values from
 boolean expressions can be used:
 
 ```rust
@@ -118,8 +122,8 @@ If the attribute is set to `None`, the attribute won't be set in the DOM.
 
 Listener attributes need to be passed a `Callback` which is a wrapper around a closure. How you create your callback depends on how you wish your app to react to a listener event:
 
-<!--DOCUSAURUS_CODE_TABS-->
-<!--Component handler-->
+<Tabs>
+  <TabItem value="Component handler" label="Component handler">
 
 ```rust
 use yew::{Component, Context, html, Html};
@@ -159,7 +163,8 @@ impl Component for MyComponent {
 }
 ```
 
-<!--Agent Handler-->
+  </TabItem>
+  <TabItem value="Agent Handler" label="Agent Handler">
 
 ```rust
 use yew::{html, Component, Context, Html};
@@ -197,7 +202,8 @@ impl Component for MyComponent {
 }
 ```
 
-<!--Other Cases-->
+  </TabItem>
+  <TabItem value="Other Cases" label="Other Cases">
 
 ```rust
 use yew::{Callback, Context, Component, html, Html};
@@ -228,7 +234,9 @@ impl Component for MyComponent {
 }
 ```
 
-<!--END_DOCUSAURUS_CODE_TABS-->
+  </TabItem>
+</Tabs>
 
 ## Relevant examples
+
 - [Inner HTML](https://github.com/yewstack/yew/tree/master/examples/inner_html)