dioxuslabs / docsite Goto Github PK

View Code? Open in Web Editor NEW

107.0 107.0 91.0 205.81 MB

Dioxuslabs.com documentation site

Home Page: https://dioxuslabs.com

Rust 48.82% CSS 21.30% HTML 29.11% JavaScript 0.47% R 0.30%

docsite's People

Stargazers

Watchers

Forkers

alexkirsz jam1garner jaredlockhart leaysgur productinfo ctarrington balatamoghna joshrotenberg rodeymanager azzamsa bunsdev mrxiaozhuox qatoqat ealmloff philpax rmazeiks dxps ryu19-1 markacola randymcmillan marc2332 mcginty dogedark jrychn kaubu erithax neicore eventualbuddha uakbr massiminoiltrace trevyn itslewisndungu luisecm tigerros hirschenberger emily0622 fdragon830 seahorse-byte srid misterwoody pedrohbrasil sripwoud gramidt ericgoode alexanderjophus teckick lavren1974 benschulz bunnybites anuragsisodiyaa exotik850 koriedrakechaney wzwywx dax911 narsil werner291 jakekwak ardunster andrew15-5 nazmulshuvo03 lennartkloock maschga jereanon tonijz msiwak acwern jonnyandrew neonwuchang dioxusgrow sekoyo liigo sknauff houseme zwpdbh frantisek-heca satoshiwagmito yjhtry hybcloud tkr-sh abreis rogusdev jroddev clairrorism mwcz woggymobster antoniopresto gmeir averichev luveti kevinaboos

docsite's Issues

Terminal UI widgets example link broken

Page: https://dioxuslabs.com/docs/0.3/guide/en/getting_started/tui.html

The site says "See the widgets example", which leads to a tui package, when it's now dioxus-tui.

Consider reversing the order of the Release Notes on the front page

Hiya! Was looking at the Dioxus website, as one does, and noticed this:

I'd normally expect the more recent post to be first, and this might lead to people glancing over the rest of the list and ignoring newer posts.

I'd submit a PR for this, but I don't want to step on any toes 🙏

Tailwind Cookbook entry code not working

The line that launches the desktop app configuration of the dioxus app example for setting up Tailwind CSS currently points to ./tailwind.css when the previous command outputs the tailwind.css to public/tailwind.css
working on PR now

Development
Run the following command in the root of the project to start the tailwind css compiler:
npx tailwindcss -i ./input.css -o ./public/tailwind.css --watch
Desktop
Add a custom head pointing to the generated tailwind CSS file in your main. It looks like:
dioxus_desktop::launch_cfg(
  App,
  dioxus_desktop::Config::new()
    .with_custom_head(r#"<link rel="stylesheet" href="tailwind.css">"#.to_string()))
Launch the dioxus desktop app:
cargo run

The deployed website is crashing from today

The docsite was working until today.

In the browser console (macOS; Brave; guard disabled), I see:

docsite.js:725 ERROR /home/runner/.cargo/registry/src/index.crates.io-6f17d22bba15001f/dioxus-web-0.4.0/src/lib.rs:219 Rehydration failed NodeNotFound. Rebuild DOM into element from scratch
inline0.js:255 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'listening')
    at run (inline0.js:255:330)
    at dioxus_interpreter_js::sledgehammer_bindings::Channel::flush::h3dd42f069636a006 (docsite_bg.wasm:0xaa7cd)
    at dioxus_web::dom::WebsysDom::apply_edits::h8dea4df7adec0978 (docsite_bg.wasm:0x7f70a)
    at dioxus_web::run_with_props::{{closure}}::hd8fbd61113cac6f4 (docsite_bg.wasm:0x7ed66)
    at wasm_bindgen_futures::queue::Queue::new::{{closure}}::h4af736430e73b26a (docsite_bg.wasm:0xe5a45)
    at <dyn core::ops::function::FnMut<(A,)>+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::h9e889b7261c861ea (docsite_bg.wasm:0x175211)
    at __wbg_adapter_63 (docsite.js:332:10)
    at real (docsite.js:236:20)

doesn't build

what I've run:
gh repo clone DioxusLabs/docsite
trunk serve

▶ rustup -V
rustup 1.24.3 (ce5817a94 2021-05-31)
info: This is the version for the rustup toolchain manager, not the rustc compiler.
info: The currently active `rustc` version is `rustc 1.61.0 (fe5b13d68 2022-05-18)`

Add submit form to Awesome

We should add a form to easily submit projects to the Awesome and Made With lists.

Route for 0.1 post points to the 0.2 post and vice versa

Hello again! It looks like the fix for #32 had an unfortunate side-effect: the routes for the blog posts are now reversed!

It looks like the routing is done by index on the array of posts, but because that array has changed its order, the routes now point to the wrong posts. Up to you how to fix it, but I'd suggest using the slug as the unifying key and sorting the posts on render.

No content when JavaScript is blocked.

The website should show at least some stub mentioning unavailable JavaScript instead of just rending plain white background (or better just deliver server-rendered content).

Combined with hourglass-esque logo, I though it was just very slow to load.

Upon loading, I saw a motto:

User interfaces that run anywhere.

Looks like JS-less web browsers is not an "anywhere".

Render your app entirely on the server.

So why the website (assuming it uses the framework in question) does not use it?

(also the text above is tricky to select - it attemts to drags&drop an element on FF 102.7esr instead of selecting the text).

Setup guides links point to 404

Navigate to the "setup guides" section https://dioxuslabs.com/learn/0.4/getting_started/#setup-guides
Click one of the links of the list
You are redirected to a 404 page

It seems the links are incorrectly generated, with an additional "getting_started" in between. For example, the "Desktop" link points to /learn/0.4/getting_started/getting_started/desktop instead of /learn/0.4/getting_started/desktop

"Getting Started: Web" guide suggestions wrong cargo add command

https://dioxuslabs.com/reference/platforms/web says:

Add Dioxus with the web features:
$ cargo add dioxus --features web

However cargo add dioxus --features web results in:

cldfire@jarekspsonalmbp project % cargo add dioxus --features web
    Updating crates.io index
      Adding dioxus v0.3.1 to dependencies.
error: unrecognized feature for crate dioxus: web
enabled features:
    dioxus-core-macro, dioxus-hooks, dioxus-html, dioxus-rsx, hooks, html, macro

Seems to me the default features are set up for a web build as of today.

"Choosing a Web Renderer" link to "server functions" 404s

Steps to Reproduce

Go to https://dioxuslabs.com/learn/0.4/getting_started/choosing_a_web_renderer.
Scroll to Dioxus Fullstack.
Click "server functions" link (https://dioxuslabs.com/learn/cookbook/fullstack/server_functions).

Actual Result

A 404 Not Found page.

Expected Result

Maybe this? https://dioxuslabs.com/learn/0.4/reference/fullstack/server_functions

Platform-specific guide link broken

On https://dioxuslabs.com/guide/setup.html there is a link to https://dioxuslabs.com/platforms/00-index.html which 404s. It seems like the platforms section has been moved to the reference (example desktop) but there doesn't actually seem to be any equivalent to the "platforms" index page to actually update this link to currently.

Probably best way to fix would be to make this following into its own section to link to:

Use App instead of app in all getting started guides

We should use App in all of the getting started platform guides to be more consistent with the hackernews guide. Some of the guides already use App, but some like the fullstack guide do not

Using ServerFn in dioxus_desktop

I've tried the dioxus_fullstack example. As far as I understood it has an underlying axum server, which serves both the static files and the generated APIs made by ServerFn.

Is it possible to separate them for use in dioxus_desktop?

I imagine something like:

dioxus_desktop runs a compiled binary (spawns a webview anyway)
dioxus (ssr) runs server-side axum, serving only the APIs without the web static files
they talk over the network

I tried to search in the documentation and examples by I haven't found anything so far

Sidebar overlaps with main content

At some viewport sizes the sidebar overlaps with the main content:

This was in Arc (Chrome, effectively) with a clientWidth of 1232 on this page: https://dioxuslabs.com/learn/0.4/getting_started/fullstack.

CSS is broken

The CSS is broken on the blog page. It works fine if you navigate to the home page and get to the blog from there.

Steps to reproduce:

Click here: https://dioxuslabs.com/blog/
See broken CSS

Getting Started - Full Stack has a number of issues

Just checking out the new 0.4 release, running through the full stack getting started guide (https://dioxuslabs.com/learn/0.4/getting_started/fullstack) and there are a few issues.

The Web link in "This guide assumes you read the Web getting started guide and installed the Dioxus-cli" goes to a 404.

Setup:

cargo run complains about missing index.html

Hot Reload:

Setup has no code to add to the main function
dx build --features web panics
dioxus run --features ssr --hot-reload command not found.
Running dx run --features ssr --hot-reload unrecognized subcommand 'run'

Outdated link

docsite/src/components/nav.rs

Line 123 in 42a65af

("Fermi", "https://github.com/DioxusLabs/fermi"),

Update confusing fetching.rs example

Many people get confused by the use_fetch! macro, let's update it until we actually make it a real thing

Get rid of social icons

None of them are clickable, should we get rid of them?

`use_coroutine` example with Fermi seems to be outdated.

The documentation Reference -> UseCoroutine -> Sending Values seems to be wrong. In the last code-block the asnc fn gets an AtomRoot parameter, but use_atom_root(cx) returns a &Rc

Rendering issue on mobile

To Reproduce
Steps to reproduce the behavior:

Go to https://dioxuslabs.com/
Open dev tools and switch to mobile view (eg. iphone 11 size)
Scroll to the right

Environment

Browser: Firefox 94.0

missing `use` for `delay_ms` in the doc of using coroutine

docsite/docs-src/0.4/en/reference/use_coroutine.md

Line 67 in f2d3a57

delay_ms(1000).await;

Where does this delay_ms come from? I don't see it anywhere. Can someone give me a pointer please?

Add link to the github repo

One thing I am missing is a quick way to jump to the github repo of the framework from the website, that would be really nice

The homepage code snippet does not match the demo

This snippet:

docsite/snippets/homepage.rs

Lines 1 to 9 in a97cd40

    
           fn app(cx: Scope) -> Element { 
        
               let mut count = use_state(&cx, || 0); 
        
               cx.render(rsx!( 
        
                   h1 { "High-Five counter: {count}" } 
        
                   button { onclick: move |_| count += 1, "Up high!" } 
        
                   button { onclick: move |_| count -= 1, "Down low!" } 
        
               )) 
        
           }

Does not match the actual implementation and thus it raises some questions from the new-comers:

docsite/src/components/homepage/hero.rs

Lines 46 to 81 in a97cd40

    
                                   code { class: "language-rust line-numbers", [include_str!("../../../snippets/homepage.rs")] } 
        
                               } 
        
                           } 
        
                       } 
        
                       InteractiveHeader {} 
        
                   } 
        
               }) 
        
           } 
        
           pub fn InteractiveHeader(cx: Scope) -> Element { 
        
               let mut count = use_state(&cx, || 0); 
        
               cx.render(rsx!{ 
        
                   div { 
        
                       class: "flex flex-col items-center px-10 rounded mt-6 mb-2 pt-4 mr-auto hidden lg:block lg:ml-2" , 
        
                       background_color: "hsl(220, 13%, 18%)", 
        
                       div { class: "pb-3 text-white text-center w-44", 
        
                           h1 { "Counter: {count}" } 
        
                       } 
        
                       div { class: "flex flex-col items-center", 
        
                           button { 
        
                               class: "inline-flex items-center text-white bg-green-500 border-0 py-1 px-4 focus:outline-none hover:bg-gray-600", 
        
                               onclick: move |_| count += 1, 
        
                               "Up high!" 
        
                           } 
        
                           img { class: "h-12 mx-4 my-4", src: "https://rustacean.net/assets/rustacean-flat-gesture.png" } 
        
                           button { 
        
                               class: "inline-flex items-center text-white bg-red-500 border-0 py-1 px-4 focus:outline-none hover:bg-gray-600", 
        
                               onclick: move |_| count -= 1, 
        
                               "Down low!" 
        
                           } 
        
                       } 
        
                   } 
        
               }) 
        
           }

The text is different
There is Ferris img
The style is different

Missing features in Cargo.toml of fullstack guide

The features section is missing in this guide's Cargo.toml
https://dioxuslabs.com/learn/0.4/getting_started/fullstack

JS Benchmark leads back to dioxuslabs.com

Problem

Clicking on the "JS Benchmark" in Feature-packed examples leads back to the https://dioxuslabs.com/ website.

Steps To Reproduce

Steps to reproduce the behavior:

Scroll down to Feature-packed examples
Click on "JS Benchmark"
Leads back to https://dioxuslabs.com/

Expected behavior

Clicking on JS Benchmark should show the Benchmark

Screenshots

Questionnaire

I'm interested in fixing this myself but don't know where to start
I would like to fix and I have a solution
I don't have time to fix this right now, but maybe later

Dioxus codesandbox example doesn't work

In the Getting started page, there's a codesandbox example which doesn't work (I'm not referring to code but literally the example it's not running). There are other examples from codesandbox that doesn't work.

https://dioxuslabs.com/learn/0.4/getting_started/fullstack#:~:text=Finally%2C%20open%20http%3A//localhost%3A8080%20in%20your%20browser.%20You%20should%20see%20a%20server%2Dside%20rendered%20page%20with%20a%20counter.

Use new idiom for use_state

It looks like the new use_state idiom of (variable, set_variable) = use_state(&cx, | | initial_value) needs to be applied to src/components//.rs

Steps to reproduce:

Clone the latest docsite
Clone the latest fermi
in docsite, run trunk serve
See some errors around UseState

Malformed link on blog post

On https://dioxuslabs.com/blog/introducing-dioxus/ the link to github found here:

This very site is built with Dioxus, and the source code is available here.

is malformed:

https://dioxuslabs.com/blog/introducing-dioxus/github.com/dioxuslabs/docsite

it should probably be something like:

https://github.com/dioxuslabs/docsite

Create an "edit page" button

Feature request

It would be nice if on every page, there would be a button which would open the GitHub editor for that page, since it's just a Markdown file. For example, on guide/your_first_component, the button would lead to docsite/edit/master/docs-src/0.4/en/guide/your_first_component. It would allow anyone to quickly suggest a change without having to manually find that file, or fork the repository.

This wouldn't be sufficient for more complex documentation editing, but it would be perfect for small edits, such as a simple typo/grammar fix.

Code formatting error in docs

See https://dioxuslabs.com/guide/setup.html

jump down to linux specifics part...

looks like you switched from markup to ``` markdown half way through that doc....

Didn't have time to do a PR - sorry

Links to examples broken

The links to the examples under the heading Feature-packed examples on the home page lead to a 404 page on GitHub.

It looks like the examples have been moved to their own repo. E.g. link says https://github.com/dioxuslabs/todomvc instead of https://github.com/dioxuslabs/example-projects/tree/master/todomvc

Line breaks in Markdown don't count as a space

In "normal" Markdown, a single line break displays a space. Example:

... this line is very long and hard to edit in an editor,
so here's a line break!

displays: ... this line is very long and hard to edit in an editor, so here's a line break!. This is not the case on the docsite, so there's awkward missing spaces. For example, in cookbook/examples, there's this:

... or you just want to see cool thingsthat you can do with Dioxus, make sure to give these a look!
                                 ^^^^^^^^^^

Equivalent Markdown:

... or you just want to see cool things
that you can do with Dioxus, make sure to give these a look!

Mismatch in project directory name in Liveview setup instructions

Location

Getting Started / Liveview - Setup

Summary

There is a small but potentially confusing mismatch in the Liveview setup instructions on the Dioxus documentation page. The instructions for creating a new project suggest using cargo new --bin demo followed by cd app, which seems to be inconsistent.

When using Darkreader: Links / buttons are unclickable and there are errors

Reproduction steps:

have Dark-Reader enabled (https://addons.mozilla.org/en-US/firefox/addon/darkreader/)
go to https://dioxuslabs.com/
scroll down to the footer
click on Learning -> Guide
try to click on any other link button (like the side-bar TOC) and observe nothing happening (even after reload and hard reloading)
also observe the console errors

console errors:

INFO /home/runner/.cargo/git/checkouts/dioxus-1e619ce595d3799d/7a7397b/packages/web/src/lib.rs:172 Starting up docsite.js:1071:13
INFO /home/runner/.cargo/git/checkouts/dioxus-1e619ce595d3799d/7a7397b/packages/web/src/lib.rs:207 rebuilding app docsite.js:1071:13
ERROR /home/runner/.cargo/git/checkouts/dioxus-1e619ce595d3799d/7a7397b/packages/web/src/lib.rs:219 Rehydration failed NodeNotFound. Rebuild DOM into element from scratch docsite.js:1068:13
Uncaught (in promise) TypeError: root is undefined
    run https://dioxuslabs.com/assets/dioxus/snippets/dioxus-interpreter-js-e5d84ddbe84386fa/inline0.js:255
    __wbg_adapter_63 https://dioxuslabs.com/assets/dioxus/docsite.js:331
    real https://dioxuslabs.com/assets/dioxus/docsite.js:236
inline0.js:255:325
panicked at 'already borrowed: BorrowMutError', /home/runner/.cargo/registry/src/index.crates.io-6f17d22bba15001f/wasm-bindgen-futures-0.4.37/src/task/singlethread.rs:85:37

Stack:

__wbg_get_imports/imports.wbg.__wbg_new_abda76e883ba8a5f/<@https://dioxuslabs.com/assets/dioxus/docsite.js:524:21
logError@https://dioxuslabs.com/assets/dioxus/docsite.js:253:18
__wbg_get_imports/imports.wbg.__wbg_new_abda76e883ba8a5f@https://dioxuslabs.com/assets/dioxus/docsite.js:523:66
console_error_panic_hook::hook::ha10b393455c8fea1@https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:wasm-function[740]:0xd5d22
core::ops::function::Fn::call::hd3935fca3a953dbf@https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:wasm-function[8010]:0x187edd
std::panicking::rust_panic_with_hook::h6df5db7ad9f65dc8@https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:wasm-function[1811]:0x123f2d
std::panicking::begin_panic_handler::{{closure}}::h0d169fa297411d6d@https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:wasm-function[2254]:0x13852c
std::sys_common::backtrace::__rust_end_short_backtrace::h7fe51fb4d3ba6060@https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:wasm-function[7993]:0x187e4e
rust_begin_unwind@https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:wasm-function[3538]:0x15ca6a
core::panicking::panic_fmt::h2d3c5586175098d9@https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:wasm-function[4614]:0x16f298
core::result::unwrap_failed::h73809cc05a786e48@https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:wasm-function[2550]:0x142d32
core::cell::RefCell<T>::borrow_mut::ha26e00b5061b58ad@https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:wasm-function[3794]:0x161bbe
wasm_bindgen_futures::task::singlethread::Task::run::h2875f3fdd31c94db@https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:wasm-function[2268]:0x138d5c
wasm_bindgen_futures::queue::Queue::new::{{closure}}::h8b8ac32a31b48068@https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:wasm-function[1833]:0x12517c
<dyn core::ops::function::FnMut<(A,)>+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::h34b8c81218256380@https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:wasm-function[6233]:0x180878
__wbg_adapter_63@https://dioxuslabs.com/assets/dioxus/docsite.js:331:10
real@https://dioxuslabs.com/assets/dioxus/docsite.js:236:20


docsite.js:537:13
Uncaught (in promise) RuntimeError: unreachable executed
    __wbg_adapter_63 https://dioxuslabs.com/assets/dioxus/docsite.js:331
    real https://dioxuslabs.com/assets/dioxus/docsite.js:236
docsite_bg.wasm:1607698:1

Firefox 116.0 Linux
Linux Manjaro 23.0.0

PS:
i dont why or how, but after i had removed a dioxus-prevent-default attribute and clicked on that link, everything started to work (even after reload and hard reloads), but re-doing the reproduction steps gets it locked again

Document secret handling in Dioxus fullstack

We should document how to handle secrets that you want on the server but not on the client. Like API keys. It doesn't have to be a large section, but something about making sure that secrets are cfged out on the server would be useful.

We should add it to the fullstack docs here: https://github.com/DioxusLabs/docsite/tree/master/docs-src/0.4/en/reference/fullstack. It could be in a complete separate chapter or be part of a larger fullstack anti-patterns chapter

Broken button style on dioxuslabs.com

On viewing dioxuslabs.com I found that the buttons for switching code snippet showcases were problematic when activated for the first time(Pic1).
Pic1
Normal

After investigations it turns out that

inside run()@inline0.js, inside switch (op & 255){...} : the "case 4" would do els = stack.splice(stack.length - u32buf[u32bufp++]); which discards <span ...> from[<div id="main">, <span class="absolute z-10 bottom-0 inset-x-0 h-2 bg-ghmetal">], making it [<div id="main">].

Document file_engine in the docs guide on user input

At the https://dioxuslabs.com/learn/0.4/reference/user_input page, there's no mention on how to use input fields with type="file".
Trying to print the oninput event using the debug formatting didn't help either, as only empty "value" and "values" fields did show up.
Then I found the existence of the files field from the docs generated by cargo doc, in the dioxus::prelude::FormData. After more searching, I found this other example showing file upload https://github.com/Demonthos/dioxus/blob/master/examples/file_upload.rs

I would suggest documenting the file input feature inside the "user_input" guide page at https://dioxuslabs.com/learn/0.4/reference/user_input page.

Can I help in some way? Be warned that I'm not a native english speaker, so a checking might be needed anyway.

Passing props through the Router code snippet

https://dioxuslabs.com/learn/0.4/migration/router
the second block has this comment:

#[derive(Routable, PartialEq, Debug, Clone)]
enum Route {
    #[route("/home")]
    // This route will render the Home component with the HomeProps props. (make sure you have the props imported)
    // You can modify the props by passing extra arguments to the macro:
    // #[route("/home", Comp, CompProps)]
    Home {},
}

however, I tried doing

#[route("/home", Comp, CompProps)]

and

#[route("/home", CompProps)]
Comp {}

and

#[route("/home", Comp, CompProps)]
Comp {}

and neither one seems to work.

Diplex global state managment library doesn't seem to exist

The Diplex global state management library mentioned here

docsite/snippets/mod.rs

Line 116 in b92993e

    
           /// Dioxus also has 1st-class support for Diplex: a global state management toolkit modeled after RecoilJS.

doesn't show up in github searches of this organization or 'all of github' and doesn't show up on google either. Did the name of this library change? Is the library private? Thanks for your clarifications!

[bug] Missing information on launch macros

Reference: https://dioxuslabs.com/learn/0.4/reference/fullstack/routing

There is missing information on what crate the launch macros originate from.

404 page has a broken image link

Ironically, the 404 page has this HTML:

<source type="image/avif" srcset="/static/rustacean-flat-gesture.png">

And the URL there itself leads to the 404 page instead of the expected image (https://dioxuslabs.com/static/rustacean-flat-gesture.png).

"awesome stuff" links only work when opened in new tab

The projects linked on https://dioxuslabs.com/awesome can't be left clicked to open in the same tab (instead the page scrolls to the top), only middle click and/or context menu -> open in new tab work. Tested on MacOS, Firefox and Safari.

Create more "books"

By "books", I mean the top-level sections in the docs, like Router and CLI.

Some of the tools discussed in the docs could be reorganized into their respective books. This would reduce duplication and be more organized/coherent. Right now, it feels "scattered".

For example, Getting started > Web, Reference > Web, Cookbook > Publishing > Web could all be unified under a "Web" book. This includes all the other renderers, where each book contains all the steps to publish a project using a specific renderer. Additionally, there should be a guide on how to publish the same app on different platforms.

Every book should have a "Reference" section and an "Example project" section, which showcases elements from the Reference. The Router book has this, but the difference between the two sections should be clear. For example, the Router book example project has a Navigation Targets section, but this should be in the Reference, as it's not even included in the final example project code.

This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “”.

Control clicking on links works badly

If I control click on any menu item to open it in a new page it changes the current page to the intended page without changing the url and opens the previous page in a new tab.

Go to https://dioxuslabs.com/blog/introducing-dioxus

control click on "home"
original tab becomes the blog page without changing the url

the new tab points to the original page

	fn app(cx: Scope) -> Element {
	let mut count = use_state(&cx, \|\| 0);

	cx.render(rsx!(
	h1 { "High-Five counter: {count}" }
	button { onclick: move \|_\| count += 1, "Up high!" }
	button { onclick: move \|_\| count -= 1, "Down low!" }
	))
	}

	code { class: "language-rust line-numbers", [include_str!("../../../snippets/homepage.rs")] }
	}
	}
	}
	InteractiveHeader {}
	}
	})
	}

	pub fn InteractiveHeader(cx: Scope) -> Element {
	let mut count = use_state(&cx, \|\| 0);

	cx.render(rsx!{
	div {
	class: "flex flex-col items-center px-10 rounded mt-6 mb-2 pt-4 mr-auto hidden lg:block lg:ml-2" ,
	background_color: "hsl(220, 13%, 18%)",

	div { class: "pb-3 text-white text-center w-44",
	h1 { "Counter: {count}" }
	}
	div { class: "flex flex-col items-center",
	button {
	class: "inline-flex items-center text-white bg-green-500 border-0 py-1 px-4 focus:outline-none hover:bg-gray-600",
	onclick: move \|_\| count += 1,
	"Up high!"
	}
	img { class: "h-12 mx-4 my-4", src: "https://rustacean.net/assets/rustacean-flat-gesture.png" }
	button {
	class: "inline-flex items-center text-white bg-red-500 border-0 py-1 px-4 focus:outline-none hover:bg-gray-600",
	onclick: move \|_\| count -= 1,
	"Down low!"
	}
	}
	}
	})
	}