Update article links to open external content in new tabs

Adds a useEffect hook to the ArticlePage component in `client/src/pages/article.tsx` to dynamically set the `target="_blank"` and `rel="noopener noreferrer"` attributes on all external anchor tags that are not internal links or Bunny.net videos. This ensures that external content is opened in a new tab for a better user experience. Additionally, image URLs in `server/gallery-data.json` have been updated.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 94c1943e-9f5b-4d6b-9f0a-07685472a607
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/nFw7xof
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-02 19:32:13 +00:00
parent 59d71372bd
commit 936cabfafc
2 changed files with 541 additions and 530 deletions

View File

@ -218,7 +218,18 @@ export default function ArticlePage() {
[&_blockquote:not(.instagram-media)]:border-l-primary [&_blockquote:not(.instagram-media)]:bg-accent/50 [&_blockquote:not(.instagram-media)]:rounded-r-md [&_blockquote:not(.instagram-media)]:py-1
[&_.instagram-media]:!bg-transparent [&_.instagram-media]:!border-0 [&_.instagram-media]:!shadow-none [&_.instagram-media]:!p-0 [&_.instagram-media]:mx-auto`;
return (
<>
<div ref={(el) => {
if (!el) return;
el.querySelectorAll("a[href]").forEach((a) => {
const href = a.getAttribute("href") || "";
const isBunny = href.includes("mediadelivery.net") || href.includes("bunny.net") || href.includes("b-cdn.net");
const isInternal = href.startsWith("/") || href.includes("news.folx.tv") || href.includes("folx.tv");
if (!isBunny && !isInternal && href.startsWith("http")) {
a.setAttribute("target", "_blank");
a.setAttribute("rel", "noopener noreferrer");
}
});
}}>
<article
className={proseClasses}
dangerouslySetInnerHTML={{ __html: firstHalf }}
@ -230,7 +241,7 @@ export default function ArticlePage() {
dangerouslySetInnerHTML={{ __html: secondHalf }}
data-testid="article-content-continued"
/>
</>
</div>
);
})()}

File diff suppressed because it is too large Load Diff