brian/briannelson.dev
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

data fetching

Browse Source
This commit is contained in:
Brian Nelson
2025-10-21 12:38:50 -04:00
parent 34ba94e2cb
commit bada44fec3
8 changed files with 122 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
bun.lock
View File

@@ -11,6 +11,7 @@
"@payloadcms/plugin-seo": "^3.59.1",
"@payloadcms/richtext-lexical": "3.59.1",
"@payloadcms/ui": "3.59.1",
"@portabletext/react": "^4.0.3",
"@radix-ui/react-slot": "^1.2.3",
"@tailwindcss/postcss": "^4.1.14",
"class-variance-authority": "^0.7.1",
@@ -497,6 +498,12 @@
"@playwright/test": ["@playwright/test@1.54.1", "", { "dependencies": { "playwright": "1.54.1" }, "bin": { "playwright": "cli.js" } }, "sha512-FS8hQ12acieG2dYSksmLOF7BNxnVf2afRJdCuM1eMSxj6QTSE6G4InGF7oApGgDb65MX7AwMVlIkpru0yZA4Xw=="],
"@portabletext/react": ["@portabletext/react@4.0.3", "", { "dependencies": { "@portabletext/toolkit": "^3.0.1", "@portabletext/types": "^2.0.15" }, "peerDependencies": { "react": "^18.2 || ^19" } }, "sha512-sdVSXbi0L5MBVb1Ch5KwbBPZjW/Oqe6s5ZkPi4LcItzHl8rqY2jB0VxsFaGywZyn8Jc47cGLaOtyBM9HkW/9Hg=="],
"@portabletext/toolkit": ["@portabletext/toolkit@3.0.1", "", { "dependencies": { "@portabletext/types": "^2.0.15" } }, "sha512-z8NGqxKxfP0zuC58hPe8+xFC17qSbQ3nC9DgZmhrr7NUFaENJ6vAHJBsH5QzT7nKUjj++dTn+i4O2Uz9cqiGjA=="],
"@portabletext/types": ["@portabletext/types@2.0.15", "", {}, "sha512-2e6i2gSQsrA/5OL5Gm4/9bxB9MNO73Fa47zj+0mT93xkoQUCGCWX5fZh1YBJ86hszaRYlqvqG08oULxvvPPp/Q=="],
"@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
"@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],

1
package.json
View File

@@ -26,6 +26,7 @@
"@payloadcms/plugin-seo": "^3.59.1",
"@payloadcms/richtext-lexical": "3.59.1",
"@payloadcms/ui": "3.59.1",
"@portabletext/react": "^4.0.3",
"@radix-ui/react-slot": "^1.2.3",
"@tailwindcss/postcss": "^4.1.14",
"class-variance-authority": "^0.7.1",

7
src/app/(frontend)/[slug]/page.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react'
export default function SinglePage() {
return (
<div>SinglePage</div>
)
}

4
src/app/(frontend)/globals.css
View File

@@ -164,3 +164,7 @@ svg {
}
}
}
h2 {
@apply text-3xl font-bold
}

2
src/app/(frontend)/page.tsx
View File

@@ -90,7 +90,7 @@ export default async function HomePage() {
.filter((item) => !item.featuredProject)
.map((item) => (
<article key={item.id} className="border-2 border-white rounded">
<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>

31
src/app/(frontend)/projects/[slug]/page.tsx Normal file
View File

@@ -0,0 +1,31 @@
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 } }) {
const fetchData = await SINGLE_PROJECT_QUERY(params.slug)
const pageData = fetchData.docs[0];
// console.log(pageData)
return (
<article className='max-w-4xl mx-auto'>
<h1 className='text-center'>{pageData.title}</h1>
{pageData.featuredImage && (
<Image
src={pageData.featuredImage.url}
height={1000}
width={1000}
alt={pageData.featuredImage.alt}
/>
)}
<div className='max-w-2xl mx-auto content'>
{pageData.richText && (
<RichText data={pageData.richText}/>
)}
</div>
</article>
)
}

57
src/components/RichTextComponents.tsx Normal file
View File

@@ -0,0 +1,57 @@
import Image from 'next/image';
import Link from 'next/link';
export const RichTextComponent: any = {
types: {
image: ({ value }: any) => {
return (
<div className='relative w-full h-96 mt-6 mx-auto'>
{/* <Image
className='object-contain'
src={urlFor(value).url()}
alt={value.alt}
fill
/> */}
</div>
);
},
},
list: {
bullet: ({ children }: any) => {
<ul className='ml-10 py-5 list-disc space-y-5'>{children}</ul>
},
number: ({ children }: any) => {
<ol className='mt=lg list-decimal'>{children}</ol>
},
},
block: {
// Ex. 1: customizing common block types
h1: ({children}: any) => <h1 className="text-2xl">{children}</h1>,
h2: ({ children }: any) => <h2 className='text-4xl py-6 font-bold'>{children}</h2>,
h3: ({ children }: any) => <h3 className='text-3xl py-6 font-bold'>{children}</h3>,
h4: ({ children }: any) => <h4 className='text-2xl py-6 font-bold'>{children}</h4>,
blockquote: ({ children }: any) => (
<blockquote className='border-l-slate-500 border-l-4 pl-5 py-5 my-5'>
{children}
</blockquote>
),
normal: ({children}: any) => <p className='my-2'>{children}</p>
},
marks: {
link: ({ children, value }: any) => {
const rel = !value.href.startsWith("")
? "noreferrer noopener"
: undefined;
return (
<Link
href={value.href}
rel={rel}
className="underline decoration-slate-800 text-purple-600 dark:text-purple-500"
>
{children}
</Link>
)
}
}
}

16
utilities/queries.ts
View File

@@ -24,6 +24,18 @@ export const PROJECT_QUERY = await payload.find({
order: true,
categories: true,
featuredProject: true,
},
},
sort: '-order'
})
})
export const SINGLE_PROJECT_QUERY = async (slug: string) => {
return await payload.find({
collection: 'projects',
where: {
slug: {
equals: slug
}
},
limit: 1
}
)}