Update blog starter example (#19698)

* bump dependencies to latest versions

* use tailwindcss class names

* use next/image component

* pass in height & width. update tailwindcss classes

* update tailwindcss classes

* mention tailwindcss 2.0

examples/blog-starter/README.md

@@ -48,4 +48,4 @@ Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&ut
 
 # Notes
 
-This blog-starter uses [Tailwind CSS](https://tailwindcss.com). To control the generated stylesheet's filesize, this example uses Tailwind CSS' v1.4 [`purge` option](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css) to remove unused CSS.
+This blog-starter uses [Tailwind CSS](https://tailwindcss.com). To control the generated stylesheet's filesize, this example uses Tailwind CSS' v2.0 [`purge` option](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css) to remove unused CSS.

examples/blog-starter/components/cover-image.js

 import cn from 'classnames'
 import Link from 'next/link'
+import Image from 'next/image'
 
-export default function CoverImage({ title, src, slug }) {
+export default function CoverImage({ title, src, slug, height, width }) {
   const image = (
-    <img
+    <Image
       src={src}
       alt={`Cover Image for ${title}`}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn('shadow-sm', {
+        'hover:shadow-md transition-shadow duration-200': slug,
       })}
+      layout="responsive"
+      width={width}
+      height={height}
     />
   )
   return (

examples/blog-starter/components/hero-post.js

@@ -14,9 +14,15 @@ export default function HeroPost({
   return (
     <section>
       <div className="mb-8 md:mb-16">
-        <CoverImage title={title} src={coverImage} slug={slug} />
+        <CoverImage
+          title={title}
+          src={coverImage}
+          slug={slug}
+          height={620}
+          width={1240}
+        />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-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]">

examples/blog-starter/components/more-stories.js

@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <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">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}

examples/blog-starter/components/post-header.js

@@ -11,7 +11,7 @@ export default function PostHeader({ title, coverImage, date, author }) {
         <Avatar name={author.name} picture={author.picture} />
       </div>
       <div className="mb-8 md:mb-16 sm:mx-0">
-        <CoverImage title={title} src={coverImage} />
+        <CoverImage title={title} src={coverImage} height={620} width={1240} />
       </div>
       <div className="max-w-2xl mx-auto">
         <div className="block md:hidden mb-6">

examples/blog-starter/components/post-preview.js

@@ -14,7 +14,13 @@ export default function PostPreview({
   return (
     <div>
       <div className="mb-5">
-        <CoverImage slug={slug} title={title} src={coverImage} />
+        <CoverImage
+          slug={slug}
+          title={title}
+          src={coverImage}
+          height={278}
+          width={556}
+        />
       </div>
       <h3 className="text-3xl mb-3 leading-snug">
         <Link as={`/posts/${slug}`} href="/posts/[slug]">

examples/blog-starter/package.json

@@ -8,17 +8,19 @@
   },
   "dependencies": {
     "classnames": "2.2.6",
-    "date-fns": "2.10.0",
+    "date-fns": "2.16.1",
     "gray-matter": "4.0.2",
     "next": "latest",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "remark": "11.0.2",
-    "remark-html": "10.0.0"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "remark": "13.0.0",
+    "remark-html": "13.0.1"
   },
   "devDependencies": {
+    "autoprefixer": "10.0.4",
+    "postcss": "8.1.10",
     "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^1.4.0"
+    "tailwindcss": "2.0.1"
   },
   "license": "MIT"
 }

examples/blog-starter/tailwind.config.js

@@ -25,8 +25,8 @@ module.exports = {
         '8xl': '6.25rem',
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        sm: '0 5px 10px rgba(0, 0, 0, 0.12)',
+        md: '0 8px 30px rgba(0, 0, 0, 0.12)',
       },
     },
   },