Deploying to gh-pages from @ 8d6bc05 🚀

learn/0.5/cookbook/custom_renderer/index.html

@@ -286,7 +286,7 @@
 </span><span style="color:#c0c5ce;">	}
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p data-node-hydration="339">In this tree, the color depends on the parent&#x27;s color. The layout depends on the children&#x27;s layout, the current text, and the text size. The border depends on only the current node.</p><p data-node-hydration="340">In the following diagram arrows represent dataflow:</p><p data-node-hydration="341"><a href="https://mermaid.live/edit#pako:eNqllV1vgjAUhv8K6W4wkQVa2QdLdrHsdlfukmSptEhjoaSWqTH-9xVwONAKst70g5739JzzlO5BJAgFAYi52EQJlsr6fAszS7d1sVhKnCdWJDJFt6peLVs5-9owohK7HFrVcFJ_pxnpmK8VVvRkTJikkWIiaxy1dhP23bUwW1WW5WbPrrqJ4ziR4EJ6dtVN2ls5y1ZztePUcrWZFCvqVEcPPDffvlyS1XoLIQnVgnVvVPR6FU9Zc-6dV453ojjOPbuetRJ57gIeXQR3cez7rjtteZyZQ2j5MqmjqwE0ZW0VKx9RKtgpFewp1aw3sXXFy6TWgiYlv8mfq1scD8ofbBCAfQg8_AMBOAyBxzEIwA4CxgQ99QbQkjnD2KT7_CfxGF8_9WXQEsq5sDZCcjICOXRCri4h6r3NA38Q6Jdi1EOx5w3DGDYYI6MUvJFjM3VoGHUeGoMd6mBnDmh2E3fo7O4Yhf0x4OkBmIKUyhQzol_GfbkcApXQlIYg0EOC5SoEYXbQ-3ChxHyXRSBQsqBTUOREx_7OsAY3BUGM-VqvUsKUkB_1U6vf05gtweEHTk4_HQ"><img src="/pakoeNqllV1vgjAUhv8K6W4wkQVa2QdLdrHsdlfukmSptEhjoaSWqTH9xVwONAKst70g5739JzzlO5BJAgFAYi52EQJlsr6fAszS7d1sVhK53b30798886300fd.avif" alt="" title=""/></a></p><p data-node-hydration="342">To help in building a Dom, native-core provides the State trait and a RealDom struct. The State trait provides a way to describe how states in a node depend on other states in its relatives. By describing how to update a single node from its relations, native-core will derive a way to update the states of all nodes for you. Once you have a state you can provide it as a generic to RealDom. RealDom provides all of the methods to interact and update your new dom.</p><p data-node-hydration="343">Native Core cannot create all of the required methods for the State trait, but it can derive some of them. To implement the State trait, you must implement the following methods and let the  <code>#[partial_derive_state]</code> macro handle the rest:</p><div style="position: relative;" data-node-hydration="344"><div><pre style="background-color:#2b303b;">
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p data-node-hydration="339">In this tree, the color depends on the parent&#x27;s color. The layout depends on the children&#x27;s layout, the current text, and the text size. The border depends on only the current node.</p><p data-node-hydration="340">In the following diagram arrows represent dataflow:</p><p data-node-hydration="341"><a href="https://mermaid.live/edit#pako:eNqllV1vgjAUhv8K6W4wkQVa2QdLdrHsdlfukmSptEhjoaSWqTH-9xVwONAKst70g5739JzzlO5BJAgFAYi52EQJlsr6fAszS7d1sVhKnCdWJDJFt6peLVs5-9owohK7HFrVcFJ_pxnpmK8VVvRkTJikkWIiaxy1dhP23bUwW1WW5WbPrrqJ4ziR4EJ6dtVN2ls5y1ZztePUcrWZFCvqVEcPPDffvlyS1XoLIQnVgnVvVPR6FU9Zc-6dV453ojjOPbuetRJ57gIeXQR3cez7rjtteZyZQ2j5MqmjqwE0ZW0VKx9RKtgpFewp1aw3sXXFy6TWgiYlv8mfq1scD8ofbBCAfQg8_AMBOAyBxzEIwA4CxgQ99QbQkjnD2KT7_CfxGF8_9WXQEsq5sDZCcjICOXRCri4h6r3NA38Q6Jdi1EOx5w3DGDYYI6MUvJFjM3VoGHUeGoMd6mBnDmh2E3fo7O4Yhf0x4OkBmIKUyhQzol_GfbkcApXQlIYg0EOC5SoEYXbQ-3ChxHyXRSBQsqBTUOREx_7OsAY3BUGM-VqvUsKUkB_1U6vf05gtweEHTk4_HQ"><img src="/pakoeNqllV1vgjAUhv8K6W4wkQVa2QdLdrHsdlfukmSptEhjoaSWqTH9xVwONAKst70g5739JzzlO5BJAgFAYi52EQJlsr6fAszS7d1sVhKadf30eae5c3c938.avif" alt="" title=""/></a></p><p data-node-hydration="342">To help in building a Dom, native-core provides the State trait and a RealDom struct. The State trait provides a way to describe how states in a node depend on other states in its relatives. By describing how to update a single node from its relations, native-core will derive a way to update the states of all nodes for you. Once you have a state you can provide it as a generic to RealDom. RealDom provides all of the methods to interact and update your new dom.</p><p data-node-hydration="343">Native Core cannot create all of the required methods for the State trait, but it can derive some of them. To implement the State trait, you must implement the following methods and let the  <code>#[partial_derive_state]</code> macro handle the rest:</p><div style="position: relative;" data-node-hydration="344"><div><pre style="background-color:#2b303b;">
 <span style="color:#65737e;">// All states must derive Component (https://docs.rs/shipyard/latest/shipyard/derive.Component.html)
 </span><span style="color:#65737e;">// They also must implement Default or provide a custom implementation of create in the State trait
 </span><span style="color:#c0c5ce;">#[</span><span style="color:#bf616a;">derive</span><span style="color:#c0c5ce;">(Default, Component)]

learn/0.5/getting_started/index.html

@@ -82,7 +82,7 @@
 </div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p data-node-hydration="297">If you get an OpenSSL error on installation, ensure the dependencies listed <a href="https://docs.rs/openssl/latest/openssl/#automatic">here</a> are installed.</p><h2 id="create-a-new-project" data-node-hydration="298"><a class="header" href="#create-a-new-project">Create a new project</a></h2><p data-node-hydration="299">You can create a new Dioxus project by running the following command and following the prompts:</p><div style="position: relative;" data-node-hydration="300"><div><pre style="background-color:#2b303b;">
 <span style="color:#c0c5ce;">dx new
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><video type="video/mp4" name="dx new demo" autoplay="true" loop="true" width="800px" muted="true" data-node-hydration="301"><source src="/dioxusnewmovab8fe99a3a83c08d.mov" data-node-hydration="302"/></video><p data-node-hydration="303">First you will need to select a platform. Each platform has its own reference with more information on how to set up a project for that platform. Here are the platforms we recommend starting with:</p><ul data-node-hydration="304"><li>Web<ul><li><a href="getting_started/../reference/web">Client Side</a>: runs in the browser through WebAssembly</li><li><a href="getting_started/../reference/fullstack">Fullstack</a>: renders to HTML text on the server and hydrates it on the client</li></ul></li></ul><blockquote data-node-hydration="305"><p>If you are not sure which web platform you want to use, check out the <a href="getting_started/choosing_a_web_renderer">choosing a web renderer</a> chapter.</p></blockquote><ul data-node-hydration="306"><li>WebView<ul><li><a href="getting_started/../reference/desktop">Desktop</a>: runs in a web view on desktop</li><li><a href="getting_started/../reference/mobile">Mobile</a>: runs in a web view on mobile. Mobile is currently not supported by the dioxus CLI. The <a href="getting_started/../reference/mobile">mobile reference</a> has more information about setting up a mobile project</li></ul></li></ul><p data-node-hydration="307">Next, you can choose a styling library. For this project, we will use vanilla CSS.</p><p data-node-hydration="308">Finally, you can choose to start the project with the router enabled. The router is covered in the <a href="getting_started/../router">router guide</a>.</p><h2 id="running-the-project" data-node-hydration="309"><a class="header" href="#running-the-project">Running the project</a></h2><p data-node-hydration="310">Once you have created your project, you can start it with the following command:</p><div style="position: relative;" data-node-hydration="311"><div><pre style="background-color:#2b303b;">
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><video type="video/mp4" name="dx new demo" autoplay="true" loop="true" width="800px" muted="true" data-node-hydration="301"><source src="/dioxusnewmovefc9d33190f4afea.mov" data-node-hydration="302"/></video><p data-node-hydration="303">First you will need to select a platform. Each platform has its own reference with more information on how to set up a project for that platform. Here are the platforms we recommend starting with:</p><ul data-node-hydration="304"><li>Web<ul><li><a href="getting_started/../reference/web">Client Side</a>: runs in the browser through WebAssembly</li><li><a href="getting_started/../reference/fullstack">Fullstack</a>: renders to HTML text on the server and hydrates it on the client</li></ul></li></ul><blockquote data-node-hydration="305"><p>If you are not sure which web platform you want to use, check out the <a href="getting_started/choosing_a_web_renderer">choosing a web renderer</a> chapter.</p></blockquote><ul data-node-hydration="306"><li>WebView<ul><li><a href="getting_started/../reference/desktop">Desktop</a>: runs in a web view on desktop</li><li><a href="getting_started/../reference/mobile">Mobile</a>: runs in a web view on mobile. Mobile is currently not supported by the dioxus CLI. The <a href="getting_started/../reference/mobile">mobile reference</a> has more information about setting up a mobile project</li></ul></li></ul><p data-node-hydration="307">Next, you can choose a styling library. For this project, we will use vanilla CSS.</p><p data-node-hydration="308">Finally, you can choose to start the project with the router enabled. The router is covered in the <a href="getting_started/../router">router guide</a>.</p><h2 id="running-the-project" data-node-hydration="309"><a class="header" href="#running-the-project">Running the project</a></h2><p data-node-hydration="310">Once you have created your project, you can start it with the following command:</p><div style="position: relative;" data-node-hydration="311"><div><pre style="background-color:#2b303b;">
 <span style="color:#c0c5ce;">cd my_project
 </span><span style="color:#c0c5ce;">dx serve
 </span></pre>