addded categories to pages and alert text to settings

next.config.mjs

@@ -12,6 +12,17 @@ const nextConfig = {
 
     return webpackConfig
   },
+
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'http',
+        hostname: 'localhost',
+        port: '3000',
+        pathname: '/api/media/**',
+      },
+    ],
+  },
 }
 
 export default withPayload(nextConfig, { devBundleServerPackages: false })

src/app/(frontend)/globals.css

@@ -100,7 +100,7 @@ svg {
   padding: 45px;
   max-width: 1024px;
   margin: 0 auto;
-  overflow: hidden;
+  /* overflow: hidden; */
 
   @media (max-width: 400px) {
     padding: 24px;

src/app/(frontend)/page.tsx

@@ -26,7 +26,6 @@ export default async function HomePage() {
       <div className="content">
         {page && (
           <div>
-            <h1 className='text-4xl font-bold'>{page.title}</h1>
             <div>
               {page.richText && (
                 <RichText data={page.richText}/>
@@ -68,7 +67,7 @@ export default async function HomePage() {
         <p>Update this page by editing</p>
         <code>app/(frontend)/page.tsx</code>
       </div>
-      <div>
+      <div className='pb-10'>
         {projects.docs.length > 0 && (
           <div className='space-y-4'>
             {projects.docs
@@ -78,7 +77,7 @@ export default async function HomePage() {
                     key={item.id}
                     className="border-2 border-white rounded col-span-full" // full width styling
                   >
-                    <Link className="no-decoration" href={`/${item.slug}`}>
+                    <Link className="no-decoration" href={`/projects/${item.slug}`}>
                       <h3 className="text-lg font-bold">{item.title}</h3>
                       <p>{item.description}</p>
                     </Link>

src/app/(frontend)/projects/[slug]/page.tsx

@@ -1,29 +1,56 @@
 import { SINGLE_PROJECT_QUERY } from '@/utilities/queries'
 import React from 'react'
-import { PortableText } from "@portabletext/react"
-import { RichTextComponent } from '@/src/components/RichTextComponents'
 import Image from 'next/image'
 import { RichText } from '@payloadcms/richtext-lexical/react'
 
-export default async function SingleProjectPage({ params }: { params: { slug: string } }) {
+type Media = {
-    const fetchData = await SINGLE_PROJECT_QUERY(params.slug)
+    id: string | number;
-    const pageData = fetchData.docs[0];
+    url: string;
-    // console.log(pageData)
+    alt?: string;
+};
+
+type Project = {
+    id: string | number;
+    title: string;
+    featuredImage?: number | Media;
+    description?: string;
+    richText?: any;
+    link?: any;
+    github?: any;
+    slug: string;
+    categories?: any[]
+    createdAt: string;
+};
+
+export default async function SingleProjectPage({ 
+    params 
+}: { 
+    params: Promise<{ slug: string }>
+}) {
+    // await the slug from the page
+    const { slug } = await params;
+
+    // use the awaited slug for the query
+    const { docs } = await SINGLE_PROJECT_QUERY(slug)
+    const project = docs[0] as Project
+
+    const img = project.featuredImage as Media | undefined;
+    const src = img?.url ?? '';
 
     return (
         <article className='max-w-4xl mx-auto'>
-            <h1 className='text-center'>{pageData.title}</h1>
+            <h1 className='text-center'>{project.title}</h1>
-            {pageData.featuredImage && (
+            {project.featuredImage && (
                 <Image
-                    src={pageData.featuredImage.url}
+                    src={src}
                     height={1000}
                     width={1000}
-                    alt={pageData.featuredImage.alt}
+                    alt={img?.alt ?? project.title}
                 />
             )}
-            <div className='max-w-2xl mx-auto content'>
+            <div className='max-w-2xl mx-auto'>
-                {pageData.richText && (
+                {project.richText && (
-                    <RichText data={pageData.richText}/>
+                    <RichText data={project.richText}/>
                 )}
             </div>
         </article>

src/collections/Page.ts

@@ -58,8 +58,15 @@ export const Page: CollectionConfig = {
                 },
             ]
         },
-        
         slugField(),
-        
+        {
+            name: 'categories',
+            type: 'relationship',
+            hasMany: true,
+            relationTo: 'categories',
+            admin: {
+                position: 'sidebar'
+            }
+        },
     ],
 }

src/collections/Settings/index.ts

@@ -7,12 +7,20 @@ export const Settings: GlobalConfig = {
             type: 'tabs',
             tabs: [
                 {
-                    label: 'Contact',
+                    label: 'All Settings',
                     fields: [
                         {
                             name: 'email',
                             label: 'Contact Email',
                             type: 'email'
+                        },
+                        {
+                            name: 'alertBanner',
+                            label: 'Alert Banner',
+                            type: 'text',
+                            admin: {
+                                description: 'If there is text here an alert will show'
+                            }
                         }
                     ]
                 },

src/payload-types.ts

@@ -160,6 +160,7 @@ export interface Page {
    */
   generateSlug?: boolean | null;
   slug: string;
+  categories?: (number | Category)[] | null;
   updatedAt: string;
   createdAt: string;
 }
@@ -182,6 +183,21 @@ export interface Media {
   focalX?: number | null;
   focalY?: number | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "categories".
+ */
+export interface Category {
+  id: number;
+  title: string;
+  /**
+   * When enabled, the slug will auto-generate from the title field on save and autosave.
+   */
+  generateSlug?: boolean | null;
+  slug: string;
+  updatedAt: string;
+  createdAt: string;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "projects".
@@ -219,21 +235,6 @@ export interface Project {
   updatedAt: string;
   createdAt: string;
 }
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "categories".
- */
-export interface Category {
-  id: number;
-  title: string;
-  /**
-   * When enabled, the slug will auto-generate from the title field on save and autosave.
-   */
-  generateSlug?: boolean | null;
-  slug: string;
-  updatedAt: string;
-  createdAt: string;
-}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users".
@@ -345,6 +346,7 @@ export interface PagesSelect<T extends boolean = true> {
       };
   generateSlug?: T;
   slug?: T;
+  categories?: T;
   updatedAt?: T;
   createdAt?: T;
 }
@@ -459,6 +461,10 @@ export interface PayloadMigrationsSelect<T extends boolean = true> {
 export interface Setting {
   id: number;
   email?: string | null;
+  /**
+   * If there is text here an alert will show
+   */
+  alertBanner?: string | null;
   updatedAt?: string | null;
   createdAt?: string | null;
 }
@@ -492,6 +498,7 @@ export interface Header {
  */
 export interface SettingsSelect<T extends boolean = true> {
   email?: T;
+  alertBanner?: T;
   updatedAt?: T;
   createdAt?: T;
   globalType?: T;

utilities/queries.ts

@@ -36,6 +36,7 @@ export const SINGLE_PROJECT_QUERY = async (slug: string) => {
                 equals: slug
             }
         },
-        limit: 1
+        limit: 1,
+        depth: 1,
     }
 )}