Link Preview

1"use client";
2 
3import Image from "next/image";
4import { type ReactNode, useEffect, useRef, useState } from "react";
5import { Globe02Icon, HugeiconsIcon } from "@/components/icons";
6 
7import {
8	Tooltip,
9	TooltipContent,
10	TooltipTrigger,
11} from "@/components/ui/tooltip";
12 
13interface UrlMetadata {
14	title: string | null;
15	description: string | null;
16	favicon: string | null;
17	website_name: string | null;
18	website_image: string | null;
19	url: string;
20}
21 
22interface LinkPreviewProps {
23	href: string;
24	children: ReactNode | string | null;
25	className?: string;
26}
27 
28const isEmail = (str: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str);
29 
30const isValidHttpUrl = (str: string): boolean => {
31	try {
32		const url = new URL(str);
33		return /^(http|https):$/.test(url.protocol);
34	} catch {
35		return false;
36	}
37};
38 
39export function LinkPreview({
40	href,
41	children,
42	className = "cursor-pointer rounded-sm bg-primary/20 px-1 text-sm font-medium text-primary transition-all hover:text-white hover:underline",
43}: LinkPreviewProps) {
44	const elementRef = useRef<HTMLAnchorElement>(null);
45	const [isInView, setIsInView] = useState(false);
46	const [validFavicon, setValidFavicon] = useState(true);
47	const [validImage, setValidImage] = useState(true);
48	const [metadata, setMetadata] = useState<UrlMetadata | null>(null);
49	const [isLoading, setIsLoading] = useState(false);
50	const [error, setError] = useState<Error | null>(null);
51 
52	const isValidUrl =
53		href &&
54		isValidHttpUrl(href) &&
55		!isEmail(href) &&
56		!href.startsWith("mailto:");
57 
58	// Fetch metadata when in view
59	useEffect(() => {
60		if (!isInView || !isValidUrl || metadata) return;
61 
62		let isMounted = true;
63 
64		async function fetchMetadata() {
65			setIsLoading(true);
66			setError(null);
67 
68			try {
69				// Fetch the URL directly
70				const response = await fetch(href);
71 
72				if (!response.ok) {
73					throw new Error("Failed to fetch URL");
74				}
75 
76				const html = await response.text();
77 
78				// Extract metadata from HTML
79				const getMetaTag = (name: string): string | null => {
80					const patterns = [
81						new RegExp(
82							`<meta[^>]*property=["']${name}["'][^>]*content=["']([^"']*)["']`,
83							"i",
84						),
85						new RegExp(
86							`<meta[^>]*name=["']${name}["'][^>]*content=["']([^"']*)["']`,
87							"i",
88						),
89						new RegExp(
90							`<meta[^>]*content=["']([^"']*)["'][^>]*property=["']${name}["']`,
91							"i",
92						),
93						new RegExp(
94							`<meta[^>]*content=["']([^"']*)["'][^>]*name=["']${name}["']`,
95							"i",
96						),
97					];
98 
99// … truncated