Add renderUrl support to ProjectPreview for improved authentication handling

DefinetlyNotAI · DefinetlyNotAI · commit 3f2deb179109 · 2025-12-23T01:01:39.000+04:00
Refactor ProjectPreview component to use async data fetching with error handling and remove loading state

Fixes preview bug
diff --git a/app/page.tsx b/app/page.tsx
@@ -26,15 +26,19 @@ export default async function DashboardPage() {
             </header>
 
             <main className="container mx-auto px-4 py-8">
-                <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                <div className="grid gap-6 grid-cols-1">
                     {projectStatuses.map(({status, ...project}) => (
                         <Link
                             key={project.slug}
                             href={`/${project.slug}`}
                             className="group transition-transform hover:scale-[1.02]"
                         >
                             <Card className="h-full overflow-hidden border-2 transition-colors hover:border-primary">
-                                <ProjectPreview url={project.visitLink} title={project.title}/>
+                                <ProjectPreview
+                                    url={project.visitLink}
+                                    title={project.title}
+                                    renderUrl={project.renderUrl}
+                                />
 
                                 <CardHeader>
                                     <div className="flex items-start justify-between gap-2">
diff --git a/components/project-preview.tsx b/components/project-preview.tsx
@@ -5,14 +5,18 @@ import {ExternalLink} from "lucide-react"
 interface ProjectPreviewProps {
     url: string
     title: string
+    renderUrl?: string
 }
 
-export async function ProjectPreview({url, title}: ProjectPreviewProps) {
+export async function ProjectPreview({url, title, renderUrl}: ProjectPreviewProps) {
     let htmlContent = ""
     let error = false
 
+    // Use renderUrl if provided, otherwise use the regular url
+    const urlToFetch = renderUrl || url
+
     try {
-        const response = await fetch(url, {
+        const response = await fetch(urlToFetch, {
             headers: {
                 "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
             },
@@ -46,11 +50,12 @@ export async function ProjectPreview({url, title}: ProjectPreviewProps) {
 
             // Get the base URL (in case of redirects, use the final URL)
             const baseUrl = new URL(response.url)
-            const baseHref = `${baseUrl.protocol}//${baseUrl.host}`
+            // Use the full origin with trailing slash to ensure all resources load correctly
+            const baseHref = baseUrl.origin + '/'
 
             // Inject base tag, CSP meta tag (blocking all scripts), and no-scroll style in the head
-            const baseTag = `<base href="${baseHref}/">`
-            const cspMeta = `<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'none'; style-src 'self' 'unsafe-inline' https:; img-src * data: blob:; font-src * data:; connect-src * data: blob:;">`
+            const baseTag = `<base href="${baseHref}">`
+            const cspMeta = `<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'none'; style-src * 'unsafe-inline'; img-src * data: blob:; font-src * data:; connect-src * data: blob:;">`
             const noScrollStyle = `<style>html, body { overflow: hidden !important; }</style>`
 
             if (html.includes('<head>')) {
@@ -70,7 +75,7 @@ export async function ProjectPreview({url, title}: ProjectPreviewProps) {
     }
 
     return (
-        <div className="relative aspect-video w-full overflow-hidden bg-muted rounded-lg border border-border">
+        <div className="relative w-full h-48 overflow-hidden bg-muted rounded-lg border border-border">
             {error ? (
                 <div className="flex h-full items-center justify-center text-muted-foreground p-4">
                     <div className="text-center">
diff --git a/lib/projectData.ts b/lib/projectData.ts
@@ -6,6 +6,7 @@ export const projects: Project[] = [
         title: "WESMUN Email",
         description: "Read-only Web-based email client platform for WESMUN with authenticated access, account-scoped mailboxes, and attachment handling.",
         visitLink: "https://email.wesmun.com",
+        renderUrl: "https://email.wesmun.com/login", // Use login page for preview to avoid auth issues
         routes: [
             {
                 path: "/",
diff --git a/types/types.ts b/types/types.ts
@@ -12,6 +12,7 @@ export interface Project {
     title: string
     description: string
     visitLink: string
+    renderUrl?: string
     routes: Route[]
 }
 

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ export const projects: Project[] = [`
`6`	`6`	`title: "WESMUN Email",`
`7`	`7`	`description: "Read-only Web-based email client platform for WESMUN with authenticated access, account-scoped mailboxes, and attachment handling.",`
`8`	`8`	`visitLink: "https://email.wesmun.com",`
	`9`	`+ renderUrl: "https://email.wesmun.com/login", // Use login page for preview to avoid auth issues`
`9`	`10`	`routes: [`
`10`	`11`	`{`
`11`	`12`	`path: "/",`
Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@ export interface Project {`
`12`	`12`	`title: string`
`13`	`13`	`description: string`
`14`	`14`	`visitLink: string`
	`15`	`+ renderUrl?: string`
`15`	`16`	`routes: Route[]`
`16`	`17`	`}`
`17`	`18`