[examples] Add Tina CMS blog starter

examples/blog-starter/components/avatar.js

@@ -1,7 +1,14 @@
+import Image from 'next/image'
 export default function Avatar({ name, picture }) {
   return (
     <div className="flex items-center">
-      <img src={picture} className="w-12 h-12 rounded-full mr-4" alt={name} />
+      <Image
+        src={picture}
+        width="48px"
+        height="48px"
+        className="w-12 h-12 rounded-full mr-4"
+        alt={name}
+      />
       <div className="text-xl font-bold">{name}</div>
     </div>
   )

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

@@ -18,7 +18,7 @@ export default function CoverImage({ title, src, slug, height, width }) {
   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/blog-starter/components/hero-post.js

@@ -25,7 +25,7 @@ export default function HeroPost({
       <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]">
+            <Link href={`/posts/${slug}`}>
               <a className="hover:underline">{title}</a>
             </Link>
           </h3>

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

@@ -23,7 +23,7 @@ export default function PostPreview({
         />
       </div>
       <h3 className="text-3xl mb-3 leading-snug">
-        <Link as={`/posts/${slug}`} href="/posts/[slug]">
+        <Link href={`/posts/${slug}`}>
           <a className="hover:underline">{title}</a>
         </Link>
       </h3>

examples/blog-starter/package.json

@@ -16,8 +16,8 @@
     "remark-html": "15.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.0",
-    "postcss": "^8.4.4",
-    "tailwindcss": "^3.0.1"
+    "autoprefixer": "^10.4.2",
+    "postcss": "^8.4.7",
+    "tailwindcss": "^3.0.23"
   }
 }

examples/cms-tina/.tina/schema.ts

@@ -1,37 +1,37 @@
-
-import { defineSchema, defineConfig } from "tinacms";
+import { defineSchema, defineConfig } from 'tinacms'
 
 export default defineSchema({
   collections: [
     {
-      label: "Blog Posts",
-      name: "posts",
-      path: "_posts",
+      label: 'Blog Posts',
+      name: 'posts',
+      path: '_posts',
       fields: [
         {
-          type: "string",
-          label: "Title",
-          name: "title",
-        },{
-          type: "string",
-          label: "Excerpt",
-          name: "excerpt"
+          type: 'string',
+          label: 'Title',
+          name: 'title',
+        },
+        {
+          type: 'string',
+          label: 'Excerpt',
+          name: 'excerpt',
         },
         {
-          type: "string",
-          label: "Cover Image",
-          name: "coverImage"
+          type: 'string',
+          label: 'Cover Image',
+          name: 'coverImage',
         },
         {
           type: 'string',
           label: 'Date',
           name: 'date',
         },
         {
-          type: "object",
-          label: "author",
-          name: "author",
-          fields:[
+          type: 'object',
+          label: 'author',
+          name: 'author',
+          fields: [
             {
               type: 'string',
               label: 'Name',
@@ -42,36 +42,33 @@ export default defineSchema({
               label: 'Picture',
               name: 'picture',
             },
-          ]
+          ],
         },
         {
-          type: "object",
-          label: "OG Image",
-          name: "ogImage",
-          fields:[
+          type: 'object',
+          label: 'OG Image',
+          name: 'ogImage',
+          fields: [
             {
               type: 'string',
               label: 'Url',
               name: 'url',
             },
-          ]
+          ],
         },
         {
-          type: "string",
-          label: "Blog Post Body",
-          name: "body",
+          type: 'string',
+          label: 'Blog Post Body',
+          name: 'body',
           isBody: true,
           ui: {
-            component: "textarea"
+            component: 'textarea',
           },
         },
       ],
     },
   ],
-});
-
-
-
+})
 
 // Your tina config
 // ==============
@@ -92,17 +89,17 @@ export const tinaConfig = defineConfig({
     /**
      * 1. Import `tinacms` and `RouteMappingPlugin`
      **/
-    import("tinacms").then(({ RouteMappingPlugin }) => {
+    import('tinacms').then(({ RouteMappingPlugin }) => {
       /**
        * 2. Define the `RouteMappingPlugin` see https://tina.io/docs/tinacms-context/#the-routemappingplugin for more details
        **/
       const RouteMapping = new RouteMappingPlugin((collection, document) => {
-        return undefined;
-      });
+        return undefined
+      })
       /**
        * 3. Add the `RouteMappingPlugin` to the `cms`.
        **/
-      cms.plugins.add(RouteMapping);
-    });
+      cms.plugins.add(RouteMapping)
+    })
   },
-});
+})

examples/cms-tina/components/avatar.js

@@ -1,7 +1,15 @@
+import Image from 'next/image'
+
 export default function Avatar({ name, picture }) {
   return (
     <div className="flex items-center">
-      <img src={picture} className="w-12 h-12 rounded-full mr-4" alt={name} />
+      <Image
+        src={picture}
+        width="48px"
+        height="48px"
+        className="w-12 h-12 rounded-full mr-4"
+        alt={name}
+      />
       <div className="text-xl font-bold">{name}</div>
     </div>
   )

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

@@ -18,7 +18,7 @@ export default function CoverImage({ title, src, slug, height, width }) {
   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-tina/components/hero-post.js

@@ -25,7 +25,7 @@ export default function HeroPost({
       <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]">
+            <Link href={`/posts/${slug}`}>
               <a className="hover:underline">{title}</a>
             </Link>
           </h3>

examples/cms-tina/components/post-preview.js

@@ -23,7 +23,7 @@ export default function PostPreview({
         />
       </div>
       <h3 className="text-3xl mb-3 leading-snug">
-        <Link as={`/posts/${slug}`} href="/posts/[slug]">
+        <Link href={`/posts/${slug}`}>
           <a className="hover:underline">{title}</a>
         </Link>
       </h3>

examples/cms-tina/package.json

@@ -9,7 +9,7 @@
     "tina-start": "yarn tinacms server:start -c \"next start\""
   },
   "dependencies": {
-    "@tinacms/cli": "^0.60.7",
+    "@tinacms/cli": "^0.60.8",
     "classnames": "2.3.1",
     "date-fns": "2.28.0",
     "gray-matter": "4.0.3",
@@ -19,11 +19,11 @@
     "remark": "14.0.2",
     "remark-html": "15.0.1",
     "styled-components": "^5.3.3",
-    "tinacms": "^0.66.6"
+    "tinacms": "^0.66.7"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.0",
-    "postcss": "^8.4.4",
-    "tailwindcss": "^3.0.1"
+    "autoprefixer": "^10.4.2",
+    "postcss": "^8.4.7",
+    "tailwindcss": "^3.0.23"
   }
-}
+}