Add og:image to the article page

Signed-off-by: JmPotato <[email protected]>

Cargo.toml

@@ -10,6 +10,8 @@ chrono = { version = "0.4", features = ["serde"] }
 comrak = { version = "0.27", features = ["syntect"] }
 minijinja = { version = "2.1", features = ["loader"] }
 password-auth = "1.0.0"
+rand = "0.8"
+regex = "1.10"
 serde = { version = "1.0", features = ["derive"] }
 sqlx = { version = "0.8", features = [
     "runtime-tokio",

src/handlers.rs

@@ -10,6 +10,8 @@ use axum::{
 use axum_login::AuthSession;
 use chrono::Datelike;
 use minijinja::context;
+use rand::{thread_rng, Rng};
+use regex::Regex;
 use serde::Deserialize;
 use tracing::error;
 
@@ -71,6 +73,19 @@ pub async fn handler_article(
                             .split(',')
                             .map(|s| s.trim().to_string())
                             .collect::<Vec<String>>(),
+                        image => {
+                            // find all image URLs in the article markdown content and choose one randomly.
+                            let re = Regex::new(r"\!\[.*?\]\((.*?)\)").unwrap();
+                            let mut image_urls: Vec<String> = vec![];
+                            for (_, [image_url]) in re.captures_iter(&article.content).map(|c| c.extract()) {
+                                image_urls.push(image_url.to_string());
+                            }
+                            if image_urls.is_empty() {
+                                None
+                            } else {
+                                Some(image_urls[thread_rng().gen_range(0..image_urls.len())].clone())
+                            }
+                        },
                         logged_in => auth_session.user.is_some(),
                     },
                 )

src/models/articles.rs

@@ -7,7 +7,7 @@ use tracing::info;
 pub struct Article {
     pub id: i32,
     title: String,
-    content: String,
+    pub content: String,
     pub tags: String,
     pub created_at: NaiveDateTime,
     updated_at: NaiveDateTime,

templates/article.html

@@ -4,12 +4,15 @@
 
 {% block head %}
 <meta property="og:title" content="{{ article.title }}" />
+<meta property="og:description" content="{{ article.content | truncate_str(200) }}" />
+<meta property="og:image" content="{{ image }}" />
 {% if config.twitter_card.enabled %}
 <meta name="twitter:card" content="summary">
 <meta name="twitter:creator" content="{{ config.blog_author }}">
 <meta name="twitter:creator:id" content="{{ config.twitter_card.user_id }}">
 <meta name="twitter:title" content="{{ article.title | truncate_str(70) }}">
 <meta name="twitter:description" content="{{ article.content | truncate_str(200) }}">
+<meta name="twitter:image" content="{{ image }}">
 {% endif %}
 {% endblock %}