Implement the article slugs support

Signed-off-by: JmPotato <github@ipotato.me>

Author: JmPotato

src/app.rs

@@ -115,6 +115,14 @@ impl AppState {
                 format!("{}/{}", value, uri)
             }
         });
+        env.add_filter("get_slug", |value: &Value| {
+            let slug = value.get_attr("slug").unwrap_or_default().to_string();
+            if slug.is_empty() {
+                value.get_attr("id").unwrap_or_default().to_string()
+            } else {
+                slug
+            }
+        });
 
         Ok(env)
     }
@@ -224,7 +232,7 @@ impl App {
             // serve the page handlers
             .route("/", get(handler_home))
             .route("/page/:num", get(handler_page))
-            .route("/article/:id", get(handler_article))
+            .route("/article/:id_or_slug", get(handler_article))
             .route("/articles", get(handler_articles))
             .route("/tag/:tag", get(handler_tag))
             .route("/tags", get(handler_tags))

src/handlers.rs

@@ -61,10 +61,16 @@ pub async fn handler_page(
 
 pub async fn handler_article(
     State(state): State<Arc<AppState>>,
-    Path(id): Path<i32>,
+    Path(id_or_slug): Path<String>,
     auth_session: AuthSession<AppState>,
 ) -> Result<Html<String>, StatusCode> {
-    if let Some(article) = Article::get_by_id(&state.db, id).await {
+    if let Some(article) = if let Ok(id) = id_or_slug.parse::<i32>() {
+        info!("try to get article by id: {}", id);
+        Article::get_by_id(&state.db, id).await
+    } else {
+        info!("try to get article by slug: {}", id_or_slug);
+        Article::get_by_slug(&state.db, &id_or_slug).await
+    } {
         return Ok(render_template_with_context!(
             state,
             "article.html",

src/models/articles.rs

@@ -14,6 +14,7 @@ use crate::{
 #[derive(FromRow, Serialize, Deserialize, Default)]
 pub struct Article {
     id: Option<i32>,
+    slug: String,
     title: String,
     pub content: String,
     pub tags: String,
@@ -22,6 +23,7 @@ pub struct Article {
 }
 
 impl Article {
+    // TODO: refine the error result handling.
     pub async fn get_all(db: &sqlx::MySqlPool) -> Vec<Self> {
         sqlx::query_as("SELECT * FROM articles ORDER BY id DESC")
             .fetch_all(db)
@@ -53,9 +55,17 @@ impl Article {
             .ok()
     }
 
+    pub async fn get_by_slug(db: &sqlx::MySqlPool, slug: &str) -> Option<Self> {
+        sqlx::query_as("SELECT * FROM articles WHERE slug = ?")
+            .bind(slug)
+            .fetch_one(db)
+            .await
+            .ok()
+    }
+
     pub async fn get_by_tag(db: &sqlx::MySqlPool, tag: &str) -> Vec<Self> {
         sqlx::query_as(
-            "SELECT a.id, a.title, a.content, a.tags, a.created_at, a.updated_at
+            "SELECT a.id, a.slug, a.title, a.content, a.tags, a.created_at, a.updated_at
              FROM articles AS a
              INNER JOIN tags AS t ON a.id = t.article_id
              WHERE t.name = ?
@@ -103,9 +113,12 @@ impl Display for Article {
 #[async_trait]
 impl Editable for Article {
     fn get_redirect_url(&self) -> String {
-        match self.id {
-            Some(id) => format!("/article/{}", id),
-            None => "/".to_string(),
+        if !self.slug.is_empty() {
+            format!("/article/{}", self.slug)
+        } else if let Some(id) = self.id {
+            format!("/article/{}", id)
+        } else {
+            "/".to_string()
         }
     }
 
@@ -119,8 +132,9 @@ impl Editable for Article {
 
         // update the articles table
         sqlx::query(
-            "UPDATE articles SET title = ?, content = ?, tags = ?, updated_at = NOW() WHERE id = ?",
+            "UPDATE articles SET slug = ?, title = ?, content = ?, tags = ?, updated_at = NOW() WHERE id = ?",
         )
+        .bind(&self.slug)
         .bind(&self.title)
         .bind(&self.content)
         .bind(&self.tags)
@@ -189,9 +203,23 @@ impl Editable for Article {
 
 impl From<EditorForm> for Article {
     fn from(from: EditorForm) -> Self {
+        // Normalize the slug by replacing the whitespace with hyphen.
+        let slug = from
+            .slug
+            .unwrap_or_default()
+            .trim()
+            .chars()
+            .map(|c| {
+                if c.is_whitespace() {
+                    '-'
+                } else {
+                    c.to_ascii_lowercase()
+                }
+            })
+            .collect();
         Article {
             id: from.id,
-            // trim the title and tags to remove leading and trailing whitespace and commas
+            slug,
             title: from.title.unwrap_or_default().trim().to_string(),
             tags: sort_out_tags(&from.tags.unwrap_or_default()),
             content: from.content.unwrap_or_default(),

src/models/mod.rs

@@ -11,11 +11,13 @@ use crate::Error;
 const CREATE_TABLE_ARTICLES_SQL: &str = r#"
 CREATE TABLE IF NOT EXISTS articles (
     id INT AUTO_INCREMENT PRIMARY KEY,
+    slug VARCHAR(255) NOT NULL,
     title TEXT NOT NULL,
     content TEXT NOT NULL,
     tags VARCHAR(255) NOT NULL,
     created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    INDEX(slug)
 ) CHARSET = utf8mb4;
 "#;
 

src/utils.rs

@@ -67,6 +67,7 @@ pub struct EditorPath {
 #[derive(Deserialize)]
 pub struct EditorForm {
     pub id: Option<i32>,
+    pub slug: Option<String>,
     pub title: Option<String>,
     pub tags: Option<String>,
     pub content: Option<String>,

static/css/style.css

@@ -85,7 +85,7 @@ samp {
 }
 
 q {
-  quotes: "\201C""\201D""\2018""\2019";
+  quotes: "\201C" "\201D" "\2018" "\2019";
 }
 
 small {
@@ -353,7 +353,7 @@ table {
   text-align: center;
 }
 
-#content .post > .date {
+#content .post>.date {
   text-align: center;
 }
 
@@ -399,6 +399,10 @@ table {
   text-align: center;
 }
 
+#article_editor input {
+  width: 100%;
+}
+
 #footer {
   color: gray;
   font-size: 0.8em;
@@ -411,4 +415,4 @@ table {
 
 #footer a {
   color: gray;
-}
+}

templates/admin.html

@@ -60,7 +60,7 @@ <h1 id="title">Admin Panel</h1>
                     {% for article in articles %}
                     <tr>
                         <td>{{ article.id }}</td>
-                        <td><a href="/article/{{ article.id }}">{{ article.title }}</a></td>
+                        <td><a href="/article/{{ article | get_slug }}">{{ article.title }}</a></td>
                         <td>{{ article.created_at }}</td>
                         <td>{{ article.updated_at }}</td>
                         <td>

templates/articles.html

@@ -9,7 +9,7 @@ <h2>{{ year }}</h2>
     {% for article in articles_by_year[year] %}
     <li>
         <span class="meta">{{ article.created_at[:10] }}</span>
-        <a href="/article/{{ article.id }}">{{ article.title }}</a>
+        <a href="/article/{{ article | get_slug }}">{{ article.title }}</a>
     </li>
     {% endfor %}
 </ol>

templates/editor.html

@@ -24,6 +24,10 @@ <h1 id="title">Editor</h1>
                 <input id="article_title" name="title" type="text" style="width:100%;" value="{{ article.title }}">
             </div>
             {% if not is_page %}
+            <div class="input">
+                <label for="slug">Slug</label>
+                <input id="slug" name="slug" type="text" style="width:100%;" value="{{ article.slug }}">
+            </div>
             <div class="input">
                 <label for="tags">Tags</label>
                 <input id="tags" name="tags" type="text" style="width:100%;" value="{{ article.tags }}">

templates/feed.xml

@@ -15,10 +15,10 @@
             <name>{{ config.blog_author }}</name>
             <uri>{{ config.blog_url }}</uri>
         </author>
-        <link href="{{ config.blog_url | concat_url('article') }}/{{ article.id }}"/>
+        <link href="{{ config.blog_url | concat_url('article') }}/{{ article | get_slug }}"/>
         <published>{{ article.created_at }}</published>
         <updated>{{ article.updated_at }}</updated>
-        <id>{{ config.blog_url | concat_url('article') }}/{{ article.id }}</id>
+        <id>{{ config.blog_url | concat_url('article') }}/{{ article | get_slug }}</id>
         <content type="html">
             <![CDATA[{% autoescape false %}{{ article.content | md_to_html }}{% endautoescape %}]]>
         </content>