diff --git a/src/components/status.css b/src/components/status.css index 3c872d2..371d0a1 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -686,6 +686,26 @@ body:has(#modal-container .carousel) .status .media img:hover { background-blend-mode: multiply; } +.status:not(.large) .hashtag-stuffing { + opacity: 0.75; + transition: opacity 0.2s ease-in-out; +} +.status:not(.large) .hashtag-stuffing:is(:hover, :focus, :focus-within) { + opacity: 1; +} +.status:not(.large) .hashtag-stuffing { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; +} +.status:not(.large) .hashtag-stuffing:first-child { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + white-space: normal; +} + .carousel-item { position: relative; } diff --git a/src/utils/enhance-content.js b/src/utils/enhance-content.js index 854dead..29efa00 100644 --- a/src/utils/enhance-content.js +++ b/src/utils/enhance-content.js @@ -136,6 +136,35 @@ function enhanceContent(content, opts = {}) { node.replaceWith(...nodes); }); + // HASHTAG STUFFING + // ================ + // Get the

that contains a lot of hashtags, add a class to it + const hashtagStuffedParagraph = Array.from(dom.querySelectorAll('p')).find( + (p) => { + for (let i = 0; i < p.childNodes.length; i++) { + const node = p.childNodes[i]; + + if (node.nodeType === Node.TEXT_NODE) { + const text = node.textContent.trim(); + if (text !== '') { + return false; + } + } else if (node.tagName === 'A') { + const linkText = node.textContent.trim(); + if (!linkText || !linkText.startsWith('#')) { + return false; + } + } else { + return false; + } + } + return true; + }, + ); + if (hashtagStuffedParagraph) { + hashtagStuffedParagraph.classList.add('hashtag-stuffing'); + } + if (postEnhanceDOM) { postEnhanceDOM(dom); // mutate dom }