feat: add team members functionality schemas

components/pages/home/HomePage.tsx

@@ -48,7 +48,7 @@ export function HomePage({ data, encodeDataAttribute }: HomePageProps) {
       )}
 
       {showcaseProjects && showcaseProjects.length > 0 && (
-        <div className="w-full grid grid-cols-2 flex-wrap gap-6 p-6">
+        <div className="w-full grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 flex-wrap gap-6 p-6">
           {showcaseProjects.map((project, key) => {
             const href = resolveHref(project._type, project.slug)
             if (!href) {

components/pages/home/PostListItem.tsx

@@ -2,6 +2,7 @@ import type { PortableTextBlock } from '@portabletext/types'
 import clsx from 'clsx'
 
 import { CustomPortableText } from '@/components/shared/CustomPortableText'
+import ImageBox from '@/components/shared/ImageBox'
 import type { ShowcasePost } from '@/types'
 
 interface PostProps {
@@ -11,26 +12,51 @@ interface PostProps {
 
 export function PostListItem(props: PostProps) {
   const { post, odd } = props
+  const formattedDate = new Date(post.publishedAt as string).toLocaleDateString('en-US')
+  const daysAgo = Math.floor((new Date().getTime() - new Date(post.publishedAt as string).getTime()) / (1000 * 3600 * 24))
 
   return (
     <div
       className={clsx([
-        'border-b p-6',
+        'border-b p-12 flex flex-row gap-4',
         'border-slate-500 hover:bg-white',
         'dark:border-black dark:hover:bg-black',
         odd && ''
       ])}
     >
-      <h2 className={clsx([
-        'text-xl font-extrabold tracking-tight p-5',
-      ])}>{post.title} {post.publishedAt?.toString()}</h2>
+      <div className='basis-1/4'>
+        <ImageBox
+          image={post.coverImage}
+          alt={`Cover image from ${post.title}`}
+          classesWrapper='relative aspect-[16/9]'
+        />
+      </div>
 
       <div className={clsx([
-        'p-5 text-xl font-sans',
+        'p-5 basis-1/2'
       ])}>
-        <CustomPortableText value={post.body?.slice(0,3) as PortableTextBlock[]} />
+        <p>{`${formattedDate} (${daysAgo} days ago)`}</p>
+
+        <h2 className={clsx([
+          'text-xl font-extrabold tracking-tight'
+        ])}>{post.title}</h2>
+
+        <div className={clsx([
+          'flex flex-row gap-x-2 font-mono',
+        ])}>
+          {post.categories?.map((tag, key) => (
+            <div className='text-md font-medium lowercase md:text-lg' key={key}>
+              #{tag}
+            </div>
+          ))}
+        </div>
       </div>
 
+      <div className={clsx([
+        'p-5 text-xl font-sans',
+      ])}>
+        <CustomPortableText value={post.overview as PortableTextBlock[]} />
+      </div>
     </div>
   )
 }

components/pages/home/ProjectListItem.tsx

@@ -37,7 +37,7 @@ export function ProjectListItem(props: ProjectProps) {
       </div>
 
       <div className={clsx([
-        'border-t p-5 text-xl font-sans min-h-[97px]',
+        'border-t p-5 text-lg font-sans min-h-[125px]',
         'border-slate-500',
         'dark:border-black',
       ])}>

sanity.config.ts

@@ -13,6 +13,7 @@ import { locate } from '@/sanity/plugins/locate'
 import { pageStructure, singletonPlugin } from '@/sanity/plugins/settings'
 import page from '@/sanity/schemas/documents/page'
 import post from '@/sanity/schemas/documents/post'
+import member from '@/sanity/schemas/documents/member'
 import project from '@/sanity/schemas/documents/project'
 import duration from '@/sanity/schemas/objects/duration'
 import milestone from '@/sanity/schemas/objects/milestone'
@@ -38,11 +39,12 @@ export default defineConfig({
       home,
       settings,
       // Documents
-      duration,
       page,
       project,
       post,
+      member,
       // Objects
+      duration,
       milestone,
       timeline,
       socialLink,

sanity/lib/queries.ts

@@ -15,8 +15,11 @@ export const homePageQuery = groq`
     showcasePosts[]->{
       _type,
       body,
+      overview,
+      coverImage,
       "slug": slug.current,
       publishedAt,
+      categories,
       title,
     },
     title,

sanity/plugins/locate.ts

@@ -17,6 +17,7 @@ export const locate: DocumentLocationResolver = (params, context) => {
   if (
     params.type === 'home' ||
     params.type === 'page' ||
+    params.type === 'post' ||
     params.type === 'project'
   ) {
     const doc$ = context.documentStore.listenQuery(
@@ -87,6 +88,22 @@ export const locate: DocumentLocationResolver = (params, context) => {
                 ? 'This document is used on all pages as it is in the top menu'
                 : undefined,
             } satisfies DocumentLocationsState
+          case 'post':
+            return {
+              locations: docs
+                ?.map((doc) => {
+                  const href = resolveHref(doc._type, doc?.slug?.current)
+                  return {
+                    title: doc?.title || 'Untitled',
+                    href: href!,
+                  }
+                })
+                .filter((doc) => doc.href !== undefined),
+              tone: isReferencedBySettings ? 'caution' : undefined,
+              message: isReferencedBySettings
+                ? 'This document is used on all pages as it is in the top menu'
+                : undefined,
+            } satisfies DocumentLocationsState
           default:
             return {
               message: 'Unable to map document type to locations',

sanity/schemas/documents/member.ts

@@ -0,0 +1,95 @@
+import { RocketIcon } from '@sanity/icons'
+import { defineArrayMember, defineField } from 'sanity'
+
+export default {
+  name: 'member',
+  title: 'Member',
+  type: 'document',
+  icon: RocketIcon,
+  fields: [
+    defineField({
+      name: 'title',
+      description: 'This field is the name of the team member.',
+      title: 'Title',
+      type: 'string',
+      validation: (rule) => rule.required(),
+    }),
+    defineField({
+      name: 'slug',
+      title: 'Slug',
+      type: 'slug',
+      options: {
+        source: 'title',
+        maxLength: 96,
+        isUnique: (value, context) => context.defaultIsUnique(value, context),
+      },
+      validation: (rule) => rule.required(),
+    }),
+    defineField({
+      name: 'shortName',
+      description: 'This field is the displayed short name of the team member.',
+      title: 'Displayed name',
+      type: 'string',
+      validation: (rule) => rule.required(),
+    }),
+    defineField({
+      name: 'role',
+      description: 'This field is the role of the team member.',
+      title: 'Role',
+      type: 'string',
+      validation: (rule) => rule.required(),
+    }),
+    defineField({
+      name: 'overview',
+      description:
+        'Used both for the <meta> description tag for SEO, and team member header.',
+      title: 'Overview',
+      type: 'array',
+      of: [
+        // Paragraphs
+        defineArrayMember({
+          lists: [],
+          marks: {
+            annotations: [],
+            decorators: [
+              {
+                title: 'Italic',
+                value: 'em',
+              },
+              {
+                title: 'Strong',
+                value: 'strong',
+              },
+            ],
+          },
+          styles: [],
+          type: 'block',
+        }),
+      ],
+      validation: (rule) => rule.max(155).required(),
+    }),
+    defineField({
+      name: 'coverImage',
+      title: 'Cover Image',
+      description:
+        'This image will be used as the image for the team member.',
+      type: 'image',
+      options: {
+        hotspot: true,
+      },
+      validation: (rule) => rule.required(),
+    }),
+  ],
+  preview: {
+    select: {
+      title: 'title',
+      role: 'role',
+    },
+    prepare({ title, role }) {
+      return {
+        subtitle: `Role: ${role}`,
+        title,
+      }
+    },
+  },
+}

sanity/schemas/documents/post.ts

@@ -8,17 +8,60 @@ export default defineType({
   icon: ComposeIcon,
   fields: [
     defineField({
-      type: 'string',
       name: 'title',
+      description: 'This field is the title of your post.',
       title: 'Title',
+      type: 'string',
       validation: (rule) => rule.required(),
     }),
     defineField({
-      type: 'slug',
       name: 'slug',
       title: 'Slug',
+      type: 'slug',
       options: {
         source: 'title',
+        maxLength: 96,
+        isUnique: (value, context) => context.defaultIsUnique(value, context),
+      },
+      validation: (rule) => rule.required(),
+    }),
+    defineField({
+      name: 'overview',
+      description:
+        'Used both for the <meta> description tag for SEO, and project subheader.',
+      title: 'Overview',
+      type: 'array',
+      of: [
+        // Paragraphs
+        defineArrayMember({
+          lists: [],
+          marks: {
+            annotations: [],
+            decorators: [
+              {
+                title: 'Italic',
+                value: 'em',
+              },
+              {
+                title: 'Strong',
+                value: 'strong',
+              },
+            ],
+          },
+          styles: [],
+          type: 'block',
+        }),
+      ],
+      validation: (rule) => rule.max(155).required(),
+    }),
+    defineField({
+      name: 'coverImage',
+      title: 'Cover Image',
+      description:
+        'This image will be used as the cover image for the project. If you choose to add it to the show case projects, this is the image displayed in the list within the homepage.',
+      type: 'image',
+      options: {
+        hotspot: true,
       },
       validation: (rule) => rule.required(),
     }),
@@ -28,6 +71,15 @@ export default defineType({
       title: 'Published at',
       validation: (rule) => rule.required(),
     }),
+    defineField({
+      name: 'categories',
+      title: 'Categories',
+      type: 'array',
+      of: [{ type: 'string' }],
+      options: {
+        layout: 'tags',
+      },
+    }),
     defineField({
       type: 'array',
       name: 'body',
@@ -57,10 +109,6 @@ export default defineType({
           styles: [],
         }),
         // Custom blocks
-        defineArrayMember({
-          name: 'timeline',
-          type: 'timeline',
-        }),
         defineField({
           type: 'image',
           icon: ImageIcon,

sanity/schemas/documents/project.ts

@@ -1,11 +1,11 @@
-import { DocumentIcon, ImageIcon } from '@sanity/icons'
+import { PresentationIcon, ImageIcon } from '@sanity/icons'
 import { defineArrayMember, defineField, defineType } from 'sanity'
 
 export default defineType({
   name: 'project',
   title: 'Project',
   type: 'document',
-  icon: DocumentIcon,
+  icon: PresentationIcon,
   // Uncomment below to have edits publish automatically as you type
   // liveEdit: true,
   fields: [
@@ -153,4 +153,16 @@ export default defineType({
       ],
     }),
   ],
+  preview: {
+    select: {
+      title: 'title',
+      client: 'client',
+    },
+    prepare({ title, client }) {
+      return {
+        subtitle: `Project for ${client}`,
+        title,
+      }
+    },
+  },
 })

types/index.ts

@@ -43,9 +43,12 @@ export interface ShowcaseProject {
 
 export interface ShowcasePost {
   _type: string
+  coverImage?: Image
+  overview?: PortableTextBlock[]
   body?: PortableTextBlock[]
   slug?: string
   publishedAt?: string
+  categories?: string[]
   title?: string
 }