Update all CMS examples dependencies. (#33580)

Updates all CMS updates to use:

- Tailwind 3 (and the corresponding `tailwind.config.js` and PostCSS changes)
- `remark@14` and `remark-html@15` (and the corresponding ESM breaking changes)
- `date-fns` minor bump

Ensured all CMS examples were:

- Using `next/image`
- Not using `as` for `next/link` (no longer needed)

examples/blog-starter/lib/markdownToHtml.js

@@ -1,4 +1,4 @@
-import remark from 'remark'
+import { remark } from 'remark'
 import html from 'remark-html'
 
 export default async function markdownToHtml(markdown) {

examples/blog-starter/package.json

@@ -6,14 +6,14 @@
     "start": "next start"
   },
   "dependencies": {
-    "classnames": "2.2.6",
-    "date-fns": "2.16.1",
-    "gray-matter": "4.0.2",
+    "classnames": "2.3.1",
+    "date-fns": "2.28.0",
+    "gray-matter": "4.0.3",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "remark": "13.0.0",
-    "remark-html": "13.0.2"
+    "remark": "14.0.2",
+    "remark-html": "15.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.0",

examples/blog-starter/postcss.config.js

@@ -1,3 +1,8 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
 module.exports = {
-  plugins: ['tailwindcss', 'autoprefixer'],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 }

examples/cms-agilitycms/package.json

@@ -8,19 +8,17 @@
   "dependencies": {
     "@agility/content-fetch": "^0.8.1",
     "classnames": "2.3.1",
-    "date-fns": "2.22.1",
+    "date-fns": "2.28.0",
     "isomorphic-unfetch": "3.0.0",
     "next": "latest",
     "react": "^17.0.2",
     "react-datocms": "1.1.0",
     "react-dom": "^17.0.2",
-    "react-intersection-observer": "^8.26.1",
-    "remark": "11.0.2",
-    "remark-html": "10.0.0"
+    "react-intersection-observer": "^8.26.1"
   },
   "devDependencies": {
-    "autoprefixer": "10.2.6",
-    "postcss": "8.3.5",
-    "tailwindcss": "^2.2.4"
+    "autoprefixer": "10.4.2",
+    "postcss": "8.4.5",
+    "tailwindcss": "^3.0.15"
   }
 }

examples/cms-agilitycms/tailwind.config.js

@@ -1,7 +1,8 @@
 module.exports = {
-  mode: 'jit',
-  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
   theme: {
     extend: {
       colors: {
@@ -32,8 +33,5 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {},
-  },
   plugins: [],
 }

examples/cms-builder-io/package.json

@@ -9,7 +9,7 @@
     "@builder.io/react": "^1.1.47",
     "@builder.io/widgets": "^1.2.21",
     "classnames": "2.3.1",
-    "date-fns": "2.22.1",
+    "date-fns": "2.28.0",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

examples/cms-buttercms/package.json

@@ -6,16 +6,16 @@
     "start": "next start"
   },
   "dependencies": {
-    "buttercms": "1.2.7",
+    "buttercms": "1.2.8",
     "classnames": "2.3.1",
-    "date-fns": "2.22.1",
+    "date-fns": "2.28.0",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "autoprefixer": "10.2.6",
-    "postcss": "8.3.5",
-    "tailwindcss": "^2.2.4"
+    "autoprefixer": "10.4.2",
+    "postcss": "8.4.5",
+    "tailwindcss": "^3.0.15"
   }
 }

examples/cms-buttercms/tailwind.config.js

@@ -1,7 +1,8 @@
 module.exports = {
-  mode: 'jit',
-  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
   theme: {
     extend: {
       colors: {
@@ -32,8 +33,5 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {},
-  },
   plugins: [],
 }

examples/cms-contentful/components/hero-post.js

@@ -19,7 +19,7 @@ export default function HeroPost({
       <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
-            <Link as={`/posts/${slug}`} href="/posts/[slug]">
+            <Link href={`/posts/${slug}`}>
               <a className="hover:underline">{title}</a>
             </Link>
           </h3>

examples/cms-contentful/package.json

@@ -15,9 +15,9 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "autoprefixer": "10.2.6",
+    "autoprefixer": "10.4.2",
     "contentful-import": "^7.8.7",
-    "postcss": "8.3.5",
-    "tailwindcss": "^2.2.4"
+    "postcss": "8.4.5",
+    "tailwindcss": "^3.0.15"
   }
 }

examples/cms-contentful/tailwind.config.js

@@ -1,7 +1,8 @@
 module.exports = {
-  mode: 'jit',
-  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
   theme: {
     extend: {
       colors: {
@@ -32,8 +33,5 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {},
-  },
   plugins: [],
 }

examples/cms-cosmic/lib/markdownToHtml.js

@@ -1,4 +1,4 @@
-import remark from 'remark'
+import { remark } from 'remark'
 import html from 'remark-html'
 
 export default async function markdownToHtml(markdown) {

examples/cms-cosmic/package.json

@@ -8,19 +8,19 @@
   "dependencies": {
     "classnames": "2.3.1",
     "cosmicjs": "^3.2.43",
-    "date-fns": "2.22.1",
+    "date-fns": "2.28.0",
     "lazysizes": "^5.2.1-rc2",
     "next": "latest",
     "react": "^17.0.2",
     "react-datocms": "1.6.3",
     "react-dom": "^17.0.2",
     "react-imgix": "^9.0.2",
-    "remark": "12.0.0",
-    "remark-html": "11.0.2"
+    "remark": "14.0.2",
+    "remark-html": "15.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "10.2.6",
-    "postcss": "8.3.5",
-    "tailwindcss": "^2.2.4"
+    "autoprefixer": "10.4.2",
+    "postcss": "8.4.5",
+    "tailwindcss": "^3.0.15"
   }
 }

examples/cms-cosmic/tailwind.config.js

@@ -1,7 +1,8 @@
 module.exports = {
-  mode: 'jit',
-  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
   theme: {
     extend: {
       colors: {
@@ -32,8 +33,5 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {},
-  },
   plugins: [],
 }

examples/cms-datocms/lib/markdownToHtml.js

@@ -1,4 +1,4 @@
-import remark from 'remark'
+import { remark } from 'remark'
 import html from 'remark-html'
 
 export default async function markdownToHtml(markdown) {

examples/cms-datocms/package.json

@@ -7,17 +7,17 @@
   },
   "dependencies": {
     "classnames": "2.3.1",
-    "date-fns": "2.22.1",
+    "date-fns": "2.28.0",
     "next": "latest",
     "react": "^17.0.2",
     "react-datocms": "1.6.3",
     "react-dom": "^17.0.2",
-    "remark": "12.0.0",
-    "remark-html": "11.0.2"
+    "remark": "14.0.2",
+    "remark-html": "15.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "10.2.6",
-    "postcss": "8.3.5",
-    "tailwindcss": "^2.2.4"
+    "autoprefixer": "10.4.2",
+    "postcss": "8.4.5",
+    "tailwindcss": "^3.0.15"
   }
 }

examples/cms-datocms/tailwind.config.js

@@ -1,7 +1,8 @@
 module.exports = {
-  mode: 'jit',
-  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
   theme: {
     extend: {
       colors: {
@@ -32,8 +33,5 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {},
-  },
   plugins: [],
 }

examples/cms-drupal/package.json

@@ -7,15 +7,15 @@
   },
   "dependencies": {
     "classnames": "2.3.1",
-    "date-fns": "2.22.1",
+    "date-fns": "2.28.0",
     "next": "latest",
     "next-drupal": "latest",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "autoprefixer": "10.2.6",
-    "postcss": "8.3.5",
-    "tailwindcss": "^2.2.4"
+    "autoprefixer": "10.4.2",
+    "postcss": "8.4.5",
+    "tailwindcss": "^3.0.15"
   }
 }

examples/cms-drupal/tailwind.config.js

@@ -1,7 +1,8 @@
 module.exports = {
-  mode: 'jit',
-  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
   theme: {
     extend: {
       colors: {
@@ -32,8 +33,5 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {},
-  },
   plugins: [],
 }

examples/cms-ghost/package.json

@@ -8,15 +8,15 @@
   "dependencies": {
     "@tryghost/content-api": "^1.4.13",
     "classnames": "2.3.1",
-    "date-fns": "2.22.1",
+    "date-fns": "2.28.0",
     "lazysizes": "^5.3.0",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "autoprefixer": "10.2.6",
-    "postcss": "8.3.5",
-    "tailwindcss": "^2.2.4"
+    "autoprefixer": "10.4.2",
+    "postcss": "8.4.5",
+    "tailwindcss": "^3.0.15"
   }
 }

examples/cms-ghost/tailwind.config.js

@@ -1,7 +1,8 @@
 module.exports = {
-  mode: 'jit',
-  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
   theme: {
     extend: {
       colors: {
@@ -32,8 +33,5 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {},
-  },
   plugins: [],
 }

examples/cms-graphcms/components/cover-image.js

@@ -18,7 +18,7 @@ export default function CoverImage({ title, url, slug }) {
   return (
     <div className="sm:mx-0">
       {slug ? (
-        <Link as={`/posts/${slug}`} href="/posts/[slug]">
+        <Link href={`/posts/${slug}`}>
           <a aria-label={title}>{image}</a>
         </Link>
       ) : (

examples/cms-graphcms/package.json

@@ -7,14 +7,14 @@
   },
   "dependencies": {
     "classnames": "2.3.1",
-    "date-fns": "2.22.1",
+    "date-fns": "2.28.0",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "autoprefixer": "10.2.6",
-    "postcss": "8.3.5",
-    "tailwindcss": "^2.2.4"
+    "autoprefixer": "10.4.2",
+    "postcss": "8.4.5",
+    "tailwindcss": "^3.0.15"
   }
 }