Open-Graph-meta (#44)

brewpipeline · Nov 18, 2023 · 3b2eb25 · 3b2eb25
1 parent 488a73e
commit 3b2eb25
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -6,16 +6,25 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#cfe2ff">
     <meta name="apple-mobile-web-app-status-bar-style" content="#cfe2ff">
+    <meta property="og:locale" content="ru">
+    <meta name="copyright" content="tikitko.su">
+
     <title></title>
     <meta name="description" content="">
     <meta name="keywords" content="">
     <meta name="robots" content="">
-    <meta name="copyright" content="tikitko.su" />
+
+    <meta property="og:title" content="">
+    <meta property="og:description" content="">
+    <meta property="og:type" content="">
+    <meta property="og:image" content="">
+    <meta property="og:site_name" content="">
+
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
 
-    <base data-trunk-public-url />
-    <link data-trunk rel="css" href="index.css" />
-    <link data-trunk rel="rust" />
+    <base data-trunk-public-url>
+    <link data-trunk rel="css" href="index.css">
+    <link data-trunk rel="rust">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/components/meta.rs b/src/components/meta.rs
@@ -5,24 +5,31 @@ use crate::utils::head::*;
 
 #[derive(PartialEq, Properties, Clone)]
 pub struct MetaProps {
+    #[prop_or_default]
+    pub r#type: String,
     #[prop_or_default]
     pub title: String,
     #[prop_or_default]
     pub description: String,
     #[prop_or_default]
     pub keywords: String,
     #[prop_or_default]
+    pub image: String,
+    #[prop_or_default]
     pub noindex: bool,
 }
 
 #[function_component(Meta)]
 pub fn meta(props: &MetaProps) -> Html {
     let MetaProps {
+        r#type,
         title,
         description,
         keywords,
+        image,
         noindex,
     } = props.clone();
+    let r#type = r#type.none_if_empty().unwrap_or("website".to_owned());
     let title = title
         .none_if_empty()
         .map(|t| format!("{} - {}", t, crate::TITLE))
@@ -33,17 +40,28 @@ pub fn meta(props: &MetaProps) -> Html {
     let keywords = keywords
         .none_if_empty()
         .unwrap_or(crate::KEYWORDS.to_owned());
-    let robots = if noindex { "noindex" } else { "all" }.to_string();
+    let robots = if noindex { "noindex" } else { "all" }.to_owned();
+    set_meta(MetaTag::OpenGraph(OpenGraph::Type), &r#type);
     set_title(&title);
+    set_meta(MetaTag::OpenGraph(OpenGraph::Title), &title);
     set_meta(MetaTag::Description, &description);
+    set_meta(MetaTag::OpenGraph(OpenGraph::Description), &description);
     set_meta(MetaTag::Keywords, &keywords);
+    set_meta(MetaTag::OpenGraph(OpenGraph::Image), &image);
     set_meta(MetaTag::Robots, &robots);
+    set_meta(
+        MetaTag::OpenGraph(OpenGraph::SiteName),
+        &crate::TITLE.to_owned(),
+    );
     html! {
         <>
-            <script data-page-content="title" type="text/plain"> { title } </script>
+            <script data-page-content="type" type="text/plain"> { r#type } </script>
+            <script data-page-content="title" type="text/plain"> { title.clone() } </script>
             <script data-page-content="description" type="text/plain"> { description } </script>
             <script data-page-content="keywords" type="text/plain"> { keywords } </script>
+            <script data-page-content="image" type="text/plain"> { image } </script>
             <script data-page-content="robots" type="text/plain"> { robots } </script>
+            <script data-page-content="site_name" type="text/plain"> { crate::TITLE } </script>
         </>
     }
 }
diff --git a/src/pages/author.rs b/src/pages/author.rs
@@ -27,7 +27,11 @@ pub fn author(props: &AuthorProps) -> Html {
             component={ |author: Option<content::Author>| html! {
                 <>
                     if let Some(author) = &author {
-                        <Meta title={ format!("{} - Автор", author.slug.clone()) } />
+                        <Meta
+                            r#type="profile"
+                            title={ format!("{} - Автор", author.slug.clone()) }
+                            image={ author.image_url.clone().unwrap_or_default() }
+                        />
                     } else {
                         <Meta title="Автор" noindex=true />
                     }

diff --git a/src/pages/post.rs b/src/pages/post.rs
@@ -44,9 +44,11 @@ pub fn post(props: &PostProps) -> Html {
                     <>
                         if let Some(post) = post.as_ref() {
                             <Meta
+                                r#type="article"
                                 title={ format!("{} - Публикация", post.title.clone()) }
                                 description={ post.summary.clone() }
                                 keywords={ post.joined_tags_string(", ") }
+                                image={ post.image_url.clone().unwrap_or_default() }
                             />
                         } else {
                             <Meta title="Публикация" noindex=true />

diff --git a/src/utils/head.rs b/src/utils/head.rs
@@ -10,18 +10,50 @@ pub fn html_document() -> HtmlDocument {
     document().unchecked_into::<HtmlDocument>()
 }
 
+#[derive(Clone, Copy)]
+pub enum OpenGraph {
+    Title,
+    Description,
+    Type,
+    Image,
+    SiteName,
+}
+
+impl std::fmt::Display for OpenGraph {
+    fn fmt(&self, f: &mut std::fmt::Formatter) -> std::fmt::Result {
+        match self {
+            OpenGraph::Title => write!(f, "og:title"),
+            OpenGraph::Description => write!(f, "og:description"),
+            OpenGraph::Type => write!(f, "og:type"),
+            OpenGraph::Image => write!(f, "og:image"),
+            OpenGraph::SiteName => write!(f, "og:site_name"),
+        }
+    }
+}
+
 #[derive(Clone, Copy)]
 pub enum MetaTag {
     Description,
     Keywords,
+    OpenGraph(OpenGraph),
     Robots,
 }
 
+impl MetaTag {
+    fn key(&self) -> &'static str {
+        match self {
+            MetaTag::Description | MetaTag::Keywords | MetaTag::Robots => "name",
+            MetaTag::OpenGraph(_) => "property",
+        }
+    }
+}
+
 impl std::fmt::Display for MetaTag {
     fn fmt(&self, f: &mut std::fmt::Formatter) -> std::fmt::Result {
         match self {
             MetaTag::Description => write!(f, "description"),
             MetaTag::Keywords => write!(f, "keywords"),
+            MetaTag::OpenGraph(open_graph) => open_graph.fmt(f),
             MetaTag::Robots => write!(f, "robots"),
         }
     }
@@ -30,7 +62,14 @@ impl std::fmt::Display for MetaTag {
 #[cfg(feature = "client")]
 fn meta_element(meta_type: MetaTag) -> Element {
     html_document()
-        .query_selector(format!("meta[name=\"{name}\"]", name = meta_type.to_string()).as_str())
+        .query_selector(
+            format!(
+                "meta[{key}=\"{value}\"]",
+                key = meta_type.key(),
+                value = meta_type.to_string()
+            )
+            .as_str(),
+        )
         .ok()
         .flatten()
         .unwrap()