Fix logo url rendering and banner cropping
This commit is contained in:
parent
b637a2e445
commit
022f2be5e8
Binary file not shown.
@ -68,7 +68,15 @@ export default async function EntityPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<EntityLogoField initialUrl={entity?.logotipo || ''} />
|
{(() => {
|
||||||
|
const ENDPOINT = process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || 'https://appwrite.almeira.com.co/v1';
|
||||||
|
const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '69b84df5003bd8957c5c';
|
||||||
|
let logoUrl = entity?.logotipo || '';
|
||||||
|
if (logoUrl && !logoUrl.startsWith('http') && !logoUrl.startsWith('/')) {
|
||||||
|
logoUrl = `${ENDPOINT}/storage/buckets/media/files/${logoUrl}/view?project=${PROJECT_ID}`;
|
||||||
|
}
|
||||||
|
return <EntityLogoField initialUrl={logoUrl} />;
|
||||||
|
})()}
|
||||||
|
|
||||||
<div className="flex items-center gap-3 bg-slate-950 p-4 border border-slate-800 rounded-xl">
|
<div className="flex items-center gap-3 bg-slate-950 p-4 border border-slate-800 rounded-xl">
|
||||||
<input type="checkbox" name="mostrar_texto_logo" value="true" defaultChecked={entity?.mostrar_texto_logo === true} id="mostrar_texto_logo" className="w-5 h-5 accent-cyan-500 cursor-pointer" />
|
<input type="checkbox" name="mostrar_texto_logo" value="true" defaultChecked={entity?.mostrar_texto_logo === true} id="mostrar_texto_logo" className="w-5 h-5 accent-cyan-500 cursor-pointer" />
|
||||||
|
|||||||
@ -11,11 +11,19 @@ import "./globals.css";
|
|||||||
export async function generateMetadata(): Promise<Metadata> {
|
export async function generateMetadata(): Promise<Metadata> {
|
||||||
const entity = await getEntity();
|
const entity = await getEntity();
|
||||||
const razonSocial = entity?.razon_social || "Almeira Producciones";
|
const razonSocial = entity?.razon_social || "Almeira Producciones";
|
||||||
|
|
||||||
|
const ENDPOINT = process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || 'https://appwrite.almeira.com.co/v1';
|
||||||
|
const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '69b84df5003bd8957c5c';
|
||||||
|
let logoUrl = entity?.logotipo || null;
|
||||||
|
if (logoUrl && !logoUrl.startsWith('http') && !logoUrl.startsWith('/')) {
|
||||||
|
logoUrl = `${ENDPOINT}/storage/buckets/media/files/${logoUrl}/view?project=${PROJECT_ID}`;
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
title: `${razonSocial} | Vanguardia Digital`,
|
title: `${razonSocial} | Vanguardia Digital`,
|
||||||
description: "El portal de noticias y streaming hiperconectado.",
|
description: "El portal de noticias y streaming hiperconectado.",
|
||||||
icons: {
|
icons: {
|
||||||
icon: entity?.logotipo || "/favicon.ico",
|
icon: logoUrl || "/favicon.ico",
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,6 +5,13 @@ import { Radio } from 'lucide-react';
|
|||||||
export default async function LoginPage() {
|
export default async function LoginPage() {
|
||||||
const entity = await getEntity();
|
const entity = await getEntity();
|
||||||
|
|
||||||
|
const ENDPOINT = process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || 'https://appwrite.almeira.com.co/v1';
|
||||||
|
const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '69b84df5003bd8957c5c';
|
||||||
|
let logoUrl = entity?.logotipo || null;
|
||||||
|
if (logoUrl && !logoUrl.startsWith('http') && !logoUrl.startsWith('/')) {
|
||||||
|
logoUrl = `${ENDPOINT}/storage/buckets/media/files/${logoUrl}/view?project=${PROJECT_ID}`;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-[#0f172a] flex flex-col justify-center items-center p-4">
|
<div className="min-h-screen bg-[#0f172a] flex flex-col justify-center items-center p-4">
|
||||||
<div className="w-full max-w-md bg-slate-900 border border-slate-800 rounded-2xl shadow-2xl overflow-hidden animate-fade-in relative z-10">
|
<div className="w-full max-w-md bg-slate-900 border border-slate-800 rounded-2xl shadow-2xl overflow-hidden animate-fade-in relative z-10">
|
||||||
@ -14,15 +21,15 @@ export default async function LoginPage() {
|
|||||||
|
|
||||||
<div className="p-8">
|
<div className="p-8">
|
||||||
<div className="flex flex-col items-center justify-center text-center mb-8 relative z-10">
|
<div className="flex flex-col items-center justify-center text-center mb-8 relative z-10">
|
||||||
{entity?.logotipo ? (
|
{logoUrl ? (
|
||||||
<img src={entity.logotipo} alt={entity?.razon_social || "Logo"} className="h-20 w-auto max-w-full shrink-0 object-contain mb-4 drop-shadow-[0_0_15px_rgba(255,255,255,0.1)]" />
|
<img src={logoUrl} alt={entity?.razon_social || "Logo"} className="h-20 w-auto max-w-full shrink-0 object-contain mb-4 drop-shadow-[0_0_15px_rgba(255,255,255,0.1)]" />
|
||||||
) : (
|
) : (
|
||||||
<div className="bg-gradient-to-br from-cyan-500 to-blue-600 p-4 rounded-2xl text-white shadow-lg mb-4 border border-white/20">
|
<div className="p-4 rounded-2xl bg-gradient-to-br from-cyan-500 to-blue-600 text-white shadow-lg mb-4">
|
||||||
<Radio size={32} className="animate-pulse" />
|
<Radio size={48} className="animate-pulse" />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{(!entity?.logotipo || entity?.mostrar_texto_logo) && (
|
{(!logoUrl || entity?.mostrar_texto_logo) && (
|
||||||
<h1 className="text-3xl font-black text-white mb-2 uppercase tracking-wide font-outfit">
|
<h1 className="text-3xl font-black text-white mb-2 uppercase tracking-wide font-outfit">
|
||||||
{entity?.razon_social || "Almeira PRO"}
|
{entity?.razon_social || "Almeira PRO"}
|
||||||
</h1>
|
</h1>
|
||||||
|
|||||||
@ -11,6 +11,13 @@ export const Navbar = ({ entity }: { entity?: any }) => {
|
|||||||
const [user, setUser] = useState<any>(null);
|
const [user, setUser] = useState<any>(null);
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
|
||||||
|
const ENDPOINT = process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || 'https://appwrite.almeira.com.co/v1';
|
||||||
|
const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '69b84df5003bd8957c5c';
|
||||||
|
let logoUrl = entity?.logotipo || null;
|
||||||
|
if (logoUrl && !logoUrl.startsWith('http') && !logoUrl.startsWith('/')) {
|
||||||
|
logoUrl = `${ENDPOINT}/storage/buckets/media/files/${logoUrl}/view?project=${PROJECT_ID}`;
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleScroll = () => setScrolled(window.scrollY > 20);
|
const handleScroll = () => setScrolled(window.scrollY > 20);
|
||||||
window.addEventListener('scroll', handleScroll);
|
window.addEventListener('scroll', handleScroll);
|
||||||
@ -41,10 +48,10 @@ export const Navbar = ({ entity }: { entity?: any }) => {
|
|||||||
|
|
||||||
{/* Brand Logo Holográfico */}
|
{/* Brand Logo Holográfico */}
|
||||||
<Link href="/" className="flex items-center gap-3 group">
|
<Link href="/" className="flex items-center gap-3 group">
|
||||||
{entity?.logotipo ? (
|
{logoUrl ? (
|
||||||
<div className="relative flex items-center shrink-0">
|
<div className="relative flex items-center shrink-0">
|
||||||
<div className="absolute inset-0 bg-transparent blur-md opacity-50 group-hover:opacity-100 transition-opacity rounded-xl"></div>
|
<div className="absolute inset-0 bg-transparent blur-md opacity-50 group-hover:opacity-100 transition-opacity rounded-xl"></div>
|
||||||
<img src={entity.logotipo} alt={entity?.razon_social || "Logo"} className="h-10 md:h-12 w-auto max-w-[180px] md:max-w-[240px] object-contain relative z-10 group-hover:scale-105 transition-transform drop-shadow-lg shrink-0" />
|
<img src={logoUrl} alt={entity?.razon_social || "Logo"} className="h-10 md:h-12 w-auto max-w-[180px] md:max-w-[240px] object-contain relative z-10 group-hover:scale-105 transition-transform drop-shadow-lg shrink-0" />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
@ -55,7 +62,7 @@ export const Navbar = ({ entity }: { entity?: any }) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{(!entity?.logotipo || entity?.mostrar_texto_logo) && (
|
{(!logoUrl || entity?.mostrar_texto_logo) && (
|
||||||
<span className="text-2xl font-black tracking-tight text-white flex gap-1 font-outfit uppercase">
|
<span className="text-2xl font-black tracking-tight text-white flex gap-1 font-outfit uppercase">
|
||||||
{entity?.razon_social ? (
|
{entity?.razon_social ? (
|
||||||
entity.razon_social.split(' ').map((word: string, i: number, arr: string[]) =>
|
entity.razon_social.split(' ').map((word: string, i: number, arr: string[]) =>
|
||||||
|
|||||||
@ -58,13 +58,13 @@ export default function TopBanner({ initialBanners, rotationSeconds }: { initial
|
|||||||
{/* Metric Impression Observer resets key on change to fire new impression */}
|
{/* Metric Impression Observer resets key on change to fire new impression */}
|
||||||
<MetricObserver key={activeBanner.$id} postId={activeBanner.$id} />
|
<MetricObserver key={activeBanner.$id} postId={activeBanner.$id} />
|
||||||
|
|
||||||
<div onClick={recordClickAndGo} className={`w-full h-auto flex ${activeBanner.url_destino ? 'cursor-pointer' : ''}`}>
|
<div onClick={recordClickAndGo} className={`w-full block ${activeBanner.url_destino ? 'cursor-pointer' : ''}`}>
|
||||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||||
<img
|
<img
|
||||||
key={activeBanner.$id}
|
key={activeBanner.$id}
|
||||||
src={imgUrl}
|
src={imgUrl}
|
||||||
alt={activeBanner.titulo}
|
alt={activeBanner.titulo}
|
||||||
className="w-full h-auto object-contain animate-fade-in"
|
className="w-full h-auto block animate-fade-in"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{activeBanner.url_destino && (
|
{activeBanner.url_destino && (
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user