update dependencies

components/alert.js

@@ -1,41 +1,41 @@
-import Container from './container'
-import cn from 'classnames'
+import Container from "./container";
+import cn from "classnames";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This is page is showing draft content.{' '}
+              This is page is showing draft content.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              This is page is showing published content.{' '}
+              This is page is showing published content.{" "}
               <a
                 href="/api/preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to enter preview mode!
             </>
           )}
         </div>
       </Container>
     </div>
-  )
+  );
 }

components/avatar.js

@@ -1,12 +1,16 @@
+import { Image } from "react-datocms";
+
 export default function Avatar({ name, picture }) {
   return (
     <div className="flex items-center">
-      <img
-        src={picture.url}
-        className="w-12 h-12 rounded-full mr-4"
-        alt={name}
-      />
+      <div className="w-12 h-12 mr-4">
+        <Image
+          alt={name}
+          data={picture.responsiveImage}
+          className="rounded-full"
+        />
+      </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }

components/container.js

@@ -1,3 +1,3 @@
 export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }

components/cover-image.js

@@ -1,6 +1,6 @@
-import { Image } from 'react-datocms'
-import cn from 'classnames'
-import Link from 'next/link'
+import { Image } from "react-datocms";
+import cn from "classnames";
+import Link from "next/link";
 
 export default function CoverImage({ title, responsiveImage, slug }) {
   const image = (
@@ -9,20 +9,20 @@ export default function CoverImage({ title, responsiveImage, slug }) {
         ...responsiveImage,
         alt: `Cover Image for ${title}`,
       }}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
       })}
     />
-  )
+  );
   return (
     <div className="-mx-5 sm:mx-0">
       {slug ? (
-        <Link as={`/posts/${slug}`} href="/posts/[slug]">
+        <Link href={`/posts/${slug}`}>
           <a aria-label={title}>{image}</a>
         </Link>
       ) : (
         image
       )}
     </div>
-  )
+  );
 }

components/date.js

@@ -1,6 +1,6 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 export default function Date({ dateString }) {
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "LLLL	d, yyyy")}</time>;
 }

components/footer.js

@@ -1,4 +1,4 @@
-import Container from './container'
+import Container from "./container";
 
 export default function Footer() {
   return (
@@ -25,5 +25,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }

components/header.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }

components/hero-post.js

@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import Link from 'next/link'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function HeroPost({
   title,
@@ -23,7 +23,7 @@ export default function HeroPost({
       <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
-            <Link as={`/posts/${slug}`} href="/posts/[slug]">
+            <Link href={`/posts/${slug}`}>
               <a className="hover:underline">{title}</a>
             </Link>
           </h3>
@@ -37,5 +37,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }

components/intro.js

@@ -5,14 +5,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href="https://www.datocms.com/"
           className="underline hover:text-success duration-200 transition-colors"
@@ -22,5 +22,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }

components/layout.js

@@ -1,5 +1,5 @@
-import Alert from '../components/alert'
-import Footer from '../components/footer'
+import Alert from "./alert";
+import Footer from "./footer";
 
 export default function Layout({ preview, children }) {
   return (
@@ -10,5 +10,5 @@ export default function Layout({ preview, children }) {
       </div>
       <Footer />
     </>
-  )
+  );
 }

components/more-stories.js

@@ -1,4 +1,4 @@
-import PostPreview from '../components/post-preview'
+import PostPreview from "./post-preview";
 
 export default function MoreStories({ posts }) {
   return (
@@ -7,7 +7,7 @@ export default function MoreStories({ posts }) {
         More Stories
       </h2>
       <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
-        {posts.map(post => (
+        {posts.map((post) => (
           <PostPreview
             key={post.slug}
             title={post.title}
@@ -20,5 +20,5 @@ export default function MoreStories({ posts }) {
         ))}
       </div>
     </section>
-  )
+  );
 }

components/post-header.js

@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import PostTitle from '../components/post-title'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import PostTitle from "./post-title";
 
 export default function PostHeader({ title, coverImage, date, author }) {
   return (
@@ -25,5 +25,5 @@ export default function PostHeader({ title, coverImage, date, author }) {
         </div>
       </div>
     </>
-  )
+  );
 }

components/post-preview.js

@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function PostPreview({
   title,
@@ -21,7 +21,7 @@ export default function PostPreview({
         />
       </div>
       <h3 className="text-3xl mb-3 leading-snug">
-        <Link as={`/posts/${slug}`} href="/posts/[slug]">
+        <Link href={`/posts/${slug}`}>
           <a className="hover:underline">{title}</a>
         </Link>
       </h3>
@@ -31,5 +31,5 @@ export default function PostPreview({
       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
       <Avatar name={author.name} picture={author.picture} />
     </div>
-  )
+  );
 }

components/post-title.js

@@ -3,5 +3,5 @@ export default function PostTitle({ children }) {
     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
+  );
 }

components/section-separator.js

@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }

jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": ["components/*"],
+      "@/lib/*": ["lib/*"],
+      "@/styles/*": ["styles/*"]
+    }
+  }
+}

lib/datocms.js

@@ -1,8 +1,7 @@
-import tiny from 'tiny-json-http';
+import tiny from "tiny-json-http";
 
 export async function request({ query, variables, preview }) {
-
-  let endpoint = 'https://graphql.datocms.com';
+  let endpoint = "https://graphql.datocms.com";
 
   if (process.env.NEXT_DATOCMS_ENVIRONMENT) {
     endpoint += `/environments/${process.env.NEXT_DATOCMS_ENVIRONMENT}`;
@@ -29,4 +28,4 @@ export async function request({ query, variables, preview }) {
   }
 
   return body.data;
-}
+}

lib/fragments.js

@@ -12,12 +12,12 @@ export const responsiveImageFragment = `
     title
     base64
   }
-`
+`;
 
 export const metaTagsFragment = `
   fragment metaTagsFragment on Tag {
     attributes
     content
     tag
   }
-`
+`;

next.config.js

@@ -1,8 +1,8 @@
-require('dotenv').config()
+require("dotenv").config();
 
 module.exports = {
   env: {
     NEXT_EXAMPLE_CMS_DATOCMS_API_TOKEN:
       process.env.NEXT_EXAMPLE_CMS_DATOCMS_API_TOKEN,
   },
-}
+};