improve skweet widget, namely time formatting

Cargo.lock

@@ -260,6 +260,15 @@ dependencies = [
  "winapi 0.3.9",
 ]
 
+[[package]]
+name = "chrono-humanize"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32dce1ea1988dbdf9f9815ff11425828523bd2a134ec0805d2ac8af26ee6096e"
+dependencies = [
+ "chrono",
+]
+
 [[package]]
 name = "chrono-tz"
 version = "0.6.3"
@@ -316,7 +325,7 @@ dependencies = [
  "rand",
  "sha2",
  "subtle",
- "time 0.3.19",
+ "time 0.3.22",
  "version_check",
 ]
 
@@ -1194,7 +1203,7 @@ dependencies = [
  "static_assertions",
  "tap-reader",
  "thiserror",
- "time 0.3.19",
+ "time 0.3.22",
  "tokio",
  "tokio-util",
  "url",
@@ -1212,7 +1221,7 @@ dependencies = [
  "serde",
  "static_assertions",
  "thiserror",
- "time 0.3.19",
+ "time 0.3.22",
 ]
 
 [[package]]
@@ -1904,7 +1913,7 @@ dependencies = [
  "serde_json",
  "state",
  "tempfile",
- "time 0.3.19",
+ "time 0.3.22",
  "tokio",
  "tokio-stream",
  "tokio-util",
@@ -1964,7 +1973,7 @@ dependencies = [
  "smallvec",
  "stable-pattern",
  "state",
- "time 0.3.19",
+ "time 0.3.22",
  "tokio",
  "uncased",
 ]
@@ -2152,6 +2161,7 @@ name = "site"
 version = "0.1.0"
 dependencies = [
  "chrono",
+ "chrono-humanize",
  "listenbrainz",
  "mastodon-async",
  "reqwest",
@@ -2159,6 +2169,7 @@ dependencies = [
  "rocket_dyn_templates",
  "serde",
  "serde_json",
+ "time 0.3.22",
  "tokio",
 ]
 
@@ -2361,9 +2372,9 @@ dependencies = [
 
 [[package]]
 name = "time"
-version = "0.3.19"
+version = "0.3.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "53250a3b3fed8ff8fd988587d8925d26a83ac3845d9e03b220b37f34c2b8d6c2"
+checksum = "ea9e1b3cf1243ae005d9e74085d4d542f3125458f3a81af210d901dcd7411efd"
 dependencies = [
  "itoa",
  "serde",
@@ -2373,15 +2384,15 @@ dependencies = [
 
 [[package]]
 name = "time-core"
-version = "0.1.0"
+version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2e153e1f1acaef8acc537e68b44906d2db6436e2b35ac2c6b42640fff91f00fd"
+checksum = "7300fbefb4dadc1af235a9cef3737cea692a9d97e1b9cbcd4ebdae6f8868e6fb"
 
 [[package]]
 name = "time-macros"
-version = "0.2.7"
+version = "0.2.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a460aeb8de6dcb0f381e1ee05f1cd56fcf5a5f6eb8187ff3d8f0b11078d38b7c"
+checksum = "372950940a5f07bf38dbe211d7283c9e6d7327df53794992d293e534c733d09b"
 dependencies = [
  "time-core",
 ]

Cargo.toml

@@ -17,3 +17,5 @@ rocket_dyn_templates = { version = "0.1.0-rc.2", features = ["tera"] }
 listenbrainz = "0.7"
 chrono = "0.4.23"
 serde_json = "1.0.97"
+time = "0.3.22"
+chrono-humanize = "0.2.2"

src/skweets.rs

@@ -1,10 +1,65 @@
-use crate::error::BlossomError;
+use chrono::{offset::LocalResult, TimeZone, Utc};
+use chrono_humanize::{Accuracy, HumanTime, Tense};
 use mastodon_async::entities::status::Status;
 use mastodon_async::prelude::*;
+use serde::Serialize;
+use time::OffsetDateTime;
 
-pub async fn get_recents(client: &Mastodon) -> Result<Vec<Status>, BlossomError> {
+use crate::Result;
+
+#[derive(Serialize)]
+pub struct Skweet {
+    reblog: bool,
+    avatar: String,
+    username: String,
+    url: String,
+    time_since: String,
+    content: String,
+    media_attachments: Vec<Attachment>,
+}
+
+pub async fn get_recents(client: &Mastodon) -> Result<Vec<Skweet>> {
     Ok(client
         .statuses(&AccountId::new("cel"), Default::default())
         .await?
-        .initial_items)
+        .initial_items
+        .into_iter()
+        .map(|status| Skweet::from(status))
+        .collect())
+}
+
+impl From<Status> for Skweet {
+    fn from(value: Status) -> Self {
+        let url = value.url.unwrap_or_default();
+        fn time_since(time: OffsetDateTime) -> String {
+            let time =
+                if let LocalResult::Single(time) = Utc.timestamp_opt(time.unix_timestamp(), 0) {
+                    time
+                } else {
+                    return "oops".to_owned();
+                };
+            let duration = Utc::now() - time;
+            HumanTime::from(duration).to_text_en(Accuracy::Rough, Tense::Present)
+        }
+        match value.reblog {
+            Some(original) => Self {
+                reblog: true,
+                avatar: original.account.avatar,
+                username: original.account.acct,
+                url,
+                time_since: time_since(original.created_at),
+                content: value.content,
+                media_attachments: value.media_attachments,
+            },
+            None => Self {
+                reblog: false,
+                avatar: value.account.avatar,
+                username: value.account.acct,
+                url,
+                time_since: time_since(value.created_at),
+                content: value.content,
+                media_attachments: value.media_attachments,
+            },
+        }
+    }
 }

static/style.css

@@ -231,6 +231,9 @@ iframe {
   border-color: #bf42a0;
   background-color: #28446c;
   z-index: -1;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
 }
 
 #skinnyverse h5 {
@@ -247,10 +250,15 @@ iframe {
   color: #bf42a0;
 }
 
+.boosted-skweet>h4 {
+  margin: 0.25em 0;
+  font-family: 'Cherry Bomb';
+}
+
 .skweet {
   display: flex;
   gap: 2em;
-  margin: 2em 0;
+  margin: 0;
 }
 
 .skweet a {
@@ -284,6 +292,7 @@ iframe {
 .skweet-info {
   display: flex;
   justify-content: space-between;
+  gap: 1em;
 }
 
 .skweet-text {
@@ -291,17 +300,9 @@ iframe {
   margin-bottom: 0.8em;
 }
 
-.skweet-gallery {
+.skweet img,
-  display: flex;
+.skweet video {
-  max-width: 100%;
+  max-height: 80vh;
-  gap: 1em;
-}
-
-.skweet-gallery img,
-.skweet-gallery video {
-  border: 4px solid #bf42a0;
-  flex: 1 1 auto;
-  width: 10px;
 }
 
 /* contact page */

templates/base.html.tera

@@ -40,7 +40,7 @@
           <li><a class="{% block nav_girlblog %}{% endblock %}" style="font-family: Sligoil" href="/blog">girlblog</a></li>
           <li><a class="{% block nav_projects %}{% endblock %}" style="font-family: 'DeGerm LoCase';" href="/projects">projetos</a></li>
           <li><a class="{% block nav_sound %}{% endblock %}" style="font-family: 'kirieji'" href="/sound">音</a></li>
-          <li><a class="{% block nav_listens %}{% endblock %}" style="font-family: 'Almendra Display'" href="https://listenbrainz.org/celblossom">écoute</a></li>
+          <li><a class="{% block nav_listens %}{% endblock %}" style="font-family: 'Almendra Display'; font-weight: 900;" href="https://listenbrainz.org/celblossom">écoute</a></li>
           <li><a href="https://bimbo.video/a/cel" style="font-family: 'Mon Hugo In'">video</a></li>
           <li><a href="https://weirdstar.stream" style="font-family: id_kana018" >🔴ライブ</a></li>
           <li><a class="{% block nav_pix %}{% endblock %}" style="font-family: Minecraftia" href="/pix">pix</a></li>

templates/latestskweets.html.tera

@@ -3,23 +3,41 @@
   {% for skweet in skweets %}
   {% if not skweet.reblog %}
   <div class="skweet">
-    <img src="{{ skweet.account.avatar }}" class="profile">
+    <img src="{{ skweet.avatar }}" class="profile">
     <div class="skweet-content">
-      <div class="skweet-info"><h4>{{ skweet.account.username }}</h4><a href="{{ skweet.url }}" target="_blank" rel="noopener noreferrer"><h5>{{ skweet.created_at | date(format="%Y-%m-%d %H:%M") }}UTC</h5></a></div>
+      <div class="skweet-info"><h4>{{ skweet.username }}</h4><a href="{{ skweet.url }}" target="_blank" rel="noopener noreferrer"><h5>{{ skweet.time_since }} ago</h5></a></div>
       <div class="skweet-text">{{ skweet.content }}</div>
       {% if skweet.media_attachments[0] %}
-      <div class="skweet-gallery">
       {% for media_attachment in skweet.media_attachments %}
       {% if media_attachment.type == "image" %}
-        <img src="{{ media_attachment.url }}">
+      <a href="{{ media_attachment.url }}"><img src="{{ media_attachment.url }}"></a>
       {% elif media_attachment.type == "video" %}
       <video controls src="{{ media_attachment.url }}"></video>
       {% endif %}
       {% endfor %}
-      </div>
       {% endif %}
     </div>
   </div>
+  {% elif skweet.reblog %}
+  <div class="boosted-skweet">
+    <h4>boosted:</h4>
+      <div class="skweet">
+      <img src="{{ skweet.avatar }}" class="profile">
+      <div class="skweet-content">
+        <div class="skweet-info"><h4>{{ skweet.username }}</h4><a href="{{ skweet.url }}" target="_blank" rel="noopener noreferrer"><h5>{{ skweet.time_since }} ago</h5></a></div>
+        <div class="skweet-text">{{ skweet.content }}</div>
+        {% if skweet.media_attachments[0] %}
+        {% for media_attachment in skweet.media_attachments %}
+        {% if media_attachment.type == "image" %}
+        <a href="{{ media_attachment.url }}"><img src="{{ media_attachment.url }}"></a>
+        {% elif media_attachment.type == "video" %}
+        <video controls src="{{ media_attachment.url }}"></video>
+        {% endif %}
+        {% endfor %}
+        {% endif %}
+      </div>
+    </div>
+  </div>
   {% endif %}
   {% endfor %}
 </div>