Merge pull request #7 from DanielMSchmidt/redesign-ui

chore: redesign UI to be more appealing

Author: DanielMSchmidt

src/fetcher/base.rs

@@ -1,10 +1,22 @@
 use serde::{Deserialize, Serialize};
 
-#[derive(Deserialize, Debug, Clone, Serialize)]
+#[derive(Deserialize, Debug, Clone, Serialize, Eq, PartialEq,)]
 pub struct Shareable {
     pub id: String,
     pub title: String,
     pub date: String,
     pub url: String,
     pub source: String,
 }
+
+impl PartialOrd for Shareable {
+    fn partial_cmp(&self, other: &Self) -> Option<std::cmp::Ordering> {
+        Some(self.date.cmp(&other.date))
+    }
+}
+
+impl Ord for Shareable {
+    fn cmp(&self, other: &Self) -> std::cmp::Ordering {
+        self.date.cmp(&other.date)
+    }
+}

src/main.rs

@@ -8,6 +8,7 @@ use axum::{
     routing::get,
     Router,
 };
+
 use fetcher::base::Shareable;
 use mysql::prelude::*;
 use mysql::*;
@@ -102,14 +103,13 @@ async fn main() {
 #[derive(Template)]
 #[template(path = "base.html", escape = "none")]
 struct BaseTemplate {
-    content: String,
+    title: String,
 }
 
 #[derive(Template)]
 #[template(path = "index.html", escape = "none")]
 struct IndexTemplate {
-    twitter_items: String,
-    stackoverflow_items: String,
+    items: Vec<Shareable>,
 }
 
 #[derive(Template)]
@@ -158,49 +158,37 @@ async fn root(
             info!("Fetched {} items", shareables.len());
             debug!("Items: {:?}", shareables);
 
-            let twitter_items = shareables
-                .iter()
-                .filter(|shareable| shareable.source == "twitter")
-                .map(|shareable| {
-                    format!(
-                        "<li><a href=\"{}\">{}</a></li>",
-                        shareable.url, shareable.title
-                    )
-                })
-                .collect::<Vec<String>>()
-                .join("");
-
-            let stackoverflow_items = shareables
-                .iter()
-                .filter(|shareable| shareable.source == "stackoverflow")
-                .map(|shareable| {
-                    format!(
-                        "<li><a href=\"{}\">{}</a></li>",
-                        shareable.url,
-                        shareable
-                            .title
-                            .replace(":question:", "❓")
-                            .replace(":white_check_mark:", "✅")
-                            .replace(":waiting-spin:", "🔄")
-                    )
+            let mut sanitized_shareable = shareables
+                .into_iter()
+                .map(|item| Shareable {
+                    id: item.id,
+                    title: item
+                        .title
+                        .replace(":question:", "❓")
+                        .replace(":white_check_mark:", "✅")
+                        .replace(":waiting-spin:", "🔄"),
+                    date: item.date,
+                    url: item.url,
+                    source: item.source,
                 })
-                .collect::<Vec<String>>()
-                .join("");
-
-            let content = IndexTemplate {
-                twitter_items,
-                stackoverflow_items,
-            };
-            let str = content.render().expect("Could not render template");
-            HtmlTemplate(BaseTemplate { content: str })
+                .filter(|item| !item.title.contains("[Dependency Updated]"))
+                .collect::<Vec<Shareable>>();
+
+                sanitized_shareable.sort_by(|a, b| b.cmp(a));
+
+
+
+            HtmlTemplate(IndexTemplate {
+                items: sanitized_shareable,
+            })
+            .into_response()
         }
         Err(e) => {
             error!("Error loading data: {}", e);
-            let content = ErrorTemplate {
+            HtmlTemplate(ErrorTemplate {
                 message: format!("{}", e),
-            };
-            let str = content.render().expect("Could not render template");
-            HtmlTemplate(BaseTemplate { content: str })
+            })
+            .into_response()
         }
     }
 }

templates/base.html

@@ -1,3 +1,42 @@
-<body>
-  {{ content }}
-</body>
+<html>
+  <head>
+    <title>{% block title %}{{ title }}{% endblock %} - CDKTF News</title>
+    {% block head %}{% endblock %}
+    <style>
+      #content {
+        background-color: #f5f5f5;
+        padding: 0.5em;
+      }
+
+      .items {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+
+      .item {
+        border-radius: 0.5em;
+        color: black;
+        display: block;
+        font-size: 1.5em;
+        margin: 1em;
+        padding: 0.5em;
+        text-decoration: none;
+        width: 9em;
+        word-break: break-word;
+      }
+
+      .item-src-stackoverflow {
+        background-color: rgb(230, 134, 58);
+      }
+
+      .item-src-twitter {
+        background-color: rgb(72, 155, 233);
+        color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="content">{% block content %}{% endblock %}</div>
+  </body>
+</html>

templates/error.html

@@ -1,5 +1,7 @@
-<body>
-  <h1>An Error occured</h1>
+{% extends "base.html" %} {% block title %}Error{% endblock %} {% block head %}
+<style></style>
+{% endblock %} {% block content %}
+<h1>An Error occured</h1>
 
-  <p>{{ message }}</p>
-</body>
+<p>{{ message }}</p>
+{% endblock %}

templates/index.html

@@ -1,13 +1,8 @@
-<body>
-  <h1>All Items</h1>
-
-  <h2>Twitter</h2>
-  <ul>
-    {{ twitter_items }}
-  </ul>
-
-  <h2>StackOverflow</h2>
-  <ul>
-    {{ stackoverflow_items }}
-  </ul>
-</body>
+{% extends "base.html" %} {% block title %}All Items{% endblock %} {% block head
+%}
+<style></style>
+{% endblock %} {% block content %}
+<h1>All Items</h1>
+<div class="items">
+  {% for item in items %} {% include "item.html" %} {% endfor %} {% endblock %}
+</div>

templates/item.html

@@ -0,0 +1,3 @@
+<a href="{{ item.url }}" class="item item-src-{{ item.source }}">
+  {{ item.title }}
+</a>