fix: add missing styles

Cargo.toml

@@ -4,7 +4,6 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-anyhow = "1.0.75"
 askama = { version = "0.12", features = ["with-axum"] }
 askama_axum = "0.3.0"
 axum = "0.6.18"

assets/main.css

@@ -2,3 +2,107 @@ body {
   background-color: darkslategrey;
   color: whitesmoke;
 }
+
+.card__container {
+  background-color: white;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  color: #1c1c1c;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+  transition: all 0.1s ease-in-out;
+  max-width: 380px;
+  width: 380px;
+  min-height: 175px;
+  margin: 10px;
+  overflow: hidden;
+
+  &:hover,
+  &:active {
+    transform: translateY(-2px);
+    // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.26);
+    filter: drop-shadow(0 0 1em #746CC0CC);
+  }
+
+  > a {
+    color: inherit;
+    text-decoration: none;
+    font-weight: inherit;
+    height: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: stretch;
+
+    > header {
+      padding: 20px;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: flex-start;
+
+      > h2 {
+        color: #1c1c1c;
+        margin: 0;
+        text-align: left;
+        font-weight: normal;
+        font-size: 20px;
+
+        > em {
+          font-weight: bold;
+        }
+      }
+
+      > img {
+        max-width: 60px;
+        height: auto;
+      }
+    }
+
+    > footer {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 20px;
+      color: #1c1c1c;
+      margin-top: auto;
+
+      > section {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        padding: 0 20px;
+        box-sizing: border-box;
+
+        &:first-of-type {
+          flex: 1;
+        }
+
+        > div {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          margin-right: 8px;
+          font-size: 16px;
+
+          > span {
+            &:first-of-type {
+              margin-right: 4px;
+              color: #868fa9;
+            }
+            &:last-of-type {
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/main.rs

@@ -1,6 +1,5 @@
 use std::{collections::HashMap, path::PathBuf};
 
-use anyhow::{Error, Result};
 use askama::Template;
 use axum::{
     extract::Path,
@@ -32,6 +31,20 @@ struct HelloTemplate<'a> {
     name: &'a str,
 }
 
+#[derive(Template)]
+#[template(path = "error.html")]
+struct ErrorTemplate {
+    code: StatusCode,
+    message: String,
+}
+
+#[derive(Template)]
+#[template(path = "repo.html")]
+struct RepoTemplate {
+    name: String,
+    owner: String,
+}
+
 struct HtmlTemplate<T>(T);
 
 impl<T> IntoResponse for HtmlTemplate<T>
@@ -50,28 +63,6 @@ where
     }
 }
 
-struct AppError(anyhow::Error);
-
-// Tell axum how to convert `AppError` into a response.
-impl IntoResponse for AppError {
-    fn into_response(self) -> Response {
-        (
-            StatusCode::INTERNAL_SERVER_ERROR,
-            format!("Something went wrong: {}", self.0),
-        )
-            .into_response()
-    }
-}
-
-impl<E> From<E> for AppError
-where
-    E: Into<anyhow::Error>,
-{
-    fn from(err: E) -> Self {
-        Self(err.into())
-    }
-}
-
 async fn hello_world() -> impl IntoResponse {
     let template = HelloTemplate { name: "world" };
     HtmlTemplate(template)
@@ -81,7 +72,7 @@ async fn hello_from_the_server() -> &'static str {
     "Hello!"
 }
 
-async fn get_repository_languages(url: Url) -> Result<HashMap<String, u64>, AppError> {
+async fn get_repository_languages(url: Url) -> Result<HashMap<String, u64>, (StatusCode, String)> {
     let response = Client::new()
         .get(url)
         .header("User-Agent", "repos-toolbox-api")
@@ -94,30 +85,38 @@ async fn get_repository_languages(url: Url) -> Result<HashMap<String, u64>, AppE
             "Error fetching language data. Status code: {}",
             response.status()
         );
-        return Err(Error::msg(error_message));
+        return Err((StatusCode::INTERNAL_SERVER_ERROR, error_message));
     }
 
-    let response_text = response.text().await.map_err(|e| Error::msg(e))?;
+    let response_text = response
+        .text()
+        .await
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
 
-    let languages: HashMap<String, u64> =
-        serde_json::from_str(&response_text).map_err(|e| Error::msg(e))?;
+    let languages: HashMap<String, u64> = serde_json::from_str(&response_text)
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
 
     Ok(languages)
 }
 
 async fn get_repository(
     Path((owner, repo)): Path<(String, String)>,
-) -> Result<RepoResponse, Error> {
-    let repo = octocrab::instance()
+) -> Result<impl IntoResponse, (StatusCode, String)> {
+    let response = octocrab::instance()
         .repos(owner, repo)
         .get()
         .await
-        .map_err(|e| Error::msg(e))?;
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
 
-    let url = repo.clone().languages_url.unwrap();
-    let languages: HashMap<String, u64> = get_repository_languages(url).await?;
+    let repo = response.clone();
+    // let url = response.clone().languages_url.unwrap();
+    // let languages: HashMap<String, u64> = get_repository_languages(url).await?;
+    let template = RepoTemplate {
+        name: repo.name,
+        owner: "piny4man".to_string(),
+    };
 
-    Ok(RepoResponse { repo, languages })
+    Ok(HtmlTemplate(template))
 }
 
 #[shuttle_runtime::main]

templates/error.html

@@ -0,0 +1,6 @@
+{% extends "base.html" %}
+
+{% block content %}
+<h1>{{ code }}</h1>
+<h2>{{ message }}</h2>
+{% endblock %}

templates/repo.html

@@ -0,0 +1,69 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="card__container">
+  <a href="/" target="_blank" rel="noopener noreferrer">
+    <header>
+      <h2>
+        {{ owner }}/<br />
+        <strong>{{ name }}</strong>
+      </h2>
+    </header>
+  </a>
+</div>
+{% endblock %}
+
+
+<!-- interface IProps {
+repository: IRepository
+}
+
+const RepoCard: FC<IProps> = ({ repository }) => {
+  return (
+  <div className={styles.card__container}>
+    <a href={repository.html_url} target='_blank' rel=" noreferrer">
+      <header>
+        <h2>
+          {repository.owner.login}/<br />
+          <strong>{repository.name}</strong>
+        </h2>
+        <img src={repository.owner.avatar_url} alt={repository.owner?.login ?? 'Owner' } loading='lazy' />
+      </header>
+      <footer>
+        <section>
+          {!!repository.open_issues && (
+          <div>
+            <Icon icon='issue-small' />
+            <span>{repository.open_issues}</span>
+          </div>
+          )}
+          {!!repository.stargazers_count && (
+          <div>
+            <Icon icon='star-small' />
+            <span>{repository.stargazers_count}</span>
+          </div>
+          )}
+          {!!repository.watchers_count && (
+          <div>
+            <Icon icon='eye-small' />
+            <span>{repository.watchers_count}</span>
+          </div>
+          )}
+          {!!repository.forks_count && (
+          <div>
+            <Icon icon='fork-small' />
+            <span>{repository.forks_count}</span>
+          </div>
+          )}
+        </section>
+        <section>
+          <Icon icon='github' />
+        </section>
+      </footer>
+      <LanguagesBadge languages={repository.languages} />
+  </a>
+</div>
+)
+}
+
+export default RepoCard -->