Add text post previews. (#328)

* Add text post previews.

* Add mask gradient over post preview text

* Increase post title font weight for contrast

Co-authored-by: spikecodes <19519553+spikecodes@users.noreply.github.com>

src/utils.rs

@@ -251,11 +251,20 @@ impl Post {
 			// Determine the type of media along with the media URL
 			let (post_type, media, gallery) = Media::parse(data).await;
 
+			// selftext is set for text posts when browsing a (sub)reddit.
+			// Do NOT use selftext_html, because we truncate this content
+			// in the template code, and using selftext_html might result
+			// in truncated html.
+			let mut body = rewrite_urls(&val(post, "selftext"));
+			if body == "" {
+				body = rewrite_urls(&val(post, "body_html"))
+			}
+
 			posts.push(Self {
 				id: val(post, "id"),
 				title: esc!(if title.is_empty() { fallback_title.clone() } else { title }),
 				community: val(post, "subreddit"),
-				body: rewrite_urls(&val(post, "body_html")),
+				body,
 				author: Author {
 					name: val(post, "author"),
 					flair: Flair {

static/style.css

@@ -722,6 +722,7 @@ a.search_subreddit:hover {
 
 .post_title {
 	font-size: 16px;
+	font-weight: 500;
 	line-height: 1.5;
 	margin: 5px 15px;
 	grid-area: post_title;
@@ -837,11 +838,16 @@ a.search_subreddit:hover {
 .post_body {
 	opacity: 0.9;
 	font-weight: normal;
-	margin: 5px 15px;
+	padding: 5px 15px;
 	grid-area: post_body;
 	width: calc(100% - 30px);
 }
 
+.post_preview {
+	mask-image: linear-gradient(180deg,#000 60%,transparent);
+	opacity: 0.8;
+}
+
 .post_footer {
 	display: flex;
 	justify-content: space-between;

templates/utils.html

@@ -130,6 +130,10 @@
 	{% endif %}
 
 	<div class="post_score" title="{{ post.score.1 }}">{{ post.score.0 }}<span class="label"> Upvotes</span></div>
+	<div class="post_body post_preview">
+		<!-- preview of selfposts when browsing subreddits -->
+		{{ post.body|truncate(1000) }}
+	</div>
 	<div class="post_footer">
 		<a href="{{ post.permalink }}" class="post_comments" title="{{ post.comments.1 }} comments">{{ post.comments.0 }} comments</a>
 	</div>