diff --git a/website/docs/concepts/agents.mdx b/website/docs/concepts/agents.mdx index 176e92930..efdb777a6 100644 --- a/website/docs/concepts/agents.mdx +++ b/website/docs/concepts/agents.mdx @@ -3,8 +3,8 @@ title: "Agents" description: "Yew's Actor System" --- -import Image from '@theme/IdealImage'; -import agentLifeCycle from '/img/agent-life-cycle.png' +import useBaseUrl from "@docusaurus/useBaseUrl"; +import ThemedImage from '@theme/ThemedImage'; Agents are similar to Angular's [Services](https://angular.io/guide/architecture-services) \(but without dependency injection\), and provide Yew with an @@ -19,7 +19,19 @@ In order for agents to run concurrently, Yew uses ## Lifecycle - + + + + ## Types of Agents diff --git a/website/docs/more/development-tips.mdx b/website/docs/more/development-tips.mdx index 1fbada5cb..39758914b 100644 --- a/website/docs/more/development-tips.mdx +++ b/website/docs/more/development-tips.mdx @@ -109,14 +109,13 @@ pub fn $func_name$(props: &$Name$Props) -> Html { ### Jetbrains IDEs - - Since April 2021, Jetbrains has started to support proc-macro expansion as an experimental feature. The user has to manually enable it. [See the post here.](https://blog.jetbrains.com/rust/2021/04/08/intellij-rust-updates-for-2021-1/#proc-macros) -This still won't enable html autofill and formatting help, but fixes the bug in the plugin where -the return type of `html!` can't be resolved. +This still won't enable html autofill and formatting help, but will enable variable resolution for +component names and attributes inside the macro. +Utilities like Rename, Go to Declaration, Find Usages will work inside the macro. ### VS Code diff --git a/website/docs/tutorial.mdx b/website/docs/tutorial.mdx index 6f312ac41..bd020e4d9 100644 --- a/website/docs/tutorial.mdx +++ b/website/docs/tutorial.mdx @@ -187,7 +187,7 @@ Refresh the browser page, and you should see the following output displayed: ### Using Rust language constructs in the markup A big advantage of writing markup in Rust is that we get all the coolness of Rust in our markup. -Now, instead of hardcoding the list of videos, let's actually define them as a `Vec` of Rust objects. +Now, instead of hardcoding the list of videos in the html, let's actually define them as a `Vec` of Rust objects. We'll create a simple `struct` (in `main.rs` or any file of our choice) which will hold our data. ```rust @@ -202,7 +202,7 @@ struct Video { Next, we will create instances of this struct in our `app` function and use those instead of hardcoding the data: ```rust -use website_test::tutorial::Video; +use website_test::tutorial::Video; // replace with your own path let videos = vec![ Video { diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 5a18fe550..3befb2691 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -97,7 +97,6 @@ module.exports = { locales: ['en', 'ja', 'zh-CN', 'zh-TW'], }, plugins: [ - 'ideal-image', 'content-pages', [ '@docusaurus/plugin-google-analytics', diff --git a/website/package.json b/website/package.json index be562e530..e361c7f97 100644 --- a/website/package.json +++ b/website/package.json @@ -19,7 +19,6 @@ "@docusaurus/plugin-content-docs": "^2.0.0-beta.13", "@docusaurus/plugin-content-pages": "^2.0.0-beta.13", "@docusaurus/plugin-google-analytics": "^2.0.0-beta.13", - "@docusaurus/plugin-ideal-image": "^2.0.0-beta.13", "@docusaurus/theme-classic": "^2.0.0-beta.13", "@easyops-cn/docusaurus-search-local": "^0.21.1", "@mdx-js/react": "^1.6.21", diff --git a/website/static/img/agent-life-cycle.png b/website/static/img/agent-life-cycle.png deleted file mode 100644 index 1a48b7847..000000000 Binary files a/website/static/img/agent-life-cycle.png and /dev/null differ diff --git a/website/static/img/agent-lifecycle-dark.svg b/website/static/img/agent-lifecycle-dark.svg new file mode 100644 index 000000000..774429223 --- /dev/null +++ b/website/static/img/agent-lifecycle-dark.svg @@ -0,0 +1,36 @@ + + #stroke: #eeeeee +#fill: #c4b16e + +[Create]->[Connected] +[Connected]->[Handle Input] +[Handle Input]->[Update] +[Update]->[Handle Input] +[Update]->[Disconnected] +[Disconnected]->[Destroy] + + + + + + + + + + + + + + + Create + + Connected + + Handle Input + + Update + + Disconnected + + Destroy + \ No newline at end of file diff --git a/website/static/img/agent-lifecycle-light.svg b/website/static/img/agent-lifecycle-light.svg new file mode 100644 index 000000000..cae38afd8 --- /dev/null +++ b/website/static/img/agent-lifecycle-light.svg @@ -0,0 +1,33 @@ + + [Create]->[Connected] +[Connected]->[Handle Input] +[Handle Input]->[Update] +[Update]->[Handle Input] +[Update]->[Disconnected] +[Disconnected]->[Destroy] + + + + + + + + + + + + + + + Create + + Connected + + Handle Input + + Update + + Disconnected + + Destroy + \ No newline at end of file diff --git a/website/versioned_docs/version-0.18.0/concepts/agents.mdx b/website/versioned_docs/version-0.18.0/concepts/agents.mdx index 0a57de432..e1742c06b 100644 --- a/website/versioned_docs/version-0.18.0/concepts/agents.mdx +++ b/website/versioned_docs/version-0.18.0/concepts/agents.mdx @@ -3,13 +3,23 @@ title: "Agents" description: "Yew's Actor System" --- +import useBaseUrl from "@docusaurus/useBaseUrl"; +import ThemedImage from '@theme/ThemedImage'; + Agents are similar to Angular's [Services](https://angular.io/guide/architecture-services) \(but without dependency injection\), and provide a Yew with an [Actor Model](https://en.wikipedia.org/wiki/Actor_model). Agents can be used to route messages between components independently of where they sit in the component hierarchy, or they can be used to create a shared state, and they can also be used to offload computationally expensive tasks from the main thread which renders the UI. There is also planned support for using agents to allow Yew applications to communicate across tabs \(in the future\). In order for agents to run concurrently, Yew uses [web-workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers). ## Lifecycle -![Agent lifecycle](https://user-images.githubusercontent.com/42674621/79125224-b6481d80-7d95-11ea-8e6a-ab9b52d1d8ac.png) + + ## Types of Agents diff --git a/website/versioned_docs/version-0.19.0/concepts/agents.mdx b/website/versioned_docs/version-0.19.0/concepts/agents.mdx index 176e92930..0e88bf736 100644 --- a/website/versioned_docs/version-0.19.0/concepts/agents.mdx +++ b/website/versioned_docs/version-0.19.0/concepts/agents.mdx @@ -3,8 +3,8 @@ title: "Agents" description: "Yew's Actor System" --- -import Image from '@theme/IdealImage'; -import agentLifeCycle from '/img/agent-life-cycle.png' +import useBaseUrl from "@docusaurus/useBaseUrl"; +import ThemedImage from '@theme/ThemedImage'; Agents are similar to Angular's [Services](https://angular.io/guide/architecture-services) \(but without dependency injection\), and provide Yew with an @@ -19,7 +19,13 @@ In order for agents to run concurrently, Yew uses ## Lifecycle - + ## Types of Agents diff --git a/website/versioned_docs/version-0.19.0/concepts/wasm-bindgen/introduction.mdx b/website/versioned_docs/version-0.19.0/concepts/wasm-bindgen/introduction.mdx index f991a21f9..ba74f347d 100644 --- a/website/versioned_docs/version-0.19.0/concepts/wasm-bindgen/introduction.mdx +++ b/website/versioned_docs/version-0.19.0/concepts/wasm-bindgen/introduction.mdx @@ -1,5 +1,5 @@ --- -title: "`wasm-bindgen`" +title: wasm-bindgen sidebar_label: wasm-bindgen slug: /concepts/wasm-bindgen --- diff --git a/website/versioned_docs/version-0.19.0/more/development-tips.mdx b/website/versioned_docs/version-0.19.0/more/development-tips.mdx index 1fbada5cb..c2b7b74ab 100644 --- a/website/versioned_docs/version-0.19.0/more/development-tips.mdx +++ b/website/versioned_docs/version-0.19.0/more/development-tips.mdx @@ -115,8 +115,9 @@ Since April 2021, Jetbrains has started to support proc-macro expansion as an ex The user has to manually enable it. [See the post here.](https://blog.jetbrains.com/rust/2021/04/08/intellij-rust-updates-for-2021-1/#proc-macros) -This still won't enable html autofill and formatting help, but fixes the bug in the plugin where -the return type of `html!` can't be resolved. +This still won't enable html autofill and formatting help, but will enable variable resolution for +component names and attributes inside the macro. +Utilities like Rename, Go to Declaration, Find Usages will work inside the macro. ### VS Code diff --git a/website/versioned_docs/version-0.19.0/tutorial.mdx b/website/versioned_docs/version-0.19.0/tutorial.mdx index 6f312ac41..bd020e4d9 100644 --- a/website/versioned_docs/version-0.19.0/tutorial.mdx +++ b/website/versioned_docs/version-0.19.0/tutorial.mdx @@ -187,7 +187,7 @@ Refresh the browser page, and you should see the following output displayed: ### Using Rust language constructs in the markup A big advantage of writing markup in Rust is that we get all the coolness of Rust in our markup. -Now, instead of hardcoding the list of videos, let's actually define them as a `Vec` of Rust objects. +Now, instead of hardcoding the list of videos in the html, let's actually define them as a `Vec` of Rust objects. We'll create a simple `struct` (in `main.rs` or any file of our choice) which will hold our data. ```rust @@ -202,7 +202,7 @@ struct Video { Next, we will create instances of this struct in our `app` function and use those instead of hardcoding the data: ```rust -use website_test::tutorial::Video; +use website_test::tutorial::Video; // replace with your own path let videos = vec![ Video {