src/app.rs

@@ -1,15 +1,11 @@
-use yew::{function_component, html, Html, Properties};
-use yew_router::Switch;
+use std::sync::{Arc, Mutex};
 
-#[cfg(feature = "static")]
+use yew::{function_component, html, ContextProvider, Html, Properties};
 use yew_router::{
     history::{AnyHistory, History, MemoryHistory},
-    Router,
+    BrowserRouter, Router, Switch,
 };
 
-#[cfg(not(feature = "static"))]
-use yew_router::BrowserRouter;
-
 use crate::{components::layout::Layout, pages::Route};
 
 #[function_component(AppContent)]
@@ -23,32 +19,72 @@ fn app_content() -> Html {
     }
 }
 
-#[derive(Properties, PartialEq)]
-#[cfg_attr(not(feature = "static"), derive(Default))]
-pub struct AppProps {
-    #[cfg(feature = "static")]
-    pub url: String,
-}
+#[derive(Default, Properties, PartialEq)]
+pub struct AppProps {}
 
 #[function_component(App)]
 #[allow(unused_variables)]
 pub fn app(props: &AppProps) -> Html {
-    #[cfg(feature = "static")]
-    {
-        log::info!("Application is running in static mode");
-        let history = AnyHistory::from(MemoryHistory::default());
-        history.push(&props.url);
-        html! {
-            <Router history={history}>
-                <AppContent />
-            </Router>
-        }
-    }
+    let head = HeadWriter::default();
 
-    #[cfg(not(feature = "static"))]
     html! {
+        <ContextProvider<HeadWriter> context={head}>
             <BrowserRouter>
                 <AppContent />
             </BrowserRouter>
+        </ContextProvider<HeadWriter>>
+    }
+}
+
+#[derive(Default)]
+pub struct HeadWriter {
+    content: Arc<Mutex<String>>,
+}
+
+impl PartialEq for HeadWriter {
+    fn eq(&self, _: &Self) -> bool {
+        true
+    }
+}
+
+impl Clone for HeadWriter {
+    fn clone(&self) -> Self {
+        Self {
+            content: Arc::clone(&self.content),
+        }
+    }
+}
+
+impl HeadWriter {
+    pub fn take(self) -> String {
+        let mut content = self.content.lock().unwrap();
+        let mut taken = String::new();
+        std::mem::swap(&mut taken, &mut *content);
+        taken
+    }
+
+    pub fn write_fmt(&self, args: std::fmt::Arguments<'_>) {
+        let mut content = self.content.lock().unwrap();
+        std::fmt::Write::write_fmt(&mut *content, args).unwrap();
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct StaticAppProps {
+    pub url: String,
+    pub head: HeadWriter,
+}
+
+#[function_component(StaticApp)]
+pub fn static_app(props: &StaticAppProps) -> Html {
+    let history = AnyHistory::from(MemoryHistory::default());
+    history.push(&props.url);
+
+    html! {
+        <ContextProvider<HeadWriter> context={props.head.clone()}>
+            <Router history={history}>
+                <AppContent />
+            </Router>
+        </ContextProvider<HeadWriter>>
     }
 }

src/bin/site-build.rs

@@ -1,15 +1,17 @@
 use std::path::{Path, PathBuf};
 
 use site::{
-    app::{App, AppProps},
+    app::{HeadWriter, StaticApp, StaticAppProps},
     pages::Route,
 };
+
 use yew::ServerRenderer;
 use yew_router::Routable;
 
 struct Template {
     content: String,
-    index: usize,
+    head_index: usize,
+    body_index: usize,
 }
 
 impl Template {
@@ -17,19 +19,30 @@ impl Template {
         println!("Loading template from: {:?}", path.as_ref());
         let content = tokio::fs::read_to_string(path).await?;
 
-        let Some(index) = content.find("</body>") else {
+        let Some(head_index) = content.find("</head>") else {
+            eprintln!("error: Failed to find index of '</head>' close tag in 'dist/index.html'");
+            return Err(std::io::Error::new(std::io::ErrorKind::Other, "Malformed index.html"));
+        };
+
+        let Some(body_index) = content.find("</body>") else {
             eprintln!("error: Failed to find index of '</body>' close tag in 'dist/index.html'");
             return Err(std::io::Error::new(std::io::ErrorKind::Other, "Malformed index.html"));
         };
 
-        Ok(Self { content, index })
+        Ok(Self {
+            content,
+            head_index,
+            body_index,
+        })
     }
 
-    async fn render(&self, app: ServerRenderer<App>) -> String {
+    async fn render(&self, head: String, body: String) -> String {
         let mut result = String::with_capacity(self.content.len());
-        result.push_str(&self.content[..self.index]);
-        app.render_to_string(&mut result).await;
-        result.push_str(&self.content[self.index..]);
+        result.push_str(&self.content[..self.head_index]);
+        result.push_str(&head);
+        result.push_str(&self.content[self.head_index..self.body_index]);
+        result.push_str(&body);
+        result.push_str(&self.content[self.body_index..]);
         result
     }
 }
@@ -63,8 +76,17 @@ impl Env {
     }
 
     async fn render_route(&self, url: String) -> String {
-        let render = ServerRenderer::<App>::with_props(move || AppProps { url });
-        self.template.render(render).await
+        let head = HeadWriter::default();
+
+        let render = {
+            let head = head.clone();
+            ServerRenderer::<StaticApp>::with_props(move || StaticAppProps { url, head })
+        };
+
+        let mut body = String::new();
+        render.render_to_string(&mut body).await;
+
+        self.template.render(head.take(), body).await
     }
 
     async fn write_str<P: AsRef<Path>>(&self, path: P, s: &str) -> std::io::Result<()> {

src/components/seo.rs

@@ -1,21 +1,30 @@
 use time::{format_description::well_known::Rfc3339, OffsetDateTime};
-use yew::{function_component, html, use_context, use_memo, Children, Html, Properties};
+use yew::{function_component, html, use_context, use_memo, Html, Properties};
 use yew_router::Routable;
 
 use crate::{components::head::Head, model::TagsContext, pages::Route};
 
 #[derive(Properties, PartialEq)]
 pub struct LdJsonProps {
-    #[prop_or_default]
-    pub children: Children,
+    pub json: String,
 }
 
 #[function_component(LdJson)]
 pub fn ld_json(props: &LdJsonProps) -> Html {
+    #[cfg(feature = "static")]
+    {
+        let head = use_context::<crate::app::HeadWriter>().expect("HeadContext to be provided");
+        write!(
+            head,
+            "<script type=\"application/ld+json\">{}</script>",
+            props.json
+        );
+    }
+
     html! {
         <Head>
             <script type="application/ld+json">
-                {props.children.clone()}
+                {props.json.clone()}
             </script>
         </Head>
     }
@@ -65,9 +74,29 @@ pub fn web_page_seo(props: &WebPageSeoProps) -> Html {
         "noindex,nofollow"
     };
 
+    #[cfg(feature = "static")]
+    {
+        let head = use_context::<crate::app::HeadWriter>().expect("HeadContext to be provided");
+        write!(head, "<meta name=\"robots\" content=\"{robots}\">");
+        write!(
+            head,
+            "<meta property=\"og:title\" content=\"{}\">",
+            props.title
+        );
+        write!(head, "<meta property=\"og:url\" content=\"{url}\">");
+
+        if let Some(excerpt) = &props.excerpt {
+            write!(head, "<meta name=\"description\" content=\"{excerpt}\">");
+            write!(
+                head,
+                "<meta property=\"org:description\" content=\"{excerpt}\">"
+            );
+        }
+    }
+
     html! {
         <>
-            <LdJson>{json}</LdJson>
+            <LdJson json={(*json).clone()} />
             <Head>
                 <meta name="robots" content={robots} />
 
@@ -167,9 +196,57 @@ pub fn blog_post_seo(props: &BlogPostSeoProps) -> Html {
         ),
     );
 
+    #[cfg(feature = "static")]
+    {
+        let head = use_context::<crate::app::HeadWriter>().expect("HeadWriter to be provided");
+
+        if let Some(excerpt) = &props.excerpt {
+            write!(head, "<meta name=\"description\" content=\"{excerpt}\">");
+            write!(
+                head,
+                "<meta property=\"og:description\" content=\"{excerpt}\">"
+            );
+        }
+
+        write!(head, "<meta property=\"og:type\" content=\"article\">");
+        write!(
+            head,
+            "<meta property=\"og:title\" content=\"{}\">",
+            props.title
+        );
+        write!(head, "<meta property=\"og:url\" content=\"{url}\">");
+
+        if let Some(published) = &published {
+            write!(
+                head,
+                "<meta property=\"article:published_time\" content=\"{published}\">"
+            );
+        }
+
+        write!(
+            head,
+            "<meta property=\"article:author\" content=\"Blake Rain\">"
+        );
+
+        if let Some(image) = &image {
+            write!(head, "<meta property=\"og:image\" content=\"{image}\" />");
+            write!(
+                head,
+                "<meta property=\"og:image:alt\" content=\"{}\" />",
+                props.title
+            );
+        }
+
+        for tag in tags.iter() {
+            write!(head, "<meta property=\"article:tag\" content=\"{tag}\">");
+        }
+
+        write!(head, "<link rel=\"canonical\" href=\"{url}\">");
+    }
+
     html! {
         <>
-            <LdJson>{json}</LdJson>
+            <LdJson json={(*json).clone()} />
             <Head>
                 if let Some(excerpt) = &props.excerpt {
                     <>

src/components/title.rs

@@ -1,4 +1,6 @@
-use yew::{function_component, html, use_effect_with_deps, Html, Properties};
+use yew::{function_component, html, Html, Properties};
+
+use crate::components::head::Head;
 
 #[derive(Properties, PartialEq)]
 pub struct TitleProps {
@@ -7,20 +9,15 @@ pub struct TitleProps {
 
 #[function_component(Title)]
 pub fn title(props: &TitleProps) -> Html {
-    let title = props.title.clone();
-
-    use_effect_with_deps(
-        move |_| {
-            let head_el = gloo::utils::head();
-            let title_el = head_el
-                .query_selector("title")
-                .expect("query_selector")
-                .expect("title");
-
-            title_el.set_text_content(Some(&title));
-        },
-        props.title.clone(),
-    );
-
-    html! {}
+    #[cfg(feature = "static")]
+    {
+        let head = yew::use_context::<crate::app::HeadWriter>().expect("HeadWriter to be provided");
+        write!(head, "<title>{}</title>", props.title);
+    }
+
+    html! {
+        <Head>
+            <title>{props.title.clone()}</title>
+        </Head>
+    }
 }

src/model.rs

@@ -1,5 +1,3 @@
-// pub mod source;
-
 use std::{collections::HashMap, rc::Rc};
 
 use model::{document::Details, tag::Tag};

src/pages/about.rs

@@ -1,11 +1,12 @@
 use yew::{function_component, html, Html};
 
 use crate::{
-    components::{content::PostContent, title::Title},
+    components::{content::PostContent, seo::WebPageSeo, title::Title},
     model::{
         pages::{render, DocId},
         ProvideTags,
     },
+    pages::Route,
 };
 
 #[function_component(Page)]
@@ -17,6 +18,12 @@ pub fn page() -> Html {
     html! {
         <ProvideTags>
             <Title title={details.summary.title.clone()} />
+            <WebPageSeo
+                route={Route::About}
+                title={details.summary.title.clone()}
+                excerpt={details.summary.excerpt.clone()}
+                index={true}
+                follow={true} />
             <PostContent<DocId> details={details.clone()} content={content} />
         </ProvideTags>
     }

src/pages/disclaimer.rs

@@ -1,11 +1,12 @@
 use yew::{function_component, html, Html};
 
 use crate::{
-    components::{content::PostContent, title::Title},
+    components::{content::PostContent, seo::WebPageSeo, title::Title},
     model::{
         pages::{render, DocId},
         ProvideTags,
     },
+    pages::Route,
 };
 
 #[function_component(Page)]
@@ -17,6 +18,12 @@ pub fn page() -> Html {
     html! {
         <ProvideTags>
             <Title title={details.summary.title.clone()} />
+            <WebPageSeo
+                route={Route::About}
+                title={details.summary.title.clone()}
+                excerpt={details.summary.excerpt.clone()}
+                index={false}
+                follow={false} />
             <PostContent<DocId> details={details} content={content} />
         </ProvideTags>
     }