From 4663e87f95dd42116281bc41805f5e0f8e6d0771 Mon Sep 17 00:00:00 2001
From: sherazmalik06 <sherazmalik06@gmail.com>
Date: Wed, 22 Jun 2022 23:34:18 +0500
Subject: [PATCH 01/10] Edit: update Packages

---
 examples/cms-cosmic/components/alert.tsx      | 42 +++++++++++++++++++
 examples/cms-cosmic/components/avatar.tsx     | 19 +++++++++
 examples/cms-cosmic/components/container.tsx  |  3 ++
 .../cms-cosmic/components/cover-image.tsx     | 35 ++++++++++++++++
 examples/cms-cosmic/components/date.tsx       |  6 +++
 examples/cms-cosmic/components/footer.tsx     | 30 +++++++++++++
 examples/cms-cosmic/components/header.tsx     | 12 ++++++
 examples/cms-cosmic/components/hero-post.tsx  | 40 ++++++++++++++++++
 examples/cms-cosmic/components/intro.tsx      | 28 +++++++++++++
 examples/cms-cosmic/components/layout.tsx     | 18 ++++++++
 examples/cms-cosmic/components/meta.tsx       | 42 +++++++++++++++++++
 .../cms-cosmic/components/more-stories.tsx    | 24 +++++++++++
 .../cms-cosmic/components/post-preview.tsx    | 31 ++++++++++++++
 examples/cms-cosmic/components/post-title.tsx |  7 ++++
 .../components/section-separator.tsx          |  3 ++
 examples/cms-cosmic/lib/api.js                | 17 ++++----
 examples/cms-cosmic/next-env.d.ts             |  5 +++
 examples/cms-cosmic/package.json              | 19 +++++----
 examples/cms-cosmic/tsconfig.json             | 42 +++++++++++++++++++
 19 files changed, 407 insertions(+), 16 deletions(-)
 create mode 100644 examples/cms-cosmic/components/alert.tsx
 create mode 100644 examples/cms-cosmic/components/avatar.tsx
 create mode 100644 examples/cms-cosmic/components/container.tsx
 create mode 100644 examples/cms-cosmic/components/cover-image.tsx
 create mode 100644 examples/cms-cosmic/components/date.tsx
 create mode 100644 examples/cms-cosmic/components/footer.tsx
 create mode 100644 examples/cms-cosmic/components/header.tsx
 create mode 100644 examples/cms-cosmic/components/hero-post.tsx
 create mode 100644 examples/cms-cosmic/components/intro.tsx
 create mode 100644 examples/cms-cosmic/components/layout.tsx
 create mode 100644 examples/cms-cosmic/components/meta.tsx
 create mode 100644 examples/cms-cosmic/components/more-stories.tsx
 create mode 100644 examples/cms-cosmic/components/post-preview.tsx
 create mode 100644 examples/cms-cosmic/components/post-title.tsx
 create mode 100644 examples/cms-cosmic/components/section-separator.tsx
 create mode 100644 examples/cms-cosmic/next-env.d.ts
 create mode 100644 examples/cms-cosmic/tsconfig.json

diff --git a/examples/cms-cosmic/components/alert.tsx b/examples/cms-cosmic/components/alert.tsx
new file mode 100644
index 0000000000000..051f3319649ed
--- /dev/null
+++ b/examples/cms-cosmic/components/alert.tsx
@@ -0,0 +1,42 @@
+import Container from './container'
+import cn from 'classnames'
+import { EXAMPLE_PATH } from '@/lib/constants'
+
+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,
+      })}
+    >
+      <Container>
+        <div className="py-2 text-center text-sm">
+          {preview ? (
+            <>
+              This is page is a preview.{' '}
+              <a
+                href="/api/exit-preview"
+                className="underline hover:text-cyan duration-200 transition-colors"
+              >
+                Click here
+              </a>{' '}
+              to exit preview mode.
+            </>
+          ) : (
+            <>
+              The source code for this blog is{' '}
+              <a
+                href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
+                className="underline hover:text-success duration-200 transition-colors"
+              >
+                available on GitHub
+              </a>
+              .
+            </>
+          )}
+        </div>
+      </Container>
+    </div>
+  )
+}
diff --git a/examples/cms-cosmic/components/avatar.tsx b/examples/cms-cosmic/components/avatar.tsx
new file mode 100644
index 0000000000000..d7f7ec3871e87
--- /dev/null
+++ b/examples/cms-cosmic/components/avatar.tsx
@@ -0,0 +1,19 @@
+import Image from 'next/image'
+
+export default function Avatar({ name, picture }) {
+  return (
+    <div className="flex items-center">
+      <div className="w-12 h-12 relative mr-4">
+        {picture && (
+          <Image
+            src={`${picture}?auto=format,compress,enhance&w=100&h=100`}
+            layout="fill"
+            className="rounded-full"
+            alt={name}
+          />
+        )}
+      </div>
+      <div className="text-xl font-bold">{name}</div>
+    </div>
+  )
+}
diff --git a/examples/cms-cosmic/components/container.tsx b/examples/cms-cosmic/components/container.tsx
new file mode 100644
index 0000000000000..fc1c29dfb0747
--- /dev/null
+++ b/examples/cms-cosmic/components/container.tsx
@@ -0,0 +1,3 @@
+export default function Container({ children }) {
+  return <div className="container mx-auto px-5">{children}</div>
+}
diff --git a/examples/cms-cosmic/components/cover-image.tsx b/examples/cms-cosmic/components/cover-image.tsx
new file mode 100644
index 0000000000000..4e754a79b57bd
--- /dev/null
+++ b/examples/cms-cosmic/components/cover-image.tsx
@@ -0,0 +1,35 @@
+import cn from 'classnames'
+import Link from 'next/link'
+import Imgix from 'react-imgix'
+
+export default function CoverImage({ title, url, slug }) {
+  const image = (
+    <Imgix
+      src={url}
+      alt={`Cover Image for ${title}`}
+      className={cn('lazyload shadow-small w-full', {
+        'hover:shadow-medium transition-shadow duration-200': slug,
+      })}
+      sizes="100vw"
+      attributeConfig={{
+        src: 'data-src',
+        srcSet: 'data-srcset',
+        sizes: 'data-sizes',
+      }}
+      htmlAttributes={{
+        src: `${url}?auto=format,compress&q=1&blur=500&w=auto`,
+      }}
+    />
+  )
+  return (
+    <div className="sm:mx-0">
+      {slug ? (
+        <Link href={`/posts/${slug}`}>
+          <a aria-label={title}>{image}</a>
+        </Link>
+      ) : (
+        image
+      )}
+    </div>
+  )
+}
diff --git a/examples/cms-cosmic/components/date.tsx b/examples/cms-cosmic/components/date.tsx
new file mode 100644
index 0000000000000..eac5681378bfd
--- /dev/null
+++ b/examples/cms-cosmic/components/date.tsx
@@ -0,0 +1,6 @@
+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>
+}
diff --git a/examples/cms-cosmic/components/footer.tsx b/examples/cms-cosmic/components/footer.tsx
new file mode 100644
index 0000000000000..b305c3eb40b0d
--- /dev/null
+++ b/examples/cms-cosmic/components/footer.tsx
@@ -0,0 +1,30 @@
+import Container from './container'
+import { EXAMPLE_PATH } from '@/lib/constants'
+
+export default function Footer() {
+  return (
+    <footer className="bg-accent-1 border-t border-accent-2">
+      <Container>
+        <div className="py-28 flex flex-col lg:flex-row items-center">
+          <h3 className="text-4xl lg:text-5xl font-bold tracking-tighter leading-tight text-center lg:text-left mb-10 lg:mb-0 lg:pr-4 lg:w-1/2">
+            Statically Generated with Next.js.
+          </h3>
+          <div className="flex flex-col lg:flex-row justify-center items-center lg:pl-4 lg:w-1/2">
+            <a
+              href="https://nextjs.org/docs/basic-features/pages"
+              className="mx-3 bg-black hover:bg-white hover:text-black border border-black text-white font-bold py-3 px-12 lg:px-8 duration-200 transition-colors mb-6 lg:mb-0"
+            >
+              Read Documentation
+            </a>
+            <a
+              href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
+              className="mx-3 font-bold hover:underline"
+            >
+              View on GitHub
+            </a>
+          </div>
+        </div>
+      </Container>
+    </footer>
+  )
+}
diff --git a/examples/cms-cosmic/components/header.tsx b/examples/cms-cosmic/components/header.tsx
new file mode 100644
index 0000000000000..562e7e3eebb6a
--- /dev/null
+++ b/examples/cms-cosmic/components/header.tsx
@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function Header() {
+  return (
+    <h2 className="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-20 mt-8">
+      <Link href="/">
+        <a className="hover:underline">Blog</a>
+      </Link>
+      .
+    </h2>
+  )
+}
diff --git a/examples/cms-cosmic/components/hero-post.tsx b/examples/cms-cosmic/components/hero-post.tsx
new file mode 100644
index 0000000000000..e8f7823c2b039
--- /dev/null
+++ b/examples/cms-cosmic/components/hero-post.tsx
@@ -0,0 +1,40 @@
+import Avatar from './avatar'
+import Date from './date'
+import CoverImage from './cover-image'
+import Link from 'next/link'
+
+export default function HeroPost({
+  title,
+  coverImage,
+  date,
+  excerpt,
+  author,
+  slug,
+}) {
+  return (
+    <section>
+      <div className="mb-8 md:mb-16">
+        <CoverImage title={title} url={coverImage.imgix_url} slug={slug} />
+      </div>
+      <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 href={`/posts/${slug}`}>
+              <a className="hover:underline">{title}</a>
+            </Link>
+          </h3>
+          <div className="mb-4 md:mb-0 text-lg">
+            <Date dateString={date} />
+          </div>
+        </div>
+        <div>
+          <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
+          <Avatar
+            name={author.title}
+            picture={author.metadata.picture.imgix_url}
+          />
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/examples/cms-cosmic/components/intro.tsx b/examples/cms-cosmic/components/intro.tsx
new file mode 100644
index 0000000000000..c3003c6196642
--- /dev/null
+++ b/examples/cms-cosmic/components/intro.tsx
@@ -0,0 +1,28 @@
+import { CMS_NAME, CMS_URL } from '@/lib/constants'
+
+export default function Intro() {
+  return (
+    <section className="flex-col md:flex-row flex items-center md:justify-between mt-16 mb-16 md:mb-12">
+      <h1 className="text-6xl md:text-8xl font-bold tracking-tighter leading-tight md:pr-8">
+        Blog.
+      </h1>
+      <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
+        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
+          href={CMS_URL}
+          className="underline hover:text-success duration-200 transition-colors"
+        >
+          {CMS_NAME}
+        </a>
+        .
+      </h4>
+    </section>
+  )
+}
diff --git a/examples/cms-cosmic/components/layout.tsx b/examples/cms-cosmic/components/layout.tsx
new file mode 100644
index 0000000000000..ff54d53992783
--- /dev/null
+++ b/examples/cms-cosmic/components/layout.tsx
@@ -0,0 +1,18 @@
+import Alert from './alert'
+import Footer from './footer'
+import Meta from './meta'
+import 'lazysizes'
+import 'lazysizes/plugins/parent-fit/ls.parent-fit'
+
+export default function Layout({ preview, children }) {
+  return (
+    <>
+      <Meta />
+      <div className="min-h-screen">
+        <Alert preview={preview} />
+        <main>{children}</main>
+      </div>
+      <Footer />
+    </>
+  )
+}
diff --git a/examples/cms-cosmic/components/meta.tsx b/examples/cms-cosmic/components/meta.tsx
new file mode 100644
index 0000000000000..cec622742089e
--- /dev/null
+++ b/examples/cms-cosmic/components/meta.tsx
@@ -0,0 +1,42 @@
+import Head from 'next/head'
+import { CMS_NAME, HOME_OG_IMAGE_URL } from '@/lib/constants'
+
+export default function Meta() {
+  return (
+    <Head>
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/favicon/apple-touch-icon.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/favicon/favicon-32x32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/favicon/favicon-16x16.png"
+      />
+      <link rel="manifest" href="/favicon/site.webmanifest" />
+      <link
+        rel="mask-icon"
+        href="/favicon/safari-pinned-tab.svg"
+        color="#000000"
+      />
+      <link rel="shortcut icon" href="/favicon/favicon.ico" />
+      <meta name="msapplication-TileColor" content="#000000" />
+      <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
+      <meta name="theme-color" content="#000" />
+      <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
+      <meta
+        name="description"
+        content={`A statically generated blog example using Next.js and ${CMS_NAME}.`}
+      />
+      <meta property="og:image" content={HOME_OG_IMAGE_URL} />
+    </Head>
+  )
+}
diff --git a/examples/cms-cosmic/components/more-stories.tsx b/examples/cms-cosmic/components/more-stories.tsx
new file mode 100644
index 0000000000000..35bb95e0ab66b
--- /dev/null
+++ b/examples/cms-cosmic/components/more-stories.tsx
@@ -0,0 +1,24 @@
+import PostPreview from './post-preview'
+
+export default function MoreStories({ posts }) {
+  return (
+    <section>
+      <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
+        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) => (
+          <PostPreview
+            key={post.slug}
+            title={post.title}
+            coverImage={post.metadata.cover_image}
+            date={post.created_at}
+            author={post.metadata.author}
+            slug={post.slug}
+            excerpt={post.metadata.excerpt}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}
diff --git a/examples/cms-cosmic/components/post-preview.tsx b/examples/cms-cosmic/components/post-preview.tsx
new file mode 100644
index 0000000000000..3fecd4e702792
--- /dev/null
+++ b/examples/cms-cosmic/components/post-preview.tsx
@@ -0,0 +1,31 @@
+import Avatar from './avatar'
+import Date from './date'
+import CoverImage from './cover-image'
+import Link from 'next/link'
+
+export default function PostPreview({
+  title,
+  coverImage,
+  date,
+  excerpt,
+  author,
+  slug,
+}) {
+  return (
+    <div>
+      <div className="mb-5">
+        <CoverImage slug={slug} title={title} url={coverImage.imgix_url} />
+      </div>
+      <h3 className="text-3xl mb-3 leading-snug">
+        <Link href={`/posts/${slug}`}>
+          <a className="hover:underline">{title}</a>
+        </Link>
+      </h3>
+      <div className="text-lg mb-4">
+        <Date dateString={date} />
+      </div>
+      <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
+      <Avatar name={author.title} picture={author.metadata.picture.imgix_url} />
+    </div>
+  )
+}
diff --git a/examples/cms-cosmic/components/post-title.tsx b/examples/cms-cosmic/components/post-title.tsx
new file mode 100644
index 0000000000000..edd8cba65c257
--- /dev/null
+++ b/examples/cms-cosmic/components/post-title.tsx
@@ -0,0 +1,7 @@
+export default function PostTitle({ children }) {
+  return (
+    <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>
+  )
+}
diff --git a/examples/cms-cosmic/components/section-separator.tsx b/examples/cms-cosmic/components/section-separator.tsx
new file mode 100644
index 0000000000000..4ca5c65fdc6ee
--- /dev/null
+++ b/examples/cms-cosmic/components/section-separator.tsx
@@ -0,0 +1,3 @@
+export default function SectionSeparator() {
+  return <hr className="border-accent-2 mt-28 mb-24" />
+}
diff --git a/examples/cms-cosmic/lib/api.js b/examples/cms-cosmic/lib/api.js
index 112ab862c1f44..19cfd44850ab5 100644
--- a/examples/cms-cosmic/lib/api.js
+++ b/examples/cms-cosmic/lib/api.js
@@ -9,11 +9,13 @@ const bucket = Cosmic().bucket({
   read_key: READ_KEY,
 })
 
+const is404 = (error) => /not found/i.test(error.message)
+
 export async function getPreviewPostBySlug(slug) {
   const params = {
     query: {
       slug,
-      type: 'posts',
+      type: 'posts'
     },
     props: 'slug',
     status: 'all',
@@ -23,7 +25,7 @@ export async function getPreviewPostBySlug(slug) {
     const data = await bucket.getObjects(params)
     return data.objects[0]
   } catch (err) {
-    // 404 if slug not found
+    // Don't throw if an slug doesn't exist
     return <ErrorPage statusCode={err.status} />
   }
 }
@@ -31,7 +33,7 @@ export async function getPreviewPostBySlug(slug) {
 export async function getAllPostsWithSlug() {
   const params = {
     query: {
-      type: 'posts',
+      type: 'posts'
     },
     props: 'slug',
   }
@@ -42,7 +44,7 @@ export async function getAllPostsWithSlug() {
 export async function getAllPostsForHome(preview) {
   const params = {
     query: {
-      type: 'posts',
+      type: 'posts'
     },
     props: 'title,slug,metadata,created_at',
     sort: '-created_at',
@@ -54,16 +56,16 @@ export async function getAllPostsForHome(preview) {
 
 export async function getPostAndMorePosts(slug, preview) {
   const singleObjectParams = {
-    query: {
+    query: { 
       slug,
-      type: 'posts',
+      type: 'posts'
     },
     props: 'slug,title,metadata,created_at',
     ...(preview && { status: 'all' }),
   }
   const moreObjectParams = {
     query: {
-      type: 'posts',
+      type: 'posts'
     },
     limit: 3,
     props: 'title,slug,metadata,created_at',
@@ -74,7 +76,6 @@ export async function getPostAndMorePosts(slug, preview) {
     const data = await bucket.getObjects(singleObjectParams)
     object = data.objects[0]
   } catch (err) {
-    // 404 if slug not found
     return <ErrorPage statusCode={err.status} />
   }
   const moreObjects = await bucket.getObjects(moreObjectParams)
diff --git a/examples/cms-cosmic/next-env.d.ts b/examples/cms-cosmic/next-env.d.ts
new file mode 100644
index 0000000000000..4f11a03dc6cc3
--- /dev/null
+++ b/examples/cms-cosmic/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/cms-cosmic/package.json b/examples/cms-cosmic/package.json
index fd41c6c337c09..40b44fea11532 100644
--- a/examples/cms-cosmic/package.json
+++ b/examples/cms-cosmic/package.json
@@ -9,18 +9,21 @@
     "classnames": "2.3.1",
     "cosmicjs": "4.1.7",
     "date-fns": "2.28.0",
-    "lazysizes": "^5.2.1-rc2",
+    "lazysizes": "^5.3.2",
     "next": "latest",
-    "react": "^17.0.2",
-    "react-datocms": "1.6.3",
-    "react-dom": "^17.0.2",
-    "react-imgix": "^9.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-imgix": "^9.5.1",
     "remark": "14.0.2",
     "remark-html": "15.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "10.4.2",
-    "postcss": "8.4.5",
-    "tailwindcss": "^3.0.15"
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.14",
+    "autoprefixer": "10.4.7",
+    "dts-css-modules-loader": "^2.0.0",
+    "postcss": "8.4.14",
+    "tailwindcss": "^3.1.4",
+    "typescript": "^4.7.4"
   }
 }
diff --git a/examples/cms-cosmic/tsconfig.json b/examples/cms-cosmic/tsconfig.json
new file mode 100644
index 0000000000000..98e02bdeee755
--- /dev/null
+++ b/examples/cms-cosmic/tsconfig.json
@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": [
+        "components/*"
+      ],
+      "@/lib/*": [
+        "lib/*"
+      ],
+      "@/styles/*": [
+        "styles/*"
+      ]
+    },
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "Node",
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": [
+    "./components/",
+    "./lib/",
+    "./styles/"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

From 0832f79963e75660aa62bc31b9119a23b8b711e8 Mon Sep 17 00:00:00 2001
From: sherazmalik06 <sherazmalik06@gmail.com>
Date: Fri, 24 Jun 2022 20:35:43 +0500
Subject: [PATCH 02/10] conversion to typescript

---
 examples/cms-cosmic/components/alert.js       | 42 ------------
 examples/cms-cosmic/components/alert.tsx      |  9 ++-
 examples/cms-cosmic/components/avatar.js      | 19 ------
 examples/cms-cosmic/components/avatar.tsx     | 11 +++-
 examples/cms-cosmic/components/container.js   |  3 -
 examples/cms-cosmic/components/container.tsx  | 13 +++-
 examples/cms-cosmic/components/cover-image.js | 35 ----------
 .../cms-cosmic/components/cover-image.tsx     | 14 +++-
 examples/cms-cosmic/components/date.js        |  6 --
 examples/cms-cosmic/components/date.tsx       |  9 ++-
 examples/cms-cosmic/components/footer.js      | 30 ---------
 examples/cms-cosmic/components/footer.tsx     |  4 +-
 examples/cms-cosmic/components/header.js      | 12 ----
 examples/cms-cosmic/components/header.tsx     |  4 +-
 examples/cms-cosmic/components/hero-post.js   | 40 ------------
 examples/cms-cosmic/components/hero-post.tsx  | 65 +++++++++++--------
 examples/cms-cosmic/components/intro.js       | 28 --------
 examples/cms-cosmic/components/intro.tsx      |  4 +-
 examples/cms-cosmic/components/layout.js      | 18 -----
 examples/cms-cosmic/components/layout.tsx     | 31 +++++----
 examples/cms-cosmic/components/meta.js        | 42 ------------
 examples/cms-cosmic/components/meta.tsx       |  4 +-
 .../cms-cosmic/components/more-stories.js     | 24 -------
 .../cms-cosmic/components/more-stories.tsx    |  9 ++-
 .../{post-body.js => post-body.tsx}           |  9 ++-
 examples/cms-cosmic/components/post-header.js | 29 ---------
 .../cms-cosmic/components/post-header.tsx     | 43 ++++++++++++
 .../cms-cosmic/components/post-preview.js     | 31 ---------
 .../cms-cosmic/components/post-preview.tsx    | 47 +++++++++-----
 examples/cms-cosmic/components/post-title.js  |  7 --
 examples/cms-cosmic/components/post-title.tsx |  8 ++-
 .../components/section-separator.js           |  3 -
 .../components/section-separator.tsx          |  4 +-
 examples/cms-cosmic/lib/{api.js => api.tsx}   | 11 ++--
 .../lib/{constants.js => constants.ts}        |  0
 .../{markdownToHtml.js => markdownToHtml.ts}  |  4 +-
 examples/cms-cosmic/package.json              |  3 +-
 examples/cms-cosmic/pages/_app.js             |  7 --
 examples/cms-cosmic/pages/_app.tsx            |  8 +++
 .../pages/{_document.js => _document.tsx}     |  0
 .../api/{exit-preview.js => exit-preview.ts}  |  4 +-
 .../pages/api/{preview.js => preview.ts}      |  8 ++-
 .../cms-cosmic/pages/{index.js => index.tsx}  | 19 +++++-
 .../pages/posts/{[slug].js => [slug].tsx}     | 38 +++++++++--
 examples/cms-cosmic/tsconfig.json             |  8 +--
 45 files changed, 296 insertions(+), 471 deletions(-)
 delete mode 100644 examples/cms-cosmic/components/alert.js
 delete mode 100644 examples/cms-cosmic/components/avatar.js
 delete mode 100644 examples/cms-cosmic/components/container.js
 delete mode 100644 examples/cms-cosmic/components/cover-image.js
 delete mode 100644 examples/cms-cosmic/components/date.js
 delete mode 100644 examples/cms-cosmic/components/footer.js
 delete mode 100644 examples/cms-cosmic/components/header.js
 delete mode 100644 examples/cms-cosmic/components/hero-post.js
 delete mode 100644 examples/cms-cosmic/components/intro.js
 delete mode 100644 examples/cms-cosmic/components/layout.js
 delete mode 100644 examples/cms-cosmic/components/meta.js
 delete mode 100644 examples/cms-cosmic/components/more-stories.js
 rename examples/cms-cosmic/components/{post-body.js => post-body.tsx} (64%)
 delete mode 100644 examples/cms-cosmic/components/post-header.js
 create mode 100644 examples/cms-cosmic/components/post-header.tsx
 delete mode 100644 examples/cms-cosmic/components/post-preview.js
 delete mode 100644 examples/cms-cosmic/components/post-title.js
 delete mode 100644 examples/cms-cosmic/components/section-separator.js
 rename examples/cms-cosmic/lib/{api.js => api.tsx} (86%)
 rename examples/cms-cosmic/lib/{constants.js => constants.ts} (100%)
 rename examples/cms-cosmic/lib/{markdownToHtml.js => markdownToHtml.ts} (66%)
 delete mode 100644 examples/cms-cosmic/pages/_app.js
 create mode 100644 examples/cms-cosmic/pages/_app.tsx
 rename examples/cms-cosmic/pages/{_document.js => _document.tsx} (100%)
 rename examples/cms-cosmic/pages/api/{exit-preview.js => exit-preview.ts} (79%)
 rename examples/cms-cosmic/pages/api/{preview.js => preview.ts} (83%)
 rename examples/cms-cosmic/pages/{index.js => index.tsx} (80%)
 rename examples/cms-cosmic/pages/posts/{[slug].js => [slug].tsx} (79%)

diff --git a/examples/cms-cosmic/components/alert.js b/examples/cms-cosmic/components/alert.js
deleted file mode 100644
index 051f3319649ed..0000000000000
--- a/examples/cms-cosmic/components/alert.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '@/lib/constants'
-
-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,
-      })}
-    >
-      <Container>
-        <div className="py-2 text-center text-sm">
-          {preview ? (
-            <>
-              This is page is a preview.{' '}
-              <a
-                href="/api/exit-preview"
-                className="underline hover:text-cyan duration-200 transition-colors"
-              >
-                Click here
-              </a>{' '}
-              to exit preview mode.
-            </>
-          ) : (
-            <>
-              The source code for this blog is{' '}
-              <a
-                href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
-                className="underline hover:text-success duration-200 transition-colors"
-              >
-                available on GitHub
-              </a>
-              .
-            </>
-          )}
-        </div>
-      </Container>
-    </div>
-  )
-}
diff --git a/examples/cms-cosmic/components/alert.tsx b/examples/cms-cosmic/components/alert.tsx
index 051f3319649ed..97daaeeffa402 100644
--- a/examples/cms-cosmic/components/alert.tsx
+++ b/examples/cms-cosmic/components/alert.tsx
@@ -2,7 +2,12 @@ import Container from './container'
 import cn from 'classnames'
 import { EXAMPLE_PATH } from '@/lib/constants'
 
-export default function Alert({ preview }) {
+type AlertProps = {
+  preview
+};
+
+const Alert = (props: AlertProps) => {
+  const { preview } = props;
   return (
     <div
       className={cn('border-b', {
@@ -40,3 +45,5 @@ export default function Alert({ preview }) {
     </div>
   )
 }
+
+export default Alert;
\ No newline at end of file
diff --git a/examples/cms-cosmic/components/avatar.js b/examples/cms-cosmic/components/avatar.js
deleted file mode 100644
index d7f7ec3871e87..0000000000000
--- a/examples/cms-cosmic/components/avatar.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Image from 'next/image'
-
-export default function Avatar({ name, picture }) {
-  return (
-    <div className="flex items-center">
-      <div className="w-12 h-12 relative mr-4">
-        {picture && (
-          <Image
-            src={`${picture}?auto=format,compress,enhance&w=100&h=100`}
-            layout="fill"
-            className="rounded-full"
-            alt={name}
-          />
-        )}
-      </div>
-      <div className="text-xl font-bold">{name}</div>
-    </div>
-  )
-}
diff --git a/examples/cms-cosmic/components/avatar.tsx b/examples/cms-cosmic/components/avatar.tsx
index d7f7ec3871e87..5077793e14ecd 100644
--- a/examples/cms-cosmic/components/avatar.tsx
+++ b/examples/cms-cosmic/components/avatar.tsx
@@ -1,6 +1,13 @@
 import Image from 'next/image'
 
-export default function Avatar({ name, picture }) {
+type AvatarProps = {
+  name,
+  picture
+};
+  
+const Avatar = (props: AvatarProps) => {
+const { name, picture } = props;
+
   return (
     <div className="flex items-center">
       <div className="w-12 h-12 relative mr-4">
@@ -17,3 +24,5 @@ export default function Avatar({ name, picture }) {
     </div>
   )
 }
+
+export default Avatar;
\ No newline at end of file
diff --git a/examples/cms-cosmic/components/container.js b/examples/cms-cosmic/components/container.js
deleted file mode 100644
index fc1c29dfb0747..0000000000000
--- a/examples/cms-cosmic/components/container.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
-}
diff --git a/examples/cms-cosmic/components/container.tsx b/examples/cms-cosmic/components/container.tsx
index fc1c29dfb0747..5ed9edbae19b0 100644
--- a/examples/cms-cosmic/components/container.tsx
+++ b/examples/cms-cosmic/components/container.tsx
@@ -1,3 +1,12 @@
-export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
+type ContainerProps = {
+  children,
+};
+
+const Container = (props: ContainerProps) => {
+  const { children } = props;
+  return (
+     <div className="container mx-auto px-5">{children}</div>
+  )
 }
+
+export default Container;
\ No newline at end of file
diff --git a/examples/cms-cosmic/components/cover-image.js b/examples/cms-cosmic/components/cover-image.js
deleted file mode 100644
index 4e754a79b57bd..0000000000000
--- a/examples/cms-cosmic/components/cover-image.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import cn from 'classnames'
-import Link from 'next/link'
-import Imgix from 'react-imgix'
-
-export default function CoverImage({ title, url, slug }) {
-  const image = (
-    <Imgix
-      src={url}
-      alt={`Cover Image for ${title}`}
-      className={cn('lazyload shadow-small w-full', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
-      })}
-      sizes="100vw"
-      attributeConfig={{
-        src: 'data-src',
-        srcSet: 'data-srcset',
-        sizes: 'data-sizes',
-      }}
-      htmlAttributes={{
-        src: `${url}?auto=format,compress&q=1&blur=500&w=auto`,
-      }}
-    />
-  )
-  return (
-    <div className="sm:mx-0">
-      {slug ? (
-        <Link href={`/posts/${slug}`}>
-          <a aria-label={title}>{image}</a>
-        </Link>
-      ) : (
-        image
-      )}
-    </div>
-  )
-}
diff --git a/examples/cms-cosmic/components/cover-image.tsx b/examples/cms-cosmic/components/cover-image.tsx
index 4e754a79b57bd..b9741ebbe102f 100644
--- a/examples/cms-cosmic/components/cover-image.tsx
+++ b/examples/cms-cosmic/components/cover-image.tsx
@@ -2,7 +2,18 @@ import cn from 'classnames'
 import Link from 'next/link'
 import Imgix from 'react-imgix'
 
-export default function CoverImage({ title, url, slug }) {
+type CoverImageProps = {
+  title,
+  url,
+  slug,
+};
+const CoverImage = (props: CoverImageProps) => {
+  const { 
+    title, 
+    url, 
+    slug
+  } = props;
+  
   const image = (
     <Imgix
       src={url}
@@ -33,3 +44,4 @@ export default function CoverImage({ title, url, slug }) {
     </div>
   )
 }
+export default CoverImage;
diff --git a/examples/cms-cosmic/components/date.js b/examples/cms-cosmic/components/date.js
deleted file mode 100644
index eac5681378bfd..0000000000000
--- a/examples/cms-cosmic/components/date.js
+++ /dev/null
@@ -1,6 +0,0 @@
-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>
-}
diff --git a/examples/cms-cosmic/components/date.tsx b/examples/cms-cosmic/components/date.tsx
index eac5681378bfd..db6d058807dbf 100644
--- a/examples/cms-cosmic/components/date.tsx
+++ b/examples/cms-cosmic/components/date.tsx
@@ -1,6 +1,13 @@
 import { parseISO, format } from 'date-fns'
 
-export default function Date({ dateString }) {
+type DateProps = {
+  dateString
+};
+
+const Date = (props: DateProps) => {
+  const { dateString } = props;
   const date = parseISO(dateString)
   return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
 }
+
+export default Date;
\ No newline at end of file
diff --git a/examples/cms-cosmic/components/footer.js b/examples/cms-cosmic/components/footer.js
deleted file mode 100644
index b305c3eb40b0d..0000000000000
--- a/examples/cms-cosmic/components/footer.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '@/lib/constants'
-
-export default function Footer() {
-  return (
-    <footer className="bg-accent-1 border-t border-accent-2">
-      <Container>
-        <div className="py-28 flex flex-col lg:flex-row items-center">
-          <h3 className="text-4xl lg:text-5xl font-bold tracking-tighter leading-tight text-center lg:text-left mb-10 lg:mb-0 lg:pr-4 lg:w-1/2">
-            Statically Generated with Next.js.
-          </h3>
-          <div className="flex flex-col lg:flex-row justify-center items-center lg:pl-4 lg:w-1/2">
-            <a
-              href="https://nextjs.org/docs/basic-features/pages"
-              className="mx-3 bg-black hover:bg-white hover:text-black border border-black text-white font-bold py-3 px-12 lg:px-8 duration-200 transition-colors mb-6 lg:mb-0"
-            >
-              Read Documentation
-            </a>
-            <a
-              href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
-              className="mx-3 font-bold hover:underline"
-            >
-              View on GitHub
-            </a>
-          </div>
-        </div>
-      </Container>
-    </footer>
-  )
-}
diff --git a/examples/cms-cosmic/components/footer.tsx b/examples/cms-cosmic/components/footer.tsx
index b305c3eb40b0d..9b7e81d5dede5 100644
--- a/examples/cms-cosmic/components/footer.tsx
+++ b/examples/cms-cosmic/components/footer.tsx
@@ -1,7 +1,7 @@
 import Container from './container'
 import { EXAMPLE_PATH } from '@/lib/constants'
 
-export default function Footer() {
+const Footer = () => {
   return (
     <footer className="bg-accent-1 border-t border-accent-2">
       <Container>
@@ -28,3 +28,5 @@ export default function Footer() {
     </footer>
   )
 }
+
+export default Footer;
\ No newline at end of file
diff --git a/examples/cms-cosmic/components/header.js b/examples/cms-cosmic/components/header.js
deleted file mode 100644
index 562e7e3eebb6a..0000000000000
--- a/examples/cms-cosmic/components/header.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Link from 'next/link'
-
-export default function Header() {
-  return (
-    <h2 className="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-20 mt-8">
-      <Link href="/">
-        <a className="hover:underline">Blog</a>
-      </Link>
-      .
-    </h2>
-  )
-}
diff --git a/examples/cms-cosmic/components/header.tsx b/examples/cms-cosmic/components/header.tsx
index 562e7e3eebb6a..15c21dd9bc1f7 100644
--- a/examples/cms-cosmic/components/header.tsx
+++ b/examples/cms-cosmic/components/header.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 
-export default function Header() {
+const Header = () => {
   return (
     <h2 className="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-20 mt-8">
       <Link href="/">
@@ -10,3 +10,5 @@ export default function Header() {
     </h2>
   )
 }
+
+export default Header;
\ No newline at end of file
diff --git a/examples/cms-cosmic/components/hero-post.js b/examples/cms-cosmic/components/hero-post.js
deleted file mode 100644
index e8f7823c2b039..0000000000000
--- a/examples/cms-cosmic/components/hero-post.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
-
-export default function HeroPost({
-  title,
-  coverImage,
-  date,
-  excerpt,
-  author,
-  slug,
-}) {
-  return (
-    <section>
-      <div className="mb-8 md:mb-16">
-        <CoverImage title={title} url={coverImage.imgix_url} slug={slug} />
-      </div>
-      <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 href={`/posts/${slug}`}>
-              <a className="hover:underline">{title}</a>
-            </Link>
-          </h3>
-          <div className="mb-4 md:mb-0 text-lg">
-            <Date dateString={date} />
-          </div>
-        </div>
-        <div>
-          <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
-          <Avatar
-            name={author.title}
-            picture={author.metadata.picture.imgix_url}
-          />
-        </div>
-      </div>
-    </section>
-  )
-}
diff --git a/examples/cms-cosmic/components/hero-post.tsx b/examples/cms-cosmic/components/hero-post.tsx
index e8f7823c2b039..73237427bbe12 100644
--- a/examples/cms-cosmic/components/hero-post.tsx
+++ b/examples/cms-cosmic/components/hero-post.tsx
@@ -3,38 +3,51 @@ import Date from './date'
 import CoverImage from './cover-image'
 import Link from 'next/link'
 
-export default function HeroPost({
+type HeroPostProps = {
   title,
   coverImage,
   date,
   excerpt,
   author,
   slug,
-}) {
-  return (
-    <section>
-      <div className="mb-8 md:mb-16">
-        <CoverImage title={title} url={coverImage.imgix_url} slug={slug} />
-      </div>
-      <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 href={`/posts/${slug}`}>
-              <a className="hover:underline">{title}</a>
-            </Link>
-          </h3>
-          <div className="mb-4 md:mb-0 text-lg">
-            <Date dateString={date} />
-          </div>
+};
+
+const HeroPost = (props: HeroPostProps) => {
+  const {  
+    title, 
+    coverImage,
+    date,
+    excerpt,
+    author,
+    slug,
+  } = props;
+  
+    return (
+      <section>
+        <div className="mb-8 md:mb-16">
+          <CoverImage title={title} url={coverImage.imgix_url} slug={slug} />
         </div>
-        <div>
-          <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
-          <Avatar
-            name={author.title}
-            picture={author.metadata.picture.imgix_url}
-          />
+        <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 href={`/posts/${slug}`}>
+                <a className="hover:underline">{title}</a>
+              </Link>
+            </h3>
+            <div className="mb-4 md:mb-0 text-lg">
+              <Date dateString={date} />
+            </div>
+          </div>
+          <div>
+            <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
+            <Avatar
+              name={author.title}
+              picture={author.metadata.picture.imgix_url}
+            />
+          </div>
         </div>
-      </div>
-    </section>
-  )
+      </section>
+    )
 }
+
+export default HeroPost;
\ No newline at end of file
diff --git a/examples/cms-cosmic/components/intro.js b/examples/cms-cosmic/components/intro.js
deleted file mode 100644
index c3003c6196642..0000000000000
--- a/examples/cms-cosmic/components/intro.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { CMS_NAME, CMS_URL } from '@/lib/constants'
-
-export default function Intro() {
-  return (
-    <section className="flex-col md:flex-row flex items-center md:justify-between mt-16 mb-16 md:mb-12">
-      <h1 className="text-6xl md:text-8xl font-bold tracking-tighter leading-tight md:pr-8">
-        Blog.
-      </h1>
-      <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        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
-          href={CMS_URL}
-          className="underline hover:text-success duration-200 transition-colors"
-        >
-          {CMS_NAME}
-        </a>
-        .
-      </h4>
-    </section>
-  )
-}
diff --git a/examples/cms-cosmic/components/intro.tsx b/examples/cms-cosmic/components/intro.tsx
index c3003c6196642..ba2fa72fe9255 100644
--- a/examples/cms-cosmic/components/intro.tsx
+++ b/examples/cms-cosmic/components/intro.tsx
@@ -1,6 +1,6 @@
 import { CMS_NAME, CMS_URL } from '@/lib/constants'
 
-export default function Intro() {
+const Intro = () => {
   return (
     <section className="flex-col md:flex-row flex items-center md:justify-between mt-16 mb-16 md:mb-12">
       <h1 className="text-6xl md:text-8xl font-bold tracking-tighter leading-tight md:pr-8">
@@ -26,3 +26,5 @@ export default function Intro() {
     </section>
   )
 }
+
+export default Intro;
\ No newline at end of file
diff --git a/examples/cms-cosmic/components/layout.js b/examples/cms-cosmic/components/layout.js
deleted file mode 100644
index ff54d53992783..0000000000000
--- a/examples/cms-cosmic/components/layout.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Alert from './alert'
-import Footer from './footer'
-import Meta from './meta'
-import 'lazysizes'
-import 'lazysizes/plugins/parent-fit/ls.parent-fit'
-
-export default function Layout({ preview, children }) {
-  return (
-    <>
-      <Meta />
-      <div className="min-h-screen">
-        <Alert preview={preview} />
-        <main>{children}</main>
-      </div>
-      <Footer />
-    </>
-  )
-}
diff --git a/examples/cms-cosmic/components/layout.tsx b/examples/cms-cosmic/components/layout.tsx
index ff54d53992783..4bc33081ae669 100644
--- a/examples/cms-cosmic/components/layout.tsx
+++ b/examples/cms-cosmic/components/layout.tsx
@@ -4,15 +4,24 @@ import Meta from './meta'
 import 'lazysizes'
 import 'lazysizes/plugins/parent-fit/ls.parent-fit'
 
-export default function Layout({ preview, children }) {
+type LayoutProps = {
+  preview,
+  children,
+};
+
+const Layout = (props: LayoutProps) => {
+const { preview, children } = props;
+  
   return (
-    <>
-      <Meta />
-      <div className="min-h-screen">
-        <Alert preview={preview} />
-        <main>{children}</main>
-      </div>
-      <Footer />
-    </>
-  )
-}
+        <>
+          <Meta />
+          <div className="min-h-screen">
+            <Alert preview={preview}/>
+            <main>{children}</main>
+          </div>
+          <Footer />
+        </>
+      )
+  }
+  
+export default Layout;
diff --git a/examples/cms-cosmic/components/meta.js b/examples/cms-cosmic/components/meta.js
deleted file mode 100644
index cec622742089e..0000000000000
--- a/examples/cms-cosmic/components/meta.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '@/lib/constants'
-
-export default function Meta() {
-  return (
-    <Head>
-      <link
-        rel="apple-touch-icon"
-        sizes="180x180"
-        href="/favicon/apple-touch-icon.png"
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        sizes="32x32"
-        href="/favicon/favicon-32x32.png"
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        sizes="16x16"
-        href="/favicon/favicon-16x16.png"
-      />
-      <link rel="manifest" href="/favicon/site.webmanifest" />
-      <link
-        rel="mask-icon"
-        href="/favicon/safari-pinned-tab.svg"
-        color="#000000"
-      />
-      <link rel="shortcut icon" href="/favicon/favicon.ico" />
-      <meta name="msapplication-TileColor" content="#000000" />
-      <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
-      <meta name="theme-color" content="#000" />
-      <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
-      <meta
-        name="description"
-        content={`A statically generated blog example using Next.js and ${CMS_NAME}.`}
-      />
-      <meta property="og:image" content={HOME_OG_IMAGE_URL} />
-    </Head>
-  )
-}
diff --git a/examples/cms-cosmic/components/meta.tsx b/examples/cms-cosmic/components/meta.tsx
index cec622742089e..3d1072d91cba2 100644
--- a/examples/cms-cosmic/components/meta.tsx
+++ b/examples/cms-cosmic/components/meta.tsx
@@ -1,7 +1,7 @@
 import Head from 'next/head'
 import { CMS_NAME, HOME_OG_IMAGE_URL } from '@/lib/constants'
 
-export default function Meta() {
+const Meta = () => {
   return (
     <Head>
       <link
@@ -40,3 +40,5 @@ export default function Meta() {
     </Head>
   )
 }
+
+export default Meta;
\ No newline at end of file
diff --git a/examples/cms-cosmic/components/more-stories.js b/examples/cms-cosmic/components/more-stories.js
deleted file mode 100644
index 35bb95e0ab66b..0000000000000
--- a/examples/cms-cosmic/components/more-stories.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import PostPreview from './post-preview'
-
-export default function MoreStories({ posts }) {
-  return (
-    <section>
-      <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
-        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) => (
-          <PostPreview
-            key={post.slug}
-            title={post.title}
-            coverImage={post.metadata.cover_image}
-            date={post.created_at}
-            author={post.metadata.author}
-            slug={post.slug}
-            excerpt={post.metadata.excerpt}
-          />
-        ))}
-      </div>
-    </section>
-  )
-}
diff --git a/examples/cms-cosmic/components/more-stories.tsx b/examples/cms-cosmic/components/more-stories.tsx
index 35bb95e0ab66b..4a3d359633827 100644
--- a/examples/cms-cosmic/components/more-stories.tsx
+++ b/examples/cms-cosmic/components/more-stories.tsx
@@ -1,6 +1,11 @@
 import PostPreview from './post-preview'
 
-export default function MoreStories({ posts }) {
+type MoreStoriesProps = {
+  posts,
+};
+
+const MoreStories = (props: MoreStoriesProps) => {
+  const { posts } = props;
   return (
     <section>
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
@@ -22,3 +27,5 @@ export default function MoreStories({ posts }) {
     </section>
   )
 }
+
+export default MoreStories;
diff --git a/examples/cms-cosmic/components/post-body.js b/examples/cms-cosmic/components/post-body.tsx
similarity index 64%
rename from examples/cms-cosmic/components/post-body.js
rename to examples/cms-cosmic/components/post-body.tsx
index 4cc2bb52bccef..4f76d4b6ea0b7 100644
--- a/examples/cms-cosmic/components/post-body.js
+++ b/examples/cms-cosmic/components/post-body.tsx
@@ -1,6 +1,11 @@
 import markdownStyles from './markdown-styles.module.css'
 
-export default function PostBody({ content }) {
+type PostBodyProps = {
+  content,
+};
+
+const PostBody = (props: PostBodyProps) => {
+  const { content} = props;
   return (
     <div className="max-w-2xl mx-auto">
       <div
@@ -10,3 +15,5 @@ export default function PostBody({ content }) {
     </div>
   )
 }
+
+export default PostBody;
\ No newline at end of file
diff --git a/examples/cms-cosmic/components/post-header.js b/examples/cms-cosmic/components/post-header.js
deleted file mode 100644
index 83b469ed470f8..0000000000000
--- a/examples/cms-cosmic/components/post-header.js
+++ /dev/null
@@ -1,29 +0,0 @@
-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 (
-    <>
-      <PostTitle>{title}</PostTitle>
-      <div className="hidden md:block md:mb-12">
-        <Avatar
-          name={author.title}
-          picture={author.metadata.picture.imgix_url}
-        />
-      </div>
-      <div className="mb-8 md:mb-16 sm:mx-0">
-        <CoverImage title={title} url={coverImage.imgix_url} />
-      </div>
-      <div className="max-w-2xl mx-auto">
-        <div className="block md:hidden mb-6">
-          <Avatar name={author.name} picture={author.picture} />
-        </div>
-        <div className="mb-6 text-lg">
-          <Date dateString={date} />
-        </div>
-      </div>
-    </>
-  )
-}
diff --git a/examples/cms-cosmic/components/post-header.tsx b/examples/cms-cosmic/components/post-header.tsx
new file mode 100644
index 0000000000000..4f7ebf7ccb82d
--- /dev/null
+++ b/examples/cms-cosmic/components/post-header.tsx
@@ -0,0 +1,43 @@
+import Avatar from './avatar'
+import Date from './date'
+import CoverImage from './cover-image'
+import PostTitle from './post-title'
+
+type PostHeaderProps = {
+  title, 
+  coverImage, 
+  date, 
+  author 
+};
+
+const PostHeader = (props: PostHeaderProps) => {
+  const {  
+    title, 
+    coverImage, 
+    date, 
+    author } = props;
+    return (
+      <>
+        <PostTitle>{title}</PostTitle>
+        <div className="hidden md:block md:mb-12">
+          <Avatar
+            name={author.title}
+            picture={author.metadata.picture.imgix_url}
+          />
+        </div>
+        <div className="mb-8 md:mb-16 sm:mx-0">
+          <CoverImage title={title} url={coverImage.imgix_url} slug={''} />
+        </div>
+        <div className="max-w-2xl mx-auto">
+          <div className="block md:hidden mb-6">
+            <Avatar name={author.name} picture={author.picture} />
+          </div>
+          <div className="mb-6 text-lg">
+            <Date dateString={date} />
+          </div>
+        </div>
+      </>
+    )
+}
+
+export default PostHeader;
diff --git a/examples/cms-cosmic/components/post-preview.js b/examples/cms-cosmic/components/post-preview.js
deleted file mode 100644
index 3fecd4e702792..0000000000000
--- a/examples/cms-cosmic/components/post-preview.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
-
-export default function PostPreview({
-  title,
-  coverImage,
-  date,
-  excerpt,
-  author,
-  slug,
-}) {
-  return (
-    <div>
-      <div className="mb-5">
-        <CoverImage slug={slug} title={title} url={coverImage.imgix_url} />
-      </div>
-      <h3 className="text-3xl mb-3 leading-snug">
-        <Link href={`/posts/${slug}`}>
-          <a className="hover:underline">{title}</a>
-        </Link>
-      </h3>
-      <div className="text-lg mb-4">
-        <Date dateString={date} />
-      </div>
-      <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
-      <Avatar name={author.title} picture={author.metadata.picture.imgix_url} />
-    </div>
-  )
-}
diff --git a/examples/cms-cosmic/components/post-preview.tsx b/examples/cms-cosmic/components/post-preview.tsx
index 3fecd4e702792..f1c3667739d15 100644
--- a/examples/cms-cosmic/components/post-preview.tsx
+++ b/examples/cms-cosmic/components/post-preview.tsx
@@ -3,29 +3,40 @@ import Date from './date'
 import CoverImage from './cover-image'
 import Link from 'next/link'
 
-export default function PostPreview({
+type PostPreviewProps = {
   title,
   coverImage,
   date,
   excerpt,
   author,
   slug,
-}) {
-  return (
-    <div>
-      <div className="mb-5">
-        <CoverImage slug={slug} title={title} url={coverImage.imgix_url} />
-      </div>
-      <h3 className="text-3xl mb-3 leading-snug">
-        <Link href={`/posts/${slug}`}>
-          <a className="hover:underline">{title}</a>
-        </Link>
-      </h3>
-      <div className="text-lg mb-4">
-        <Date dateString={date} />
+};
+
+const PostPreview = (props: PostPreviewProps) => {
+  const { title,
+    coverImage,
+    date,
+    excerpt,
+    author,
+    slug,
+  } = props;
+    return (
+      <div>
+        <div className="mb-5">
+          <CoverImage slug={slug} title={title} url={coverImage.imgix_url} />
+        </div>
+        <h3 className="text-3xl mb-3 leading-snug">
+          <Link href={`/posts/${slug}`}>
+            <a className="hover:underline">{title}</a>
+          </Link>
+        </h3>
+        <div className="text-lg mb-4">
+          <Date dateString={date} />
+        </div>
+        <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
+        <Avatar name={author.title} picture={author.metadata.picture.imgix_url} />
       </div>
-      <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
-      <Avatar name={author.title} picture={author.metadata.picture.imgix_url} />
-    </div>
-  )
+    )
 }
+
+export default PostPreview;
\ No newline at end of file
diff --git a/examples/cms-cosmic/components/post-title.js b/examples/cms-cosmic/components/post-title.js
deleted file mode 100644
index edd8cba65c257..0000000000000
--- a/examples/cms-cosmic/components/post-title.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function PostTitle({ children }) {
-  return (
-    <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>
-  )
-}
diff --git a/examples/cms-cosmic/components/post-title.tsx b/examples/cms-cosmic/components/post-title.tsx
index edd8cba65c257..941b0430ae197 100644
--- a/examples/cms-cosmic/components/post-title.tsx
+++ b/examples/cms-cosmic/components/post-title.tsx
@@ -1,7 +1,13 @@
-export default function PostTitle({ children }) {
+type PostTitleProps = {
+  children;
+};
+
+const PostTitle = (props: PostTitleProps) => {
+  const { children} = props;
   return (
     <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>
   )
 }
+export default PostTitle;
\ No newline at end of file
diff --git a/examples/cms-cosmic/components/section-separator.js b/examples/cms-cosmic/components/section-separator.js
deleted file mode 100644
index 4ca5c65fdc6ee..0000000000000
--- a/examples/cms-cosmic/components/section-separator.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
-}
diff --git a/examples/cms-cosmic/components/section-separator.tsx b/examples/cms-cosmic/components/section-separator.tsx
index 4ca5c65fdc6ee..bd5c0546a6e45 100644
--- a/examples/cms-cosmic/components/section-separator.tsx
+++ b/examples/cms-cosmic/components/section-separator.tsx
@@ -1,3 +1,5 @@
-export default function SectionSeparator() {
+const SectionSeparator = () => {
   return <hr className="border-accent-2 mt-28 mb-24" />
 }
+
+export default SectionSeparator;
\ No newline at end of file
diff --git a/examples/cms-cosmic/lib/api.js b/examples/cms-cosmic/lib/api.tsx
similarity index 86%
rename from examples/cms-cosmic/lib/api.js
rename to examples/cms-cosmic/lib/api.tsx
index 19cfd44850ab5..97404d03ebb89 100644
--- a/examples/cms-cosmic/lib/api.js
+++ b/examples/cms-cosmic/lib/api.tsx
@@ -11,7 +11,7 @@ const bucket = Cosmic().bucket({
 
 const is404 = (error) => /not found/i.test(error.message)
 
-export async function getPreviewPostBySlug(slug) {
+export const getPreviewPostBySlug = async (slug: string) => {
   const params = {
     query: {
       slug,
@@ -26,11 +26,11 @@ export async function getPreviewPostBySlug(slug) {
     return data.objects[0]
   } catch (err) {
     // Don't throw if an slug doesn't exist
-    return <ErrorPage statusCode={err.status} />
+    return <ErrorPage statusCode={err.status}/>
   }
 }
 
-export async function getAllPostsWithSlug() {
+export const getAllPostsWithSlug = async () => {
   const params = {
     query: {
       type: 'posts'
@@ -41,7 +41,8 @@ export async function getAllPostsWithSlug() {
   return data.objects
 }
 
-export async function getAllPostsForHome(preview) {
+
+export const getAllPostsForHome = async (preview) => {
   const params = {
     query: {
       type: 'posts'
@@ -54,7 +55,7 @@ export async function getAllPostsForHome(preview) {
   return data.objects
 }
 
-export async function getPostAndMorePosts(slug, preview) {
+export const getPostAndMorePosts = async (slug, preview) => {
   const singleObjectParams = {
     query: { 
       slug,
diff --git a/examples/cms-cosmic/lib/constants.js b/examples/cms-cosmic/lib/constants.ts
similarity index 100%
rename from examples/cms-cosmic/lib/constants.js
rename to examples/cms-cosmic/lib/constants.ts
diff --git a/examples/cms-cosmic/lib/markdownToHtml.js b/examples/cms-cosmic/lib/markdownToHtml.ts
similarity index 66%
rename from examples/cms-cosmic/lib/markdownToHtml.js
rename to examples/cms-cosmic/lib/markdownToHtml.ts
index 735fed2df3832..ffbd67f99c7fd 100644
--- a/examples/cms-cosmic/lib/markdownToHtml.js
+++ b/examples/cms-cosmic/lib/markdownToHtml.ts
@@ -1,7 +1,9 @@
 import { remark } from 'remark'
 import html from 'remark-html'
 
-export default async function markdownToHtml(markdown) {
+const markdownToHtml = async (markdown) => {
   const result = await remark().use(html).process(markdown)
   return result.toString()
 }
+
+export default markdownToHtml;
\ No newline at end of file
diff --git a/examples/cms-cosmic/package.json b/examples/cms-cosmic/package.json
index 40b44fea11532..c3d6fb29ff388 100644
--- a/examples/cms-cosmic/package.json
+++ b/examples/cms-cosmic/package.json
@@ -2,7 +2,7 @@
   "private": true,
   "scripts": {
     "dev": "next",
-    "build": "next build",
+    "build": "tsc",
     "start": "next start"
   },
   "dependencies": {
@@ -21,7 +21,6 @@
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.14",
     "autoprefixer": "10.4.7",
-    "dts-css-modules-loader": "^2.0.0",
     "postcss": "8.4.14",
     "tailwindcss": "^3.1.4",
     "typescript": "^4.7.4"
diff --git a/examples/cms-cosmic/pages/_app.js b/examples/cms-cosmic/pages/_app.js
deleted file mode 100644
index f18e112c7cf79..0000000000000
--- a/examples/cms-cosmic/pages/_app.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import '@/styles/index.css'
-
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
-}
-
-export default MyApp
diff --git a/examples/cms-cosmic/pages/_app.tsx b/examples/cms-cosmic/pages/_app.tsx
new file mode 100644
index 0000000000000..2bc8da1079432
--- /dev/null
+++ b/examples/cms-cosmic/pages/_app.tsx
@@ -0,0 +1,8 @@
+import '@/styles/index.css'
+import type { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp
diff --git a/examples/cms-cosmic/pages/_document.js b/examples/cms-cosmic/pages/_document.tsx
similarity index 100%
rename from examples/cms-cosmic/pages/_document.js
rename to examples/cms-cosmic/pages/_document.tsx
diff --git a/examples/cms-cosmic/pages/api/exit-preview.js b/examples/cms-cosmic/pages/api/exit-preview.ts
similarity index 79%
rename from examples/cms-cosmic/pages/api/exit-preview.js
rename to examples/cms-cosmic/pages/api/exit-preview.ts
index 6c63a0a6e8a42..33d6338c82343 100644
--- a/examples/cms-cosmic/pages/api/exit-preview.js
+++ b/examples/cms-cosmic/pages/api/exit-preview.ts
@@ -1,4 +1,4 @@
-export default async function exit(_, res) {
+const exit = async (_, res) => {
   // Exit the current user from "Preview Mode". This function accepts no args.
   res.clearPreviewData()
 
@@ -6,3 +6,5 @@ export default async function exit(_, res) {
   res.writeHead(307, { Location: '/' })
   res.end()
 }
+
+export default exit;
\ No newline at end of file
diff --git a/examples/cms-cosmic/pages/api/preview.js b/examples/cms-cosmic/pages/api/preview.ts
similarity index 83%
rename from examples/cms-cosmic/pages/api/preview.js
rename to examples/cms-cosmic/pages/api/preview.ts
index 77b3ae16f5aed..46a3d7c2161b6 100644
--- a/examples/cms-cosmic/pages/api/preview.js
+++ b/examples/cms-cosmic/pages/api/preview.ts
@@ -1,7 +1,7 @@
-import { getPreviewPostBySlug } from '@/lib/api'
+import { getPreviewPostBySlug } from '../../lib/api'
 
-export default async function preview(req, res) {
-  // Check the secret and next parameters
+const preview = async(req, res) => {
+ // Check the secret and next parameters
   // This secret should only be known to this API route and the CMS
   if (
     req.query.secret !== process.env.COSMIC_PREVIEW_SECRET ||
@@ -26,3 +26,5 @@ export default async function preview(req, res) {
   res.writeHead(307, { Location: `/posts/${post.slug}` })
   res.end()
 }
+
+export default preview;
\ No newline at end of file
diff --git a/examples/cms-cosmic/pages/index.js b/examples/cms-cosmic/pages/index.tsx
similarity index 80%
rename from examples/cms-cosmic/pages/index.js
rename to examples/cms-cosmic/pages/index.tsx
index 95ecd45ed110b..1a9296c632ff7 100644
--- a/examples/cms-cosmic/pages/index.js
+++ b/examples/cms-cosmic/pages/index.tsx
@@ -7,12 +7,18 @@ import { getAllPostsForHome } from '@/lib/api'
 import Head from 'next/head'
 import { CMS_NAME } from '@/lib/constants'
 
-export default function Index({ allPosts }) {
+
+type IndexProps = {
+  allPosts,
+};
+
+const Index = (props: IndexProps) => {
+  const { allPosts } = props;
   const heroPost = allPosts[0]
   const morePosts = allPosts.slice(1)
   return (
     <>
-      <Layout>
+      <Layout preview={''}>
         <Head>
           <title>Next.js Blog Example with {CMS_NAME}</title>
         </Head>
@@ -35,9 +41,16 @@ export default function Index({ allPosts }) {
   )
 }
 
-export async function getStaticProps({ preview }) {
+type staticProps = {
+  preview,
+};
+
+export const getStaticProps = async(props: staticProps) => {
+  const { preview } = props;
   const allPosts = (await getAllPostsForHome(preview)) || []
   return {
     props: { allPosts },
   }
 }
+
+export default Index;
diff --git a/examples/cms-cosmic/pages/posts/[slug].js b/examples/cms-cosmic/pages/posts/[slug].tsx
similarity index 79%
rename from examples/cms-cosmic/pages/posts/[slug].js
rename to examples/cms-cosmic/pages/posts/[slug].tsx
index af330e4d05c3e..566975b44b8f7 100644
--- a/examples/cms-cosmic/pages/posts/[slug].js
+++ b/examples/cms-cosmic/pages/posts/[slug].tsx
@@ -13,7 +13,20 @@ import Head from 'next/head'
 import { CMS_NAME } from '@/lib/constants'
 import markdownToHtml from '@/lib/markdownToHtml'
 
-export default function Post({ post, morePosts, preview }) {
+
+type PostProps = {
+  post, 
+  morePosts, 
+  preview
+};
+
+const Post = (props: PostProps) => {
+  const { 
+    post, 
+    morePosts, 
+    preview 
+  } = props;
+  
   const router = useRouter()
   if (!router.isFallback && !post?.slug) {
     return <ErrorPage statusCode={404} />
@@ -52,24 +65,35 @@ export default function Post({ post, morePosts, preview }) {
     </Layout>
   )
 }
+export default Post;
 
-export async function getStaticProps({ params, preview = null }) {
-  const data = await getPostAndMorePosts(params.slug, preview)
-  const content = await markdownToHtml(data.post?.metadata?.content || '')
 
+
+type staticProps = {
+  params,
+  preview,
+};
+
+export const getStaticProps = async(props: staticProps) => {
+  const {  
+    params,
+    preview = null
+  } = props;
+  const data = await getPostAndMorePosts(params.slug, preview)
+  const content = await markdownToHtml(data['post']?.metadata?.content || '')
   return {
     props: {
       preview,
       post: {
-        ...data.post,
+        ...data['post'],
         content,
       },
-      morePosts: data.morePosts || [],
+      morePosts: data['morePosts'] || [],
     },
   }
 }
 
-export async function getStaticPaths() {
+export const getStaticPaths = async() => {
   const allPosts = (await getAllPostsWithSlug()) || []
   return {
     paths: allPosts.map((post) => `/posts/${post.slug}`),
diff --git a/examples/cms-cosmic/tsconfig.json b/examples/cms-cosmic/tsconfig.json
index 98e02bdeee755..ad53fb56766fd 100644
--- a/examples/cms-cosmic/tsconfig.json
+++ b/examples/cms-cosmic/tsconfig.json
@@ -29,12 +29,12 @@
     "moduleResolution": "Node",
     "jsx": "preserve",
     "resolveJsonModule": true,
-    "isolatedModules": true
+    "isolatedModules": true,
   },
   "include": [
-    "./components/",
-    "./lib/",
-    "./styles/"
+    "./components/..",
+    "./lib/..",
+    "./styles/.."
   ],
   "exclude": [
     "node_modules"

From ea2c3d4ae43adbe47ff3fef80e3a04f5a3a223f2 Mon Sep 17 00:00:00 2001
From: Tony Spiro <tspiro@tonyspiro.com>
Date: Fri, 24 Jun 2022 09:43:24 -0700
Subject: [PATCH 03/10] fix: preview logic

---
 examples/cms-cosmic/lib/api.tsx            | 11 +++++------
 examples/cms-cosmic/pages/posts/[slug].tsx |  4 +---
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/examples/cms-cosmic/lib/api.tsx b/examples/cms-cosmic/lib/api.tsx
index 97404d03ebb89..c23cfae10d70e 100644
--- a/examples/cms-cosmic/lib/api.tsx
+++ b/examples/cms-cosmic/lib/api.tsx
@@ -9,8 +9,6 @@ const bucket = Cosmic().bucket({
   read_key: READ_KEY,
 })
 
-const is404 = (error) => /not found/i.test(error.message)
-
 export const getPreviewPostBySlug = async (slug: string) => {
   const params = {
     query: {
@@ -18,7 +16,7 @@ export const getPreviewPostBySlug = async (slug: string) => {
       type: 'posts'
     },
     props: 'slug',
-    status: 'all',
+    status: 'any',
   }
 
   try {
@@ -49,20 +47,21 @@ export const getAllPostsForHome = async (preview) => {
     },
     props: 'title,slug,metadata,created_at',
     sort: '-created_at',
-    ...(preview && { status: 'all' }),
+    ...(preview && { status: 'any' }),
   }
   const data = await bucket.getObjects(params)
   return data.objects
 }
 
 export const getPostAndMorePosts = async (slug, preview) => {
+  console.log(preview)
   const singleObjectParams = {
     query: { 
       slug,
       type: 'posts'
     },
     props: 'slug,title,metadata,created_at',
-    ...(preview && { status: 'all' }),
+    ...(preview && { status: 'any' }),
   }
   const moreObjectParams = {
     query: {
@@ -70,7 +69,7 @@ export const getPostAndMorePosts = async (slug, preview) => {
     },
     limit: 3,
     props: 'title,slug,metadata,created_at',
-    ...(preview && { status: 'all' }),
+    ...(preview && { status: 'any' }),
   }
   let object
   try {
diff --git a/examples/cms-cosmic/pages/posts/[slug].tsx b/examples/cms-cosmic/pages/posts/[slug].tsx
index 566975b44b8f7..b5cde91a92c37 100644
--- a/examples/cms-cosmic/pages/posts/[slug].tsx
+++ b/examples/cms-cosmic/pages/posts/[slug].tsx
@@ -41,9 +41,7 @@ const Post = (props: PostProps) => {
           <>
             <article>
               <Head>
-                <title>
-                  {post.title} | Next.js Blog Example with {CMS_NAME}
-                </title>
+                <title>{post.title} | Next.js Blog Example with {CMS_NAME}</title>
                 <meta
                   property="og:image"
                   content={post.metadata.cover_image.imgix_url}

From 66e02a5009d45355d828d7972197ce67a11ae82c Mon Sep 17 00:00:00 2001
From: sherazmalik06 <sherazmalik06@gmail.com>
Date: Wed, 29 Jun 2022 10:09:16 +0500
Subject: [PATCH 04/10] Home Preview setup

---
 examples/cms-cosmic/components/alert.tsx      |  4 +-
 examples/cms-cosmic/components/avatar.tsx     |  4 +-
 examples/cms-cosmic/components/container.tsx  |  4 +-
 examples/cms-cosmic/components/date.tsx       |  2 +-
 examples/cms-cosmic/components/hero-post.tsx  | 13 +++---
 examples/cms-cosmic/components/layout.tsx     | 35 +++++++-------
 .../cms-cosmic/components/more-stories.tsx    |  3 +-
 examples/cms-cosmic/components/post-body.tsx  |  2 +-
 .../cms-cosmic/components/post-header.tsx     | 11 +++--
 .../cms-cosmic/components/post-preview.tsx    | 46 ++++++++++---------
 examples/cms-cosmic/components/post-title.tsx |  4 +-
 examples/cms-cosmic/interfaces/index.ts       | 24 ++++++++++
 examples/cms-cosmic/lib/api.tsx               | 20 ++++----
 examples/cms-cosmic/lib/markdownToHtml.ts     |  2 +-
 examples/cms-cosmic/package.json              |  2 +-
 examples/cms-cosmic/pages/api/preview.ts      |  2 +-
 examples/cms-cosmic/pages/index.tsx           | 26 +++++++----
 examples/cms-cosmic/pages/posts/[slug].tsx    | 24 ++++++----
 18 files changed, 141 insertions(+), 87 deletions(-)
 create mode 100644 examples/cms-cosmic/interfaces/index.ts

diff --git a/examples/cms-cosmic/components/alert.tsx b/examples/cms-cosmic/components/alert.tsx
index 97daaeeffa402..96af088a404d5 100644
--- a/examples/cms-cosmic/components/alert.tsx
+++ b/examples/cms-cosmic/components/alert.tsx
@@ -3,7 +3,7 @@ import cn from 'classnames'
 import { EXAMPLE_PATH } from '@/lib/constants'
 
 type AlertProps = {
-  preview
+  preview: boolean;
 };
 
 const Alert = (props: AlertProps) => {
@@ -19,7 +19,7 @@ const Alert = (props: AlertProps) => {
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This is page is a preview.{' '}
+              This page is a preview.{' '}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
diff --git a/examples/cms-cosmic/components/avatar.tsx b/examples/cms-cosmic/components/avatar.tsx
index 5077793e14ecd..7701ac7c42361 100644
--- a/examples/cms-cosmic/components/avatar.tsx
+++ b/examples/cms-cosmic/components/avatar.tsx
@@ -1,8 +1,8 @@
 import Image from 'next/image'
 
 type AvatarProps = {
-  name,
-  picture
+  name: string;
+  picture: string;
 };
   
 const Avatar = (props: AvatarProps) => {
diff --git a/examples/cms-cosmic/components/container.tsx b/examples/cms-cosmic/components/container.tsx
index 5ed9edbae19b0..3d46b959855c4 100644
--- a/examples/cms-cosmic/components/container.tsx
+++ b/examples/cms-cosmic/components/container.tsx
@@ -1,5 +1,7 @@
+import { ReactNode } from "react";
+
 type ContainerProps = {
-  children,
+  children: ReactNode,
 };
 
 const Container = (props: ContainerProps) => {
diff --git a/examples/cms-cosmic/components/date.tsx b/examples/cms-cosmic/components/date.tsx
index db6d058807dbf..e93838898c2e7 100644
--- a/examples/cms-cosmic/components/date.tsx
+++ b/examples/cms-cosmic/components/date.tsx
@@ -1,7 +1,7 @@
 import { parseISO, format } from 'date-fns'
 
 type DateProps = {
-  dateString
+  dateString: string;
 };
 
 const Date = (props: DateProps) => {
diff --git a/examples/cms-cosmic/components/hero-post.tsx b/examples/cms-cosmic/components/hero-post.tsx
index 73237427bbe12..d8d1ca58063eb 100644
--- a/examples/cms-cosmic/components/hero-post.tsx
+++ b/examples/cms-cosmic/components/hero-post.tsx
@@ -2,14 +2,15 @@ import Avatar from './avatar'
 import Date from './date'
 import CoverImage from './cover-image'
 import Link from 'next/link'
+import { Author, Imgix } from 'interfaces';
 
 type HeroPostProps = {
-  title,
-  coverImage,
-  date,
-  excerpt,
-  author,
-  slug,
+  title: string;
+  coverImage: Imgix;
+  date: string;
+  excerpt: string;
+  author: Author;
+  slug: string;
 };
 
 const HeroPost = (props: HeroPostProps) => {
diff --git a/examples/cms-cosmic/components/layout.tsx b/examples/cms-cosmic/components/layout.tsx
index 4bc33081ae669..12cda0ed48398 100644
--- a/examples/cms-cosmic/components/layout.tsx
+++ b/examples/cms-cosmic/components/layout.tsx
@@ -3,25 +3,28 @@ import Footer from './footer'
 import Meta from './meta'
 import 'lazysizes'
 import 'lazysizes/plugins/parent-fit/ls.parent-fit'
+import { ReactNode } from 'react'
 
 type LayoutProps = {
-  preview,
-  children,
+  preview: boolean;
+  children: ReactNode;
 };
 
-const Layout = (props: LayoutProps) => {
-const { preview, children } = props;
-  
+const Layout = ({
+  preview,
+  children
+}: LayoutProps) => {
+
   return (
-        <>
-          <Meta />
-          <div className="min-h-screen">
-            <Alert preview={preview}/>
-            <main>{children}</main>
-          </div>
-          <Footer />
-        </>
-      )
-  }
-  
+    <>
+      <Meta />
+      <div className="min-h-screen">
+        <Alert preview={preview} />
+        <main>{children}</main>
+      </div>
+      <Footer />
+    </>
+  )
+}
+
 export default Layout;
diff --git a/examples/cms-cosmic/components/more-stories.tsx b/examples/cms-cosmic/components/more-stories.tsx
index 4a3d359633827..47872e5638d8b 100644
--- a/examples/cms-cosmic/components/more-stories.tsx
+++ b/examples/cms-cosmic/components/more-stories.tsx
@@ -1,7 +1,8 @@
+import { Post } from 'interfaces';
 import PostPreview from './post-preview'
 
 type MoreStoriesProps = {
-  posts,
+  posts: Post[],
 };
 
 const MoreStories = (props: MoreStoriesProps) => {
diff --git a/examples/cms-cosmic/components/post-body.tsx b/examples/cms-cosmic/components/post-body.tsx
index 4f76d4b6ea0b7..0a979ce609228 100644
--- a/examples/cms-cosmic/components/post-body.tsx
+++ b/examples/cms-cosmic/components/post-body.tsx
@@ -1,7 +1,7 @@
 import markdownStyles from './markdown-styles.module.css'
 
 type PostBodyProps = {
-  content,
+  content: string;
 };
 
 const PostBody = (props: PostBodyProps) => {
diff --git a/examples/cms-cosmic/components/post-header.tsx b/examples/cms-cosmic/components/post-header.tsx
index 4f7ebf7ccb82d..30a6fd9bb683f 100644
--- a/examples/cms-cosmic/components/post-header.tsx
+++ b/examples/cms-cosmic/components/post-header.tsx
@@ -2,12 +2,13 @@ import Avatar from './avatar'
 import Date from './date'
 import CoverImage from './cover-image'
 import PostTitle from './post-title'
+import { Author, Imgix } from 'interfaces';
 
 type PostHeaderProps = {
-  title, 
-  coverImage, 
-  date, 
-  author 
+  title: string; 
+  coverImage: Imgix;
+  date: string;
+  author: Author
 };
 
 const PostHeader = (props: PostHeaderProps) => {
@@ -30,7 +31,7 @@ const PostHeader = (props: PostHeaderProps) => {
         </div>
         <div className="max-w-2xl mx-auto">
           <div className="block md:hidden mb-6">
-            <Avatar name={author.name} picture={author.picture} />
+            <Avatar name={author.title} picture={author.metadata.picture.imgix_url} />
           </div>
           <div className="mb-6 text-lg">
             <Date dateString={date} />
diff --git a/examples/cms-cosmic/components/post-preview.tsx b/examples/cms-cosmic/components/post-preview.tsx
index f1c3667739d15..9e0204f0f8776 100644
--- a/examples/cms-cosmic/components/post-preview.tsx
+++ b/examples/cms-cosmic/components/post-preview.tsx
@@ -2,14 +2,15 @@ import Avatar from './avatar'
 import Date from './date'
 import CoverImage from './cover-image'
 import Link from 'next/link'
+import { Author, Imgix } from 'interfaces';
 
 type PostPreviewProps = {
-  title,
-  coverImage,
-  date,
-  excerpt,
-  author,
-  slug,
+  title: string;
+  coverImage: Imgix,
+  date: string,
+  excerpt: string;
+  author: Author;
+  slug: string;
 };
 
 const PostPreview = (props: PostPreviewProps) => {
@@ -20,23 +21,24 @@ const PostPreview = (props: PostPreviewProps) => {
     author,
     slug,
   } = props;
-    return (
-      <div>
-        <div className="mb-5">
-          <CoverImage slug={slug} title={title} url={coverImage.imgix_url} />
-        </div>
-        <h3 className="text-3xl mb-3 leading-snug">
-          <Link href={`/posts/${slug}`}>
-            <a className="hover:underline">{title}</a>
-          </Link>
-        </h3>
-        <div className="text-lg mb-4">
-          <Date dateString={date} />
-        </div>
-        <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
-        <Avatar name={author.title} picture={author.metadata.picture.imgix_url} />
+
+  return (
+    <div>
+      <div className="mb-5">
+        <CoverImage slug={slug} title={title} url={coverImage.imgix_url} />
+      </div>
+      <h3 className="text-3xl mb-3 leading-snug">
+        <Link href={`/posts/${slug}`}>
+          <a className="hover:underline">{title}</a>
+        </Link>
+      </h3>
+      <div className="text-lg mb-4">
+        <Date dateString={date} />
       </div>
-    )
+      <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
+      <Avatar name={author.title} picture={author.metadata.picture.imgix_url} />
+    </div>
+  )
 }
 
 export default PostPreview;
\ No newline at end of file
diff --git a/examples/cms-cosmic/components/post-title.tsx b/examples/cms-cosmic/components/post-title.tsx
index 941b0430ae197..1727d9a9b37e0 100644
--- a/examples/cms-cosmic/components/post-title.tsx
+++ b/examples/cms-cosmic/components/post-title.tsx
@@ -1,5 +1,7 @@
+import { ReactNode } from "react";
+
 type PostTitleProps = {
-  children;
+  children: ReactNode;
 };
 
 const PostTitle = (props: PostTitleProps) => {
diff --git a/examples/cms-cosmic/interfaces/index.ts b/examples/cms-cosmic/interfaces/index.ts
new file mode 100644
index 0000000000000..f7517f0a63bdf
--- /dev/null
+++ b/examples/cms-cosmic/interfaces/index.ts
@@ -0,0 +1,24 @@
+export type Imgix = {
+  url: string;
+  imgix_url: string;
+}
+
+export type Author = {
+  title: string;
+  metadata: {
+    picture: Imgix;
+  }
+}
+
+export type Post = {
+  title: string;
+  slug: string;
+  content: string;
+  created_at: string;
+  metadata: {
+    cover_image: Imgix;
+    author: Author;
+    excerpt: string;
+    content: string;
+  }
+};
\ No newline at end of file
diff --git a/examples/cms-cosmic/lib/api.tsx b/examples/cms-cosmic/lib/api.tsx
index 97404d03ebb89..3f921b5024933 100644
--- a/examples/cms-cosmic/lib/api.tsx
+++ b/examples/cms-cosmic/lib/api.tsx
@@ -1,4 +1,5 @@
 import Cosmic from 'cosmicjs'
+import { Post } from 'interfaces'
 import ErrorPage from 'next/error'
 
 const BUCKET_SLUG = process.env.COSMIC_BUCKET_SLUG
@@ -18,7 +19,7 @@ export const getPreviewPostBySlug = async (slug: string) => {
       type: 'posts'
     },
     props: 'slug',
-    status: 'all',
+    status: 'any',
   }
 
   try {
@@ -41,28 +42,30 @@ export const getAllPostsWithSlug = async () => {
   return data.objects
 }
 
-
-export const getAllPostsForHome = async (preview) => {
+export const getAllPostsForHome = async (preview: boolean): Promise<Post[]> => {
   const params = {
     query: {
       type: 'posts'
     },
     props: 'title,slug,metadata,created_at',
     sort: '-created_at',
-    ...(preview && { status: 'all' }),
+    ...(preview && { status: 'any' }),
   }
   const data = await bucket.getObjects(params)
   return data.objects
 }
 
-export const getPostAndMorePosts = async (slug, preview) => {
+export const getPostAndMorePosts = async (slug: string, preview: boolean): Promise<{
+  post: Post;
+  morePosts: Post[]
+}> => {
   const singleObjectParams = {
     query: { 
       slug,
       type: 'posts'
     },
     props: 'slug,title,metadata,created_at',
-    ...(preview && { status: 'all' }),
+    ...(preview && { status: 'any' }),
   }
   const moreObjectParams = {
     query: {
@@ -70,14 +73,15 @@ export const getPostAndMorePosts = async (slug, preview) => {
     },
     limit: 3,
     props: 'title,slug,metadata,created_at',
-    ...(preview && { status: 'all' }),
+    ...(preview && { status: 'any' }),
   }
   let object
   try {
     const data = await bucket.getObjects(singleObjectParams)
     object = data.objects[0]
   } catch (err) {
-    return <ErrorPage statusCode={err.status} />
+    throw err;
+
   }
   const moreObjects = await bucket.getObjects(moreObjectParams)
   const morePosts = moreObjects.objects
diff --git a/examples/cms-cosmic/lib/markdownToHtml.ts b/examples/cms-cosmic/lib/markdownToHtml.ts
index ffbd67f99c7fd..91b74ce44993d 100644
--- a/examples/cms-cosmic/lib/markdownToHtml.ts
+++ b/examples/cms-cosmic/lib/markdownToHtml.ts
@@ -1,7 +1,7 @@
 import { remark } from 'remark'
 import html from 'remark-html'
 
-const markdownToHtml = async (markdown) => {
+const markdownToHtml = async (markdown: string) => {
   const result = await remark().use(html).process(markdown)
   return result.toString()
 }
diff --git a/examples/cms-cosmic/package.json b/examples/cms-cosmic/package.json
index c3d6fb29ff388..f9f16d092100a 100644
--- a/examples/cms-cosmic/package.json
+++ b/examples/cms-cosmic/package.json
@@ -2,7 +2,7 @@
   "private": true,
   "scripts": {
     "dev": "next",
-    "build": "tsc",
+    "build": "next build",
     "start": "next start"
   },
   "dependencies": {
diff --git a/examples/cms-cosmic/pages/api/preview.ts b/examples/cms-cosmic/pages/api/preview.ts
index 46a3d7c2161b6..6cedce19216db 100644
--- a/examples/cms-cosmic/pages/api/preview.ts
+++ b/examples/cms-cosmic/pages/api/preview.ts
@@ -1,4 +1,4 @@
-import { getPreviewPostBySlug } from '../../lib/api'
+import { getPreviewPostBySlug } from '@/lib/api'
 
 const preview = async(req, res) => {
  // Check the secret and next parameters
diff --git a/examples/cms-cosmic/pages/index.tsx b/examples/cms-cosmic/pages/index.tsx
index 1a9296c632ff7..07df850be3993 100644
--- a/examples/cms-cosmic/pages/index.tsx
+++ b/examples/cms-cosmic/pages/index.tsx
@@ -6,19 +6,25 @@ import Layout from '@/components/layout'
 import { getAllPostsForHome } from '@/lib/api'
 import Head from 'next/head'
 import { CMS_NAME } from '@/lib/constants'
-
+import { Post } from 'interfaces'
 
 type IndexProps = {
-  allPosts,
+  allPosts: Post[];
+  preview
 };
 
 const Index = (props: IndexProps) => {
-  const { allPosts } = props;
+  const {
+    allPosts,
+    preview
+  } = props;
+
   const heroPost = allPosts[0]
   const morePosts = allPosts.slice(1)
+
   return (
     <>
-      <Layout preview={''}>
+      <Layout preview={preview}>
         <Head>
           <title>Next.js Blog Example with {CMS_NAME}</title>
         </Head>
@@ -41,16 +47,20 @@ const Index = (props: IndexProps) => {
   )
 }
 
+
 type staticProps = {
-  preview,
+  preview: boolean;
 };
 
 export const getStaticProps = async(props: staticProps) => {
-  const { preview } = props;
+  const {  
+    preview= true
+  } = props;
   const allPosts = (await getAllPostsForHome(preview)) || []
   return {
-    props: { allPosts },
+    props: { allPosts, preview },
   }
 }
 
-export default Index;
+
+export default Index;
\ No newline at end of file
diff --git a/examples/cms-cosmic/pages/posts/[slug].tsx b/examples/cms-cosmic/pages/posts/[slug].tsx
index 566975b44b8f7..b6b31ac0b8956 100644
--- a/examples/cms-cosmic/pages/posts/[slug].tsx
+++ b/examples/cms-cosmic/pages/posts/[slug].tsx
@@ -12,12 +12,14 @@ import PostTitle from '@/components/post-title'
 import Head from 'next/head'
 import { CMS_NAME } from '@/lib/constants'
 import markdownToHtml from '@/lib/markdownToHtml'
+import { Post } from 'interfaces'
+import { ParsedUrlQueryInput } from 'querystring'
 
 
 type PostProps = {
-  post, 
-  morePosts, 
-  preview
+  post: Post;
+  morePosts: Post[]; 
+  preview;
 };
 
 const Post = (props: PostProps) => {
@@ -26,7 +28,7 @@ const Post = (props: PostProps) => {
     morePosts, 
     preview 
   } = props;
-  
+
   const router = useRouter()
   if (!router.isFallback && !post?.slug) {
     return <ErrorPage statusCode={404} />
@@ -67,19 +69,18 @@ const Post = (props: PostProps) => {
 }
 export default Post;
 
-
-
 type staticProps = {
-  params,
-  preview,
+  params: ParsedUrlQueryInput;
+  preview: boolean;
 };
 
 export const getStaticProps = async(props: staticProps) => {
   const {  
     params,
-    preview = null
+    preview = true
   } = props;
-  const data = await getPostAndMorePosts(params.slug, preview)
+ try {
+  const data = await getPostAndMorePosts(params.slug as string, preview)
   const content = await markdownToHtml(data['post']?.metadata?.content || '')
   return {
     props: {
@@ -91,6 +92,9 @@ export const getStaticProps = async(props: staticProps) => {
       morePosts: data['morePosts'] || [],
     },
   }
+} catch(err) {
+  return <ErrorPage statusCode={err.status} />
+}
 }
 
 export const getStaticPaths = async() => {

From 55f9e78ce17b65acf9f7ae396fe0406a5b6a3f29 Mon Sep 17 00:00:00 2001
From: sherazmalik06 <sherazmalik06@gmail.com>
Date: Wed, 29 Jun 2022 18:34:18 +0500
Subject: [PATCH 05/10] Preview in Home

---
 examples/cms-cosmic/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/examples/cms-cosmic/package.json b/examples/cms-cosmic/package.json
index f9f16d092100a..e3c019dc7c32b 100644
--- a/examples/cms-cosmic/package.json
+++ b/examples/cms-cosmic/package.json
@@ -21,6 +21,7 @@
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.14",
     "autoprefixer": "10.4.7",
+    "eslint": "^8.18.0",
     "postcss": "8.4.14",
     "tailwindcss": "^3.1.4",
     "typescript": "^4.7.4"

From 4d50ec2f38dea88103916e91449a5bf6adc8a48a Mon Sep 17 00:00:00 2001
From: sherazmalik06 <sherazmalik06@gmail.com>
Date: Wed, 29 Jun 2022 22:03:48 +0500
Subject: [PATCH 06/10] Fix: Exit Preview

---
 examples/cms-cosmic/pages/index.tsx        | 15 +++++++--------
 examples/cms-cosmic/pages/posts/[slug].tsx |  2 +-
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/examples/cms-cosmic/pages/index.tsx b/examples/cms-cosmic/pages/index.tsx
index 54dc4fedc9ce0..6f73d4224859f 100644
--- a/examples/cms-cosmic/pages/index.tsx
+++ b/examples/cms-cosmic/pages/index.tsx
@@ -10,7 +10,7 @@ import { Post } from 'interfaces'
 
 type IndexProps = {
   allPosts: Post[];
-  preview
+  preview: boolean;
 };
 
 const Index = (props: IndexProps) => {
@@ -47,19 +47,18 @@ const Index = (props: IndexProps) => {
   )
 }
 
+export default Index;
 
 type staticProps = {
   preview: boolean;
 };
 
-export const getStaticProps = async(props: staticProps) => {
-  const {  
-    preview= true
+export const getStaticProps = async (props: staticProps) => {
+  const {
+    preview= null
   } = props;
   const allPosts = (await getAllPostsForHome(preview)) || []
   return {
-    props: { allPosts, preview },
+    props: { allPosts, preview }
   }
-}
-
-export default Index;
+}
\ No newline at end of file
diff --git a/examples/cms-cosmic/pages/posts/[slug].tsx b/examples/cms-cosmic/pages/posts/[slug].tsx
index 9cf661713a859..33d1ebda83b5b 100644
--- a/examples/cms-cosmic/pages/posts/[slug].tsx
+++ b/examples/cms-cosmic/pages/posts/[slug].tsx
@@ -76,7 +76,7 @@ type staticProps = {
 export const getStaticProps = async (props: staticProps) => {
   const {
     params,
-    preview = true
+    preview= null
   } = props;
   try {
     const data = await getPostAndMorePosts(params.slug as string, preview)

From 01af57c2d5a32c890a3b2eef01b288fe04ddba0b Mon Sep 17 00:00:00 2001
From: Tony Spiro <tspiro@tonyspiro.com>
Date: Wed, 29 Jun 2022 11:57:17 -0700
Subject: [PATCH 07/10] fix: run lint-fix

---
 examples/cms-cosmic/components/alert.tsx      |  8 +-
 examples/cms-cosmic/components/avatar.tsx     | 12 +--
 examples/cms-cosmic/components/container.tsx  | 14 ++--
 .../cms-cosmic/components/cover-image.tsx     | 18 ++---
 examples/cms-cosmic/components/date.tsx       |  8 +-
 examples/cms-cosmic/components/footer.tsx     |  2 +-
 examples/cms-cosmic/components/header.tsx     |  2 +-
 examples/cms-cosmic/components/hero-post.tsx  | 77 +++++++++----------
 examples/cms-cosmic/components/intro.tsx      |  2 +-
 examples/cms-cosmic/components/layout.tsx     | 14 ++--
 examples/cms-cosmic/components/meta.tsx       |  2 +-
 .../cms-cosmic/components/more-stories.tsx    | 10 +--
 examples/cms-cosmic/components/post-body.tsx  |  8 +-
 .../cms-cosmic/components/post-header.tsx     | 53 +++++++------
 .../cms-cosmic/components/post-preview.tsx    | 26 +++----
 examples/cms-cosmic/components/post-title.tsx | 10 +--
 .../components/section-separator.tsx          |  2 +-
 examples/cms-cosmic/interfaces/index.ts       | 26 +++----
 examples/cms-cosmic/lib/api.tsx               | 23 +++---
 examples/cms-cosmic/lib/markdownToHtml.ts     |  2 +-
 examples/cms-cosmic/pages/api/exit-preview.ts |  2 +-
 examples/cms-cosmic/pages/api/preview.ts      |  6 +-
 examples/cms-cosmic/pages/index.tsx           | 25 +++---
 examples/cms-cosmic/pages/posts/[slug].tsx    | 28 +++----
 examples/cms-cosmic/tsconfig.json             | 30 ++------
 25 files changed, 180 insertions(+), 230 deletions(-)

diff --git a/examples/cms-cosmic/components/alert.tsx b/examples/cms-cosmic/components/alert.tsx
index 96af088a404d5..a7ae558e52d9c 100644
--- a/examples/cms-cosmic/components/alert.tsx
+++ b/examples/cms-cosmic/components/alert.tsx
@@ -3,11 +3,11 @@ import cn from 'classnames'
 import { EXAMPLE_PATH } from '@/lib/constants'
 
 type AlertProps = {
-  preview: boolean;
-};
+  preview: boolean
+}
 
 const Alert = (props: AlertProps) => {
-  const { preview } = props;
+  const { preview } = props
   return (
     <div
       className={cn('border-b', {
@@ -46,4 +46,4 @@ const Alert = (props: AlertProps) => {
   )
 }
 
-export default Alert;
\ No newline at end of file
+export default Alert
diff --git a/examples/cms-cosmic/components/avatar.tsx b/examples/cms-cosmic/components/avatar.tsx
index 7701ac7c42361..2a331968ebdab 100644
--- a/examples/cms-cosmic/components/avatar.tsx
+++ b/examples/cms-cosmic/components/avatar.tsx
@@ -1,12 +1,12 @@
 import Image from 'next/image'
 
 type AvatarProps = {
-  name: string;
-  picture: string;
-};
-  
+  name: string
+  picture: string
+}
+
 const Avatar = (props: AvatarProps) => {
-const { name, picture } = props;
+  const { name, picture } = props
 
   return (
     <div className="flex items-center">
@@ -25,4 +25,4 @@ const { name, picture } = props;
   )
 }
 
-export default Avatar;
\ No newline at end of file
+export default Avatar
diff --git a/examples/cms-cosmic/components/container.tsx b/examples/cms-cosmic/components/container.tsx
index 3d46b959855c4..9e96a9db022f0 100644
--- a/examples/cms-cosmic/components/container.tsx
+++ b/examples/cms-cosmic/components/container.tsx
@@ -1,14 +1,12 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react'
 
 type ContainerProps = {
-  children: ReactNode,
-};
+  children: ReactNode
+}
 
 const Container = (props: ContainerProps) => {
-  const { children } = props;
-  return (
-     <div className="container mx-auto px-5">{children}</div>
-  )
+  const { children } = props
+  return <div className="container mx-auto px-5">{children}</div>
 }
 
-export default Container;
\ No newline at end of file
+export default Container
diff --git a/examples/cms-cosmic/components/cover-image.tsx b/examples/cms-cosmic/components/cover-image.tsx
index b9741ebbe102f..36ca35d4b1f02 100644
--- a/examples/cms-cosmic/components/cover-image.tsx
+++ b/examples/cms-cosmic/components/cover-image.tsx
@@ -3,17 +3,13 @@ import Link from 'next/link'
 import Imgix from 'react-imgix'
 
 type CoverImageProps = {
-  title,
-  url,
-  slug,
-};
+  title
+  url
+  slug
+}
 const CoverImage = (props: CoverImageProps) => {
-  const { 
-    title, 
-    url, 
-    slug
-  } = props;
-  
+  const { title, url, slug } = props
+
   const image = (
     <Imgix
       src={url}
@@ -44,4 +40,4 @@ const CoverImage = (props: CoverImageProps) => {
     </div>
   )
 }
-export default CoverImage;
+export default CoverImage
diff --git a/examples/cms-cosmic/components/date.tsx b/examples/cms-cosmic/components/date.tsx
index e93838898c2e7..f47148b75fb2a 100644
--- a/examples/cms-cosmic/components/date.tsx
+++ b/examples/cms-cosmic/components/date.tsx
@@ -1,13 +1,13 @@
 import { parseISO, format } from 'date-fns'
 
 type DateProps = {
-  dateString: string;
-};
+  dateString: string
+}
 
 const Date = (props: DateProps) => {
-  const { dateString } = props;
+  const { dateString } = props
   const date = parseISO(dateString)
   return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
 }
 
-export default Date;
\ No newline at end of file
+export default Date
diff --git a/examples/cms-cosmic/components/footer.tsx b/examples/cms-cosmic/components/footer.tsx
index 9b7e81d5dede5..21af8f901a8b6 100644
--- a/examples/cms-cosmic/components/footer.tsx
+++ b/examples/cms-cosmic/components/footer.tsx
@@ -29,4 +29,4 @@ const Footer = () => {
   )
 }
 
-export default Footer;
\ No newline at end of file
+export default Footer
diff --git a/examples/cms-cosmic/components/header.tsx b/examples/cms-cosmic/components/header.tsx
index 15c21dd9bc1f7..4b516c600c985 100644
--- a/examples/cms-cosmic/components/header.tsx
+++ b/examples/cms-cosmic/components/header.tsx
@@ -11,4 +11,4 @@ const Header = () => {
   )
 }
 
-export default Header;
\ No newline at end of file
+export default Header
diff --git a/examples/cms-cosmic/components/hero-post.tsx b/examples/cms-cosmic/components/hero-post.tsx
index d8d1ca58063eb..51839bf6204ef 100644
--- a/examples/cms-cosmic/components/hero-post.tsx
+++ b/examples/cms-cosmic/components/hero-post.tsx
@@ -2,53 +2,46 @@ import Avatar from './avatar'
 import Date from './date'
 import CoverImage from './cover-image'
 import Link from 'next/link'
-import { Author, Imgix } from 'interfaces';
+import { Author, Imgix } from 'interfaces'
 
 type HeroPostProps = {
-  title: string;
-  coverImage: Imgix;
-  date: string;
-  excerpt: string;
-  author: Author;
-  slug: string;
-};
+  title: string
+  coverImage: Imgix
+  date: string
+  excerpt: string
+  author: Author
+  slug: string
+}
 
 const HeroPost = (props: HeroPostProps) => {
-  const {  
-    title, 
-    coverImage,
-    date,
-    excerpt,
-    author,
-    slug,
-  } = props;
-  
-    return (
-      <section>
-        <div className="mb-8 md:mb-16">
-          <CoverImage title={title} url={coverImage.imgix_url} slug={slug} />
-        </div>
-        <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 href={`/posts/${slug}`}>
-                <a className="hover:underline">{title}</a>
-              </Link>
-            </h3>
-            <div className="mb-4 md:mb-0 text-lg">
-              <Date dateString={date} />
-            </div>
-          </div>
-          <div>
-            <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
-            <Avatar
-              name={author.title}
-              picture={author.metadata.picture.imgix_url}
-            />
+  const { title, coverImage, date, excerpt, author, slug } = props
+
+  return (
+    <section>
+      <div className="mb-8 md:mb-16">
+        <CoverImage title={title} url={coverImage.imgix_url} slug={slug} />
+      </div>
+      <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 href={`/posts/${slug}`}>
+              <a className="hover:underline">{title}</a>
+            </Link>
+          </h3>
+          <div className="mb-4 md:mb-0 text-lg">
+            <Date dateString={date} />
           </div>
         </div>
-      </section>
-    )
+        <div>
+          <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
+          <Avatar
+            name={author.title}
+            picture={author.metadata.picture.imgix_url}
+          />
+        </div>
+      </div>
+    </section>
+  )
 }
 
-export default HeroPost;
\ No newline at end of file
+export default HeroPost
diff --git a/examples/cms-cosmic/components/intro.tsx b/examples/cms-cosmic/components/intro.tsx
index ba2fa72fe9255..041acb864be4e 100644
--- a/examples/cms-cosmic/components/intro.tsx
+++ b/examples/cms-cosmic/components/intro.tsx
@@ -27,4 +27,4 @@ const Intro = () => {
   )
 }
 
-export default Intro;
\ No newline at end of file
+export default Intro
diff --git a/examples/cms-cosmic/components/layout.tsx b/examples/cms-cosmic/components/layout.tsx
index 12cda0ed48398..40299b54ea819 100644
--- a/examples/cms-cosmic/components/layout.tsx
+++ b/examples/cms-cosmic/components/layout.tsx
@@ -6,15 +6,11 @@ import 'lazysizes/plugins/parent-fit/ls.parent-fit'
 import { ReactNode } from 'react'
 
 type LayoutProps = {
-  preview: boolean;
-  children: ReactNode;
-};
-
-const Layout = ({
-  preview,
-  children
-}: LayoutProps) => {
+  preview: boolean
+  children: ReactNode
+}
 
+const Layout = ({ preview, children }: LayoutProps) => {
   return (
     <>
       <Meta />
@@ -27,4 +23,4 @@ const Layout = ({
   )
 }
 
-export default Layout;
+export default Layout
diff --git a/examples/cms-cosmic/components/meta.tsx b/examples/cms-cosmic/components/meta.tsx
index 3d1072d91cba2..633d6ae277045 100644
--- a/examples/cms-cosmic/components/meta.tsx
+++ b/examples/cms-cosmic/components/meta.tsx
@@ -41,4 +41,4 @@ const Meta = () => {
   )
 }
 
-export default Meta;
\ No newline at end of file
+export default Meta
diff --git a/examples/cms-cosmic/components/more-stories.tsx b/examples/cms-cosmic/components/more-stories.tsx
index 47872e5638d8b..99f598c258f2f 100644
--- a/examples/cms-cosmic/components/more-stories.tsx
+++ b/examples/cms-cosmic/components/more-stories.tsx
@@ -1,12 +1,12 @@
-import { Post } from 'interfaces';
+import { Post } from 'interfaces'
 import PostPreview from './post-preview'
 
 type MoreStoriesProps = {
-  posts: Post[],
-};
+  posts: Post[]
+}
 
 const MoreStories = (props: MoreStoriesProps) => {
-  const { posts } = props;
+  const { posts } = props
   return (
     <section>
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
@@ -29,4 +29,4 @@ const MoreStories = (props: MoreStoriesProps) => {
   )
 }
 
-export default MoreStories;
+export default MoreStories
diff --git a/examples/cms-cosmic/components/post-body.tsx b/examples/cms-cosmic/components/post-body.tsx
index 0a979ce609228..3796ee16538e1 100644
--- a/examples/cms-cosmic/components/post-body.tsx
+++ b/examples/cms-cosmic/components/post-body.tsx
@@ -1,11 +1,11 @@
 import markdownStyles from './markdown-styles.module.css'
 
 type PostBodyProps = {
-  content: string;
-};
+  content: string
+}
 
 const PostBody = (props: PostBodyProps) => {
-  const { content} = props;
+  const { content } = props
   return (
     <div className="max-w-2xl mx-auto">
       <div
@@ -16,4 +16,4 @@ const PostBody = (props: PostBodyProps) => {
   )
 }
 
-export default PostBody;
\ No newline at end of file
+export default PostBody
diff --git a/examples/cms-cosmic/components/post-header.tsx b/examples/cms-cosmic/components/post-header.tsx
index 30a6fd9bb683f..b26a88608fdcc 100644
--- a/examples/cms-cosmic/components/post-header.tsx
+++ b/examples/cms-cosmic/components/post-header.tsx
@@ -2,43 +2,42 @@ import Avatar from './avatar'
 import Date from './date'
 import CoverImage from './cover-image'
 import PostTitle from './post-title'
-import { Author, Imgix } from 'interfaces';
+import { Author, Imgix } from 'interfaces'
 
 type PostHeaderProps = {
-  title: string; 
-  coverImage: Imgix;
-  date: string;
+  title: string
+  coverImage: Imgix
+  date: string
   author: Author
-};
+}
 
 const PostHeader = (props: PostHeaderProps) => {
-  const {  
-    title, 
-    coverImage, 
-    date, 
-    author } = props;
-    return (
-      <>
-        <PostTitle>{title}</PostTitle>
-        <div className="hidden md:block md:mb-12">
+  const { title, coverImage, date, author } = props
+  return (
+    <>
+      <PostTitle>{title}</PostTitle>
+      <div className="hidden md:block md:mb-12">
+        <Avatar
+          name={author.title}
+          picture={author.metadata.picture.imgix_url}
+        />
+      </div>
+      <div className="mb-8 md:mb-16 sm:mx-0">
+        <CoverImage title={title} url={coverImage.imgix_url} slug={''} />
+      </div>
+      <div className="max-w-2xl mx-auto">
+        <div className="block md:hidden mb-6">
           <Avatar
             name={author.title}
             picture={author.metadata.picture.imgix_url}
           />
         </div>
-        <div className="mb-8 md:mb-16 sm:mx-0">
-          <CoverImage title={title} url={coverImage.imgix_url} slug={''} />
-        </div>
-        <div className="max-w-2xl mx-auto">
-          <div className="block md:hidden mb-6">
-            <Avatar name={author.title} picture={author.metadata.picture.imgix_url} />
-          </div>
-          <div className="mb-6 text-lg">
-            <Date dateString={date} />
-          </div>
+        <div className="mb-6 text-lg">
+          <Date dateString={date} />
         </div>
-      </>
-    )
+      </div>
+    </>
+  )
 }
 
-export default PostHeader;
+export default PostHeader
diff --git a/examples/cms-cosmic/components/post-preview.tsx b/examples/cms-cosmic/components/post-preview.tsx
index 9e0204f0f8776..32f7c1e28bd7d 100644
--- a/examples/cms-cosmic/components/post-preview.tsx
+++ b/examples/cms-cosmic/components/post-preview.tsx
@@ -2,25 +2,19 @@ import Avatar from './avatar'
 import Date from './date'
 import CoverImage from './cover-image'
 import Link from 'next/link'
-import { Author, Imgix } from 'interfaces';
+import { Author, Imgix } from 'interfaces'
 
 type PostPreviewProps = {
-  title: string;
-  coverImage: Imgix,
-  date: string,
-  excerpt: string;
-  author: Author;
-  slug: string;
-};
+  title: string
+  coverImage: Imgix
+  date: string
+  excerpt: string
+  author: Author
+  slug: string
+}
 
 const PostPreview = (props: PostPreviewProps) => {
-  const { title,
-    coverImage,
-    date,
-    excerpt,
-    author,
-    slug,
-  } = props;
+  const { title, coverImage, date, excerpt, author, slug } = props
 
   return (
     <div>
@@ -41,4 +35,4 @@ const PostPreview = (props: PostPreviewProps) => {
   )
 }
 
-export default PostPreview;
\ No newline at end of file
+export default PostPreview
diff --git a/examples/cms-cosmic/components/post-title.tsx b/examples/cms-cosmic/components/post-title.tsx
index 1727d9a9b37e0..0757d9ff59608 100644
--- a/examples/cms-cosmic/components/post-title.tsx
+++ b/examples/cms-cosmic/components/post-title.tsx
@@ -1,15 +1,15 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react'
 
 type PostTitleProps = {
-  children: ReactNode;
-};
+  children: ReactNode
+}
 
 const PostTitle = (props: PostTitleProps) => {
-  const { children} = props;
+  const { children } = props
   return (
     <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>
   )
 }
-export default PostTitle;
\ No newline at end of file
+export default PostTitle
diff --git a/examples/cms-cosmic/components/section-separator.tsx b/examples/cms-cosmic/components/section-separator.tsx
index bd5c0546a6e45..2787cea58dcd3 100644
--- a/examples/cms-cosmic/components/section-separator.tsx
+++ b/examples/cms-cosmic/components/section-separator.tsx
@@ -2,4 +2,4 @@ const SectionSeparator = () => {
   return <hr className="border-accent-2 mt-28 mb-24" />
 }
 
-export default SectionSeparator;
\ No newline at end of file
+export default SectionSeparator
diff --git a/examples/cms-cosmic/interfaces/index.ts b/examples/cms-cosmic/interfaces/index.ts
index f7517f0a63bdf..78cc7f385156f 100644
--- a/examples/cms-cosmic/interfaces/index.ts
+++ b/examples/cms-cosmic/interfaces/index.ts
@@ -1,24 +1,24 @@
 export type Imgix = {
-  url: string;
-  imgix_url: string;
+  url: string
+  imgix_url: string
 }
 
 export type Author = {
-  title: string;
+  title: string
   metadata: {
-    picture: Imgix;
+    picture: Imgix
   }
 }
 
 export type Post = {
-  title: string;
-  slug: string;
-  content: string;
-  created_at: string;
+  title: string
+  slug: string
+  content: string
+  created_at: string
   metadata: {
-    cover_image: Imgix;
-    author: Author;
-    excerpt: string;
-    content: string;
+    cover_image: Imgix
+    author: Author
+    excerpt: string
+    content: string
   }
-};
\ No newline at end of file
+}
diff --git a/examples/cms-cosmic/lib/api.tsx b/examples/cms-cosmic/lib/api.tsx
index 475a5372cc02e..198d2ca39ca38 100644
--- a/examples/cms-cosmic/lib/api.tsx
+++ b/examples/cms-cosmic/lib/api.tsx
@@ -16,7 +16,7 @@ export const getPreviewPostBySlug = async (slug: string) => {
   const params = {
     query: {
       slug,
-      type: 'posts'
+      type: 'posts',
     },
     props: 'slug',
     status: 'any',
@@ -27,14 +27,14 @@ export const getPreviewPostBySlug = async (slug: string) => {
     return data.objects[0]
   } catch (err) {
     // Don't throw if an slug doesn't exist
-    return <ErrorPage statusCode={err.status}/>
+    return <ErrorPage statusCode={err.status} />
   }
 }
 
 export const getAllPostsWithSlug = async () => {
   const params = {
     query: {
-      type: 'posts'
+      type: 'posts',
     },
     props: 'slug',
   }
@@ -45,7 +45,7 @@ export const getAllPostsWithSlug = async () => {
 export const getAllPostsForHome = async (preview: boolean): Promise<Post[]> => {
   const params = {
     query: {
-      type: 'posts'
+      type: 'posts',
     },
     props: 'title,slug,metadata,created_at',
     sort: '-created_at',
@@ -55,21 +55,24 @@ export const getAllPostsForHome = async (preview: boolean): Promise<Post[]> => {
   return data.objects
 }
 
-export const getPostAndMorePosts = async (slug: string, preview: boolean): Promise<{
-  post: Post;
+export const getPostAndMorePosts = async (
+  slug: string,
+  preview: boolean
+): Promise<{
+  post: Post
   morePosts: Post[]
 }> => {
   const singleObjectParams = {
-    query: { 
+    query: {
       slug,
-      type: 'posts'
+      type: 'posts',
     },
     props: 'slug,title,metadata,created_at',
     ...(preview && { status: 'any' }),
   }
   const moreObjectParams = {
     query: {
-      type: 'posts'
+      type: 'posts',
     },
     limit: 3,
     props: 'title,slug,metadata,created_at',
@@ -80,7 +83,7 @@ export const getPostAndMorePosts = async (slug: string, preview: boolean): Promi
     const data = await bucket.getObjects(singleObjectParams)
     object = data.objects[0]
   } catch (err) {
-    throw err;
+    throw err
   }
   const moreObjects = await bucket.getObjects(moreObjectParams)
   const morePosts = moreObjects.objects
diff --git a/examples/cms-cosmic/lib/markdownToHtml.ts b/examples/cms-cosmic/lib/markdownToHtml.ts
index 91b74ce44993d..4c506cd6a80e8 100644
--- a/examples/cms-cosmic/lib/markdownToHtml.ts
+++ b/examples/cms-cosmic/lib/markdownToHtml.ts
@@ -6,4 +6,4 @@ const markdownToHtml = async (markdown: string) => {
   return result.toString()
 }
 
-export default markdownToHtml;
\ No newline at end of file
+export default markdownToHtml
diff --git a/examples/cms-cosmic/pages/api/exit-preview.ts b/examples/cms-cosmic/pages/api/exit-preview.ts
index 33d6338c82343..0ce99df3d4e2f 100644
--- a/examples/cms-cosmic/pages/api/exit-preview.ts
+++ b/examples/cms-cosmic/pages/api/exit-preview.ts
@@ -7,4 +7,4 @@ const exit = async (_, res) => {
   res.end()
 }
 
-export default exit;
\ No newline at end of file
+export default exit
diff --git a/examples/cms-cosmic/pages/api/preview.ts b/examples/cms-cosmic/pages/api/preview.ts
index 6cedce19216db..c6584e56f4612 100644
--- a/examples/cms-cosmic/pages/api/preview.ts
+++ b/examples/cms-cosmic/pages/api/preview.ts
@@ -1,7 +1,7 @@
 import { getPreviewPostBySlug } from '@/lib/api'
 
-const preview = async(req, res) => {
- // Check the secret and next parameters
+const preview = async (req, res) => {
+  // Check the secret and next parameters
   // This secret should only be known to this API route and the CMS
   if (
     req.query.secret !== process.env.COSMIC_PREVIEW_SECRET ||
@@ -27,4 +27,4 @@ const preview = async(req, res) => {
   res.end()
 }
 
-export default preview;
\ No newline at end of file
+export default preview
diff --git a/examples/cms-cosmic/pages/index.tsx b/examples/cms-cosmic/pages/index.tsx
index 6f73d4224859f..c6eadd142fbb4 100644
--- a/examples/cms-cosmic/pages/index.tsx
+++ b/examples/cms-cosmic/pages/index.tsx
@@ -9,15 +9,12 @@ import { CMS_NAME } from '@/lib/constants'
 import { Post } from 'interfaces'
 
 type IndexProps = {
-  allPosts: Post[];
-  preview: boolean;
-};
+  allPosts: Post[]
+  preview: boolean
+}
 
 const Index = (props: IndexProps) => {
-  const {
-    allPosts,
-    preview
-  } = props;
+  const { allPosts, preview } = props
 
   const heroPost = allPosts[0]
   const morePosts = allPosts.slice(1)
@@ -47,18 +44,16 @@ const Index = (props: IndexProps) => {
   )
 }
 
-export default Index;
+export default Index
 
 type staticProps = {
-  preview: boolean;
-};
+  preview: boolean
+}
 
 export const getStaticProps = async (props: staticProps) => {
-  const {
-    preview= null
-  } = props;
+  const { preview = null } = props
   const allPosts = (await getAllPostsForHome(preview)) || []
   return {
-    props: { allPosts, preview }
+    props: { allPosts, preview },
   }
-}
\ No newline at end of file
+}
diff --git a/examples/cms-cosmic/pages/posts/[slug].tsx b/examples/cms-cosmic/pages/posts/[slug].tsx
index 33d1ebda83b5b..549d9a2f3a353 100644
--- a/examples/cms-cosmic/pages/posts/[slug].tsx
+++ b/examples/cms-cosmic/pages/posts/[slug].tsx
@@ -15,19 +15,14 @@ import markdownToHtml from '@/lib/markdownToHtml'
 import { Post } from 'interfaces'
 import { ParsedUrlQueryInput } from 'querystring'
 
-
 type PostProps = {
-  post: Post;
-  morePosts: Post[];
-  preview;
-};
+  post: Post
+  morePosts: Post[]
+  preview
+}
 
 const Post = (props: PostProps) => {
-  const {
-    post,
-    morePosts,
-    preview
-  } = props;
+  const { post, morePosts, preview } = props
   const router = useRouter()
   if (!router.isFallback && !post?.slug) {
     return <ErrorPage statusCode={404} />
@@ -66,18 +61,15 @@ const Post = (props: PostProps) => {
     </Layout>
   )
 }
-export default Post;
+export default Post
 
 type staticProps = {
-  params: ParsedUrlQueryInput;
-  preview: boolean;
-};
+  params: ParsedUrlQueryInput
+  preview: boolean
+}
 
 export const getStaticProps = async (props: staticProps) => {
-  const {
-    params,
-    preview= null
-  } = props;
+  const { params, preview = null } = props
   try {
     const data = await getPostAndMorePosts(params.slug as string, preview)
     const content = await markdownToHtml(data['post']?.metadata?.content || '')
diff --git a/examples/cms-cosmic/tsconfig.json b/examples/cms-cosmic/tsconfig.json
index ad53fb56766fd..db530212f2fdc 100644
--- a/examples/cms-cosmic/tsconfig.json
+++ b/examples/cms-cosmic/tsconfig.json
@@ -2,22 +2,12 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/components/*": [
-        "components/*"
-      ],
-      "@/lib/*": [
-        "lib/*"
-      ],
-      "@/styles/*": [
-        "styles/*"
-      ]
+      "@/components/*": ["components/*"],
+      "@/lib/*": ["lib/*"],
+      "@/styles/*": ["styles/*"]
     },
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -29,14 +19,8 @@
     "moduleResolution": "Node",
     "jsx": "preserve",
     "resolveJsonModule": true,
-    "isolatedModules": true,
+    "isolatedModules": true
   },
-  "include": [
-    "./components/..",
-    "./lib/..",
-    "./styles/.."
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["./components/..", "./lib/..", "./styles/.."],
+  "exclude": ["node_modules"]
 }

From 22f1884567890b17952d6c0b828f4c5c26672e86 Mon Sep 17 00:00:00 2001
From: Tony Spiro <tspiro@tonyspiro.com>
Date: Wed, 29 Jun 2022 12:36:57 -0700
Subject: [PATCH 08/10] edit: update type defs

---
 examples/cms-cosmic/components/hero-post.tsx    |  6 +++---
 examples/cms-cosmic/components/more-stories.tsx |  4 ++--
 examples/cms-cosmic/components/post-header.tsx  |  6 +++---
 examples/cms-cosmic/components/post-preview.tsx |  6 +++---
 examples/cms-cosmic/interfaces/index.ts         | 12 ++++++------
 examples/cms-cosmic/pages/index.tsx             |  4 ++--
 examples/cms-cosmic/pages/posts/[slug].tsx      |  6 +++---
 7 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/examples/cms-cosmic/components/hero-post.tsx b/examples/cms-cosmic/components/hero-post.tsx
index 51839bf6204ef..7cc981524d2e1 100644
--- a/examples/cms-cosmic/components/hero-post.tsx
+++ b/examples/cms-cosmic/components/hero-post.tsx
@@ -2,14 +2,14 @@ import Avatar from './avatar'
 import Date from './date'
 import CoverImage from './cover-image'
 import Link from 'next/link'
-import { Author, Imgix } from 'interfaces'
+import { AuthorType, ImgixType } from 'interfaces'
 
 type HeroPostProps = {
   title: string
-  coverImage: Imgix
+  coverImage: ImgixType
   date: string
   excerpt: string
-  author: Author
+  author: AuthorType
   slug: string
 }
 
diff --git a/examples/cms-cosmic/components/more-stories.tsx b/examples/cms-cosmic/components/more-stories.tsx
index 99f598c258f2f..ec7684718018f 100644
--- a/examples/cms-cosmic/components/more-stories.tsx
+++ b/examples/cms-cosmic/components/more-stories.tsx
@@ -1,8 +1,8 @@
-import { Post } from 'interfaces'
+import { PostType } from 'interfaces'
 import PostPreview from './post-preview'
 
 type MoreStoriesProps = {
-  posts: Post[]
+  posts: PostType[]
 }
 
 const MoreStories = (props: MoreStoriesProps) => {
diff --git a/examples/cms-cosmic/components/post-header.tsx b/examples/cms-cosmic/components/post-header.tsx
index b26a88608fdcc..39739e5692a39 100644
--- a/examples/cms-cosmic/components/post-header.tsx
+++ b/examples/cms-cosmic/components/post-header.tsx
@@ -2,13 +2,13 @@ import Avatar from './avatar'
 import Date from './date'
 import CoverImage from './cover-image'
 import PostTitle from './post-title'
-import { Author, Imgix } from 'interfaces'
+import { AuthorType, ImgixType } from 'interfaces'
 
 type PostHeaderProps = {
   title: string
-  coverImage: Imgix
+  coverImage: ImgixType
   date: string
-  author: Author
+  author: AuthorType
 }
 
 const PostHeader = (props: PostHeaderProps) => {
diff --git a/examples/cms-cosmic/components/post-preview.tsx b/examples/cms-cosmic/components/post-preview.tsx
index 32f7c1e28bd7d..7c11f3d8c50e3 100644
--- a/examples/cms-cosmic/components/post-preview.tsx
+++ b/examples/cms-cosmic/components/post-preview.tsx
@@ -2,14 +2,14 @@ import Avatar from './avatar'
 import Date from './date'
 import CoverImage from './cover-image'
 import Link from 'next/link'
-import { Author, Imgix } from 'interfaces'
+import { AuthorType, ImgixType } from 'interfaces'
 
 type PostPreviewProps = {
   title: string
-  coverImage: Imgix
+  coverImage: ImgixType
   date: string
   excerpt: string
-  author: Author
+  author: AuthorType
   slug: string
 }
 
diff --git a/examples/cms-cosmic/interfaces/index.ts b/examples/cms-cosmic/interfaces/index.ts
index 78cc7f385156f..95891de2a24ad 100644
--- a/examples/cms-cosmic/interfaces/index.ts
+++ b/examples/cms-cosmic/interfaces/index.ts
@@ -1,23 +1,23 @@
-export type Imgix = {
+export type ImgixType = {
   url: string
   imgix_url: string
 }
 
-export type Author = {
+export type AuthorType = {
   title: string
   metadata: {
-    picture: Imgix
+    picture: ImgixType
   }
 }
 
-export type Post = {
+export type PostType = {
   title: string
   slug: string
   content: string
   created_at: string
   metadata: {
-    cover_image: Imgix
-    author: Author
+    cover_image: ImgixType
+    author: AuthorType
     excerpt: string
     content: string
   }
diff --git a/examples/cms-cosmic/pages/index.tsx b/examples/cms-cosmic/pages/index.tsx
index c6eadd142fbb4..33bb82b4be948 100644
--- a/examples/cms-cosmic/pages/index.tsx
+++ b/examples/cms-cosmic/pages/index.tsx
@@ -6,10 +6,10 @@ import Layout from '@/components/layout'
 import { getAllPostsForHome } from '@/lib/api'
 import Head from 'next/head'
 import { CMS_NAME } from '@/lib/constants'
-import { Post } from 'interfaces'
+import { PostType } from 'interfaces'
 
 type IndexProps = {
-  allPosts: Post[]
+  allPosts: PostType[]
   preview: boolean
 }
 
diff --git a/examples/cms-cosmic/pages/posts/[slug].tsx b/examples/cms-cosmic/pages/posts/[slug].tsx
index 549d9a2f3a353..6a97b75bbcf7f 100644
--- a/examples/cms-cosmic/pages/posts/[slug].tsx
+++ b/examples/cms-cosmic/pages/posts/[slug].tsx
@@ -12,12 +12,12 @@ import PostTitle from '@/components/post-title'
 import Head from 'next/head'
 import { CMS_NAME } from '@/lib/constants'
 import markdownToHtml from '@/lib/markdownToHtml'
-import { Post } from 'interfaces'
+import { PostType } from 'interfaces'
 import { ParsedUrlQueryInput } from 'querystring'
 
 type PostProps = {
-  post: Post
-  morePosts: Post[]
+  post: PostType
+  morePosts: PostType[]
   preview
 }
 

From 2ffc3628a1498feb2d7a1747724f4734086fd2cc Mon Sep 17 00:00:00 2001
From: Tony Spiro <tspiro@tonyspiro.com>
Date: Wed, 29 Jun 2022 12:37:14 -0700
Subject: [PATCH 09/10] edit: remove unused function

---
 examples/cms-cosmic/lib/api.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/examples/cms-cosmic/lib/api.tsx b/examples/cms-cosmic/lib/api.tsx
index 198d2ca39ca38..3bdbe404c8e13 100644
--- a/examples/cms-cosmic/lib/api.tsx
+++ b/examples/cms-cosmic/lib/api.tsx
@@ -1,5 +1,5 @@
 import Cosmic from 'cosmicjs'
-import { Post } from 'interfaces'
+import { PostType } from 'interfaces'
 import ErrorPage from 'next/error'
 
 const BUCKET_SLUG = process.env.COSMIC_BUCKET_SLUG
@@ -10,8 +10,6 @@ const bucket = Cosmic().bucket({
   read_key: READ_KEY,
 })
 
-const is404 = (error) => /not found/i.test(error.message)
-
 export const getPreviewPostBySlug = async (slug: string) => {
   const params = {
     query: {
@@ -59,8 +57,8 @@ export const getPostAndMorePosts = async (
   slug: string,
   preview: boolean
 ): Promise<{
-  post: Post
-  morePosts: Post[]
+  post: PostType
+  morePosts: PostType[]
 }> => {
   const singleObjectParams = {
     query: {

From b418a16f5ddbbd166059f6c6eb6e3188cdf7052c Mon Sep 17 00:00:00 2001
From: sherazmalik06 <sherazmalik06@gmail.com>
Date: Wed, 6 Jul 2022 21:28:53 +0500
Subject: [PATCH 10/10] Fixes: Changes requested

---
 examples/cms-cosmic/package.json              | 1 -
 examples/cms-cosmic/pages/api/exit-preview.ts | 4 +---
 examples/cms-cosmic/pages/api/preview.ts      | 4 +---
 examples/cms-cosmic/pages/posts/[slug].tsx    | 2 +-
 4 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/examples/cms-cosmic/package.json b/examples/cms-cosmic/package.json
index e3c019dc7c32b..f9f16d092100a 100644
--- a/examples/cms-cosmic/package.json
+++ b/examples/cms-cosmic/package.json
@@ -21,7 +21,6 @@
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.14",
     "autoprefixer": "10.4.7",
-    "eslint": "^8.18.0",
     "postcss": "8.4.14",
     "tailwindcss": "^3.1.4",
     "typescript": "^4.7.4"
diff --git a/examples/cms-cosmic/pages/api/exit-preview.ts b/examples/cms-cosmic/pages/api/exit-preview.ts
index 33d6338c82343..f6dd282f139c2 100644
--- a/examples/cms-cosmic/pages/api/exit-preview.ts
+++ b/examples/cms-cosmic/pages/api/exit-preview.ts
@@ -1,4 +1,4 @@
-const exit = async (_, res) => {
+export default function exit (_, res) {
   // Exit the current user from "Preview Mode". This function accepts no args.
   res.clearPreviewData()
 
@@ -6,5 +6,3 @@ const exit = async (_, res) => {
   res.writeHead(307, { Location: '/' })
   res.end()
 }
-
-export default exit;
\ No newline at end of file
diff --git a/examples/cms-cosmic/pages/api/preview.ts b/examples/cms-cosmic/pages/api/preview.ts
index 6cedce19216db..692d11b8918ec 100644
--- a/examples/cms-cosmic/pages/api/preview.ts
+++ b/examples/cms-cosmic/pages/api/preview.ts
@@ -1,6 +1,6 @@
 import { getPreviewPostBySlug } from '@/lib/api'
 
-const preview = async(req, res) => {
+export default async function preview(req, res) {
  // Check the secret and next parameters
   // This secret should only be known to this API route and the CMS
   if (
@@ -26,5 +26,3 @@ const preview = async(req, res) => {
   res.writeHead(307, { Location: `/posts/${post.slug}` })
   res.end()
 }
-
-export default preview;
\ No newline at end of file
diff --git a/examples/cms-cosmic/pages/posts/[slug].tsx b/examples/cms-cosmic/pages/posts/[slug].tsx
index 33d1ebda83b5b..5e35369684ba1 100644
--- a/examples/cms-cosmic/pages/posts/[slug].tsx
+++ b/examples/cms-cosmic/pages/posts/[slug].tsx
@@ -96,7 +96,7 @@ export const getStaticProps = async (props: staticProps) => {
   }
 }
 
-export const getStaticPaths = async () => {
+export async function getStaticPaths() {
   const allPosts = (await getAllPostsWithSlug()) || []
   return {
     paths: allPosts.map((post) => `/posts/${post.slug}`),