From fdcd41846f42b4e8466e70c2bc5c84651124dcde Mon Sep 17 00:00:00 2001
From: TED Vortex <ted.vortex@gmail.com>
Date: Tue, 28 Nov 2023 15:20:03 +0200
Subject: [PATCH] feat: change responsive screen sizes and add member display

---
 components/global/Navbar/NavbarLayout.tsx |  5 ++--
 components/pages/home/HomePage.tsx        |  6 ++--
 components/pages/home/PostListItem.tsx    | 36 ++++++++++++++++++-----
 components/shared/ImageBox.tsx            |  2 +-
 sanity/lib/queries.ts                     |  5 ++++
 sanity/lib/utils.ts                       |  2 ++
 sanity/schemas/documents/member.ts        | 12 ++++++++
 sanity/schemas/documents/post.ts          | 13 ++++++++
 tailwind.config.js                        | 14 +++++++++
 types/index.ts                            |  5 ++++
 10 files changed, 87 insertions(+), 13 deletions(-)

diff --git a/components/global/Navbar/NavbarLayout.tsx b/components/global/Navbar/NavbarLayout.tsx
index aa800b1..450d7d9 100644
--- a/components/global/Navbar/NavbarLayout.tsx
+++ b/components/global/Navbar/NavbarLayout.tsx
@@ -17,12 +17,13 @@ export default function Navbar(props: NavbarProps) {
 
   return (
     <div className={clsx([
-      'sticky top-0 z-10 border-y grid grid-cols-12',
+      // 'sticky top-0 z-10 border-y grid grid-cols-12',
+      'sticky top-0 z-10 border-y grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl',
       'bg-neutral-300/90 border-slate-500',
       'dark:bg-neutral-800/90 dark:border-black',
     ])}>
       <div className={clsx([
-        'col-start-2 col-end-12 text-2xl',
+        'col-start-2 col-end-3 text-2xl',
         'flex justify-between items-center backdrop-blur border-x',
         'border-slate-500',
         'dark:border-black',
diff --git a/components/pages/home/HomePage.tsx b/components/pages/home/HomePage.tsx
index 1afa9c1..8cd537b 100644
--- a/components/pages/home/HomePage.tsx
+++ b/components/pages/home/HomePage.tsx
@@ -25,8 +25,8 @@ export function HomePage({ data, encodeDataAttribute }: HomePageProps) {
 
       {showcasePosts && showcasePosts.length > 0 && (
         <div className={clsx([
-          'w-full'
-        ])}>
+          'w-full grid grid-cols-1'
+        ])} data-section="posts">
           <div>
             <Header centered title='Blog'/>
           </div>
@@ -48,7 +48,7 @@ export function HomePage({ data, encodeDataAttribute }: HomePageProps) {
       )}
 
       {showcaseProjects && showcaseProjects.length > 0 && (
-        <div className="w-full grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 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" data-section="projects">
           {showcaseProjects.map((project, key) => {
             const href = resolveHref(project._type, project.slug)
             if (!href) {
diff --git a/components/pages/home/PostListItem.tsx b/components/pages/home/PostListItem.tsx
index acbfa17..6d00a6d 100644
--- a/components/pages/home/PostListItem.tsx
+++ b/components/pages/home/PostListItem.tsx
@@ -18,7 +18,7 @@ export function PostListItem(props: PostProps) {
   return (
     <div
       className={clsx([
-        'border-b p-12 flex flex-row gap-4',
+        'border -m-[0.5px] p-12 flex flex-row gap-4',
         'border-slate-500 hover:bg-white',
         'dark:border-black dark:hover:bg-black',
         odd && ''
@@ -26,6 +26,8 @@ export function PostListItem(props: PostProps) {
     >
       <div className='basis-1/4'>
         <ImageBox
+          width={363}
+          height={204}
           image={post.coverImage}
           alt={`Cover image from ${post.title}`}
           classesWrapper='relative aspect-[16/9]'
@@ -42,13 +44,33 @@ export function PostListItem(props: PostProps) {
         ])}>{post.title}</h2>
 
         <div className={clsx([
-          'flex flex-row gap-x-2 font-mono',
+          'flex gap-3 flex-row items-center',
         ])}>
-          {post.categories?.map((tag, key) => (
-            <div className='text-md font-medium lowercase md:text-lg' key={key}>
-              #{tag}
-            </div>
-          ))}
+          <div className={clsx([
+            'w-16',
+          ])}>
+            <ImageBox
+              width={64}
+              height={64}
+              image={post.author?.coverImage}
+              alt={`Cover image from ${post.author?.title?.replace(/[\u200B-\u200D\uFEFF]/g, '')}`}
+              classesWrapper='px-0.5px flex shrink-0 grow-0 w-10 relative rounded-full aspect-[1/1]'
+            />
+          </div>
+
+          <div className='font-mono text-sm leading-mono font-normal uppercase text-gray-dark'>
+            by {post.author?.title}
+          </div>
+
+          <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>
 
diff --git a/components/shared/ImageBox.tsx b/components/shared/ImageBox.tsx
index b15d855..4d07624 100644
--- a/components/shared/ImageBox.tsx
+++ b/components/shared/ImageBox.tsx
@@ -26,7 +26,7 @@ export default function ImageBox({
 
   return (
     <div
-      className={`w-full overflow-hidden rounded-[3px] bg-gray-50 ${classesWrapper}`}
+      className={`w-full overflow-hidden rounded-[3px] ${classesWrapper}`}
       data-sanity={props['data-sanity']}
     >
       {imageUrl && (
diff --git a/sanity/lib/queries.ts b/sanity/lib/queries.ts
index c91c703..c5ede96 100644
--- a/sanity/lib/queries.ts
+++ b/sanity/lib/queries.ts
@@ -20,6 +20,11 @@ export const homePageQuery = groq`
       "slug": slug.current,
       publishedAt,
       categories,
+      author->{
+        slug,
+        title,
+        coverImage,
+      },
       title,
     },
     title,
diff --git a/sanity/lib/utils.ts b/sanity/lib/utils.ts
index f386829..a8b107c 100644
--- a/sanity/lib/utils.ts
+++ b/sanity/lib/utils.ts
@@ -34,6 +34,8 @@ export function resolveHref(
       return slug ? `/projects/${slug}` : undefined
     case 'post':
       return slug ? `/blog/${slug}` : undefined
+    case 'member':
+      return slug ? `/author/${slug}` : undefined
     default:
       console.warn('Invalid document type:', documentType)
       return undefined
diff --git a/sanity/schemas/documents/member.ts b/sanity/schemas/documents/member.ts
index 75fd473..ac37c2d 100644
--- a/sanity/schemas/documents/member.ts
+++ b/sanity/schemas/documents/member.ts
@@ -79,6 +79,18 @@ export default {
       },
       validation: (rule) => rule.required(),
     }),
+    defineField({
+      name: 'socialLinks',
+      title: 'Social Links',
+      description: 'Links displayed on team member display.',
+      type: 'array',
+      of: [
+        {
+          type: 'socialLink',
+        },
+      ],
+      validation: (rule) => rule.unique(),
+    }),
   ],
   preview: {
     select: {
diff --git a/sanity/schemas/documents/post.ts b/sanity/schemas/documents/post.ts
index ef1bd02..655055f 100644
--- a/sanity/schemas/documents/post.ts
+++ b/sanity/schemas/documents/post.ts
@@ -65,6 +65,19 @@ export default defineType({
       },
       validation: (rule) => rule.required(),
     }),
+    defineField({
+      type: 'reference',
+      name: 'author',
+      title: 'Author',
+      to: [{ type: 'member' }],
+      validation: (rule) => rule.required(),
+    }),
+    defineField({
+      type: 'array',
+      name: 'coAuthors',
+      title: 'Co-authors',
+      of: [{ type: 'reference', to: [{ type: 'member' }] }],
+    }),
     defineField({
       type: 'datetime',
       name: 'publishedAt',
diff --git a/tailwind.config.js b/tailwind.config.js
index 6199de6..6945306 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,6 +12,20 @@ module.exports = {
         sans: 'var(--font-sans)',
         serif: 'var(--font-serif)',
       },
+      gridTemplateColumns: {
+        'xl': '1fr min(84rem, 100% - 7rem) 1fr', // .xl\:grid-cols-xl
+        'lg': '3.5rem minmax(0,1fr) 3.5rem', // .lg\:grid-cols-lg
+        // 'md': '2.65rem minmax(0,1fr) 2.65rem',
+        'sm': '1.75rem minmax(0, 1fr) 1.75rem', // .sm\:grid-cols-sm
+        'xs': '0.875rem minmax(0, 1fr) 0.875rem', // .grid-cols-xs
+      },
+      screens: {
+        'xl': '1456px',
+        'lg': '1176px',
+        'md': '784px',
+        'sm': '504px',
+        'xs': '0px',
+      }
     },
   },
   plugins: [require('@tailwindcss/typography')],
diff --git a/types/index.ts b/types/index.ts
index a3b27c4..0f14ca6 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -49,6 +49,11 @@ export interface ShowcasePost {
   slug?: string
   publishedAt?: string
   categories?: string[]
+  author?: {
+    slug?: string
+    title?: string
+    coverImage?: Image
+  }
   title?: string
 }