Skip to content

Commit 7c203b8

Browse files
author
James Vidler
authored
Added Agility CMS example 🏆 (#12788)
1 parent 65f0574 commit 7c203b8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+1821
-0
lines changed

‎examples/cms-agilitycms/.env.local.example

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
NEXT_EXAMPLE_CMS_AGILITY_GUID=
2+
NEXT_EXAMPLE_CMS_AGILITY_API_FETCH_KEY=
3+
NEXT_EXAMPLE_CMS_AGILITY_API_PREVIEW_KEY=
4+
NEXT_EXAMPLE_CMS_AGILITY_SECURITY_KEY=

‎examples/cms-agilitycms/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.env*.local
2+
.vercel

‎examples/cms-agilitycms/README.md

+325
Large diffs are not rendered by default.

‎examples/cms-agilitycms/components/alert.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Container from './container'
2+
import cn from 'classnames'
3+
import { EXAMPLE_PATH } from '../lib/constants'
4+
5+
export default function Alert({ preview }) {
6+
return (
7+
<div
8+
className={cn('border-b', {
9+
'bg-accent-7 border-accent-7 text-white': preview,
10+
'bg-accent-1 border-accent-2': !preview,
11+
})}
12+
>
13+
<Container>
14+
<div className="py-2 text-center text-sm">
15+
{preview ? (
16+
<>
17+
This is page is a preview.{' '}
18+
<a
19+
href="/api/exit-preview"
20+
className="underline hover:text-cyan duration-200 transition-colors"
21+
>
22+
Click here
23+
</a>{' '}
24+
to exit preview mode.
25+
</>
26+
) : (
27+
<>
28+
The source code for this blog is{' '}
29+
<a
30+
href={`https://github.com/zeit/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
31+
className="underline hover:text-success duration-200 transition-colors"
32+
>
33+
available on GitHub
34+
</a>
35+
.
36+
</>
37+
)}
38+
</div>
39+
</Container>
40+
</div>
41+
)
42+
}

‎examples/cms-agilitycms/components/avatar.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default function Avatar({ name, picture }) {
2+
return (
3+
<div className="flex items-center">
4+
<img
5+
src={picture.url}
6+
className="w-12 h-12 rounded-full mr-4"
7+
alt={name}
8+
/>
9+
<div className="text-xl font-bold">{name}</div>
10+
</div>
11+
)
12+
}

‎examples/cms-agilitycms/components/container.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function Container({ children }) {
2+
return <div className="container mx-auto px-5">{children}</div>
3+
}

‎examples/cms-agilitycms/components/cover-image.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
//import { Image } from 'react-datocms'
2+
import Image from '../lib/components/image'
3+
import cn from 'classnames'
4+
import Link from 'next/link'
5+
6+
export default function CoverImage({ title, responsiveImage, slug }) {
7+
const image = (
8+
<Image
9+
data={{
10+
...responsiveImage,
11+
}}
12+
className={cn('shadow-small', {
13+
'hover:shadow-medium transition-shadow duration-200': slug,
14+
})}
15+
/>
16+
)
17+
return (
18+
<div className="-mx-5 sm:mx-0">
19+
{slug ? (
20+
<Link href="/[...slug]" as={`/posts/${slug}`}>
21+
<a aria-label={title}>{image}</a>
22+
</Link>
23+
) : (
24+
image
25+
)}
26+
</div>
27+
)
28+
}

‎examples/cms-agilitycms/components/date.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { parseISO, format } from 'date-fns'
2+
3+
export default function Date({ dateString }) {
4+
const date = parseISO(dateString)
5+
return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
6+
}

‎examples/cms-agilitycms/components/footer.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import Container from './container'
2+
import { EXAMPLE_PATH } from '../lib/constants'
3+
4+
export default function Footer() {
5+
return (
6+
<footer className="bg-accent-1 border-t border-accent-2">
7+
<Container>
8+
<div className="py-28 flex flex-col lg:flex-row items-center">
9+
<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">
10+
Statically Generated with Next.js.
11+
</h3>
12+
<div className="flex flex-col lg:flex-row justify-center items-center lg:pl-4 lg:w-1/2">
13+
<a
14+
href="https://nextjs.org/docs/basic-features/pages"
15+
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"
16+
>
17+
Read Documentation
18+
</a>
19+
<a
20+
href={`https://github.com/zeit/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
21+
className="mx-3 font-bold hover:underline"
22+
>
23+
View on GitHub
24+
</a>
25+
</div>
26+
</div>
27+
</Container>
28+
</footer>
29+
)
30+
}

‎examples/cms-agilitycms/components/header.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Link from 'next/link'
2+
3+
export default function Header() {
4+
return (
5+
<h2 className="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-20 mt-8">
6+
<Link href="/">
7+
<a className="hover:underline">Blog</a>
8+
</Link>
9+
.
10+
</h2>
11+
)
12+
}

‎examples/cms-agilitycms/components/hero-post.js

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import Link from 'next/link'
2+
import Avatar from '../components/avatar'
3+
import Date from '../components/date'
4+
import CoverImage from '../components/cover-image'
5+
6+
export default function HeroPost({
7+
title,
8+
coverImage,
9+
date,
10+
excerpt,
11+
author,
12+
slug,
13+
}) {
14+
return (
15+
<section>
16+
<div className="mb-8 md:mb-16">
17+
<CoverImage
18+
title={title}
19+
responsiveImage={coverImage.responsiveImage}
20+
slug={slug}
21+
/>
22+
</div>
23+
<div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
24+
<div>
25+
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
26+
<Link href="/[...slug]" as={`/posts/${slug}`}>
27+
<a className="hover:underline">{title}</a>
28+
</Link>
29+
</h3>
30+
<div className="mb-4 md:mb-0 text-lg">
31+
<Date dateString={date} />
32+
</div>
33+
</div>
34+
{author && (
35+
<div>
36+
<p className="text-lg leading-relaxed mb-4">{excerpt}</p>
37+
<Avatar name={author.name} picture={author.picture} />
38+
</div>
39+
)}
40+
</div>
41+
</section>
42+
)
43+
}
44+
45+
// The data returned here will be send as `props` to the component
46+
HeroPost.getCustomInitialProps = async function ({ client }) {
47+
const post = await client.getLatestPost()
48+
return post
49+
}

‎examples/cms-agilitycms/components/intro.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { CMS_NAME, CMS_URL } from '../lib/constants'
2+
3+
export default function Intro() {
4+
return (
5+
<section className="flex-col md:flex-row flex items-center md:justify-between mt-16 mb-16 md:mb-12">
6+
<h1 className="text-6xl md:text-8xl font-bold tracking-tighter leading-tight md:pr-8">
7+
Blog.
8+
</h1>
9+
<h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
10+
A statically generated blog example using{' '}
11+
<a
12+
href="https://nextjs.org/"
13+
className="underline hover:text-success duration-200 transition-colors"
14+
>
15+
Next.js
16+
</a>{' '}
17+
and{' '}
18+
<a
19+
href={CMS_URL}
20+
className="underline hover:text-success duration-200 transition-colors"
21+
>
22+
{CMS_NAME}
23+
</a>
24+
.
25+
</h4>
26+
</section>
27+
)
28+
}

‎examples/cms-agilitycms/components/layout.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import Alert from '../components/alert'
2+
import Footer from '../components/footer'
3+
import Meta from '../components/meta'
4+
5+
export default function Layout({ preview, children }) {
6+
return (
7+
<>
8+
<Meta />
9+
<div className="min-h-screen">
10+
<Alert preview={preview} />
11+
<main>{children}</main>
12+
</div>
13+
<Footer />
14+
</>
15+
)
16+
}

‎examples/cms-agilitycms/components/markdown-styles.module.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.markdown {
2+
@apply text-lg leading-relaxed;
3+
}
4+
5+
.markdown p,
6+
.markdown ul,
7+
.markdown ol,
8+
.markdown blockquote {
9+
@apply my-6;
10+
}
11+
12+
.markdown h2 {
13+
@apply text-3xl mt-12 mb-4 leading-snug;
14+
}
15+
16+
.markdown h3 {
17+
@apply text-2xl mt-8 mb-4 leading-snug;
18+
}

‎examples/cms-agilitycms/components/meta.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Head from 'next/head'
2+
import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
3+
4+
export default function Meta() {
5+
return (
6+
<Head>
7+
<link
8+
rel="apple-touch-icon"
9+
sizes="180x180"
10+
href="/favicon/apple-touch-icon.png"
11+
/>
12+
<link
13+
rel="icon"
14+
type="image/png"
15+
sizes="32x32"
16+
href="/favicon/favicon-32x32.png"
17+
/>
18+
<link
19+
rel="icon"
20+
type="image/png"
21+
sizes="16x16"
22+
href="/favicon/favicon-16x16.png"
23+
/>
24+
<link rel="manifest" href="/favicon/site.webmanifest" />
25+
<link
26+
rel="mask-icon"
27+
href="/favicon/safari-pinned-tab.svg"
28+
color="#000000"
29+
/>
30+
<link rel="shortcut icon" href="/favicon/favicon.ico" />
31+
<meta name="msapplication-TileColor" content="#000000" />
32+
<meta name="msapplication-config" content="/favicon/browserconfig.xml" />
33+
<meta name="theme-color" content="#000" />
34+
<link rel="alternate" type="application/rss+xml" href="/feed.xml" />
35+
<meta
36+
name="description"
37+
content={`A statically generated blog example using Next.js and ${CMS_NAME}.`}
38+
/>
39+
<meta property="og:image" content={HOME_OG_IMAGE_URL} />
40+
</Head>
41+
)
42+
}

‎examples/cms-agilitycms/components/more-stories.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import PostPreview from '../components/post-preview'
2+
3+
export default function MoreStories({ title, posts }) {
4+
return (
5+
<section>
6+
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
7+
{title}
8+
</h2>
9+
<div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
10+
{posts.map((post) => (
11+
<PostPreview
12+
key={post.slug}
13+
title={post.title}
14+
coverImage={post.coverImage}
15+
date={post.date}
16+
author={post.author}
17+
slug={post.slug}
18+
excerpt={post.excerpt}
19+
/>
20+
))}
21+
</div>
22+
</section>
23+
)
24+
}
25+
26+
// The data returned here will be send as `props` to the component
27+
MoreStories.getCustomInitialProps = async function ({
28+
client,
29+
item,
30+
pageInSitemap,
31+
}) {
32+
const postToExcludeContentID = pageInSitemap.contentID ?? -1
33+
const posts = await client.getPostsForMoreStories({ postToExcludeContentID })
34+
35+
return {
36+
title: item.fields.title,
37+
posts,
38+
}
39+
}

‎examples/cms-agilitycms/components/post-body.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import markdownStyles from './markdown-styles.module.css'
2+
3+
export default function PostBody({ content }) {
4+
return (
5+
<div className="max-w-2xl mx-auto">
6+
<div
7+
className={markdownStyles['markdown']}
8+
dangerouslySetInnerHTML={{ __html: content }}
9+
/>
10+
</div>
11+
)
12+
}

0 commit comments

Comments
 (0)