Merge pull request #222 from ZhenyaGoroh/fix/blank-links

Fix/blank links

src/components/branding-assets.tsx

@@ -75,7 +75,7 @@ export function BrandingAssets() {
 						CC BY-SA 4.0
 					</a>
 					. Thanks to{" "}
-					<a href="https://www.onnno.nl/" className="text-blue-500">
+					<a href="https://www.onnno.nl/" rel="noopener noreferrer" target="_blank" className="text-blue-500">
 						Donno (mr. Logos)
 					</a>{" "}
 					for the assets.

src/components/download.tsx

@@ -227,9 +227,11 @@ export default function DownloadPage() {
 								the web with Zen!
 							</p>
 							<div className="mt-5 flex items-center font-bold">
-								<a href="https://github.com/zen-browser">Source Code</a>
+								<a target="_blank" rel="noopener noreferrer" href="https://github.com/zen-browser">Source Code</a>
 								<a
+									target="_blank"
 									className="ml-5"
+									rel="noopener noreferrer"
 									href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
 								>
 									Donate

src/components/features.tsx

@@ -140,7 +140,11 @@ export default function Features() {
 							browser.
 						</p>
 						<div className="relative">
-							<a href="https://github.com/zen-browser" target="_blank">
+							<a
+								href="https://github.com/zen-browser"
+								rel="noopener noreferrer"
+								target="_blank"
+							>
 								<Button className="mt-8">GitHub</Button>
 							</a>
 						</div>
@@ -474,6 +478,7 @@ export default function Features() {
 							<a
 								href="https://github.com/zen-browser/desktop?tab=readme-ov-file#compatibility"
 								target="_blank"
+								rel="noopener noreferrer"
 								className="tems-center m-auto flex h-fit w-fit animate-fade-in items-center rounded-full border-2 border-white bg-surface p-4 opacity-0 shadow [--animation-delay:300ms]"
 							>
 								See what version of Firefox Zen uses{" "}
@@ -490,14 +495,15 @@ export default function Features() {
 								<span className="mx-4 text-4xl">+</span>{" "}
 								<EyeClosedIcon className="h-10 w-10" />
 							</div>
-							<a
+							<Link
 								href="/privacy-policy"
 								target="_blank"
 								className="tems-center m-auto flex h-fit w-fit animate-fade-in items-center rounded-full border-2 border-white bg-surface p-4 opacity-0 shadow [--animation-delay:300ms]"
+								prefetch={false}
 							>
 								Learn about Zen's privacy policy{" "}
 								<ExternalLinkIcon className="ml-4 h-4 w-4 opacity-50" />
-							</a>
+							</Link>
 						</div>
 					)}
 
@@ -547,12 +553,20 @@ export default function Features() {
 						cause.
 					</p>
 					<div className="relative mt-8 flex">
-						<a href="https://patreon.com/zen_browser" target="_blank">
+						<a
+							href="https://patreon.com/zen_browser"
+							rel="noopener noreferrer"
+							target="_blank"
+						>
 							<Button data-umami-event="patreon-feature" variant="ghost">
 								Patreon <ExternalLinkIcon className="ml-4 h-4 w-4 opacity-50" />
 							</Button>
 						</a>
-						<a href="https://ko-fi.com/zen_browser" target="_blank">
+						<a
+							href="https://ko-fi.com/zen_browser"
+							rel="noopener noreferrer"
+							target="_blank"
+						>
 							<Button
 								data-umami-event="ko-fi-feature"
 								className="ml-8"

src/components/footer.tsx

@@ -18,7 +18,9 @@ export default function Footer() {
 					<div className="mt-auto">
 						<h1 className="text-2xl font-bold opacity-80">Zen Browser</h1>
 						<a
+							target="_blank"
 							data-umami-event="footer-status"
+							rel="noopener noreferrer"
 							href="https://uptime.zen-browser.app/"
 							className="mt-2 flex w-fit cursor-pointer items-center rounded-md bg-surface px-3 py-2 shadow"
 						>
@@ -34,16 +36,35 @@ export default function Footer() {
 						</a>
 						<h2 className="text-md mt-6 font-bold opacity-80">Follow Us</h2>
 						<div className="mt-4 flex opacity-70">
-							<a href="https://github.com/zen-browser">
+							<a
+								target="_blank"
+								rel="noopener noreferrer"
+								href="https://github.com/zen-browser"
+							>
 								<GitHubLogoIcon className="h-5 w-5" />
 							</a>
-							<a href="https://discord.gg/zen-browser" className="ml-5">
+							<a
+								target="_blank"
+								rel="noopener noreferrer"
+								href="https://discord.gg/zen-browser"
+								className="ml-5"
+							>
 								<DiscordLogoIcon className="h-5 w-5" />
 							</a>
-							<a href="https://fosstodon.org/@zenbrowser" className="ml-5">
+							<a
+								target="_blank"
+								rel="noopener noreferrer"
+								href="https://fosstodon.org/@zenbrowser"
+								className="ml-5"
+							>
 								<MastodonLogo className="h-5 w-5" />
 							</a>
-							<a href="https://twitter.com/zen_browser" className="ml-5">
+							<a
+								target="_blank"
+								rel="noopener noreferrer"
+								href="https://twitter.com/zen_browser"
+								className="ml-5"
+							>
 								<TwitterLogoIcon className="h-5 w-5" />
 							</a>
 						</div>
@@ -72,6 +93,7 @@ export default function Footer() {
 						<ul className="mt-4 font-normal opacity-70">
 							<li>
 								<a
+									target="_blank"
 									data-umami-event="footer-discord"
 									href="https://discord.com/servers/mauro-s-little-sweatshop-1088172780480114748"
 								>
@@ -79,7 +101,10 @@ export default function Footer() {
 								</a>
 							</li>
 							<li className="mt-2 font-normal">
-								<a href="https://github.com/zen-browser/desktop/issues">
+								<a
+									target="_blank"
+									href="https://github.com/zen-browser/desktop/issues"
+								>
 									Report an Issue
 								</a>
 							</li>
@@ -106,10 +131,17 @@ export default function Footer() {
 								<a href="/branding-assets">Branding Assets</a>
 							</li>
 							<li className="mt-2">
-								<a href="https://github.com/zen-browser/desktop">Source Code</a>
+								<a
+									target="_blank"
+									href="https://github.com/zen-browser/desktop"
+								>
+									Source Code
+								</a>
 							</li>
 							<li className="mt-2">
-								<a href="https://docs.zen-browser.app">Documentation</a>
+								<a target="_blank" href="https://docs.zen-browser.app">
+									Documentation
+								</a>
 							</li>
 							<li className="mt-2">
 								<a href="/release-notes">Release Notes</a>
@@ -119,6 +151,7 @@ export default function Footer() {
 						<ul className="mt-4 font-normal opacity-70">
 							<li>
 								<a
+									target="_blank"
 									data-umami-event="patreon-fotter"
 									href="https://patreon.com/zen_browser"
 								>
@@ -127,6 +160,7 @@ export default function Footer() {
 							</li>
 							<li className="mt-2">
 								<a
+									target="_blank"
 									data-umami-event="ko-fi-fotter"
 									href="https://ko-fi.com/zen_browser"
 								>

src/components/mobile-nav.tsx

@@ -12,6 +12,37 @@ import Logo from "./logo";
 import { ny } from "@/lib/utils";
 import { components } from "./navigation";
 
+interface MobileLinkProps
+	extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+	onOpenChange?: (open: boolean) => void;
+	children: React.ReactNode;
+	className?: string;
+	href: string;
+}
+
+function MobileLink({
+	href,
+	onOpenChange,
+	className,
+	children,
+	...props
+}: MobileLinkProps) {
+	const router = useRouter();
+	return (
+		<a
+			href={href}
+			onClick={() => {
+				router.push(href);
+				onOpenChange?.(false);
+			}}
+			className={ny(className, "my-4")}
+			{...props}
+		>
+			{children}
+		</a>
+	);
+}
+
 export function MobileNav() {
 	const [open, setOpen] = React.useState(false);
 
@@ -59,13 +90,21 @@ export function MobileNav() {
 						</MobileLink>
 						<MobileLink
 							href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
+							rel="noopener noreferrer"
 							onOpenChange={setOpen}
+							target="_blank"
 						>
 							<div>Donate {"<"}3</div>
 							<p className="text-xs opacity-60">Support the project</p>
 						</MobileLink>
-						{components.map(({ title, href, description }) => (
+						{components.map(({ title, href, description, isTargetBlank, rel }) => (
-							<MobileLink href={href} key={href} onOpenChange={setOpen}>
+							<MobileLink
+								href={href}
+								key={href}
+								target={isTargetBlank ? "_blank" : "_self"}
+								onOpenChange={setOpen}
+								rel={rel}
+							>
 								<div>{title}</div>
 								<p className="text-xs opacity-60">{description}</p>
 							</MobileLink>
@@ -76,32 +115,3 @@ export function MobileNav() {
 		</Sheet>
 	);
 }
-
-interface MobileLinkProps extends LinkProps {
-	onOpenChange?: (open: boolean) => void;
-	children: React.ReactNode;
-	className?: string;
-}
-
-function MobileLink({
-	href,
-	onOpenChange,
-	className,
-	children,
-	...props
-}: MobileLinkProps) {
-	const router = useRouter();
-	return (
-		<a
-			href={href.toString()}
-			onClick={() => {
-				router.push(href.toString());
-				onOpenChange?.(false);
-			}}
-			className={ny(className, "my-4")}
-			{...props}
-		>
-			{children}
-		</a>
-	);
-}

src/components/navigation.tsx

@@ -21,24 +21,31 @@ export const components: {
 	title: string;
 	href: string;
 	description: string;
+	isTargetBlank?: boolean;
+	rel?: "noopener noreferrer";
 }[] = [
 	{
 		title: "Privacy Policy",
 		href: "/privacy-policy",
 		description:
 			"Read our privacy policy to learn more about how we handle your data.",
+		isTargetBlank: true,
 	},
 	{
 		title: "Discord",
 		href: "https://discord.gg/zen-browser",
 		description:
 			"Join our Discord server to chat with the community and get support.",
+		isTargetBlank: true,
+		rel: "noopener noreferrer",
 	},
 	{
 		title: "Source Code",
 		href: "https://github.com/zen-browser",
 		description:
 			"View the source code on GitHub and contribute to the project.",
+		isTargetBlank: true,
+		rel: "noopener noreferrer",
 	},
 	{
 		title: "Branding Assets",
@@ -55,9 +62,62 @@ export const components: {
 		title: "Documentation",
 		href: "https://docs.zen-browser.app/",
 		description: "Read the documentation to learn more about Zen Browser.",
+		isTargetBlank: true,
 	},
 ];
 
+const ListItem = React.forwardRef<
+	React.ElementRef<"a">,
+	React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+	return (
+		<li>
+			<NavigationMenuLink asChild>
+				<a
+					ref={ref}
+					className={ny(
+						"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+						className,
+					)}
+					{...props}
+				>
+					<div className="text-sm font-medium leading-none">{title}</div>
+					<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+						{children}
+					</p>
+				</a>
+			</NavigationMenuLink>
+		</li>
+	);
+});
+const ListItem2 = React.forwardRef<
+	React.ElementRef<"a">,
+	React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+	return (
+		<li>
+			<NavigationMenuLink asChild>
+				<a
+					data-umami-event={title}
+					ref={ref}
+					className={ny(
+						"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+						className,
+					)}
+					{...props}
+				>
+					<div className="text-sm font-medium leading-none">{title}</div>
+					<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+						{children}
+					</p>
+				</a>
+			</NavigationMenuLink>
+		</li>
+	);
+});
+ListItem.displayName = "ListItem";
+ListItem.displayName = "ListItem2";
+
 export function Navigation() {
 	return (
 		<div className="border-grey fixed left-0 top-0 z-40 flex w-full items-center justify-center border-b bg-background p-2">
@@ -112,6 +172,8 @@ export function Navigation() {
 								<ListItem2
 									title="Patreon"
 									href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
+									target="_blank"
+									rel="noopener noreferrer"
 								>
 									Support us on Patreon and get exclusive rewards and keep the
 									project alive.
@@ -119,6 +181,8 @@ export function Navigation() {
 								<ListItem2
 									title="Ko-Fi"
 									href="https://ko-fi.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
+									target="_blank"
+									rel="noopener noreferrer"
 								>
 									Ko-fi is a way to support us with a one-time donation and help
 									us keep the project alive.
@@ -130,15 +194,19 @@ export function Navigation() {
 						<NavigationMenuTrigger>{"Useful Links"}</NavigationMenuTrigger>
 						<NavigationMenuContent>
 							<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
-								{components.map((component) => (
+								{components.map(
-									<ListItem
+									({ description, href, title, isTargetBlank, rel }) => (
-										key={component.title}
+										<ListItem
-										title={component.title}
+											key={title}
-										href={component.href}
+											title={title}
-									>
+											href={href}
-										{component.description}
+											target={isTargetBlank ? "_blank" : "_self"}
-									</ListItem>
+											rel={rel}
-								))}
+										>
+											{description}
+										</ListItem>
+									),
+								)}
 							</ul>
 						</NavigationMenuContent>
 					</NavigationMenuItem>
@@ -148,55 +216,3 @@ export function Navigation() {
 		</div>
 	);
 }
-
-const ListItem = React.forwardRef<
-	React.ElementRef<"a">,
-	React.ComponentPropsWithoutRef<"a">
->(({ className, title, children, ...props }, ref) => {
-	return (
-		<li>
-			<NavigationMenuLink asChild>
-				<a
-					ref={ref}
-					className={ny(
-						"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-						className,
-					)}
-					{...props}
-				>
-					<div className="text-sm font-medium leading-none">{title}</div>
-					<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-						{children}
-					</p>
-				</a>
-			</NavigationMenuLink>
-		</li>
-	);
-});
-const ListItem2 = React.forwardRef<
-	React.ElementRef<"a">,
-	React.ComponentPropsWithoutRef<"a">
->(({ className, title, children, ...props }, ref) => {
-	return (
-		<li>
-			<NavigationMenuLink asChild>
-				<a
-					data-umami-event={title}
-					ref={ref}
-					className={ny(
-						"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-						className,
-					)}
-					{...props}
-				>
-					<div className="text-sm font-medium leading-none">{title}</div>
-					<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-						{children}
-					</p>
-				</a>
-			</NavigationMenuLink>
-		</li>
-	);
-});
-ListItem.displayName = "ListItem";
-ListItem.displayName = "ListItem2";

src/components/release-note.tsx

@@ -20,6 +20,8 @@ function DateContainer({ data }: { data: ReleaseNote }) {
 			}).format("MMMM Do, YYYY")}
 			<div className="mt-2 flex items-center text-blue-500 opacity-60">
 				<a
+					rel="noopener noreferrer"
+					target="_blank"
 					href={`https://github.com/zen-browser/desktop/releases/tag/${data.version}`}
 				>
 					GitHub Release
@@ -28,6 +30,8 @@ function DateContainer({ data }: { data: ReleaseNote }) {
 					<>
 						<span className="mx-1 text-muted-foreground">•</span>
 						<a
+							rel="noopener noreferrer"
+							target="_blank"
 							href={`https://github.com/zen-browser/desktop/actions/runs/${data.workflowId}`}
 						>
 							Workflow Run
@@ -43,6 +47,8 @@ function DateContainer({ data }: { data: ReleaseNote }) {
 						<p className="mt-2">
 							Consider joining our{" "}
 							<a
+								rel="noopener noreferrer"
+								target="_blank"
 								href="https://discord.gg/zen-browser"
 								className="text-blue-500"
 							>
@@ -85,6 +91,8 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
 				<p className="text-md mt-4 text-muted-foreground">
 					If you encounter any issues, please report them on{" "}
 					<a
+						rel="noopener noreferrer"
+						target="_blank"
 						href="https://github.com/zen-browser/desktop/issues/"
 						className="text-underline text-blue-500"
 					>
@@ -148,6 +156,8 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
 											<span className="ml-1">{fix.description}</span>
 											{fix.issue && (
 												<a
+													rel="noopener noreferrer"
+													target="_blank"
 													href={`https://github.com/zen-browser/desktop/issues/${fix.issue}`}
 													className="text-underline ml-1 text-blue-500"
 												>