diff --git a/src/components/status.css b/src/components/status.css index f473ac19..32555cef 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -380,9 +380,9 @@ filter: none; image-rendering: auto; } -.status .content a:not(.mention):not(:has(span)) { +/* .status .content a:not(.mention):not(:has(span)) { color: inherit; -} +} */ .status.compact-thread .spoiler-badge { font-size: smaller; diff --git a/src/utils/enhance-content.js b/src/utils/enhance-content.js index 55d3bbdc..854dead5 100644 --- a/src/utils/enhance-content.js +++ b/src/utils/enhance-content.js @@ -10,23 +10,31 @@ function enhanceContent(content, opts = {}) { // Add target="_blank" to all links with no target="_blank" // E.g. `note` in `account` - const links = Array.from(dom.querySelectorAll('a:not([target="_blank"])')); - links.forEach((link) => { + const noTargetBlankLinks = Array.from( + dom.querySelectorAll('a:not([target="_blank"])'), + ); + noTargetBlankLinks.forEach((link) => { link.setAttribute('target', '_blank'); }); // Spanify un-spanned mentions - const mentionLinks = Array.from(dom.querySelectorAll('a[href].mention')); - mentionLinks.forEach((link) => { - if (link.querySelector('*')) { - return; - } - const text = link.innerText; + const notMentionLinks = Array.from( + dom.querySelectorAll('a[href]:not(.mention)'), + ); + notMentionLinks.forEach((link) => { + const text = link.innerText.trim(); + const hasChildren = link.querySelector('*'); // If text looks like @username@domain, then it's a mention - if (/^@[^@]+@[^@]+$/g.test(text)) { + if (/^@[^@]+(@[^@]+)?$/g.test(text)) { // Only show @username const username = text.split('@')[1]; - link.innerHTML = `@${username}`; + if (!hasChildren) link.innerHTML = `@${username}`; + link.classList.add('mention'); + } + // If text looks like #hashtag, then it's a hashtag + if (/^#[^#]+$/g.test(text)) { + if (!hasChildren) link.innerHTML = `#${text}`; + link.classList.add('mention', 'hashtag'); } });