Fix: BlueSky expandos have issues on chromium browsers (#5561)

* Added support for bluesky expandos

* Fixed several bluesky expando issues.

* fixed yarn errors

Author: steckums

lib/css/modules/_styleTweaks.scss

@@ -11,6 +11,18 @@ blockquote.twitter-tweet {
 	}
 }
 
+// We need to style bluesky post expandos because they can't take advantage of bsky.app's embeded.js
+blockquote.bluesky-embed {
+	padding: 15px;
+	border-left: 5px solid #ccc;
+	font-size: 14px;
+	line-height: 20px;
+
+	p {
+		margin-bottom: 15px;
+	}
+}
+
 // wow, Reddit only adds a visited style for submission titles!
 // let's add visited styles to user-editable content (.md) if the user wants to.
 .res-styleTweaks-visitedStyle {

lib/modules/hosts/bluesky.js

@@ -2,30 +2,49 @@
 
 import $ from 'jquery';
 import { Host } from '../../core/host';
-import { ajax } from '../../environment';
+import { ajax, i18n } from '../../environment';
 
 export default new Host('bluesky', {
 	name: 'bluesky',
 	logo: 'https://bsky.app/static/favicon.png',
 	permissions: ['https://embed.bsky.app/oembed'],
 	domains: ['bsky.app'],
-	detect: ({ href }) => (/^^https?:\/\/(bsky)\.app\/profile\/[\w.-]+\/post+/i).exec(href),
+	detect: ({ href }) => (/^^https?:\/\/(bsky)\.app\/profile\/[^\\]+\/post+/i).exec(href),
+	options:{
+		forceReplaceNativeExpando: {
+			title: 'showImagesForceReplaceNativeExpandoTitle',
+			description: 'showImagesForceReplaceNativeExpandoDesc',
+			value: true,
+			type: 'boolean',
+			noconfig: true,
+		},
+	},
 	async handleLink(href) {
-		const post = await ajax({
-			url: 'https://embed.bsky.app/oembed',
-			query: { url: href },
-			type:'json',
-		});
-
+		let posthtml;
+		try {
+			const post = await ajax({
+				url: 'https://embed.bsky.app/oembed',
+				query: { url: href.replace(/\/+$/, '') }, // Remove trailing slashes, as the bluesky embed app does accept it.
+				type:'json',
+			});
+			// This removes the embedded script that we cannot use for security reasons.
+			posthtml = $.parseHTML(post.html)[0]
+		} catch (error) {
+			// If we get here, the embed API likely threw a 403, which happens when a user requests that the post is only viewed
+			// by logged in users on bsky.app. There is no way to embed this post.
+			posthtml = `<blockquote class="bluesky-embed">${ i18n('blueskyExpandoUserRequestedLoginToView') }</blockquote>`
+		}
 		// Script requires element to be attached to document when starting
 		const $dummy = $('<div>');
-
 		return {
 			type: 'GENERIC_EXPANDO',
 			muted: true,
 			expandoClass: 'selftext',
 			generate: () => $dummy[0],
-			onAttach: () => { $dummy.html(post.html); },
+			onAttach: () => { 
+				$dummy.html(posthtml);
+			},
 		};
 	},
-}); 
+},
+); 

locales/locales/en.json

@@ -4461,5 +4461,8 @@
     },
     "quarantineHideInSubDesc": {
         "message": "Hide all warnings of quarantine while viewing a quarantined subreddit"
-    }
+    },
+	"blueskyExpandoUserRequestedLoginToView": {
+		"message": "Unable to render Bluesky Expando. User requested only logged in users to view content."
+	}
 }