Developer Spotlight: Dan Conway, ngit

components/post/PostCoverHero.tsx

@@ -11,10 +11,16 @@ interface Props {
   title: string
   date: string
   coverImage?: string
+  overlay?: 'default' | 'light'
 }
 
 // Wide cover assets (~2.3:1) work best; subject on the right leaves room for text on the left.
-export default function PostCoverHero({ title, date, coverImage }: Props) {
+export default function PostCoverHero({
+  title,
+  date,
+  coverImage,
+  overlay = 'default',
+}: Props) {
   if (!coverImage) {
     return <PostDefaultHeader date={date} title={title} />
   }
@@ -36,11 +42,19 @@ export default function PostCoverHero({ title, date, coverImage }: Props) {
           className="object-cover object-[72%_center] xl:object-[center_right]"
         />
         <div
-          className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/20 to-transparent xl:from-black/60 xl:via-transparent"
+          className={`absolute inset-0 bg-gradient-to-b to-transparent xl:from-black/60 xl:via-transparent ${
+            overlay === 'light'
+              ? 'from-black/30 via-transparent'
+              : 'from-black/70 via-black/20'
+          }`}
           aria-hidden
         />
         <div
-          className="absolute inset-0 bg-gradient-to-t from-black/95 via-black/50 to-transparent xl:from-black/80 xl:via-black/30"
+          className={`absolute inset-0 bg-gradient-to-t to-transparent xl:from-black/80 xl:via-black/30 ${
+            overlay === 'light'
+              ? 'from-black/95 via-black/10'
+              : 'from-black/95 via-black/50'
+          }`}
           aria-hidden
         />
         <div className="absolute inset-x-0 bottom-0 pb-6 xl:pb-8">

contentlayer.config.ts

@@ -53,6 +53,7 @@ export const Blog = defineDocumentType(() => ({
     draft: { type: 'boolean' },
     summary: { type: 'string' },
     images: { type: 'list', of: { type: 'string' } },
+    heroOverlay: { type: 'enum', options: ['default', 'light'] },
     authors: { type: 'list', of: { type: 'string' } },
     layout: { type: 'string' },
     bibliography: { type: 'string' },

layouts/SpotlightLayout.tsx

@@ -24,7 +24,7 @@ export default function SpotlightLayout({
   prev,
   children,
 }: LayoutProps) {
-  const { path, date, title, images } = content
+  const { path, date, title, images, heroOverlay } = content
 
   return (
     <>
@@ -38,6 +38,7 @@ export default function SpotlightLayout({
         title={title}
         date={date}
         coverImage={getSpotlightHeroImage(images)}
+        overlay={heroOverlay}
       />
       <SectionContainer>
         <article>

pages/index.tsx

@@ -210,21 +210,28 @@ export default function Home({
           {!posts.length && 'No posts found.'}
           {posts.slice(0, MAX_DISPLAY).map((post) => {
             const { slug, date, title, summary, tags, images } = post
+            const cover = images?.[0]
             return (
               <li key={slug} className="py-12">
                 <article>
                   <div className="space-y-4 xl:grid xl:grid-cols-3 xl:items-start xl:gap-x-4 xl:space-y-0">
-                    <div>
-                      <Link href={`/blog/${slug}`} className="block">
-                        <Image
-                          src={images[0]}
-                          alt="blog post"
-                          width={400}
-                          height={300}
-                        />
-                      </Link>
-                    </div>
-                    <div className="space-y-2 xl:col-span-2">
+                    {cover && (
+                      <div>
+                        <Link href={`/blog/${slug}`} className="block">
+                          <Image
+                            src={cover}
+                            alt="blog post"
+                            width={400}
+                            height={300}
+                          />
+                        </Link>
+                      </div>
+                    )}
+                    <div
+                      className={`space-y-2 ${
+                        cover ? 'xl:col-span-2' : 'xl:col-span-3'
+                      }`}
+                    >
                       <div className="space-y-4">
                         <h2 className="text-2xl font-bold leading-8 tracking-tight max-[375px]:text-xl">
                           <Link