diff --git a/server/src/fetch/html.rs b/server/src/fetch/html.rs
index 9b6c2d0964640a157bca2a6a64cb0820238d8e4f..3e0309ff1c2ac1b17923922d2340ba6710e0f9d1 100644
--- a/server/src/fetch/html.rs
+++ b/server/src/fetch/html.rs
@@ -11,6 +11,9 @@ use crate::{
};
fn entity_panel(node: &NodeState) -> Markup {
+ if let Some(markup) = crate::render::reddit::entity_markup(node) {
+ return markup;
+ }
html! {
@if let Some(data) = &node.data {
div id="entity-panel" class="entity-card" {
diff --git a/server/src/html/mod.rs b/server/src/html/mod.rs
index e88cc43ddc9d8100f7994be6f5960ec4d8f22c55..3bf9fc7e92e50beed24e2c25106a77421038c90b 100644
--- a/server/src/html/mod.rs
+++ b/server/src/html/mod.rs
@@ -153,16 +153,21 @@ pub fn breadcrumb_path(item: &ItemId) -> Markup {
}
}
-fn rank_list(label: &str, items: &[RankedItem], start_rank: usize) -> Markup {
+fn rank_list(label: &str, items: &[RankedItem], start_rank: usize, tree: &GlobalTree) -> Markup {
html! {
@if !items.is_empty() {
h3 class="rank-heading muted small" { (label) }
ol class="rank-list" {
@for (i, r) in items.iter().enumerate() {
- li {
+ @let href = item_href(&r.item);
+ li class=(if crate::render::reddit::is_reddit_post(&r.item) { "reddit-post-row" } else { "" }) {
span class="rank-num" { (start_rank + i) ". " }
- a href=(item_href(&r.item)) {
- strong { (display_label(&r.item)) }
+ @if let Some(row) = crate::render::reddit::child_row_markup(tree, &r.item, &href) {
+ (row)
+ } @else {
+ a href=(href) {
+ strong { (display_label(&r.item)) }
+ }
}
span class="muted" {
" — "
@@ -196,9 +201,14 @@ fn unranked_list(label: &str, items: &[ItemId], tree: &GlobalTree) -> Markup {
h3 class="rank-heading muted small" { (label) }
ul class="rank-list unranked" {
@for it in items {
- li {
- a href=(item_href(it)) {
- strong { (child_label(tree, it)) }
+ @let href = item_href(it);
+ li class=(if crate::render::reddit::is_reddit_post(it) { "reddit-post-row" } else { "" }) {
+ @if let Some(row) = crate::render::reddit::child_row_markup(tree, it, &href) {
+ (row)
+ } @else {
+ a href=(href) {
+ strong { (child_label(tree, it)) }
+ }
}
}
}
@@ -253,7 +263,7 @@ pub fn ranking_panel(item: &ItemId, node: &NodeState, tree: &GlobalTree) -> Mark
} @else {
@for (gi, ranked) in ranked_groups.iter().enumerate() {
@let label = if multi { format!("Ranking group {}", gi + 1) } else { "Ranking".to_string() };
- (rank_list(&label, ranked, 1))
+ (rank_list(&label, ranked, 1, tree))
}
(unranked_list("Unranked", &unranked, tree))
}
diff --git a/server/src/lib.rs b/server/src/lib.rs
index 0677363e0ed21d244bfa065f7ec728549ddd9e50..da5f3ebecec1794b05a2a69cc78379551b2ad769 100644
--- a/server/src/lib.rs
+++ b/server/src/lib.rs
@@ -8,6 +8,7 @@ pub mod parser;
pub mod path_types;
pub mod ranking;
pub mod reddit;
+pub mod render;
pub mod reducer;
pub mod journal;
pub mod state;
diff --git a/server/src/reddit.rs b/server/src/reddit.rs
index 69d979bc7e4a1cb078f70114dc539bdc1986b574..1168ec2afc77c092514eec91b513bac301cbe225 100644
--- a/server/src/reddit.rs
+++ b/server/src/reddit.rs
@@ -608,6 +608,8 @@ fn parse_subreddit_about(v: &Value) -> Option {
author: None,
body_html,
thumb_url,
+ image_url: None,
+ link_url: None,
})
}
@@ -635,15 +637,64 @@ fn parse_post_listing(v: &Value) -> Option {
.and_then(|t| t.as_str())
.filter(|s| s.starts_with("http"))
.map(|s| s.to_string());
+ let image_url = reddit_post_image_url(child);
+ let link_url = reddit_post_link_url(child);
Some(crate::reducer::EntityData {
title,
author,
body_html,
thumb_url,
+ image_url,
+ link_url,
})
}
+fn reddit_post_link_url(data: &Value) -> Option {
+ for key in ["url_overridden_by_dest", "url"] {
+ if let Some(u) = data.get(key).and_then(|v| v.as_str()) {
+ if u.starts_with("http") {
+ return Some(u.to_string());
+ }
+ }
+ }
+ None
+}
+
+/// Full-size still for post detail: direct image `url`, else Reddit preview source.
+fn reddit_post_image_url(data: &Value) -> Option {
+ for key in ["url", "url_overridden_by_dest"] {
+ if let Some(u) = data.get(key).and_then(|v| v.as_str()) {
+ if reddit_direct_image_url(u) {
+ return Some(u.to_string());
+ }
+ }
+ }
+ reddit_preview_source_url(data)
+}
+
+fn reddit_preview_source_url(data: &Value) -> Option {
+ data.pointer("/preview/images/0/source/url")
+ .and_then(|v| v.as_str())
+ .filter(|s| s.starts_with("http"))
+ .map(str::to_string)
+}
+
+fn reddit_direct_image_url(url: &str) -> bool {
+ let u = url.to_ascii_lowercase();
+ if u.contains("redgifs.com") {
+ return false;
+ }
+ u.contains("i.redd.it")
+ || u.contains("preview.redd.it")
+ || u.contains("external-preview.redd.it")
+ || u.ends_with(".jpg")
+ || u.ends_with(".jpeg")
+ || u.ends_with(".png")
+ || u.ends_with(".gif")
+ || u.ends_with(".webp")
+}
+
#[cfg(test)]
mod tests {
use super::*;
@@ -672,4 +723,20 @@ mod tests {
.unwrap();
assert_eq!(entity.title, "The Rust Programming Language");
}
+
+ #[test]
+ fn parse_post_listing_extracts_thumb_and_full_preview() {
+ let json = include_str!("../../test/fixtures/reddit/post_preview.json");
+ let v: Value = serde_json::from_str(json).unwrap();
+ let id = ItemId::parse("reddit.com/r/nsfw/comments/1tpy6a1/angel_eyes").unwrap();
+ let entity = entity_view_from_payload(&id, &v).unwrap();
+ assert_eq!(entity.title, "Angel Eyes");
+ assert!(entity.thumb_url.as_ref().unwrap().contains("width=140"));
+ assert!(entity.image_url.as_ref().unwrap().contains("auto=webp"));
+ assert!(!entity.image_url.as_ref().unwrap().contains("redgifs"));
+ assert_eq!(
+ entity.link_url.as_deref(),
+ Some("http://v3.redgifs.com/watch/impossibleprestigioushedgehog")
+ );
+ }
}
diff --git a/server/src/reducer.rs b/server/src/reducer.rs
index 4e42d0369dab50bb2f8ca664aa69b628292f6c07..336e78b77d3ab59361b89af5c9868e13da4ac962 100644
--- a/server/src/reducer.rs
+++ b/server/src/reducer.rs
@@ -122,7 +122,12 @@ pub struct EntityData {
pub title: String,
pub author: Option,
pub body_html: Option,
+ /// Small preview (subreddit listing / child rows).
pub thumb_url: Option,
+ /// Full-size still image for the post detail view.
+ pub image_url: Option,
+ /// Outbound link for link/video posts (`url` / `url_overridden_by_dest`).
+ pub link_url: Option,
}
/// One node in the fractal tree: entity + ranked children.
diff --git a/server/src/render/mod.rs b/server/src/render/mod.rs
new file mode 100644
index 0000000000000000000000000000000000000000..c2c41404abe01c671139658fcccdeced5be388e4
--- /dev/null
+++ b/server/src/render/mod.rs
@@ -0,0 +1,3 @@
+//! Domain-specific HTML fragments for imported entities.
+
+pub mod reddit;
diff --git a/server/src/render/reddit.rs b/server/src/render/reddit.rs
new file mode 100644
index 0000000000000000000000000000000000000000..4a18de93cf57d8395ded3caa373a708f39b3f43f
--- /dev/null
+++ b/server/src/render/reddit.rs
@@ -0,0 +1,64 @@
+//! Reddit post cards: thumbnail in child lists, full image on the post page.
+
+use maud::{html, Markup};
+
+use crate::{
+ path_types::ItemId,
+ reducer::{EntityData, GlobalTree, NodeState},
+};
+
+pub fn is_reddit_post(id: &ItemId) -> bool {
+ id.as_str().starts_with("reddit.com/") && id.as_str().contains("/comments/")
+}
+
+/// Post detail card (`#entity-panel`).
+pub fn entity_markup(node: &NodeState) -> Option {
+ if !is_reddit_post(&node.id) {
+ return None;
+ }
+ let data = node.data.as_ref()?;
+ Some(post_entity_card(data))
+}
+
+/// One row in a parent ranking list (thumbnail + title).
+pub fn child_row_markup(tree: &GlobalTree, id: &ItemId, href: &str) -> Option {
+ if !is_reddit_post(id) {
+ return None;
+ }
+ let data = tree.get(id)?.data.as_ref()?;
+ Some(html! {
+ @if let Some(thumb) = &data.thumb_url {
+ a class="reddit-post-thumb-link" href=(href) {
+ img class="reddit-post-thumb" src=(thumb) alt="" loading="lazy";
+ }
+ }
+ a href=(href) {
+ strong { (data.title) }
+ }
+ })
+}
+
+fn post_entity_card(data: &EntityData) -> Markup {
+ let image = data.image_url.as_ref().or(data.thumb_url.as_ref());
+ html! {
+ div id="entity-panel" class="entity-card reddit-post" {
+ h2 { (data.title) }
+ @if let Some(author) = &data.author {
+ p class="muted small" { "by " (author) }
+ }
+ @if let Some(url) = &data.link_url {
+ p class="reddit-post-url muted small" {
+ a href=(url) rel="noopener noreferrer" { (url) }
+ }
+ }
+ @if let Some(src) = image {
+ figure class="reddit-post-figure" {
+ img class="reddit-post-image" src=(src) alt="" loading="lazy";
+ }
+ }
+ @if let Some(body) = &data.body_html {
+ div class="entity-body" { (maud::PreEscaped(body)) }
+ }
+ }
+ }
+}
diff --git a/server/static/sorter.css b/server/static/sorter.css
index 1f9f5158414902d43a380dd899232c70d8cf5d63..021918f8e778b84e4b3eac8559fab7d223a3d490 100644
--- a/server/static/sorter.css
+++ b/server/static/sorter.css
@@ -171,6 +171,41 @@ code {
margin-top: 0;
}
+.reddit-post-row {
+ display: flex;
+ align-items: center;
+ gap: 0.6rem;
+}
+
+.reddit-post-thumb-link {
+ flex-shrink: 0;
+ line-height: 0;
+}
+
+.reddit-post-thumb {
+ width: 64px;
+ height: 64px;
+ object-fit: cover;
+ border-radius: 4px;
+ border: 1px solid var(--border);
+}
+
+.reddit-post-url a {
+ word-break: break-all;
+}
+
+.reddit-post-figure {
+ margin: 0.75rem 0;
+}
+
+.reddit-post-image {
+ display: block;
+ max-width: 100%;
+ height: auto;
+ border-radius: 6px;
+ border: 1px solid var(--border);
+}
+
.scope-name {
color: var(--accent);
font-weight: 600;
diff --git a/test/fixtures/reddit/post_preview.json b/test/fixtures/reddit/post_preview.json
new file mode 100644
index 0000000000000000000000000000000000000000..c6ed31ae397dc0f7b6e07e5e010e617df78d9c18
--- /dev/null
+++ b/test/fixtures/reddit/post_preview.json
@@ -0,0 +1,22 @@
+{
+ "kind": "t3",
+ "data": {
+ "title": "Angel Eyes",
+ "permalink": "/r/nsfw/comments/1tpy6a1/angel_eyes/",
+ "author": "alice",
+ "thumbnail": "https://external-preview.redd.it/Kb6Nf5Q4RAucat-2RFcYMeQb2d6vgYNo5EPlf6kGLbs.jpeg?width=140&height=140&auto=webp&s=d7238240ebf191b954ef5f42b0cf61b67aecec88",
+ "url": "http://v3.redgifs.com/watch/impossibleprestigioushedgehog",
+ "post_hint": "rich:video",
+ "preview": {
+ "images": [
+ {
+ "source": {
+ "url": "https://external-preview.redd.it/Kb6Nf5Q4RAucat-2RFcYMeQb2d6vgYNo5EPlf6kGLbs.jpeg?auto=webp&s=ccdabee3b81e46ef2d7cec072f6604a09f61dc9a",
+ "width": 480,
+ "height": 480
+ }
+ }
+ ]
+ }
+ }
+}