Support Twitter Cards for the article page

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

config.toml

@@ -53,3 +53,7 @@ theme = "light"
 # google = "G-XXXXXXXXXX"
 # https://plausible.io
 # plausible = "data.domain"
+
+[twitter_card]
+enabled = false
+user_id = "@JmPotat0"

src/app.rs

@@ -87,6 +87,13 @@ impl AppState {
         env.add_filter("md_to_html", move |md_content: &str| {
             Self::md_to_html(&config_clone, md_content)
         });
+        env.add_filter("truncate_str", |value: &str, max_length: usize| {
+            if value.chars().count() > max_length {
+                value.chars().take(max_length).collect()
+            } else {
+                value.to_string()
+            }
+        });
         env.add_filter("to_lowercase", |value: &str| value.to_lowercase());
 
         Ok(Self { config, env, db })

src/config.rs

@@ -117,6 +117,26 @@ impl Object for Analytics {
     }
 }
 
+#[derive(Clone, Debug, Deserialize)]
+struct TwitterCard {
+    enabled: bool,
+    user_id: String,
+}
+
+impl Object for TwitterCard {
+    fn get_value(self: &Arc<Self>, key: &Value) -> Option<Value> {
+        match key.as_str()? {
+            "enabled" => Some(Value::from(self.enabled)),
+            "user_id" => Some(Value::from(self.user_id.clone())),
+            _ => None,
+        }
+    }
+
+    fn enumerate(self: &Arc<Self>) -> Enumerator {
+        Enumerator::Str(&["enabled", "user_id"])
+    }
+}
+
 #[derive(Clone, Debug, Deserialize)]
 pub struct Config {
     deploy: Deploy,
@@ -126,6 +146,7 @@ pub struct Config {
     mysql: MySQL,
     giscus: Giscus,
     analytics: Analytics,
+    twitter_card: TwitterCard,
 }
 
 impl Config {
@@ -223,6 +244,7 @@ impl Object for Config {
             "article_per_page" => Some(Value::from(self.style.article_per_page)),
             "giscus" => Some(Value::from_object(self.giscus.clone())),
             "analytics" => Some(Value::from_object(self.analytics.clone())),
+            "twitter_card" => Some(Value::from_object(self.twitter_card.clone())),
             _ => None,
         }
     }
@@ -236,6 +258,7 @@ impl Object for Config {
             "article_per_page",
             "giscus",
             "analytics",
+            "twitter_card",
         ])
     }
 }

templates/article.html

@@ -4,6 +4,13 @@
 
 {% block head %}
 <meta property="og:title" content="{{ article.title }}" />
+{% 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) }}">
+{% endif %}
 {% endblock %}
 
 {%block content %}

templates/layout.html

@@ -7,8 +7,8 @@
     <title>{{ config.blog_name }}{% block title %}{% endblock %}</title>
     <link rel="alternate" type="application/rss+xml" href="/feed" title="{{ config.blog_name }}" />
     <link rel="icon" href="/static/img/icon.png" />
-    <link rel="stylesheet" href="/static/css/style.css" type="text/css" />
     <link rel="stylesheet" href="/static/css/yue.css" type="text/css" />
+    <link rel="stylesheet" href="/static/css/style.css" type="text/css" />
     {% if config.analytics.google %}
     <!-- Google tag (gtag.js) -->
     <script async src='https://www.googletagmanager.com/gtag/js?id={{ config.analytics.google }}'></script>
@@ -44,7 +44,7 @@
         <footer id="footer">
             <div>
                 <a href="/admin">Admin</a>
-                 & 
+                &
                 <a href="/feed">RSS</a>
             </div>
             Powered by <a href="https://github.com/JmPotato/rsomhaP">rsomhaP</a>