use next/image and update all dependencies, use tailwind JIT mode, addressing feedback

Author: teleaziz

examples/cms-builder-io/components/alert.js

@@ -1,6 +1,6 @@
 import Container from './container'
 import cn from 'classnames'
-import { EXAMPLE_PATH } from '@/lib/constants'
+import { EXAMPLE_PATH } from '../lib/constants'
 
 export default function Alert({ preview }) {
   return (

examples/cms-builder-io/components/avatar.js

@@ -1,11 +1,16 @@
+import BuilderImage from './builder-image'
+
 export default function Avatar({ name, picture }) {
   return (
     <div className="flex items-center">
-      <img
-        src={picture}
-        className="w-12 h-12 rounded-full mr-4 grayscale"
-        alt={name}
-      />
+      <div className="relative w-12 h-12 mr-4">
+        <BuilderImage
+          src={picture}
+          layout="fill"
+          className="rounded-full"
+          alt={name}
+        />
+      </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
   )

examples/cms-builder-io/components/builder-image.js

@@ -0,0 +1,11 @@
+import Image from 'next/image'
+
+const builderLoader = ({ src, width, quality }) => {
+  return `${src}?width=${width}&quality=${quality || 75}`
+}
+
+const BuilderImage = (props) => {
+  return <Image loader={builderLoader} {...props} />
+}
+
+export default BuilderImage

examples/cms-builder-io/components/cover-image.js

@@ -1,16 +1,28 @@
+import BuilderImage from './builder-image'
 import Link from 'next/link'
+import cn from 'classnames'
 
 export default function CoverImage({ title, url, slug }) {
+  const image = (
+    <BuilderImage
+      width={2000}
+      height={1000}
+      alt={`Cover Image for ${title}`}
+      className={cn('shadow-small', {
+        'hover:shadow-medium transition-shadow duration-200': slug,
+      })}
+      src={url}
+    />
+  )
+
   return (
     <div className="sm:mx-0">
       {slug ? (
-        <Link as={`/posts/${slug}`} href="/posts/[slug]">
-          <a aria-label={title}>
-            <img src={url} alt={title} />
-          </a>
+        <Link href={`/posts/${slug}`}>
+          <a aria-label={title}>{image}</a>
         </Link>
       ) : (
-        <img src={url} alt={title} />
+        image
       )}
     </div>
   )

examples/cms-builder-io/components/date.js

@@ -1,13 +1,9 @@
-import { parseISO, format } from 'date-fns'
-import { useEffect, useState } from 'react'
+import { format } from 'date-fns'
 
-// dateString might be null for unpublished posts
 export default function DateComponent({ dateString }) {
-  const [date, setDate] = useState(dateString ? parseISO(dateString) : null)
-  useEffect(() => {
-    if (!date) {
-      setDate(new Date())
-    }
-  }, [date])
-  return date && <time dateTime={date}>{format(date, 'LLLL d, yyyy')}</time>
+  return (
+    <time dateTime={new Date(dateString)}>
+      {format(new Date(dateString), 'LLLL	d, yyyy')}
+    </time>
+  )
 }

examples/cms-builder-io/components/footer.js

@@ -1,5 +1,5 @@
 import Container from './container'
-import { EXAMPLE_PATH } from '@/lib/constants'
+import { EXAMPLE_PATH } from '../lib/constants'
 
 export default function Footer() {
   return (

examples/cms-builder-io/components/hero-post.js

@@ -1,7 +1,7 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
 import Link from 'next/link'
+import Avatar from '../components/avatar'
+import DateComponent from '../components/date'
+import CoverImage from '../components/cover-image'
 
 export default function HeroPost({
   title,
@@ -14,7 +14,7 @@ export default function HeroPost({
   return (
     <section>
       <div className="mb-8 md:mb-16">
-        <CoverImage title={title} url={coverImage} slug={slug} />
+        <CoverImage title={title} slug={slug} url={coverImage} />
       </div>
       <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
         <div>
@@ -24,12 +24,12 @@ export default function HeroPost({
             </Link>
           </h3>
           <div className="mb-4 md:mb-0 text-lg">
-            <Date dateString={date} />
+            <DateComponent dateString={date} />
           </div>
         </div>
         <div>
           <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
-          <Avatar name={author.name} picture={author.image} />
+          {author && <Avatar name={author.name} picture={author.image} />}
         </div>
       </div>
     </section>

examples/cms-builder-io/components/intro.js

@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '@/lib/constants'
+import { CMS_NAME, CMS_URL } from '../lib/constants'
 
 export default function Intro() {
   return (

examples/cms-builder-io/components/layout.js

@@ -1,6 +1,6 @@
-import Alert from './alert'
-import Footer from './footer'
-import Meta from './meta'
+import Alert from '../components/alert'
+import Footer from '../components/footer'
+import Meta from '../components/meta'
 
 export default function Layout({ preview, children }) {
   return (

examples/cms-builder-io/components/meta.js

@@ -1,5 +1,5 @@
 import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '@/lib/constants'
+import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
 
 export default function Meta() {
   return (