chore(examples): Cosmic cms updates (vercel#41080)

Lands vercel#38163 with merge conflict fixes. Needed to open a new PR, because
GitHub does not allow maintainers to edit organization forks.

https://github.com/orgs/community/discussions/5634

Closes vercel#38163


## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

Co-authored-by: sherazmalik06 <sherazmalik06@gmail.com>
Co-authored-by: Tony Spiro <tspiro@tonyspiro.com>

examples/cms-cosmic/components/alert.js → 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: boolean
+}
+
+const Alert = (props: AlertProps) => {
+  const { preview } = props
   return (
     <div
       className={cn('border-b', {
@@ -14,7 +19,7 @@ export default function Alert({ preview }) {
         <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"
@@ -40,3 +45,5 @@ export default function Alert({ preview }) {
     </div>
   )
 }
+
+export default Alert

examples/cms-cosmic/components/avatar.js → examples/cms-cosmic/components/avatar.tsx

@@ -1,6 +1,13 @@
 import Image from 'next/image'
 
-export default function Avatar({ name, picture }) {
+type AvatarProps = {
+  name: string
+  picture: string
+}
+
+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

examples/cms-cosmic/components/container.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react'
+
+type ContainerProps = {
+  children: ReactNode
+}
+
+const Container = (props: ContainerProps) => {
+  const { children } = props
+  return <div className="container mx-auto px-5">{children}</div>
+}
+
+export default Container

examples/cms-cosmic/components/cover-image.js → examples/cms-cosmic/components/cover-image.tsx

@@ -2,7 +2,14 @@ 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 +40,4 @@ export default function CoverImage({ title, url, slug }) {
     </div>
   )
 }
+export default CoverImage

examples/cms-cosmic/components/date.js → examples/cms-cosmic/components/date.tsx

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

examples/cms-cosmic/components/footer.js → 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

examples/cms-cosmic/components/header.js → 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

examples/cms-cosmic/components/hero-post.js → examples/cms-cosmic/components/hero-post.tsx

@@ -2,15 +2,20 @@ import Avatar from './avatar'
 import Date from './date'
 import CoverImage from './cover-image'
 import Link from 'next/link'
+import { AuthorType, ImgixType } from 'interfaces'
+
+type HeroPostProps = {
+  title: string
+  coverImage: ImgixType
+  date: string
+  excerpt: string
+  author: AuthorType
+  slug: string
+}
+
+const HeroPost = (props: HeroPostProps) => {
+  const { title, coverImage, date, excerpt, author, slug } = props
 
-export default function HeroPost({
-  title,
-  coverImage,
-  date,
-  excerpt,
-  author,
-  slug,
-}) {
   return (
     <section>
       <div className="mb-8 md:mb-16">
@@ -38,3 +43,5 @@ export default function HeroPost({
     </section>
   )
 }
+
+export default HeroPost

examples/cms-cosmic/components/intro.js → 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

examples/cms-cosmic/components/layout.js → examples/cms-cosmic/components/layout.tsx

@@ -3,8 +3,14 @@ import Footer from './footer'
 import Meta from './meta'
 import 'lazysizes'
 import 'lazysizes/plugins/parent-fit/ls.parent-fit'
+import { ReactNode } from 'react'
 
-export default function Layout({ preview, children }) {
+type LayoutProps = {
+  preview: boolean
+  children: ReactNode
+}
+
+const Layout = ({ preview, children }: LayoutProps) => {
   return (
     <>
       <Meta />
@@ -16,3 +22,5 @@ export default function Layout({ preview, children }) {
     </>
   )
 }
+
+export default Layout

examples/cms-cosmic/components/meta.js → 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

examples/cms-cosmic/components/more-stories.js → examples/cms-cosmic/components/more-stories.tsx

@@ -1,6 +1,12 @@
+import { PostType } from 'interfaces'
 import PostPreview from './post-preview'
 
-export default function MoreStories({ posts }) {
+type MoreStoriesProps = {
+  posts: PostType[]
+}
+
+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 +28,5 @@ export default function MoreStories({ posts }) {
     </section>
   )
 }
+
+export default MoreStories

examples/cms-cosmic/components/post-body.js → 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: string
+}
+
+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

examples/cms-cosmic/components/post-header.js → examples/cms-cosmic/components/post-header.tsx

@@ -2,8 +2,17 @@ import Avatar from './avatar'
 import Date from './date'
 import CoverImage from './cover-image'
 import PostTitle from './post-title'
+import { AuthorType, ImgixType } from 'interfaces'
 
-export default function PostHeader({ title, coverImage, date, author }) {
+type PostHeaderProps = {
+  title: string
+  coverImage: ImgixType
+  date: string
+  author: AuthorType
+}
+
+const PostHeader = (props: PostHeaderProps) => {
+  const { title, coverImage, date, author } = props
   return (
     <>
       <PostTitle>{title}</PostTitle>
@@ -14,11 +23,14 @@ export default function PostHeader({ title, coverImage, date, author }) {
         />
       </div>
       <div className="mb-8 md:mb-16 sm:mx-0">
-        <CoverImage title={title} url={coverImage.imgix_url} />
+        <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} />
+          <Avatar
+            name={author.title}
+            picture={author.metadata.picture.imgix_url}
+          />
         </div>
         <div className="mb-6 text-lg">
           <Date dateString={date} />
@@ -27,3 +39,5 @@ export default function PostHeader({ title, coverImage, date, author }) {
     </>
   )
 }
+
+export default PostHeader

examples/cms-cosmic/components/post-preview.js → examples/cms-cosmic/components/post-preview.tsx

@@ -2,15 +2,20 @@ import Avatar from './avatar'
 import Date from './date'
 import CoverImage from './cover-image'
 import Link from 'next/link'
+import { AuthorType, ImgixType } from 'interfaces'
+
+type PostPreviewProps = {
+  title: string
+  coverImage: ImgixType
+  date: string
+  excerpt: string
+  author: AuthorType
+  slug: string
+}
+
+const PostPreview = (props: PostPreviewProps) => {
+  const { title, coverImage, date, excerpt, author, slug } = props
 
-export default function PostPreview({
-  title,
-  coverImage,
-  date,
-  excerpt,
-  author,
-  slug,
-}) {
   return (
     <div>
       <div className="mb-5">
@@ -29,3 +34,5 @@ export default function PostPreview({
     </div>
   )
 }
+
+export default PostPreview

examples/cms-cosmic/components/post-title.js → examples/cms-cosmic/components/post-title.tsx

@@ -1,7 +1,15 @@
-export default function PostTitle({ children }) {
+import { ReactNode } from 'react'
+
+type PostTitleProps = {
+  children: ReactNode
+}
+
+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

examples/cms-cosmic/components/section-separator.tsx

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

examples/cms-cosmic/interfaces/index.ts

@@ -0,0 +1,24 @@
+export type ImgixType = {
+  url: string
+  imgix_url: string
+}
+
+export type AuthorType = {
+  title: string
+  metadata: {
+    picture: ImgixType
+  }
+}
+
+export type PostType = {
+  title: string
+  slug: string
+  content: string
+  created_at: string
+  metadata: {
+    cover_image: ImgixType
+    author: AuthorType
+    excerpt: string
+    content: string
+  }
+}