Make image preview links embed

redlib-org · Apr 7, 2024 · 10499df · 10499df
1 parent c86ca16
commit 10499df
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/src/utils.rs b/src/utils.rs
@@ -877,6 +877,8 @@ pub fn format_url(url: &str) -> String {
 static REDDIT_REGEX: Lazy<Regex> = Lazy::new(|| Regex::new(r#"href="(https|http|)://(www\.|old\.|np\.|amp\.|new\.|)(reddit\.com|redd\.it)/"#).unwrap());
 static REDDIT_PREVIEW_REGEX: Lazy<Regex> = Lazy::new(|| Regex::new(r"https?://(external-preview|preview)\.redd\.it(.*)[^?]").unwrap());
 static REDDIT_EMOJI_REGEX: Lazy<Regex> = Lazy::new(|| Regex::new(r"https?://(www|).redditstatic\.com/(.*)").unwrap());
+static REDLIB_PREVIEW_LINK_REGEX: Lazy<Regex> = Lazy::new(|| Regex::new(r#"/preview/(pre|external-pre)/(.*)">"#).unwrap());
+static REDLIB_PREVIEW_TEXT_REGEX: Lazy<Regex> = Lazy::new(|| Regex::new(r">(.*)</a>").unwrap());
 
 // Rewrite Reddit links to Redlib in body of text
 pub fn rewrite_urls(input_text: &str) -> String {
@@ -897,8 +899,14 @@ pub fn rewrite_urls(input_text: &str) -> String {
 			if REDDIT_PREVIEW_REGEX.find(&text1).is_none() {
 				return text1;
 			} else {
+				let formatted_url = format_url(REDDIT_PREVIEW_REGEX.find(&text1).map(|x| x.as_str()).unwrap_or_default());
+
+				let image_url = REDLIB_PREVIEW_LINK_REGEX.find(&formatted_url).map_or("", |m| m.as_str()).to_string();
+				let image_text = REDLIB_PREVIEW_TEXT_REGEX.find(&formatted_url).map_or("", |m| m.as_str()).to_string();
+
 				text1 = REDDIT_PREVIEW_REGEX
 					.replace(&text1, format_url(REDDIT_PREVIEW_REGEX.find(&text1).map(|x| x.as_str()).unwrap_or_default()))
+					.replace(&image_text, &format!("><img src=\"{image_url}</a>"))
 					.to_string()
 			}
 		}

diff --git a/static/style.css b/static/style.css
@@ -1008,6 +1008,10 @@ a.search_subreddit:hover {
 	overflow-wrap: anywhere;
 }
 
+.post_body img {
+	max-width: 100%;
+}
+
 .post_poll {
 	grid-area: post_poll;
 	padding: 5px 15px 5px 12px;
@@ -1171,6 +1175,16 @@ a.search_subreddit:hover {
 	display: flex;
 }
 
+.comment img {
+	max-width: 50%;
+}
+
+@media screen and (max-width: 500px) {
+	.comment img {
+		max-width: 80%;
+	}
+}
+
 .comment_left, .comment_right {
 	display: flex;
 	flex-direction: column;