Skip to content

Commit 58c7265

Browse files
gregrickabygregrickaby
authored
Update DatoCMS Example (vercel#13008)
👋🏻 This PR updates the Datocms example: - [x] Next.js 9.4 absolute import and aliases support - [x] Next.js 9.4 native `.env` support - [x] Tailwind 1.4 native PurgeCSS support - [x] Chore: bump other dependencies, like React, Remark, and DateFNS I've tested this PR here: - 💻 https://github.com/gregrickaby/datocms-next-js-blog-demo-2392 - 👀 https://datocms-next-js-blog-demo-2392.now.sh/
1 parent 9386ba2 commit 58c7265

19 files changed

+69
-70
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Container from './container'
22
import cn from 'classnames'
3-
import { EXAMPLE_PATH } from '../lib/constants'
3+
import { EXAMPLE_PATH } from '@/lib/constants'
44

55
export default function Alert({ preview }) {
66
return (

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Container from './container'
2-
import { EXAMPLE_PATH } from '../lib/constants'
2+
import { EXAMPLE_PATH } from '@/lib/constants'
33

44
export default function Footer() {
55
return (

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import Avatar from '../components/avatar'
2-
import Date from '../components/date'
3-
import CoverImage from '../components/cover-image'
1+
import Avatar from './avatar'
2+
import Date from './date'
3+
import CoverImage from './cover-image'
44
import Link from 'next/link'
55

66
export default function HeroPost({

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CMS_NAME, CMS_URL } from '../lib/constants'
1+
import { CMS_NAME, CMS_URL } from '@/lib/constants'
22

33
export default function Intro() {
44
return (

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import Alert from '../components/alert'
2-
import Footer from '../components/footer'
3-
import Meta from '../components/meta'
1+
import Alert from './alert'
2+
import Footer from './footer'
3+
import Meta from './meta'
44

55
export default function Layout({ preview, children }) {
66
return (

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Head from 'next/head'
2-
import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
2+
import { CMS_NAME, HOME_OG_IMAGE_URL } from '@/lib/constants'
33

44
export default function Meta() {
55
return (

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import PostPreview from '../components/post-preview'
1+
import PostPreview from './post-preview'
22

33
export default function MoreStories({ posts }) {
44
return (

‎examples/cms-datocms/components/post-header.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import Avatar from '../components/avatar'
2-
import Date from '../components/date'
3-
import CoverImage from '../components/cover-image'
4-
import PostTitle from '../components/post-title'
1+
import Avatar from './avatar'
2+
import Date from './date'
3+
import CoverImage from './cover-image'
4+
import PostTitle from './post-title'
55

66
export default function PostHeader({ title, coverImage, date, author }) {
77
return (

‎examples/cms-datocms/components/post-preview.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import Avatar from '../components/avatar'
2-
import Date from '../components/date'
1+
import Avatar from './avatar'
2+
import Date from './date'
33
import CoverImage from './cover-image'
44
import Link from 'next/link'
55

‎examples/cms-datocms/jsconfig.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"paths": {
5+
"@/components/*": ["components/*"],
6+
"@/lib/*": ["lib/*"],
7+
"@/styles/*": ["styles/*"]
8+
}
9+
}
10+
}

‎examples/cms-datocms/next.config.js

-8
This file was deleted.

‎examples/cms-datocms/package.json

+8-9
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,17 @@
88
},
99
"dependencies": {
1010
"classnames": "2.2.6",
11-
"date-fns": "2.10.0",
11+
"date-fns": "2.14.0",
1212
"next": "latest",
13-
"react": "^16.13.0",
14-
"react-datocms": "1.1.0",
15-
"react-dom": "^16.13.0",
16-
"remark": "11.0.2",
17-
"remark-html": "10.0.0"
13+
"react": "^16.13.1",
14+
"react-datocms": "1.2.4",
15+
"react-dom": "^16.13.1",
16+
"remark": "12.0.0",
17+
"remark-html": "11.0.2"
1818
},
1919
"devDependencies": {
20-
"@fullhuman/postcss-purgecss": "^2.1.0",
21-
"dotenv": "8.2.0",
20+
"postcss-flexbugs-fixes": "4.2.1",
2221
"postcss-preset-env": "^6.7.0",
23-
"tailwindcss": "^1.2.0"
22+
"tailwindcss": "^1.4.6"
2423
}
2524
}

‎examples/cms-datocms/pages/_app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import '../styles/index.css'
1+
import '@/styles/index.css'
22

33
function MyApp({ Component, pageProps }) {
44
return <Component {...pageProps} />

‎examples/cms-datocms/pages/api/preview.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getPreviewPostBySlug } from '../../lib/api'
1+
import { getPreviewPostBySlug } from '@/lib/api'
22

33
export default async function preview(req, res) {
44
// Check the secret and next parameters

‎examples/cms-datocms/pages/index.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import Container from '../components/container'
2-
import MoreStories from '../components/more-stories'
3-
import HeroPost from '../components/hero-post'
4-
import Intro from '../components/intro'
5-
import Layout from '../components/layout'
6-
import { getAllPostsForHome } from '../lib/api'
1+
import Container from '@/components/container'
2+
import MoreStories from '@/components/more-stories'
3+
import HeroPost from '@/components/hero-post'
4+
import Intro from '@/components/intro'
5+
import Layout from '@/components/layout'
6+
import { getAllPostsForHome } from '@/lib/api'
77
import Head from 'next/head'
8-
import { CMS_NAME } from '../lib/constants'
8+
import { CMS_NAME } from '@/lib/constants'
99

1010
export default function Index({ allPosts }) {
1111
const heroPost = allPosts[0]

‎examples/cms-datocms/pages/posts/[slug].js

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { useRouter } from 'next/router'
22
import ErrorPage from 'next/error'
3-
import Container from '../../components/container'
4-
import PostBody from '../../components/post-body'
5-
import MoreStories from '../../components/more-stories'
6-
import Header from '../../components/header'
7-
import PostHeader from '../../components/post-header'
8-
import SectionSeparator from '../../components/section-separator'
9-
import Layout from '../../components/layout'
10-
import { getAllPostsWithSlug, getPostAndMorePosts } from '../../lib/api'
11-
import PostTitle from '../../components/post-title'
3+
import Container from '@/components/container'
4+
import PostBody from '@/components/post-body'
5+
import MoreStories from '@/components/more-stories'
6+
import Header from '@/components/header'
7+
import PostHeader from '@/components/post-header'
8+
import SectionSeparator from '@/components/section-separator'
9+
import Layout from '@/components/layout'
10+
import { getAllPostsWithSlug, getPostAndMorePosts } from '@/lib/api'
11+
import PostTitle from '@/components/post-title'
1212
import Head from 'next/head'
13-
import { CMS_NAME } from '../../lib/constants'
14-
import markdownToHtml from '../../lib/markdownToHtml'
13+
import { CMS_NAME } from '@/lib/constants'
14+
import markdownToHtml from '@/lib/markdownToHtml'
1515

1616
export default function Post({ post, morePosts, preview }) {
1717
const router = useRouter()

‎examples/cms-datocms/postcss.config.js

+13-14
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
module.exports = {
22
plugins: [
33
'tailwindcss',
4-
process.env.NODE_ENV === 'production'
5-
? [
6-
'@fullhuman/postcss-purgecss',
7-
{
8-
content: [
9-
'./pages/**/*.{js,jsx,ts,tsx}',
10-
'./components/**/*.{js,jsx,ts,tsx}',
11-
],
12-
defaultExtractor: (content) =>
13-
content.match(/[\w-/:]+(?<!:)/g) || [],
14-
},
15-
]
16-
: undefined,
17-
'postcss-preset-env',
4+
'postcss-flexbugs-fixes',
5+
[
6+
'postcss-preset-env',
7+
{
8+
autoprefixer: {
9+
flexbox: 'no-2009',
10+
},
11+
stage: 3,
12+
features: {
13+
'custom-properties': false,
14+
},
15+
},
16+
],
1817
],
1918
}

‎examples/cms-datocms/styles/index.css

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/* purgecss start ignore */
21
@tailwind base;
32
@tailwind components;
4-
/* purgecss end ignore */
53
@tailwind utilities;

‎examples/cms-datocms/tailwind.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
module.exports = {
2+
purge: ['./components/**/*.js', './pages/**/*.js'],
23
theme: {
34
extend: {
45
colors: {

0 commit comments

Comments
 (0)