Add full SEO optimization for Spanglish social and language events
- Add comprehensive metadata to root layout with Open Graph, Twitter cards - Create dynamic sitemap.ts for all pages and events - Create robots.ts with proper allow/disallow rules - Add JSON-LD Event structured data to event detail pages - Add page-specific metadata to events, community, contact, FAQ pages - Add FAQ structured data schema - Update footer with local SEO text for Asunción, Paraguay - Add web manifest for mobile SEO - Create 404 page with proper noindex - Optimize image alt text and add lazy loading - Add NEXT_PUBLIC_SITE_URL env variable - Add about/ folder to gitignore
This commit is contained in:
root
@@ -0,0 +1,216 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState, useCallback } from 'react';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import { useLanguage } from '@/context/LanguageContext';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
google?: {
|
||||
accounts: {
|
||||
id: {
|
||||
initialize: (config: GoogleInitConfig) => void;
|
||||
renderButton: (element: HTMLElement | null, options: GoogleButtonOptions) => void;
|
||||
prompt: () => void;
|
||||
cancel: () => void;
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
interface GoogleInitConfig {
|
||||
client_id: string;
|
||||
callback: (response: GoogleCredentialResponse) => void;
|
||||
auto_select?: boolean;
|
||||
cancel_on_tap_outside?: boolean;
|
||||
}
|
||||
|
||||
interface GoogleButtonOptions {
|
||||
type?: 'standard' | 'icon';
|
||||
theme?: 'outline' | 'filled_blue' | 'filled_black';
|
||||
size?: 'large' | 'medium' | 'small';
|
||||
text?: 'signin_with' | 'signup_with' | 'continue_with' | 'signin';
|
||||
shape?: 'rectangular' | 'pill' | 'circle' | 'square';
|
||||
logo_alignment?: 'left' | 'center';
|
||||
width?: string | number;
|
||||
locale?: string;
|
||||
}
|
||||
|
||||
interface GoogleCredentialResponse {
|
||||
credential: string;
|
||||
select_by?: string;
|
||||
}
|
||||
|
||||
interface GoogleSignInButtonProps {
|
||||
onSuccess?: () => void;
|
||||
onError?: (error: string) => void;
|
||||
redirectTo?: string;
|
||||
text?: 'signin_with' | 'signup_with' | 'continue_with' | 'signin';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function GoogleSignInButton({
|
||||
onSuccess,
|
||||
onError,
|
||||
redirectTo = '/dashboard',
|
||||
text = 'continue_with',
|
||||
className = '',
|
||||
}: GoogleSignInButtonProps) {
|
||||
const buttonRef = useRef<HTMLDivElement>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [scriptLoaded, setScriptLoaded] = useState(false);
|
||||
const [scriptError, setScriptError] = useState(false);
|
||||
const { loginWithGoogle } = useAuth();
|
||||
const { locale } = useLanguage();
|
||||
|
||||
const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
|
||||
|
||||
const handleGoogleCallback = useCallback(
|
||||
async (response: GoogleCredentialResponse) => {
|
||||
if (!response.credential) {
|
||||
const errorMsg = locale === 'es' ? 'No se recibio credencial de Google' : 'No credential received from Google';
|
||||
onError?.(errorMsg);
|
||||
toast.error(errorMsg);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await loginWithGoogle(response.credential);
|
||||
toast.success(locale === 'es' ? 'Bienvenido!' : 'Welcome!');
|
||||
onSuccess?.();
|
||||
|
||||
// Use window.location for navigation to ensure clean state
|
||||
if (redirectTo) {
|
||||
window.location.href = redirectTo;
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Google login failed';
|
||||
const displayError = locale === 'es' ? 'Error al iniciar sesion con Google' : errorMessage;
|
||||
onError?.(displayError);
|
||||
toast.error(displayError);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
},
|
||||
[loginWithGoogle, locale, onSuccess, onError, redirectTo]
|
||||
);
|
||||
|
||||
const initializeGoogleSignIn = useCallback(() => {
|
||||
if (!clientId) {
|
||||
console.warn('Google Client ID not configured');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!window.google?.accounts?.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
window.google.accounts.id.initialize({
|
||||
client_id: clientId,
|
||||
callback: handleGoogleCallback,
|
||||
auto_select: false,
|
||||
cancel_on_tap_outside: true,
|
||||
});
|
||||
|
||||
if (buttonRef.current) {
|
||||
// Clear any existing button
|
||||
buttonRef.current.innerHTML = '';
|
||||
|
||||
window.google.accounts.id.renderButton(buttonRef.current, {
|
||||
type: 'standard',
|
||||
theme: 'outline',
|
||||
size: 'large',
|
||||
text: text,
|
||||
shape: 'rectangular',
|
||||
logo_alignment: 'left',
|
||||
width: 280,
|
||||
locale: locale === 'es' ? 'es' : 'en',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error initializing Google Sign-In:', error);
|
||||
setScriptError(true);
|
||||
}
|
||||
}, [clientId, handleGoogleCallback, text, locale]);
|
||||
|
||||
// Load Google Sign-In script
|
||||
useEffect(() => {
|
||||
if (!clientId) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if script is already loaded
|
||||
if (window.google?.accounts?.id) {
|
||||
setScriptLoaded(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if script tag already exists
|
||||
const existingScript = document.querySelector('script[src="https://accounts.google.com/gsi/client"]');
|
||||
if (existingScript) {
|
||||
// Script exists but may not be loaded yet
|
||||
existingScript.addEventListener('load', () => setScriptLoaded(true));
|
||||
existingScript.addEventListener('error', () => setScriptError(true));
|
||||
return;
|
||||
}
|
||||
|
||||
// Load the script
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://accounts.google.com/gsi/client';
|
||||
script.async = true;
|
||||
script.defer = true;
|
||||
script.onload = () => setScriptLoaded(true);
|
||||
script.onerror = () => setScriptError(true);
|
||||
document.head.appendChild(script);
|
||||
|
||||
return () => {
|
||||
// Cleanup is handled by checking for existing script
|
||||
};
|
||||
}, [clientId]);
|
||||
|
||||
// Initialize when script is loaded
|
||||
useEffect(() => {
|
||||
if (scriptLoaded) {
|
||||
// Small delay to ensure Google object is fully available
|
||||
const timer = setTimeout(initializeGoogleSignIn, 100);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [scriptLoaded, initializeGoogleSignIn]);
|
||||
|
||||
// Don't render if no client ID configured
|
||||
if (!clientId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (scriptError) {
|
||||
return (
|
||||
<div className={`text-center text-sm text-gray-500 py-2 ${className}`}>
|
||||
{locale === 'es'
|
||||
? 'Google Sign-In no disponible'
|
||||
: 'Google Sign-In unavailable'}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`relative ${className}`}>
|
||||
{/* Google Sign-In Button Container */}
|
||||
<div
|
||||
ref={buttonRef}
|
||||
className="flex justify-center min-h-[44px]"
|
||||
aria-label={locale === 'es' ? 'Iniciar sesion con Google' : 'Sign in with Google'}
|
||||
/>
|
||||
|
||||
{/* Loading overlay */}
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 bg-white/80 flex items-center justify-center rounded">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-secondary-blue" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user