36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
interface ObfuscatedMailtoProps {
|
|
email: string;
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Renders an email link that only becomes a clickable mailto: link after client-side hydration.
|
|
* This prevents Cloudflare's Email Obfuscation from breaking the link in the static HTML,
|
|
* which causes crawlers like Ahrefs to report 404 errors on /cdn-cgi/l/email-protection.
|
|
*/
|
|
export function ObfuscatedMailto({ email, className, children }: ObfuscatedMailtoProps) {
|
|
const [isMounted, setIsMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsMounted(true);
|
|
}, []);
|
|
|
|
// Before hydration, render as obfuscated text to avoid Cloudflare manipulation
|
|
if (!isMounted) {
|
|
const obfuscatedEmail = email.replace('@', ' [at] ').replace(/\./g, ' [dot] ');
|
|
return <span className={className}>{children || obfuscatedEmail}</span>;
|
|
}
|
|
|
|
// After hydration, render as a proper mailto link
|
|
return (
|
|
<a href={`mailto:${email}`} className={className}>
|
|
{children || email}
|
|
</a>
|
|
);
|
|
}
|