1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

use crate::TextProp;
use cfg_if::cfg_if;
use leptos::*;
use std::{cell::RefCell, rc::Rc};

/// Contains the current metadata for the document's `<html>`.
#[derive(Clone, Default)]
pub struct HtmlContext {
    lang: Rc<RefCell<Option<TextProp>>>,
    dir: Rc<RefCell<Option<TextProp>>>,
}

impl HtmlContext {
    /// Converts the `<html>` metadata into an HTML string.
    pub fn as_string(&self) -> Option<String> {
        match (self.lang.borrow().as_ref(), self.dir.borrow().as_ref()) {
            (None, None) => None,
            (Some(lang), None) => Some(format!(" lang=\"{}\"", lang.get())),
            (None, Some(dir)) => Some(format!(" dir=\"{}\"", dir.get())),
            (Some(lang), Some(dir)) => {
                Some(format!(" lang=\"{}\" dir=\"{}\"", lang.get(), dir.get()))
            }
        }
    }
}

impl std::fmt::Debug for HtmlContext {
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        f.debug_tuple("TitleContext").finish()
    }
}

/// A component to set metadata on the document’s `<html>` element from
/// within the application.
///
/// ```
/// use leptos::*;
/// use leptos_meta::*;
///
/// #[component]
/// fn MyApp(cx: Scope) -> impl IntoView {
///     provide_meta_context(cx);
///
///     view! { cx,
///       <main>
///         <Html lang="he" dir="rtl"/>
///       </main>
///     }
/// }
/// ```
#[component(transparent)]
pub fn Html(
    cx: Scope,
    /// The `lang` attribute on the `<html>`.
    #[prop(optional, into)]
    lang: Option<TextProp>,
    /// The `dir` attribute on the `<html>`.
    #[prop(optional, into)]
    dir: Option<TextProp>,
) -> impl IntoView {
    cfg_if! {
        if #[cfg(any(feature = "csr", feature = "hydrate"))] {
            let el = document().document_element().expect("there to be a <html> element");

            if let Some(lang) = lang {
                let el = el.clone();
                create_render_effect(cx, move |_| {
                    let value = lang.get();
                    _ = el.set_attribute("lang", &value);
                });
            }

            if let Some(dir) = dir {
                create_render_effect(cx, move |_| {
                    let value = dir.get();
                    _ = el.set_attribute("dir", &value);
                });
            }
        } else {
            let meta = crate::use_head(cx);
            *meta.html.lang.borrow_mut() = lang;
            *meta.html.dir.borrow_mut() = dir;
        }
    }
}