Staging

.github/workflows/deploy.yml

@@ -149,4 +149,4 @@ jobs:
         run: |
           ssh -i ${{ secrets.SSH_PRIVATE_KEY_PATH }}/${{ secrets.SSH_PRIVATE_KEY_NAME }} ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} "\
           cd ${{ secrets.DEVBLOG_ROOT_PATH }} && \
-          docker-compose up -d --force-recreate"
+          docker compose up -d --force-recreate"

client/Cargo.toml

@@ -9,6 +9,7 @@ edition = "2021"
 chrono = { version = "0.4.33", features = ["serde"] }
 gloo = "0.11.0"
 gloo-net = "0.5.0"
+regex = "1.10.5"
 serde = "1.0.196"
 serde_json = "1.0.113"
 stylist = { version = "0.13.0", features = ["yew", "parser"] }

client/src/components/markdown.rs

@@ -1,37 +1,59 @@
-use stylist::Style;
+use regex::Regex;
 use yew::{function_component, html, Html, Properties};
 
 #[derive(Properties, PartialEq, Clone)]
 pub struct Props {
     pub content: String,
 }
 
-const STYLE: &str = include_str!("styles/markdown.css");
-
 #[function_component(Markdown)]
 pub fn markdown(props: &Props) -> Html {
-    let style = Style::new(STYLE).unwrap();
-
-    let html = props.content.lines().map(|line| match line {
-        l if l.starts_with("# ") => html! {<h1>{&l[1..]}</h1>},
-        l if l.starts_with("## ") => html! {<h2>{&l[2..]}</h2>},
-        l if l.starts_with("### ") => html! {<h3>{&l[3..]}</h3>},
-        l if l.starts_with("#### ") => html! {<h4>{&l[4..]}</h4>},
-        l if l.starts_with("```") => {
-            html! {<p><code lang="rust">{line.replace("```", "")}</code></p>}
+    let link_regex = Regex::new(r"\[([^\]]+)\]\((https?://[^\)]+)\)").unwrap();
+
+    let html = props.content.lines().map(|line| {
+        // replace markdown links with anchor tags
+        // eg: [thedevblog](https://thedevblog.net) -> <a href="https://thedevblog.net">thedevblog</a>
+        let mut line_html = vec![];
+        let mut last_pos = 0;
+        for chars in link_regex.captures_iter(line) {
+            let mat = chars.get(0).unwrap();
+            let before_match = &line[last_pos..mat.start()];
+            let link_text = &chars[1];
+            let link_url = &chars[2];
+
+            if !before_match.is_empty() {
+                line_html.push(html! {<>{before_match}</>});
+            }
+
+            line_html.push(html! {<a href={link_url.to_string()}>{link_text}</a>});
+            last_pos = mat.end();
+        }
+
+        if last_pos < line.len() {
+            line_html.push(html! {<>{&line[last_pos..]}</>});
+        }
+
+        let combined_html = html! { <>{for line_html}</> };
+
+        match line {
+            l if l.starts_with("# ") => html! {<h1>{&l[1..]}</h1>},
+            l if l.starts_with("## ") => html! {<h2>{&l[2..]}</h2>},
+            l if l.starts_with("### ") => html! {<h3>{&l[3..]}</h3>},
+            l if l.starts_with("#### ") => html! {<h4>{&l[4..]}</h4>},
+            l if l.starts_with("```") => {
+                html! {<p><code lang="rust">{line.replace("```", "")}</code></p>}
+            }
+            l if l.starts_with("---") => html! {<hr/>},
+            l if l.starts_with("___") => html! {<hr/>},
+            l if l.starts_with("-") => html! {<li>{&l[1..]}</li>},
+            l if l.is_empty() => html! {<br/>},
+            _ => html! {<p>{combined_html}</p>},
         }
-        l if l.starts_with("---") => html! {<hr/>},
-        l if l.starts_with("___") => html! {<hr/>},
-        l if l.starts_with("-") => html! {<li>{&l[1..]}</li>},
-        l if l.is_empty() => html! {<br/>},
-        _ => html! {<p>{line}</p>},
     });
 
     html! {
-        <div class={style}>
-            <div class="markdown">
-                {for html}
-            </div>
+        <div>
+            {for html}
         </div>
     }
 }