Special elements head and body
#1169
Comments
|
The approach dioxus-helmet takes will only work for web renderers because it depends on web-sys. The head must include a link to the For example, a demo application today needs to include something like this to start the application: <head>
<title>Floneum</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="preload" href="/floneum-site_bg.wasm" as="fetch" type="application/wasm"
crossorigin="">
<link rel="modulepreload" href="/floneum-site.js"></head>
</head>We would either need to force users to include that boilerplate in every application or ignore that part of the head when diffing (which would make changing something like the title difficult). head {
title {
"Floneum"
}
meta { content: "text/html;charset=utf-8", http_equiv: "Content-Type" }
meta { name: "viewport", content: "width=device-width, initial-scale=1" }
meta { charset: "UTF-8" }
link { rel: "preload", href: "/floneum-site_bg.wasm", as: "fetch", type: "application/wasm",
crossorigin: "" }
link { rel: "modulepreload", href: "/floneum-site.js" }
}Or a third option is auto-inserting the scripts if no head and body element are found, otherwise generating the links to the scripts |
ealmloff
added
enhancement
|
I second this request. However, I don't mind so much whether I can access these elements programmatically, as long as I can define the properties to be there when the page is compiled. Leptos has a For now, I'm going to see if I can work around this by having a build step that manipulates |
mount_to_body and the dioxus_web::launch macro work similarly. Both will insert the WASM application in some existing HTML. Dioxus will just create a default html file if you don't provide one If you create a |
|
@ealmloff I hope with 0.6.0 of integrating helmet, we can set more than just the title, but anything arbitrary in the |
|
It might make more sense to create a cross platform head hook that lets you change things like the title. That would also make it easier to add any desktop specific extensions to the same hook Some other parts of this we want to do at compile time with a macro if possible: |
|
It's absolutely necessary to be able to include route specific content in the head. This is important for being able to present meta data for content preview and SEO purposes. Also proper multilingual support would need to set the This cannot be done "post load" in JavaScript but needs to happen on the server side when rendering the HTML page. For example <html lang="fr">
<head>
<meta charset="UTF-8">
<meta property="og:locale" content="en_US">
<meta property="og:title" content="Mon article de blog">
<meta property="og:url" content="https://example.com/my-blog-post?lang=fr">
<meta property="og:description" content="Un excellent article de blog sur Dioxus">
<title>Mon article de blog</title>
... other relevant tags ...
</head>If it wasn't for the routes, this could be done outside of Dioxus, like on axum level, but with routes containing relevant information for the head, there needs to be proper support for this inside Dioxus. Furthermore, as some content for the head tags would be coming from external sources, like a database, there needs to be a way to update these tags within the rendering functions waiting for Perhaps having a template for the head with specific placeholders for meta data would be a good and safe approach to do this. Then exposing those template locations within the global context or so. |
|
@ochrons I understand what you say, and I think the same thing.
More info here: https://webmasters.stackexchange.com/questions/403/how-should-i-structure-my-urls-for-both-seo-and-localization |
|
We might just end up going the react 19 route https://react.dev/blog/2024/04/25/react-19#support-for-metadata-tags This would be even easier than looking for a |
Specific Demand
Borrowing an idea from Svelte here, but it'd be great if this is built into Dioxus, very useful when developing for the Web and PWAs.
Implement Suggestion
Current implementation of
dioxus-helmetlooks good, it'd be great if we can bring this in house and offer it out of the boxThe text was updated successfully, but these errors were encountered: