rsnext/examples/cms-cosmic/pages/index.js
Jazib Sawar 6ce7a0378e
CMS Cosmic Example (#13499)
* Add Cosmic CMS Example

* with native .env support, this file isn't needed anymore

* FIX use path alias

* Add cosmicjs package

* Fix alias import in pages/api/preview

* Added: react-imgix & lazysizes package

* Load lazysizes in layout

* Used imgix image with lazyloading

* Added avatar imgix optimizations

* EDITED: steps to install content, preview

* EDITED: demo link

* EDITED: Install step

* EDITED: preview link steps

* Edited: demo link

* FIXED: object_slug

* Screenshots

* Fixed object_slug link

* Update README.md

* Fix: formatting issue

* Updated readme and renamed .env to env.local

* Sanity checks

* Handle fallback data when expected

* Added link to the example in other examples

* Updated demo deployment

* Added example to docs

* minor lint fix

* Remove manual download step

* use vercel.json

Co-authored-by: Tony Spiro <tspiro@tonyspiro.com>
Co-authored-by: Luis Alvarez <luis@vercel.com>
2020-06-04 15:18:11 -05:00

43 lines
1.2 KiB
JavaScript

import Container from '@/components/container'
import MoreStories from '@/components/more-stories'
import HeroPost from '@/components/hero-post'
import Intro from '@/components/intro'
import Layout from '@/components/layout'
import { getAllPostsForHome } from '@/lib/api'
import Head from 'next/head'
import { CMS_NAME } from '@/lib/constants'
export default function Index({ allPosts }) {
const heroPost = allPosts[0]
const morePosts = allPosts.slice(1)
return (
<>
<Layout>
<Head>
<title>Next.js Blog Example with {CMS_NAME}</title>
</Head>
<Container>
<Intro />
{heroPost && (
<HeroPost
title={heroPost.title}
coverImage={heroPost.metadata.cover_image}
date={heroPost.created_at}
author={heroPost.metadata.author}
slug={heroPost.slug}
excerpt={heroPost.metadata.excerpt}
/>
)}
{morePosts.length > 0 && <MoreStories posts={morePosts} />}
</Container>
</Layout>
</>
)
}
export async function getStaticProps({ preview }) {
const allPosts = (await getAllPostsForHome(preview)) || []
return {
props: { allPosts },
}
}