wip: page for the photographer (#325)

Author: jksolbakken

sanity/schema.ts

@@ -23,6 +23,7 @@ import travelSupport from './schemaTypes/travelSupport'
 import travelExpense from './schemaTypes/travelExpense'
 import volunteer from './schemaTypes/volunteer'
 import workshopSignup from './schemaTypes/workshopSignup'
+import staff from './schemaTypes/staff'
 
 export const schema: { types: SchemaTypeDefinition[] } = {
   types: [
@@ -38,6 +39,7 @@ export const schema: { types: SchemaTypeDefinition[] } = {
     dashboardConfig,
     imageGallery,
     volunteer,
+    staff,
 
     // Topics & Talks
     talk,
@@ -54,10 +56,10 @@ export const schema: { types: SchemaTypeDefinition[] } = {
 
     // Sponsors
     sponsor,
-    sponsorTier,
-    sponsorForConference,
     sponsorActivity,
     sponsorEmailTemplate,
+    sponsorForConference,
+    sponsorTier,
     contractTemplate,
   ],
 }

sanity/schemaTypes/staff.ts

@@ -0,0 +1,60 @@
+import { defineField, defineType } from 'sanity'
+
+export default defineType({
+  name: 'staff',
+  title: 'Staff',
+  type: 'document',
+  fields: [
+    defineField({
+      name: 'name',
+      title: 'Name',
+      type: 'string',
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      name: 'role',
+      title: 'Role',
+      type: 'string',
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      name: 'email',
+      title: 'Email',
+      type: 'string',
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      name: 'company',
+      title: 'Company',
+      type: 'string',
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      name: 'image',
+      title: 'Image',
+      type: 'image',
+      options: {
+        hotspot: true,
+      },
+      fields: [
+        {
+          name: 'alt',
+          type: 'string',
+          title: 'Alternative Text',
+        },
+      ],
+    }),
+    defineField({
+      name: 'link',
+      title: 'Link',
+      type: 'url',
+      validation: (Rule) => Rule.required(),
+    }),
+  ],
+  preview: {
+    select: {
+      title: 'name',
+      media: 'image',
+    },
+  },
+})

src/app/(main)/staff/[role]/page.tsx

@@ -0,0 +1,60 @@
+import Image from 'next/image'
+import { cacheLife, cacheTag } from 'next/cache'
+import { getStaffMembers } from '@/lib/staff/sanity'
+import { Container } from '@/components/Container'
+
+async function CachedStaffContent({ role }: { role: string }) {
+  'use cache'
+  cacheLife('hours')
+  cacheTag('content:staff')
+
+  const staff = await getStaffMembers(role)
+
+  return (
+    <>
+      <div className="mx-auto max-w-2xl px-4 py-10 sm:px-6 lg:max-w-4xl lg:px-8">
+        <Container className="relative print:max-w-none print:px-0">
+          <h1 className="font-jetbrains text-4xl font-bold tracking-tighter text-brand-cloud-blue sm:text-6xl dark:text-blue-400">
+            Photographers
+          </h1>
+          {staff.data.length === 0 && 'No staff found'}
+          {staff.data.map((member) => {
+            return (
+              <div
+                key={member.id ?? Math.floor(Math.random() * 10000)}
+                className="mx-auto max-w-2xl px-4 py-10 sm:px-6 lg:max-w-4xl lg:px-8"
+              >
+                <h3 className="font-jetbrains text-3xl font-bold tracking-tighter text-brand-cloud-blue sm:text-5xl dark:text-blue-400">
+                  {member.name}
+                </h3>
+                <div className="mt-7 columns-1 gap-6 md:columns-2">
+                  <a href={member.link.toString()}>{member.name}</a>
+                  <Image
+                    src={
+                      member.imageURL?.toString() ??
+                      'https://placehold.co/800x600/e5e7eb/6b7280?text=Photographer'
+                    }
+                    alt={member.name}
+                    width={800}
+                    height={600}
+                    className="rounded-md"
+                    unoptimized
+                  />
+                </div>
+              </div>
+            )
+          })}
+        </Container>
+      </div>
+    </>
+  )
+}
+
+export default async function StaffPage({
+  params,
+}: {
+  params: Promise<{ role: string }>
+}) {
+  const { role } = await params
+  return <CachedStaffContent role={role} />
+}

src/lib/staff/sanity.ts

@@ -0,0 +1,27 @@
+import { Staff } from '@/lib/staff/types'
+import { clientReadUncached as clientRead } from '@/lib/sanity/client'
+import { defineQuery } from 'next-sanity'
+
+export async function getStaffMembers(
+  role: string,
+): Promise<{ data: Staff[]; err?: Error }> {
+  const query = defineQuery(`
+    * [_type == "staff" && role == $role]
+    {
+      "id": _id,
+      name,
+      role,
+      email,
+      company,
+      "imageURL": image.asset->url,
+      link
+    }
+  `)
+
+  try {
+    const queryResult = await clientRead.fetch<Staff[]>(query, { role: role })
+    return { data: queryResult }
+  } catch (error) {
+    return { data: [], err: error as Error }
+  }
+}

src/lib/staff/types.ts

@@ -0,0 +1,9 @@
+export interface Staff {
+  id: string
+  name: string
+  role: string
+  email?: string
+  company?: string
+  imageURL?: URL
+  link: URL
+}