✨ added iframe to projectspage

src/app/(main)/projects/[proj]/[year]/page.tsx

@@ -44,7 +44,7 @@ export default async function Page({ params }: Props) {
             <ProjectHeader
                 backlink={{ label: "projects", href: "/projects/all" }}
                 title={project.name.title}
-                primaryButton={project.primaryLink}
+                primaryButton={project.deploymentLink}
                 secondaryButton={project.secondaryLink}
             />
             <IndividualProject project={project} />

src/app/(main)/projects/[proj]/_components/IndividualProject.tsx

@@ -70,6 +70,15 @@ const IndividualProject = ({ project }: IndividualProjectProps) => {
                     ))}
                 </div>
             </div>
+            {/* deployment of website in an iframe */}
+            {project.deploymentLink?.href && (
+                <iframe
+                    src={project.deploymentLink.href}
+                    className="border-0v mt-8 h-screen w-full"
+                    title={`${project.name.extended ?? project.name.title} Website`}
+                    allowFullScreen
+                />
+            )}
         </div>
     );
 };

src/payload/collections/projects/ProjectsCollection.ts

@@ -123,23 +123,23 @@ export const ProjectsCollection: CollectionConfig = {
             type: "collapsible",
             fields: [
                 {
-                    name: "primaryLink",
+                    name: "deploymentLink",
                     type: "group",
                     fields: [
                         {
                             name: "label",
                             type: "text",
                             required: true,
                             admin: {
-                                placeholder: "Please type the first link's label here.",
+                                placeholder: "Please type the deployment link's label here.",
                             },
                         },
                         {
                             name: "href",
                             type: "text",
                             required: true,
                             admin: {
-                                placeholder: "Please type where the the first link should redirect to here.",
+                                placeholder: "Please type the deployment URL here.",
                             },
                         },
                     ],

src/payload/collections/projects/parseProject.ts

@@ -18,9 +18,9 @@ export function parseProject(cms: CMSProject): Project {
             description: cms.extendedDescription,
             image: media(cms.image),
         },
-        primaryLink: cms.primaryLink && {
-            label: cms.primaryLink.label,
-            href: cms.primaryLink.href,
+        deploymentLink: cms.deploymentLink && {
+            label: cms.deploymentLink.label,
+            href: cms.deploymentLink.href,
         },
         secondaryLink: cms.secondaryLink && {
             label: cms.secondaryLink.label,

src/payload/payload-types.ts

@@ -71,7 +71,6 @@ export interface Config {
     media: Media;
     event: Event;
     project: Project;
-    test: Test;
     partners: Partner;
     'payload-locked-documents': PayloadLockedDocument;
     'payload-preferences': PayloadPreference;
@@ -83,7 +82,6 @@ export interface Config {
     media: MediaSelect<false> | MediaSelect<true>;
     event: EventSelect<false> | EventSelect<true>;
     project: ProjectSelect<false> | ProjectSelect<true>;
-    test: TestSelect<false> | TestSelect<true>;
     partners: PartnersSelect<false> | PartnersSelect<true>;
     'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
     'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
@@ -156,7 +154,7 @@ export interface User {
  */
 export interface Media {
   id: number;
-  alt: string;
+  alt?: string | null;
   prefix?: string | null;
   updatedAt: string;
   createdAt: string;
@@ -186,6 +184,7 @@ export interface Event {
   page: {
     Description: string;
     image: number | Media;
+    gallery?: (number | Media)[] | null;
   };
   Partners?: (number | Partner)[] | null;
   updatedAt: string;
@@ -259,7 +258,7 @@ export interface Project {
   extendedName?: string | null;
   extendedDescription: string;
   image: number | Media;
-  primaryLink: {
+  deploymentLink: {
     label: string;
     href: string;
   };
@@ -286,84 +285,6 @@ export interface Project {
   updatedAt: string;
   createdAt: string;
 }
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "test".
- */
-export interface Test {
-  id: number;
-  slug: string;
-  year: string;
-  client: string;
-  name: {
-    default: string;
-    extended?: string | null;
-  };
-  description: string;
-  brief: {
-    description: string;
-    image: number | Media;
-  };
-  technologies: (
-    | 'html'
-    | 'css'
-    | 'javascript'
-    | 'typescript'
-    | 'node'
-    | 'react'
-    | 'vue'
-    | 'vite'
-    | 'tailwindcss'
-    | 'express'
-    | 'python'
-    | 'supabase'
-    | 'payload'
-    | 'notion'
-    | 'nextjs'
-    | 'astro'
-    | 'mongodb'
-    | 'firebase'
-    | 'postgresql'
-    | 'prisma'
-    | 'drizzleorm'
-    | 'redis'
-    | 'aws'
-    | 'fly'
-    | 'figma'
-    | 'motion'
-    | 'nextauth'
-    | 'vitest'
-    | 'twitch'
-  )[];
-  primaryLink: {
-    label: string;
-    href: string;
-  };
-  secondaryLink: {
-    label: string;
-    href: string;
-  };
-  team: {
-    manager: {
-      name: string;
-      image?: (number | null) | Media;
-    };
-    techlead: {
-      name: string;
-      image?: (number | null) | Media;
-    };
-    members?:
-      | {
-          name: string;
-          role: 'engineer' | 'designer';
-          image?: (number | null) | Media;
-          id?: string | null;
-        }[]
-      | null;
-  };
-  updatedAt: string;
-  createdAt: string;
-}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-locked-documents".
@@ -387,10 +308,6 @@ export interface PayloadLockedDocument {
         relationTo: 'project';
         value: number | Project;
       } | null)
-    | ({
-        relationTo: 'test';
-        value: number | Test;
-      } | null)
     | ({
         relationTo: 'partners';
         value: number | Partner;
@@ -488,6 +405,7 @@ export interface EventSelect<T extends boolean = true> {
     | {
         Description?: T;
         image?: T;
+        gallery?: T;
       };
   Partners?: T;
   updatedAt?: T;
@@ -509,7 +427,7 @@ export interface ProjectSelect<T extends boolean = true> {
   extendedName?: T;
   extendedDescription?: T;
   image?: T;
-  primaryLink?:
+  deploymentLink?:
     | T
     | {
         label?: T;
@@ -544,67 +462,6 @@ export interface ProjectSelect<T extends boolean = true> {
   updatedAt?: T;
   createdAt?: T;
 }
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "test_select".
- */
-export interface TestSelect<T extends boolean = true> {
-  slug?: T;
-  year?: T;
-  client?: T;
-  name?:
-    | T
-    | {
-        default?: T;
-        extended?: T;
-      };
-  description?: T;
-  brief?:
-    | T
-    | {
-        description?: T;
-        image?: T;
-      };
-  technologies?: T;
-  primaryLink?:
-    | T
-    | {
-        label?: T;
-        href?: T;
-      };
-  secondaryLink?:
-    | T
-    | {
-        label?: T;
-        href?: T;
-      };
-  team?:
-    | T
-    | {
-        manager?:
-          | T
-          | {
-              name?: T;
-              image?: T;
-            };
-        techlead?:
-          | T
-          | {
-              name?: T;
-              image?: T;
-            };
-        members?:
-          | T
-          | {
-              name?: T;
-              role?: T;
-              image?: T;
-              id?: T;
-            };
-      };
-  updatedAt?: T;
-  createdAt?: T;
-}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "partners_select".

src/types/models/Project.ts

@@ -22,7 +22,7 @@ export type Project = {
         description: string;
         image?: ImageType;
     };
-    primaryLink?: ButtonType;
+    deploymentLink?: ButtonType;
     secondaryLink?: ButtonType;
     technologies: string[];
     difficulty: Difficulty;

src/utils/payload/index.ts

@@ -9,16 +9,17 @@ export async function getPayload(): ReturnType<typeof getPayloadInstance> {
 /**
  * Type guard to restrict returned media fields from Payload to just the Media type.
  * Also adds a properly typed `src` field that mirrors the media.url field.
+ * Ensures `alt` is always a string, defaulting to empty string if null or undefined.
  *
  * @throws If the media object is a number, which is a sign that the media object is too deep.
  * @param media The media object from Payload.
  */
-export function media(media: Media | number): Media & { src: string } {
+export function media(media: Media | number): Media & { src: string; alt: string } {
     if (typeof media === "number") {
         // Probably should automatically requery for an actual media object here.
         // See https://payloadcms.com/community-help/discord/property-sizes-does-not-exist-on-type-number-media
         throw new Error("Detected a media object from Payload that exceeded the depth of the query.");
     }
 
-    return { ...media, src: media.url ?? "" };
+    return { ...media, src: media.url ?? "", alt: media.alt ?? "" };
 }