Refactor + make card post work for no-image cards

This commit is contained in:
Lim Chee Aun 2024-06-28 07:49:30 +08:00
parent b6a25f5939
commit e6e884f1cb

View file

@ -2456,6 +2456,22 @@ function MediaFirstContainer(props) {
); );
} }
function getDomain(url) {
return punycode.toUnicode(
URL.parse(url)
.hostname.replace(/^www\./, '')
.replace(/\/$/, ''),
);
}
// "Post": Quote post + card link preview combo
// Assume all links from these domains are "posts"
// Mastodon links are "posts" too but they are converted to real quote posts and there's too many domains to check
// This is just "Progressive Enhancement"
function isCardPost(domain) {
return ['x.com', 'twitter.com', 'threads.net', 'bsky.app'].includes(domain);
}
function Card({ card, selfReferential, instance }) { function Card({ card, selfReferential, instance }) {
const snapStates = useSnapshot(states); const snapStates = useSnapshot(states);
const { const {
@ -2534,11 +2550,7 @@ function Card({ card, selfReferential, instance }) {
); );
if (hasText && (image || (type === 'photo' && blurhash))) { if (hasText && (image || (type === 'photo' && blurhash))) {
const domain = punycode.toUnicode( const domain = getDomain(url);
URL.parse(url)
.hostname.replace(/^www\./, '')
.replace(/\/$/, ''),
);
let blurhashImage; let blurhashImage;
const rgbAverageColor = const rgbAverageColor =
image && blurhash ? getBlurHashAverageColor(blurhash) : null; image && blurhash ? getBlurHashAverageColor(blurhash) : null;
@ -2559,11 +2571,7 @@ function Card({ card, selfReferential, instance }) {
blurhashImage = canvas.toDataURL(); blurhashImage = canvas.toDataURL();
} }
// "Post": Quote post + card link preview combo const isPost = isCardPost(domain);
// Assume all links from these domains are "posts"
// Mastodon links are "posts" too but they are converted to real quote posts and there's too many domains to check
// This is just "Progressive Enhancement"
const isPost = ['x.com', 'twitter.com', 'threads.net'].includes(domain);
return ( return (
<a <a
@ -2669,15 +2677,14 @@ function Card({ card, selfReferential, instance }) {
// ); // );
} }
if (hasText && !image) { if (hasText && !image) {
const domain = punycode.toUnicode( const domain = getDomain(url);
URL.parse(url).hostname.replace(/^www\./, ''), const isPost = isCardPost(domain);
);
return ( return (
<a <a
href={cardStatusURL || url} href={cardStatusURL || url}
target={cardStatusURL ? null : '_blank'} target={cardStatusURL ? null : '_blank'}
rel="nofollow noopener noreferrer" rel="nofollow noopener noreferrer"
class={`card link no-image`} class={`card link ${isPost ? 'card-post' : ''} no-image`}
lang={language} lang={language}
onClick={handleClick} onClick={handleClick}
> >