[dyad] Added 'nofollow' warning to links - wrote 1 file(s)

This commit is contained in:
[dyad]
2026-01-20 16:26:30 +01:00
parent a04c53bae4
commit d742339c1d

View File

@@ -12,7 +12,13 @@ import {
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ExternalLink, Link as LinkIcon } from "lucide-react";
import { ExternalLink, Link as LinkIcon, AlertTriangle } from "lucide-react";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import type { LinkData } from "@/app/actions";
interface LinksDisplayProps {
@@ -88,44 +94,64 @@ export function LinksDisplay({ links }: LinksDisplayProps) {
</TableRow>
</TableHeader>
<TableBody>
{filteredLinks.map((link, index) => (
<TableRow key={index}>
<TableCell className="max-w-xs truncate">
<a
href={link.href}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 hover:underline"
>
{link.type === "external" ? (
<ExternalLink className="h-4 w-4 flex-shrink-0" />
) : (
<LinkIcon className="h-4 w-4 flex-shrink-0" />
)}
<span className="truncate">{link.href}</span>
</a>
</TableCell>
<TableCell>{link.text || "No anchor text"}</TableCell>
<TableCell className="text-center">
<Badge variant="secondary" className="capitalize">
{link.type}
</Badge>
</TableCell>
<TableCell className="text-center">
{link.rel ? (
<div className="flex justify-center gap-1">
{link.rel.split(" ").map((r) => (
<Badge key={r} variant="outline">
{r}
</Badge>
))}
{filteredLinks.map((link, index) => {
const isMissingNoFollow =
link.type === "external" && !link.rel.includes("nofollow");
return (
<TableRow key={index}>
<TableCell className="max-w-xs truncate">
<div className="flex items-center justify-between gap-2">
<a
href={link.href}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 hover:underline min-w-0"
>
{link.type === "external" ? (
<ExternalLink className="h-4 w-4 flex-shrink-0" />
) : (
<LinkIcon className="h-4 w-4 flex-shrink-0" />
)}
<span className="truncate">{link.href}</span>
</a>
{isMissingNoFollow && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<AlertTriangle className="h-4 w-4 text-orange-500 flex-shrink-0" />
</TooltipTrigger>
<TooltipContent>
<p>
External link without 'nofollow' attribute.
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</div>
) : (
"-"
)}
</TableCell>
</TableRow>
))}
</TableCell>
<TableCell>{link.text || "No anchor text"}</TableCell>
<TableCell className="text-center">
<Badge variant="secondary" className="capitalize">
{link.type}
</Badge>
</TableCell>
<TableCell className="text-center">
{link.rel ? (
<div className="flex justify-center gap-1">
{link.rel.split(" ").map((r) => (
<Badge key={r} variant="outline">
{r}
</Badge>
))}
</div>
) : (
"-"
)}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</Card>